/* ============================================================================
   FATHM v1 app + login - Home & Lake design system.
   Same brand language as /dashboard/: navy ink, warm paper, Instrument Serif
   display over Gerstner Programm UI, Coast Guard orange (FS 595 #12250)
   reserved for state that matters. Theme-aware like the dashboard.
   ========================================================================== */

@font-face { font-family: "Instrument Serif"; src: url("dashboard/assets/fonts/InstrumentSerif-Normal-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("dashboard/assets/fonts/InstrumentSerif-Italic-latin.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Gerstner Programm"; src: url("dashboard/assets/fonts/GerstnerProgramm-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Gerstner Programm"; src: url("dashboard/assets/fonts/GerstnerProgramm-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Gerstner Programm"; src: url("dashboard/assets/fonts/GerstnerProgramm-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --font-ui: "Gerstner Programm", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Instrument Serif", "Iowan Old Style", Palatino, Georgia, serif;

  --bg: #f3f1ec;
  --surface: #ffffff;
  --surface-2: #faf9f6;
  --surface-3: #f0eee8;
  --ink: #142138;
  --ink-2: #4e5a73;
  --ink-3: #8591a6;
  --line: #e8e5de;
  --line-2: #d9d5cc;

  --navy: linear-gradient(180deg, #17243e 0%, #0c1526 100%);

  --accent: #cf4e38;
  --accent-strong: #b03e28;
  --accent-ink: #7e2b1a;
  --accent-soft: #e9eff8;
  --accent-line: #c9d7ea;

  --ok-soft: #e2f2e7; --ok-ink: #1d5c35; --ok-line: #bfe0ca;

  /* tier-3 guidance: amber, outline-only - visually apart from every
     authoritative source chip */
  --guide-ink: #8a6508; --guide-line: #c9a227; --guide-soft: rgb(201 162 39 / .12);

  --shadow-sm: 0 1px 2px rgb(16 24 40 / .04), 0 2px 6px rgb(16 24 40 / .05);
  --shadow-md: 0 2px 4px rgb(16 24 40 / .05), 0 12px 28px rgb(16 24 40 / .09);
  --focus: 0 0 0 3px rgb(207 78 56 / .32);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a101e;
    --surface: #121b2e;
    --surface-2: #172236;
    --surface-3: #1f2c47;
    --ink: #e9edf5;
    --ink-2: #a6b0c3;
    --ink-3: #74809a;
    --line: #263450;
    --line-2: #384a6e;

    --accent: #ed6e52;
    --accent-strong: #f08268;
    --accent-ink: #f5a38f;
    --accent-soft: rgb(124 158 220 / .16);
    --accent-line: rgb(124 158 220 / .38);

    --ok-soft: rgb(63 185 80 / .14); --ok-ink: #7ee2a0; --ok-line: rgb(63 185 80 / .35);

    --guide-ink: #e4bf5a; --guide-line: rgb(228 191 90 / .55); --guide-soft: rgb(228 191 90 / .14);

    --shadow-sm: 0 1px 2px rgb(0 0 0 / .40), 0 2px 8px rgb(0 0 0 / .30);
    --shadow-md: 0 6px 18px rgb(0 0 0 / .50);
    --focus: 0 0 0 3px rgb(237 110 82 / .38);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.55 var(--font-ui); background: var(--bg); color: var(--ink); }
.hidden { display: none !important; }
.muted { color: var(--ink-3); font-size: 0.9em; }
.error { color: var(--accent-strong); min-height: 1.2em; font-size: 0.9em; }
h2, h3 { font-family: var(--font-display); font-weight: 400; letter-spacing: .01em; }
h2 { font-size: 1.7rem; margin: 1.1rem 0 .7rem; }
h3 { font-size: 1.25rem; margin: 1.2rem 0 .5rem; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; box-shadow: var(--focus); }

/* ------------------------------------------------------------- login ------ */
/* branded cover page: always navy, theme-agnostic */
#login-view {
  display: flex; min-height: 100vh; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #17243e 0%, #0c1526 100%);
  position: relative; overflow: hidden;
}
#login-view::before {
  content: ""; position: absolute; inset: -30% -20% auto;  height: 90%;
  background: radial-gradient(ellipse at 50% 0%, rgb(124 158 220 / .18), transparent 65%);
  pointer-events: none;
}
.login-hero { position: relative; display: flex; flex-direction: column; align-items: center; padding: 2rem 1.2rem; width: min(400px, 92vw); }
.login-mark { width: 76px; height: auto; margin-bottom: 1.1rem; opacity: .95; }
.login-hero h1 {
  margin: 0; font-family: var(--font-display); font-weight: 400;
  font-size: 3rem; letter-spacing: .14em; color: #f0f0ef; text-indent: .14em;
}
.login-tag {
  margin: .35rem 0 1.6rem; color: #989ca5; font-size: .75rem;
  letter-spacing: .22em; text-transform: uppercase; text-align: center;
}
.login-card {
  width: 100%; background: rgb(255 255 255 / .04);
  border: 1px solid rgb(255 255 255 / .09); border-radius: 20px;
  padding: 1.5rem; display: flex; flex-direction: column; gap: .7rem;
  backdrop-filter: blur(6px); box-shadow: 0 22px 46px rgb(0 0 0 / .45);
}
.login-card input {
  background: rgb(12 21 38 / .6); border: 1px solid rgb(255 255 255 / .14);
  color: #f0f0ef; border-radius: 10px; padding: .65rem .85rem; font: inherit;
}
.login-card input::placeholder { color: #8b8f98; }
.login-card input:focus-visible { border-color: rgb(124 158 220 / .6); box-shadow: 0 0 0 3px rgb(124 158 220 / .22); }
.login-card button {
  margin-top: .3rem; background: linear-gradient(180deg, #fdfdfc, #e9e6df);
  color: #142138; border: none; border-radius: 10px; padding: .65rem .85rem;
  font: inherit; font-weight: 700; letter-spacing: .02em; cursor: pointer;
  transition: filter 130ms ease, transform 130ms ease;
}
.login-card button:hover { filter: brightness(1.05); }
.login-card button:active { transform: translateY(1px); }
.login-card .error { color: #f5a38f; margin: 0; }
.login-foot { margin-top: 1.4rem; color: #6b7280; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; }

/* ------------------------------------------------------------- header ----- */
header {
  display: flex; align-items: center; gap: 1.2rem; padding: 0.65rem 1.2rem;
  background: var(--surface); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10; box-shadow: var(--shadow-sm);
}
.brand { font-family: var(--font-display); font-size: 1.25rem; letter-spacing: 0.12em; }
nav a {
  color: var(--ink-2); text-decoration: none; margin-right: 0.9rem;
  padding: .2rem 0; border-bottom: 2px solid transparent; transition: color 130ms ease;
}
nav a:hover { color: var(--ink); }
nav a.active { color: var(--ink); border-bottom-color: var(--accent); }
header #whoami { margin-left: auto; }

main { max-width: 880px; margin: 0 auto; padding: 1.2rem; }
.page { display: none; }
.page.active { display: block; }

/* ------------------------------------------------------------ controls ---- */
input, select, textarea {
  font: inherit; border-radius: 10px; border: 1px solid var(--line-2);
  background: var(--surface); color: var(--ink); padding: 0.5rem 0.7rem;
}
input::placeholder, textarea::placeholder { color: var(--ink-3); }
button {
  font: inherit; border-radius: 10px; border: 1px solid var(--ink);
  background: linear-gradient(180deg, color-mix(in srgb, var(--ink) 88%, #ffffff), var(--ink));
  color: var(--surface); padding: 0.5rem 0.9rem; font-weight: 600; cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: filter 130ms ease, transform 130ms ease, box-shadow 130ms ease;
}
button:hover { filter: brightness(1.16); box-shadow: var(--shadow-md); }
button:active { transform: translateY(1px); }
button.ghost {
  background: var(--surface); color: var(--ink); border: 1px solid var(--line-2);
  font-weight: 500; box-shadow: none;
}
button.ghost:hover { border-color: var(--ink-3); background: var(--surface-2); filter: none; }

.row { display: flex; gap: 0.5rem; margin: 0.6rem 0; flex-wrap: wrap; }
.row-between { display: flex; justify-content: space-between; align-items: center; }

/* --------------------------------------------------------------- cards ---- */
.card, .card-list > div {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 0.8rem 1rem; margin: 0.5rem 0; box-shadow: var(--shadow-sm);
  transition: border-color 130ms ease, box-shadow 200ms cubic-bezier(.2,.6,.2,1);
}
.card-list .clickable { cursor: pointer; }
.card-list .clickable:hover { border-color: var(--line-2); box-shadow: var(--shadow-md); }

.pill {
  background: var(--accent-soft); color: var(--accent-ink);
  border: 1px solid var(--accent-line);
  padding: 0.1rem 0.6rem; border-radius: 999px; font-size: 0.8em;
  font-weight: 600; letter-spacing: .04em;
}
.pill.done { background: var(--ok-soft); color: var(--ok-ink); border-color: var(--ok-line); }
.pill.overdue { background: var(--accent); color: #ffffff; border-color: var(--accent); }

#timeline div { padding: 0.3rem 0 0.3rem 1rem; border-left: 2px solid var(--line-2); margin-left: 0.4rem; }
#timeline .deadline { border-left-color: var(--accent); }

/* ---------------------------------------------------------------- chat ---- */
#chat-messages { display: flex; flex-direction: column; gap: 0.7rem; margin-bottom: 0.8rem; min-height: 200px; }
.msg { padding: 0.7rem 1rem; border-radius: 14px; max-width: 85%; white-space: pre-wrap; }
.msg.user { background: var(--accent-soft); border: 1px solid var(--accent-line); align-self: flex-end; }
.msg.assistant { background: var(--surface); border: 1px solid var(--line); align-self: flex-start; box-shadow: var(--shadow-sm); }
.msg .citations { margin-top: 0.6rem; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.citation-chip {
  background: var(--surface-2); border: 1px solid var(--line-2); color: var(--ink-2);
  border-radius: 7px; padding: 0.1rem 0.5rem; font-size: 0.85em; cursor: pointer;
  transition: border-color 130ms ease, color 130ms ease, background 130ms ease;
}
.citation-chip:hover { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); }
/* tier-3 guidance chips: amber outline, transparent fill - reads as
   "labeled best practice", never as an authoritative source */
.citation-chip.guidance {
  background: transparent; border: 1px dashed var(--guide-line); color: var(--guide-ink);
}
.citation-chip.guidance:hover {
  border-color: var(--guide-ink); color: var(--guide-ink); background: var(--guide-soft);
}
.msg .flag { margin-top: 0.4rem; }
.msg.typing { display: inline-flex; align-items: center; gap: .32rem; padding: .9rem 1.05rem; }
.msg.typing .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ink-3); opacity: .45;
  animation: typing-pulse 1.2s infinite ease-in-out;
}
.msg.typing .dot:nth-child(2) { animation-delay: .18s; }
.msg.typing .dot:nth-child(3) { animation-delay: .36s; }
@keyframes typing-pulse {
  0%, 60%, 100% { transform: translateY(0); opacity: .45; }
  30% { transform: translateY(-4px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .msg.typing .dot { animation: none; } }

.chat-input textarea { flex: 1; }

/* -------------------------------------------------------------- verify ---- */
.verify-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 0.8rem; }
.verify-page img { width: 100%; border: 1px solid var(--line-2); border-radius: 10px; background: white; }
.verify-structure { max-height: 80vh; overflow-y: auto; }
.verify-structure .para { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 0.6rem 0.8rem; margin-bottom: 0.5rem; }
.verify-structure .para pre { white-space: pre-wrap; font-size: 0.82em; color: var(--ink-2); margin: 0.4rem 0 0; max-height: 9em; overflow-y: auto; }
@media (max-width: 900px) { .verify-split { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------- modal ---- */
.modal { position: fixed; inset: 0; background: rgb(12 21 38 / 0.55); display: flex; align-items: center; justify-content: center; z-index: 50; }
.modal-body { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 1.2rem; width: min(640px, 92vw); max-height: 80vh; overflow: auto; position: relative; box-shadow: var(--shadow-md); }
.modal-body .close { position: absolute; top: 0.6rem; right: 0.6rem; }
.modal-body pre { white-space: pre-wrap; background: var(--surface-3); padding: 0.8rem; border-radius: 10px; }