/* Vantage round 4 (built on round 3's file): the same locked home, plus foldable sections, needs-you bands, lean note
   rows and the notes takes. Round 3's notes, kept below for its pages: */
/* Vantage round 3. The Table home is locked (his yes in round 2, 11 Nov 2026); the project page and the notes page get three
   takes each, all in one calm order with few sections ("app screen looks a bit too confusing", notes "a little confusing
   and scattered"). Loaded after r2.css. */

/* ---------- the Table home, from round 2 unchanged ---------- */
.strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.strip .card { padding: 14px 16px; }
.strip .upt { height: 26px; }
.tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.tools .field { width: 220px; }
.tools .right { margin-left: auto; display: flex; gap: 8px; }
td.c-views .spark { height: 24px; width: 64px; }
.tbl td.c-views { padding-left: 26px; }
td.c-views .row { display: grid; grid-template-columns: 64px 5ch 7ch; gap: 10px; justify-items: end; }
td.c-upt .upt { width: 96px; height: 20px; gap: 1px; }
.pend { display: grid; grid-template-columns: auto auto; gap: 2px 14px; justify-content: start; }
.pend > span { white-space: nowrap; }
td.c-need { white-space: nowrap; }
.site-ms { min-width: 56px; display: inline-block; }
.home .tbl td, .home .tbl th { padding-left: 8px; padding-right: 8px; }
td.c-acts, .home th:last-child { width: 0; padding: 0 !important; position: relative; }
td.c-acts .row-acts { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); padding: 4px; border-radius: 10px; background: var(--s2); box-shadow: var(--pop); }
.plist { display: none; flex-direction: column; gap: 8px; }
.phone-sort { display: none; }
.pcard { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; align-items: center; padding: 14px; border-radius: 14px; background: var(--s1); box-shadow: var(--shadow); cursor: pointer; }
.pcard .proj-name { font-size: calc(18px * var(--fhs)); }
.pcard .l2 { grid-column: 2 / 4; display: flex; gap: 14px; flex-wrap: wrap; color: var(--ink2); font-size: 14px; }
.pcard .l3 { grid-column: 1 / 4; }
.home tr[aria-current="true"] td { background: var(--acc-soft); }
@media (max-width: 1180px) { .strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } .strip .card:nth-child(n+4) { display: none; } }
@media (max-width: 760px) {
  .tools .seg { display: flex; width: 100%; }
  .tools .seg > button { flex: 1; justify-content: center; padding: 0 6px; }
  .strip { grid-template-columns: 1fr 1fr; gap: 8px; }
  .strip .card:nth-child(n+4) { display: none; }
  .strip .card:nth-child(3) { grid-column: 1 / 3; }
  .tbl-host { display: none; }
  .plist { display: flex; }
  .tools .field { width: 100%; order: 3; }
  .tools .right { display: none; }
  .phone-sort { display: inline-flex; }
}

/* ---------- shared by the new pages ---------- */
.col { max-width: 940px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.col > .app-head { margin: 6px 0 2px; }
.back { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; color: var(--ink2); font-size: 15px; }
.back:hover { color: var(--ink); }
.sec-h { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; min-height: 30px; }
.sec-h .h { margin-right: auto; }
.sec-h .count-n { color: var(--ink2); }
/* four numbers in one line, no boxes */
.nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 24px; }
.nums .n-lab { color: var(--ink2); font-size: max(14px, calc(14px * var(--fbs))); white-space: nowrap; }
.nums .n-val { display: flex; align-items: baseline; gap: 8px; font-size: calc(24px * var(--fbs)); font-weight: 500; white-space: nowrap; margin-top: 2px; }
/* the things to act on, one row each */
.acts-list { display: flex; flex-direction: column; }
.act { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 4px; }
.act + .act { box-shadow: 0 -1px 0 var(--edge); }
.act .ic { margin-top: 2px; }
.act.bad > .ic { color: var(--bad); }
.act.warn > .ic { color: var(--warn); }
.act.acc > .ic { color: var(--ink2); }
.act-text { min-width: 0; }
.act-text .li-meta { margin-top: 2px; }
.act .reply { grid-column: 2 / 4; }
.none-row { padding: 10px 4px; color: var(--ink2); }
/* add a note in place: type and press Enter */
.addline { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; border-radius: 12px; background: var(--s2); }
.addline input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: max(16px, calc(15px * var(--fbs))); height: 36px; color: var(--ink); }
.addline input::placeholder { color: var(--ink2); opacity: 1; }
.addline:focus-within { box-shadow: inset 0 0 0 1px var(--acc-line); }
.notes-list { margin-top: 6px; }
.notes-list .li { padding: 10px 6px; }
.notes-list .li .check { margin-top: 3px; cursor: pointer; }
.li.is-done .li-body > div:first-child { text-decoration: line-through; text-decoration-color: var(--ink2); }
.more-done { margin-top: 4px; }
/* details: plain rows */
.drow { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 11px 4px; min-height: 46px; }
.drow + .drow { box-shadow: 0 -1px 0 var(--edge); }
.drow > :first-child { color: var(--ink2); }
.drow .vals { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; min-width: 0; }
.drow .vals > span { white-space: nowrap; }
.cmp-host { margin-top: 12px; }
.cmp-host .row { flex-wrap: wrap; margin-bottom: 12px; }
.cmp-host select { flex: 1; border: 0; background: none; outline: 0; min-width: 0; color: var(--ink); }
.ptabs { margin: 4px 0 2px; align-self: flex-start; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.ptabs::-webkit-scrollbar, .tools .seg::-webkit-scrollbar { display: none; }

/* ---------- App, take 3: the project opens in a panel over the table ---------- */
.drawer-scrim { position: fixed; inset: 60px 0 0 0; z-index: 40; background: rgb(0 0 0 / .32); opacity: 0; pointer-events: none; transition: opacity .2s var(--ease); }
.drawer-scrim.show { opacity: 1; pointer-events: auto; }
:root[data-theme="light"] .drawer-scrim { background: rgb(0 0 0 / .12); }
.drawer { position: fixed; z-index: 41; top: 60px; right: 0; bottom: 0; width: min(600px, 100vw); background: var(--bg); box-shadow: -1px 0 0 var(--edge), -30px 0 60px -30px rgb(0 0 0 / .6);
  overflow-y: auto; overscroll-behavior: contain; transform: translateX(104%); transition: transform .32s var(--ease); }
.drawer.show { transform: none; }
.drawer .dr-in { padding: 18px 22px 40px; display: flex; flex-direction: column; gap: 16px; }
.drawer .dr-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.drawer .dr-head .h { font-size: calc(26px * var(--fhs)); }
.drawer .dr-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.drawer .nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---------- Notes, take 1: one table ---------- */
.ntbl-host td.c-text { white-space: normal; min-width: 260px; }
.ntbl-host td { vertical-align: top; }
.tick { width: 18px; height: 18px; border-radius: 5px; display: inline-grid; place-items: center; background: var(--s3); flex: none; margin-top: 2px; transition: background .15s; }
.tick svg { opacity: 0; transform: scale(.6); transition: opacity .15s, transform .2s var(--spring); color: var(--acc-ink); }
.tick[aria-checked="true"] { background: var(--acc); }
.tick[aria-checked="true"] svg { opacity: 1; transform: none; }
.ntbl-host tr.is-done td.c-text { text-decoration: line-through; text-decoration-color: var(--ink2); }
.compose { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; border-radius: var(--r3); background: var(--s1); box-shadow: var(--shadow); margin-bottom: 12px; flex-wrap: wrap; }
.compose input { flex: 1; min-width: 200px; border: 0; outline: 0; background: none; font-size: max(16px, calc(15px * var(--fbs))); height: 38px; color: var(--ink); }
.compose input::placeholder { color: var(--ink2); opacity: 1; }
.compose:focus-within { box-shadow: var(--shadow), inset 0 0 0 1px var(--acc-line); }
.ncards { display: none; flex-direction: column; gap: 8px; }
.ncard { padding: 14px; border-radius: 14px; background: var(--s1); box-shadow: var(--shadow); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; }

/* ---------- Notes, take 2: by project, one column ---------- */
.grp-h { display: flex; align-items: center; gap: 12px; margin: 10px 6px 4px; }
.grouped { padding: 8px 14px; }
.grouped .grp-h + .notes-list { padding-bottom: 6px; }
.grouped .notes-list + .grp-h { margin-top: 18px; }
.grp-h .h { margin-right: auto; }

/* ---------- Notes, take 3: a notepad ---------- */
.pad { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 20px; align-items: start; }
.pad-list { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 2px; max-height: calc(100vh - 96px); overflow-y: auto; padding: 6px; border-radius: var(--r3); background: var(--s1); box-shadow: var(--shadow); }
.pad-list button { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; text-align: left; }
.pad-list button:hover { background: var(--hover); }
.pad-list button[aria-current="true"] { background: var(--acc-soft); }
.pad-list .nm { white-space: nowrap; overflow: hidden; }
.pad-list .c { color: var(--ink2); font-size: 14px; }
.pad-page { max-width: 760px; display: flex; flex-direction: column; gap: 14px; }
.pad-page .pad-h { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.pad-page .pad-h .h { font-size: calc(28px * var(--fhs)); margin-right: auto; }
.pad-pick { display: none; }

@media (max-width: 760px) {
  .col { gap: 12px; }
  .nums { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
  .drow { grid-template-columns: 1fr auto; gap: 4px 12px; }
  .drow > :first-child { grid-column: 1 / 3; }
  .act { grid-template-columns: 20px minmax(0, 1fr); }
  .act > .btn, .act > .row { grid-column: 2; justify-self: start; }
  .drawer { top: 0; z-index: 60; }
  .drawer .dr-in { padding: 14px 16px 96px; }
  .drawer-scrim { inset: 0; z-index: 59; }
  .ntbl-host { display: none; }
  .ncards { display: flex; }
  .pad { grid-template-columns: minmax(0, 1fr); }
  .tools .seg[data-kind] { overflow-x: auto; scrollbar-width: none; max-width: 100%; }
  .tools .seg[data-kind] > button { flex: none; padding: 0 10px; }
  .ptabs .count, .tools .seg[data-kind] .count { display: none; }
  .ptabs > button { padding: 0 10px; }
  .ntools .field { flex: 1; width: auto; order: 3; }
  .ntools .seg[data-done] { order: 4; width: auto; display: inline-flex; margin-left: 0 !important; }
  .ntools .seg[data-done] > button { flex: none; padding: 0 12px; }
  .drawer .dr-head { align-items: start; }
  .pad-list { display: none; }
  .pad-pick { display: inline-flex; }
  .compose input { min-width: 100%; }
  .compose { padding: 10px; }
}

/* separators: the dot rides at the end of an item, so a wrapped line starts with a word, never with a dot */
.li-meta > * + *:not(.flag)::before, .yt-meta > * + *:not(.flag)::before { content: none; }
.li-meta > *:not(:last-child):not(.flag)::after, .yt-meta > *:not(:last-child):not(.flag)::after { content: '·'; margin: 0 8px; color: var(--ink2); }
.li-meta > .type::after, .li-meta > .st::after, .yt-meta > .due::after { margin-left: 2px !important; }
.col .app-head > .stack { flex: 1 1 220px; min-width: 0; }

/* =================== round 4 =================== */
/* sections fold from their whole header */
.sec .sec-h { margin-bottom: 14px; }
.sec-t { display: flex; align-items: center; gap: 10px; margin-right: auto; padding: 4px 8px 4px 2px; margin-left: -2px; border-radius: 10px; color: var(--ink); }
.sec-t:hover { background: var(--hover); }
.sec-t .ic { color: var(--ink2); transition: transform .22s var(--ease); }
.sec.folded .sec-t .ic { transform: rotate(-90deg); }
.sec.folded .sec-b { display: none; }
.sec.folded .sec-h { margin-bottom: 0; }
.sec-r { display: flex; align-items: center; gap: 10px; }
.sec-r .count-n { font-size: 16px; color: var(--ink); }
.numline { padding: 18px 20px; }

/* needs you: priority bands; each row leads with what ranks it */
.band + .band { margin-top: 24px; }
.band-h { display: flex; align-items: baseline; gap: 10px; padding: 0 4px 8px; font-family: var(--fh); font-weight: var(--fhw); font-stretch: var(--fhx); font-size: calc(16px * var(--fhs)); color: var(--ink); box-shadow: 0 1px 0 var(--edge); }
.band-h .num { font-family: var(--fb); font-size: 14px; color: var(--ink2); }
.need { display: grid; grid-template-columns: 108px minmax(0, 1fr) auto; gap: 4px 16px; align-items: start; padding: 14px 4px; }
.need + .need { box-shadow: 0 -1px 0 var(--edge); }
.need-lead { font-weight: 600; font-size: max(15px, calc(15px * var(--fbs))); color: var(--ink); padding-top: 1px; overflow-wrap: anywhere; }
.need-lead.bad { color: var(--bad); }
.need-lead.warn { color: var(--warn); }
.need-text { font-size: max(16px, calc(16px * var(--fbs))); font-weight: 500; color: var(--ink); line-height: 1.4; }
.need-meta { margin-top: 4px; color: var(--ink2); font-size: max(14px, calc(14px * var(--fbs))); }
.need-act { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.need .reply { grid-column: 2 / 4; margin-top: 10px; }
.ln { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--edge); display: inline-flex; align-items: center; gap: 4px; }
.ln:hover { text-decoration-color: currentColor; }

/* notes: one clear line each; type and age at the side */
.nlist { display: flex; flex-direction: column; margin-top: 8px; }
.nrow { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 4px 14px; align-items: start; padding: 13px 4px; }
.nrow + .nrow { box-shadow: 0 -1px 0 var(--edge); }
.nrow .check { margin-top: 3px; cursor: pointer; }
.nrow.fb > .ic { color: var(--ink2); margin-top: 2px; }
.nr-text { font-size: max(16px, calc(16px * var(--fbs))); color: var(--ink); line-height: 1.4; min-width: 0; }
.nr-sub { margin-top: 6px; }
.nr-side { display: flex; align-items: center; gap: 14px; white-space: nowrap; padding-top: 1px; }
.nr-when { color: var(--ink2); font-size: max(14px, calc(14px * var(--fbs))); }
.nrow.is-done .nr-text { text-decoration: line-through; text-decoration-color: var(--ink2); }
.ntag { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--ink); font-size: max(14px, calc(14px * var(--fbs))); }
.ntag .ic { color: var(--ink2); }
.ntag.bug .ic { color: var(--bad); }
.ntag.idea .ic { color: var(--warn); }
.ntag.todo .ic { color: var(--ink); }
.pj { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.pj-stack { display: inline-flex; }
.pj-stack > * + * { margin-left: -6px; }
.pj-stack img, .pj-stack > * { border-radius: 6px; box-shadow: 0 0 0 2px var(--s1); }
.nc-side { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; margin-top: 8px; color: var(--ink2); font-size: 14px; }

/* details: the label column reads as labels */
.drow > .dlab { font-family: var(--fh); font-weight: var(--fhw); font-stretch: var(--fhx); font-size: calc(17px * var(--fhs)); color: var(--ink); }
.drow .dact { justify-self: end; }
.drow { grid-template-columns: 140px minmax(0, 1fr) auto; padding: 13px 4px; }

/* notepad */
.pad-sep { height: 1px; background: var(--edge); margin: 6px 8px; }
.pad-more { padding: 8px 10px; color: var(--ink2); text-align: left; border-radius: 10px; font-size: 14px; }
.pad-more:hover { color: var(--ink); background: var(--hover); }
.grp-link { display: flex; align-items: center; gap: 10px; margin-right: auto; border-radius: 8px; }
.grp-link:hover .h { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--edge); }
.grouped .grp-h { margin: 6px 4px 0; }
.grouped .nlist + .grp-h { margin-top: 24px; }
.pad-page .compose { margin-bottom: 0; }

@media (max-width: 760px) {
  .need { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .need-act { justify-content: flex-start; margin-top: 8px; }
  .need .reply { grid-column: 1; }
  .nrow { grid-template-columns: 18px minmax(0, 1fr); }
  .nr-side { grid-column: 2; padding-top: 2px; }
  .drow { grid-template-columns: minmax(0, 1fr) auto; }
  .drow > .dlab { grid-column: 1 / 3; }
  .ntools .seg[data-by] { order: 5; margin-left: 0 !important; }
}

.ntbl-host .due, .nc-side .due { font-size: inherit; }
.drow .upt { width: min(100%, 360px); height: 20px; }
.pad-page { max-width: 880px; }

/* =================== round 5 =================== */
/* urgency: a dot from yellow to red */
.udot { width: 10px; height: 10px; border-radius: 50%; flex: none; display: inline-block; }
.udot.u0 { background: #e9cf4a; } .udot.u1 { background: #f2a63a; } .udot.u2 { background: #f2743a; } .udot.u3 { background: #ef4438; box-shadow: 0 0 0 3px rgb(239 68 56 / .22); }
:root[data-theme="light"] .udot.u0 { background: #c9a800; } :root[data-theme="light"] .udot.u1 { background: #d98a10; }

/* a need: one title line; it opens into steps */
.nds { display: flex; flex-direction: column; }
.nd + .nd { box-shadow: 0 -1px 0 var(--edge); }
.nd-h { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 16px; gap: 14px; align-items: center; width: 100%; padding: 14px 6px; text-align: left; border-radius: 10px; }
.nd-h:hover { background: var(--hover); }
.nd-h > .ic { color: var(--ink2); transition: transform .22s var(--ease); }
.nd.open .nd-h > .ic { transform: rotate(180deg); }
.nd-t { font-size: max(16px, calc(16px * var(--fbs))); font-weight: 500; color: var(--ink); line-height: 1.35; min-width: 0; }
.nd-sub { display: block; font-weight: 400; color: var(--ink2); font-size: max(14px, calc(14px * var(--fbs))); margin-top: 2px; }
.nd.open .nd-sub { display: none; }
.nd-age { color: var(--ink2); font-size: max(14px, calc(14px * var(--fbs))); white-space: nowrap; }
.nd-b { display: none; padding: 0 6px 16px 30px; }
.nd.open .nd-b { display: block; }
.steps { margin: 0 0 14px; padding: 0; list-style: none; counter-reset: st; display: flex; flex-direction: column; gap: 8px; }
.steps li { counter-increment: st; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; line-height: 1.45; color: var(--ink); }
.steps li::before { content: counter(st); width: 22px; height: 22px; border-radius: 50%; background: var(--s3); color: var(--ink); display: grid; place-items: center; font-size: 13px; font-weight: 600; margin-top: 1px; }
.nd-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.fb-quote { padding: 10px 14px; border-radius: 10px; background: var(--s2); margin-bottom: 10px; line-height: 1.45; }
.fb-quote .meta { margin-top: 4px; }
.nb-reply { height: auto; padding: 8px 10px; margin-bottom: 10px; align-items: flex-start; }
.nb-reply textarea { flex: 1; border: 0; outline: 0; background: none; resize: vertical; font-size: 16px; color: var(--ink); }
.catb { display: inline-flex; align-items: center; gap: 4px; color: var(--ink); border-radius: 6px; padding: 0 4px; margin: 0 -4px; }
.catb:hover { background: var(--hover); }
.catb .ic { color: var(--ink2); }

/* type pills: each kind its own colour and shape */
.tp { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px 0 7px; border-radius: 7px; white-space: nowrap; font-size: max(14px, calc(14px * var(--fbs))); font-weight: 500; }
.tp.note { background: rgb(255 255 255 / .07); color: #e6e6ea; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1); }
.tp.todo { background: rgb(96 165 250 / .16); color: #c7ddff; } .tp.todo .ic { color: #6aa8ff; }
.tp.idea { background: rgb(250 204 21 / .14); color: #fbe7a1; } .tp.idea .ic { color: #f5c518; }
.tp.bug { background: rgb(248 113 113 / .16); color: #ffc9c9; } .tp.bug .ic { color: #ff6b6b; }
.tp.feedback { background: rgb(167 139 250 / .17); color: #ddd5ff; } .tp.feedback .ic { color: #a78bfa; }
.tp.yours { background: #f4f4f5; color: #0a0a0a; } .tp.yours .ic { color: #0a0a0a; }
:root[data-theme="light"] .tp.note { background: rgb(0 0 0 / .05); color: #26262b; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .1); }
:root[data-theme="light"] .tp.todo { background: #e3eeff; color: #123d82; } :root[data-theme="light"] .tp.todo .ic { color: #1f62d6; }
:root[data-theme="light"] .tp.idea { background: #fff4c7; color: #5c4600; } :root[data-theme="light"] .tp.idea .ic { color: #a87c00; }
:root[data-theme="light"] .tp.bug { background: #ffe4e1; color: #7d1a10; } :root[data-theme="light"] .tp.bug .ic { color: #d1301e; }
:root[data-theme="light"] .tp.feedback { background: #eee8ff; color: #3b2486; } :root[data-theme="light"] .tp.feedback .ic { color: #6d4ae0; }
:root[data-theme="light"] .tp.yours { background: #0a0a0a; color: #fff; } :root[data-theme="light"] .tp.yours .ic { color: #fff; }

/* the note box */
.nbox { display: flex; flex-direction: column; gap: 12px; }
.nb-pop { width: min(560px, calc(100vw - 24px)); max-width: min(560px, calc(100vw - 24px)); padding: 14px; }
.nb-row { display: flex; gap: 10px; align-items: center; }
.nb-text { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border-radius: 12px; background: var(--s3); border: 0; outline: 0; font-size: max(16px, calc(16px * var(--fbs))); color: var(--ink); }
.nb-text::placeholder { color: var(--ink2); opacity: 1; }
.nb-text:focus { box-shadow: inset 0 0 0 1px var(--acc-line); }
.nb-add { height: 44px; padding: 0 18px; }
.nb-opts { flex-wrap: wrap; justify-content: space-between; }
.nb-types { display: flex; gap: 6px; flex-wrap: wrap; }
.tb { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 10px; border-radius: 9px; font-size: max(14px, calc(14.5px * var(--fbs))); color: var(--ink2); box-shadow: inset 0 0 0 1px var(--edge); transition: background .15s, color .15s, box-shadow .15s; }
.tb:hover { color: var(--ink); background: var(--hover); }
.tb[aria-checked="true"] { color: var(--ink); font-weight: 600; }
.tb.note[aria-checked="true"] { background: rgb(255 255 255 / .12); box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .7); }
.tb.todo .ic { color: #6aa8ff; } .tb.todo[aria-checked="true"] { background: rgb(96 165 250 / .2); box-shadow: inset 0 0 0 1.5px #6aa8ff; }
.tb.idea .ic { color: #f5c518; } .tb.idea[aria-checked="true"] { background: rgb(250 204 21 / .17); box-shadow: inset 0 0 0 1.5px #f5c518; }
.tb.bug .ic { color: #ff6b6b; } .tb.bug[aria-checked="true"] { background: rgb(248 113 113 / .2); box-shadow: inset 0 0 0 1.5px #ff6b6b; }
:root[data-theme="light"] .tb.note[aria-checked="true"] { background: rgb(0 0 0 / .06); box-shadow: inset 0 0 0 1.5px #0a0a0a; }
:root[data-theme="light"] .tb.todo .ic { color: #1f62d6; } :root[data-theme="light"] .tb.todo[aria-checked="true"] { background: #e3eeff; box-shadow: inset 0 0 0 1.5px #1f62d6; }
:root[data-theme="light"] .tb.idea .ic { color: #a87c00; } :root[data-theme="light"] .tb.idea[aria-checked="true"] { background: #fff4c7; box-shadow: inset 0 0 0 1.5px #a87c00; }
:root[data-theme="light"] .tb.bug .ic { color: #d1301e; } :root[data-theme="light"] .tb.bug[aria-checked="true"] { background: #ffe4e1; box-shadow: inset 0 0 0 1.5px #d1301e; }
.nb-for { height: 34px; }
.nb-apps { border-top: 1px solid var(--edge); padding-top: 10px; max-height: min(46vh, 380px); overflow: auto; }
.nbox.inline .nb-apps { max-height: none; }
.ab-h { color: var(--ink2); font-size: 14px; margin: 12px 4px 4px; }
.ab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 2px; }
.ab { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 9px; text-align: left; white-space: nowrap; min-width: 0; }
.ab:hover { background: var(--hover); }
.ab > span:last-child { overflow: hidden; }
.nb-card { padding: 14px; margin-bottom: 14px; }

/* the to-dos list from the top bar */
.todo-pop5 { width: min(520px, calc(100vw - 24px)); max-width: min(520px, calc(100vw - 24px)); }
.todo-pop5 .tp-list { max-height: min(70vh, 640px); overflow: auto; }
.tp-h { display: flex; justify-content: space-between; }
.todo-pop5 .nd-b { padding-left: 30px; }

/* notes on the project page: text, type, age, one line */
.nlist5 { display: flex; flex-direction: column; }
.nrow5 { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 12px 6px; }
.nrow5 + .nrow5 { box-shadow: 0 -1px 0 var(--edge); }
.nrow5 .check { cursor: pointer; }
.nr-text { color: var(--ink); line-height: 1.4; min-width: 0; }
.nr-age { color: var(--ink2); font-size: max(14px, calc(14px * var(--fbs))); white-space: nowrap; }
.nrow5.is-done .nr-text { text-decoration: line-through; }
.sec-r .btn { margin-left: 4px; }

/* projects grouped by kind */
.cat-h { display: flex; gap: 8px; align-items: baseline; font-family: var(--fh); font-weight: var(--fhw); font-size: calc(18px * var(--fhs)); color: var(--ink); margin: 18px 2px 6px; }
.cat-h .num { font-family: var(--fb); font-size: 14px; color: var(--ink2); }
.plist .cat-h:first-child { margin-top: 0; }
.tbl tr.cat td { padding: 22px 12px 6px !important; font-family: var(--fh); font-weight: var(--fhw); font-size: calc(18px * var(--fhs)); color: var(--ink); background: var(--s1); }
.ntbl-host .tbl tr.group td { padding-left: 20px; }
.ncard5 { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; padding: 14px; border-radius: 14px; background: var(--s1); box-shadow: var(--shadow); }
.ncard5 .tick { margin-top: 2px; }
.nc-main { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.nc-main .nc-side { margin-top: 0; }

@media (max-width: 760px) {
  .nd-h { grid-template-columns: 10px minmax(0, 1fr) auto; gap: 12px; padding: 13px 4px; }
  .nd-h > .ic { display: none; }
  .nd-b { padding: 0 4px 14px 26px; }
  .nrow5 { grid-template-columns: 18px minmax(0, 1fr); gap: 6px 12px; }
  .nrow5 > .tp { grid-column: 2; justify-self: start; }
  .nrow5 > .nr-age { grid-column: 2; margin-top: -2px; }
  .nrow5 > .tp + .nr-age { grid-column: 2; }
  .nb-row:first-child { flex-wrap: nowrap; }
  .nb-opts { gap: 10px; }
  .ab-grid { grid-template-columns: 1fr 1fr; }
  .tools .seg[data-show] { overflow-x: auto; scrollbar-width: none; max-width: 100%; }
  .tools .seg[data-show] > button { flex: none; }
}

/* live app */
.kpi-wide { grid-column: span 2; justify-content: space-between; }
.kpi-wide .btn { align-self: flex-start; }
.ph { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.ph .meta:empty { display: none; }
@media (max-width: 760px) { .kpi-wide { grid-column: 1 / 3; } }