/* Components — nav, buttons, habit cards, check control, chains, calendar,
   login, conflicts, toasts. Press-kit rules: radius 0, hard shadows, 120ms
   var(--ease) on transform/box-shadow only, press = translate(2px,2px) +
   shadow collapse.

   Day-state legibility rule (DESIGN.md): every state is a distinct GLYPH,
   never colour alone — done ✓ solid, grace ◐ tinted "G", missed ✕ hollow,
   pending empty square, unscheduled flat dash. */

/* ---- sidebar / nav ---- */
.masthead {
  font-family: var(--display); font-weight: 900; font-size: 19px;
  text-transform: uppercase; line-height: 1; letter-spacing: .01em;
  padding: 4px 8px 14px; border-bottom: 2px solid var(--bd-strong); margin-bottom: 12px;
}
.masthead small {
  display: block; margin-top: 6px;
  font-family: var(--mono); font-weight: 700; font-size: 9px;
  letter-spacing: .14em; color: var(--mut);
}
.nav-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 8px 9px; margin: 2px 0; text-align: left;
  font-family: var(--mono); font-weight: 700; font-size: 12px;
  letter-spacing: .07em; text-transform: uppercase; color: var(--ink);
  border: 2px solid transparent;
  transition: transform .12s var(--ease), box-shadow .12s var(--ease);
}
.nav-item:hover { background: var(--hover); }
.nav-item.active {
  background: var(--accent); color: var(--accent-ink);
  border-color: var(--bd-strong); box-shadow: var(--shadow-sm);
}
.nav-foot { margin-top: auto; padding: 12px 9px 0; display: flex; flex-direction: column; gap: 10px; }
.nav-user { font-family: var(--mono); font-weight: 700; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }
.nav-user b { color: var(--ink); display: block; font-size: 11px; }

/* mobile tabbar */
.tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 4px 7px; min-width: 64px;
  font-family: var(--mono); font-weight: 700; font-size: 9px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--mut);
}
.tab.active { color: var(--accent); box-shadow: inset 0 3px 0 var(--accent); }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-weight: 700; font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 8px 14px; border: 2px solid var(--bd-strong);
  background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: transform .12s var(--ease), box-shadow .12s var(--ease);
}
.btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--shadow-ink); }
.btn.accent { background: var(--accent); color: var(--accent-ink); }
.btn.quiet { box-shadow: none; border-color: var(--bd); }
.btn.small { padding: 5px 10px; font-size: 10.5px; box-shadow: none; }
.btn[disabled] { opacity: .45; pointer-events: none; }

/* ---- topbar sync stamp + who's signed in ---- */
.sync-note { font-family: var(--mono); font-weight: 700; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }
.sync-note.warn { color: var(--over); }
.sync-note.amber { color: var(--amber); }
/* The signed-in name lives in the sidebar on desktop; the sidebar is
   hidden on phones, so the topbar carries it there instead — two named
   users share this origin and must always be able to see whose data is
   on screen. */
.topbar-user { display: none; font-family: var(--mono); font-weight: 700; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }
.topbar-user b { color: var(--ink); }
@media (max-width: 900px) { .topbar-user { display: inline; } }

/* ---- today ---- */
.today-date {
  font-family: var(--mono); font-weight: 700; font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--mut);
  margin-bottom: 12px;
}
.habit-list { display: flex; flex-direction: column; gap: 12px; max-width: 720px; }

.habit-card {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; align-items: center;
  border: 2px solid var(--bd-strong); background: var(--card);
  box-shadow: var(--shadow-sm); padding: 12px 14px;
}
.habit-card.off { border-color: var(--bd); box-shadow: none; background: transparent; }
.habit-name { font-weight: 700; font-size: 15.5px; display: flex; align-items: center; gap: 8px; min-width: 0; }
.habit-name .qmark { flex: 0 0 auto; }
.habit-sub {
  grid-column: 1; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-family: var(--mono); font-weight: 700; font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--mut);
}
.habit-sub .streak-now { color: var(--accent); }
.habit-sub .streak-now.zero { color: var(--mut); }

/* The one-tap completion control: a big pressable plate. */
.check {
  grid-row: 1 / span 2; grid-column: 2;
  width: 54px; height: 54px; display: grid; place-items: center;
  border: 2px solid var(--bd-strong); background: var(--surface);
  box-shadow: var(--shadow-sm); color: var(--mut);
  transition: transform .12s var(--ease), box-shadow .12s var(--ease);
}
.check:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--shadow-ink); }
.check svg.icon { width: 26px; height: 26px; }
.check.done { background: var(--accent); color: var(--accent-ink); }
.check.grace { background: var(--grace-bg); color: var(--ink); font-family: var(--mono); font-weight: 700; font-size: 20px; }
.check[disabled] { opacity: .45; pointer-events: none; }

/* Deliberate secondary actions behind a dots toggle. */
.habit-menu-btn { color: var(--mut); padding: 4px 6px; }
.habit-menu-btn:hover { color: var(--ink); background: var(--hover); }
.habit-actions {
  grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap;
  border-top: 1px solid var(--bd); padding-top: 10px; margin-top: 6px;
}

/* ---- recent chain: last N scheduled occurrences as glyph cells ---- */
.chain { display: inline-flex; gap: 3px; align-items: center; }
.cell {
  width: 16px; height: 16px; display: grid; place-items: center;
  border: 2px solid var(--bd-strong); background: var(--surface);
  font-family: var(--mono); font-weight: 700; font-size: 9px; line-height: 1;
  color: var(--ink);
}
.cell svg { width: 10px; height: 10px; display: block; }
.cell.done { background: var(--accent); color: var(--accent-ink); }
.cell.grace { background: var(--grace-bg); color: var(--ink); }
.cell.missed { color: var(--mut); }
.cell.pending { border-style: dashed; color: var(--faint); }
.cell.unscheduled { border-color: var(--bd); background: transparent; color: var(--faint); }
.cell.queued { outline: 2px solid var(--amber); outline-offset: 1px; }

/* ---- microcopy line under a habit (never-miss-twice, deadpan) ---- */
.nudge {
  grid-column: 1 / -1;
  font-family: var(--mono); font-weight: 700; font-size: 9.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
}

/* ---- conflicts ---- */
.conflict-box {
  border: 2px solid var(--over); color: var(--ink); background: var(--card);
  box-shadow: var(--shadow-sm); padding: 12px 14px; margin-bottom: 14px; max-width: 720px;
}
.conflict-box .zine-label { color: var(--over); }
.conflict-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--bd); }
.conflict-row:last-child { border-bottom: 0; }

/* ---- history calendar ---- */
.hist-picker { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.hab-chip {
  font-family: var(--mono); font-weight: 700; font-size: 10.5px;
  letter-spacing: .08em; text-transform: uppercase;
  border: 2px solid var(--bd-strong); background: var(--surface); color: var(--ink);
  padding: 5px 10px;
}
.hab-chip.active { background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow-sm); }
.hab-chip.archived { border-style: dashed; color: var(--mut); }

.period-nav { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.period-nav .month-label { font-family: var(--display); font-weight: 900; font-size: 17px; text-transform: uppercase; min-width: 190px; }

.cal { width: max-content; max-width: 100%; }
.cal-head, .cal-week { display: grid; grid-template-columns: repeat(7, 44px); gap: 4px; }
.cal-head { margin-bottom: 4px; }
.cal-head span { text-align: center; font-family: var(--mono); font-weight: 700; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }
.cal-week { margin-bottom: 4px; }
.day-cell {
  position: relative; width: 44px; height: 44px;
  border: 2px solid var(--bd-strong); background: var(--surface);
  display: grid; place-items: center; color: var(--ink); padding: 0;
}
.day-cell .d { position: absolute; top: 1px; left: 3px; font-family: var(--mono); font-weight: 700; font-size: 8.5px; color: inherit; opacity: .75; }
.day-cell .g { font-family: var(--mono); font-weight: 700; font-size: 14px; }
.day-cell svg { width: 15px; height: 15px; }
.day-cell.done { background: var(--accent); color: var(--accent-ink); }
.day-cell.grace { background: var(--grace-bg); color: var(--ink); }
.day-cell.missed { color: var(--mut); }
.day-cell.pending { border-style: dashed; }
.day-cell.unscheduled { border-color: var(--bd); background: transparent; color: var(--faint); }
/* Offline, beyond the mirrored event window: scheduled but unknowable. */
.day-cell.unknown { border-style: dotted; border-color: var(--bd); color: var(--faint); background: transparent; }
.day-cell.queued { outline: 2px solid var(--amber); outline-offset: 1px; }
.day-cell.blank { border-color: transparent; background: transparent; }
.day-cell.today-cell { outline: 2px solid var(--ink); outline-offset: 1px; }
.day-cell.editable { cursor: pointer; }
.day-cell.editable:hover { transform: translate(-1px, -1px); box-shadow: var(--shadow-sm); }
.day-cell.selected { outline: 3px solid var(--accent); outline-offset: 1px; }
@media (max-width: 420px) {
  .cal-head, .cal-week { grid-template-columns: repeat(7, minmax(36px, 1fr)); }
  .day-cell { width: auto; height: 40px; }
}

.day-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 14px 0; }

.hist-stats { display: flex; gap: 22px; flex-wrap: wrap; margin: 6px 0 18px; }
.hist-stats .stat b { display: block; font-family: var(--display); font-weight: 900; font-size: 22px; }
.hist-stats .stat span { font-family: var(--mono); font-weight: 700; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--mut); }

/* Legend: states named, not just coloured. */
.legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 16px; align-items: center; }
.legend .lg { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-weight: 700; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }

/* ---- manage ---- */
.manage-form {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  border: 2px solid var(--bd-strong); background: var(--card); box-shadow: var(--shadow-sm);
  padding: 12px 14px; margin-bottom: 18px; max-width: 720px;
}
.text-input {
  flex: 1; min-width: 160px; border: 2px solid var(--bd); background: var(--surface);
  padding: 8px 10px; font-size: 14px;
}
.text-input:focus { border-color: var(--bd-strong); }
.wd-row { display: inline-flex; gap: 4px; }
.wd {
  width: 30px; height: 30px; display: grid; place-items: center;
  border: 2px solid var(--bd-strong); background: var(--surface); color: var(--mut);
  font-family: var(--mono); font-weight: 700; font-size: 10.5px;
}
.wd[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.wd[disabled] { opacity: .45; pointer-events: none; }

.manage-list { display: flex; flex-direction: column; gap: 10px; max-width: 720px; }
.manage-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border: 2px solid var(--bd-strong); background: var(--card); box-shadow: var(--shadow-sm);
  padding: 10px 12px;
}
.manage-row.archived-row { border-style: dashed; box-shadow: none; color: var(--mut); }
.manage-row .habit-name { font-size: 14px; }
.order-btns { display: inline-flex; gap: 4px; }
.section-head { border-top: 3px solid var(--bd-strong); padding-top: 10px; margin: 22px 0 10px; }

.setting-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--bd); max-width: 560px; flex-wrap: wrap; }
.setting-row label { font-family: var(--mono); font-weight: 700; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; }
.setting-row select { border: 2px solid var(--bd); background: var(--surface); padding: 6px 8px; font-family: var(--mono); font-size: 12px; max-width: 260px; }

/* ---- login ---- */
.login-wrap { min-height: 70vh; display: grid; place-items: center; padding: 20px; }
.login-card {
  width: 100%; max-width: 360px; border: 2px solid var(--bd-strong);
  background: var(--card); box-shadow: var(--shadow); padding: 22px 24px;
}
.login-card .masthead { padding-left: 0; padding-right: 0; }
.login-field { margin-bottom: 14px; }
.login-field label { display: block; margin-bottom: 5px; }
.login-field input {
  width: 100%; border: 2px solid var(--bd); background: var(--surface);
  padding: 9px 10px; font-size: 15px;
}
.login-field input:focus { border-color: var(--bd-strong); }
.login-err { color: var(--over); font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; min-height: 16px; margin-bottom: 10px; }

/* ---- toasts ---- */
#toasts { position: fixed; bottom: 18px; right: 18px; z-index: 100; display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 900px) { #toasts { bottom: calc(64px + env(safe-area-inset-bottom)); right: 10px; left: 10px; } }
.toast {
  background: var(--surface); border: 2px solid var(--bd-strong); box-shadow: var(--shadow);
  padding: 10px 14px; font-family: var(--mono); font-weight: 700; font-size: 11.5px;
  letter-spacing: .06em; text-transform: uppercase;
}
.toast.err { color: var(--over); }
.toast.ok { color: var(--ok); }

/* ---- loading ---- */
.loading { color: var(--mut); font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; padding: 30px 0; }