/* 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;
  /* Message and preview text sit a notch larger than they did: at 16.5px
     the thread read noticeably smaller than the phone apps it sits next to
     on a home screen. The 16px floor below still governs focusable
     controls -- these only ever move upward. */
  --m-name:17px; --m-preview:16px; --m-meta:13px; --m-title:17px; --m-msg:17.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-h is the visual viewport while the keyboard is up, so the app's
     bottom edge is the keyboard's top edge. 100dvh otherwise: dvh tracks
     the URL bar, which is the only thing it was ever right about. */
  .app{display:block!important;position:fixed;inset:0;top:var(--app-top,0);height:var(--app-h,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 */
  /* MEASURED on the owner's phone: a band of empty canvas sat between the
     composer and the keyboard. env(safe-area-inset-bottom) is the home
     indicator's clearance, and iOS does NOT collapse it to zero when the
     keyboard opens -- so the composer kept ~34px of padding beneath it in the
     one situation where the keyboard already covers that strip.

     --kb-safe is that inset normally and 0px while the keyboard is up; the
     shell maintains it from visualViewport. Nothing here fires when there is
     no keyboard, so the home indicator keeps its clearance. */
  .composer{padding:6px var(--m-pad-chat) calc(8px + var(--kb-safe, 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:17.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}
  /* 16px is a FLOOR, and the rule above states it as an exact value because
     CSS has no min-font-size. That also caps anything that wants to be larger,
     which is how the composer stayed at 16px after the type scale moved to
     17.5. Raising it here keeps the zoom protection -- 17.5 is above the floor,
     not below it -- and the guard test measures computed style, so it still
     sees a value that cannot trigger the zoom. */
  .cbar textarea{font-size:17.5px!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)}