/* ============================================================== tokens */
:root{
  --bg:#101113; --bg-2:#191a1e; --bg-3:#232428; --line:#2b2c31; --line-2:#3a3b41;
  --fg:#e9e7e1; --fg-2:#a7a49c; --fg-3:#6d6a63;
  --accent:#4a8cf7; --accent-fg:#fff;
  --danger:#e0604c; --ok:#59b36b; --warn:#e0a34c;
  --c-work:#e7e9ee; --c-fitness:#e0604c; --c-money:#59b36b;
  --c-outdoor:#b07de0; --c-goal:#e0a34c; --c-personal:#4fc3d9;
  --r:14px; --r-sm:9px; --r-xs:6px;
  --ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --safe-b:env(safe-area-inset-bottom,0px);
}
[data-accent="blue"]  {--accent:#4a8cf7}
[data-accent="amber"] {--accent:#e0a34c}
[data-accent="green"] {--accent:#59b36b}
[data-accent="red"]   {--accent:#e0604c}
[data-accent="purple"]{--accent:#9b7de0}
[data-accent="pink"]  {--accent:#e06ba0}
[data-accent="teal"]  {--accent:#3fb8b0}

[data-appearance="light"]{
  --bg:#f6f5f2; --bg-2:#fff; --bg-3:#eceae5; --line:#e0ddd6; --line-2:#cdc9c0;
  --fg:#22242a; --fg-2:#5b606c; --fg-3:#8b909c;
  --c-work:#22242a; --c-fitness:#c2452f; --c-money:#2f7d44;
  --c-outdoor:#7a4fc0; --c-goal:#b0781f; --c-personal:#1f8ba3;
}
@media (prefers-color-scheme:light){
  [data-appearance="system"]{
    --bg:#f6f5f2; --bg-2:#fff; --bg-3:#eceae5; --line:#e0ddd6; --line-2:#cdc9c0;
    --fg:#22242a; --fg-2:#5b606c; --fg-3:#8b909c;
    --c-work:#22242a; --c-fitness:#c2452f; --c-money:#2f7d44;
    --c-outdoor:#7a4fc0; --c-goal:#b0781f; --c-personal:#1f8ba3;
  }
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--fg); font-family:var(--ui); font-size:15px;
  -webkit-font-smoothing:antialiased; padding-bottom:calc(2.6rem + var(--safe-b));
}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:5px}
.hide{display:none!important}
.spacer{flex:1}
.muted{color:var(--fg-3);font-size:.85rem;line-height:1.5;margin:0 0 .8rem}
h1,h2{margin:0}
svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ============================================================== topbar */
.topbar{
  position:sticky;top:0;z-index:50;background:var(--bg);
  border-bottom:1px solid var(--line);
  padding:.5rem max(.85rem,env(safe-area-inset-left)) .45rem;
}
.tb-row{display:flex;align-items:center;gap:.35rem;max-width:60rem;margin:0 auto .45rem}
.monthbtn{
  display:flex;align-items:center;gap:.35rem;font-size:1.02rem;font-weight:700;
  letter-spacing:-.02em;padding:.25rem .45rem;border-radius:var(--r-sm);
}
.monthbtn:hover{background:var(--bg-2)}
.monthbtn .chev{width:14px;height:14px;opacity:.5;transition:transform .2s}
.strip[data-expanded="true"] ~ * .monthbtn .chev{transform:rotate(180deg)}
.iconbtn{
  width:32px;height:32px;border-radius:var(--r-sm);display:grid;place-items:center;
  color:var(--fg-2);flex:none;
}
.iconbtn:hover{background:var(--bg-2);color:var(--fg)}
.iconbtn[aria-pressed="true"]{background:var(--accent);color:var(--accent-fg)}
.iconbtn svg{width:17px;height:17px}
.iconbtn.add{background:var(--accent);color:var(--accent-fg)}
.iconbtn.add:hover{filter:brightness(1.1)}

.todaypill{
  background:var(--accent);color:var(--accent-fg);
  font-size:.84rem;font-weight:600;padding:.32rem .8rem;border-radius:99px;
  flex:none;transition:filter .12s;
}
.todaypill:hover{filter:brightness(1.1)}
/* personal / work context switch — purple, distinct from the app accent */
.seg.modesw{flex:none}
.seg.modesw button.on{background:#9b7de0;color:#fff}
.seg.modesw button:not(.on):hover{color:#9b7de0}

/* segmented control — the Parchment pill */
.seg{display:flex;background:var(--bg-3);border-radius:99px;padding:3px;gap:2px}
.seg button{
  padding:.28rem .78rem;border-radius:99px;font-size:.84rem;font-weight:600;
  color:var(--fg-2);white-space:nowrap;transition:background .14s,color .14s;
}
.seg button.on{background:var(--accent);color:var(--accent-fg)}
.seg button:not(.on):hover{color:var(--fg)}

/* ---------------------------------------------------- week strip / month */
.strip{max-width:60rem;margin:0 auto}
.strip-main{display:flex;align-items:flex-end;gap:.3rem}
.strip-cols{flex:1;min-width:0}
.weeknav{flex:none;width:30px;height:39px;         /* matches the pill row so it sits centered on the dates */
  display:grid;place-items:center;color:var(--fg-3);border-radius:99px;
  transition:background .12s,color .12s,transform .1s}
.weeknav:hover{color:var(--fg);background:var(--bg-2)}
.weeknav:active{transform:scale(.9)}
.weeknav svg{width:17px;height:17px}
.strip[data-expanded="true"] .weeknav{display:none}   /* month view has its own month nav */
.dow-head,.wk{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.dow-head{margin-bottom:3px}
.dow-head span{
  text-align:center;font-size:.66rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--fg-3);
}
.weeks{display:flex;flex-direction:column;gap:4px}
.wk{
  background:var(--bg-3);border-radius:99px;padding:3px;
  gap:2px;grid-template-columns:repeat(7,1fr);
}
.wk.cur{box-shadow:0 0 0 1px var(--line-2)}
/* expanded month = one clean block, not stacked pills */
.strip[data-expanded="true"] .weeks{background:var(--bg-3);border-radius:var(--r);padding:5px;gap:2px}
.strip[data-expanded="true"] .wk{background:none;border-radius:0;padding:0;box-shadow:none;gap:2px}
.strip[data-expanded="true"] .d{padding:.5rem 0 .55rem;border-radius:var(--r-sm)}
.strip[data-expanded="true"] .d.sel{border-radius:var(--r-sm)}
.d{
  position:relative;border-radius:99px;padding:.3rem 0 .34rem;
  display:flex;flex-direction:column;align-items:center;gap:1px;
  font-size:.9rem;font-weight:600;color:var(--fg-2);
  transition:background .14s,color .14s;
}
.d:hover{background:var(--bg-2);color:var(--fg)}
.d.out{opacity:.38}
.d.wknd{color:var(--fg-3)}                 /* Saturday & Sunday slightly lighter grey */
.d.today{color:var(--accent)}
.d.sel{background:var(--accent);color:var(--accent-fg)}
.d.sel.today{color:var(--accent-fg)}
.d .n{font-variant-numeric:tabular-nums;line-height:1}
.d .pips{display:flex;gap:2px;height:5px;align-items:center}
.d .pip{width:5px;height:5px;border-radius:50%}
.d .pip.has{background:var(--ok)}
.d.sel .pip.has{background:#fff}
.strip .weeks .wk:not(:first-child){display:none}
.strip[data-expanded="true"] .weeks .wk{display:grid}
.strip-foot{display:none;justify-content:center;gap:.4rem;padding:.5rem 0 .15rem}
.strip[data-expanded="true"] .strip-foot{display:flex}
.ghost{
  font-size:.8rem;font-weight:600;color:var(--fg-2);
  padding:.25rem .6rem;border-radius:99px;border:1px solid var(--line);
}
.ghost:hover{border-color:var(--accent);color:var(--accent)}

/* ============================================================== layout */
#main{max-width:60rem;margin:0 auto;padding:1rem max(.85rem,env(safe-area-inset-left)) 3rem}
.dayhead{display:flex;align-items:baseline;gap:.6rem;margin-bottom:.85rem}
.dayhead h1{font-size:1.5rem;font-weight:700;letter-spacing:-.025em}
.rel{
  font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--accent);background:color-mix(in srgb,var(--accent) 16%,transparent);
  padding:.16rem .42rem;border-radius:5px;
}
.progress{display:flex;align-items:center;gap:.4rem;font-size:.78rem;color:var(--fg-3);font-weight:600}
.progress i{
  width:52px;height:5px;border-radius:99px;background:var(--bg-3);display:block;position:relative;overflow:hidden;
}
.progress i::after{
  content:"";position:absolute;inset:0;width:var(--p,0%);background:var(--accent);border-radius:99px;
  transition:width .3s;
}

/* quick add */
.quickadd{display:flex;gap:.45rem;align-items:center;margin-bottom:.35rem}
.quickadd input{
  flex:1;background:var(--bg-2);border:1px solid var(--line);border-radius:99px;
  padding:.55rem .95rem;font-size:.92rem;
}
.quickadd input:focus{outline:none;border-color:var(--accent)}
.qpreview{font-size:.78rem;color:var(--accent);padding:.15rem .95rem .5rem}
.qhint{font-size:.76rem;color:var(--fg-3);padding:.1rem .95rem .8rem}

/* ============================================================== cards */
.card{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);margin-bottom:.9rem}
.card-head{display:flex;align-items:center;gap:.45rem;padding:.55rem .6rem}
.card-head h2{
  font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);
}
.card-head .cnt{
  font-size:.68rem;font-weight:700;color:var(--fg-3);background:var(--bg-3);
  padding:.05rem .38rem;border-radius:99px;
}
.card-body{padding:0 .35rem .4rem}
.tgl .chev{transition:transform .18s}
.card[data-collapsed="true"] .chev{transform:rotate(-90deg)}
.card[data-collapsed="true"] .card-body{display:none}
.card.notes .card-body{padding:.2rem .8rem .8rem}
.wc{font-size:.72rem;color:var(--fg-3)}
.scrollx{overflow-x:auto}

/* ============================================================== rows */
.row{display:flex;align-items:flex-start;gap:.55rem;padding:.42rem .5rem;border-radius:var(--r-sm);position:relative}
.row:hover{background:var(--bg-3)}
.tick{
  flex:none;width:19px;height:19px;margin-top:.06rem;border-radius:50%;
  border:1.8px solid var(--line-2);display:grid;place-items:center;transition:.14s;
}
.tick:hover{border-color:var(--accent)}
.tick svg{display:none}                                   /* no checkmark — solid blue fill signals done */
.row[data-done="true"] .tick{background:var(--accent);border-color:var(--accent)}
.row[data-done="true"] .r-title{text-decoration:line-through;color:var(--fg-3)}
.bar{flex:none;width:3px;align-self:stretch;border-radius:99px;background:var(--cat,var(--fg-3));opacity:.9}
.r-main{flex:1;min-width:0}
.r-title{font-size:.93rem;line-height:1.42;overflow-wrap:break-word;word-break:normal;color:var(--cat,var(--fg))}
.r-meta{font-size:.75rem;color:var(--fg-3);margin-top:.1rem;display:flex;gap:.4rem;flex-wrap:wrap}
.r-meta .from{color:var(--warn);font-weight:600}
.time{
  flex:none;font-variant-numeric:tabular-nums;font-size:.77rem;font-weight:600;
  color:var(--fg-2);text-align:right;margin-top:.14rem;white-space:nowrap;
}
.r-acts{display:flex;gap:.05rem;opacity:0;transition:opacity .12s}
.row:hover .r-acts,.row:focus-within .r-acts{opacity:1}
.r-acts .iconbtn{width:25px;height:25px}
.r-acts .iconbtn svg{width:13px;height:13px}
.empty{padding:.55rem .6rem;color:var(--fg-3);font-size:.86rem}
@media (hover:none){.r-acts{opacity:1}}

/* ============================================================== week grid */
/* Mon–Fri across the top (5×2 cols), Sat & Sun wide on the second row (5 cols each) */
.weekgrid{display:grid;gap:.6rem;align-items:start;
  grid-template-columns:repeat(10,1fr);margin-bottom:.9rem}
.weekgrid .daycard{grid-column:span 2;min-height:9rem}   /* ~3 rows tall minimum so sparse days look normal */
.weekgrid .daycard:nth-child(6),
.weekgrid .daycard:nth-child(7){grid-column:span 5}
.daycard{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:.45rem .3rem .35rem}
.daycard.is-today{border-color:var(--accent)}
.daycard.is-sel{box-shadow:0 0 0 1px var(--line-2)}
.daycard h3{
  display:flex;align-items:baseline;gap:.4rem;font-size:.82rem;font-weight:700;
  padding:0 .35rem .3rem;margin:0;letter-spacing:.01em;
}
.daycard h3 .dc-open{font-size:.82rem;font-weight:700;color:var(--fg);padding:0}
.daycard h3 .dc-open:hover{color:var(--accent)}
.daycard h3 .num{color:var(--fg-3);font-weight:600;font-size:.76rem}
.daycard h3 .dc-add{margin-left:auto;color:var(--fg-3);font-size:1.1rem;line-height:1;padding:0 .2rem}
.daycard h3 .dc-add:hover{color:var(--accent)}
.dc-split{font-size:.78rem;font-weight:600;padding:0 .35rem .3rem;line-height:1.35;letter-spacing:.02em}
/* per-day list expander — small chevron chip, bottom-right */
.dc-more{
  width:fit-content;margin:.15rem .25rem .1rem auto;
  display:flex;align-items:center;gap:.15rem;
  padding:.16rem .45rem;border-radius:99px;
  font-size:.72rem;font-weight:700;color:var(--fg-3);
}
.dc-more:hover{color:var(--accent);background:var(--bg-3)}
.dc-more svg{width:13px;height:13px}
.daycard .row{padding:.28rem .35rem}
/* keep week rows compact & uniform — clip long items to ~2 lines (full text lives in the day view) */
.daycard .r-acts{display:none}          /* no room in the narrow week cards — edit from the day view */
.daycard .r-title{font-size:.86rem;line-height:1.35;max-height:2.7em;overflow:hidden}
.daycard.dc-expanded .r-title{max-height:none}
.daycard .empty{padding:.3rem .4rem}

/* pinned training row inside To-do */
.train-row .train-title{font-weight:800;letter-spacing:.05em;font-size:.9rem}
/* subtle chevron — reads as part of the row, not a dropdown */
.train-caret{
  flex:none;align-self:center;width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;color:var(--fg-3);transition:background .12s,color .12s,transform .18s;
}
.train-caret:hover{background:color-mix(in srgb,var(--fg) 8%,transparent);color:var(--fg)}
.train-caret[aria-expanded="true"]{color:var(--accent)}
.train-caret[aria-expanded="true"] svg{transform:rotate(180deg)}
.train-caret svg{width:15px;height:15px;transition:transform .18s}
/* the 2-column activity menu */
.train-menu{
  position:absolute;top:calc(100% - .15rem);right:.35rem;z-index:30;
  display:grid;grid-template-columns:1fr 1fr;gap:.25rem;
  padding:.4rem;min-width:15rem;border-radius:14px;
  background:var(--bg-2);border:1px solid var(--line);
  box-shadow:0 14px 38px rgba(0,0,0,.45);
  animation:tmpop .12s ease-out;
}
.train-menu[hidden]{display:none}
@keyframes tmpop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.tm-item{
  padding:.46rem .65rem;border-radius:9px;font-size:.83rem;font-weight:600;
  color:var(--fg-2);text-align:left;transition:background .1s,color .1s;
}
.tm-item:hover{background:var(--bg-3);color:var(--fg)}
.tm-item.on{background:var(--accent);color:var(--accent-fg)}

/* to-do bullet composer + group "add other" */
.compose{
  display:block;width:calc(100% - .5rem);margin:.35rem .25rem .2rem;resize:vertical;min-height:2.6em;
  background:color-mix(in srgb,var(--fg) 4%,transparent);border:2px solid var(--glass-brd,var(--line-2));
  border-radius:13px;padding:.4rem .6rem;font-size:.86rem;font-family:var(--ui);line-height:1.45;color:var(--fg);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.compose:focus{outline:none;border-color:var(--accent)}
.compose::placeholder{color:var(--fg-3)}
.addother{
  display:block;width:calc(100% - .2rem);margin:.25rem .1rem .1rem;
  background:transparent;border:1px dashed var(--line-2);border-radius:var(--r-sm);
  padding:.4rem .6rem;font-size:.87rem;color:var(--fg-2);
}
.addother:focus{outline:none;border-style:solid;border-color:var(--accent);color:var(--fg)}
.addother::placeholder{color:var(--fg-3)}

/* training split editor */
.splitrow{display:flex;align-items:center;gap:.5rem;padding:.32rem 0;border-bottom:1px solid var(--line)}
.splitrow:last-child{border-bottom:0}
.splitrow .sd{width:2.4rem;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3);flex:none}
.splitrow .sd{align-self:flex-start;padding-top:.5rem}
.split-main{flex:1;min-width:0}
.wchips{display:flex;flex-wrap:wrap;gap:.3rem;margin-bottom:.35rem}
.wchip{padding:.24rem .6rem;border-radius:99px;font-size:.8rem;font-weight:600;
  border:1.5px solid var(--line);color:var(--fg-2)}
.wchip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
.splitrow input{width:100%;background:var(--bg-3);border:1px solid var(--line);border-radius:var(--r-xs);padding:.35rem .55rem;font-size:.86rem}
.splitrow input:focus{outline:none;border-color:var(--accent)}

/* routine grid */
.rgrid{border-collapse:separate;border-spacing:0;width:100%;font-size:.8rem;min-width:32rem}
.rgrid th,.rgrid td{padding:.35rem .3rem;border-bottom:1px solid var(--line);text-align:center}
.rgrid th:first-child,.rgrid td:first-child{text-align:left;padding-left:.6rem;min-width:9rem}
.rgrid thead th{font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);font-weight:700}
.rgrid tbody tr:last-child td{border-bottom:0}
.rgrid .gname{font-weight:700;color:var(--fg-3);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;padding-top:.4rem}
.rgrid tbody tr.spacer td{height:.9rem;border-bottom:0;padding:0}
.rgrid td{vertical-align:middle}
.cell{
  width:22px;height:22px;border-radius:var(--r-xs);border:1.6px solid var(--line-2);
  display:block;margin:0 auto;transition:.14s;
}
.cell:hover{border-color:var(--accent)}
.cell.on{background:var(--accent);border-color:var(--accent)}
.cell svg{display:none}
.cell.na{opacity:.18;pointer-events:none;border-style:dashed}

/* ============================================================== goals */
.goalmonth{margin-bottom:1rem}
.goalmonth h3{
  font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--fg-3);padding:0 .5rem .3rem;display:flex;gap:.5rem;align-items:baseline;
}
.goalmonth h3 .yr{color:var(--line-2)}
.goalmonth .card{margin-bottom:0}

/* ============================================================== notes */
#ta{
  display:block;width:100%;min-height:34vh;resize:none;background:transparent;border:0;
  padding:.4rem 0 1rem;font-family:var(--serif);font-size:1.05rem;line-height:1.62;color:var(--fg);
}
#ta:focus{outline:none}
#ta::placeholder{color:var(--fg-3)}
.rendered{font-family:var(--serif);font-size:1.05rem;line-height:1.62;padding:.4rem 0 1rem;min-height:34vh}
.rendered h1,.rendered h2,.rendered h3{font-family:var(--ui);margin:1.3em 0 .45em;line-height:1.25}
.rendered h1{font-size:1.4em}.rendered h2{font-size:1.18em}.rendered h3{font-size:1.02em}
.rendered>:first-child{margin-top:0}
.rendered p{margin:0 0 .8em}
.rendered ul,.rendered ol{margin:0 0 .8em;padding-left:1.3em}
.rendered ul.tasks{list-style:none;padding-left:.1em}
.rendered ul.tasks li{display:flex;gap:.5rem;align-items:flex-start}
.rendered ul.tasks input{
  appearance:none;flex:none;width:1em;height:1em;margin-top:.35em;border:1.7px solid var(--line-2);
  border-radius:4px;cursor:pointer;background:var(--bg-2);
}
.rendered ul.tasks input:checked{background:var(--accent);border-color:var(--accent)}
.rendered ul.tasks li.done span{text-decoration:line-through;color:var(--fg-3)}
.rendered blockquote{margin:0 0 .8em;padding-left:1em;border-left:3px solid var(--line-2);color:var(--fg-2)}
.rendered code{font-family:var(--mono);font-size:.85em;background:var(--bg-3);padding:.08em .3em;border-radius:5px}
.rendered pre{background:var(--bg-3);border-radius:var(--r-sm);padding:.7rem .85rem;overflow-x:auto;margin:0 0 .8em}
.rendered pre code{background:none;padding:0}
.rendered a{color:var(--accent)}
.rendered hr{border:0;border-top:1px solid var(--line);margin:1.4em 0}
.rendered mark{background:color-mix(in srgb,var(--accent) 25%,transparent);color:inherit;border-radius:3px;padding:0 .15em}

/* ============================================================== status */
.statusbar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;gap:.7rem;
  padding:.4rem max(.9rem,env(safe-area-inset-left)) calc(.4rem + var(--safe-b));
  font-size:.74rem;color:var(--fg-3);background:var(--bg);border-top:1px solid var(--line);
}
.saved{display:flex;align-items:center;gap:.35rem}
.saved i{width:6px;height:6px;border-radius:50%;background:var(--ok);display:block}
.saved.dirty i{background:var(--warn)}
.sync.err{color:var(--danger)}
.sync.ok{color:var(--ok)}

/* ============================================================== dialogs */
dialog{
  border:1px solid var(--line);border-radius:var(--r);padding:0;background:var(--bg-2);color:var(--fg);
  width:min(94vw,36rem);max-height:86vh;box-shadow:0 20px 60px rgba(0,0,0,.45);
}
dialog::backdrop{background:rgba(0,0,0,.5)}
.dlg-head{display:flex;align-items:center;gap:.5rem;padding:.7rem .85rem;border-bottom:1px solid var(--line)}
.dlg-head h2{font-size:.98rem;font-weight:700}
.dlg-body{padding:.9rem;overflow:auto;max-height:66vh}
.dlg-body.pad0{padding:.35rem}
.dlg-foot{display:flex;gap:.5rem;padding:.7rem .85rem;border-top:1px solid var(--line)}
.btn{padding:.42rem .85rem;border-radius:var(--r-sm);border:1px solid var(--line-2);font-size:.87rem;font-weight:600;color:var(--fg-2)}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
.btn.primary:hover{filter:brightness(1.08);color:var(--accent-fg)}
.btn.danger{color:var(--danger);border-color:var(--danger)}
.field{margin-bottom:.85rem}
.field>label{display:block;font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--fg-3);margin-bottom:.3rem}
.field input[type=text],.field input[type=date],.field input[type=time],.field textarea,.field select,
.srow input[type=text],.srow input[type=password],.srow select,#pasteBox{
  width:100%;background:var(--bg-3);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:.45rem .6rem;font-size:.9rem;
}
.field textarea,#pasteBox{min-height:4rem;resize:vertical;font-family:var(--mono);font-size:.84rem}
.field input:focus,.field textarea:focus,.field select:focus,#pasteBox:focus{outline:none;border-color:var(--accent)}
.row2{display:flex;gap:.55rem}.row2>*{flex:1}
.check{display:flex;align-items:center;gap:.45rem;font-size:.88rem;color:var(--fg-2)}
.cats{display:flex;gap:.35rem;flex-wrap:wrap}
.cats button{
  padding:.24rem .6rem;border-radius:99px;font-size:.78rem;font-weight:600;
  border:1.5px solid var(--line);color:var(--fg-2);
}
.cats button[aria-pressed="true"]{border-color:var(--c);color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent)}
.sec{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);margin:1.1rem 0 .2rem}
.sec:first-child{margin-top:0}
.srow{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px solid var(--line)}
.srow:last-child{border-bottom:0}
.srow b{font-size:.9rem;font-weight:600}
.srow .sub,.sub{font-size:.75rem;color:var(--fg-3);margin-top:.1rem}
.srow select{max-width:9rem}
.accents{display:flex;gap:.35rem}
.accents button{width:22px;height:22px;border-radius:50%;border:2px solid transparent}
.accents button[aria-pressed="true"]{border-color:var(--fg-2)}
.searchbox{display:flex;align-items:center;gap:.5rem;padding:.7rem .85rem;border-bottom:1px solid var(--line)}
.searchbox .sicon{width:17px;height:17px;color:var(--fg-3);flex:none}
.searchbox input{flex:1;background:none;border:0;font-size:1rem}
.searchbox input:focus{outline:none}
.hit{display:block;width:100%;text-align:left;padding:.5rem .6rem;border-radius:var(--r-sm)}
.hit:hover,.hit.sel{background:var(--bg-3)}
.hit .h-kind{font-size:.64rem;text-transform:uppercase;letter-spacing:.08em;color:var(--fg-3);font-weight:700}
.hit .h-date{font-size:.74rem;font-weight:700;color:var(--accent)}
.hit .h-txt{font-size:.86rem;color:var(--fg-2);margin-top:.1rem;line-height:1.4}
.hit mark{background:color-mix(in srgb,var(--accent) 28%,transparent);color:var(--fg);border-radius:3px}

/* routine editor */
.rgroup{border:1px solid var(--line);border-radius:var(--r-sm);padding:.5rem;margin-bottom:.6rem}
.rgroup .gh{display:flex;align-items:center;gap:.4rem;margin-bottom:.4rem}
.rgroup .gh input[type=text]{flex:1;background:none;border:0;font-weight:700;font-size:.92rem;padding:.1rem}
.rgroup .gh input:focus{outline:none}
.dows{display:flex;gap:2px}
.dows button{
  width:24px;height:22px;border-radius:var(--r-xs);font-size:.68rem;font-weight:700;
  color:var(--fg-3);border:1px solid var(--line);
}
.dows button.on{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
.ritem{display:flex;align-items:center;gap:.4rem;padding:.15rem 0}
.ritem input[type=text]{flex:1;background:var(--bg-3);border:1px solid var(--line);border-radius:var(--r-xs);padding:.28rem .5rem;font-size:.86rem}
.ritem input:focus{outline:none;border-color:var(--accent)}

@media (max-width:560px){
  .dayhead h1{font-size:1.28rem}
  .seg.views button{padding:.28rem .6rem;font-size:.8rem}
  .weekgrid{grid-template-columns:1fr}
  .weekgrid .daycard,
  .weekgrid .daycard:nth-child(6),
  .weekgrid .daycard:nth-child(7){grid-column:auto;min-height:0}
  .d{font-size:.85rem}
}
@media print{
  .topbar,.statusbar,.quickadd,.qhint,.qpreview,.r-acts,dialog,.iconbtn{display:none!important}
  body{background:#fff;color:#000}
  .card{border:0}
  #ta{display:none}
}

/* ═══════════════════════════════════════════════════════ liquid glass ══ */
:root{
  --glass:rgba(26,27,31,.62);
  --glass-2:rgba(31,32,37,.72);
  --glass-brd:rgba(255,255,255,.07);
  --glass-hi:inset 0 1px 0 rgba(255,255,255,.045);
  --glass-sh:0 8px 26px rgba(0,0,0,.38);
  --blur:saturate(150%) blur(22px);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
}
[data-appearance="light"],
:root[data-appearance="system"]{ --glass:rgba(255,255,255,.62); --glass-2:rgba(255,255,255,.75);
  --glass-brd:rgba(0,0,0,.07); --glass-hi:inset 0 1px 0 rgba(255,255,255,.6); --glass-sh:0 8px 26px rgba(80,70,50,.12); }
@media (prefers-color-scheme:dark){:root[data-appearance="system"]{
  --glass:rgba(26,27,31,.62); --glass-2:rgba(31,32,37,.72); --glass-brd:rgba(255,255,255,.07);
  --glass-hi:inset 0 1px 0 rgba(255,255,255,.045); --glass-sh:0 8px 26px rgba(0,0,0,.38); }}

/* flat, neutral backdrop — a whisper of warmth, no colour cast */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120vw 70vh at 50% -20%, rgba(255,255,255,.035), transparent 70%);
}

/* frosted chrome */
.topbar{background:color-mix(in srgb,var(--bg) 55%,transparent);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border-bottom:1px solid var(--glass-brd)}
.statusbar{background:color-mix(in srgb,var(--bg) 55%,transparent);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border-top:1px solid var(--glass-brd)}

/* cards become glass panels */
.card{
  background:var(--glass);border:1px solid var(--glass-brd);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  box-shadow:var(--glass-sh),var(--glass-hi);border-radius:16px;
}
.daycard{
  background:var(--glass);border:1px solid var(--glass-brd);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  box-shadow:var(--glass-sh),var(--glass-hi);border-radius:16px;
}
.daycard.is-today{border-color:color-mix(in srgb,var(--accent) 65%,var(--glass-brd))}

/* rows lift on hover like glass tiles */
.row:hover{background:color-mix(in srgb,var(--fg) 7%,transparent);border-radius:11px}

/* segmented pill + week strip get quiet depth */
.seg{background:color-mix(in srgb,var(--fg) 7%,transparent);box-shadow:var(--glass-hi);
  border:1px solid var(--glass-brd)}
.wk{background:color-mix(in srgb,var(--fg) 6%,transparent);border:1px solid var(--glass-brd);box-shadow:var(--glass-hi)}
.strip[data-expanded="true"] .weeks{background:var(--glass);border:1px solid var(--glass-brd);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);box-shadow:var(--glass-sh),var(--glass-hi)}
.strip[data-expanded="true"] .wk{border:0;box-shadow:none}

/* icon buttons as rounded-square glass tiles (Parchment style) */
.iconbtn{border-radius:11px;border:1px solid transparent}
.iconbtn:hover{background:color-mix(in srgb,var(--fg) 8%,transparent);border-color:var(--glass-brd)}
.iconbtn.add{border-radius:12px;box-shadow:0 3px 12px color-mix(in srgb,var(--accent) 40%,transparent)}
.iconbtn.add:hover{border-color:transparent}

/* dialogs as heavy frosted glass */
dialog{background:var(--glass-2);border:1px solid var(--glass-brd);
  backdrop-filter:saturate(180%) blur(30px);-webkit-backdrop-filter:saturate(180%) blur(30px);
  box-shadow:0 24px 70px rgba(0,0,0,.5),var(--glass-hi);border-radius:20px}
dialog::backdrop{background:rgba(0,0,0,.4);backdrop-filter:blur(3px)}

/* category chips + workout chips read as little glass lozenges */
.cats button,.wchip,.ghost,.count,.cnt,.rel{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}

/* serif headings — the Parchment signature */
.dayhead h1,#weekTitle{font-family:var(--serif)}
.dayhead h1{font-weight:700;letter-spacing:0;font-size:1.7rem}

@supports not (backdrop-filter: blur(1px)){
  .card,.daycard,dialog,.topbar,.statusbar{background:var(--bg-2)}
}

/* ============================================================== PIN gate */
.pingate{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  background:var(--bg);
}
.pinwrap{display:flex;flex-direction:column;align-items:center;gap:1.1rem;padding:1.5rem;cursor:text}
.pinlogo{font-family:var(--serif);font-size:1.6rem;font-weight:700;letter-spacing:-.01em}
.pinboxes{display:flex;gap:.6rem;max-width:100%}
.pinboxes .pbox{
  width:clamp(38px,11vw,46px);height:56px;border-radius:12px;
  border:1.5px solid var(--line-2);background:var(--bg-2);
  display:grid;place-items:center;transition:border-color .15s,transform .1s;
}
.pinboxes .pbox.on::after{content:"";width:11px;height:11px;border-radius:50%;background:var(--fg)}
.pinboxes .pbox.cur{border-color:var(--accent)}
.pinmsg{font-size:.85rem;color:var(--fg-3);min-height:1.1em}
#pinInput{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.pingate.shake .pinwrap{animation:pinshake .4s}
@keyframes pinshake{
  0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-9px)}40%,80%{transform:translateX(9px)}
}

/* widget: hide scrollbars (native window, no chrome) */
:root[data-widget="1"]{scrollbar-width:none;-ms-overflow-style:none}
:root[data-widget="1"] *::-webkit-scrollbar{width:0;height:0;display:none}

/* drag-to-reorder */
.drag{cursor:grab;touch-action:none}
.drag:active{cursor:grabbing}
.row.dragging{opacity:.55;background:var(--bg-3)}

/* workouts this week */
#weekWorkouts{padding:0 .3rem .2rem}
.worow{display:flex;align-items:center;gap:.6rem;padding:.42rem .5rem;border-radius:var(--r-sm)}
.worow:hover{background:var(--bg-3)}
.worow.is-today{box-shadow:inset 2px 0 0 var(--accent)}
.worow .wo-day{font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--fg-3);width:3.4rem;flex:none}
.worow .wo-txt{font-size:.9rem;font-weight:700;letter-spacing:.02em}
.worow[data-done="true"] .tick{background:var(--accent);border-color:var(--accent)}
.worow[data-done="true"] .wo-txt{text-decoration:line-through;color:var(--fg-3)}

/* goal target-date control */
.goaldue-wrap{position:relative;display:inline-grid;place-items:center;width:28px;height:28px;
  flex:none;color:var(--fg-3);cursor:pointer;border-radius:var(--r-xs)}
.goaldue-wrap:hover{color:var(--accent);background:var(--bg-3)}
.goaldue{position:absolute;inset:0;opacity:0;cursor:pointer}
.goaldue::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.goalmonth .r-meta{color:var(--fg-3);font-size:.74rem;margin-top:.1rem}

/* quick-edit popup (name + type) */
.quickdlg{width:min(92vw,22rem)}
.quick-title{width:100%;background:var(--bg-3);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:.55rem .7rem;font-size:1rem;font-weight:600;margin-bottom:.7rem}
.quick-title:focus{outline:none;border-color:var(--accent)}
.qlabel{font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--fg-3);margin-bottom:.35rem}

/* keep-me-signed-in checkbox on the PIN gate */
.pinremember{display:flex;align-items:center;gap:.45rem;margin-top:.5rem;
  font-size:.8rem;color:var(--fg-3);cursor:pointer}
.pinremember input{accent-color:var(--accent)}