/* VELZYX mobile design layer.
   iMessage-quality messaging shell + Grok Bot-quality agent UX, in VELZYX's
   own identity. Applies on phones and on coarse-pointer devices up to tablet
   width (a phone in landscape is still a phone), so a desktop multi-pane
   grid can never leak onto a handheld (MOBILE_DESKTOP_MULTI_PANE_LEAK). */
:root{
  --m-pad:16px;            /* screen horizontal padding */
  --m-pad-chat:12px;       /* conversation canvas */
  --m-row:84px;            /* conversation row */
  --m-avatar:48px;
  --m-avatar-gap:14px;
  --m-header:52px;
  --m-sheet-r:28px;
  --m-card-r:18px;
  --m-touch:44px;
  --m-name:17px; --m-preview:15px; --m-meta:13px; --m-title:17px; --m-msg:16.5px;
  --m-section:28px;
}
.vx-ic{display:block;flex:none}
.vx-icon-btn .vx-ic{pointer-events:none}

/* Settings-style rows, every width: the Organization and Settings sheets are the same object on a desktop. */
/* ------------------------------------------------ settings rows (Grok-style hierarchy) */
.m-group{background:var(--surface-2);border-radius:var(--m-card-r);overflow:hidden;margin:0 0 var(--m-section)}
.m-group+.m-group{margin-top:calc(var(--m-section) * -1 + 14px)}
.m-label{font-size:13px;color:var(--ink-3);padding:0 6px 8px;text-transform:none;letter-spacing:0}
.m-row{display:flex;align-items:center;gap:14px;min-height:56px;padding:10px var(--m-pad);width:100%;text-align:left;
  background:transparent;border:0;color:var(--ink);font:inherit;border-bottom:1px solid var(--hairline)}
.m-row:last-child{border-bottom:0}
.m-row:active{background:var(--surface-3)}
.m-row .ic{width:24px;color:var(--ink-2);display:grid;place-items:center;flex:none}
.m-row .txt{flex:1;min-width:0}
.m-row .t{font-size:var(--m-name);font-weight:var(--w-medium)}
.m-row .s{font-size:14px;color:var(--ink-3);margin-top:2px;line-height:1.35}
.m-row .v{font-size:15px;color:var(--ink-3);flex:none;max-width:45%;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-row .chev{color:var(--ink-4);flex:none}
.m-row.danger .t{color:var(--bad)}
.m-hero{display:flex;flex-direction:column;align-items:center;gap:10px;padding:8px 0 22px}
.m-hero .vx-av{width:96px;height:96px;font-size:40px}.m-hero .vx-av svg{width:100%;height:100%}
.m-hero .name{font-size:22px;font-weight:var(--w-bold);letter-spacing:-.4px;text-align:center}
.m-hero .sub{font-size:15px;color:var(--ink-3);text-align:center;max-width:80%}
.m-field{background:var(--surface-2);border-radius:var(--m-card-r);padding:4px var(--m-pad)}
.m-field input,.m-field textarea{background:transparent;border:0;padding:12px 0;font-size:17px;width:100%;box-shadow:none!important;font-family:inherit;line-height:1.35}
.m-field input:focus,.m-field textarea:focus{outline:none;box-shadow:none}
.m-field+.m-field{margin-top:10px}
.m-cta{height:52px;border-radius:26px;font-size:17px;font-weight:var(--w-semi);width:100%;margin-top:14px}

/* Home header outside the phone gate: the same row, in the desktop rail. */
.m-home-top{display:flex;align-items:center;gap:4px}
.m-home-top .spacer{flex:1}
.m-me{position:relative;width:36px;height:36px;border-radius:50%;background:var(--surface-2);color:var(--ink-2);font-weight:var(--w-semi);font-size:14px;display:grid;place-items:center;border:0;font-family:inherit}

@media (max-width:767px), ((pointer:coarse) and (max-width:1024px)){
  /* ------------------------------------------------ root: exactly one viewport wide */
  html,body{width:100%;max-width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
  #root,.app{width:100%;max-width:100%;min-width:0}
  .app{display:block!important;position:fixed;inset:0;height:100dvh;overflow:hidden;background:var(--canvas)}
  /* one surface at a time: the list OR the conversation; nothing parked beside */
  .app>.pane.left,.app>.pane.center{position:absolute;inset:0;width:100%;max-width:100%;
    transform:none!important;box-shadow:none!important;transition:none}
  .app>.pane.left{display:none;z-index:2;padding-top:0}
  .app>.pane.left.open{display:flex;flex-direction:column;justify-content:flex-start}
  .app>.pane.left>.lhead{flex:none;position:relative;z-index:3}
  .app>.pane.center{display:flex;z-index:1}
  .app>.pane.left.open~.pane.center{display:none}
  .app>.pane.right,.app>.computer-dock{display:none!important}
  *{min-width:0}

  /* ------------------------------------------------ home: the conversation list */
  /* The page-inline <style> declares .lhead/.chats AFTER this file at equal
     specificity, so a bare .lhead here loses and the safe-area inset is thrown
     away: on the owner's iPhone the header painted at 20px, under the Dynamic
     Island (MOBILE_HOME_HEADER_MISSING_ON_CURRENT_BUILD). Scope to the pane. */
  .app>.pane.left>.lhead{padding:calc(8px + env(safe-area-inset-top)) var(--m-pad) 6px}
  .m-home-top{display:flex;align-items:center;gap:8px;height:var(--m-touch)}
  .m-home-top .spacer{flex:1}
  .m-me{width:40px;height:40px;border-radius:50%;background:var(--surface-2);color:var(--ink-2);
    display:grid;place-items:center;font-weight:var(--w-semi);font-size:14px;position:relative;letter-spacing:.02em}
  .m-me .dot{position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:50%;background:var(--brand);border:2px solid var(--surface)}
  .lhead .search{margin-top:10px}
  .lhead .search input{height:44px;border-radius:14px;font-size:16px}
  .app>.pane.left>.chats{padding:4px 0 calc(16px + env(safe-area-inset-bottom));overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;flex:1 1 auto;min-height:0}
  .group-hd{padding:14px var(--m-pad) 4px;font-size:12px}
  .chat{padding:0 var(--m-pad);min-height:var(--m-row);border-radius:0;gap:var(--m-avatar-gap)}
  .chat .chat-hit{gap:var(--m-avatar-gap)}
  .chat .vx-av{width:var(--m-avatar);height:var(--m-avatar);font-size:20px}.chat .vx-av svg{width:100%;height:100%}
  .chat .nm{font-size:var(--m-name);font-weight:var(--w-semi);letter-spacing:-.2px}
  .chat .pv{font-size:var(--m-preview);color:var(--ink-3);margin-top:2px;line-height:1.35}
  .chat .tm{font-size:var(--m-meta);color:var(--ink-4)}
  .chat .top{align-items:center}
  .chat .unread-dot{width:9px;height:9px}
  .chat .chat-more{opacity:.5;width:36px;height:36px}
  .chat[aria-current="true"]{background:transparent}
  .chat:active{background:var(--surface-2)}
  .m-empty{padding:60px var(--m-pad);text-align:center;color:var(--ink-3)}

  /* ------------------------------------------------ conversation: iMessage geometry */
  .center{background:var(--surface)}
  .chead{min-height:var(--m-header);height:auto;padding:calc(6px + env(safe-area-inset-top)) 6px 6px 4px;gap:8px;
    border-bottom:1px solid var(--hairline);background:var(--surface)}
  .chead .chname{font-size:var(--m-title);font-weight:var(--w-semi);letter-spacing:-.2px}
  .chead .vx-hint{font-size:13px}
  .chead .wide-toggle{display:none}
  .chead .vx-av{width:36px;height:36px;font-size:15px}.chead .vx-av svg{width:100%;height:100%}
  .thread{padding:10px var(--m-pad-chat) 6px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .vx-msg.me{padding-right:0;margin-right:0}
  .vx-msg.me .vx-bubble{max-width:min(86%, calc(100vw - 2*var(--m-pad-chat) - 4px));box-sizing:border-box}
  .stack{gap:3px;max-width:none}
  .vx-daysep,.vx-newsep{margin:10px 0 6px}
  .vx-msg{gap:8px;margin-top:6px}
  .vx-msg.grouped{margin-top:0}
  .vx-msg .vx-slot{width:28px;padding-top:0;align-self:flex-end}
  .vx-msg .vx-slot .vx-av{width:28px;height:28px;font-size:12px}.vx-msg .vx-slot .vx-av svg{width:100%;height:100%}
  .vx-msg:not(.last) .vx-slot{visibility:hidden}     /* one avatar per cluster, at its end */
  .vx-msg.me .vx-slot{display:none}
  .vx-msg .vx-swipe{max-width:100%}
  .vx-msg .act{display:none}
  .thread .vx-bubble{max-width:80%;padding:9px 13px;font-size:var(--m-msg);line-height:1.38;border-radius:20px;box-shadow:none}
  .thread .vx-msg:not(.me) .vx-bubble{background:var(--surface-2);color:var(--ink);border-bottom-left-radius:20px}
  .thread .vx-msg:not(.me).last .vx-bubble{border-bottom-left-radius:6px}
  .thread .vx-msg.me .vx-bubble{background:var(--ink);color:var(--surface);border-bottom-right-radius:20px}
  .thread .vx-msg.me.last .vx-bubble{border-bottom-right-radius:6px}
  .vx-sender{margin:6px 0 2px 4px;font-size:13px;color:var(--ink-3);font-weight:var(--w-medium)}
  .vx-msg.grouped .vx-sender{display:none}
  .vx-time{font-size:12px;margin-top:2px}
  .vx-msg:not(.last) .vx-time{display:none}
  .vx-sys{font-size:13px;padding:4px 12px;max-width:88%}
  .vx-taskcard,.vx-card{border-radius:var(--m-card-r)}

  /* ------------------------------------------------ composer */
  .composer{padding:6px var(--m-pad-chat) calc(8px + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--hairline)}
  .cbar{border-radius:22px;padding:4px 4px 4px 4px;gap:4px;box-shadow:none;background:var(--surface);border:1px solid var(--hairline-strong)}
  .cbar:focus-within{border-color:var(--ink-3)}
  .cbar textarea{padding:9px 6px;font-size:16.5px;min-height:24px}
  .plusbtn{width:36px;height:36px;color:var(--ink-3)}
  .micbtn{width:34px;height:34px;background:transparent;color:var(--ink-3)}
  .sendbtn{width:34px;height:34px;background:var(--ink);color:var(--surface)}
  .sendbtn:disabled{background:var(--surface-3);color:var(--ink-4)}

  /* ------------------------------------------------ sheets */
  .vx-sheet{left:0!important;right:0;transform:none!important;animation:vx-up-phone .2s var(--ease)}
  @keyframes vx-up-phone{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  .vx-modal,.vx-sheet{inset:auto 0 0 0;width:100%!important;max-width:100%!important;max-height:92dvh;
    border-radius:var(--m-sheet-r) var(--m-sheet-r) 0 0;padding-bottom:env(safe-area-inset-bottom);box-sizing:border-box}
  .vx-modal.m-full{top:calc(env(safe-area-inset-top) + 8px);max-height:none}
  .vx-modal>*{max-width:100%}
  .vx-modal .vx-modal-body,.vx-modal .body{padding:0 var(--m-pad) 16px;overflow-y:auto;overscroll-behavior:contain}
  .vx-modal .vx-modal-head,.vx-modal .head{padding:14px var(--m-pad) 8px}
  .vx-modal h2,.vx-modal .title{font-size:20px;font-weight:var(--w-bold);letter-spacing:-.3px}
  .vx-scrim{background:rgba(0,0,0,.42)}

  /* ------------------------------------------------ sign in: the same family, not a desktop card */
  .overlay{position:fixed;inset:0;min-height:100dvh;display:flex;align-items:flex-start;justify-content:center;padding:calc(env(safe-area-inset-top) + 64px) var(--m-pad) 0;background:var(--surface);overflow-y:auto}
  .overlay .vx-card{width:100%!important;max-width:100%;padding:0!important;border:0;box-shadow:none;background:transparent!important}
  .overlay .vx-card>.row{flex-direction:column;align-items:flex-start!important;gap:14px!important;margin-bottom:10px!important}
  .overlay .vx-card>.row svg{width:44px;height:44px}
  .overlay .vx-card>.row strong{font-size:28px!important;letter-spacing:-.6px!important}
  .overlay .vx-card>.vx-hint{font-size:16px}
  .overlay .vx-col{gap:10px}
  .overlay input{font-size:17px;padding:15px 16px;border-radius:16px;background:var(--surface-2);border:0;box-shadow:none}
  .overlay input:focus{outline:none;box-shadow:0 0 0 2px var(--ink)}
  .overlay button.vx-btn{height:52px;border-radius:26px;font-size:17px;font-weight:var(--w-semi);margin-top:6px}

  .vx-switch{width:50px;height:30px}
  .vx-switch::after{width:24px;height:24px}
  .vx-switch[aria-checked="true"]::after{transform:translateX(20px)}
  .m-version{text-align:center;color:var(--ink-4);font-size:13px;padding:18px 0 8px}
  .m-menu .vx-sheet-item{padding:16px 18px;font-size:17px}

  /* ------------------------------------------------ plugins */
  .plug-top .plug-cats{gap:6px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:12px calc(var(--m-pad) * -1) 0;padding:0 var(--m-pad) 4px}
  .plug-top .plug-cats::-webkit-scrollbar{display:none}
  .plug-installed{min-height:56px;padding:10px var(--m-pad);border-radius:var(--m-card-r);background:var(--surface-2);gap:12px}
  .plug-installed .vx-hint{display:block;margin-left:0;flex:1;font-size:15px;color:var(--ink)}
  .plug-installed .stack{flex:none;width:auto}
  .plug-installed .stack>*{width:22px;height:22px;flex:none}
  .plug-cat{flex:none}
  .vx-modal .vx-eyebrow{text-transform:none;letter-spacing:0;font-size:13px;color:var(--ink-3);font-weight:var(--w-regular)}
  .plug-cat{padding:8px 12px;font-size:14px}
  .plug-row{min-height:64px;padding:8px var(--m-pad);border-radius:0}
  .plug-row .nm{font-size:var(--m-name)}
  .plug-row .bl{font-size:14px}
  .plug-list{margin:0 calc(var(--m-pad) * -1)}
  .plug-h{padding:18px var(--m-pad) 6px}

  /* ------------------------------------------------ computer */
  .vx-computer.sheet .vx-ws-head{min-height:var(--m-header);padding:calc(6px + env(safe-area-inset-top)) 8px 6px}
  .vx-computer.sheet .vx-ws-title{font-size:var(--m-title)}
  .vx-computer.sheet .vx-ws-foot{padding:10px var(--m-pad) calc(12px + env(safe-area-inset-bottom));gap:10px}
  .vx-computer.sheet .vx-ws-foot .vx-btn{height:44px;border-radius:22px;font-size:16px}
  .vx-computer.sheet .vx-ws-bar{padding:6px 10px}
  .vx-computer.sheet .vx-ws-url{height:36px;font-size:16px}
  .vx-ws-idle-title{font-size:18px}
  .vx-ws-idle .vx-hint{font-size:15px;max-width:280px}

  /* ------------------------------------------------ media viewer */
  .vx-lightbox img{max-height:calc(100% - 90px)}
  .vx-lightbox-bar{padding:0 4px}

  /* ------------------------------------------------ misc */
  .vx-icon-btn{width:var(--m-touch);height:var(--m-touch)}
  .vx-btn.sm{height:36px;font-size:14px}
  .vx-input,.vx-textarea,.vx-select{font-size:16px}

  /* iOS zooms the whole page when a focused text control computes under 16px,
     and a zoomed page pans -- which is the sideways drag the owner reported, and
     the reason the chat composer at 15.5px was the worst offender we shipped.
     Chromium does not do this, so no amount of geometry testing could see it.

     16px is a platform floor, not a design choice, so it is stated as one: any
     rule that lowers a focusable field below it reintroduces the drag. The rule
     is guarded by test_mobile_shell_invariants, which measures computed style on
     every focusable control on every surface it visits. */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]),
  textarea, select, [contenteditable=""], [contenteditable="true"]{font-size:16px!important}
  .vx-offline,.vx-update{font-size:14px}
}
/* the product switcher sheet is the same everywhere */
.m-products{display:flex;flex-direction:column;gap:10px;padding:4px 0 8px}
.m-product{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:18px;background:var(--surface-2);text-align:left;color:var(--ink);border:0;font:inherit;width:100%}
.m-product.on{outline:2px solid var(--ink);outline-offset:-2px}
.m-product .mk{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--surface);flex:none}
.m-product .t{font-size:17px;font-weight:var(--w-semi)}
.m-product .s{font-size:14px;color:var(--ink-3);margin-top:1px}
.m-teamstack{display:flex;align-items:center}
.m-teamstack .vx-av{width:30px;height:30px;border:2px solid var(--surface);border-radius:50%;margin-left:-9px;font-size:12px}.m-teamstack .vx-av svg{width:100%;height:100%}
.m-teamstack>:first-child{margin-left:0}
.m-teamstack .more{width:30px;height:30px;border-radius:50%;margin-left:-9px;background:var(--surface-2);border:2px solid var(--surface);display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--ink-2);font-weight:var(--w-semi);letter-spacing:-.02em}

/* Organization + any settings-style sheet, every width */
.m-initials{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--surface-3);color:var(--ink-2);font-size:13px;font-weight:var(--w-semi);letter-spacing:.02em}
.m-inline-btn{border:0;background:var(--ink);color:var(--surface);border-radius:999px;padding:7px 14px;font-size:14px;font-weight:var(--w-semi);flex:none}
.m-linkbox{margin-top:8px;width:100%;font-size:13px;padding:8px 10px;border-radius:10px;border:1px solid var(--hairline);background:var(--surface);color:var(--ink-2)}
.m-org .m-field input{background:transparent;border:0;padding:12px 0;font-size:17px;width:100%;box-shadow:none;flex:1;min-width:0;font-family:inherit}
.m-org .m-field input:focus{outline:none}

.m-teamstack.lg .vx-av{width:56px;height:56px;margin-left:-14px;border-width:3px}
.m-teamstack.lg>:first-child{margin-left:0}
.m-teamstack.lg .more{width:56px;height:56px;margin-left:-14px;font-size:15px;border-width:3px}
.m-screens{padding:4px var(--m-pad)}
.m-screens .vx-eyebrow{display:none}

/* Conversation load states: told apart, never blank */
.vx-loadstate{display:flex;flex-direction:column;align-items:center;gap:8px;padding:28px 20px;text-align:center;color:var(--ink-3)}
.vx-loadstate .t{font-size:17px;font-weight:var(--w-semi);color:var(--ink)}
.vx-loadstate .s{font-size:15px;max-width:320px;line-height:1.4}
.vx-loadstate-error .t{color:var(--bad)}
.vx-msg.queued .vx-bubble{opacity:.7}

/* Build truth belongs in Settings -> About and in Ops, never floating over the
   product (DEBUG_BUILD_CHIP_OVERLAYS_PRODUCT_UI / CHAT_COMPOSER_OBSCURED_BY_DEBUG_DIAGNOSTIC). */
.vx-update{z-index:260}

/* ---------------------------------------------------------------- today ---
   The first thing the owner sees. Built for a phone first: nothing depends on
   hover, nothing scrolls sideways, and every row is a real touch target. */
.today{display:flex;flex-direction:column;min-height:0;height:100%;
  background:var(--canvas)}
.t-head{padding:var(--s5) var(--s4) var(--s3);border-bottom:1px solid var(--hairline);
  background:var(--surface)}
.t-day{font-size:var(--t-xl);font-weight:var(--w-bold);letter-spacing:-.4px}
.t-glance{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.t-chip{font-size:var(--t-xs);color:var(--ink-3);background:var(--surface-2);
  border-radius:999px;padding:4px 10px;white-space:nowrap}
.t-chip b{color:var(--ink);font-weight:var(--w-semi)}
.t-chip.c-needs_you{background:var(--brand-soft);color:var(--ink-2)}
.t-chip.c-overdue b{color:#c2410c}

.t-scroll{flex:1;padding:var(--s3) var(--s4) 96px;overflow-y:auto;
  -webkit-overflow-scrolling:touch}
.t-sec{margin-top:var(--s4)}
.t-h{display:flex;align-items:center;gap:8px;font-size:var(--t-xs);
  text-transform:uppercase;letter-spacing:.7px;color:var(--ink-4);
  font-weight:var(--w-semi);margin:0 2px 8px}
.t-n{color:var(--ink-3)}
.t-list{display:flex;flex-direction:column;gap:8px}

.t-card{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;
  min-height:var(--m-touch);padding:12px 14px;border:1px solid var(--hairline);
  border-radius:var(--r-lg);background:var(--surface);font-family:inherit;
  color:inherit}
.t-card:active{background:var(--surface-2)}
.t-glyph{flex:0 0 auto;width:18px;text-align:center;color:var(--ink-4);
  font-size:15px;line-height:20px}
.t-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.t-title{font-size:var(--t-base);font-weight:var(--w-semi);line-height:1.3;
  overflow-wrap:anywhere}
.t-sub{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;
  font-size:var(--t-sm);color:var(--ink-3)}
.t-when{color:var(--ink-4);font-variant-numeric:tabular-nums}
.t-rep{color:var(--ink-4)}

.t-card.s-completed .t-glyph{color:#15803d}
.t-card.s-working .t-glyph{color:var(--brand)}
.t-card.s-needs_you{border-color:var(--brand);background:var(--brand-soft)}
.t-card.s-needs_you .t-glyph{color:var(--brand);font-weight:var(--w-bold)}
.t-card.s-overdue .t-glyph,.t-card.s-missed .t-glyph{color:#c2410c}
.t-card.s-blocked .t-glyph,.t-card.s-failed .t-glyph{color:#b45309}
.t-card.s-partial .t-glyph{color:#a16207}

.t-prog{display:flex;align-items:center;gap:8px;margin-top:4px;
  font-size:var(--t-xs);color:var(--ink-3);font-variant-numeric:tabular-nums}
.t-bar{flex:1;height:4px;border-radius:999px;background:var(--surface-2);
  overflow:hidden;max-width:180px}
.t-bar i{display:block;height:100%;background:var(--brand)}

.t-empty{text-align:center;padding:48px 16px;color:var(--ink-3)}
.t-empty-t{font-weight:var(--w-semi);font-size:17px;color:var(--ink);
  margin-bottom:6px}

.t-detail{display:flex;flex-direction:column;gap:2px}
.t-row{display:flex;justify-content:space-between;gap:16px;padding:10px 0;
  border-bottom:1px solid var(--hairline);font-size:var(--t-sm)}
.t-row span{color:var(--ink-3)}
.t-row.wrap{flex-direction:column;gap:4px}
.t-row.wrap b{font-weight:var(--w-reg);line-height:1.45}
.t-ev{margin-top:var(--s4)}
.t-ev h4{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.7px;
  color:var(--ink-4);margin-bottom:8px}
.t-eb{display:block;min-height:var(--m-touch);line-height:var(--m-touch);
  padding:0 14px;border:1px solid var(--hairline);border-radius:var(--r-lg);
  background:var(--surface);color:var(--brand);text-decoration:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.t-eb.plain{color:var(--ink-2)}

/* The Stop control. Present only while something is genuinely running, and
   never claiming more than the runtime confirmed. */
.t-stopbar{margin:var(--s3) 0 var(--s2)}
.t-stop{display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;min-height:var(--m-touch);padding:0 18px;border-radius:var(--r-lg);
  border:1px solid #fca5a5;background:#fef2f2;color:#b91c1c;font-family:inherit;
  font-size:var(--t-base);font-weight:var(--w-semi)}
.t-stop:active{background:#fee2e2}
.t-stop[disabled]{opacity:.75}
.t-stop.done{border-color:var(--hairline);background:var(--surface-2);
  color:var(--ink-3)}
.t-stop-dot{width:10px;height:10px;border-radius:2px;background:currentColor;
  flex:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .t-stop{border-color:#7f1d1d;
    background:#2a1212;color:#fca5a5}
}
:root[data-theme="dark"] .t-stop{border-color:#7f1d1d;background:#2a1212;
  color:#fca5a5}

/* ------------------------------------------------------- the Brief ----
 * The five places work rests, above the schedule. The owner used to
 * open this app onto Needs You / Working / Late and have to infer the
 * company from a list of due dates.
 *
 * Finished work is one number, deliberately quiet. The loud things are
 * the ones a person has to do something about, and "blocked outside" is
 * styled down because it resumes by itself. */
.t-brief{display:flex;flex-direction:column;gap:var(--s3);
  padding-bottom:var(--s4);border-bottom:1px solid var(--hairline);
  margin-bottom:var(--s4)}
.t-brief-head{display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;flex-wrap:wrap}
.t-brief-done{font-size:var(--t-sm);color:var(--ink-3)}
.t-brief-done b{color:var(--ink);font-weight:var(--w-semi);
  font-variant-numeric:tabular-nums}
.t-quiet{font-size:var(--t-base);color:var(--ink-3);padding:6px 0}

.t-need{display:flex;flex-direction:column;gap:3px;width:100%;text-align:left;
  min-height:var(--m-touch);padding:12px 14px;border:1px solid var(--hairline);
  border-radius:var(--r-lg);background:var(--surface);font-family:inherit;
  color:inherit}
.t-need:active{background:var(--surface-2)}
.t-need-t{font-size:var(--t-base);font-weight:var(--w-semi);line-height:1.3;
  overflow-wrap:anywhere}
.t-need-c{font-size:var(--t-xs);color:var(--ink-4)}
.t-need-w{font-size:var(--t-sm);color:var(--ink-3);overflow-wrap:anywhere}
.t-need.k-NEEDS_YOU{border-color:var(--brand);background:var(--brand-soft)}
.t-need.k-APPROVAL{border-color:var(--brand)}
.t-need.k-EXCEPTION{border-color:#b45309}
/* Alive, not yours. Quietest of the four on purpose. */
.t-need.k-BLOCKED{opacity:.82}

.t-clients{display:flex;flex-wrap:wrap;gap:6px}
.t-invariant{font-size:var(--t-xs);color:var(--ink-3);padding:10px 12px;
  border:1px solid var(--hairline);border-radius:var(--r-lg);
  background:var(--surface-2)}
.t-invariant b{display:block;color:var(--ink);font-weight:var(--w-semi);
  font-variant-numeric:tabular-nums}
.t-invariant.bad{border-color:#b45309}
.t-invariant.bad b{color:#b45309}
.t-sched{font-size:var(--t-lg);margin-top:var(--s2)}