/* Windial support pages. Colours come from the extension's own popup (src/popup.css).
   No inline styles or scripts anywhere: these pages are served under a strict CSP. */
:root {
  color-scheme: light dark;
  --paper: #F3F4F8;
  --surface: #FFFFFF;
  --ink: #1B1F2A;
  --ink-2: #5B6270;
  --edge: #D9DCE4;
  --key: #FFFFFF;
  --key-edge: #C9CDD6;
  --link: #2A3BB0;
  --button: #4258D6;
  --on-button: #FFFFFF;
  --tile: #4258D6;
  --shadow: 0 18px 40px rgba(20, 24, 40, .16), 0 2px 6px rgba(20, 24, 40, .08);
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1C1F26;
    --surface: #23262E;
    --ink: #E8EAF0;
    --ink-2: #A5ABB8;
    --edge: #343945;
    --key: #2C303A;
    --key-edge: #4A505E;
    --link: #B9C3FF;
    --button: #7C8DF0;
    --on-button: #14182B;
    --shadow: 0 18px 40px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .3);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.6 system-ui, -apple-system, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
}
:lang(ko) p, :lang(ko) dd, :lang(ko) li, :lang(ko) h1, :lang(ko) h2, :lang(ko) h3 { word-break: keep-all; }

.page { max-width: 44rem; margin: 0 auto; padding: 20px 20px 72px; }

a { color: var(--link); text-underline-offset: .18em; }
a:focus-visible, .button:focus-visible { outline: 3px solid var(--button); outline-offset: 3px; border-radius: 4px; }

/* top bar */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 19px; color: var(--ink); text-decoration: none; }
.brand img { width: 36px; height: 36px; border-radius: 9px; display: block; }
.top .other { font-size: 15px; }

/* hero */
h1 { font-size: clamp(34px, 7.2vw, 48px); line-height: 1.06; letter-spacing: -.028em; font-weight: 700; margin: 56px 0 14px; max-width: 13em; }
:lang(ko) h1 { letter-spacing: -.04em; line-height: 1.16; }
.lede { font-size: 20px; line-height: 1.5; color: var(--ink-2); margin: 0 0 34px; max-width: 30em; }

/* the number row: the one loud thing on the page */
.strokes { display: grid; gap: 14px; max-width: 33rem; margin: 0; }
.stroke.open { display: flex; align-items: center; gap: 14px; }
.row { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; }
.cap {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1; min-width: 0;
  background: var(--key); color: var(--ink);
  border: 1.5px solid var(--key-edge); border-bottom-width: 4px; border-radius: 10px;
  font: 650 clamp(15px, 3.6vw, 21px)/1 system-ui, -apple-system, "Segoe UI", sans-serif;
}
.cap.combo { aspect-ratio: auto; height: 48px; padding: 0 16px; white-space: nowrap; flex: none; }
.cap.on { background: var(--tile); border-color: var(--tile); border-bottom-color: #2F41A8; color: #FFFFFF; }
.note { font-size: 15px; line-height: 1.45; color: var(--ink-2); margin: 0; }

/* screenshot of the real popup */
.shot { margin: 40px 0 0; }
.shot img { display: block; width: 100%; max-width: 520px; height: auto; border-radius: 12px; border: 1px solid var(--edge); box-shadow: var(--shadow); }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin: 34px 0 0; }
.button { display: inline-block; background: var(--button); color: var(--on-button); font-weight: 650; text-decoration: none; padding: 11px 20px; border-radius: 10px; }
.button:hover { filter: brightness(1.08); }

h2 { font-size: 25px; line-height: 1.2; letter-spacing: -.015em; margin: 72px 0 6px; }
h2 + p { margin-top: 6px; color: var(--ink-2); }

/* keys: a two-column list, the key on the left */
.keys { margin: 18px 0 0; border-top: 1px solid var(--edge); }
.keys > div { display: grid; grid-template-columns: 10.5rem minmax(0, 1fr); gap: 4px 20px; padding: 14px 0; border-bottom: 1px solid var(--edge); }
.keys dt { margin: 0; }
.keys dd { margin: 0; }
.keys .sub { display: block; font-size: 14px; color: var(--ink-2); margin-top: 4px; }
kbd {
  display: inline-block; min-width: 1.9em; padding: 2px 7px; text-align: center;
  background: var(--key); color: var(--ink);
  border: 1px solid var(--key-edge); border-bottom-width: 2.5px; border-radius: 6px;
  font: 600 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; white-space: nowrap;
}
code { font: 15px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--surface); border: 1px solid var(--edge); border-radius: 5px; padding: 1px 5px; overflow-wrap: anywhere; }

/* troubleshooting: questions separated by rules, no cards */
.answers { margin: 18px 0 0; border-top: 1px solid var(--edge); }
.answers section { padding: 18px 0 20px; border-bottom: 1px solid var(--edge); }
.answers h3 { font-size: 18px; line-height: 1.35; margin: 0 0 6px; }
.answers p { margin: 0; max-width: 38em; }
.answers p + p { margin-top: 8px; }

.contact p { max-width: 38em; }
.foot { margin-top: 72px; padding-top: 20px; border-top: 1px solid var(--edge); font-size: 15px; color: var(--ink-2); }
.foot p { margin: 0 0 6px; }

/* privacy pages */
.doc h1 { font-size: clamp(30px, 6vw, 40px); margin-top: 48px; max-width: none; }
.doc .updated { color: var(--ink-2); font-size: 15px; margin: 0 0 28px; }
.doc h2 { font-size: 21px; margin: 40px 0 6px; }
.doc h2 + p { color: var(--ink); }
.doc p, .doc li { max-width: 38em; }
.doc ul { padding-left: 1.2em; }
.doc li { margin: 6px 0; }

@media (max-width: 560px) {
  .page { padding: 16px 16px 56px; }
  h1 { margin-top: 40px; }
  .lede { font-size: 18px; }
  .cap.combo { height: 40px; padding: 0 13px; }
  .row { gap: 4px; }
  .cap { border-radius: 8px; border-bottom-width: 3px; }
  .keys > div { grid-template-columns: 1fr; }
  h2 { margin-top: 56px; }
}