/* ============================================================================
Ink & Signal — drop-in theme for Agenda (option 2a / 2b)
Load AFTER app.css:
Pairs with theme-ink.js (big-date header, always-open Loose ends, wide
click-anywhere sections). Light mode is left untouched.
========================================================================== */
/* ------------------------------------------------------------------ palette */
html[data-appearance="dark"]{
--bg:#08090a; --bg-2:#0f1012; --bg-3:#17181c;
--line:#1f2024; --line-2:#26272b;
--fg:#f2efe8; --fg-2:#a5a29a; --fg-3:#55524c;
}
html[data-appearance="dark"] body{background:var(--bg)}
/* --------------------------------------------------------------- top region */
.topbar{background:var(--bg);border-bottom:1px solid var(--line)}
.seg{background:var(--bg-3)}
.seg.modesw button.on{background:#9b7de0}
.iconbtn:hover{background:var(--bg-3)}
/* week strip: quiet chips, blue today */
.wk{background:var(--bg-3)}
.wk.cur{box-shadow:none}
.d{border-radius:8px;font-weight:600}
.d:hover{background:#1f2024}
.d.sel{background:var(--accent)}
.strip[data-expanded="true"] .weeks{background:var(--bg-3)}
/* ------------------------------------------------- the big date, day header */
.dayhead{align-items:flex-end;gap:14px;margin-bottom:22px}
.dayhead h1{font-size:1.65rem;letter-spacing:-.03em}
/* rewritten by theme-ink.js into number + weekday + month */
#dayTitle.ink{display:flex;align-items:flex-end;gap:14px;font-weight:700}
#dayTitle .dnum{
font-size:4.5rem;line-height:.82;letter-spacing:-.045em;font-weight:700;
}
#dayTitle .dmeta{display:flex;flex-direction:column;gap:2px;padding-bottom:.35rem}
#dayTitle .dow{
font-family:var(--ui);font-style:normal;font-size:.72rem;font-weight:700;
letter-spacing:.16em;color:var(--c-goal);
}
#dayTitle .dsub{font-size:.86rem;font-weight:400;color:var(--fg-2)}
.rel{align-self:center}
/* --------------------------------------------------------------- day cards */
.card{
background:var(--bg-2);border:0;border-radius:14px;margin-bottom:.7rem;
}
.card-head{padding:.85rem 1rem;gap:.65rem;cursor:pointer}
.card-head h2{
font-family:var(--ui);font-size:.62rem;font-weight:700;letter-spacing:.16em;
text-transform:uppercase;color:var(--fg);
}
.card-head .cnt{
font-family:var(--ui);font-size:.68rem;font-weight:600;color:var(--fg-3);
background:none;padding:0;
}
.card-head .cnt .prot,.card-head .cnt b{color:var(--ok)}
.card-body{padding:0 1rem .9rem}
.card[data-collapsed="true"] .card-head{padding-bottom:.85rem}
.card-head .tgl{color:var(--fg-3)}
/* to-do reads as the spine of the day */
#sec-todo{background:var(--bg-2)}
#sec-todo .card-body{position:relative;padding-left:1.9rem}
#sec-todo .card-body::before{
content:"";position:absolute;left:1rem;top:.55rem;bottom:2.6rem;width:2px;
border-radius:2px;background:linear-gradient(var(--accent),var(--line));
}
/* ------------------------------------------------------------------- rows */
.row{border-radius:9px;padding:.55rem .3rem}
.row .bar{width:3px;border-radius:2px;background:var(--cat,var(--line-2))}
.row .r-title{font-size:1.02rem;line-height:1.35}
.row .r-meta{font-family:var(--ui);font-size:.7rem;color:var(--fg-3)}
.row .tick{border-radius:7px}
.row:hover{background:#131417}
/* carried over -> loose ends: amber date rules, never hidden */
.grp-date{
font-family:var(--ui);font-size:.6rem;font-weight:700;letter-spacing:.14em;
text-transform:uppercase;color:var(--c-goal);padding:.7rem 0 .2rem;
}
#sec-carry .card-head h2{color:var(--c-goal)}
#sec-carry .card-head .tgl{display:none} /* always open */
#sec-carry .card-body{display:block!important}
/* ------------------------------------------------- routine cards, wide open */
#daySections .card{width:100%}
#daySections .card .card-body .row{padding:.5rem .3rem}
.compose{
background:var(--bg);border:1px dashed var(--line);border-radius:12px;
color:var(--fg);padding:.7rem .9rem;
}
/* --------------------------------------------------------------- week view */
.weekgrid .card,.weekgrid>div{background:var(--bg-2)}
#weekProteinCard .card-body,#routineGridCard .card-body{padding-top:.4rem}
/* ------------------------------------------------------------------- goals */
.goalmonth h3{
font-family:var(--ui);font-size:.62rem;font-weight:700;letter-spacing:.16em;
text-transform:uppercase;color:var(--fg);margin:1.1rem 0 .5rem;
}
.goalmonth .card{background:var(--bg-2)}
.quickadd input{background:var(--bg-2);border:1px solid var(--line);border-radius:14px}
/* --------------------------------------------------------------------- fab */
.fab{box-shadow:0 8px 24px color-mix(in srgb,var(--accent) 40%,transparent)}
/* -------------------------------------------------------- dialogs / sheets */
dialog{background:var(--bg-2);border:1px solid var(--line)}
.dlg-head h2{font-size:1.05rem}
.btn.primary{background:var(--accent);color:#fff}
.statusbar{background:var(--bg);border-top:1px solid var(--line)}
/* narrow phones: keep the big date readable, never cramped */
@media (max-width:420px){
#dayTitle .dnum{font-size:3.9rem}
.card-body{padding:0 .85rem .8rem}
#sec-todo .card-body{padding-left:1.7rem}
}
/* ════════════════════════════════════════ week: nutrition / habits matrix */
/* your existing #routineGrid .rgrid table, restyled to mock 2c */
.rgrid{border-collapse:separate;border-spacing:0 2px;width:100%}
.rgrid th{
font-family:var(--ui);font-size:.56rem;font-weight:700;letter-spacing:.08em;
text-transform:uppercase;color:var(--fg-3);padding:0 0 .5rem;line-height:1.5;
}
.rgrid td{font-size:.95rem;color:var(--fg);padding:.15rem .2rem}
.rgrid td:first-child{padding-left:.1rem;max-width:15rem}
.rgrid tr.spacer td{padding:.45rem 0}
.rgrid td.gname{
font-family:var(--ui);font-size:.6rem;font-weight:700;letter-spacing:.16em;
text-transform:uppercase;color:var(--fg-2);padding-top:.7rem;
}
.rgrid .cell{
width:22px;height:22px;border-radius:6px;border:1.5px solid var(--line-2);
display:grid;place-items:center;margin:0 auto;color:transparent;
transition:background .12s,border-color .12s;
}
.rgrid .cell:hover{border-color:var(--accent)}
.rgrid .cell.on{background:var(--accent);border-color:var(--accent);color:#fff}
.rgrid .cell.na{opacity:.25}
.rgrid .cell svg{width:12px;height:12px;stroke-width:2.4}
/* protein bars: quieter track, fitness-red fill (mock 2b right rail) */
.prow .pr-bar{background:var(--bg-3)}
.prow .pr-day,.worow .wo-day{font-family:var(--ui);font-size:.62rem;font-weight:600;color:var(--fg-3)}
.prow.is-today .pr-day,.worow.is-today .wo-day{color:var(--accent)}
/* ═══════════════════════════════════════════════ add / edit sheet as chips */
.cats{display:flex;flex-wrap:wrap;gap:.45rem}
.cats button,.cats label{
border-radius:99px;padding:.5rem .85rem;background:var(--bg-3);
font-family:var(--ui);font-size:.8rem;font-weight:600;color:var(--fg-2);
border:0;display:flex;align-items:center;gap:.45rem;
}
.cats button.on,.cats label.on{color:#fff;background:color-mix(in srgb,var(--accent) 22%,var(--bg-3))}
.field label{font-family:var(--ui);font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2)}
.quick-title{font-size:1.15rem}
/* the When row theme-ink.js injects above the date input */
.ink-when{display:flex;flex-wrap:wrap;gap:.45rem;margin:.15rem 0 .5rem}
.ink-when button{
border-radius:99px;padding:.5rem .9rem;background:var(--bg-3);color:var(--fg-2);
font-family:var(--ui);font-size:.8rem;font-weight:600;
}
.ink-when button.on{background:var(--accent);color:#fff}
.ink-when button:hover:not(.on){color:var(--fg)}
/* ════════════════════════════════════ desktop: the two-column Mac layout */
@media (min-width:1040px){
#main{max-width:74rem}
#viewDay{
display:grid;grid-template-columns:minmax(0,1.5fr) minmax(19rem,1fr);
gap:0 2rem;align-items:start;
}
#viewDay .dayhead{grid-column:1 / -1}
#viewDay #daySections{grid-column:1}
#viewDay #notesCard{grid-column:2;position:sticky;top:9.5rem}
#viewDay #notesCard textarea{min-height:22rem}
#dayTitle .dnum{font-size:5.4rem}
.row .r-title{font-size:1.06rem}
}