/* The app's one stylesheet.
 *
 * Two visual directions were built against live data and compared on the real
 * weekly schedule page; this is the one that was chosen (the "dashboard"
 * direction -- card-based, airier, roll-ups first). The other has been removed
 * rather than left behind a flag, so there is one layout to maintain.
 *
 * No build step and no framework -- this account has no shell, so there is no
 * npm, no compiler and nothing to run. Plain CSS, custom properties for the
 * theming, and CSS grid for the week view.
 */

:root {
  --radius: 6px;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --bg: #f4f6f8;
  --panel: #ffffff;
  --panel-2: #f8fafc;
  --ink: #0f172a;
  --ink-2: #475569;
  --ink-3: #94a3b8;
  --line: #e4e9f0;
  --accent: #0f6f7a;
  --accent-soft: #e4f3f5;
  --warn: #92400e;
  --warn-soft: #fef6e7;
  --pad: 10px 12px;
  --fs: 14px;
  --gap: 20px;
  --shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 10px rgba(15, 23, 42, .04);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: var(--fs)/1.5 var(--sans);
  color: var(--ink);
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 18px 60px; }

/* ---------- top bar ----------------------------------------------------- */
.topbar {
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 30;
  box-shadow: var(--shadow);
}
.topbar-in {
  max-width: 1180px; margin: 0 auto; padding: 10px 18px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.brand { font-weight: 650; letter-spacing: -.01em; display: flex; align-items: center; gap: 8px; }
.brand .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.brand small { font-weight: 400; color: var(--ink-3); }
.topbar nav { display: flex; gap: 2px; flex-wrap: wrap; }
.topbar nav a {
  padding: 5px 10px; border-radius: var(--radius); color: var(--ink-2); font-size: .93em;
}
.topbar nav a:hover { background: var(--panel-2); text-decoration: none; }
.topbar nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.spacer { margin-left: auto; }
.whoami { color: var(--ink-3); font-size: .88em; }

/* ---------- page header + week picker ----------------------------------- */
.pagehead { padding: var(--gap) 0; display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; }
.pagehead h1 { margin: 0; font-size: 1.45em; letter-spacing: -.02em; font-weight: 650; }
.pagehead .wk { color: var(--ink-2); margin: 2px 0 0; }
.pagehead .wk b { color: var(--ink); }

.weekform { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
select, input[type="date"], input[type="text"], input[type="password"] {
  font: inherit; color: var(--ink); background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 9px;
}
select:focus, input:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }

.actions { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.btn {
  display: inline-block; padding: 6px 12px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--panel); color: var(--ink-2);
  font-size: .9em; cursor: pointer;
}
.btn:hover { background: var(--panel-2); text-decoration: none; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent); filter: brightness(1.08); }

hr.rule { border: 0; border-top: 1px solid var(--line); margin: var(--gap) 0; }

/* ---------- generic panel ----------------------------------------------- */
.panel {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: var(--gap);
}
.panel > h2 {
  margin: 0; padding: 10px 14px; font-size: .95em; font-weight: 650;
  border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 8px;
}
.panel > h2 .count { color: var(--ink-3); font-weight: 400; }
.panel-body { padding: 12px 14px; }

.note { background: var(--warn-soft); border: 1px solid #f0e2c0; color: var(--warn);
        padding: 9px 12px; border-radius: var(--radius); font-size: .9em; }
.empty { color: var(--ink-3); font-style: italic; padding: 10px 0; }

/* ---------- tables ------------------------------------------------------ */
table.grid { width: 100%; border-collapse: collapse; }
table.grid th, table.grid td { padding: var(--pad); text-align: left; vertical-align: top; }
table.grid thead th {
  font-size: .76em; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-3); font-weight: 650; border-bottom: 1px solid var(--line);
}
table.grid tbody tr + tr td { border-top: 1px solid var(--line); }
table.grid td.num { text-align: right; font-variant-numeric: tabular-nums; }
.time { font-family: var(--mono); font-size: .92em; color: var(--ink-2); white-space: nowrap; }
.notes { color: var(--ink-2); }

/* ---------- KPI strip + week jump grid + day cards ---------------------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 12px; margin-bottom: var(--gap); }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
       padding: 12px 14px; box-shadow: var(--shadow); }
.kpi .v { font-size: 1.6em; font-weight: 650; letter-spacing: -.02em; line-height: 1.1;
          font-variant-numeric: tabular-nums; }
.kpi .k { color: var(--ink-3); font-size: .78em; text-transform: uppercase; letter-spacing: .06em; margin-top: 3px; }

.weekstrip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-bottom: var(--gap); }
.wsday {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 9px 10px; box-shadow: var(--shadow); text-align: center; color: inherit;
}
.wsday:hover { text-decoration: none; border-color: var(--accent); }
.wsday .d { font-size: .74em; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); }
.wsday .n { font-size: 1.3em; font-weight: 650; font-variant-numeric: tabular-nums; }
.wsday .l { font-size: .74em; color: var(--ink-3); }
.wsday.zero { background: var(--panel-2); }
.wsday.zero .n { color: var(--ink-3); font-weight: 400; }
.wsday.today { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }

.cols { display: grid; grid-template-columns: 1fr 320px; gap: var(--gap); align-items: start; }
@media (max-width: 900px) { .cols { grid-template-columns: 1fr; } .weekstrip { grid-template-columns: repeat(4, 1fr); } }

.daycard { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
           box-shadow: var(--shadow); margin-bottom: var(--gap); overflow: hidden; }
.daycard > header {
  padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--panel-2);
  display: flex; align-items: baseline; gap: 10px;
}
.daycard > header h3 { margin: 0; font-size: .98em; font-weight: 650; }
.daycard > header .meta { color: var(--ink-3); font-size: .85em; margin-left: auto; }
.house { padding: 10px 14px; }
.house + .house { border-top: 1px solid var(--line); }
.house h4 { margin: 0 0 6px; font-size: .88em; font-weight: 650; color: var(--accent);
            text-transform: uppercase; letter-spacing: .05em; }
.shift { display: flex; gap: 10px; align-items: baseline; padding: 3px 0; flex-wrap: wrap; }
.shift .who { font-weight: 550; min-width: 170px; }
.shift .notes { flex: 1 1 200px; font-size: .9em; }
.chip {
  display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .78em;
  background: var(--accent-soft); color: var(--accent); white-space: nowrap;
}
.chip.muted { background: var(--panel-2); color: var(--ink-3); }

.ptorow { padding: 8px 0; }
.ptorow + .ptorow { border-top: 1px solid var(--line); }
.ptorow .who { font-weight: 600; }
.ptorow .when { color: var(--ink-2); font-size: .9em; }
.ptorow .cov { color: var(--ink-3); font-size: .85em; }

.evt { padding: 10px 0; }
.evt + .evt { border-top: 1px solid var(--line); }
.evt .t { font-weight: 600; }
.evt .m { color: var(--ink-2); font-size: .9em; }
.evt .a { color: var(--ink-3); font-size: .87em; white-space: pre-line; }

/* ---------- task completion sheet --------------------------------------- */
.taskrow { display: flex; gap: 9px; align-items: baseline; padding: 4px 0; flex-wrap: wrap; }
.taskrow input[type="checkbox"] { margin: 0; accent-color: var(--accent); }
.taskrow .t { flex: 1 1 240px; }
.taskrow .cond { color: var(--ink-3); font-size: .88em; }
.taskrow.done .t { color: var(--ink-2); }
.taskrow:not(.done) .t { font-weight: 550; }

/* ---------- chat ("Ask") ------------------------------------------------- */
.chatlog { max-height: 56vh; overflow-y: auto; }
.msg { display: flex; margin-bottom: 14px; }
.msg.user { justify-content: flex-end; }
.msg .bub {
  max-width: 85%; padding: 9px 13px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--panel-2);
}
.msg.user .bub { background: var(--accent); border-color: var(--accent); color: #fff; border-bottom-right-radius: 3px; }
.msg.ai { flex-direction: column; align-items: flex-start; }
.msg.ai .bub { background: var(--panel); border-bottom-left-radius: 3px; }
.msg .bub > :first-child { margin-top: 0; }
.msg .bub > :last-child { margin-bottom: 0; }
.msg .bub p { margin: 0 0 8px; }
.msg .bub :is(ul, ol) { margin: 0 0 8px; padding-left: 20px; }
.msg .bub li { margin-bottom: 3px; }
.msg .bub code { font-family: var(--mono); font-size: .9em; background: var(--panel-2); padding: 1px 4px; border-radius: 3px; }
.msg.user .bub code { background: rgba(255,255,255,.18); }
.msg .bub.err { background: #fdeceb; border-color: #f5c3bf; color: #9b2c22; }

/* markdown tables in an answer. Styled to match table.grid rather than reusing
   it: the grid sits on a white panel, this sits inside a tinted bubble. */
.mdwrap { overflow-x: auto; margin: 0 0 8px; }
.msg .bub table.md { border-collapse: collapse; width: 100%; font-size: .93em; }
/* Not nowrap: event titles here run to sixty characters, and holding them on
   one line turns every table into a horizontal scroll. Dates are the ones
   worth protecting, so only the first column is pinned. */
.msg .bub table.md :is(th, td) { padding: 5px 9px; text-align: left; vertical-align: top; }
.msg .bub table.md :is(th, td):first-child { white-space: nowrap; }
.msg .bub table.md thead th {
  font-size: .76em; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-3); font-weight: 650; border-bottom: 1px solid var(--line);
}
.msg .bub table.md tbody tr + tr td { border-top: 1px solid var(--line); }
/* A table needs the room: 85% of the column is comfortable for prose and tight
   for four columns of dates. Browsers without :has() just scroll instead. */
.msg.ai .bub:has(.mdwrap) { max-width: 100%; }
.trail { display: flex; gap: 5px; flex-wrap: wrap; margin: 6px 0 0 2px; }
.trail .chip { font-size: .73em; }

/* three dots while the answer is in flight */
.thinking { display: flex; gap: 4px; align-items: center; padding: 13px; }
.thinking span { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); animation: blink 1.3s infinite both; }
.thinking span:nth-child(2) { animation-delay: .18s; }
.thinking span:nth-child(3) { animation-delay: .36s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .thinking span { animation: none; opacity: .5; } }

.composer { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--line); align-items: flex-end; }
.composer textarea {
  flex: 1; font: inherit; color: var(--ink); background: var(--panel); resize: vertical;
  border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; min-height: 42px;
}
.composer textarea:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.composer textarea:disabled { background: var(--panel-2); color: var(--ink-3); }
.btn.suggest { margin: 0 6px 6px 0; text-align: left; }

.richtext :is(h1,h2,h3) { font-size: 1em; }
.richtext img { max-width: 100%; height: auto; }
.richtext table { max-width: 100%; }

/* ---------- login ------------------------------------------------------- */
.loginwrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.loginbox { width: 100%; max-width: 360px; background: var(--panel); border: 1px solid var(--line);
            border-radius: 10px; box-shadow: var(--shadow); padding: 26px; }
.loginbox h1 { margin: 0 0 4px; font-size: 1.2em; }
.loginbox p.sub { margin: 0 0 18px; color: var(--ink-3); font-size: .9em; }
.loginbox label { display: block; font-size: .83em; color: var(--ink-2); margin: 12px 0 4px; font-weight: 600; }
.loginbox input { width: 100%; }
.loginbox .btn-primary { width: 100%; margin-top: 18px; padding: 9px; text-align: center; }
.err { background: #fdeceb; border: 1px solid #f5c3bf; color: #9b2c22;
       padding: 9px 11px; border-radius: var(--radius); font-size: .9em; margin-bottom: 4px; }

footer.foot { color: var(--ink-3); font-size: .82em; padding: 18px 0; border-top: 1px solid var(--line); }
footer.foot code { font-family: var(--mono); }