/* MyRemind — page chrome shared by every PHP page.
   app.css layers the reminder list on top of this on the dashboard.
   System fonts, one accent, no framework, no CDN, no web fonts, no external request. */

:root {
  --accent: #2f62d8;
  --accent-ink: #ffffff;

  --bg: #f6f7f9;
  --card: #ffffff;
  --ink: #1b1d21;
  --ink-soft: #5c6470;
  --ink-faint: #8b929c;
  --line: #e0e3e8;
  --danger: #c0392b;
  --danger-bg: #fdf0ee;
  --ok: #1f7a45;
  --ok-bg: #eefaf2;
  --note-bg: #fff6e5;
  --note-line: #f0c86a;

  --radius: 8px;
  --tap: 44px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --accent: #6f97ee;
    --accent-ink: #10141c;

    --bg: #14171c;
    --card: #1c2029;
    --ink: #e8eaee;
    --ink-soft: #a4acb8;
    --ink-faint: #7b838f;
    --line: #2c313b;
    --danger: #e07a6f;
    --danger-bg: #2b1c1a;
    --ok: #5cc08a;
    --ok-bg: #16261d;
    --note-bg: #2e2717;
    --note-line: #6b5828;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
        Arial, "Noto Sans", sans-serif;
}

main {
  max-width: 640px;
  margin: 0 auto;
  padding: 24px 16px 64px;
}
body.wide main { max-width: 760px; }

/* Header ---------------------------------------------------------------- */
.site-header {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
.site-header .brand {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -.01em;
  color: var(--ink);
  text-decoration: none;
}
.site-header nav {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
  font-size: 14px;
}
.site-header nav a { color: var(--accent); text-decoration: none; }
.site-header nav a:hover { text-decoration: underline; }
.site-header .who { color: var(--ink-faint); }

/* Typography ------------------------------------------------------------ */
h1 { margin: 0 0 6px; font-size: 22px; letter-spacing: -.01em; }
h2 { margin: 0 0 8px; font-size: 17px; }
.lede { margin: 0 0 16px; color: var(--ink-soft); }
.lede.spaced { margin-top: 16px; }
.muted { color: var(--ink-faint); }
.center { text-align: center; }
.spacer { flex: 1; }
.hint { display: block; margin-top: 3px; font-size: 12px; font-weight: 400; color: var(--ink-faint); }
.footnote { margin: 14px 0 0; font-size: 13px; color: var(--ink-soft); }
.footnote a { color: var(--accent); }

/* Cards ----------------------------------------------------------------- */
.card {
  padding: 22px;
  margin-bottom: 18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.card.narrow { max-width: 420px; margin-left: auto; margin-right: auto; }

/* Controls -------------------------------------------------------------- */
button, .button {
  display: inline-block;
  font: inherit;
  min-height: 34px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
button:hover, .button:hover { border-color: var(--ink-faint); }
button:focus-visible, .button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
button:disabled { opacity: .55; cursor: default; }

button.primary, .button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}
button.primary:hover { filter: brightness(1.06); }
button.ghost { background: transparent; }
button.danger { color: var(--danger); border-color: var(--line); }
button.danger:hover { border-color: var(--danger); }
.wide { width: 100%; min-height: var(--tap); margin-top: 16px; }

input[type=text], input[type=password], input[type=date], input[type=time],
input[type=number], textarea, select {
  font: inherit;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
}
input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  border-color: var(--accent);
}

label {
  display: block;
  margin: 14px 0 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
}
label.check {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
  font-weight: 400;
  color: var(--ink);
}
label.check input { width: auto; margin: 0; }
label.check .hint { flex-basis: 100%; margin-left: 24px; }

/* Notices --------------------------------------------------------------- */
.notice {
  margin: 0 0 16px;
  padding: 9px 12px;
  border-radius: var(--radius);
  font-size: 14px;
}
.notice.error { background: var(--danger-bg); border: 1px solid var(--danger); color: var(--danger); }
.notice.ok    { background: var(--ok-bg);     border: 1px solid var(--ok);     color: var(--ok); }
.notice.note  { background: var(--note-bg);   border: 1px solid var(--note-line); color: var(--ink); }

/* Pairing code ---------------------------------------------------------- */
.code-label {
  margin: 20px 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.pairing-code {
  margin: 0;
  padding: 16px 12px;
  background: var(--bg);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: clamp(20px, 6vw, 28px);
  font-weight: 600;
  letter-spacing: .08em;
  text-align: center;
  word-break: break-all;
  user-select: all;
}

/* Devices --------------------------------------------------------------- */
.device-list { margin-top: 16px; }
.device {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.device:last-child { border-bottom: 1px solid var(--line); }
.device-main { flex: 1; min-width: 0; }
.device-label {
  font-weight: 600;
  border-color: transparent;
  background: transparent;
  padding: 4px 6px;
}
.device-label:hover { border-color: var(--line); }
.device-meta { margin-top: 2px; padding-left: 6px; font-size: 12px; color: var(--ink-faint); }

/* Dashboard toolbar ----------------------------------------------------- */
#toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.sync-state { font-size: 12px; color: var(--ink-faint); }

/* Home page ------------------------------------------------------------- */
.hero { margin-bottom: 26px; }
.hero h1 { font-size: 26px; }

.facts { margin: 0 0 8px; padding: 0; list-style: none; }
.facts li {
  position: relative;
  padding: 6px 0 6px 22px;
  color: var(--ink-soft);
}
.facts li::before {
  content: "";
  position: absolute;
  left: 4px; top: 15px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.download-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.download-row .button.primary { min-height: var(--tap); padding: 11px 22px; margin: 0; }
.download-meta { font-size: 13px; color: var(--ink-soft); }
.sha {
  margin-top: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--ink-faint);
  word-break: break-all;
}

/* The install steps are the substance of the page, so they get real hierarchy. */
.steps { margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps > li {
  position: relative;
  padding: 0 0 22px 46px;
  counter-increment: step;
}
.steps > li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 15px; top: 34px; bottom: 4px;
  width: 2px;
  background: var(--line);
}
.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0; top: 0;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
}
.steps h3 { margin: 4px 0 4px; font-size: 15px; }
.steps p { margin: 0; color: var(--ink-soft); }

.copyable {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 5px 6px 5px 10px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.copyable code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  user-select: all;
}
.copyable button { min-height: 26px; padding: 2px 8px; font-size: 12px; }

/* Floating "Get the extension" ------------------------------------------
   Shown on every signed-in page. Once you are signed in the header is all
   Reminders/Devices and nothing points at the download, which is the one thing
   a new person still needs. */
.get-extension {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 50;

  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 12px 20px;

  background: var(--accent);
  color: var(--accent-ink);
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .22);

  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.get-extension:hover { filter: brightness(1.06); }
.get-extension:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.get-extension span { font-size: 16px; line-height: 1; }

/* Keep the button clear of the last row of content rather than sitting on top of it. */
main { padding-bottom: 96px; }

/* Phone ----------------------------------------------------------------- */
@media (max-width: 640px) {
  /* Tucked in tighter, and it keeps the label — an unlabelled circle would be a
     guessing game, and there is room for four words. */
  .get-extension {
    right: 12px;
    bottom: 12px;
    padding: 11px 16px;
    font-size: 13px;
  }
  main { padding-bottom: 88px; }
}

@media (max-width: 640px) {
  main { padding: 16px 12px 48px; }
  .card { padding: 16px; }
  .site-header { padding: 10px 12px; gap: 10px; }
  .site-header nav { gap: 12px; font-size: 13px; }
  .site-header .who { display: none; }
  .device { flex-wrap: wrap; }
  .steps > li { padding-left: 40px; }
}