/* YFT HQ, the team site. The black tokens of HQ (mock/tokens-final.css) and the round-3 look: Poppins for the UI,
   Literata on the warm paper for reading text (In short, the conversation). No inline styles anywhere. */

:root {
  --bg: #070709; --surface: #0f0f12; --surface2: #17171c; --surface3: #1e1e24;
  --border: #26262d; --border2: #34343d; --divider: rgba(38,38,45,.6); --hover: rgba(217,219,227,.04);
  --text1: #f2f2f4; --text2: #9d9da8; --text3: #80808c; --silver: #d9dbe3;
  --accent: #4f5bd5; --accent-l: #8a92ee; --accent-wash: rgba(138,146,238,.16); --focus: #8a92ee;
  --green: #3ddc97; --gold: #ffb800; --red: #ff5c7a;
  --gold-wash: rgba(255,184,0,.12); --red-wash: rgba(255,92,122,.14);
  --paper: #14110e; --paper-up: #1b1814; --paper-up2: #241f1a;
  --paper-ink: #ebe3d6; --paper-ink2: #b5aa98; --paper-ink3: #958a78;
  --paper-rule: #2b251f; --paper-rule2: #4a4239; --ember: #e0a25a;
  --font-sans: 'Poppins', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'Literata', 'Iowan Old Style', Palatino, Georgia, serif;
  --radius-sm: 5px; --radius-md: 7px; --radius-lg: 9px; --radius-xl: 12px; --radius-pill: 20px;
  --sidebar-w: 232px;
  --shadow-pop: 0 18px 48px rgba(0,0,0,.6);
  /* people: the chip squares and the speakers' names */
  --p0: #94b4dc; --p1: #9fc39a; --p2: #dc9a92; --p3: #d6a461; --p4: #b9a5dc; --p5: #7fc3b8; --p6: #d2c08a;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--text1); font-family: var(--font-sans); font-size: 13px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
ol, ul { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--accent-wash); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg.i { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.3; flex: none; }
svg.lockup { fill: currentColor; display: block; height: 20px; width: auto; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.dim { color: var(--text3); font-weight: 400; }
.empty { color: var(--text2); font-size: 13.5px; line-height: 20px; padding: 10px 0 14px; }

/* ------------------------------------------------------------------ shell */
.shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh;
  background: linear-gradient(to right, var(--surface) calc(var(--sidebar-w) - 1px), var(--border) calc(var(--sidebar-w) - 1px), var(--border) var(--sidebar-w), transparent var(--sidebar-w)); }
.sidebar { position: sticky; top: 0; height: 100vh; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; min-width: 0; }
.brand { height: 60px; flex: none; display: flex; align-items: center; padding: 0 20px; border-bottom: 1px solid var(--border); color: var(--text1); }
.nav { padding: 12px; display: flex; flex-direction: column; gap: 2px; flex: 1 0 auto; } /* keeps the person menu at the foot, with or without the Updated line */
.nav a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-lg); color: var(--text2); font-size: 13.5px; line-height: 20px; }
.nav a:hover { color: var(--text1); background: var(--hover); }
.nav a.active { background: var(--surface2); color: var(--text1); box-shadow: inset 3px 0 0 var(--silver); }
.nav .count { margin-left: auto; font-size: 12.5px; color: var(--text3); font-variant-numeric: tabular-nums; }
.upd { margin-top: auto; border-top: 1px solid var(--border); padding: 12px 20px; display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text2); font-variant-numeric: tabular-nums; }
.upd i, .ptop .u i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex: none; }
.foot { border-top: 1px solid var(--border); padding: 12px 20px 16px; display: flex; align-items: center; gap: 10px; font-size: 13px; line-height: 18px; min-width: 0; }
.foot .me { color: var(--text1); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.signout { margin: 0 0 0 auto; }
.signout button { background: none; border: 0; padding: 0; color: var(--text2); font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.signout button:hover { color: var(--text1); }
.avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--surface2); border: 1px solid var(--border2); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 500; color: var(--text1); flex: none; }
.main { min-width: 0; }
.content { padding: 24px 28px 48px; min-width: 0; max-width: 1480px; }
.ptop, .tabbar, .nextbox, .pnav { display: none; }

/* ------------------------------------------------------------------ shared controls */
.btn { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: var(--radius-md); border: 1px solid var(--border2); background: transparent; color: var(--text1); font-size: 12.5px; line-height: 18px; white-space: nowrap; cursor: pointer; }
.btn:hover { background: var(--surface2); }
.btn svg.i { width: 14px; height: 14px; color: var(--text2); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 500; }
.btn.primary:hover { background: #5d68e0; }
.st { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; line-height: 20px; color: var(--text3); white-space: nowrap; }
.st i { width: 8px; height: 8px; border-radius: 50%; background: var(--text3); flex: none; }
.st.r { color: var(--red); } .st.r i { background: var(--red); }
.st.y { color: var(--gold); } .st.y i { background: var(--gold); }
.st.q { color: var(--text2); }                       /* someone else's: the dot keeps its colour, the words stay quiet */
.st.none i { display: none; }
a.lk { color: var(--text1); text-decoration: underline dotted; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a.lk.q { color: inherit; }
a.lk:hover { text-decoration-style: solid; }
.sep { color: var(--text3); margin: 0 6px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 3px 12px 3px 10px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface2); font-size: 12.5px; line-height: 18px; color: var(--text1); white-space: nowrap; }
.sq { width: 9px; height: 9px; border-radius: 2px; flex: none; display: inline-block; background: var(--text3); }
.sq.p0 { background: var(--p0); } .sq.p1 { background: var(--p1); } .sq.p2 { background: var(--p2); } .sq.p3 { background: var(--p3); }
.sq.p4 { background: var(--p4); } .sq.p5 { background: var(--p5); } .sq.p6 { background: var(--p6); }
.chev { color: var(--text3); }

/* ------------------------------------------------------------------ Today */
.head { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 20px; min-height: 32px; }
h1 { margin: 0; font-size: 24px; line-height: 30px; font-weight: 600; letter-spacing: -.2px; }
h1 .dim { margin: 0 8px; }
.sum { display: flex; flex-wrap: wrap; font-size: 13.5px; color: var(--text2); }
.sum > span { display: inline-flex; align-items: center; gap: 6px; }
.sum > span + span::before { content: "\00b7"; margin: 0 8px; color: var(--text3); }
.sum b { color: var(--text1); font-weight: 600; }
.sum .od { color: var(--red); }
.sum .od i { width: 8px; height: 8px; border-radius: 50%; background: var(--red); flex: none; }

.grid { display: grid; grid-template-columns: minmax(0, 1fr) 424px; gap: 24px; align-items: start; }
.col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
/* Today: the clients stay in view while On you and You wait on scroll (on screens tall enough to hold them). */
@media (min-width: 1101px) and (min-height: 800px) { .grid > .col + .col { position: sticky; top: 24px; } }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 16px 22px 10px; min-width: 0; }
.sec-head { display: flex; align-items: center; gap: 8px; min-height: 20px; }
.sec-head h2 { margin: 0; font-size: 14px; line-height: 20px; font-weight: 600; }
.sec-head .n { color: var(--text3); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.sec-head .sm { display: inline-flex; align-items: center; gap: 7px; margin-left: 4px; font-size: 12.5px; color: var(--text2); white-space: nowrap; }
.sec-head .sm i { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--red); }
.take { color: var(--text2); font-size: 12.5px; line-height: 18px; margin: 2px 0 4px; }
.list > * + * { border-top: 1px solid var(--divider); }
.s-onyou .sec-head h2 { font-size: 15px; }
.s-onyou { padding-bottom: 8px; }

/* the person first on someone else's task (task rows, the agenda) */
.tl .who, .qt .who { font-weight: 600; }
.tl .ws, .qt .ws { color: var(--text3); margin: 0 6px; }
.m { font-size: 12.5px; line-height: 18px; color: var(--text2); margin-top: 3px; }
.m .sep { margin: 0 5px; }

/* calls today */
.cc { display: grid; grid-template-columns: 72px minmax(0, 1fr) max-content; column-gap: 12px; align-items: center; padding: 12px 0; }
.cc .when { align-self: start; }
.cc .tm { display: block; font-size: 13.5px; line-height: 19px; font-weight: 500; font-variant-numeric: tabular-nums; }
.cc .in { display: block; font-size: 12.5px; line-height: 18px; color: var(--silver); margin-top: 2px; }
.cc .ct { font-size: 13.5px; line-height: 19px; font-weight: 500; }
.cc.past .tm, .cc.past .ct { color: var(--text2); }
.cc.past .in { color: var(--text3); }
.list > .ag { border-top: none; }
details.ag { margin: 0 0 16px 84px; padding: 2px 0 2px 16px; border-left: 2px solid var(--border2); }
.ag-hd { list-style: none; display: flex; align-items: center; gap: 10px; cursor: pointer; }
.ag-hd::-webkit-details-marker { display: none; }
.ag-hd b { font-size: 13.5px; line-height: 20px; font-weight: 600; }
.ag-hd .by { font-size: 12.5px; color: var(--text2); }
.ag-hd .hide { margin-left: auto; display: inline-flex; color: var(--text3); }
.ag-hd .hide svg.i { width: 14px; height: 14px; transition: transform .15s; }
details.ag:not([open]) .ag-hd .hide svg.i { transform: rotate(-90deg); }
.ag-sec { margin-top: 12px; }
.ag-sec h4 { display: flex; align-items: baseline; gap: 8px; margin: 0; padding-bottom: 4px; border-bottom: 1px solid var(--border); font-size: 12.5px; line-height: 18px; font-weight: 600; color: var(--text2); }
.ag-sec h4 .n { color: var(--text3); font-weight: 400; }
.ag-sec h4 .s { margin-left: auto; color: var(--text3); font-weight: 400; }
.ag-sec .rows > * + * { border-top: 1px solid var(--divider); }
.qr { display: grid; grid-template-columns: minmax(0, 1fr) 150px; column-gap: 14px; align-items: baseline; padding: 7px 0; }
.qr.one { grid-template-columns: minmax(0, 1fr); }
.qr .qt { font-size: 13px; line-height: 19px; color: var(--text1); }
.qr .qs { font-size: 12.5px; line-height: 18px; color: var(--text3); }
.qr .st { justify-self: start; }

/* your clients: why each matters today; the row opens the client's calls */
.c2 { display: grid; grid-template-columns: minmax(0, 1fr) 14px; grid-template-areas: "a go" "b go"; column-gap: 14px; row-gap: 3px; align-items: center; padding: 11px 0; }
.c2:hover .name { text-decoration: underline; text-decoration-color: var(--text3); text-underline-offset: 3px; }
.c2-a { grid-area: a; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; min-width: 0; }
.c2-a .name { font-size: 13.5px; line-height: 19px; font-weight: 500; color: var(--text1); }
.c2-a .cn, .c2-a .cl { margin-left: auto; display: inline-flex; align-items: baseline; gap: 6px; font-size: 12.5px; line-height: 18px; color: var(--text2); white-space: nowrap; }
.c2-a .cn { align-items: center; color: var(--text1); }
.c2-a .cn svg.i { width: 14px; height: 14px; color: var(--silver); }
.c2-a .lc { color: var(--text1); }
.c2-b { grid-area: b; font-size: 12.5px; line-height: 18px; color: var(--text2); }
.c2-b .sep { margin: 0 6px; }
.c2-b .me { color: var(--text1); }
.c2-b .od { white-space: nowrap; }
.c2-b .od i { display: inline-block; width: 6px; height: 6px; margin: 0 5px 1px 1px; border-radius: 50%; background: var(--red); vertical-align: middle; }
.c2-b .od.me { color: var(--red); }
.c2-go { grid-area: go; display: inline-flex; color: var(--text3); }
.c2-go svg.i { width: 14px; height: 14px; }

/* ------------------------------------------------------------------ Calls: the navigator column and the list */
.phead { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ttl { margin: 0; font-size: 24px; line-height: 30px; font-weight: 600; letter-spacing: -.2px; }
.cols { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 24px; margin-top: 20px; align-items: start; }
.side { min-width: 0; }
.search { display: flex; align-items: center; gap: 9px; padding: 0 12px; border: 1px solid var(--border2); border-radius: var(--radius-lg); background: var(--bg); color: var(--text3); }
.search:focus-within { border-color: var(--focus); }
.search svg.i { width: 15px; height: 15px; }
.search input { flex: 1; min-width: 0; height: 36px; border: 0; background: none; outline: none; font-size: 13.5px; color: var(--text1); }
.search input::placeholder { color: var(--text3); }
.ib2 { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-md); color: var(--text2); flex: none; }
a.ib2:hover { background: var(--surface2); color: var(--text1); }
.ib2 svg.i { width: 15px; height: 15px; }
.ib2.off { color: var(--text3); opacity: .4; }
.navr { display: flex; align-items: center; gap: 2px; margin-top: 14px; }
.navr .lbl { min-width: 72px; padding: 0 4px; text-align: center; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--text1); font-variant-numeric: tabular-nums; white-space: nowrap; }
.seg { display: inline-flex; padding: 2px; margin-left: auto; border: 1px solid var(--border2); border-radius: var(--radius-md); }
.seg a { padding: 3px 12px; font-size: 12.5px; line-height: 18px; color: var(--text2); border-radius: 5px; }
.seg a:hover { color: var(--text1); }
.seg a.on { background: var(--surface3); color: var(--text1); }

.month { margin-top: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); }
.month .mh { display: flex; align-items: center; padding: 2px 0 4px 8px; }
.month .mt { font-size: 13px; line-height: 22px; font-weight: 500; color: var(--text1); }
.month .g { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 2px; }
.month .wd { text-align: center; font-size: 12px; line-height: 22px; color: var(--text3); }
.month .dd { height: 31px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 12.5px; line-height: 18px; color: var(--text2); font-variant-numeric: tabular-nums; }
.month .dd b { font-weight: 400; min-width: 24px; padding: 1px 0; text-align: center; border-radius: 6px; }
.month .dd:hover b { background: var(--surface3); }
.month .dd i { width: 4px; height: 4px; border-radius: 50%; background: transparent; }
.month .dd.has i { background: var(--silver); }
.month .dd.has, .month .dd.now { color: var(--text1); }
.month .dd.fut, .month .dd.out:not(.has) { color: var(--text3); }
.month .dd.wk { background: var(--accent-wash); }
.month .dd.wk.l { border-radius: 8px 0 0 8px; }
.month .dd.wk.r { border-radius: 0 8px 8px 0; }
.month .dd.wk.l.r { border-radius: 8px; }
.month .dd.now b { color: var(--text1); font-weight: 600; box-shadow: inset 0 0 0 1.5px var(--silver); }

.filt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.dd2 { position: relative; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border2); border-radius: var(--radius-md); background: var(--bg); font-size: 12.5px; line-height: 18px; color: var(--text1); }
.dd2:focus-within { border-color: var(--focus); }
.dd2 select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; padding: 5px 30px 5px 12px; font-size: 12.5px; line-height: 18px; color: var(--text1); cursor: pointer; max-width: 160px; outline: none; }
.dd2 select option { background: var(--surface2); color: var(--text1); }
.dd2::after { content: ""; position: absolute; right: 12px; top: 50%; width: 6px; height: 6px; margin-top: -5px; border-right: 1.3px solid var(--text2); border-bottom: 1.3px solid var(--text2); transform: rotate(45deg); pointer-events: none; }
.dd2.date { padding-left: 10px; }
.dd2.date::after { display: none; }
.dd2.date svg.i { width: 14px; height: 14px; color: var(--text2); }
.dd2 input[type=date] { border: 0; background: transparent; padding: 4px 8px 4px 0; font-size: 12.5px; line-height: 18px; color: var(--text1); color-scheme: dark; outline: none; }
.js .btn.go { display: none; }
.clear { font-size: 12.5px; color: var(--text2); text-decoration: underline dotted; text-underline-offset: 3px; }
.clear:hover { color: var(--text1); }

/* the list of calls (the Calls page) */
.listcard { padding: 18px 22px 16px; }
.lh { display: flex; align-items: baseline; gap: 10px; padding-bottom: 4px; }
.lh h2 { margin: 0; font-size: 18px; line-height: 24px; font-weight: 600; }
.lh .n { color: var(--text3); font-size: 13px; }
.lh .lh-note { color: var(--text3); font-size: 12.5px; }
.day { margin: 0; padding: 18px 0 6px; color: var(--text2); font-size: 13px; line-height: 18px; font-weight: 600; }
.day span { margin-left: 2px; font-weight: 400; color: var(--text3); }
.lrow { display: grid; grid-template-columns: 52px minmax(0, 1fr) 14px; column-gap: 14px; align-items: start; padding: 11px 12px; margin: 0 -12px; border-radius: var(--radius-md); }
.lrow + .lrow { margin-top: 2px; }
.lrow:hover { background: var(--surface2); }
.lt { font-size: 13px; line-height: 20px; color: var(--text2); font-variant-numeric: tabular-nums; }
.lm { display: flex; flex-direction: column; min-width: 0; }
.lmeta { display: flex; align-items: center; flex-wrap: wrap; font-size: 12.5px; line-height: 20px; color: var(--text3); }
.lmeta .sep { margin: 0 5px; }
.lmeta .on, .crow .on { margin-left: auto; flex: none; font-size: 12px; line-height: 18px; color: var(--text1); border: 1px solid var(--border2); border-radius: var(--radius-pill); padding: 0 8px; white-space: nowrap; }
.ls { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--text1); margin-top: 1px; }
.lg { font-size: 12.5px; line-height: 18px; color: var(--text2); margin-top: 2px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.lgo { padding-top: 22px; display: inline-flex; }
.lgo svg.i { width: 14px; height: 14px; }
.snip { display: block; margin-top: 6px; padding: 7px 12px 8px; border-radius: var(--radius-md); background: var(--paper); border: 1px solid var(--paper-rule); color: var(--paper-ink); }
.snip .hk { display: block; font-size: 12px; line-height: 16px; color: var(--paper-ink2); }
.snip .hk b { font-weight: 600; }
.snip .clk { color: var(--paper-ink3); font-variant-numeric: tabular-nums; }
.snip .hx { display: block; font-family: var(--font-serif); font-size: 14px; line-height: 21px; }
mark { background: rgba(224,162,90,.32); color: inherit; border-radius: 3px; padding: 1px 2px; margin: 0 -2px; box-shadow: inset 0 0 0 1px rgba(224,162,90,.4); }
.ls mark { color: var(--text1); }

/* the compact list on the call page */
.side .list { margin-top: 6px; }
.side .list > * + * { border-top: none; }
.side .day { padding: 18px 12px 6px; }
.wkdiv { display: flex; align-items: baseline; gap: 8px; margin-top: 20px; padding: 14px 12px 0; border-top: 1px solid var(--border); font-size: 13px; line-height: 18px; color: var(--text3); }
.wkdiv b { font-weight: 600; color: var(--text2); }
.side .wkdiv + .day { padding-top: 12px; }
.side .empty { padding: 16px 12px; }
.crow { display: flex; flex-direction: column; padding: 9px 12px 10px; border-radius: var(--radius-md); min-width: 0; }
.crow + .crow { margin-top: 2px; }
.crow:hover { background: var(--hover); }
.crow .cm { display: flex; align-items: center; gap: 9px; font-size: 12.5px; line-height: 18px; color: var(--text3); min-width: 0; }
.crow .cm .t { color: var(--text2); font-variant-numeric: tabular-nums; }
.crow .cm .lb { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crow .cs { font-size: 13.5px; line-height: 19px; font-weight: 500; color: var(--text1); margin-top: 3px; }
.crow .cg { font-size: 12.5px; line-height: 18px; color: var(--text2); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crow.sel { background: var(--surface2); box-shadow: inset 3px 0 0 var(--silver); }
.crow.sel .on { border-color: var(--silver); }

/* ------------------------------------------------------------------ one call */
.call { padding: 22px 26px 26px; }
.back { display: inline-flex; align-items: center; gap: 4px; margin: -4px 0 10px -4px; padding: 2px 6px 2px 2px; border-radius: var(--radius-md); font-size: 12.5px; line-height: 18px; color: var(--text2); }
.back:hover { color: var(--text1); background: var(--surface2); }
.back svg.i { width: 14px; height: 14px; }
.call h2 { margin: 0; font-size: 20px; line-height: 26px; font-weight: 600; letter-spacing: -.2px; }
.facts { margin-top: 5px; color: var(--text2); font-size: 13px; line-height: 20px; font-variant-numeric: tabular-nums; }
.facts .sep { margin: 0 5px; }
.people { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-top: 14px; }
.named { display: flex; flex-wrap: wrap; align-items: baseline; margin-top: 12px; font-size: 13px; line-height: 20px; color: var(--text2); }
.named .k { margin-right: 10px; color: var(--text3); }
.named .d { margin: 0 12px; color: var(--text3); }
.sec { margin-top: 28px; }
.sh { display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px; }
.sh h3 { margin: 0; font-size: 15px; line-height: 22px; font-weight: 600; }
.sh .n { color: var(--text3); font-size: 13px; font-variant-numeric: tabular-nums; }
.paper { background: var(--paper); border: 1px solid var(--paper-rule); border-radius: var(--radius-xl); color: var(--paper-ink); }
.short { padding: 15px 20px 16px; font-family: var(--font-serif); font-size: 15px; line-height: 23px; }
.short p + p { margin-top: 8px; }
.rows li { padding: 10px 0; border-top: 1px solid var(--divider); font-size: 13.5px; line-height: 20px; }
.rows li:first-child { border-top-color: var(--border); }

/* who does what: your rows first; the tick (when you may); the owner's colour square; the due state on the right,
   Open in Tasks under it (on hover where there is one); a done row struck through with who did it */
.trow { display: grid; grid-template-columns: 18px minmax(0, 1fr) 172px; column-gap: 14px; align-items: start; padding: 11px 0 12px; border-top: 1px solid var(--divider); scroll-margin-top: 16px; }
.trow:first-child { border-top-color: var(--border); }
.trow.mine + .trow:not(.mine) { padding-top: 22px; border-top-color: var(--border2); }
.trow > .tk-tick, .trow > .nobox { margin-top: 1px; }
.trow .tt { min-width: 0; }
.trow .tl { font-size: 13.5px; line-height: 20px; color: var(--text1); }
.trow .tl .who b { font-weight: 600; }
.trow .tl .sq, .trow .pw .sq { margin-right: 7px; vertical-align: 1px; }
.trow .tl .sep { margin: 0 6px; color: var(--text3); }
.trow.done .tl .tx { color: var(--text2); text-decoration: line-through; text-decoration-color: var(--text3); }
.trow.done .tl .who b { color: var(--text2); }
.trow .meta { margin-top: 2px; font-size: 12.5px; line-height: 18px; color: var(--text2); }
.trow .meta .sep { margin: 0 5px; }
.trow .meta .u { color: var(--red); }
.trow .meta .doing { color: var(--accent-l); }
.trow .meta .oit-p { display: none; }
.trow .pw { display: none; }
.trow .rc { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.trow:target { background: var(--hover); box-shadow: -10px 0 0 var(--hover), 10px 0 0 var(--hover); }
.oit { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; line-height: 18px; color: var(--text2); white-space: nowrap; }
.oit:hover { color: var(--text1); }
.oit svg.i { width: 13px; height: 13px; color: var(--text3); }
@media (hover: hover) {
  .trow .rc .oit { opacity: 0; transition: opacity .12s; }
  .trow:hover .rc .oit, .trow:focus-within .rc .oit { opacity: 1; }
}
.sh .sync { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; align-self: center; font-size: 12.5px; line-height: 18px; color: var(--text3); }
.sh .sync svg.i { width: 13px; height: 13px; }
.addt { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12.5px; line-height: 18px; color: var(--text2); }
.addt:hover { color: var(--text1); }
.addt svg.i { width: 13px; height: 13px; color: var(--text3); }

/* Decided and Open questions: Make a task on each line (the link shows on hover where there is one) */
.rows li.qx { position: relative; padding-right: 128px; scroll-margin-top: 16px; }
.qx .mk > summary { position: absolute; right: 0; top: 10px; list-style: none; }
.qx .mk > summary::-webkit-details-marker { display: none; }
.mkl { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; line-height: 20px; color: var(--text2); white-space: nowrap; cursor: pointer; }
.mkl:hover, .mk[open] .mkl { color: var(--text1); }
.mkl svg.i { width: 13px; height: 13px; color: var(--text3); }
@media (hover: hover) {
  .qx .mkl { opacity: 0; transition: opacity .12s; }
  .qx:hover .mkl, .qx:focus-within .mkl, .qx .mk[open] .mkl { opacity: 1; }
}
.mk-f { margin: 12px -128px 4px 0; padding: 14px 16px; border: 1px solid var(--border2); border-radius: var(--radius-lg); background: var(--surface2); }
.mk-t { display: flex; }
.mk-t input { flex: 1; min-width: 0; padding: 8px 12px; border: 1px solid var(--border2); border-radius: var(--radius-md); background: var(--bg); color: var(--text1); font-size: 13.5px; line-height: 20px; outline: none; }
.mk-t input:focus { border-color: var(--focus); box-shadow: 0 0 0 3px var(--accent-wash); }
.mk-g { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.mf { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fl { font-size: 12px; line-height: 16px; color: var(--text3); }
.mf .dd2 { width: 100%; }
.mf .dd2 select { width: 100%; max-width: none; }
.mf .tk-date input { width: 100%; }
.mk-b { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.mk-n { display: inline-flex; align-items: center; gap: 7px; margin-right: auto; font-size: 12.5px; line-height: 18px; color: var(--text2); }
.mk-n svg.i { width: 13px; height: 13px; color: var(--text3); }

/* the conversation, on paper, with Find */
.conv { margin-top: 28px; scroll-margin-top: 12px; }
.conv-hd { display: flex; align-items: center; gap: 8px; min-height: 22px; margin-bottom: 10px; }
.conv-hd h3 { margin: 0; font-size: 15px; line-height: 22px; font-weight: 600; }
.conv-hd .n { color: var(--text3); font-size: 13px; font-variant-numeric: tabular-nums; }
.find { margin-left: auto; display: flex; align-items: center; gap: 2px; width: 340px; padding: 3px 4px 3px 12px; background: var(--bg); border: 1px solid var(--border2); border-radius: var(--radius-lg); color: var(--text1); }
.find:focus-within { border-color: var(--focus); box-shadow: 0 0 0 3px var(--accent-wash); }
.find > svg.i { color: var(--text3); margin-right: 6px; width: 15px; height: 15px; }
.find input[type=search] { flex: 1; min-width: 0; height: 28px; border: 0; background: none; outline: none; font-size: 13.5px; color: var(--text1); }
.find input::placeholder { color: var(--text3); }
.find .of { color: var(--text2); font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; margin: 0 4px; }
.find .ib { width: 28px; height: 28px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; color: var(--text2); flex: none; }
.find .ib[hidden] { display: none; }
.find .ib:hover { background: var(--surface2); color: var(--text1); }
.find .ib svg.i { width: 15px; height: 15px; }
.talk { padding: 4px 22px 18px; }
.ln { display: grid; grid-template-columns: 40px 96px minmax(0, 1fr); column-gap: 14px; align-items: baseline; padding: 10px 0 0; }
.ln.run { padding-top: 4px; }
.ln .tm { font-size: 12px; line-height: 24px; color: var(--paper-ink3); font-variant-numeric: tabular-nums; }
.ln .sp { font-size: 12px; line-height: 24px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--paper-ink2); }
.ln .sp.p0 { color: var(--p0); } .ln .sp.p1 { color: var(--p1); } .ln .sp.p2 { color: var(--p2); } .ln .sp.p3 { color: var(--p3); }
.ln .sp.p4 { color: var(--p4); } .ln .sp.p5 { color: var(--p5); } .ln .sp.p6 { color: var(--p6); }
.ln .tx { font-family: var(--font-serif); font-size: 15px; line-height: 24px; color: var(--paper-ink); }
details.gap { border-top: 1px dashed var(--paper-rule2); border-bottom: 1px dashed var(--paper-rule2); margin: 10px 0 0; }
details.gap[open] { border: 0; margin: 0; }
details.gap > summary { list-style: none; display: flex; justify-content: center; padding: 9px 0; cursor: pointer; }
details.gap > summary::-webkit-details-marker { display: none; }
details.gap > summary > span { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; border: 1px solid var(--paper-rule2); border-radius: var(--radius-pill); font-size: 12.5px; line-height: 18px; color: var(--paper-ink2); }
details.gap > summary svg.i { width: 13px; height: 13px; }
details.gap > summary:hover > span { color: var(--paper-ink); }
details.gap[open] > summary { display: none; }
mark.hit { display: inline; margin: 0 -2px; padding: 1px 2px; border: 0; background: rgba(224,162,90,.32); box-shadow: inset 0 0 0 1px rgba(224,162,90,.4); color: var(--paper-ink); scroll-margin: 120px; }
mark.hit.cur { background: rgba(224,162,90,.5); box-shadow: inset 0 0 0 1px rgba(224,162,90,.55), inset 0 -2px 0 var(--ember); }

/* ------------------------------------------------------------------ sign-in, not found, preparing */
.gate-body { min-height: 100vh; display: flex; }
.gate { flex: 1; display: flex; align-items: center; justify-content: center; padding: 32px 16px; }
.gate-card { width: 100%; max-width: 380px; padding: 32px 30px 30px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; text-align: center; }
.gate-brand { display: flex; justify-content: center; color: var(--text1); margin-bottom: 28px; }
.gate-brand svg.lockup { height: 26px; }
.gate-card h1 { font-size: 22px; line-height: 28px; }
.gate-line { margin: 8px 0 24px; color: var(--text2); font-size: 13.5px; line-height: 20px; }
.gate-err { margin: -10px 0 18px; padding: 8px 12px; border-radius: var(--radius-md); background: var(--red-wash); color: var(--text1); font-size: 13px; line-height: 19px; }
.btn.big { padding: 10px 18px; font-size: 14px; line-height: 20px; border-radius: var(--radius-lg); justify-content: center; width: 100%; }
.btn.big svg.g { width: 17px; height: 17px; color: #fff; fill: currentColor; stroke: none; }
.dev { margin-top: 26px; padding-top: 18px; border-top: 1px dashed var(--border2); text-align: left; }
.dev-h { font-size: 12.5px; line-height: 18px; color: var(--text3); margin-bottom: 10px; }
.dev-list { display: flex; flex-direction: column; gap: 6px; }
.dev-list .btn { width: 100%; padding: 6px 10px; font-size: 13px; }
.dev-list .avatar { width: 22px; height: 22px; font-size: 12px; }
.note-page { max-width: 520px; padding: 48px 0; }
.gate-card .note-page { padding: 0; }
.note-page h1 { font-size: 22px; line-height: 28px; }
.note-page p { margin: 8px 0 20px; color: var(--text2); font-size: 14px; line-height: 21px; }

/* ------------------------------------------------------------------ narrower desktop */
@media (max-width: 1100px) {
  .grid { grid-template-columns: minmax(0, 1fr); }
  .col { display: contents; }
  .cols { grid-template-columns: 300px minmax(0, 1fr); }
  .find { width: 260px; }
}
@media (max-width: 860px) and (min-width: 601px) {
  .cols { grid-template-columns: minmax(0, 1fr); }
  .call .back { display: inline-flex; }
}

/* ------------------------------------------------------------------ phone */
@media (max-width: 600px) {
  .shell { display: flex; flex-direction: column; min-height: 100vh; background: none; }
  .main { flex: 1; }
  .sidebar { display: none; }
  .content { padding: 16px 16px 28px; }
  .ptop { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 15; background: var(--bg); }
  .ptop svg.lockup { height: 15px; }
  .ptop .u { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text2); }
  .ptop .u i { width: 7px; height: 7px; }
  .pme { position: relative; }
  .pme > summary { list-style: none; cursor: pointer; }
  .pme > summary::-webkit-details-marker { display: none; }
  .pme-menu { position: absolute; right: 0; top: 36px; z-index: 30; min-width: 190px; padding: 12px 14px; display: flex; align-items: center; gap: 14px; background: var(--surface3); border: 1px solid var(--border2); border-radius: 10px; box-shadow: var(--shadow-pop); font-size: 13px; }
  .pme-menu .me { color: var(--text1); }
  .tabbar { display: grid; grid-template-columns: repeat(3, 1fr); position: sticky; bottom: 0; z-index: 20; height: 72px; padding: 10px 0 0; background: var(--surface); border-top: 1px solid var(--border); }
  .tabbar a { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; color: var(--text3); }
  .tabbar a svg.i { width: 21px; height: 21px; }
  .tabbar a.on { color: var(--text1); }
  .tabbar a.on svg.i { color: var(--silver); }

  /* Today */
  .head { display: block; margin-bottom: 12px; }
  h1 { font-size: 22px; line-height: 28px; }
  .sum { font-size: 12.5px; margin-top: 4px; }
  .sum > span + span::before { margin: 0 6px; }
  .nextbox { display: block; margin: 0 0 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
  .next { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 14px; font-size: 12.5px; line-height: 18px; color: var(--text2); white-space: nowrap; overflow: hidden; }
  .next b { color: var(--text1); font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
  .next .in { color: var(--silver); }
  .next .dot { color: var(--text3); }
  .next .btn { margin-left: auto; }
  .grid { display: flex; flex-direction: column; gap: 0; }
  .card { background: none; border: 0; border-radius: 0; padding: 0; }
  .card + .card, .col + .col .card, .col .card + .card { border-top: 1px solid var(--border); margin-top: 18px; }
  .card .sec-head { padding-top: 16px; }
  .s-onyou .sec-head h2 { font-size: 15px; }
  .cc { grid-template-columns: 56px minmax(0, 1fr) max-content; }
  details.ag { margin: 0 0 14px; padding-left: 12px; }
  .qr { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }

  /* Calls */
  .phead { display: none; }
  .cols { display: flex; flex-direction: column; gap: 18px; margin-top: 0; }
  .calls-index .side { order: 0; }
  .month { display: none; }
  .listcard { background: none; border: 0; padding: 0; }
  .lrow { grid-template-columns: 44px minmax(0, 1fr) 14px; column-gap: 10px; padding: 10px 8px; margin: 0 -8px; }
  .cols:not(.calls-index) .side { display: none; }        /* the call page: the date bar and the day's tabs instead */
  .pnav { display: block; margin: -16px -16px 16px; border-bottom: 1px solid var(--border); }
  .dbar { display: flex; align-items: center; gap: 2px; padding: 10px 16px 6px 10px; }
  .dbar .dlbl { padding: 0 4px; font-size: 15px; line-height: 22px; font-weight: 600; color: var(--text1); white-space: nowrap; }
  .fchip { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 5px 12px 5px 10px; border: 1px solid var(--border2); border-radius: var(--radius-pill); font-size: 12.5px; line-height: 18px; color: var(--text1); white-space: nowrap; }
  .fchip svg.i { width: 14px; height: 14px; color: var(--text2); }
  .ctabs { display: flex; gap: 6px; padding: 4px 16px 0; overflow-x: auto; }
  .ctab { flex: 1 1 0; min-width: 84px; display: flex; flex-direction: column; padding: 5px 2px 9px; border-bottom: 2px solid transparent; }
  .ctab span { font-size: 12px; line-height: 16px; color: var(--text3); }
  .ctab b { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ctab.on { border-bottom-color: var(--silver); }
  .ctab.on span { color: var(--text2); }
  .ctab.on b { color: var(--text1); }
  .call { padding: 0; background: none; border: 0; }
  .call .back { display: none; }
  .call h2 { font-size: 21px; line-height: 27px; }
  .named .k { margin-right: 8px; }
  .short { padding: 13px 16px 14px; }
  .trow { grid-template-columns: 18px minmax(0, 1fr); column-gap: 12px; padding: 12px 0 13px; }
  .trow > .rc, .trow .tl .who { display: none; }
  .trow .pw { display: flex; align-items: center; gap: 0; margin-bottom: 3px; font-size: 12.5px; line-height: 18px; color: var(--text2); }
  .trow.mine .pw b { color: var(--text1); }
  .trow .pw .st { margin-left: auto; }
  .trow .tl { font-size: 14px; }
  .trow .meta .oit-p { display: inline; margin-left: 12px; }
  .sh { flex-wrap: wrap; }
  .sh .sync { display: none; }
  .rows li.qx { padding-right: 0; }
  .qx .mk > summary { position: static; margin-top: 6px; }
  .mk-f { margin-right: 0; padding: 12px; }
  .mk-g { grid-template-columns: 1fr 1fr; }
  .conv-hd { flex-wrap: wrap; row-gap: 10px; position: sticky; top: 49px; z-index: 5; background: var(--bg); padding: 8px 0 10px; margin: -8px 0 0; }
  .find { width: 100%; margin-left: 0; }
  .talk { padding: 2px 16px 16px; }
  .ln { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "sp tm" "tx tx"; column-gap: 8px; padding-top: 14px; }
  .ln .sp { grid-area: sp; font-size: 12.5px; }
  .ln .tm { grid-area: tm; }
  .ln .tx { grid-area: tx; font-size: 15.5px; line-height: 25px; }
  .ln .sp:empty, .ln .tm:empty { display: none; }
  .ln.run { padding-top: 6px; }
  .note-page { padding: 24px 0; }
}

/* View as (only for people with viewAs in people.json): quiet, at the foot of the sidebar and in the phone menu */
.viewas { margin: 0 20px 10px; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text3, #8a8f98); }
.viewas label { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.viewas select { flex: 1; min-width: 0; background: transparent; color: var(--text2, #b4b8bf); border: 1px solid var(--border, #2a2d33); border-radius: 6px; padding: 3px 6px; font: inherit; }
.viewas button { background: transparent; color: var(--text2, #b4b8bf); border: 1px solid var(--border, #2a2d33); border-radius: 6px; padding: 3px 8px; font: inherit; cursor: pointer; }
.pme-menu .viewas { margin: 8px 0; }

/* ------------------------------------------------------------------ the light behind the page (lights.js, the Look)
   One canvas fixed behind everything. Each light shows in one soft area of the window, chosen away from the headings,
   and fades to nothing well inside the edges (the Dome's calm mask). Strength: Quiet is about half of Medium.
   The sidebar and the cards stay opaque, so text never sits on the light; it shows in the gaps and the empty space. */
.bglight { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  --lk: .5; --lg: .9; --lx: 60%; --ly: 100%; --lrx: 75%; --lry: 62%;
  opacity: calc(var(--lg) * var(--lk));
  -webkit-mask-image: radial-gradient(var(--lrx) var(--lry) at var(--lx) var(--ly), #000 0%, rgba(0,0,0,.62) 38%, rgba(0,0,0,.22) 68%, transparent 100%);
  mask-image: radial-gradient(var(--lrx) var(--lry) at var(--lx) var(--ly), #000 0%, rgba(0,0,0,.62) 38%, rgba(0,0,0,.22) 68%, transparent 100%); }
.bglight canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s ease; }
.bglight canvas.on { opacity: 1; }
.shell { position: relative; z-index: 1; }
html[data-strength="medium"] .bglight { --lk: 1; }
html[data-light="none"] .bglight { display: none; }
html[data-light="horizon"] .bglight { --lg: .9; --lx: 60%; --ly: 100%; --lrx: 78%; --lry: 64%; }
html[data-light="meridian"] .bglight { --lg: .85; --lx: 92%; --ly: 64%; --lrx: 40%; --lry: 72%; }
html[data-light="anodized"] .bglight { --lg: .8; --lx: 84%; --ly: 18%; --lrx: 50%; --lry: 62%; }
html[data-light="stream"] .bglight { --lg: .9; --lx: 58%; --ly: 86%; --lrx: 72%; --lry: 50%; }
/* no WebGL: the same idea as one still CSS glow */
html.bg-css .bglight canvas { display: none; }
html.bg-css[data-light="horizon"] .bglight { background: radial-gradient(60% 22% at 60% 100%, rgba(217,220,226,.16), rgba(143,152,255,.10) 40%, transparent 72%); }
html.bg-css[data-light="meridian"] .bglight { background: radial-gradient(12% 50% at 82% 62%, rgba(143,152,255,.18), rgba(70,82,197,.08) 50%, transparent 80%); }
html.bg-css[data-light="anodized"] .bglight { background: radial-gradient(40% 40% at 80% 14%, rgba(217,220,226,.10), rgba(100,112,242,.08) 45%, transparent 75%); }
html.bg-css[data-light="stream"] .bglight { background: radial-gradient(70% 36% at 55% 86%, rgba(217,220,226,.10), rgba(57,135,229,.08) 42%, transparent 70%); }
@media (prefers-reduced-motion: reduce) { .bglight canvas { transition: none; } }
@media print { .bglight { display: none; } }

/* the Look picker: at the foot of the sidebar and in the phone menu, as quiet as View as */
.look { margin: 0 14px 10px 20px; display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text3); }
.look-h { flex: none; margin-right: 2px; }
.look label { display: flex; flex: 1; min-width: 0; }
.look select { width: 100%; min-width: 0; background: transparent; color: var(--text2); border: 1px solid var(--border); border-radius: 6px; padding: 3px 0 3px 3px; font: inherit; }
.look label:first-of-type { flex: 1.15; }
.look select option { background: var(--surface3); color: var(--text1); }
.look button { background: transparent; color: var(--text2); border: 1px solid var(--border); border-radius: 6px; padding: 3px 8px; font: inherit; cursor: pointer; }
html.js .look button { display: none; }
.pme-menu { flex-wrap: wrap; }
.pme-menu .look { margin: 8px 0; flex-basis: 100%; min-width: 230px; }
/* on the phone the text sits on the page itself, not on cards: the light keeps lower and weaker there */
@media (max-width: 900px) {
  .bglight { --lk: .32; }
  html[data-strength="medium"] .bglight { --lk: .6; }
  html[data-light="horizon"] .bglight { --ly: 108%; --lry: 50%; }
  html[data-light="stream"] .bglight { --ly: 96%; --lry: 40%; }
}

/* The person menu (everyone): Background, Show the page of (viewAs only), Sign out */
.vas { position: relative; flex: 1; min-width: 0; }
.vas > summary { list-style: none; display: flex; align-items: center; gap: 10px; cursor: pointer; border-radius: 8px; padding: 2px 4px; margin: -2px -4px; }
.vas > summary::-webkit-details-marker { display: none; }
.vas > summary:hover { background: var(--surface2); }
.vas .who { display: flex; flex-direction: column; min-width: 0; }
.vas .who .me { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vas .who small { font-size: 12px; line-height: 15px; color: var(--text3); white-space: nowrap; }
.vas .chev { width: 12px; height: 12px; margin-left: auto; flex: none; fill: none; stroke: var(--text3); stroke-width: 1.4; transition: transform .15s; }
.vas[open] .chev { transform: rotate(180deg); }
.vas .avatar.other { box-shadow: 0 0 0 2px var(--indigo, #5b63e8); }
.vmenu { position: absolute; left: -8px; bottom: calc(100% + 10px); width: 236px; padding: 6px; border-radius: 10px; background: var(--surface3, #1c1e23); border: 1px solid var(--border2, #33363d); box-shadow: 0 12px 32px rgba(0,0,0,.45); z-index: 30; }
.vmenu form { margin: 0; }
.vmenu .vlabel { font-size: 12px; color: var(--text3); padding: 6px 8px 4px; }
.vmenu .row { width: 100%; display: flex; align-items: center; gap: 8px; padding: 7px 8px; border: 0; border-radius: 7px; background: transparent; color: var(--text1); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.vmenu .row:hover { background: var(--surface2); }
.vmenu .row.on { color: var(--indigo-text, #aab0ff); }
.vmenu .chips { display: flex; flex-wrap: wrap; gap: 4px; padding: 2px 6px 6px; }
.vmenu .chip { border: 1px solid var(--border2, #33363d); background: transparent; color: var(--text2); border-radius: 999px; padding: 3px 9px; font: inherit; font-size: 12px; cursor: pointer; }
.vmenu .chip:hover { color: var(--text1); }
.vmenu .chip.on { border-color: var(--indigo, #5b63e8); color: var(--text1); background: rgba(91,99,232,.14); }
.vmenu .vsep { height: 1px; background: var(--border); margin: 6px 4px; }
.vmenu .vsignout button { width: 100%; text-align: left; padding: 7px 8px; border: 0; border-radius: 7px; background: transparent; color: var(--text2); font: inherit; font-size: 13px; cursor: pointer; }
.vmenu .vsignout button:hover { background: var(--surface2); }
.avatar.sm { width: 20px; height: 20px; font-size: 12px; }
.vas-phone .vmenu { position: static; width: auto; box-shadow: none; border: 0; padding: 4px 0; background: transparent; }

/* ------------------------------------------------------------------ tasks (Today, the Tasks tab, the drawer, New task)
   One row everywhere: the tick (a button: it works without JavaScript), the title, the meta line, the due state, and on
   Today the ⋯ menu. Every control a reader may not use is simply not in the page. */
.box { width: 18px; height: 18px; padding: 0; border-radius: 5px; border: 1.5px solid var(--border2); background: var(--bg); color: var(--text1); flex: none; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.box:hover { border-color: var(--text3); }
.box.on { background: var(--surface3); border-color: var(--text3); }
.box svg.i { width: 12px; height: 12px; stroke-width: 1.8; }
.nobox { width: 18px; height: 18px; flex: none; display: inline-block; }
form.tk-tick { margin: 0; display: flex; }

.tk-list > * + * { border-top: 1px solid var(--divider); }
.tk-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) 172px; grid-template-areas: "box txt st"; column-gap: 14px; align-items: start; padding: 13px 0; scroll-margin-top: 16px; }
.tk-row.has-act { grid-template-columns: 18px minmax(0, 1fr) 172px 30px; grid-template-areas: "box txt st act"; }
.tk-row > .tk-tick, .tk-row > .nobox { grid-area: box; margin-top: 1px; }
.tk-row > .txt { grid-area: txt; min-width: 0; }
.tk-row > .st { grid-area: st; }
.tk-row > .act { grid-area: act; justify-self: end; margin-top: -5px; }
.tk-row .tl { display: block; font-size: 13.5px; line-height: 20px; color: var(--text1); text-wrap: pretty; overflow-wrap: anywhere; }
.tk-row a.tl:hover { text-decoration: underline; text-decoration-color: var(--text3); text-underline-offset: 3px; }
.tk-row.done .tl, .tk-row.done .tl .who { color: var(--text2); }
.tk-row:target { background: var(--hover); }

/* the meta line: each piece carries its own dot, and the dot of a piece that starts a line falls outside the clipped
   edge, so a wrapped line never starts with one */
.tk-m { margin-top: 3px; font-size: 12.5px; line-height: 18px; color: var(--text2); overflow: hidden; }
.tk-m .mr { display: flex; flex-wrap: wrap; margin-left: -.95em; }
.tk-m .mp { white-space: nowrap; }
.tk-m .mp::before { content: "\00b7"; display: inline-block; width: .95em; text-align: center; color: var(--text3); }
.tk-m .mp.from { white-space: normal; }
.tk-m .mi { display: none; }
.tk-m .pr.u { color: var(--red); }
.tk-m .doing { color: var(--accent-l); }
.tk-m .dn { color: var(--text2); }

/* the ⋯ menu (a <details>: it works without JavaScript) and its small forms */
.tk-menu { position: relative; }
.tk-menu > summary { list-style: none; cursor: pointer; }
.tk-menu > summary::-webkit-details-marker { display: none; }
.dots { width: 30px; height: 30px; border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center; color: var(--text3); }
.dots:hover, .tk-menu[open] > .dots { background: var(--surface3); color: var(--text1); box-shadow: inset 0 0 0 1px var(--border2); }
.dots svg.i { width: 16px; height: 16px; }
.tk-menu > .menu { position: absolute; right: 0; top: 36px; z-index: 25; width: 270px; padding: 6px; background: var(--surface3); border: 1px solid var(--border2); border-radius: 10px; box-shadow: var(--shadow-pop); }
.menu form { margin: 0; }
.menu .mi > summary, .menu .mi-a { list-style: none; width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; border-radius: 7px; background: none; color: var(--text1); font: inherit; font-size: 13px; line-height: 18px; text-align: left; cursor: pointer; }
.menu .mi > summary::-webkit-details-marker { display: none; }
.menu .mi > summary:hover, .menu .mi[open] > summary, .menu .mi-a:hover { background: rgba(217,219,227,.07); }
.menu svg.i { width: 15px; height: 15px; color: var(--text2); }
.menu .mf { padding: 4px 10px 10px; }

form.mini { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
form.mini.col { flex-direction: column; align-items: stretch; }
form.mini.col .btn { align-self: flex-end; }
.btn.sm { padding: 3px 10px; font-size: 12.5px; line-height: 18px; }
.btn.primary svg.i { color: #fff; }
form.mini textarea, .nt textarea, .dr-ed textarea { width: 100%; min-width: 0; resize: vertical; padding: 8px 10px; border: 1px solid var(--border2); border-radius: var(--radius-md); background: var(--bg); color: var(--text1); font-size: 13px; line-height: 19px; outline: none; }
form.mini textarea:focus, .nt textarea:focus, .dr-ed textarea:focus, .tk-date input:focus, .tk-in input:focus { border-color: var(--focus); }
textarea::placeholder, .tk-in input::placeholder { color: var(--text3); }
.tk-date input, .tk-in input { padding: 4px 8px; border: 1px solid var(--border2); border-radius: var(--radius-md); background: var(--bg); color: var(--text1); font-size: 12.5px; line-height: 18px; color-scheme: dark; outline: none; }
.dd2.pick select { max-width: 190px; }
.dd2.bare { border-color: transparent; background: transparent; }
.dd2.bare:hover, .dd2.bare:focus-within { border-color: var(--border2); }
.dd2.bare select { padding: 3px 28px 3px 8px; font-size: 13.5px; line-height: 20px; max-width: 220px; field-sizing: content; }
.fv > form.mini:first-child > label.dd2.bare:first-of-type { margin-left: -9px; }       /* the value lines up with the plain ones */
.mute { color: var(--text2); }
.tk-err { margin: 0 0 14px; padding: 8px 12px; border-radius: var(--radius-md); background: var(--red-wash); color: var(--text1); font-size: 13px; line-height: 19px; }
.tk-err.tk-conflict { background: var(--gold-wash); }
.ro-line { margin: -4px 0 16px; font-size: 12.5px; line-height: 18px; color: var(--text2); }

/* Today: the foot of On you and You wait on (All in Tasks; Done, folded) */
.tk-foot { position: relative; min-height: 42px; border-top: 1px solid var(--divider); }
.tk-foot .all { position: absolute; right: 0; top: 0; display: inline-flex; align-items: center; gap: 4px; padding: 12px 0 10px; font-size: 12.5px; line-height: 18px; color: var(--text2); }
.tk-foot .all:hover { color: var(--text1); }
.tk-foot .all svg.i { width: 13px; height: 13px; }
.donef > summary { list-style: none; display: inline-flex; align-items: center; gap: 7px; padding: 12px 0 10px; font-size: 13px; line-height: 18px; color: var(--text2); cursor: pointer; }
.donef > summary::-webkit-details-marker { display: none; }
.donef > summary:hover { color: var(--text1); }
.donef > summary svg.i { width: 13px; height: 13px; color: var(--text3); transition: transform .15s; }
.donef[open] > summary svg.i { transform: rotate(90deg); }
.donef .n { color: var(--text3); font-size: 12.5px; }
.donef > .tk-list { border-top: 1px solid var(--divider); }

/* the Tasks tab: the list, and the drawer (or New task) beside it */
.tk-page { max-width: 940px; }
.tk-page.open { max-width: 1200px; }
.tk-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 32px; margin-bottom: 14px; }
.tk-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
.tk-page.open .tk-wrap { grid-template-columns: minmax(0, 1fr) 452px; }
.tk-lists { min-width: 0; }
.tk-tabs { display: flex; gap: 28px; border-bottom: 1px solid var(--border); }
.tk-tabs a { display: inline-flex; align-items: baseline; gap: 7px; padding: 8px 0 11px; margin-bottom: -1px; border-bottom: 2px solid transparent; font-size: 14px; line-height: 20px; color: var(--text2); white-space: nowrap; }
.tk-tabs a:hover { color: var(--text1); }
.tk-tabs a .n { font-size: 12.5px; color: var(--text3); font-variant-numeric: tabular-nums; }
.tk-tabs a.on { color: var(--text1); font-weight: 600; border-bottom-color: var(--silver); }
.tk-tabs a.on .n { color: var(--text2); font-weight: 400; }
.tk-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 0 4px; }
.tk-filters .dd2 select { max-width: 170px; field-sizing: content; }
.tk-filters .dd2.on { border-color: var(--text3); }
.tk-filters .tk-find { margin-left: auto; flex: 1 1 160px; max-width: 230px; }
.tk-filters .tk-find input { height: 30px; font-size: 12.5px; }
.tk-lists .take { margin: 14px 12px 6px; color: var(--text3); }
.tk-lists .tk-row { padding: 13px 12px 14px; }
.tk-lists .tk-row.sel { background: var(--surface2); border-radius: var(--radius-md); box-shadow: inset 3px 0 0 var(--silver); }
.tk-lists .tk-list > .sel, .tk-lists .tk-list > .sel + * { border-top-color: transparent; }
.tk-lists .tk-empty { margin: 22px 12px; padding: 0; }
.tk-pages { display: flex; gap: 18px; padding: 12px; border-top: 1px solid var(--divider); }

.tk-drawer { min-width: 0; padding: 18px 22px 22px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); }
.tk-back { display: none; }
.dr-h { display: flex; align-items: flex-start; gap: 6px; }
.dr-ttl { flex: 1; min-width: 0; margin: 2px 8px 0 0; font-size: 17px; line-height: 24px; font-weight: 600; letter-spacing: -.1px; text-wrap: pretty; overflow-wrap: anywhere; }
.dr-ic { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.dr-x { width: 30px; height: 30px; border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center; color: var(--text2); }
.dr-x:hover { background: var(--surface2); color: var(--text1); }
.dr-x svg.i { width: 16px; height: 16px; }
.dr-done { margin: 6px 0 0; font-size: 12.5px; line-height: 18px; color: var(--text2); }
.dr-ed { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; margin: 0; }
.dr-ed .dr-ttl-in { font-size: 16px; line-height: 23px; font-weight: 600; }
.ed-b { display: flex; justify-content: flex-end; gap: 8px; }
.fields { display: grid; grid-template-columns: 100px minmax(0, 1fr); column-gap: 12px; align-items: start; margin-top: 14px; }
.fk { padding: 7px 0; font-size: 12.5px; line-height: 20px; color: var(--text3); }
.fv { min-width: 0; min-height: 34px; padding: 5px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 13.5px; line-height: 20px; color: var(--text1); }
.fv > svg.i.lead { width: 14px; height: 14px; color: var(--text2); }
.fv .u { color: var(--red); }
.fv .avatar.sm { width: 22px; height: 22px; font-size: 12px; }
details.sd > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
details.sd > summary::-webkit-details-marker { display: none; }
details.sd[open] { flex-basis: 100%; }
details.sd[open] > summary { margin-bottom: 8px; }
.sdl { color: var(--accent-l); font-size: 12.5px; line-height: 20px; }
a.sdl:hover, details.sd > summary:hover .sdl { text-decoration: underline; text-underline-offset: 3px; }
.tk-seg { display: inline-flex; padding: 2px; border: 1px solid var(--border2); border-radius: var(--radius-md); background: var(--bg); }
.tk-seg button { padding: 4px 13px; border: 0; border-radius: 5px; background: none; color: var(--text2); font-size: 12.5px; line-height: 18px; cursor: pointer; }
.tk-seg button:hover { color: var(--text1); }
.tk-seg button.on { background: var(--surface3); color: var(--text1); font-weight: 500; box-shadow: inset 0 0 0 1px var(--border2); }
.dr-blk { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); scroll-margin-top: 16px; }
.bh { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 13.5px; line-height: 20px; font-weight: 600; }
.bh svg.i { width: 14px; height: 14px; color: var(--text2); }
.bh .n { color: var(--text3); font-size: 12.5px; font-weight: 400; }
.dr-note { margin-bottom: 6px; font-size: 13.5px; line-height: 20px; white-space: pre-wrap; overflow-wrap: anywhere; }
.dr-blk > p.mute { font-size: 13px; margin-bottom: 6px; }
.wo { margin-bottom: 10px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg); }
.wo .tk-row { grid-template-columns: 18px minmax(0, 1fr); grid-template-areas: "box txt"; padding: 11px 0 12px; }
.wo .tk-row > .st { display: none; }
.wo .tk-m .mi { display: inline; }
.wo .tk-m .mi .st { display: inline-flex; vertical-align: top; line-height: 18px; }
.wo .wo-x { padding: 0 0 11px 32px; }
.wb-h { margin: 12px 0 4px; font-size: 12.5px; line-height: 18px; color: var(--text3); }
.wb { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 4px 0; font-size: 13px; line-height: 19px; }
.wb .mute { font-size: 12.5px; }
.cmt { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 10px; padding: 5px 0 8px; }
.cmt .avatar { width: 22px; height: 22px; font-size: 12px; margin-top: -1px; }
.cmt .cb { min-width: 0; }
.ch { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; line-height: 18px; color: var(--text3); }
.ch b { color: var(--text1); font-weight: 500; font-size: 13px; }
.ct { margin-top: 1px; font-size: 13.5px; line-height: 20px; color: var(--text1); white-space: pre-wrap; overflow-wrap: anywhere; }
#comments form.mini { margin-top: 8px; }
.hist li { display: grid; grid-template-columns: 124px minmax(0, 1fr); column-gap: 12px; padding: 4px 0; font-size: 12.5px; line-height: 18px; color: var(--text2); }
.hist .hd { color: var(--text3); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* New task: the same panel, with a form */
.nt { margin-top: 12px; }
.nt .nt-title { font-size: 15px; line-height: 22px; font-weight: 500; }
.nt .fields { margin-top: 8px; }
.nt .fk { padding: 9px 0; }
.nt .fv > .dd2, .nt .tk-in { width: min(100%, 260px); }
.nt .fv > .dd2 select, .nt .tk-in input { width: 100%; max-width: none; }
.nt .tk-date input { width: 160px; }
.nt-l { display: block; margin: 10px 0 6px; font-size: 12.5px; line-height: 18px; color: var(--text3); }
.nt-b { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

@media (max-width: 1100px) {
  .tk-page.open .tk-wrap { grid-template-columns: minmax(0, 1fr) 400px; gap: 20px; }
}
/* narrow windows and phones: the task (or New task) is a page of its own, with a back link to the list */
@media (max-width: 860px) {
  .tk-page.open .tk-wrap { grid-template-columns: minmax(0, 1fr); }
  .tk-page.open .tk-lists, .tk-page.open .tk-head { display: none; }
  .tk-back { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 12px -4px; padding: 2px 6px 2px 2px; border-radius: var(--radius-md); font-size: 13px; line-height: 18px; color: var(--text2); }
  .tk-back:hover { color: var(--text1); }
  .tk-back svg.i { width: 15px; height: 15px; }
  .dr-x { display: none; }
}
@media (max-width: 600px) {
  .tk-page, .tk-page.open { max-width: none; }
  .tk-head { margin-bottom: 8px; }
  .tk-tabs { gap: 20px; overflow-x: auto; }
  .tk-tabs a { gap: 5px; padding: 8px 0 10px; font-size: 13.5px; }
  .tk-filters { gap: 6px; margin: 12px 0 2px; }
  .tk-filters .dd2 select { max-width: 112px; padding-left: 10px; padding-right: 26px; }
  .tk-filters .tk-find { order: 9; width: 100%; margin-left: 0; }
  .tk-lists .take { margin: 12px 0 2px; }
  .tk-lists .tk-row { padding: 12px 0 13px; }
  .tk-lists .tk-row.sel { background: none; box-shadow: none; border-radius: 0; }
  .tk-lists .tk-empty { margin: 18px 0; }
  .tk-pages { padding: 12px 0; }
  .tk-row, .tk-row.has-act { grid-template-columns: 18px minmax(0, 1fr); grid-template-areas: "box txt"; column-gap: 12px; }
  .tk-row.has-act { grid-template-columns: 18px minmax(0, 1fr) 30px; grid-template-areas: "box txt act"; }
  .tk-row.has-act .tk-m { margin-right: -42px; }          /* the ⋯ sits by the title: the meta may run under it */
  .tk-row > .st { display: none; }
  .tk-row .tl { font-size: 14px; line-height: 20px; }
  .tk-m .mi { display: inline; }
  .tk-m .mi .st { display: inline-flex; vertical-align: top; line-height: 18px; }
  .tk-m .mp.from { flex-basis: 100%; }
  .tk-menu > .menu { width: min(300px, calc(100vw - 32px)); }
  .tk-drawer { padding: 0; background: none; border: 0; border-radius: 0; }
  .fields { grid-template-columns: 92px minmax(0, 1fr); column-gap: 10px; }
  .hist li { grid-template-columns: minmax(0, 1fr); }
}