/* Goal Marks — app styles.
   App rules, not website rules: fixed full-screen container, the page itself never
   scrolls, content scrolls inside panes, bottom tab bar, safe-area padding. */

/* Navy and white only. --navy is the logo navy, 011B3E. The names --green,
   --green-soft and --amber are kept so markup and JS stay untouched; they now
   carry navy values. Neutrals are navy-tinted, not grey-green, or the app
   still reads green next to the mark. */
:root{
  --navy:#011B3E;
  --navy-2:#27467A;
  --green:#011B3E;
  --green-2:#27467A;
  --green-soft:#E6ECF5;
  --amber:#27467A;
  --ink:#0E1726;
  --muted:#5D6880;
  --line:#DCE2EC;
  --line-2:#EDF0F6;
  --ground:#F4F6FA;
  --card:#ffffff;
  --shadow:0 1px 2px rgba(1,27,62,.08), 0 6px 18px rgba(1,27,62,.06);
  --tab-h:60px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;overflow:hidden;overscroll-behavior:none}
body{
  background:var(--ground);color:var(--ink);
  font-family:"IBM Plex Sans",-apple-system,system-ui,sans-serif;
  font-size:16px;line-height:1.45;
  -webkit-font-smoothing:antialiased;
  user-select:none;
}
button,input,textarea,select{font:inherit;color:inherit}
input,textarea{user-select:text}

/* the app frame */
#app{
  position:fixed;inset:0;
  display:grid;grid-template-rows:auto 1fr auto;
  padding-top:env(safe-area-inset-top,0px);
}

/* header */
.hdr{
  display:flex;align-items:center;gap:10px;
  padding:12px 18px 10px;background:var(--ground);
}
.hdr h1{font-family:Archivo,system-ui,sans-serif;font-size:21px;font-weight:700;margin:0;letter-spacing:-.01em}
.hdr .sub{font-size:12.5px;color:var(--muted);margin-top:1px}
.hdr .back{
  width:36px;height:36px;margin-left:-8px;border:0;background:none;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;flex:none;
}
.hdr .back:active{background:var(--line-2)}
.hdr .spacer{flex:1}

/* scrolling pane */
.pane{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:4px 18px 26px}
.pane::-webkit-scrollbar{width:0}

/* bottom tabs */
.tabs{
  display:grid;grid-template-columns:repeat(3,1fr);
  background:#fff;border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.tab{
  border:0;background:none;cursor:pointer;height:var(--tab-h);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:var(--muted);font-size:11px;font-weight:600;letter-spacing:.02em;
}
.tab svg{width:22px;height:22px}
.tab[aria-current="page"]{color:var(--green)}
.tab:active{background:var(--line-2)}

/* cards */
.card{
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow);padding:16px;margin-bottom:12px;width:100%;
  text-align:left;cursor:pointer;display:block;
}
.card:active{transform:scale(.995)}
.card .top{display:flex;align-items:flex-start;gap:12px}
.card h2{font-family:Archivo,sans-serif;font-size:17px;font-weight:600;margin:0;flex:1;line-height:1.25}
.card .who{font-size:12.5px;color:var(--muted);margin-top:2px}
.ring{flex:none;width:46px;height:46px;position:relative}
.ring svg{transform:rotate(-90deg)}
.ring b{
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--navy);
}
.card .foot{display:flex;align-items:center;gap:8px;margin-top:13px;font-size:12.5px;color:var(--muted)}
.pill{
  font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;background:var(--line-2);color:var(--muted);
}
.pill.ontrack{background:var(--green-soft);color:var(--green)}
.pill.behind{background:var(--navy);color:#fff}
.pill.done{background:var(--navy);color:#fff}

/* the progress path — the screen this app lives or dies on */
.path{list-style:none;margin:8px 0 0;padding:0;position:relative}
.path li{position:relative;padding:0 0 4px 46px;min-height:62px}
.path li::before{
  content:'';position:absolute;left:17px;top:30px;bottom:-4px;width:2px;background:var(--line);
}
.path li:last-child::before{display:none}
.path li.done::before{background:var(--green)}
.node{
  position:absolute;left:6px;top:6px;width:24px;height:24px;border-radius:50%;
  border:2px solid var(--line);background:#fff;display:grid;place-items:center;
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.node svg{width:13px;height:13px;opacity:0;transform:scale(.6);transition:opacity .2s ease,transform .25s cubic-bezier(.2,1.5,.5,1)}
li.done .node{background:var(--green);border-color:var(--green)}
li.done .node svg{opacity:1;transform:scale(1)}
li.next .node{border-color:var(--navy);box-shadow:0 0 0 4px rgba(14,52,80,.10)}
.ms{
  width:100%;text-align:left;background:none;border:0;padding:4px 0 10px;cursor:pointer;
}
.ms .t{display:block;font-weight:600;font-size:15.5px;line-height:1.3}
li.done .ms .t{color:var(--muted)}
.ms .d{font-size:13px;color:var(--muted);margin-top:3px}
.ms .m{display:block;font-size:13.5px;color:var(--ink);margin-top:6px;padding:8px 10px;background:var(--green-soft);border-radius:8px;line-height:1.4}
.ms .meta{display:flex;width:100%;flex-wrap:wrap;gap:4px 12px;font-size:12.5px;color:var(--muted);margin-top:4px}

/* buttons */
.btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:14px 18px;border:0;border-radius:12px;cursor:pointer;
  font-weight:600;font-size:16px;
}
.btn svg{width:20px;height:20px;flex:none}
.btn.primary{background:var(--navy);color:#fff}
.btn.primary:active{background:var(--navy-2)}
.btn.ghost{background:#fff;border:1px solid var(--line);color:var(--ink)}
.btn.green{background:var(--green);color:#fff}
.btn.link{background:none;color:var(--muted);font-weight:500;font-size:14px;padding:10px}
.btn[disabled]{opacity:.5}

/* forms */
label.f{display:block;margin-bottom:14px}
label.f span{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:5px;letter-spacing:.02em}
.in{
  width:100%;padding:12px 13px;border:1px solid var(--line);border-radius:10px;
  background:#fff;font-size:16px;
}
.in:focus{outline:2px solid var(--navy);outline-offset:-1px;border-color:var(--navy)}
select.in{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 18px) calc(50% + 1px),calc(100% - 13px) calc(50% + 1px);background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px}
textarea.in{min-height:84px;resize:vertical;line-height:1.45}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* category chooser */
.cats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.cat{
  border:1px solid var(--line);background:#fff;border-radius:12px;padding:13px 12px;
  cursor:pointer;text-align:left;font-size:14px;font-weight:600;line-height:1.25;
}
.cat[aria-pressed="true"]{border-color:var(--green);background:var(--green-soft);color:var(--green)}

/* sheet */
.sheet-wrap{position:fixed;inset:0;z-index:50;display:none}
.sheet-wrap.open{display:block}
.scrim{position:absolute;inset:0;background:rgba(14,52,80,.35);animation:fade .18s ease}
.sheet{
  position:absolute;left:0;right:0;bottom:0;max-height:88%;
  background:var(--ground);border-radius:18px 18px 0 0;
  display:flex;flex-direction:column;
  padding-bottom:env(safe-area-inset-bottom,0px);
  animation:rise .24s cubic-bezier(.2,.9,.3,1);
}
.sheet-hd{display:flex;align-items:center;gap:10px;padding:14px 18px 8px}
.sheet-hd h3{font-family:Archivo,sans-serif;font-size:18px;margin:0;flex:1}
.sheet-body{overflow-y:auto;padding:6px 18px 10px}
.sheet-foot{padding:10px 18px 16px;display:grid;gap:8px;background:var(--ground)}
.grab{width:38px;height:4px;border-radius:2px;background:var(--line);margin:8px auto 0}
@keyframes rise{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* loading: a shape of what is coming, never a spinner */
.sk{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:12px}
.sk .bar{height:12px;border-radius:6px;background:var(--line-2);margin-bottom:9px}
.sk .bar.w1{width:52%}
.sk .bar.w2{width:32%;height:10px}
.sk .bar.w3{width:70%;height:10px;margin-bottom:0}
.sk, .sk .bar{animation:breathe 1.6s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:1}50%{opacity:.55}}

/* drag to reorder */
li.drag{opacity:.45}
li.over{background:var(--green-soft);border-radius:10px}
.grip{
  position:absolute;right:0;top:8px;width:34px;height:34px;border:0;background:none;
  cursor:grab;display:grid;place-items:center;color:var(--line-strong);touch-action:none;
}
.grip:active{cursor:grabbing;color:var(--muted)}
.grip svg{width:16px;height:16px}

/* empty + misc */
.empty{text-align:center;padding:44px 20px}
.empty svg{width:44px;height:44px}
.empty h2{font-family:Archivo,sans-serif;font-size:19px;margin:14px 0 6px}
.empty p{color:var(--muted);font-size:14.5px;margin:0 auto 20px;max-width:30ch}
.hint{font-size:13px;color:var(--muted);margin:-4px 0 14px}
/* Phase A: one tab per person, scrolls sideways when there are a lot of them.
   Someone with no timelines gets no tab, so this never fills up with ghosts. */
.ms.late .ms-d{color:#B0473C;font-weight:600}
/* Ideas you can take in one tap. Same pill language as the person tabs so the
   home screen does not grow a third visual style. */
/* The features were always there, Adrian just could not find them. One quiet line
   under the list rather than a tour or a tooltip. */
.howto{display:flex;align-items:center;flex-wrap:wrap;gap:4px;font-size:12.5px;line-height:1.5;
       color:var(--muted);margin:12px 2px 0}
.howto svg{width:14px;height:14px;vertical-align:-2px;opacity:.75}
.sugs{display:flex;flex-wrap:wrap;gap:8px}
.sug{display:inline-flex;align-items:center;gap:7px;padding:6px 13px 6px 6px;border-radius:999px;
     background:var(--card);border:1px solid var(--line);font-size:13px;font-weight:600;
     color:var(--ink);cursor:pointer;text-align:left}
.sug .tile{border-radius:999px;flex:0 0 auto}
.sug:active{background:var(--line-2)}
.sug:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.ppl{display:flex;gap:8px;overflow-x:auto;padding:14px 0 4px;margin:0 -2px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ppl::-webkit-scrollbar{display:none}
.pp{flex:0 0 auto;padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:var(--card);
    font-size:13px;font-weight:600;color:var(--muted);white-space:nowrap;cursor:pointer}
.pp.on{background:var(--navy);border-color:var(--navy);color:#fff}
.pp:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.sec-label{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:18px 0 8px}
.celebrate{
  position:fixed;left:50%;bottom:calc(var(--tab-h) + 22px + env(safe-area-inset-bottom,0px));
  transform:translate(-50%,0);z-index:60;
  background:var(--navy);color:#fff;padding:14px 20px;border-radius:12px;font-weight:600;
  box-shadow:var(--shadow);animation:pop .3s cubic-bezier(.2,1.5,.5,1);pointer-events:none;
}
@keyframes pop{from{opacity:0;transform:translate(-50%,10px) scale(.92)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* brand presence: the mark earns its place in the header, not stamped everywhere */
.hdr .brand{flex:none;margin-right:2px}
.authmark{text-align:center;padding:22px 0 24px}
.authmark .word{
  font-family:Archivo,sans-serif;font-weight:700;font-size:27px;letter-spacing:-.015em;
  color:var(--navy);margin-top:10px;line-height:1
}
.authmark .word b{color:var(--green);font-weight:700}
.authmark .tagline{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:7px
}
.fineprint{font-size:12.5px;color:var(--muted);line-height:1.5;margin:16px auto 0;max-width:34ch;text-align:center}
.empty .fineprint{margin-top:18px}

/* ---------- identity: icon tiles ---------- */
.tile{flex:none;display:grid;place-items:center;border-radius:12px}
.tile svg{width:58%;height:58%}

/* ---------- the logo's rising bars, drawn from real progress ---------- */
.steps{display:flex;align-items:flex-end;justify-content:flex-start;gap:7px;margin:22px 0 4px}
.sb{position:relative;border-radius:6px 6px 4px 4px;background:var(--line-2);transition:background .3s ease}
.sb.done{background:linear-gradient(180deg,#27467A,#011B3E)}
.sb.next{background:#fff;box-shadow:inset 0 0 0 2px var(--navy)}
.sb.todo{background:#E0E6EF}
.sbc{position:absolute;left:50%;top:5px;transform:translateX(-50%);color:#fff;width:12px;height:12px;display:grid}
.sbc svg{width:12px;height:12px}
.sbf{position:absolute;left:calc(50% - 3px);top:-18px;width:16px;height:16px;color:var(--amber)}
.sbf svg{width:16px;height:16px}
.sbf.won{color:var(--amber);filter:drop-shadow(0 1px 1px rgba(0,0,0,.15))}

/* ---------- latest mark: a memory, shown like a photo on the fridge ---------- */
.feature{
  display:block;width:100%;text-align:left;cursor:pointer;margin:4px 0 6px;
  border:0;border-radius:16px;padding:18px 18px 16px;color:#fff;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(227,155,46,.28), transparent 55%),
    linear-gradient(160deg,#1B3A63 0%,#011B3E 60%,#00122A 100%);
  box-shadow:0 8px 22px rgba(14,52,80,.22);
}
.feature-k{display:block;font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#A9BFDB}
.feature-q{display:block;font-family:Archivo,sans-serif;font-size:19px;font-weight:600;line-height:1.3;margin:8px 0 10px;text-wrap:balance}
.feature-by{display:block;font-size:12.5px;color:#AFC3DC}

/* ---------- track header ---------- */
.hero-card{
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow);padding:16px 16px 14px;margin-bottom:6px;
}
.hero-card .top{display:flex;align-items:center;gap:12px}
.hero-card h2{font-family:Archivo,sans-serif;font-size:19px;font-weight:700;margin:0;line-height:1.2}
.hero-card .who{font-size:12.5px;color:var(--muted);margin-top:3px}
.hero-foot{display:flex;align-items:baseline;gap:5px;font-size:13px;color:var(--muted);margin-top:10px}
.hero-foot b{font-family:Archivo,sans-serif;font-size:20px;color:var(--ink)}
.hero-foot span{margin-left:auto;font-weight:700;color:var(--green);font-variant-numeric:tabular-nums}

/* cards on home carry bars too */
.card .steps{margin-top:12px}

/* ---------- category chooser ---------- */
.cat{display:flex;align-items:center;gap:10px}
.cat span:last-child{flex:1}
.cat[aria-pressed="true"] .tile{box-shadow:0 0 0 2px var(--green)}

/* ---------- empty state chips ---------- */
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 0 20px}
.chip{display:inline-flex;align-items:center;gap:7px;padding:5px 11px 5px 5px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:12.5px;font-weight:600}
.chip .tile{border-radius:999px}
.empty img{max-width:100%;height:auto}

.card .steps{margin:16px 0 4px 54px}

/* destructive actions look destructive */
.btn.danger{background:#B0473C;color:#fff}
.btn.danger:active{background:#963a30}
.btn.link.danger-text{color:#B0473C}

/* ---------- first-open welcome ---------- */
.welcome{position:fixed;inset:0;display:flex;flex-direction:column;justify-content:space-between;
  padding:calc(24px + env(safe-area-inset-top,0px)) 22px calc(18px + env(safe-area-inset-bottom,0px));
  background:radial-gradient(120% 60% at 50% 0%, #E8EEF7 0%, var(--ground) 60%);overflow-y:auto}
/* The lockup: his mountain with GOAL MARKS beneath it, as he asked on Oct 21. */
.lockup{display:block;margin:0 auto;height:auto;max-width:100%}
.welcome-top .lockup{max-width:78%}
.empty .lockup{max-width:62%;margin-bottom:14px}
.authmark .lockup{max-width:62%}
.welcome-top{text-align:center}
.welcome-top img{max-width:62%;height:auto}
.welcome-top .word{font-family:Archivo,sans-serif;font-weight:800;font-size:32px;letter-spacing:-.02em;color:var(--navy);margin-top:6px;line-height:1}
.welcome-top .word b{color:var(--green);font-weight:800}
.welcome-top .tagline{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:8px}
.wls{display:grid;gap:16px;margin:22px 0 20px}
.wl{display:flex;gap:13px;align-items:flex-start}
.wl b{display:block;font-family:Archivo,sans-serif;font-size:16px;margin-bottom:2px}
.wl div span{display:block;font-size:13.5px;color:var(--muted);line-height:1.45}
.welcome-cta{display:grid;gap:4px}

/* --- added Sept 28: the chronological view and the done/planned choice --- */
.seg{display:flex;gap:8px;margin-top:6px}
.seg-b{flex:1;padding:11px 10px;border-radius:12px;border:1.5px solid var(--line);
  background:#fff;color:var(--ink);font:inherit;font-size:14px;cursor:pointer;line-height:1.25}
.seg-b.on{border-color:var(--green);background:var(--green-soft);color:var(--green);font-weight:600}
.path.marked .ms{cursor:pointer}
.path.marked .ms-s{font-size:12.5px;color:var(--muted);margin-top:2px}
.path.marked .ms-m{font-size:13px;color:var(--ink);opacity:.85;margin-top:4px;font-style:italic}
.path.marked .ms-d{font-size:12px;color:var(--muted);white-space:nowrap;align-self:flex-start;padding-top:2px}
li.yr{list-style:none;font:600 12px/1 inherit;letter-spacing:.14em;color:var(--muted);
  text-transform:uppercase;margin:16px 0 8px;padding-left:2px}
li.yr:first-child{margin-top:4px}

/* Together — Adrian's shared line, drawn for a phone instead of a slide.
   One spine down the middle, each person's moments branching off their own
   side, and a day two of them share drawn straight across it. Sides come from
   the order people were added, so the same person is always on the same side. */
.tg{list-style:none;margin:12px 0 0;padding:0;position:relative}
.tg::before{content:'';position:absolute;left:50%;top:6px;bottom:6px;width:2px;margin-left:-1px;background:var(--line)}
.tg-row{position:relative;min-height:52px;padding-bottom:14px;display:flex}
.tg-row.l{justify-content:flex-start;padding-right:calc(50% + 15px)}
.tg-row.r{justify-content:flex-end;padding-left:calc(50% + 15px)}
.tg-dot{
  position:absolute;left:50%;top:15px;width:11px;height:11px;margin-left:-5.5px;border-radius:50%;
  background:#fff;border:2px solid var(--line);box-shadow:0 0 0 3px var(--ground);
}
.tg-row.done .tg-dot{background:var(--navy);border-color:var(--navy)}
.tg-card{
  position:relative;display:block;width:100%;text-align:left;background:var(--card);
  border:1px solid var(--line);border-radius:12px;padding:9px 11px;box-shadow:var(--shadow);
  cursor:pointer;color:inherit;font:inherit;
}
.tg-row.r .tg-card{text-align:right}
/* The short stem off the spine. Without it the cards float next to the line
   instead of hanging off it, which is the thing Adrian's picture is doing. */
.tg-row.l .tg-card::after,.tg-row.r .tg-card::after{
  content:'';position:absolute;top:20px;width:15px;height:2px;background:var(--line);
}
.tg-row.l .tg-card::after{right:-16px}
.tg-row.r .tg-card::after{left:-16px}
.tg-row.done .tg-card::after{background:var(--navy-2)}
.tg-who{display:block;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--navy-2)}
.tg-card b{display:block;font-family:Archivo,sans-serif;font-size:14px;font-weight:600;line-height:1.3;margin:3px 0}
.tg-d{display:block;font-size:11.5px;color:var(--muted)}
.tg-card:focus-visible{outline:2px solid var(--navy);outline-offset:2px}

/* A shared day gets the whole width, under a bigger node, so it reads as the
   line itself rather than as one more entry on one side of it. */
.tg-row.shared{display:block;padding-top:26px}
.tg-dot.big{top:4px;width:17px;height:17px;margin-left:-8.5px;background:var(--navy);border-color:var(--navy)}
.tg-card.wide{text-align:left;border-color:var(--navy);padding:11px 12px}
.tg-tag{
  display:inline-block;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#fff;background:var(--navy);border-radius:999px;padding:3px 9px;margin-bottom:8px;
}
.tg-item{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:none;
  border:0;border-top:1px solid var(--line-2);padding:7px 0;cursor:pointer;color:inherit;font:inherit;
}
.tg-item:first-of-type{border-top:0;padding-top:0}
.tg-item > span{display:block;min-width:0}
.tg-item b{display:block;font-family:Archivo,sans-serif;font-size:14px;font-weight:600;line-height:1.3;margin:0}
.tg-item i{display:block;font-style:normal;font-size:12px;color:var(--muted);margin-top:1px}
.tg-card.wide .tg-d{margin-top:8px}

.tg-yr{display:flex;justify-content:center;padding:4px 0 14px}
.tg-yr span{
  position:relative;background:var(--ground);border:1px solid var(--line);color:var(--muted);
  font-size:11.5px;font-weight:700;letter-spacing:.1em;border-radius:999px;padding:3px 12px;
}

/* ---------- Adrian's October 29 list ---------- */

/* A date or time input is a fixed-size control. Stretched to the full width of a
   desktop window the browser's own calendar button ends up inches from the label,
   which is exactly what he hit. Phones are narrower than this, so nothing changes
   there. */
.in[type="date"], .in[type="time"]{max-width:240px}

/* The mark, top right of every screen that is not already home. */
.brand-home{
  margin-left:auto;flex:none;width:36px;height:36px;
  border:0;background:none;border-radius:50%;padding:0;
  display:grid;place-items:center;cursor:pointer;
}
.brand-home:active{background:var(--line-2)}
.brand-home img{display:block}

/* Renaming a timeline used to live in a text link at the very bottom of the
   screen. It is now next to the name it renames. */
.ttl{display:flex;align-items:center;gap:6px}
.ttl-edit{
  flex:none;width:26px;height:26px;padding:0;border:0;background:none;
  border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--muted);
}
.ttl-edit svg{width:15px;height:15px}
.ttl-edit:active{background:var(--line-2);color:var(--navy)}

/* Ordering the list. */
.sortbar{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px}
.sortb{
  border:1px solid var(--line);background:var(--card);color:var(--muted);
  font-size:12.5px;font-weight:500;padding:6px 11px;border-radius:999px;cursor:pointer;
}
.sortb.on{background:var(--navy);border-color:var(--navy);color:#fff}

/* The bars are buttons on the timeline screen, so they need a button reset. They
   must still look exactly like the bars above them. */
button.sb{padding:0;border:0;font:inherit;color:inherit;cursor:pointer;appearance:none}
button.sb.next{box-shadow:inset 0 0 0 2px var(--navy)}
button.sb:focus-visible{outline:2px solid var(--navy);outline-offset:2px}

/* Where a tapped bar lands. */
@keyframes litfade{0%{background:var(--green-soft)}100%{background:transparent}}
li[data-row].lit{animation:litfade 1.8s ease-out;border-radius:10px}
@media (prefers-reduced-motion:reduce){
  li[data-row].lit{animation-duration:2.6s}
}

/* ---------- marking something done ----------
   The milestone lights up on the line, and confetti comes off its own dot. Both
   asked for by Adrian. The row holds its wash a beat before fading so the eye
   has time to land on it after a scroll; the dot overshoots and settles, which
   is the same spring the tick inside it already uses. */
@keyframes justdone-row{
  0%{background:var(--green-soft)}
  65%{background:var(--green-soft)}
  100%{background:transparent}
}
@keyframes justdone-node{
  0%{transform:scale(.55);box-shadow:0 0 0 0 rgba(1,27,62,.40)}
  45%{transform:scale(1.28)}
  100%{transform:scale(1);box-shadow:0 0 0 20px rgba(1,27,62,0)}
}
li[data-row].justdone{animation:justdone-row 2.2s ease-out;border-radius:10px}
li[data-row].justdone .node{animation:justdone-node 1s cubic-bezier(.2,1.5,.5,1)}
/* Animations are switched off wholesale further up for anyone who asked for
   less motion, which would leave them with no sign at all that the right row
   was marked. The wash is painted instead and simply disappears when the class
   comes off: the same information, no movement. */
@media (prefers-reduced-motion:reduce){
  li[data-row].justdone{background:var(--green-soft);border-radius:10px}
}

/* Confetti. Pieces are positioned where the burst starts and carry their own
   drift, lift, fall, spin and timing as custom properties, so one keyframe
   serves every piece and nothing runs on the main thread. The layer is removed
   once the last one has landed. A reduced-motion reader never gets one of these
   at all: that is decided in JS, because killing the animation here would leave
   the pieces sitting on screen instead. */
.confetti{position:fixed;inset:0;z-index:70;pointer-events:none;overflow:hidden}
.confetti i{
  position:absolute;display:block;will-change:transform,opacity;opacity:0;
  animation:cfall var(--d) var(--ease) var(--delay) forwards;
}
@keyframes cfall{
  0%{transform:translate3d(0,0,0) rotate(0);opacity:1}
  28%{transform:translate3d(calc(var(--dx) * .35),var(--up),0) rotate(calc(var(--rot) * .3));opacity:1}
  80%{opacity:1}
  100%{transform:translate3d(var(--dx),var(--dy),0) rotate(var(--rot));opacity:0}
}

/* ---------- templates ----------
   Adrian's own idea: save a plan, run it again from any start day. The list
   reuses the card language rather than adding a fourth kind of row, and the
   summary line under each name is the one thing you need before committing. */
.tpl-block{margin:0 0 20px}
.tpl-h{font-size:15px;margin:0 0 10px;letter-spacing:-.01em}
.tpl-list{list-style:none;margin:0 0 6px;padding:0;display:flex;flex-direction:column;gap:8px}
.tpl-list li{display:flex;align-items:stretch;gap:8px}
.tpl-pick{
  flex:1;min-width:0;text-align:left;cursor:pointer;
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow);padding:13px 14px;display:block;
}
.tpl-pick:active{background:var(--line-2)}
.tpl-pick:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.tpl-name{display:block;font-weight:600;font-size:15px;color:var(--ink);
          white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tpl-sum{display:block;font-size:12.5px;color:var(--muted);margin-top:3px}
.tpl-x{
  flex:0 0 auto;width:42px;border:1px solid var(--line);border-radius:12px;
  background:var(--card);color:var(--muted);cursor:pointer;display:grid;place-items:center;
}
.tpl-x svg{width:16px;height:16px}
.tpl-x:active{background:var(--line-2)}
.tpl-x:focus-visible{outline:2px solid var(--navy);outline-offset:2px}

/* The sheet that saves one, and the sheet that starts one. */
.sheet-note{font-size:13px;line-height:1.5;color:var(--muted);margin:-2px 0 14px}
.tpl-facts{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;color:var(--muted);margin:0 0 12px}
.tpl-facts b{color:var(--ink)}
.tpl-steps{
  list-style:none;margin:0 0 16px;padding:10px 12px;display:flex;flex-direction:column;gap:8px;
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  max-height:190px;overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.tpl-steps li{display:flex;align-items:baseline;gap:10px;font-size:13.5px}
.tpl-steps li span{flex:1;min-width:0;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tpl-steps li em{flex:0 0 auto;font-style:normal;font-size:12px;color:var(--muted);font-weight:600}

/* A field that is not a <label>, because it holds more than one control and a
   label would hand every tap to whichever input came first. */
.fld{display:block;margin-bottom:14px}
.lab{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:5px;letter-spacing:.02em}

/* Two ways to say the same thing: a date, or a number of days. */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;
     background:var(--card);margin-bottom:9px;max-width:100%}
.seg-b{appearance:none;border:0;background:none;font:inherit;font-size:13px;font-weight:600;
       color:var(--muted);padding:9px 14px;cursor:pointer;white-space:nowrap}
.seg-b+.seg-b{border-left:1px solid var(--line)}
.seg-b[aria-pressed="true"]{background:var(--navy);color:#fff}
.seg-b:focus-visible{outline:2px solid var(--navy);outline-offset:-2px}
.days-row{display:flex;align-items:center;gap:9px}
.days-row .in{max-width:110px}
.days-row span{font-size:13.5px;color:var(--muted);font-weight:600}

/* The template editor. Each row carries its own fields, so dragging a row moves
   what is typed in it; the grip has to sit in the flow rather than pinned to
   the corner the way it is on a milestone. */
.tpl-edit-list{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:10px}
.tes-row{display:flex;align-items:flex-start;gap:8px;background:var(--card);
         border:1px solid var(--line);border-radius:12px;padding:10px 10px 11px}
.tes-row .grip{position:static;flex:0 0 auto;width:26px;height:38px;top:auto;right:auto}
.tes-fields{flex:1;min-width:0}
.tes-t{margin-bottom:8px}
.tes-meta{display:flex;align-items:flex-end;gap:8px}
.tes-meta label{display:block;min-width:0}
.tes-meta label span{display:block;font-size:11.5px;font-weight:600;color:var(--muted);margin-bottom:3px;letter-spacing:.02em}
/* Both inputs keep a sensible width instead of stretching: a time field half a
   screen wide puts the browser's own clock button miles from its label, which is
   the fix already made for the date fields. The × takes the far edge. */
.tes-meta .in{max-width:100%}
.tes-meta label:first-child{flex:0 0 86px}
.tes-meta label:nth-child(2){flex:0 1 168px;min-width:0}
.tes-x{margin-left:auto}
.tes-x{flex:0 0 auto;width:38px;height:38px;border:1px solid var(--line);border-radius:10px;
       background:var(--card);color:var(--muted);font-size:19px;line-height:1;cursor:pointer}
.tes-x:active{background:var(--line-2)}
.tes-x:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.tes-dur::placeholder{font-size:13px}