/* Homebase Phase 1 frontend
   Tokens per docs/decisions.md Accessibility section + screens/*.html reference frames. */

:root{
  --ink:#0a0a0a;
  --paper:#f4f3f0;
  --card:#ffffff;
  --line-soft:#d8d6d0;
  --dim:#5A5954;
  --signal:#C63D00;
}

*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; }
body{
  background:#e7e5e0;
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  color:var(--ink);
  font-size:1rem;
}
.mono{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
button, input, select, textarea{ font-family:inherit; }

a{ color:inherit; }

:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:2px;
}

/* ---------- app shell ---------- */
#app{
  max-width:480px;
  margin:0 auto;
  min-height:100vh;
  background:var(--paper);
  display:flex;
  flex-direction:column;
  border-left:1px solid var(--line-soft);
  border-right:1px solid var(--line-soft);
  position:relative;
}

.screen{ display:flex; flex-direction:column; flex:1; min-height:0; }
.screen[hidden]{ display:none; }
/* #app{display:flex} (id selector, specificity 100) would otherwise beat
   the UA [hidden]{display:none} (specificity 10) -- Phase 4 hides #app
   behind the login/invite screens, so this override is load-bearing. */
#app[hidden]{ display:none; }

/* ---------- dev user switcher ----------
   Dev-only stand-in for auth (Phase 4). Deliberately subordinate: small,
   dim, low-contrast until interacted with, tucked out of the way at the
   bottom-left, never using the app's orange signal color. Fixed at every
   width; offsets are tuned per breakpoint below so it clears the chat bar
   without overlapping its input. */
#dev-user-switch[hidden]{ display:none; }
#dev-user-switch{
  position:fixed;
  left:0.5rem;
  bottom:6.75rem;
  z-index:16;
  display:flex;
  align-items:center;
  gap:0.3125rem;
  border:1px solid var(--line-soft);
  background:rgba(244,243,240,0.6);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:0.625rem;
  padding:0.1875rem 0.3125rem;
  color:var(--dim);
  opacity:0.55;
  transition:opacity .15s ease, background-color .15s ease;
}
#dev-user-switch:hover,
#dev-user-switch:focus-within{
  opacity:1;
  background:var(--card);
}
.dev-switch-label{
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--dim);
  padding-right:0.125rem;
}
#dev-user-switch button{
  min-height:1.375rem;
  min-width:1.75rem;
  padding:0 0.375rem;
  border:1px solid var(--line-soft);
  background:none;
  color:var(--dim);
  font-family:inherit;
  font-size:inherit;
  cursor:pointer;
}
#dev-user-switch button + button{ margin-left:0.1875rem; }
#dev-user-switch button[aria-pressed="true"]{ background:var(--dim); color:var(--paper); border-color:var(--dim); }

/* ---------- header ---------- */
header.app-header{
  padding:1.375rem 1.25rem 1rem;
  border-bottom:1px solid var(--ink);
  background:var(--paper);
  position:relative;
}
.head-row{ display:flex; justify-content:space-between; align-items:flex-start; gap:0.625rem; flex-wrap:nowrap; }
.head-titles{ flex:1; min-width:0; }
.head-titles h1{ font-size:2.125rem; line-height:1; font-weight:800; letter-spacing:-0.02em; }
.head-titles .date{ margin-top:0.375rem; font-size:0.75rem; letter-spacing:.06em; text-transform:uppercase; color:var(--dim); }
.head-titles .history-link{
  display:block; min-height:0; margin:0.4375rem 0 0; padding:0.3125rem 0;
  font-size:0.65625rem;
}

/* ---------- header controls cluster: bell / gear / view dropdown, one
   bordered row with hairline dividers between items (not stacked boxes) --- */
.head-controls{
  display:flex; align-items:stretch; flex:none;
  border:1px solid var(--ink);
  background:var(--paper);
  height:2.75rem;
}
.head-controls > * + *{ border-left:1px solid var(--ink); }

/* ---------- notifications bell / profile gear ---------- */
.bell-btn{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  width:2.75rem; height:2.75rem;
  border:none;
  background:none; color:var(--ink);
  cursor:pointer;
}
.icon-glyph{ display:block; }
.bell-dot{
  position:absolute; top:0.5rem; right:0.5rem;
  width:0.5rem; height:0.5rem; border-radius:50%;
  background:var(--dim);
}
.bell-dot.critical{ background:var(--signal); }
.notif-panel{ padding:0; }
.notif-empty{ padding:1rem 1.125rem; font-size:0.84375rem; color:var(--dim); }
.notif-row{
  display:flex; flex-direction:column; gap:0.25rem;
  padding:0.75rem 1.125rem; border-top:1px solid var(--line-soft);
}
.notif-row:first-child{ border-top:none; }
.notif-title{ font-size:0.875rem; font-weight:700; }
.notif-body{ font-size:0.8125rem; color:var(--dim); line-height:1.4; }
.notif-time{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:0.65625rem; letter-spacing:.04em; color:var(--dim);
}

/* ---------- capture-awaiting-review banner ---------- */
.capture-banner{
  display:block; width:100%; min-height:2.75rem;
  padding:0.625rem 1.25rem;
  border:none; border-top:1px solid var(--line-soft);
  background:var(--card); color:var(--ink);
  font-size:0.8125rem; letter-spacing:.02em; text-align:left;
  cursor:pointer;
}
.capture-banner[hidden]{ display:none; }

.view-dropdown{
  display:flex; align-items:center; gap:0.375rem;
  border:none;
  background:none; color:var(--ink);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:0.78125rem; letter-spacing:.03em;
  height:2.75rem; padding:0 0.75rem;
  cursor:pointer;
}
.view-dropdown.active-filter{ background:var(--ink); color:var(--paper); }
.view-dropdown[aria-expanded="true"]{ background:var(--ink); color:var(--paper); }
.view-dropdown .caret{ font-size:0.5625rem; }

.dropdown-scrim{ position:fixed; inset:0; background:rgba(10,10,10,.5); z-index:8; }
.dropdown-panel{
  position:absolute; top:100%; right:1.25rem; left:1.25rem; z-index:10;
  background:var(--card); border:1px solid var(--ink);
  box-shadow:0 10px 24px rgba(10,10,10,.2);
  max-height:60vh; overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.dropdown-section-label{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:0.65625rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--dim); padding:0.75rem 1.125rem 0.375rem;
}
.dropdown-item{
  display:flex; align-items:center; justify-content:space-between; gap:0.75rem;
  width:100%; text-align:left; min-height:2.75rem;
  padding:0.5rem 1.125rem; border:none; border-top:1px solid var(--line-soft);
  background:none; font-size:0.90625rem; color:var(--ink); cursor:pointer;
}
.dropdown-item-everything{ min-height:3.25rem; }
.dropdown-item-main{ display:flex; flex-direction:column; gap:0.125rem; min-width:0; }
.dropdown-item-label{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dropdown-item-caption{ font-size:0.65625rem; letter-spacing:.02em; color:var(--dim); }
.dropdown-item-count{ flex:none; font-size:0.78125rem; color:var(--dim); min-width:1.375rem; text-align:right; }
.dropdown-item[aria-pressed="true"]{ font-weight:700; }
.dropdown-item[aria-pressed="true"] .dropdown-item-count{ color:var(--ink); }
.dropdown-item[aria-pressed="true"] .dropdown-item-count::after{ content:" \2713"; font-weight:400; color:var(--dim); }

/* ---------- scroll body ---------- */
main.scroll-body{ flex:1; overflow-y:auto; padding-bottom:0.5rem; -webkit-overflow-scrolling:touch; }
section{ padding:1.375rem 1.25rem 0.5rem; }
.section-label{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:0.6875rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink); display:flex; align-items:baseline; gap:0.5rem; margin-bottom:0.875rem;
}
.section-label .count{ color:var(--dim); font-weight:400; }
.section-label::after{ content:""; flex:1; border-bottom:1px solid var(--ink); transform:translateY(-3px); }
.empty-copy{ font-size:0.84375rem; line-height:1.5; color:var(--dim); padding:0.125rem 0 1rem; }
.empty-copy--pad{ padding:1.25rem; }
.empty-copy--pad-x{ padding:0 1.25rem; }

/* ---------- priority list ---------- */
.priority-list{ list-style:none; }
.p-item{
  display:flex; align-items:flex-start; gap:0.875rem; padding:0.875rem 0;
  border-bottom:1px solid var(--line-soft);
}
.p-item:first-child{ padding-top:0.125rem; }
.p-num{
  font-size:1.875rem; font-weight:800; line-height:1; width:2.125rem; flex:none;
  letter-spacing:-0.02em; font-variant-numeric:tabular-nums; color:var(--ink);
}
.p-item.critical .p-num{ color:var(--signal); }
.p-body{ flex:1; min-width:0; padding-top:0.1875rem; cursor:pointer; }
.p-title{ font-size:0.9375rem; font-weight:600; line-height:1.35; }
.p-meta{ margin-top:0.3125rem; display:flex; flex-wrap:wrap; gap:0.5rem; align-items:center; }
.tag{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:0.65625rem; letter-spacing:.04em; text-transform:uppercase; color:var(--dim);
  border:1px solid var(--line-soft); padding:0.125rem 0.375rem;
}
.tag.due-today{ color:var(--ink); border-color:var(--ink); }
.tag.critical{ color:#fff; background:var(--signal); border-color:var(--signal); font-weight:700; }
.tag.group-flag{ color:var(--ink); border-color:var(--ink); font-weight:700; }

.p-check{
  width:2.75rem; height:2.75rem; flex:none; margin:-0.8125rem -0.8125rem -0.8125rem 0;
  border:none; background:none; cursor:pointer; position:relative; padding:0;
}
.p-check::before{
  content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:1.125rem; height:1.125rem; border:1px solid var(--ink);
}
.p-check[aria-pressed="true"]::after{
  content:"\2713"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-size:0.75rem; color:var(--ink);
}

.stale-notice{
  font-size:0.75rem; color:var(--signal); padding:0.25rem 0 0;
}

.overflow-row, .show-fewer-row{
  width:100%; text-align:left; min-height:2.75rem; border:none; background:none;
  color:var(--ink); font-size:0.84375rem; padding:0.5rem 0; cursor:pointer;
  border-bottom:1px solid var(--line-soft);
}

/* ---------- done today ---------- */
.done-row{
  display:flex; align-items:baseline; gap:0.625rem; padding:0.6875rem 0;
  border-bottom:1px solid var(--line-soft); color:var(--dim);
  width:100%; text-align:left; background:none; border-left:none; border-right:none; border-top:none;
  cursor:pointer; font:inherit;
}
.done-row:last-child{ border-bottom:none; }
.done-check{ font-size:0.6875rem; color:var(--dim); }
.done-title{ text-decoration:line-through; font-size:0.875rem; flex:1; }
.done-time{ font-size:0.65625rem; letter-spacing:.04em; }

/* ---------- drag and drop (docs/decisions.md DRAG AND DROP paragraph) ----------
   pan-y (not none): a touch that starts on a row must still be able to
   scroll the page vertically. The long-press timer in app.js decides when a
   touch becomes a drag; only then does the pointermove handler call
   preventDefault() to take over from the browser's native scroll. */
.draggable-row{ touch-action:pan-y; -webkit-touch-callout:none; }
@media (hover:hover){ .draggable-row{ cursor:grab; } }
/* while a drag is in progress: no text selection / iOS callout anywhere */
body.dragging-active{ user-select:none; -webkit-user-select:none; }
.row-primed{
  transition:transform .12s ease, background-color .12s ease;
  transform:scale(1.02);
  background:rgba(10,10,10,.05);
  position:relative; z-index:1;
}
.row-dragging{ opacity:.35; }
.drag-ghost{
  position:fixed; left:0; top:0; z-index:50; pointer-events:none;
  background:var(--card); border:1px solid var(--ink); opacity:.9;
  padding:0.875rem 1rem; font-size:0.9375rem; font-weight:600; color:var(--ink);
  max-width:20rem; box-shadow:none;
}
.drop-line{
  height:2px; background:var(--ink); list-style:none; margin:0.25rem 0; padding:0;
}
ol.priority-drag-list:empty,
ol.manual-block:empty{ min-height:2.75rem; }
.drop-target-block{ outline:2px solid var(--ink); outline-offset:-2px; }
.section-drop-target{ outline:2px solid var(--ink); outline-offset:-2px; }

/* ---------- collapse rows ---------- */
.collapse-row{
  display:flex; align-items:center; justify-content:space-between; min-height:2.75rem;
  padding:0.625rem 0; cursor:pointer; background:none; border:none; width:100%; font:inherit; color:inherit;
}
.collapse-row .section-label{ margin-bottom:0; flex:1; }
.collapse-right{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:0.6875rem;
  color:var(--dim); display:flex; align-items:center; gap:0.5rem; flex:none; padding-left:0.5rem; white-space:nowrap;
}

/* ---------- when you have time (flat, no rank numeral) ---------- */
.whenever-list{ list-style:none; }
.w-item{
  display:flex; align-items:flex-start; gap:0.875rem; padding:0.875rem 0;
  border-bottom:1px solid var(--line-soft);
}
.w-item:first-child{ padding-top:0.125rem; }

/* ---------- upcoming ---------- */
.upcoming-list{ list-style:none; }
.u-item{
  display:flex; gap:1rem; padding:0.6875rem 0; border-bottom:1px solid var(--line-soft);
  align-items:baseline; cursor:pointer;
}
.u-day{ font-size:0.6875rem; letter-spacing:.05em; text-transform:uppercase; width:4rem; flex:none; color:var(--dim); }
.u-item.critical .u-day{ color:var(--signal); font-weight:700; }
.u-title{ font-size:0.875rem; line-height:1.35; flex:1; }
.inline-critical{ color:var(--signal); font-weight:700; font-size:0.625rem; letter-spacing:.05em; text-transform:uppercase; margin-left:0.375rem; }
.inline-tag{ color:var(--dim); font-size:0.65625rem; letter-spacing:.03em; }

/* ---------- big rocks ---------- */
.rocks-list{ list-style:none; }
.rock-row{
  display:flex; align-items:center; justify-content:space-between; min-height:2.75rem;
  padding:1rem 0; border-bottom:1px solid var(--line-soft); cursor:pointer;
  background:none; border-left:none; border-right:none; border-top:none;
  width:100%; text-align:left; font:inherit; color:inherit;
}
.rock-title{ font-size:0.9375rem; font-weight:600; letter-spacing:-0.01em; }
.rock-arrow{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:1rem; color:var(--dim); }

/* ---------- chat dock ---------- */
.chat-dock{ border-top:1px solid var(--ink); background:var(--card); display:flex; flex-direction:column; flex:none; }
.chat-hint{ font-size:0.8125rem; color:var(--dim); padding:0.75rem 1.25rem; }
.chat-input-row{
  display:flex; align-items:center; border-top:1px solid var(--line-soft);
  padding:0.375rem 0.875rem; padding-bottom:calc(0.375rem + env(safe-area-inset-bottom));
  gap:0.625rem;
}
.chat-input-row input{
  flex:1; min-height:2.75rem; border:none; background:none; font-size:0.875rem;
  font-family:inherit; color:var(--ink); outline:none;
}
.chat-input-row input::placeholder{ color:#a6a49c; }
.chat-input-row input:disabled{ color:#a6a49c; }
.chat-send{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:0.6875rem;
  letter-spacing:.05em; text-transform:uppercase; border:1px solid var(--ink); background:var(--ink);
  color:var(--paper); padding:0 0.875rem; min-height:2.75rem; display:flex; align-items:center; cursor:pointer;
}
.chat-send:disabled{ background:var(--paper); color:var(--dim); border-color:var(--line-soft); cursor:not-allowed; }
.chat-input-row input:disabled{ color:#a6a49c; }

/* ---------- chat: propose-confirm flow (docs/decisions.md CONFIRM FLOW / 08-v1.1 S-4) ---------- */
.chat-offline-banner{ background:var(--ink); color:var(--paper); font-size:0.75rem; line-height:1.4; padding:0.625rem 1.25rem; }
.chat-offline-banner[hidden]{ display:none; }

.chat-panel{ max-height:42vh; overflow-y:auto; -webkit-overflow-scrolling:touch; border-top:1px solid var(--line-soft); background:var(--card); }
.chat-panel[hidden]{ display:none; }
.chat-loading{ padding:0.75rem 1.25rem; font-size:0.75rem; letter-spacing:.04em; color:var(--dim); }
.chat-loading[hidden]{ display:none; }
@media (prefers-reduced-motion:no-preference){ .chat-loading{ animation:pulse 1.2s ease-in-out infinite; } }

.chat-question{ padding:0.875rem 1.25rem; border-bottom:1px solid var(--line-soft); }
.chat-question[hidden]{ display:none; }
.chat-question p{ font-size:0.8125rem; line-height:1.4; margin-bottom:0.625rem; }
.chip-row{ display:flex; gap:0.5rem; flex-wrap:wrap; }
.chip{
  font-size:0.75rem; letter-spacing:.03em; border:1px solid var(--ink);
  background:none; padding:0.5rem 0.8125rem; min-height:2.75rem; cursor:pointer; color:var(--ink);
}
@media (hover:hover){ .chip:hover{ background:var(--ink); color:var(--paper); } }

.chat-llm-fail{ padding:0.875rem 1.25rem; border-bottom:1px solid var(--line-soft); font-size:0.8125rem; line-height:1.5; }
.chat-llm-fail[hidden]{ display:none; }
.fail-line{ margin-bottom:0.5rem; }
.fail-actions{ display:flex; gap:0.875rem; align-items:center; flex-wrap:wrap; }
.try-again{
  font-size:0.75rem; letter-spacing:.03em; text-decoration:underline; color:var(--ink);
  background:none; border:none; cursor:pointer; padding:0; min-height:2.75rem;
}
.tap-task{ font-size:0.75rem; letter-spacing:.03em; color:var(--dim); }

.chat-propose{ padding:0.875rem 1.25rem; }
.chat-propose[hidden]{ display:none; }
.propose-label{ font-size:0.65625rem; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); margin-bottom:0.5rem; }
.propose-list{ list-style:none; border:1px solid var(--line-soft); }
.propose-row{
  display:flex; align-items:center; gap:0.625rem; flex-wrap:wrap;
  padding:0.6875rem 0.75rem; font-size:0.8125rem; line-height:1.4;
  border-bottom:1px solid var(--line-soft); cursor:pointer;
}
.propose-row:last-child{ border-bottom:none; }
.propose-row .diff-tag{ font-size:0.65625rem; letter-spacing:.05em; text-transform:uppercase; flex:none; min-width:6rem; color:var(--ink); font-weight:700; }
.propose-row .diff-text{ flex:1; min-width:0; }
.diff-meta{ font-size:0.71875rem; color:var(--dim); margin-top:0.1875rem; letter-spacing:.01em; }
.diff-meta-critical{ color:var(--signal); font-weight:700; }
.propose-row .saved-flag{ flex:none; font-size:0.65625rem; letter-spacing:.03em; color:var(--dim); }
.propose-row.saved{ background:var(--paper); cursor:default; }
.propose-row.saved .diff-tag{ color:var(--dim); }
.propose-row.saved .diff-text{ text-decoration:line-through; color:var(--dim); }
.propose-row.conflict{ background:rgba(198,61,0,.06); }
.row-conflict-notice{
  width:100%; margin-top:0.375rem; font-size:0.71875rem; color:var(--signal);
  display:flex; align-items:center; gap:0.75rem; flex-wrap:wrap;
}
.row-conflict-notice button{
  font-size:0.71875rem; text-decoration:underline; background:none; border:none;
  color:var(--ink); cursor:pointer; min-height:2.75rem; padding:0;
}

.chat-dock .confirm-footer{ flex:none; border-top:1px solid var(--ink); padding:0.75rem 1.25rem; background:var(--card); }
.chat-dock .confirm-footer[hidden]{ display:none; }
.btn-confirm{ width:100%; min-height:3rem; background:var(--ink); color:var(--paper); border:none; font-size:0.875rem; font-weight:700; font-family:inherit; cursor:pointer; }
@media (hover:hover){ .btn-confirm:hover{ background:var(--dim); } }

.chat-rate-cap{ font-size:0.75rem; line-height:1.4; color:var(--dim); padding:0.625rem 1.25rem; border-top:1px solid var(--line-soft); background:var(--paper); }
.chat-rate-cap[hidden]{ display:none; }

/* ---------- sheet: proposal confirm mode ---------- */
.field-proposed-label{ color:var(--signal) !important; }
.proposal-notice{ font-size:0.75rem; line-height:1.4; color:var(--dim); padding:0.625rem 0 0.25rem; border-top:1px solid var(--line-soft); margin-top:0.25rem; }
.proposal-notice[hidden]{ display:none; }

/* ---------- sheet (task detail) ---------- */
.sheet-wrap{
  position:fixed; inset:0; z-index:20; display:flex; align-items:flex-end; justify-content:center;
  pointer-events:none;
}
.sheet-wrap[hidden]{ display:none; }
.dim-overlay{ position:fixed; inset:0; background:rgba(10,10,10,.55); z-index:19; pointer-events:auto; }
.dim-overlay[hidden]{ display:none; }
.sheet{
  pointer-events:auto; width:100%; max-width:480px; max-height:88vh; background:var(--card);
  border-top:1px solid var(--ink); display:flex; flex-direction:column;
  box-shadow:0 -8px 24px rgba(0,0,0,.18);
}
.sheet-head{ display:flex; align-items:center; justify-content:space-between; padding:0.75rem 0.625rem 0.75rem 1.25rem; border-bottom:1px solid var(--ink); }
.sheet-head h2{ font-size:1.0625rem; font-weight:800; letter-spacing:-0.01em; }
.sheet-close{ width:2.75rem; height:2.75rem; display:flex; align-items:center; justify-content:center; background:none; border:none; font-size:1.125rem; color:var(--ink); cursor:pointer; }
.sheet-body{
  flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:1.125rem 1.25rem calc(0.5rem + env(safe-area-inset-bottom));
}
.field{ margin-bottom:1.25rem; }
.field-label{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:0.65625rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--dim); margin-bottom:0.5rem; display:block;
}
.native-input{
  width:100%; min-height:2.75rem; border:1px solid var(--line-soft); background:var(--paper);
  padding:0 0.75rem; font-size:0.9375rem; font-family:inherit; color:var(--ink);
}
.native-input:focus{ border-color:var(--ink); }
textarea.native-input{ min-height:4.75rem; padding:0.625rem 0.75rem; resize:vertical; line-height:1.4; }

.segmented{ display:flex; border:1px solid var(--ink); width:100%; }
.segmented button{
  flex:1; min-height:2.75rem; background:none; border:none; font-size:0.8125rem; font-weight:600;
  color:var(--ink); border-left:1px solid var(--ink); cursor:pointer;
}
.segmented button:first-child{ border-left:none; }
.segmented button[aria-pressed="true"]{ background:var(--ink); color:var(--paper); }
.segmented button.critical-on[aria-pressed="true"]{ background:var(--signal); color:#fff; border-left-color:var(--signal); }
.segmented button[disabled]{ color:#b9b7b0; cursor:not-allowed; }
.field-note{ margin-top:0.4375rem; font-size:0.71875rem; color:var(--dim); line-height:1.4; }
.field-note.warn{ color:var(--signal); }

/* spacing utilities (avoid inline style= for CSP style-src compliance) */
.mb-6{ margin-bottom:0.375rem; }
.mb-8{ margin-bottom:0.5rem; }
.mt-8{ margin-top:0.5rem; }
.mt-14{ margin-top:0.875rem; }

.sheet-footer{
  border-top:1px solid var(--ink); display:flex; flex:none;
  padding-bottom:env(safe-area-inset-bottom);
}
.sheet-footer button{ flex:1; min-height:3.25rem; background:var(--card); border:none; font-size:0.875rem; font-weight:700; color:var(--ink); cursor:pointer; }
.sheet-footer button + button{ border-left:1px solid var(--ink); }
.sheet-footer button.drop{ color:var(--dim); }
.sheet-footer button.rock{ background:var(--ink); color:var(--paper); }

/* ---------- big rock detail / history screens ---------- */
.scr-head{ padding:1.125rem 1.25rem 0.875rem; border-bottom:1px solid var(--ink); background:var(--paper); flex:none; position:relative; }
.scr-head--flush{ border-bottom:none; padding-bottom:0; }
.back-link{
  display:inline-flex; align-items:center; gap:0.375rem; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:0.6875rem; letter-spacing:.04em; text-transform:uppercase; color:var(--dim); text-decoration:none;
  margin-bottom:0.625rem; background:none; border:none; cursor:pointer; padding:0; min-height:2.75rem; align-items:center;
}
.scr-head h1{ font-size:1.625rem; font-weight:800; letter-spacing:-0.02em; line-height:1.15; }
.eyebrow{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:0.6875rem; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin-bottom:0.375rem; }

.rock-meta{ padding:1.25rem 1.25rem 0.25rem; }
.meta-grid{ display:grid; grid-template-columns:6.25rem 1fr; row-gap:0.625rem; margin-top:0.875rem; font-size:0.84375rem; }
.meta-grid dt{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:0.65625rem; letter-spacing:.06em; text-transform:uppercase; color:var(--dim); padding-top:0.125rem; }
.meta-grid dd{ font-weight:500; }
.meta-grid dd.dim{ color:var(--dim); font-weight:400; }

.notes-section{ padding:1.375rem 1.25rem 0.5rem; }
.note-card{ padding:0.875rem 0; border-bottom:1px solid var(--line-soft); }
.note-card:first-child{ padding-top:0.125rem; }
.note-text{ font-size:0.875rem; line-height:1.45; }
.note-byline{ margin-top:0.5rem; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:0.65625rem; letter-spacing:.04em; color:var(--dim); }

.add-note-row{ flex:none; border-top:1px solid var(--ink); background:var(--card); display:flex; align-items:center; gap:0.625rem; padding:0.75rem 0.875rem; }
.add-note-row input{ flex:1; border:1px solid var(--line-soft); background:none; font-size:0.84375rem; font-family:inherit; color:var(--ink); outline:none; padding:0.5625rem 0.625rem; min-height:2.75rem; }
.btn-mono{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:0.6875rem; letter-spacing:.05em;
  text-transform:uppercase; border:1px solid var(--ink); background:var(--ink); color:var(--paper);
  padding:0 0.75rem; cursor:pointer; min-height:2.75rem;
}
.btn-mono:disabled{ background:var(--paper); color:var(--dim); border-color:var(--line-soft); cursor:not-allowed; }

.rock-footer{
  flex:none; border-top:1px solid var(--line-soft);
  padding:0.75rem 1.25rem calc(1.125rem + env(safe-area-inset-bottom));
  display:flex; justify-content:flex-end;
}
.btn-outline{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:0.71875rem; letter-spacing:.04em;
  text-transform:uppercase; border:1px solid var(--ink); background:none; color:var(--ink);
  padding:0.6875rem 0.875rem; cursor:pointer; min-height:2.75rem;
}

/* ---------- history ---------- */
.strip-wrap{ padding:1rem 0 0.875rem; border-bottom:1px solid var(--ink); background:var(--card); flex:none; }
.strip-label{ padding:0 1.25rem; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:0.6875rem; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin-bottom:0.625rem; }
.strip-scroll{ display:flex; gap:0.625rem; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:0 1.25rem 0.25rem; }
.strip-card{ flex:none; width:12.25rem; border:1px solid var(--line-soft); padding:0.625rem 0.6875rem; background:var(--paper); }
.strip-op{ font-size:0.8125rem; line-height:1.4; }
.strip-op b{ font-weight:700; }
.strip-foot{ margin-top:0.5rem; display:flex; justify-content:space-between; align-items:center; }
.strip-time{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:0.65625rem; color:var(--dim); }
.strip-empty{ padding:0 1.25rem; font-size:0.8125rem; color:var(--dim); }

.search-wrap{ padding:1rem 1.25rem 0.375rem; flex:none; }
.search-box{
  width:100%; border:1px solid var(--ink); padding:0.6875rem 0.75rem; font-size:0.84375rem;
  min-height:2.75rem; background:var(--paper); color:var(--ink); font-family:inherit;
}
.search-box::placeholder{ color:#a6a49c; }

.day-group{ padding:1.125rem 1.25rem 0.25rem; }
.day-label{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:0.6875rem; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); margin-bottom:0.625rem; }
.hist-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:0.75rem; padding:0.75rem 0; border-bottom:1px solid var(--line-soft); }
.hist-main{ flex:1; min-width:0; }
.hist-title{ font-size:0.90625rem; line-height:1.4; }
.hist-title.done{ text-decoration:line-through; color:var(--dim); }
.hist-status{ margin-top:0.3125rem; display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap; }
.status-caption{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:0.65625rem; letter-spacing:.04em; text-transform:uppercase; color:var(--dim); }
.status-check{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:0.65625rem; color:var(--dim); }
.hist-time{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:0.65625rem; color:var(--dim); }
.owner-tag{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:0.625rem; letter-spacing:.04em; text-transform:uppercase; border:1px solid var(--line-soft); padding:0.0625rem 0.3125rem; color:var(--dim); }
.hist-action{ flex:none; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:0.6875rem; letter-spacing:.03em; text-decoration:underline; color:var(--ink); background:none; border:none; cursor:pointer; padding-top:0.125rem; min-height:2.75rem; }

/* ---------- toasts ---------- */
#toast-region{
  position:fixed; left:0; right:0; bottom:0; display:flex; justify-content:center;
  z-index:40; pointer-events:none; padding-bottom:env(safe-area-inset-bottom);
}
.toast{
  background:var(--ink); color:var(--paper); font-size:0.8125rem; padding:0.75rem 1rem;
  margin-bottom:1rem; max-width:26rem; text-align:center; box-shadow:0 4px 16px rgba(0,0,0,.25);
}

/* ---------- skeletons ---------- */
.skeleton-row{ height:2.5rem; background:var(--line-soft); margin-bottom:0.625rem; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

.pulse{ animation:pulse 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){ .pulse{ animation:none; } }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.4; } }

/* ==========================================================================
   RESPONSIVE (docs/decisions.md, Design > RESPONSIVE)
   Mobile-first: everything above this block is the <600px phone layout,
   unchanged. 600-1023px fluidizes the same single column. >=1024px goes
   fully native desktop: centered 1200px grid, split main/right columns,
   fixed slim chat dock, centered dialogs instead of bottom sheets.
   ========================================================================== */

/* ---------- 600-1023px: fluid single column, wider side padding ---------- */
@media (min-width:600px){
  #app{ max-width:none; border-left:none; border-right:none; }
  header.app-header{ padding-left:2.5rem; padding-right:2.5rem; }
  section{ padding-left:2.5rem; padding-right:2.5rem; }
  .chat-hint{ padding-left:2.5rem; padding-right:2.5rem; }
  .chat-input-row{ padding-left:2.5rem; padding-right:2.5rem; }
  .scr-head{ padding-left:2.5rem; padding-right:2.5rem; }
  .rock-meta{ padding-left:2.5rem; padding-right:2.5rem; }
  .notes-section{ padding-left:2.5rem; padding-right:2.5rem; }
  .add-note-row{ padding-left:2.5rem; padding-right:2.5rem; }
  .rock-footer{ padding-left:2.5rem; padding-right:2.5rem; }
  .strip-label{ padding-left:2.5rem; padding-right:2.5rem; }
  .strip-scroll{ padding-left:2.5rem; padding-right:2.5rem; }
  .strip-empty{ padding-left:2.5rem; padding-right:2.5rem; }
  .search-wrap{ padding-left:2.5rem; padding-right:2.5rem; }
  .day-group{ padding-left:2.5rem; padding-right:2.5rem; }
  #dev-user-switch{ left:0.75rem; bottom:6.75rem; }
}

/* ---------- <600px: chat dock sits taller (hint line + input row) in    */
/* normal flow at the bottom of the page, so the pill needs enough        */
/* clearance to stay clear of the input row ---------- */
@media (max-width:599px){
  #dev-user-switch{ left:0.375rem; bottom:6.5rem; }

  /* compact header so title + controls + history fit in one tight block
     (total header height budget ~120px) */
  header.app-header{ padding:1rem 1.25rem 0.75rem; }
  .head-titles h1{ font-size:1.75rem; }

  /* iOS Safari auto-zooms the viewport on focus for any input/select/
     textarea under 16px. Every field gets bumped to the 16px floor here;
     desktop keeps its smaller Studio type scale untouched. */
  .native-input,
  .search-box,
  .chat-input-row input,
  .add-note-row input,
  textarea.native-input{
    font-size:16px;
  }
}

/* ---------- >=1024px: native desktop ---------- */
@media (min-width:1024px){
  #app{
    max-width:1200px;
    border-left:1px solid var(--line-soft);
    border-right:1px solid var(--line-soft);
  }

  /* header: title left, controls (bell/gear/dropdown cluster) right, one
     line -- .head-controls is already a flex row with hairline dividers
     at every width (see base rule near .head-controls). */

  #dev-user-switch{ left:0.75rem; bottom:4.25rem; }

  /* main: left column (Priority, Older Overdue, Done Today) ~58%,
     right column (Upcoming, Big Rocks) ~38%. Each column is its own flow
     container so the columns' heights are independent (a shared-row grid
     would sync row heights across columns and leave gaps). */
  #home-main{
    display:grid;
    grid-template-columns:58% 38%;
    column-gap:4%;
    align-content:start;
    padding-bottom:6.5rem; /* clears the fixed chat dock */
  }
  .main-col{ grid-column:1; }
  .side-col{ grid-column:2; }

  /* chat dock: slim full-width fixed bottom command bar, input centered */
  .chat-dock{
    position:fixed; left:0; right:0; bottom:0; z-index:15;
  }
  .chat-hint{ display:none; }
  .chat-input-row{
    max-width:720px; margin:0 auto; width:100%;
    border-top:none;
  }
  .chat-panel, .chat-dock .confirm-footer, .chat-rate-cap, .chat-offline-banner, .capture-banner{
    max-width:720px; margin:0 auto; width:100%;
  }

  /* task detail sheet: centered dialog, not a bottom sheet */
  .sheet-wrap{ align-items:center; }
  .sheet{
    width:480px; max-width:480px;
    border:1px solid var(--ink);
    box-shadow:0 12px 32px rgba(10,10,10,.22);
  }

  /* Big Rock detail: centered dialog with scrim, same treatment as the sheet */
  #screen-rock{
    position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
    width:480px; max-height:85vh; overflow:hidden;
    border:1px solid var(--ink);
    background:var(--card);
    box-shadow:0 12px 32px rgba(10,10,10,.22);
    z-index:20;
  }
  #screen-rock::before{
    content:""; position:fixed; inset:0; z-index:-1;
    background:rgba(10,10,10,.55);
  }

  /* History: centered column page, not a modal */
  #screen-history{
    max-width:760px; margin:0 auto; width:100%;
  }
}

/* ---------- hover states: rows/checkboxes/buttons, mouse-capable only ---------- */
@media (hover:hover){
  .p-body:hover .p-title{ text-decoration:underline; }
  .p-check:hover::before{ background:var(--line-soft); }
  .done-row:hover{ background:rgba(10,10,10,.04); }
  .u-item:hover .u-title{ text-decoration:underline; }
  .rock-row:hover{ background:rgba(10,10,10,.04); }
  .collapse-row:hover{ background:rgba(10,10,10,.03); }
  .overflow-row:hover, .show-fewer-row:hover{ background:rgba(10,10,10,.03); }
  .view-dropdown:hover{ background:rgba(10,10,10,.06); }
  .dropdown-item:hover{ background:rgba(10,10,10,.05); }
  .back-link:hover{ text-decoration:underline; }
  .segmented button:not([disabled]):hover{ background:rgba(10,10,10,.06); }
  .chat-send:not(:disabled):hover{ background:var(--dim); }
  .btn-mono:not(:disabled):hover{ background:var(--dim); }
  .btn-outline:hover{ background:rgba(10,10,10,.05); }
  .hist-action:hover{ background:rgba(10,10,10,.05); }
  .sheet-close:hover{ background:rgba(10,10,10,.06); }
  .sheet-footer button:hover{ background:rgba(10,10,10,.06); }
  .sheet-footer button.rock:hover{ background:var(--dim); }
}

/* ---------- active (pressed) states: touch devices only, since :hover on   */
/* touch would otherwise stick until the next tap elsewhere ---------- */
@media (hover:none){
  .p-body:active .p-title{ text-decoration:underline; }
  .p-check:active::before{ background:var(--line-soft); }
  .done-row:active{ background:rgba(10,10,10,.04); }
  .u-item:active .u-title{ text-decoration:underline; }
  .rock-row:active{ background:rgba(10,10,10,.04); }
  .collapse-row:active{ background:rgba(10,10,10,.03); }
  .overflow-row:active, .show-fewer-row:active{ background:rgba(10,10,10,.03); }
  .view-dropdown:active{ background:rgba(10,10,10,.06); }
  .dropdown-item:active{ background:rgba(10,10,10,.05); }
  .segmented button:not([disabled]):active{ background:rgba(10,10,10,.06); }
  .chat-send:not(:disabled):active{ background:var(--dim); }
  .chip:active{ background:var(--ink); color:var(--paper); }
  .btn-mono:not(:disabled):active{ background:var(--dim); }
  .btn-outline:active{ background:rgba(10,10,10,.05); }
  .hist-action:active{ background:rgba(10,10,10,.05); }
  .sheet-close:active{ background:rgba(10,10,10,.06); }
  .sheet-footer button:active{ background:rgba(10,10,10,.06); }
  .sheet-footer button.rock:active{ background:var(--dim); }
  .btn-confirm:active{ background:var(--dim); }
  .login-btn:active, .invite-btn:active{ background:var(--dim); }
  .btn-plain:active, .btn-full:active{ background:rgba(10,10,10,.06); }
}

/* ---------- Phase 4: login / invite / profile (screens/sheets.html B2-B4) ---------- */

.login-frame, .invite-frame{
  max-width:480px;
  margin:0 auto;
  min-height:100vh;
  background:var(--paper);
  border-left:1px solid var(--line-soft);
  border-right:1px solid var(--line-soft);
}

.login-frame{ align-items:center; justify-content:center; padding:0 2rem; }
.login-wrap{ width:100%; max-width:300px; margin:0 auto; text-align:center; }
.wordmark{ font-size:1.625rem; font-weight:800; letter-spacing:.02em; margin-bottom:0.375rem; }
.wordmark .dot{ color:var(--signal); }
.login-sub{ font-size:0.75rem; color:var(--dim); margin-bottom:2.5rem; letter-spacing:.04em; }
.login-field{ text-align:left; margin-bottom:1rem; }
.login-btn{
  width:100%; min-height:3rem;
  background:var(--ink); color:var(--paper); border:none;
  font-size:0.9375rem; font-weight:700; margin-top:0.5rem; cursor:pointer;
}
.login-caption{ margin-top:1.75rem; font-size:0.71875rem; line-height:1.5; color:var(--dim); }
.login-caption a{ color:var(--ink); text-decoration:underline; }
.login-error{ color:var(--signal); font-size:0.75rem; margin:0.5rem 0; text-align:left; }
.login-error[hidden]{ display:none; }

.invite-frame{ padding:3.5rem 1.75rem 2rem; align-items:stretch; justify-content:flex-start; display:flex; flex-direction:column; }
.invite-title{ font-size:1.375rem; font-weight:800; line-height:1.3; letter-spacing:-0.01em; margin-bottom:0.5rem; }
.invite-sub{ font-size:0.8125rem; color:var(--dim); margin-bottom:1.5rem; line-height:1.5; }
.code-hint{ font-size:0.6875rem; color:var(--dim); margin-bottom:1rem; }
.invite-btn{
  width:100%; min-height:3rem;
  background:var(--ink); color:var(--paper); border:none;
  font-size:0.9375rem; font-weight:700; margin-top:0.5rem; cursor:pointer;
}

/* profile sheet sections (reuses .sheet/.sheet-wrap/.dim-overlay/.field/.native-input) */
.p-section{ margin-bottom:1.625rem; }
.p-section-title{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:0.6875rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink); margin-bottom:0.75rem; padding-bottom:0.5rem; border-bottom:1px solid var(--ink);
}
.row-line{
  display:flex; align-items:center; justify-content:space-between;
  min-height:2.75rem; padding:0.5rem 0; border-bottom:1px solid var(--line-soft);
}
.row-line:last-child{ border-bottom:none; }
.row-line .rl-label{ font-size:0.875rem; }
.row-line .rl-value{ font-size:0.8125rem; color:var(--dim); text-align:right; }
.btn-plain{
  min-height:2.75rem; padding:0 0.875rem; border:1px solid var(--ink);
  background:none; font-size:0.8125rem; font-weight:600; color:var(--ink); cursor:pointer;
}
.btn-plain.danger{ color:var(--signal); border-color:var(--signal); }
.btn-full{
  width:100%; min-height:3rem; border:1px solid var(--ink); background:none;
  font-size:0.875rem; font-weight:700; color:var(--ink); margin-top:0.25rem; cursor:pointer;
}

@media (hover:hover){
  .login-btn:hover, .invite-btn:hover{ background:var(--dim); }
  .btn-plain:hover, .btn-full:hover{ background:rgba(10,10,10,.06); }
}