/* Stride design tokens and interface.
   Concept: tandem. Cobalt is Imran, coral is Hugo; both always carry a text label.
   CSP allows same-origin stylesheets only, and system fonts only (see DESIGN_CHANGES.txt). */
:root{
  color-scheme:light dark;
  --bg:light-dark(#FBFAF6,#14151C);
  --surface:light-dark(#FFFEFB,#1C1E27);
  --sunken:light-dark(#F3F1EA,#101117);
  --ink:light-dark(#161821,#F2F1EC);
  --ink-2:light-dark(#494C59,#BEBFC9);
  --ink-3:light-dark(#646773,#9A9CA9);
  --line:light-dark(#E7E4DB,#2D2F3B);
  --line-strong:light-dark(#CBC7BB,#494C5B);
  --cobalt:light-dark(#1646E8,#9DB1FF);
  --cobalt-fill:light-dark(#1646E8,#3159EE);
  --cobalt-wash:light-dark(#E8EDFE,#20294A);
  --coral:#FF7058;
  --coral-ink:light-dark(#AD3219,#FFA595);
  --coral-wash:light-dark(#FFEBE6,#3A2420);
  --alert:light-dark(#A3241A,#FF9D92);
  --alert-wash:light-dark(#FBEAE7,#3A1F1D);
  --on-fill:#FFFFFF;
  --on-coral:#161821;
  --shadow:0 18px 50px light-dark(rgb(22 24 33 / .16),rgb(0 0 0 / .5));
  --font:"Segoe UI Variable Text","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-display:"Segoe UI Variable Display","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",Arial,sans-serif;
  --r-s:8px;--r-m:12px;--r-l:18px;
  --rail:212px;
  --tabbar:64px;
  --ease:cubic-bezier(.2,.7,.2,1);
  font:400 16px/1.45 var(--font);
  -webkit-text-size-adjust:100%;
}
:root[data-theme="light"]{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);min-height:100dvh;font-variant-numeric:tabular-nums}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0;padding:0}
ul,ol{list-style:none}
h1,h2,h3{font-family:var(--font-display);text-wrap:balance}
h1{font-size:clamp(1.75rem,1.45rem + 1.1vw,2.35rem);font-weight:700;letter-spacing:-.028em;line-height:1.1}
h2{font-size:1.1rem;font-weight:650;letter-spacing:-.012em;line-height:1.25}
h3{font-size:1rem;font-weight:600;letter-spacing:-.006em;line-height:1.3}
a{color:var(--cobalt);text-underline-offset:.16em}
button,input,select,textarea{font:inherit;color:inherit}
button,a,summary,label,input,select,textarea{touch-action:manipulation}
:focus-visible{outline:2.5px solid var(--cobalt);outline-offset:2px;border-radius:4px}
main:focus{outline:none}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.icon{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.muted,small{color:var(--ink-3)}
small{font-size:.8125rem}
.skip{position:fixed;left:12px;top:-60px;z-index:30;background:var(--ink);color:var(--bg);padding:10px 14px;border-radius:var(--r-s)}
.skip:focus{top:12px}

/* Buttons and links */
button,.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:8px 14px;border:1px solid var(--line-strong);border-radius:var(--r-s);background:transparent;color:var(--ink);font-weight:550;font-size:.9375rem;line-height:1.2;text-decoration:none;cursor:pointer;transition:background-color .14s,border-color .14s,transform .14s}
button:hover,.button:hover{background:var(--sunken)}
button:active,.button:active{transform:translateY(1px)}
button:disabled{opacity:.55;cursor:not-allowed}
button[aria-busy="true"]{cursor:progress}
button.primary,.button.primary{background:var(--cobalt-fill);border-color:var(--cobalt-fill);color:var(--on-fill)}
button.primary:hover,.button.primary:hover{background:light-dark(#1038C4,#4369F4)}
button.quiet,.button.quiet{border-color:transparent;color:var(--ink-2)}
button.focus-action{background:var(--coral-wash);border-color:var(--coral);color:var(--coral-ink);font-weight:650;padding-left:9px}
button.focus-action:hover{background:var(--coral);color:var(--on-coral)}
button.focus-action .icon{width:18px;height:18px;stroke-width:2.4}
.icon-button{width:40px;min-width:40px;padding:0;border-color:transparent;color:var(--ink-2)}
.text-link{display:inline-flex;align-items:center;gap:4px;min-height:40px;font-weight:550;font-size:.9375rem;text-decoration:none}
.text-link:hover{text-decoration:underline}
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.error{color:var(--alert);font-size:.9375rem}
p.error,.notice-line{padding:10px 12px;border-radius:var(--r-s);background:var(--alert-wash)}
.notice-line{color:var(--ink);background:var(--sunken);font-size:.9375rem}
.action-error{flex-basis:100%}
.task-notes{white-space:pre-wrap;overflow-wrap:anywhere;color:var(--ink-2)}
pre{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;color:var(--ink-2)}

/* Forms */
label{display:flex;flex-direction:column;gap:5px;font-size:.875rem;font-weight:550;color:var(--ink-2)}
label small{font-weight:400}
input,select,textarea{width:100%;min-height:44px;padding:9px 11px;border:1px solid var(--line-strong);border-radius:var(--r-s);background:var(--surface);color:var(--ink);font-size:1rem;font-weight:400}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline-offset:0}
textarea{min-height:104px;resize:vertical;line-height:1.45}
select[multiple]{min-height:96px}
input[type="checkbox"]{width:22px;height:22px;min-height:0;padding:0;accent-color:var(--cobalt-fill);flex:none}
input[type="date"],input[type="datetime-local"]{min-width:0;-webkit-appearance:none;appearance:none}
label:has(>input[type="checkbox"]){flex-direction:row-reverse;justify-content:flex-end;align-items:flex-start;gap:10px;min-height:44px;padding-block:10px;font-weight:450;color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px}
fieldset{min-width:0;margin:0;padding:12px 0 0;border:0;border-top:1px solid var(--line)}
legend{padding:0 8px 0 0;font-weight:600;font-size:.9375rem}
.editor-row{display:grid;gap:10px;padding-block:12px;border-bottom:1px solid var(--line)}
.stack{display:grid;gap:14px}
.seg{display:inline-flex;gap:2px;padding:3px;border-radius:10px;background:var(--sunken);max-width:100%;overflow-x:auto;scrollbar-width:none}
.seg label{display:block;position:relative;flex:none;font-size:.9rem;color:var(--ink-2);cursor:pointer}
.seg input{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;opacity:0;cursor:pointer}
.seg span{display:flex;align-items:center;justify-content:center;min-height:36px;padding:0 12px;border-radius:7px;white-space:nowrap}
.seg input:checked+span{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:0 1px 2px light-dark(rgb(22 24 33 / .14),rgb(0 0 0 / .5))}
.seg input:focus-visible+span{outline:2.5px solid var(--cobalt);outline-offset:1px}
.field-label{display:block;margin-bottom:5px;font-size:.875rem;font-weight:550;color:var(--ink-2)}
.more-fields>summary{display:flex;align-items:center;min-height:44px;font-weight:550;font-size:.9375rem;color:var(--cobalt);cursor:pointer}
.more-fields[open]>summary{margin-bottom:6px}
.more-fields>div{display:grid;gap:14px}

/* Shell: desktop rail */
header.shell{position:fixed;inset:0 auto 0 0;width:var(--rail);display:flex;flex-direction:column;gap:6px;padding:22px 14px 16px;border-right:1px solid var(--line);background:var(--bg);z-index:5}
.brand{display:block;padding:2px 10px 16px;color:var(--ink)}
.lockup{display:block;height:30px;width:auto}
.lockup .word{fill:currentColor}
.capture{justify-content:flex-start;min-height:42px;margin:0 2px 12px;background:var(--ink);border-color:var(--ink);color:var(--bg)}
.capture:hover{background:var(--ink);opacity:.88}
nav{display:flex;flex-direction:column;gap:2px;flex:1}
nav a,.tool{display:flex;align-items:center;justify-content:flex-start;gap:12px;min-height:42px;padding:0 10px;border:0;border-radius:var(--r-s);background:none;color:var(--ink-2);font-size:.9688rem;font-weight:500;text-decoration:none}
nav a:hover,.tool:hover{background:var(--sunken);color:var(--ink)}
nav a[aria-current]{background:var(--cobalt-wash);color:var(--cobalt);font-weight:650}
.shell-tools{display:flex;flex-direction:column;gap:2px}
.tool[aria-current]{background:var(--cobalt-wash);color:var(--cobalt)}
main{margin-left:var(--rail);padding:34px clamp(24px,3.4vw,56px) 72px;max-width:calc(var(--rail) + 1200px)}
body.signed-out header.shell{display:none}
body.signed-out main{margin:0 auto;max-width:520px;min-height:100dvh;display:grid;align-content:center;padding:32px 24px}

/* Page heads */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.page-head>div:first-child{min-width:0}
.page-head p{color:var(--ink-3);margin-top:4px}
.block{margin-top:30px}
.block-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:8px;border-bottom:1px solid var(--ink)}
.block-head .count{color:var(--ink-3);font-size:.875rem;font-weight:500;margin-left:6px}
.block-head{align-items:center;min-height:36px}
.block-head a,.block-head button{flex:none}
.block-head .text-link{min-height:28px}
.block-head button{min-height:32px;padding:4px 12px;margin-bottom:2px}
.panel>h2:first-child{padding-bottom:8px;border-bottom:1px solid var(--ink)}
.panel{margin-top:30px}
.panel>h2+*{margin-top:10px}
.empty{padding:16px 0;color:var(--ink-3);font-size:.9375rem}
.empty-action{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}

/* The tandem: next step and Hugo as interlocking chevrons */
.tandem{--tip:30px;--gap:11px;display:grid;grid-template-columns:minmax(0,1.72fr) minmax(0,1fr);margin-bottom:6px;min-height:208px}
.stride-block{position:relative;display:flex;flex-direction:column;gap:8px;min-width:0;padding:20px calc(var(--tip) + 22px) 20px 26px}
.stride-block.me{background:var(--cobalt-fill);color:var(--on-fill);clip-path:polygon(0 0,calc(100% - var(--tip)) 0,100% 50%,calc(100% - var(--tip)) 100%,0 100%)}
.stride-block.hugo{margin-left:calc(var(--gap) - var(--tip));padding-left:calc(var(--tip) + 24px);clip-path:polygon(0 0,calc(100% - var(--tip)) 0,100% 50%,calc(100% - var(--tip)) 100%,0 100%,var(--tip) 50%);background:var(--sunken);color:var(--ink)}
.stride-block.hugo.live{background:var(--coral);color:var(--on-coral)}
@supports (clip-path:shape(from 0 0,line to 1px 1px)){
  .stride-block.me{clip-path:shape(from 16px 0,hline to calc(100% - var(--tip) - 14px),curve to calc(100% - var(--tip) + 5px) 9px with calc(100% - var(--tip) - 2px) 0,line to calc(100% - 3px) calc(50% - 9px),curve to calc(100% - 3px) calc(50% + 9px) with calc(100% + 2px) 50%,line to calc(100% - var(--tip) + 5px) calc(100% - 9px),curve to calc(100% - var(--tip) - 14px) 100% with calc(100% - var(--tip) - 2px) 100%,hline to 16px,curve to 0 calc(100% - 16px) with 0 100%,vline to 16px,curve to 16px 0 with 0 0,close)}
  .stride-block.hugo{clip-path:shape(from 10px 0,hline to calc(100% - var(--tip) - 14px),curve to calc(100% - var(--tip) + 5px) 9px with calc(100% - var(--tip) - 2px) 0,line to calc(100% - 3px) calc(50% - 9px),curve to calc(100% - 3px) calc(50% + 9px) with calc(100% + 2px) 50%,line to calc(100% - var(--tip) + 5px) calc(100% - 9px),curve to calc(100% - var(--tip) - 14px) 100% with calc(100% - var(--tip) - 2px) 100%,hline to 10px,curve to 3px calc(100% - 11px) with 0 100%,line to calc(var(--tip) - 3px) calc(50% + 8px),curve to calc(var(--tip) - 3px) calc(50% - 8px) with calc(var(--tip) + 2px) 50%,line to 3px 11px,curve to 10px 0 with 0 0,close)}
}
.block-label{display:flex;flex-wrap:wrap;gap:2px 10px;align-items:baseline;font-size:.875rem;font-weight:600}
.block-label span{font-weight:450;opacity:.86}
.stride-title{padding:0;border:0;background:none;color:inherit;display:block;width:100%;min-height:0;text-align:left;font:650 clamp(1.3rem,1.05rem + .9vw,1.8rem)/1.17 var(--font-display);letter-spacing:-.02em;cursor:pointer;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;white-space:normal}
.stride-title:hover{background:none;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.14em}
.stride-title:focus-visible,.stride-block :focus-visible{outline-color:currentColor;outline-offset:-1px}
.hugo .stride-title{font-size:1.125rem;line-height:1.25;letter-spacing:-.012em}
.stride-facts{display:flex;flex-wrap:wrap;gap:2px 16px;font-size:.9375rem;opacity:.92}
.stride-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:auto;padding-top:8px}
.stride-block.me button,.stride-block.me .button{border-color:rgb(255 255 255 / .5);color:var(--on-fill);background:transparent}
.stride-block.me button:hover{background:rgb(255 255 255 / .14)}
.stride-block.me .stride-title,.stride-block.me .stride-title:hover{background:none}
.stride-block.me button.step-done{background:#fff;border-color:#fff;color:#1646E8}
.stride-block.me button.step-done:hover{background:#EDF1FF}
.stride-block.me .stride-title{border:0}
.stride-block a{color:inherit;font-weight:600}
.stride-block.hugo .text-link{margin-top:auto;align-self:flex-start;text-decoration:underline;text-underline-offset:.18em}

/* Today grid */
.today-grid{display:grid;grid-template-columns:minmax(0,1.72fr) minmax(290px,1fr);gap:0 44px;align-items:start}
.quick-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.quick-add{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:8px;margin-top:22px}
.quick-add select{width:auto}
.head-actions{display:flex;gap:8px;flex-wrap:wrap}
.phone-only{display:none}

/* Task rows */
.tasks{container-type:inline-size}
.task{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;grid-template-areas:"check body more" "check facts more";column-gap:4px;padding:7px 0;border-bottom:1px solid var(--line);align-items:start;transition:opacity .28s var(--ease),transform .28s var(--ease)}
.task-check{grid-area:check}
.task-body{grid-area:body;min-width:0;padding-top:4px}
.task-facts{grid-area:facts;display:flex;flex-wrap:wrap;align-items:center;gap:2px 14px;min-width:0;padding-bottom:4px;font-size:.875rem;color:var(--ink-2)}
.task-more{grid-area:more}
.task-more.icon-button{width:44px;min-height:44px}
.task-title{display:block;width:100%;min-height:0;padding:2px 0;border:0;background:none;text-align:left;font:600 1rem/1.3 var(--font-display);letter-spacing:-.006em;color:var(--ink);white-space:normal;overflow-wrap:anywhere;cursor:pointer}
.task-title:hover{background:none;color:var(--cobalt)}
.task-title:active{transform:none}
.task-context{display:flex;flex-wrap:wrap;gap:0 12px;font-size:.875rem;color:var(--ink-3)}
.task-context .need{color:var(--ink-2);font-weight:550}
.task.is-done .task-title{color:var(--ink-3);text-decoration:line-through;text-decoration-thickness:1px}
.fact-due.overdue{font-weight:650;color:var(--alert)}
.fact-due.soon{font-weight:650;color:var(--ink)}
.fact-priority{font-weight:650;color:var(--ink)}
.task-head{display:none}
.fact-due-cell:empty{display:none}
.state[data-state="queued"]::before{border-color:var(--coral)}
.task-facts .state[data-state="todo"]{display:none}
.fact-action .text-link{min-height:28px}
.task-check>span{display:block;width:44px;height:44px}
@container (min-width:700px){
  .task{grid-template-columns:44px minmax(0,1fr) 118px 88px 142px 44px;grid-template-areas:"check body due owner state more";align-items:center}
  .task-facts{display:contents}
  .task-facts>*{align-self:center;font-size:.875rem;min-width:0}
  .fact-due-cell{grid-area:due}
  .fact-owner-cell{grid-area:owner}
  .fact-state-cell{grid-area:state}
  .fact-extra{display:none}
  .task-facts .state[data-state="todo"]{display:inline-flex}
  .fact-action{grid-column:2;grid-row:2;padding-bottom:4px}
  .task-body{padding-block:4px}
  .task-head{display:grid;grid-template-columns:44px minmax(0,1fr) 118px 88px 142px 44px;column-gap:4px;padding:8px 0 6px;border-bottom:1px solid var(--ink);font-size:.8125rem;font-weight:550;color:var(--ink-3)}
  .task-head span:first-child{grid-column:2}
}
.owner{display:inline-flex;align-items:center;gap:5px;font-weight:550;white-space:nowrap}
.owner svg{width:11px;height:12px;flex:none;fill:currentColor}
.owner-imran svg{color:var(--cobalt)}
.owner-hugo svg{color:var(--coral)}
.owner-hugo .queue-no{font-weight:700}

/* Completion control: the mark's chevron steps forward */
.step{width:44px;height:44px;min-height:44px;padding:0;border:0;background:none;color:var(--line-strong);position:relative}
.step:hover{background:none;color:var(--cobalt)}
.step:active{transform:none}
.step svg{position:absolute;top:12px;width:20px;height:20px;overflow:visible}
.step .a{left:7px;fill:none;stroke:currentColor;stroke-width:8;transition:fill .18s,stroke .18s}
.step .b{left:18px;fill:var(--coral);opacity:0;transform:translateX(-10px)}
.step:hover .a{fill:var(--cobalt-wash)}
.step.stepping .a,.step.done .a{fill:var(--cobalt-fill);stroke:var(--cobalt-fill)}
.step.stepping .b,.step.done .b{opacity:1;transform:none;transition:transform .3s var(--ease),opacity .12s}
.task.completing{opacity:.45}

/* State vocabulary: glyph + word, never colour alone */
.state{display:inline-flex;align-items:center;gap:6px;font-size:.875rem;font-weight:550;color:var(--ink-2);white-space:nowrap}
.state::before{content:"";width:9px;height:9px;flex:none;border-radius:50%;border:2px solid var(--ink-3)}
.state[data-state="todo"]::before{display:none}
.state[data-state="todo"]{color:var(--ink-3);font-weight:450}
.state[data-state="running"]{color:var(--ink);font-weight:650}
.state[data-state="running"]::before{border-color:var(--coral);background:var(--coral)}
.state[data-state="taking"]{color:var(--coral-ink);font-weight:650}
.state[data-state="taking"]::before{border-radius:2px;border-color:var(--coral);background:var(--coral);transform:rotate(45deg)}
.state[data-state="pausing"]::before{width:10px;height:10px;border:0;border-inline:3px solid var(--ink-2);border-radius:0}
.state[data-state="paused"]::before{width:10px;height:10px;border:0;border-inline:3px solid var(--ink-3);border-radius:0}
.state[data-state="review"]{color:var(--cobalt);font-weight:650}
.state[data-state="review"]::before{border-color:var(--cobalt);background:var(--cobalt)}
.state[data-state="needs"]{color:var(--ink);font-weight:650}
.state[data-state="needs"]::before{border-radius:2px;border-color:var(--ink)}
.state[data-state="problem"]{color:var(--alert);font-weight:650}
.state[data-state="problem"]::before{border-radius:0;border-color:var(--alert);transform:rotate(45deg)}
.state[data-state="done"]::before{border-color:var(--cobalt);background:var(--cobalt)}

/* Compact timeline: real deadlines */
.timeline>li{display:grid;grid-template-columns:86px minmax(0,1fr) auto;gap:10px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--line)}
.timeline .when{font-size:.875rem;font-weight:600;color:var(--ink-2)}
.timeline .when.overdue{color:var(--alert)}
.timeline .when.soon{color:var(--ink)}
.timeline .row-link{padding:0;min-height:0;border:0;background:none;text-align:left;justify-content:flex-start;font-weight:500;white-space:normal;overflow-wrap:anywhere;color:var(--ink)}
.timeline .row-link:hover{color:var(--cobalt);background:none}
.inbox-row{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:8px 2px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;text-align:left;font-weight:500;white-space:normal}
.inbox-row span{flex:1;min-width:0}
.inbox-row small{display:block;font-weight:400}
.needs-action{grid-column:2;justify-self:start}

/* Revenue and supporting measures */
.revenue-line{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 8px;margin-top:10px}
.amount{font:700 1.75rem/1.1 var(--font-display);letter-spacing:-.02em}
.meter{position:relative;height:8px;margin:10px 0 6px;border-radius:4px;background:var(--sunken)}
.meter i{position:absolute;inset:0 auto 0 0;width:var(--value);border-radius:4px;background:var(--cobalt-fill)}
.months{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:14px}
.month{display:grid;grid-template-columns:18px minmax(0,1fr);column-gap:7px;font-size:.8125rem;line-height:1.3;color:var(--ink-2)}
.month svg{grid-row:span 3;width:16px;height:18px;margin-top:1px;overflow:visible}
.month.met svg{fill:var(--cobalt-fill)}
.month.below svg{fill:none;stroke:var(--ink-3);stroke-width:9}
.month strong{font-weight:650;color:var(--ink)}
.caption{margin-top:10px;font-size:.8125rem;color:var(--ink-3)}
.measures>li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:.9375rem}
.measures strong{font-weight:650}
.measures small{grid-column:1/-1}
.day-events>li{display:grid;grid-template-columns:62px minmax(0,1fr);gap:8px;padding:8px 0;border-bottom:1px solid var(--line);font-size:.9375rem}
.day-events time{color:var(--ink-3);font-size:.875rem}

/* Goals */
.goals-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);gap:0 44px;align-items:start}
.month-bars{margin-top:8px}
.month-bars>li{display:grid;grid-template-columns:64px minmax(0,1fr) 88px 92px;gap:10px;align-items:center;min-height:40px;border-bottom:1px solid var(--line);font-size:.9375rem}
.month-state{font-size:.8125rem;color:var(--ink-3)}
.block-tools{margin-top:12px}
.month-bars .track{position:relative;height:12px}
.month-bars .bar{position:absolute;inset:0 auto 0 0;width:var(--value);border-radius:0 4px 4px 0;background:var(--cobalt-fill)}
.month-bars .open .bar{background:none;border:2px solid var(--cobalt-fill)}
.month-bars .target{position:absolute;top:-5px;bottom:-5px;left:var(--target);width:2px;background:var(--ink)}
.month-bars .value{text-align:right;font-weight:600}
.ladder{display:flex;flex-wrap:wrap;gap:6px 4px;margin-top:12px;font-size:.875rem}
.ladder li{display:flex;align-items:center;gap:4px;color:var(--ink-3)}
.ladder li+li::before{content:"";width:6px;height:6px;margin-right:3px;border-top:1.5px solid var(--line-strong);border-right:1.5px solid var(--line-strong);transform:rotate(45deg)}
.ladder .now{color:var(--ink);font-weight:700}
.assumption{padding:12px 14px;border:1px dashed var(--line-strong);border-radius:var(--r-m);margin-top:10px;font-size:.9375rem;color:var(--ink-2)}
.assumption strong{color:var(--ink)}
.plain-list>li{padding:8px 0;border-bottom:1px solid var(--line);font-size:.9375rem;overflow-wrap:anywhere}
.goal-row{padding:12px 0;border-bottom:1px solid var(--line)}
.goal-row .figure{font-weight:650}
.goal-row .toolbar{margin-top:6px}
details>summary{cursor:pointer}
.fold>summary{display:flex;align-items:center;min-height:44px;font-weight:550;font-size:.9375rem;color:var(--ink-2)}
.fold>summary::marker{color:var(--ink-3)}

/* Filters */
.filters{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin:16px 0 4px}
.filters input[type="search"]{flex:1 1 200px;width:auto;min-width:0}
.filters .fold{flex-basis:100%}
.filters .fold>div{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,220px));gap:12px;padding-bottom:6px}
.result-count{color:var(--ink-3);font-size:.875rem;margin:8px 0 2px}
.project-group{margin-top:22px}
.project-group>h2{font-size:1rem;padding-bottom:6px;border-bottom:1px solid var(--line-strong)}

/* Calendar */
.calendar-bar{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin-bottom:14px}
.calendar-nav{display:flex;align-items:center;gap:4px;flex:1 1 300px;min-width:0}
.calendar-range{font:650 1.05rem/1.25 var(--font-display);margin-right:auto;min-width:0}
.calendar-source{display:flex;gap:8px;align-items:flex-start;font-size:.9375rem;color:var(--ink-2);padding:10px 12px;background:var(--sunken);border-radius:var(--r-s);margin-bottom:14px}
.calendar-source.problem{background:var(--alert-wash);color:var(--ink)}
.agenda .calendar-day{display:grid;grid-template-columns:76px minmax(0,1fr);gap:14px;padding:12px 0;border-top:1px solid var(--line)}
.agenda .calendar-day:first-child{border-top-color:var(--ink)}
.calendar-date{display:flex;flex-direction:column;line-height:1.1}
.calendar-date b{font:700 1.65rem/1 var(--font-display);letter-spacing:-.02em}
.calendar-date span{font-size:.8125rem;color:var(--ink-3)}
.calendar-day.is-today .calendar-date b{color:var(--cobalt)}
.calendar-entries{display:grid;gap:2px;min-width:0}
.entry{display:grid;grid-template-columns:62px minmax(0,1fr);gap:8px;align-items:baseline}
.entry-when{font-size:.8125rem;font-weight:550;color:var(--ink-3)}
.entry[data-kind="Deadline"] .entry-when{color:var(--ink);font-weight:700}
.calendar-task{display:block;width:100%;min-height:36px;padding:7px 0;border:0;background:none;text-align:left;font-weight:500;white-space:normal;overflow-wrap:anywhere;color:var(--ink)}
.calendar-task:hover{background:none;color:var(--cobalt)}
.entry p{padding:7px 0;font-weight:500;overflow-wrap:anywhere}
.week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden}
.week .calendar-day{min-height:118px;padding:8px;background:var(--bg);overflow-wrap:anywhere;min-width:0}
.week .calendar-spacer{background:var(--sunken)}
.week .calendar-date{flex-direction:row;align-items:baseline;gap:5px;margin-bottom:6px}
.week .calendar-date b{font-size:1.05rem}
.week .entry{grid-template-columns:1fr;gap:0;font-size:.8125rem;padding-block:3px}
.week .entry-when{font-size:.75rem}
.week .calendar-task,.week .entry p{min-height:0;padding:1px 0;font-size:.8125rem;line-height:1.25}

/* Hugo */
.hugo-status{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline}
.hugo-status b{font-weight:650}
.focus-band{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;padding:14px 16px;margin-bottom:6px;border-radius:var(--r-m);background:var(--coral-wash)}
.focus-band p{font-size:.9375rem;color:var(--ink-2)}
.focus-band b{display:block;font:650 1.05rem/1.3 var(--font-display);color:var(--ink)}
.focus-chevrons{display:flex;width:44px;height:26px;position:relative}
.focus-chevrons svg{position:absolute;top:0;width:26px;height:26px}
.focus-chevrons .a{left:0;fill:var(--cobalt-fill)}
.focus-chevrons .b{left:15px;fill:var(--coral);animation:handover 1.6s var(--ease) infinite alternate}
@keyframes handover{from{transform:translateX(-5px)}to{transform:translateX(3px)}}
.queue-item{display:grid;grid-template-columns:54px minmax(0,1fr);gap:0 8px;padding:12px 0;border-bottom:1px solid var(--line)}
.queue-item[draggable="true"]{cursor:grab}
.queue-item.dragover{box-shadow:0 -3px 0 var(--cobalt)}
.queue-no-big{font:700 2rem/1 var(--font-display);letter-spacing:-.03em;color:var(--ink);padding-top:2px}
.queue-item.is-live .queue-no-big{color:var(--coral-ink)}
.queue-body{min-width:0;display:grid;gap:4px}
.queue-line{display:flex;flex-wrap:wrap;gap:2px 14px;align-items:center;font-size:.875rem;color:var(--ink-3)}
.queue-detail{font-size:.9375rem;color:var(--ink-2)}
.queue-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:6px}
.queue-actions .icon-button{border-color:var(--line-strong)}
.result-card{padding:14px 0;border-bottom:1px solid var(--line);display:grid;gap:8px}
.artifact{display:flex;align-items:center;gap:10px;min-height:48px;padding:8px 12px;border:1px solid var(--line-strong);border-radius:var(--r-s);text-decoration:none;font-weight:600;overflow-wrap:anywhere}
.artifact:hover{background:var(--sunken)}
.artifact small{display:block;font-weight:400}
.history>li{display:flex;flex-wrap:wrap;gap:2px 12px;padding:7px 0;border-bottom:1px solid var(--line);font-size:.875rem;color:var(--ink-2)}
.history b{font-weight:600;color:var(--ink)}

/* Calls */
.status-lines{display:grid;gap:4px;font-size:.9375rem}
.status-lines{margin-top:10px}
.status-lines>li span{margin-left:6px}
.status-lines b{font-weight:600}
.call-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;width:100%;min-height:0;padding:12px 2px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;text-align:left;font-weight:400;white-space:normal;justify-content:stretch}
.call-row:hover{background:var(--sunken)}
.call-row:active{transform:none}
.call-who{font:600 1rem/1.3 var(--font-display);overflow-wrap:anywhere}
.call-when{font-size:.875rem;color:var(--ink-3);white-space:nowrap}
.call-meta{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:0 12px;font-size:.875rem;color:var(--ink-3)}
.call-note{grid-column:1/-1;font-size:.9375rem;color:var(--ink-2);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.call-crm{grid-column:1/-1;margin-top:3px}
.client-pick{display:grid;gap:8px;padding:12px 0;border-block:1px solid var(--line)}
.client-pick b{font-weight:650}
.client-result{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
.client-result small{display:block}

/* Sources */
.source{padding:14px 0;border-bottom:1px solid var(--line);display:grid;gap:6px}
.source-head{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;justify-content:space-between}
.source-states{display:flex;flex-wrap:wrap;gap:2px 18px;font-size:.875rem;color:var(--ink-2)}
.source-states b{font-weight:600;color:var(--ink)}
.source p{font-size:.9375rem;overflow-wrap:anywhere}
.settings-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 44px;align-items:start}
.source-review-list>li{display:grid;gap:6px;padding:14px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
.chips{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:.875rem;color:var(--ink-3)}
.tag{font-size:.875rem;color:var(--ink-3)}
.activity-list>li{padding:6px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
.activity-list summary{min-height:32px;font-size:.9375rem}
.plan-item{display:block;padding:12px 0}
.plan-item h3{margin-bottom:2px}

/* Sheets: right-hand drawer on desktop, bottom sheet on phone */
dialog{position:fixed;inset:0 0 0 auto;width:min(540px,100vw);height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;border-left:1px solid var(--line);background:var(--bg);color:var(--ink);box-shadow:var(--shadow);overflow:hidden}
dialog[open]{display:flex;flex-direction:column;animation:sheet-side .24s var(--ease)}
dialog::backdrop{background:light-dark(rgb(22 24 33 / .38),rgb(0 0 0 / .6))}
@keyframes sheet-side{from{transform:translateX(24px);opacity:.4}}
@keyframes sheet-up{from{transform:translateY(40px);opacity:.4}}
.sheet-head{display:flex;align-items:flex-start;gap:8px;padding:16px 12px 10px 22px;border-bottom:1px solid var(--line)}
.sheet-head h2{flex:1;min-width:0;padding-top:7px;font-size:1.2rem;font-weight:680;letter-spacing:-.018em;overflow-wrap:anywhere}
.sheet-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px 22px 20px;display:grid;gap:14px;align-content:start}
.sheet-body>form{display:contents}
.sheet-foot{position:sticky;bottom:-20px;margin:0 -22px -20px;padding:12px 22px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--bg);display:flex;flex-wrap:wrap;gap:8px;z-index:1}
.sheet-foot button{flex:1 1 auto}
.sheet-foot .quiet{flex:0 0 auto}
.sheet-list{display:grid;gap:0}
.sheet-list>button,.sheet-list>a{justify-content:flex-start;width:100%;min-height:46px;padding:0 2px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;font-weight:500;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:10px}
.sheet-list>button:hover{background:var(--sunken)}
.facts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 16px;font-size:.9375rem}
.facts dt{color:var(--ink-3)}
.facts dd{overflow-wrap:anywhere}
.sheet-section{display:grid;gap:4px}
.sheet-section h3{font-size:.875rem;color:var(--ink-3);font-weight:600}
.source-list>li>button,.source-list>li>a{min-height:40px;padding:6px 0;border:0;background:none;text-align:left;justify-content:flex-start;white-space:normal;color:var(--cobalt);font-weight:500;overflow-wrap:anywhere}

/* Toast */
#notice{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);display:none;align-items:center;gap:10px;width:max-content;max-width:min(560px,calc(100vw - 32px));padding:8px 8px 8px 16px;border-radius:var(--r-m);background:var(--ink);color:var(--bg);box-shadow:var(--shadow);z-index:20;font-size:.9375rem}
#notice.visible{display:flex;animation:notice-in .2s var(--ease)}
#notice.is-error{background:var(--alert);color:light-dark(#FFFFFF,#14151C)}
#notice span{flex:1;min-width:0;padding-block:6px;overflow-wrap:anywhere}
#notice button{min-height:36px;border-color:transparent;background:transparent;color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:.16em}
#notice button:hover{background:rgb(128 128 128 / .22)}
#notice .icon-button{width:36px;min-width:36px;text-decoration:none}
@keyframes notice-in{from{transform:translate(-50%,10px);opacity:0}}

/* Signed out */
.signin{display:grid;gap:14px;justify-items:start}
.signin .lockup{height:44px;color:var(--ink);margin-bottom:12px}
.signin p{color:var(--ink-2)}

/* Tablet */
@media (max-width:1180px){
  .today-grid,.goals-grid,.settings-grid{grid-template-columns:minmax(0,1fr)}
  .tandem{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
}

/* Phone composition */
@media (max-width:760px){
  :root{--tabbar:62px}
  header.shell{inset:auto 0 0 0;width:auto;height:calc(var(--tabbar) + env(safe-area-inset-bottom));padding:0 0 env(safe-area-inset-bottom);flex-direction:row;border-right:0;border-top:1px solid var(--line);background:var(--surface)}
  header.shell::before{content:"";position:fixed;inset:0 0 auto 0;height:calc(46px + env(safe-area-inset-top));background:var(--bg);border-bottom:1px solid var(--line)}
  .brand{position:fixed;left:16px;top:calc(11px + env(safe-area-inset-top));padding:0}
  .lockup{height:24px}
  nav{flex-direction:row;gap:0}
  nav a{flex:1 1 0;min-width:0;flex-direction:column;justify-content:center;gap:2px;min-height:var(--tabbar);padding:0;border-radius:0;font-size:.7188rem;font-weight:550}
  nav a[aria-current]{background:none;color:var(--cobalt);font-weight:700;box-shadow:inset 0 2px 0 var(--cobalt)}
  .shell-tools{position:fixed;right:6px;top:calc(2px + env(safe-area-inset-top));flex-direction:row;gap:0}
  .tool{width:44px;min-height:44px;padding:0;justify-content:center}
  .tool span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .capture{position:fixed;right:14px;bottom:calc(var(--tabbar) + env(safe-area-inset-bottom) + 14px);width:58px;height:58px;min-height:58px;margin:0;padding:0;justify-content:center;border:0;border-radius:18px;background:var(--cobalt-fill);color:var(--on-fill);box-shadow:0 8px 22px light-dark(rgb(22 70 232 / .34),rgb(0 0 0 / .55));z-index:6}
  .capture:hover{background:var(--cobalt-fill);opacity:1}
  .capture .icon{width:28px;height:28px;stroke-width:2.2}
  .capture span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  main{margin:0;padding:calc(62px + env(safe-area-inset-top)) 16px calc(var(--tabbar) + env(safe-area-inset-bottom) + 92px)}
  .page-head{margin-bottom:14px;gap:10px}
  .quick-add,.desktop-only{display:none}
  .phone-only{display:block}
  .block,.panel{margin-top:24px}
  button,.button,.text-link{min-height:44px}
  .icon-button{width:44px;min-width:44px}
  .seg span{min-height:40px}
  .tandem{--tip:20px;grid-template-columns:minmax(0,1fr);min-height:0;margin-inline:-4px}
  .stride-block{padding:15px calc(var(--tip) + 14px) 15px 18px}
  .stride-block.hugo{display:none}
  .stride-title{-webkit-line-clamp:4;line-clamp:4}
  .hugo-strip{--tip:18px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 8px;align-items:center;margin:8px -4px 0;padding:9px calc(var(--tip) + 10px) 9px 16px;background:var(--sunken);color:var(--ink);text-decoration:none;min-height:56px;clip-path:polygon(0 0,calc(100% - var(--tip)) 0,100% 50%,calc(100% - var(--tip)) 100%,0 100%);border-radius:12px 0 0 12px}
  .hugo-strip.live{background:var(--coral);color:var(--on-coral)}
  .hugo-strip b{display:block;font-size:.875rem;font-weight:650}
  .hugo-strip span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;font-size:.9375rem}
  .timeline>li{grid-template-columns:82px minmax(0,1fr);grid-template-rows:auto auto;gap:0 8px;padding:2px 0;align-items:start}
  .timeline .when{padding-top:11px}
  .timeline .row-link{grid-column:2;grid-row:1/3;align-self:center;min-height:44px;padding-block:9px;font-size:.9688rem}
  .timeline .owner{grid-column:1;grid-row:2;font-size:.8125rem;padding-bottom:8px;color:var(--ink-3)}
  .task-title{min-height:40px;padding-block:6px}
  .block-head .text-link,.block-head button{min-height:44px;margin:0}
  .block-head .text-link{min-width:44px;justify-content:flex-end}
  .fact-action .text-link{min-height:44px}
  .months{gap:6px}
  .month-bars>li{grid-template-columns:56px minmax(0,1fr) 84px;gap:0 8px;padding-block:6px}
  .month-state{grid-column:1/-1}
  .filters{gap:8px}
  .filters input[type="search"]{flex-basis:100%}
  .grid{gap:12px 10px}
  .agenda .calendar-day{grid-template-columns:50px minmax(0,1fr);gap:10px}
  .entry{grid-template-columns:50px minmax(0,1fr)}
  .calendar-task{min-height:44px;padding:10px 0}
  .week{display:block;background:none;border:0;border-radius:0}
  .week .calendar-spacer,.week .calendar-day.is-empty{display:none}
  .week .calendar-day{display:grid;grid-template-columns:50px minmax(0,1fr);gap:10px;min-height:0;padding:12px 0;border-top:1px solid var(--line)}
  .week .calendar-date{flex-direction:column;gap:0;align-items:flex-start;margin:0}
  .week .calendar-date b{font-size:1.65rem}
  .week .entry{grid-template-columns:50px minmax(0,1fr);gap:8px;font-size:1rem}
  .week .entry-when{font-size:.8125rem}
  .week .calendar-task,.week .entry p{min-height:44px;padding:10px 0;font-size:1rem}
  .week .no-entries{display:none}
  dialog{inset:auto 0 0 0;width:100%;height:auto;max-height:calc(100dvh - 28px);border:0;border-radius:var(--r-l) var(--r-l) 0 0}
  dialog[open]{animation-name:sheet-up}
  .sheet-head{position:relative;padding:18px 8px 8px 16px}
  .sheet-head::before{content:"";position:absolute;left:50%;top:7px;width:36px;height:4px;margin-left:-18px;border-radius:2px;background:var(--line-strong)}
  .sheet-body{padding:14px 16px 16px}
  .sheet-foot{bottom:-16px;margin:0 -16px -16px;padding-inline:16px}
  #notice{bottom:calc(var(--tabbar) + env(safe-area-inset-bottom) + 84px);width:calc(100vw - 32px)}
  .activity-list summary{min-height:44px;display:flex;align-items:center}
  .queue-item{grid-template-columns:42px minmax(0,1fr)}
  .queue-no-big{font-size:1.6rem}
  .queue-actions{gap:4px}
  .queue-actions button:not(.icon-button){padding-inline:10px}
  .focus-band{align-items:start}
}
@media (max-width:374px){
  .seg span{padding:0 10px}
  .months{grid-template-columns:minmax(0,1fr)}
  .month{grid-template-columns:18px 56px minmax(0,1fr) auto;align-items:baseline}
  .month svg{grid-row:auto}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
@media (forced-colors:active){
  .stride-block{border:1px solid CanvasText;clip-path:none!important}
  .step svg,.owner svg{forced-color-adjust:auto}
}