/* app.css — chrome, shared classes and the app-owned screens (login, home, focus, modal).
   Prefix a- for everything app-specific. Shared classes (SPEC §1) live here only:
   .panel .btn .btn.sec .btn.ghost .btn.small .num .pf .sub .toast .pill .field .field input
   .field select .log .log li .log li.sq .log .time .log .note .log .dur .addlink .seg .seg button
   .seg button.on */

:root {
  --bg: #1c1511; --bg2: #221a15;
  --panel: #f3e4c4; --panel2: #e6d2a8; --edge: #4a2f1d; --line: #cfae7a; --ink: #3b2616; --muted: #7f6448;
  --gold: #b8771a; --accent: #b8332b; --btn: #d9413a; --btn-dk: #9a2622; --btn-ink: #fff6e8;
  --green: #5aa14a; --green-dk: #2f6a2e;
  --frame: #6b4a2e; --frameL: #a97f55; --frameD: #3a2416; --shadow: #0f0a08;
  --tip-bg: #fff8e6; --tip-ink: #3b2616; --field: #fff8e6;
  --pale: #f3e4c4; --pale2: #cdbca8; --star: #f3c969;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: Nunito, system-ui, sans-serif; font-size: 16px; line-height: 1.4;
}
body {
  background-image: linear-gradient(var(--bg2) 50%, transparent 50%);
  background-size: 4px 4px; min-height: 100vh; overflow-x: hidden;
}
.pf { font-family: "Pixelify Sans", monospace; }
.num { font-family: Silkscreen, monospace; }
a { color: inherit; }
button { font: inherit; color: inherit; }
canvas { image-rendering: pixelated; image-rendering: crisp-edges; }
:focus-visible { outline: 3px solid var(--star); outline-offset: 2px; }

/* ---------- shared ---------- */
.panel {
  background: var(--panel); border: 3px solid var(--edge);
  box-shadow: inset 0 0 0 2px var(--line), 4px 4px 0 var(--shadow);
}
.btn {
  font-family: "Pixelify Sans", monospace; font-size: 27px; line-height: 1;
  background: var(--btn); color: var(--btn-ink); border: 3px solid var(--edge);
  box-shadow: inset 0 -5px 0 var(--btn-dk), 4px 4px 0 var(--shadow);
  padding: 12px 36px 16px; cursor: pointer; text-shadow: 2px 2px 0 var(--btn-dk);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translate(2px, 2px); box-shadow: inset 0 -5px 0 var(--btn-dk), 2px 2px 0 var(--shadow); }
.btn:disabled { opacity: .6; cursor: default; transform: none; }
.btn.sec {
  background: var(--green); box-shadow: inset 0 -5px 0 var(--green-dk), 4px 4px 0 var(--shadow);
  text-shadow: 2px 2px 0 var(--green-dk); font-size: 20px; padding: 8px 22px 12px; color: #fff;
}
.btn.sec:active { box-shadow: inset 0 -5px 0 var(--green-dk), 2px 2px 0 var(--shadow); }
.btn.ghost {
  background: var(--panel2); box-shadow: inset 0 -5px 0 var(--line), 4px 4px 0 var(--shadow);
  text-shadow: none; color: var(--muted); font-size: 18px; padding: 8px 18px 12px;
}
.btn.ghost:active { box-shadow: inset 0 -5px 0 var(--line), 2px 2px 0 var(--shadow); }
.btn.small { font-size: 16px; padding: 5px 12px 8px; box-shadow: inset 0 -3px 0 var(--btn-dk), 3px 3px 0 var(--shadow); }
.btn.small.ghost { box-shadow: inset 0 -3px 0 var(--line), 3px 3px 0 var(--shadow); }
.btn.small.sec { box-shadow: inset 0 -3px 0 var(--green-dk), 3px 3px 0 var(--shadow); }
.btn.small:active { box-shadow: inset 0 -3px 0 var(--btn-dk), 1px 1px 0 var(--shadow); transform: translate(2px, 2px); }
.sub { color: var(--muted); font-size: 14px; }
.toast {
  background: var(--tip-bg); color: var(--tip-ink); border: 3px solid var(--edge);
  box-shadow: 4px 4px 0 var(--shadow); padding: 10px 16px; font-size: 16px;
  display: flex; align-items: center; gap: 10px;
}
.toast canvas { width: 33px; height: 33px; flex: none; }
.toast.error { border-color: var(--btn-dk); }
.pill {
  display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted);
  background: var(--panel2); padding: 3px 10px; white-space: nowrap; line-height: 1.4;
}
.field { display: flex; flex-direction: column; gap: 4px; margin: 0 0 12px; }
.field label, .field > span:first-child { font-family: "Pixelify Sans", monospace; font-size: 18px; color: var(--ink); }
.field input, .field select, .field textarea {
  font: inherit; font-size: 17px; padding: 9px 12px; background: var(--field); color: #2a1f22;
  border: 3px solid var(--edge); box-shadow: inset 3px 3px 0 #e2d3b8; width: 100%; min-width: 0;
  border-radius: 0; -webkit-appearance: none; appearance: none;
}
.field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--edge) 50%), linear-gradient(135deg, var(--edge) 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 12px) 55%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 34px;
}
.field input[type=number] { font-family: Silkscreen, monospace; font-size: 15px; }
.field input[type=date], .field input[type=time] { font-family: Silkscreen, monospace; font-size: 14px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid var(--star); outline-offset: 0; }
.field .hint { font-size: 13px; color: var(--muted); }
.log { list-style: none; margin: 0; padding: 0; }
.log li {
  display: grid; grid-template-columns: 70px 1fr auto; gap: 10px; padding: 7px 4px;
  border-bottom: 2px dotted var(--line); align-items: center;
}
.log li:last-child { border-bottom: 0; }
.log .time { font-family: Silkscreen, monospace; font-size: 12px; color: var(--accent); padding-top: 3px; }
.log .note { color: var(--ink); display: flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.log .dur { font-size: 12px; color: var(--muted); background: var(--panel2); padding: 2px 8px; white-space: nowrap; }
.log li.sq { opacity: .65; }
.log li.sq .time { color: var(--muted); }
.log li.sq .note > span { text-decoration: line-through; color: var(--muted); }
.log li canvas { width: 22px; height: 22px; flex: none; }
.addlink {
  display: inline-block; margin-top: 12px; color: var(--muted); font-size: 14px;
  text-decoration: underline dotted; cursor: pointer; background: none; border: 0; padding: 0; font-family: inherit;
}
.addlink:hover { color: var(--ink); }
.seg { display: inline-flex; border: 3px solid var(--edge); box-shadow: 3px 3px 0 var(--shadow); background: var(--panel2); }
.seg button {
  font-family: "Pixelify Sans", monospace; font-size: 17px; background: transparent; color: var(--muted);
  border: 0; border-right: 2px solid var(--edge); padding: 6px 14px 8px; cursor: pointer; line-height: 1;
}
.seg button:last-child { border-right: 0; }
.seg button.on { color: var(--btn-ink); background: var(--btn); box-shadow: inset 0 -4px 0 var(--btn-dk); text-shadow: 1px 1px 0 var(--btn-dk); }

/* ---------- shell ---------- */
.a-app { max-width: 1300px; margin: 0 auto; padding: 14px 16px 60px; }
.a-app.a-booting { min-height: 60vh; display: flex; align-items: center; justify-content: center; color: var(--pale2); }
.a-top {
  display: flex; align-items: center; justify-content: space-between; padding: 10px 18px;
  margin-bottom: 14px; gap: 12px; flex-wrap: wrap;
}
.a-brand { display: flex; align-items: center; gap: 10px; font-size: 28px; font-weight: 700; color: var(--ink); letter-spacing: .5px; text-decoration: none; }
.a-brand canvas { width: 44px; height: 44px; }
.a-nav { display: flex; gap: 4px; font-size: 21px; }
.a-nav a { text-decoration: none; padding: 6px 14px; color: var(--muted); cursor: pointer; }
.a-nav a:hover { color: var(--ink); }
.a-nav a.on { color: var(--ink); background: var(--panel2); box-shadow: inset 0 -3px 0 var(--btn); }
.a-right { color: var(--muted); font-size: 14px; display: flex; gap: 12px; align-items: center; }
.a-clock { white-space: nowrap; }
.a-countpill {
  font-family: Silkscreen, monospace; font-size: 13px; color: var(--btn-ink); background: var(--btn);
  border: 2px solid var(--edge); box-shadow: inset 0 -3px 0 var(--btn-dk), 2px 2px 0 var(--shadow);
  padding: 4px 10px 6px; text-decoration: none; white-space: nowrap;
}
.a-countpill.brk { background: var(--green); box-shadow: inset 0 -3px 0 var(--green-dk), 2px 2px 0 var(--shadow); }
.a-countpill.note { background: var(--gold); box-shadow: inset 0 -3px 0 #8a5a14, 2px 2px 0 var(--shadow); }
.a-lang { display: inline-flex; font-size: 16px; }
.a-lang button { cursor: pointer; padding: 2px 6px; background: none; border: 0; color: var(--muted); font-family: "Pixelify Sans", monospace; font-size: 16px; }
.a-lang button.on { color: var(--ink); background: var(--panel2); }
.a-main { position: relative; }
.a-hidden { display: none !important; }

/* ---------- login ---------- */
.a-login { max-width: 520px; margin: 24px auto 0; }
.a-login-stripwrap { display: flex; justify-content: center; margin-bottom: -4px; }
.a-login-strip {
  display: block; border: 4px solid var(--frame); border-bottom: 0;
  box-shadow: inset 0 0 0 2px var(--frameL), 0 0 0 3px var(--frameD); background: #000; max-width: 100%;
}
.a-login-panel { padding: 22px 24px 20px; }
.a-login-title { font-size: 30px; margin: 0 0 4px; color: var(--ink); }
.a-login-sub { margin: 0 0 18px; }
.a-login-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
.a-login-err { color: var(--accent); font-size: 14px; min-height: 20px; margin: 4px 0 8px; }
.a-login-err .num { font-size: 13px; }

/* ---------- home ---------- */
.a-home {
  display: grid; grid-template-columns: 1.45fr 1fr; gap: 14px;
  grid-template-areas: "prompts prompts" "garden garden" "stats stats" "log timer";
  align-items: start;
}
.a-prompts { grid-area: prompts; display: flex; flex-direction: column; gap: 10px; }
.a-prompts:empty { display: none; }
.a-prompt { justify-content: space-between; flex-wrap: wrap; }
.a-prompt .a-prompt-text { flex: 1 1 240px; }
.a-prompt .a-prompt-actions { display: flex; gap: 8px; }
.a-garden { grid-area: garden; min-width: 0; }
.a-stats { grid-area: stats; min-width: 0; }
.a-card { padding: 16px 18px; min-width: 0; }
.a-card h2 {
  font-family: "Pixelify Sans", monospace; font-weight: 600; font-size: 24px; margin: 0 0 8px; color: var(--ink);
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.a-card h2 small { font-family: Nunito, sans-serif; font-size: 13px; color: var(--muted); font-weight: 600; }
.a-logcard { grid-area: log; }
.a-log-empty { color: var(--muted); }
.a-log-addnote { font-size: 12px; color: var(--accent); text-decoration: underline dotted; background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; }
.log li.a-log-click { cursor: pointer; }
.log li.a-log-click:hover { background: rgba(0, 0, 0, .04); }
.a-timercard { grid-area: timer; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.a-big { font-family: Silkscreen, monospace; font-size: 62px; line-height: 1; color: var(--ink); text-shadow: 3px 3px 0 var(--line); }
.a-timercard .btn { min-height: 56px; }
.a-timercard .btn.a-pulse { animation: a-pulse 1.1s ease-out 1; }
@keyframes a-pulse {
  0% { transform: scale(1); } 30% { transform: scale(1.07); } 60% { transform: scale(.98); } 100% { transform: scale(1); }
}
.a-hint { display: flex; gap: 8px; align-items: center; justify-content: center; }
.a-hint canvas { width: 22px; height: 22px; flex: none; }
.a-goal-star { color: var(--gold); }

/* stop-the-chime button (SPEC §17a): a small ghost button that only shows while the alarm rings */
.a-stopchime canvas { width: 22px; height: 22px; flex: none; }
.a-timercard .a-stopchime { min-height: 0; }
.a-chime-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.a-prompt-box .a-chime-row .toast { margin-bottom: 0; flex: 1 1 auto; }
.a-chime-row .a-stopchime { white-space: nowrap; }

/* ---------- focus ---------- */
.a-focus { display: grid; grid-template-columns: 1fr 300px; gap: 16px; align-items: start; }
.a-focus-main {
  padding: 28px 24px; text-align: center; display: flex; flex-direction: column; align-items: center;
  gap: 14px; min-height: 480px; justify-content: center;
}
.a-focus-sub { font-size: 22px; color: var(--gold); }
.a-huge {
  font-family: Silkscreen, monospace; font-size: 112px; line-height: 1; color: var(--ink);
  text-shadow: 5px 5px 0 var(--line); letter-spacing: 2px; margin: 6px 0; font-variant-numeric: tabular-nums;
}
.a-huge.brk { font-size: 88px; color: var(--green-dk); }
.a-segs { display: flex; gap: 4px; margin: 6px 0; justify-content: center; flex-wrap: wrap; max-width: 560px; }
.a-segs i { display: block; width: 18px; height: 14px; background: var(--panel2); border: 2px solid var(--edge); }
.a-segs i.on { background: var(--btn); box-shadow: inset 0 -3px 0 var(--btn-dk); }
.a-segs i.brk { background: var(--green); box-shadow: inset 0 -3px 0 var(--green-dk); }
.a-focus-links { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
.a-focus-links .addlink { margin-top: 0; }
.a-speaker {
  display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; cursor: pointer;
  color: var(--muted); font-size: 14px; padding: 4px 8px; font-family: inherit;
}
.a-speaker canvas { width: 22px; height: 22px; }
.a-speaker:hover { color: var(--ink); }
.a-prompt-box { width: 100%; max-width: 560px; text-align: left; }
.a-prompt-box .toast { margin-bottom: 14px; }
.a-prompt-q { font-size: 28px; color: var(--ink); margin-bottom: 8px; }
.a-prompt-box textarea {
  width: 100%; font: inherit; font-size: 17px; padding: 10px 12px; background: var(--field); color: #2a1f22;
  border: 3px solid var(--edge); box-shadow: inset 3px 3px 0 #e2d3b8; resize: vertical; min-height: 84px; border-radius: 0;
}
.a-actions { display: flex; gap: 12px; margin-top: 12px; align-items: center; flex-wrap: wrap; }
.a-actions.center { justify-content: center; }
.a-break-toast { margin: 0 auto 18px; width: max-content; max-width: 100%; }
.a-side { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.a-side-title { font-size: 20px; color: var(--ink); }
.a-side-canvas {
  width: 240px; height: 240px; border: 4px solid var(--frame);
  box-shadow: inset 0 0 0 2px var(--frameL), 0 0 0 3px var(--frameD); background: #2d2546;
}
.a-side .log { width: 100%; }
.a-side .log li { grid-template-columns: 60px 1fr; }
.a-side .log .note { font-size: 13px; }

/* ---------- peek ---------- */
.a-peek {
  position: fixed; inset: 0; z-index: 40; background: rgba(12, 8, 6, .86); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; padding: 16px; overflow: auto;
}
.a-peek-garden { pointer-events: none; width: 100%; max-width: 1268px; }
.a-peek-close { align-self: center; }

/* ---------- modal ---------- */
.a-modal-root { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(12, 8, 6, .72); overflow: auto; }
.a-modal { width: 100%; max-width: 520px; padding: 20px 22px; margin: auto; }
.a-modal h2 { font-family: "Pixelify Sans", monospace; font-weight: 600; font-size: 26px; margin: 0 0 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.a-modal h2 canvas { width: 33px; height: 33px; }
.a-modal-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.a-modal-row3 { grid-template-columns: 1.3fr 1fr 1fr; }
.a-modal .seg { margin-bottom: 12px; }
.a-modal-err { color: var(--accent); font-size: 14px; min-height: 20px; margin: 0 0 8px; }
.a-modal-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.a-modal-actions .spacer { flex: 1; }
.a-modal .a-tzpill { margin-left: auto; }

/* ---------- toasts & pills ---------- */
.a-toasts { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: flex; flex-direction: column; gap: 10px; max-width: min(420px, calc(100vw - 32px)); pointer-events: none; }
.a-toasts .toast { pointer-events: auto; animation: a-toast-in .25s ease-out; }
@keyframes a-toast-in { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
.a-pills { position: fixed; left: 16px; bottom: 16px; z-index: 60; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.a-pills .pill { border: 2px solid var(--edge); box-shadow: 2px 2px 0 var(--shadow); color: var(--ink); background: var(--panel); }
.a-pills .pill.offline { background: #cdbca8; }
.a-pills .pill.saving canvas { width: 22px; height: 22px; }
.a-pills .pill .btn { margin-left: 4px; }

/* ---------- phone ---------- */
@media (max-width: 860px) {
  .a-app { padding: 10px 16px 50px; }
  .a-top { padding: 8px 12px; }
  .a-brand { font-size: 22px; }
  .a-brand canvas { width: 33px; height: 33px; }
  .a-nav { font-size: 18px; }
  .a-nav a { padding: 6px 10px; }
  .a-home { grid-template-columns: 1fr; grid-template-areas: "prompts" "timer" "garden" "stats" "log"; }
  .a-big { font-size: 52px; }
  .a-timercard .btn { min-height: 56px; font-size: 24px; padding: 10px 28px 14px; }
  .a-focus { grid-template-columns: 1fr; }
  .a-focus-main { min-height: 0; padding: 22px 16px; }
  .a-huge { font-size: 72px; }
  .a-huge.brk { font-size: 60px; }
  .a-side-canvas { width: 180px; height: 180px; }
  .a-modal-row, .a-modal-row3 { grid-template-columns: 1fr; }
  .a-toasts { left: 16px; right: 16px; bottom: 64px; max-width: none; }
  .a-pills { bottom: 12px; }
}
@media (max-width: 420px) {
  .a-huge { font-size: 56px; letter-spacing: 1px; }
  .a-huge.brk { font-size: 48px; }
  .btn { font-size: 22px; padding: 10px 24px 14px; }
}