/* Watchman app layout. Everything visual comes from the design system
   (tokens.css + components.css); this file is layout glue only. */

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body { background: radial-gradient(130% 55% at 50% -6%, rgba(212, 188, 120, 0.12), transparent 55%), var(--paper);
  color: var(--ink); font-family: var(--font-body);
  font-size: var(--text-body); -webkit-font-smoothing: antialiased; }
.hidden { display: none !important; }
button { font-family: inherit; }
a { text-decoration: none; color: inherit; }

/* ── Auth ── */
.auth { min-height: 100dvh; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 78% at 50% -12%, #FBF3DD 0%, #FFFFFF 58%); padding: var(--space-4); }
.auth-inner { width: 100%; max-width: 380px; text-align: center; }
.auth .wm-microlabel { color: var(--gold-deep); }
.auth-title { font-family: var(--font-display); font-style: italic; font-size: 3.4rem;
  margin: 8px 0 4px; font-weight: 400;
  background: var(--gold-sheen); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: wm-shimmer var(--shimmer-speed) linear infinite; }
.auth-sub { color: var(--ink-60); font-weight: 400; margin-bottom: 24px; }
.auth-card { text-align: left; display: flex; flex-direction: column; gap: 12px; }
.auth-card .wm-microlabel { color: var(--ink-45); }
.field { display: flex; flex-direction: column; gap: 5px; }
.field input, .field select, .field textarea {
  background: var(--panel); border: 1px solid transparent; border-radius: var(--radius-inner);
  padding: 11px 12px; font-family: var(--font-mono); font-size: 14px; color: var(--ink);
  width: 100%; outline: none; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--green-mid); }
.form-error { color: var(--loss); min-height: 12px; }

/* ── App shell ── */
.app { max-width: 430px; margin: 0 auto; min-height: 100dvh; display: flex;
  flex-direction: column; position: relative; }
.statusbar { display: flex; justify-content: space-between; align-items: center;
  padding: calc(10px + env(safe-area-inset-top)) 22px 6px;
  font-family: var(--font-mono); font-size: 11px; color: rgba(21, 32, 27, 0.55);
  letter-spacing: 0.1em; }
.statusbar-btn { background: none; border: none; cursor: pointer;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.15em;
  color: var(--ink-35); }
#screens { flex: 1; padding: 4px 20px calc(96px + env(safe-area-inset-bottom)); }
.screen { display: flex; flex-direction: column; gap: 12px; }

.screen-head { display: flex; justify-content: space-between; align-items: flex-end;
  margin-top: 8px; }
.screen-head .wm-title { margin-top: 2px; }

/* ── Bottom nav ── */
.bottomnav { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 430px; z-index: 40;
  padding-bottom: env(safe-area-inset-bottom); }
.navicon { width: 20px; height: 20px; fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ── Shared bits ── */
.row { display: flex; align-items: center; gap: 8px; }
.row--between { justify-content: space-between; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tile { border-radius: var(--radius-inner); padding: 12px 8px; text-align: center;
  background: var(--panel); }
.tile-value { font-family: var(--font-mono); font-size: 1.25rem; font-weight: 600; }
.tile .wm-microlabel { display: block; margin-top: 4px; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; }
.quiet { color: var(--ink-60); font-size: var(--text-small); line-height: 1.55; }
.spacer { flex: 1; }

/* Direction toggle */
.dir-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* Confluence rows */
.conf-row { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 4px 0; }
.conf-left { display: flex; align-items: center; gap: 10px; }
.conf-detail { display: flex; gap: 6px; align-items: center; }
.conf-detail select, .conf-detail input { background: var(--panel); border: none;
  border-radius: 8px; padding: 6px 8px; font-family: var(--font-mono); font-size: 11px;
  color: var(--ink); max-width: 110px; outline: none; }
.tick { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--hairline);
  background: var(--card); cursor: pointer; flex: none; display: inline-flex;
  align-items: center; justify-content: center; padding: 0; }
.tick.on { background: var(--win); border-color: var(--win); }
.tick svg { width: 13px; height: 13px; stroke: #fff; stroke-width: 2.5; fill: none;
  stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.tick.on svg { opacity: 1; }

/* Toggle pills (dxy / silver state) */
.pill-toggle { display: flex; gap: 6px; }
.pill-toggle button { flex: 1; border: 1px solid var(--hairline); background: var(--card);
  border-radius: var(--radius-pill); padding: 7px 0; font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
  color: var(--ink-45); }
.pill-toggle button.on { background: var(--green); border-color: var(--green); color: #FAF8F3; }
.pill-toggle button.on.bad { background: var(--loss); border-color: var(--loss); }

/* Check row (gate) */
.checkrow { display: flex; align-items: center; justify-content: space-between; }
.checkrow .lbl { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.dot { width: 18px; height: 18px; border-radius: 50%; flex: none; display: inline-flex;
  align-items: center; justify-content: center; }
.dot.ok { background: var(--win-soft); }
.dot.ok svg { width: 11px; height: 11px; stroke: var(--win); stroke-width: 2.5; fill: none;
  stroke-linecap: round; stroke-linejoin: round; }
.dot.bad { background: var(--loss-soft); }
.dot.bad svg { width: 11px; height: 11px; stroke: var(--loss); stroke-width: 2.5; fill: none;
  stroke-linecap: round; }

/* Arrival tile states */
.arrival-btn { width: 100%; }

/* News banner text */
.wm-newsbanner .big { font-family: var(--font-mono); font-size: 1.25rem; font-weight: 700;
  color: #FAF8F3; }

/* Journal MFE */
.trade-card + .trade-card { margin-top: 0; }
textarea.debrief { min-height: 84px; resize: vertical; font-family: var(--font-body);
  font-size: 12px; line-height: 1.6; }

/* Override modal-ish inline block */
.override-box { border: 1px solid rgba(185, 28, 28, 0.4); border-radius: var(--radius-card);
  padding: var(--space-3); background: #fff; }

/* Toast */
#toast { position: fixed; bottom: calc(84px + env(safe-area-inset-bottom)); left: 50%;
  transform: translateX(-50%); background: var(--green); color: #FAF8F3;
  border-radius: var(--radius-pill); padding: 10px 18px; font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.08em; z-index: 60; box-shadow: var(--shadow-elevated);
  max-width: 90%; text-align: center; }
#toast.error { background: var(--loss); }

/* WATCHMAN wordmark in the status bar: gold sheen */
.statusbar > span:nth-of-type(2) {
  font-weight: 700; letter-spacing: 0.24em; font-size: 11px;
  background: var(--gold-sheen); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: wm-shimmer var(--shimmer-speed) linear infinite;
}

/* ─────────────────────────────────────────────────────────────────────────
   DESKTOP: full-screen web app (>= 900px). Mobile layout above is untouched.
   Phone column becomes a shell: brand corner + top bar + left sidebar + content.
   ───────────────────────────────────────────────────────────────────────── */
@media (min-width: 900px) {
  html, body { height: 100%; overflow: hidden; }

  .app {
    max-width: none; width: 100vw; height: 100dvh; min-height: 0; margin: 0;
    display: grid;
    grid-template-columns: 256px 1fr;
    grid-template-rows: 66px 1fr;
    grid-template-areas: "brand top" "nav main";
    background:
      radial-gradient(46% 40% at 100% 0%, rgba(212, 188, 120, 0.12), transparent 62%),
      var(--paper);
  }

  /* Brand corner (top-left), above the sidebar */
  .app::before {
    content: "Sovereign"; grid-area: brand;
    display: flex; align-items: center; height: 66px; padding: 0 26px;
    font-family: var(--font-display); font-size: 1.6rem; color: var(--ink); letter-spacing: -0.01em;
    border-bottom: 1px solid var(--hairline); border-right: 1px solid var(--hairline);
    background: linear-gradient(180deg, #FFFFFF, #FCFAF4);
  }

  /* Top bar (top-right): clock + sign out. Wordmark lives in the corner. */
  .statusbar {
    grid-area: top; height: 66px; padding: 0 34px;
    border-bottom: 1px solid var(--hairline); font-size: 12px;
  }
  .statusbar > span:nth-of-type(2) { display: none; }

  /* Left sidebar = the nav, vertical */
  .bottomnav, .wm-bottomnav {
    grid-area: nav; position: static; transform: none; left: auto; bottom: auto;
    width: auto; max-width: none; height: 100%;
    flex-direction: column; align-items: stretch; gap: 4px;
    padding: 18px 14px; border-top: 0; border-right: 1px solid var(--hairline);
    background: linear-gradient(180deg, #FFFFFF, #FCFAF4); backdrop-filter: none; overflow-y: auto;
  }
  .wm-navitem {
    flex-direction: row; justify-content: flex-start; gap: 13px;
    padding: 12px 14px; border-radius: 12px; font-size: 12px; letter-spacing: 0.06em;
    color: var(--ink-60); transition: background 0.15s var(--ease-out), color 0.15s;
  }
  .wm-navitem:hover { background: var(--panel); }
  .wm-navitem--active {
    background: linear-gradient(100deg, rgba(212, 188, 120, 0.22), rgba(212, 188, 120, 0.06));
    color: var(--gold-deep);
  }
  .wm-navitem .navicon { width: 20px; height: 20px; }
  .wm-navitem--active .navicon { stroke: var(--gold-deep); }
  .wm-navdot { display: none; }

  /* Content area (bottom-right), the only scroller */
  #screens { grid-area: main; height: 100%; overflow-y: auto; padding: 34px 44px 64px; }
  .screen { max-width: 940px; margin: 0 auto; gap: 16px; }
  .screen-head { margin-top: 0; }
  .wm-title { font-size: 2.4rem; }

  /* Toast bottom-right (no bottom bar to clear) */
  #toast { bottom: 26px; left: auto; right: 30px; transform: none; }

  /* Tooltips on left-sidebar items read better to the side than above */
  .wm-navitem[data-tip]::after { bottom: auto; top: 50%; left: calc(100% + 12px); transform: translateY(-50%) translateX(-4px); }
  .wm-navitem[data-tip]::before { bottom: auto; top: 50%; left: 100%; transform: translateY(-50%) translateX(-4px); border-top-color: transparent; border-right-color: var(--ink); }
  @media (hover: hover) {
    .wm-navitem[data-tip]:hover::after, .wm-navitem[data-tip]:hover::before { transform: translateY(-50%) translateX(0); }
  }
}

/* ── Dark mode surfaces the tokens cannot reach ── */
[data-mode="dark"] body { background: radial-gradient(130% 55% at 50% -6%, rgba(212, 188, 120, 0.06), transparent 55%), var(--paper); }
[data-mode="dark"] .auth { background: radial-gradient(120% 78% at 50% -12%, #221D12 0%, #14120E 58%); }
[data-mode="dark"] .wm-bottomnav { background: rgba(20, 18, 14, 0.94); }
@media (min-width: 900px) {
  [data-mode="dark"] .app { background: radial-gradient(46% 40% at 100% 0%, rgba(212, 188, 120, 0.05), transparent 62%), var(--paper); }
  [data-mode="dark"] .app::before,
  [data-mode="dark"] .bottomnav, [data-mode="dark"] .wm-bottomnav { background: linear-gradient(180deg, var(--card), var(--paper)); }
}

/* Appearance picker */
.appearance-pills { display: flex; gap: 6px; }
.appearance-pills button { flex: 1; border: 1px solid var(--hairline); background: var(--card);
  border-radius: var(--radius-pill); padding: 8px 0; font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; color: var(--ink-45); }
.appearance-pills button.on { background: var(--gold-gradient); border-color: transparent;
  color: var(--gold-ink); font-weight: 700; }

/* ── Tooltips: explain every control ───────────────────────────────────────
   The explanatory text was already written into data-tip on buttons and nav
   items, but nothing ever displayed it, so it reached screen readers only.
   Any element carrying data-tip now explains itself on hover, and the help
   toggle reveals every tip inline for touch, where hover does not exist. */
[data-tip] { position: relative; }

@media (hover: hover) and (pointer: fine) {
  [data-tip]::after {
    content: attr(data-tip);
    position: absolute; bottom: calc(100% + 10px); left: 50%;
    transform: translateX(-50%) translateY(4px);
    min-width: 150px; max-width: 260px; width: max-content;
    background: var(--ink, #1A1712); color: #fff;
    font-family: var(--font-sans, system-ui); font-size: 12px; font-weight: 500;
    line-height: 1.4; letter-spacing: 0; text-transform: none; text-align: left;
    padding: 9px 11px; border-radius: 10px;
    box-shadow: 0 10px 30px -10px rgba(0,0,0,.45);
    opacity: 0; pointer-events: none; z-index: 90;
    transition: opacity .16s ease, transform .16s ease;
  }
  [data-tip]:hover::after, [data-tip]:focus-visible::after {
    opacity: 1; transform: translateX(-50%) translateY(0);
  }
}

/* Touch: no hover, so the tips are shown inline when help mode is on. */
body.help-on [data-tip]::before {
  content: attr(data-tip);
  display: block; margin-top: 6px;
  font-family: var(--font-sans, system-ui); font-size: 11.5px; line-height: 1.45;
  font-weight: 400; letter-spacing: 0; text-transform: none; text-align: left;
  color: var(--ink-soft, #6E6A62);
  background: var(--panel, #F6F4EF); border-left: 2px solid var(--gold-deep, #B89D55);
  padding: 7px 9px; border-radius: 0 8px 8px 0; white-space: normal;
}
body.help-on .wm-navitem[data-tip]::before { display: none; }  /* nav stays tidy */

.help-toggle.is-on { background: var(--gold-deep, #B89D55); color: #fff; }