/* KTD7 design tokens: deep navy on warm paper.
 * Settled direction, see design/Main.dc.html. Light only - no dark mode. */

:root{
  /* surfaces */
  --paper:#F2EFE9;
  --card:#FFFFFF;
  --quiet:#E4DFD6;
  --line:#E0DAD0;

  /* ink */
  --ink:#1B1917;
  --ink-muted:#7C7468;
  --ink-dim:#9C948A;
  --ink-faint:#B0A89D;
  --ink-quiet:#57514A;

  /* navy: the action colour, reserved for things Geoff acts on */
  --navy:#1A5480;
  --navy-pressed:#123E60;
  --navy-line:#3F6E9B;
  --on-navy:#FFFFFF;
  --on-navy-muted:#C9DFF2;
  --on-navy-label:#A6C8E6;

  /* accent chip, and the two states that are neither quiet nor navy */
  --chip-bg:#F6E9D2;
  --chip-ink:#8A5A16;
  --warn:#8A5A16;
  --bad:#B42318;

  /* radii */
  --r-lg:26px;
  --r-card:20px;
  --r-pill:999px;

  /* shadow */
  --shadow-card:0 2px 8px rgba(27,25,23,0.05);
  --shadow-navy:0 10px 26px rgba(26,84,128,0.24);

  /* type */
  --font:"Outfit","Segoe UI",system-ui,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}

body{
  background:var(--paper);
  color:var(--ink);
  font:400 16px/1.5 var(--font);
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
  padding:0 18px calc(24px + env(safe-area-inset-bottom));
}

.wrap{max-width:430px;margin:0 auto}

.shell-head{
  padding:calc(18px + env(safe-area-inset-top)) 0 4px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.shell-head h1{font-size:27px;font-weight:600;letter-spacing:-.02em;margin:0;line-height:1.15}
.shell-head .day{font-size:15px;color:var(--ink-muted);font-weight:400}

button{font:inherit;color:inherit;cursor:pointer}

/* status line */
.status{
  display:flex;align-items:center;gap:9px;font-size:14px;color:var(--ink-muted);
  padding:10px 14px;background:var(--card);border-radius:var(--r-pill);
  box-shadow:var(--shadow-card);margin:12px 0 14px;
}
.dot{width:8px;height:8px;border-radius:var(--r-pill);background:var(--navy);flex:none}
.dot.pending{background:var(--warn)}
.dot.error{background:var(--bad)}

/* card */
.card{
  background:var(--card);border-radius:var(--r-card);padding:16px;
  box-shadow:var(--shadow-card);margin-bottom:10px;
}
.card.lg{border-radius:var(--r-lg);padding:22px}
.card.navy{background:var(--navy);color:var(--on-navy);box-shadow:var(--shadow-navy)}
.card.navy p{color:var(--on-navy-muted)}
.card.navy .card-label{color:var(--on-navy-label)}
.card h2{font-size:16px;font-weight:600;margin:0 0 10px;letter-spacing:-.01em}
/* the session is the one thing on the screen Geoff is here to read */
.card.navy h2{font-size:27px;line-height:1.1;margin:0 0 2px;letter-spacing:-.02em}
.card-label{
  font-size:13px;letter-spacing:.06em;font-weight:500;text-transform:uppercase;
  color:var(--ink-dim);margin:0 0 10px;
}

/* pill button */
.pill{
  border:0;border-radius:var(--r-pill);padding:14px 18px;text-align:center;
  font-size:16px;font-weight:600;background:var(--navy);color:var(--on-navy);
  transition:background .12s ease, transform .08s ease;
}
.pill:active{background:var(--navy-pressed);transform:scale(.985)}
.pill.quiet{background:var(--quiet);color:var(--ink-quiet);font-weight:500}
.pill.quiet:active{background:var(--line)}
.pill.ghost{background:transparent;color:var(--ink-muted);box-shadow:inset 0 0 0 1.5px var(--line)}
/* the action on a navy card: white pill, navy ink */
.pill.on-navy{background:var(--on-navy);color:var(--navy)}
.pill.on-navy:active{background:var(--on-navy-muted)}
.pill:disabled{opacity:.5}
.pill.grow{flex-grow:1}

/* check row */
.check-row{
  width:100%;background:var(--card);border:0;border-radius:var(--r-card);
  padding:15px 16px;min-height:68px;display:flex;align-items:center;gap:13px;
  box-shadow:var(--shadow-card);text-align:left;
  transition:transform .08s ease;
}
.check-row:active{transform:scale(.99)}
.check-row .box{
  width:30px;height:30px;border-radius:var(--r-pill);flex:none;
  border:2px solid var(--line);display:flex;align-items:center;justify-content:center;
}
.check-row.done .box{background:var(--navy);border-color:var(--navy)}
.check-row .body{display:flex;flex-direction:column;gap:1px;flex-grow:1;min-width:0}
.check-row .row-head{display:flex;align-items:center;gap:8px}
.check-row .t{font-size:16px;font-weight:600}
.check-row .s{font-size:14px;color:var(--ink-muted)}
.check-row.done .t{font-weight:500;color:var(--ink-dim)}
.check-row.done .s{color:var(--ink-faint)}
.chip{
  font-size:11px;font-weight:500;color:var(--chip-ink);background:var(--chip-bg);
  border-radius:var(--r-pill);padding:2px 9px;
}

/* bottom sheet */
.sheet-scrim{
  position:fixed;inset:0;background:rgba(27,25,23,.34);
  opacity:0;transition:opacity .18s ease;z-index:20;
}
.sheet-scrim.open{opacity:1}
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:21;
  max-width:430px;margin-inline:auto;
  background:var(--paper);border-radius:var(--r-lg) var(--r-lg) 0 0;
  padding:10px 18px calc(18px + env(safe-area-inset-bottom));
  max-height:88vh;overflow-y:auto;
  transform:translateY(100%);transition:transform .22s cubic-bezier(.2,.8,.3,1);
  box-shadow:0 -8px 30px rgba(27,25,23,.14);
}
.sheet.open{transform:translateY(0)}
.sheet .grip{width:38px;height:4px;border-radius:var(--r-pill);background:var(--line);margin:0 auto 12px}
.sheet h2{font-size:21px;font-weight:600;letter-spacing:-.02em;margin:0 0 4px}

/* form fields */
label{display:block;font-size:13px;color:var(--ink-muted);margin:12px 0 5px}
input,select,textarea{
  width:100%;font:inherit;color:var(--ink);background:var(--card);
  border:1.5px solid var(--line);border-radius:14px;padding:13px;
}
textarea{min-height:84px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--navy);outline-offset:-1px;border-color:transparent}

.actions{display:flex;gap:9px;margin-top:18px}
.actions>*{flex:1}
.row{display:flex;gap:9px}
.row>*{flex:1}

/* shell nav: one pill per view, the active one filled */
.nav{display:flex;gap:8px;margin-bottom:14px}
.nav:empty{display:none}
.pill.quiet.active{background:var(--navy);color:var(--on-navy);font-weight:600}

/* a stack of check rows */
.kinds{display:flex;flex-direction:column;gap:9px;margin-bottom:14px}

/* today list */
ul.log{list-style:none;margin:0;padding:0}
ul.log li{
  padding:10px 0;border-bottom:1px solid var(--line);font-size:15px;
  display:flex;gap:11px;align-items:baseline;
}
ul.log li:last-child{border-bottom:0}
ul.log .time{color:var(--ink-muted);font-variant-numeric:tabular-nums;flex:none}
ul.log .pend{color:var(--warn);font-size:12px;flex:none;margin-left:auto}
.empty{color:var(--ink-muted);font-size:14px;margin:0}

.hide{display:none}

/* setup */
.setup p{font-size:14px;color:var(--ink-muted)}
.setup ol{font-size:14px;color:var(--ink-muted);padding-left:20px;margin:10px 0}
.setup li{margin-bottom:6px}
.setup code{background:var(--quiet);padding:2px 6px;border-radius:6px;font-size:13px;word-break:break-all}
a.gh{
  display:block;background:var(--navy);color:var(--on-navy);text-decoration:none;
  text-align:center;padding:14px;border-radius:var(--r-pill);font-weight:600;font-size:16px;
}
.err{color:var(--bad);font-size:13px;margin-top:10px}
footer{margin-top:18px;text-align:center}
footer button{background:none;border:0;color:var(--ink-dim);font-size:13px;text-decoration:underline}