/*
  MC LAN Proxy help pages — shared stylesheet.

  Shared rather than inlined because these pages exist in eight languages, and
  duplicating this into each of them means every design change is eight edits
  and seven chances to miss one.

  LOGICAL PROPERTIES, NOT PHYSICAL ONES. padding-inline-start, not padding-left;
  border-inline-start, not border-left; inset-inline-start, not left. The Arabic
  page sets dir="rtl" and every indent, border and step-number bubble has to
  mirror with it. A single padding-left here silently breaks that one page while
  looking perfect in the other seven.

  No JavaScript anywhere on these pages: the app's HelpActivity never calls
  setJavaScriptEnabled, so JS does not run in the WebView where most readers see
  this. Everything interactive is <details> or :target.
*/

:root {
  --bg: #ffffff;
  --bg-soft: #f5f7f7;
  --card: #ffffff;
  --text: #1c2321;
  --muted: #5b6764;
  --line: #dfe5e4;
  --brand: #00574b;
  --brand-bright: #008577;
  --brand-wash: #eef6f4;
  --warn-wash: #fff8e1;
  --warn-line: #e8d9a0;
  --warn-text: #5d4037;
  --radius: 12px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14181a;
    --bg-soft: #1a1f21;
    --card: #1b2123;
    --text: #e6ecea;
    --muted: #9fb0ac;
    --line: #2c3538;
    --brand: #5fd0bd;
    --brand-bright: #7fdccb;
    --brand-wash: #17302c;
    --warn-wash: #2e2716;
    --warn-line: #5a4a24;
    --warn-text: #f0dfb8;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.62 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  overflow-wrap: break-word;
}
.wrap { max-width: 820px; margin: 0 auto; padding: 0 20px 72px; }

/* ------------------------------------------------------------------ header */
header {
  background: var(--brand);
  color: #fff;
  padding: 30px 0 26px;
  margin-bottom: 26px;
}
@media (prefers-color-scheme: dark) { header { background: #10312c; } }
header .wrap { padding-bottom: 0; }
header a { color: #cfe9e3; }
.masthead { display: flex; align-items: center; gap: 16px; }
.masthead img {
  width: 56px; height: 56px; flex: 0 0 auto;
  border-radius: 14px;
  background: #fff;
}
.masthead h1 { margin: 0 0 4px; font-size: 1.6rem; line-height: 1.22; letter-spacing: -0.01em; }
.masthead p { margin: 0; color: #cfe9e3; font-size: 1rem; }
@media (prefers-color-scheme: dark) { .masthead p { color: #9fc6bf; } }
@media (max-width: 460px) {
  .masthead { gap: 12px; }
  .masthead img { width: 44px; height: 44px; }
  .masthead h1 { font-size: 1.32rem; }
  .masthead p { font-size: .93rem; }
}

/* language switcher */
.langs {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: .88rem;
}
.langs a { color: #cfe9e3; text-decoration: none; border-bottom: 1px solid transparent; }
.langs a:hover { border-bottom-color: currentColor; }
.langs [aria-current="page"] { color: #fff; font-weight: 700; }
@media (prefers-color-scheme: dark) {
  .langs a { color: #9fc6bf; }
  .langs [aria-current="page"] { color: #e6ecea; }
}

/* ----------------------------------------------------------------- typography */
h2 {
  font-size: 1.3rem;
  margin: 44px 0 4px;
  padding-top: 10px;
  border-top: 3px solid var(--brand-bright);
  display: inline-block;
  letter-spacing: -0.01em;
}
h3 { font-size: 1.06rem; margin: 26px 0 6px; }
h4 { font-size: .97rem; margin: 18px 0 4px; color: var(--muted); }
p, li { margin: 8px 0; }
ul, ol { padding-inline-start: 22px; }
li > ul, li > ol { margin: 4px 0; }
a { color: var(--brand-bright); }
a:hover { color: var(--brand); }
strong { font-weight: 700; }
.lede { color: var(--muted); margin-top: 10px; }
.small { font-size: .9rem; color: var(--muted); }

/* ---------------------------------------------------------------- components */
code, .ui {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .88em;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 6px;
}
/*
  Hostnames and port numbers are always Latin, and inside an RTL paragraph the
  bidi algorithm will happily move a trailing dot or colon to the wrong end of
  "play.example.com". Pin them.

  Deliberately NOT applied to .path, whose contents ARE translated (Android's
  own menus are localised), and which must flow with the surrounding text.

  isolate, NOT bidi-override plus display:inline-block. inline-block gives the
  element a layout box, which rendered as a visible gap between a code span and
  the punctuation right after it on the Arabic page. isolate is the property
  actually meant for this: it makes the element opaque to the surrounding bidi
  run without touching layout.
*/
[dir="rtl"] code {
  direction: ltr;
  unicode-bidi: isolate;
}

.path {
  font-weight: 600;
  background: var(--brand-wash);
  border-radius: 5px;
  padding: 1px 7px;
  color: var(--brand);
  font-size: .93em;
}
@media (prefers-color-scheme: dark) { .path { color: var(--brand-bright); } }

.note, .warn {
  border: 1px solid var(--line);
  background: var(--bg-soft);
  border-inline-start: 4px solid var(--brand-bright);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin: 18px 0;
}
.warn {
  background: var(--warn-wash);
  border-color: var(--warn-line);
  border-inline-start-color: #d9a441;
  color: var(--warn-text);
}
.note :first-child, .warn :first-child { margin-top: 0; }
.note :last-child, .warn :last-child { margin-bottom: 0; }

/* table of contents */
nav.toc {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 20px;
}
nav.toc h2 {
  border: 0; margin: 0 0 8px; padding: 0;
  font-size: .82rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); display: block;
}
nav.toc > ol { margin: 0; padding-inline-start: 20px; }
nav.toc li { margin: 5px 0; }
nav.toc ul {
  list-style: none;
  padding-inline-start: 0;
  margin: 4px 0 10px;
  font-size: .93rem;
}
nav.toc ul li { margin: 3px 0; color: var(--muted); }

/* accordions */
details {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  margin: 12px 0;
  overflow: hidden;
}
details[open] { border-color: var(--brand-bright); }
summary {
  cursor: pointer;
  padding: 14px 16px;
  font-weight: 600;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
summary::-webkit-details-marker { display: none; }
summary::before {
  content: "+";
  color: var(--brand-bright);
  font-weight: 700;
  font-size: 1.15em;
  line-height: 1;
  flex: 0 0 auto;
}
details[open] > summary::before { content: "\2013"; }
details[open] > summary { border-bottom: 1px solid var(--line); }
/* The custom marker replaced the browser's own affordance, so keyboard users
   need this back explicitly. */
summary:focus-visible {
  outline: 3px solid var(--brand-bright);
  outline-offset: -3px;
}
.body { padding: 4px 16px 14px; }
.body > :first-child { margin-top: 10px; }
/* Inside a card these are the branch points of the whole answer, so they are
   NOT the muted grey that h4 gets elsewhere. */
.body h4 {
  color: var(--text);
  font-size: 1.02rem;
  font-weight: 700;
  margin: 20px 0 4px;
}
.body > h4:first-child { margin-top: 12px; }

/* numbered steps */
ol.steps { counter-reset: s; list-style: none; padding-inline-start: 0; }
ol.steps > li {
  counter-increment: s;
  position: relative;
  padding-inline-start: 38px;
  margin: 12px 0;
}
ol.steps > li::before {
  content: counter(s);
  position: absolute;
  inset-inline-start: 0;
  top: 1px;
  width: 25px; height: 25px;
  border-radius: 50%;
  background: var(--brand-bright);
  color: #fff;
  font-size: .8rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
@media (prefers-color-scheme: dark) { ol.steps > li::before { color: #0d2320; } }

/* status-message glossary */
dl.readings { margin: 18px 0; }
dl.readings > div {
  display: grid;
  grid-template-columns: minmax(150px, 34%) 1fr;
  gap: 4px 18px;
  border-top: 1px solid var(--line);
  padding: 12px 0;
}
dl.readings > div:last-child { border-bottom: 1px solid var(--line); }
dl.readings dt { font-weight: 600; }
dl.readings dd { margin: 0; color: var(--muted); }
@media (max-width: 560px) {
  dl.readings > div { grid-template-columns: 1fr; gap: 2px; }
}

/* back to top */
.totop {
  display: block;
  margin: 26px 0 0;
  font-size: .86rem;
  color: var(--muted);
  text-decoration: none;
}
.totop:hover { color: var(--brand-bright); }

/* anchor targets should be obvious after a jump */
h2, h3, details { scroll-margin-top: 16px; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  :target { animation: flash 1.6s ease-out; }
  @keyframes flash {
    from { background: var(--brand-wash); }
    to { background: transparent; }
  }
}

footer {
  border-top: 1px solid var(--line);
  margin-top: 44px;
  padding-top: 20px;
  color: var(--muted);
  font-size: .9rem;
}