/* Orbit v19.22: Iliad HQ's visual system (Sherman 9:13-9:16 PM Oct 15, 2026: "it still doesn't look like Iliad HQ").
   Rules and tokens copied from Iliad HQ's styles.css: ink side panel with HQ's nav items and lime marker, the ILIAD wordmark
   with the logo, HQ's signed-in block (.me), Bricolage headings, HQ cards, buttons, chips and inputs. Visual only: no layout logic, call or mic change.
   Light = HQ (default). Dark = the same design in ink: ink surfaces, paper text, lime accent. */
html[data-scheme]{--il-side:#121211;--il-card:var(--o-panel);--il-line:var(--o-hair2);--il-band:var(--o-elev);--il-sh:0 1px 0 rgba(0,0,0,.25)}
html[data-scheme][data-theme="light"]{--il-side:#191918;--il-card:#FAF9F5;--il-line:#b8b7ab;--il-band:#F5F3EE;--il-sh:0 1px 0 rgba(25,25,24,.05)}
html[data-scheme] body.v5{font-family:Hanken,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}

/* ---- the wordmark: logo + ILIAD + italic Orbit (HQ: .wm, .wm-logo, .side .wm span) ---- */
.wm-logo{width:30px;height:30px;object-fit:contain;flex:none;transform:rotate(-12deg)}
html[data-scheme] body.v5 .v5title,html[data-scheme] body.v5 .v5rail-t{display:inline-flex!important;align-items:center;gap:.5em;font:700 15px/1 Bricolage,Hanken,sans-serif!important;letter-spacing:.2em!important;text-transform:uppercase;white-space:nowrap}
html[data-scheme] body.v5 .v5title i,html[data-scheme] body.v5 .v5rail-t i{font:italic 400 17px/1 Instrument,Georgia,serif;letter-spacing:0;text-transform:none;color:var(--o-ac)}
html[data-scheme][data-theme="light"] body.v5 .v5title i{color:#CF1A17}
html[data-scheme] body.v5 .v5title .wm-logo{width:26px;height:26px}

/* ---- side panel = HQ's .side (ink, in both modes) ---- */
html[data-scheme] body.v5 #fRail{background:var(--il-side)!important;border-right:1px solid #000!important;color:#e9e8e3}
html[data-scheme] body.v5 .v5rail-h{height:auto!important;align-items:flex-start!important;padding:14px 8px 0 12px!important;margin-bottom:18px!important}
.v5rail-brand{display:flex;flex-direction:column;align-items:flex-start;gap:7px;min-width:0}
html[data-scheme] body.v5 .v5rail-t{color:#fff!important}
html[data-scheme] body.v5 .v5rail-t i{color:#CAD824}
html[data-scheme] body.v5 .v5rail-brand .hqlink{display:none}
html[data-scheme] body.v5.role-owner .v5rail-brand .hqlink{display:inline-block;height:auto;padding:0;border:0;border-radius:0;font-size:12px;line-height:1.3;color:#b9bab4;text-decoration:none;letter-spacing:.02em}
html[data-scheme] body.v5.role-owner .v5rail-brand .hqlink:hover{color:#fff}
html[data-scheme] body.v5 .v5rail-x,html[data-scheme] body.v5 .v5col{color:#8f918c!important;border-radius:8px}
/* v19.24 (Sherman 9:34 PM Oct 15: "This button should be in line with the <- Iliad HQ"): when the owner-only HQ line shows, the side panel's collapse button (desktop) and close button (phone menu) sit on that line, still on the right. Line = 12px x 1.3; button 32px -> lift by half the difference. */
html[data-scheme] body.v5.role-owner:not(.v5-col) .v5rail-h .v5col,html[data-scheme] body.v5.role-owner:not(.v5-col) .v5rail-h .v5rail-x{margin-top:calc((12px * 1.3 - 32px) / 2)}
html[data-scheme] body.v5 .v5col:hover{background:rgba(255,255,255,.07)!important;color:#fff!important}
html[data-scheme] body.v5 #fRail .fr-b{height:36px!important;min-height:36px!important;border-radius:9px!important;color:#b9bab4!important;font-family:Hanken,sans-serif!important}
html[data-scheme] body.v5 #fRail .fr-b::after{font-size:14.5px!important;font-weight:500!important}
html[data-scheme] body.v5 #fRail .fr-b>svg,html[data-scheme] body.v5 #fRail .fr-b .oi{color:#7f817c;width:17px;height:17px}
html[data-scheme] body.v5 #fRail .fr-b:hover{background:rgba(255,255,255,.06)!important;color:#fff!important}
html[data-scheme] body.v5 #fRail .fr-b:hover>svg{color:#c9cac4}
html[data-scheme] body.v5 #fRail .fr-b[aria-expanded="true"]{background:rgba(202,216,36,.12)!important;color:#fff!important;box-shadow:inset 3px 0 0 #CAD824!important}
html[data-scheme] body.v5 #fRail .fr-b[aria-expanded="true"]>svg{color:#CAD824}
html[data-scheme] body.v5 #fRail .fr-b.muted{color:#7f817c!important}
html[data-scheme] body.v5 #fRail .fr-b .v5cnt{background:#CAD824!important;color:#191918!important;font:700 11.5px/20px Hanken,sans-serif!important;border-radius:0!important}
html[data-scheme] body.v5 #fRail .fr-set{border-top-color:rgba(255,255,255,.09)!important}
html[data-scheme] body.v5 #fRail .fr-set::before{display:none}

/* ---- signed in (HQ's .me), above Settings ---- */
.v5me[hidden]{display:none!important}
.v5me{margin-top:auto;padding:14px 8px 12px;border-top:1px solid rgba(255,255,255,.09);font-size:12.5px;color:#9a9b96;display:grid;grid-template-columns:32px 1fr;column-gap:10px;align-items:center}
.v5me .av{grid-row:1/3;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font:600 12.5px/1 Bricolage,Hanken,sans-serif;letter-spacing:.02em;background:#2c2e32;color:#f1f0eb;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.v5me b{display:block;color:#fff;font-weight:600;font-size:13.5px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v5me>span:not(.av){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v5me .row{grid-column:1/-1;display:flex;gap:16px;margin-top:12px;padding-left:2px}
.v5me .linkbtn{background:none;border:0;padding:0;cursor:pointer;font:500 13px Hanken,sans-serif;color:#a9aaa4;text-decoration:none}
.v5me .linkbtn:hover{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.3);text-underline-offset:3px}
body.v5.v5-col .v5me{grid-template-columns:1fr;justify-items:center;padding:12px 0;font-size:0}
body.v5.v5-col .v5me b,body.v5.v5-col .v5me .row,body.v5.v5-col .v5me>span:not(.av){display:none}
body.v5.v5-col .v5me .av{grid-row:auto}
body.v5.v5-col .v5rail-brand .hqlink{display:none!important}
body.v5.v5-col .v5rail-brand{display:none}
html[data-scheme] body.v5 #fRail .fr-set{margin-top:0!important}

/* ---- top bar: paper on desktop (the wordmark lives in the side panel, like HQ); on phones HQ's ink top bar ---- */
@media (min-width:821px){html[data-scheme] body.v5:not(.v5-col) header.top .brand{visibility:hidden}}
@media (max-width:820px){
 html[data-scheme] body.v5 header.top{background:rgba(25,25,24,.97)!important;border-bottom:1px solid #000!important;color:#fff}
 html[data-scheme] body.v5 header.top .v5title{color:#fff!important}
 html[data-scheme] body.v5 header.top .v5title i{color:#CAD824}
 html[data-scheme] body.v5 header.top .hqlink{color:#b9bab4!important}
 html[data-scheme] body.v5 header.top .v5menu,html[data-scheme] body.v5 header.top .trbtn,html[data-scheme] body.v5 header.top .hbtn{color:#e9e8e3!important}
 html[data-scheme] body.v5 header.top .trbtn{border-color:rgba(255,255,255,.18)!important;background:transparent!important}
}

/* ---- HQ cards, headings, buttons, chips, inputs (main area) ---- */
html[data-scheme] body.v5 .panel,html[data-scheme] body.v5 .sheet>.sheet-in,html[data-scheme] body.v5 .lkwin,html[data-scheme] body.v5 .trwin{border-radius:10px}
html[data-scheme] body.v5 .panel{background:var(--il-card)!important;border:1px solid var(--il-line)!important;box-shadow:var(--il-sh)!important}
html[data-scheme] body.v5 .panel h2,html[data-scheme] body.v5 .sheet h2,html[data-scheme] body.v5 .sheet h3,html[data-scheme] body.v5 .lkwin h2,html[data-scheme] body.v5 .lkwin h3,html[data-scheme] body.v5 .trwin h2,html[data-scheme] body.v5 #fdTitle{font-family:Bricolage,Hanken,sans-serif!important;font-weight:700!important;letter-spacing:-.03em!important;text-transform:none!important;color:var(--o-text)!important}
html[data-scheme] body.v5 .panel h2{font-size:15px!important;line-height:1.3!important;border-bottom-color:var(--il-line)!important}
html[data-scheme] body.v5 .panel h2 .hint{font-family:Hanken,sans-serif;font-weight:400;letter-spacing:0;font-size:12.5px;color:var(--o-dim)}
html[data-scheme] body.v5 .btn{border-radius:7px!important;font-family:Hanken,sans-serif;font-weight:500}
html[data-scheme] body.v5 .btn:not(.primary){background:var(--il-card)!important;border:1px solid var(--il-line)!important;color:var(--o-text)!important}
html[data-scheme] body.v5 .btn:not(.primary):hover{background:var(--o-hover)!important}
html[data-scheme] body.v5 .btn.primary{background:var(--o-text)!important;color:var(--o-bg)!important;border:1px solid var(--o-text)!important}
html[data-scheme][data-theme="light"] body.v5 .btn.primary:hover{background:#CF1A17!important;border-color:#CF1A17!important;color:#fff!important}
html[data-scheme] body.v5 .chip{border-radius:999px!important;font-size:11.5px;font-weight:550;background:var(--o-hover)!important;border:1px solid var(--il-line)!important;color:var(--o-mute)!important}
html[data-scheme] body.v5 .vs select,html[data-scheme] body.v5 .vs textarea,html[data-scheme] body.v5 .vs input:not([type=range]):not([type=checkbox]):not([type=radio]){border-radius:7px!important;border-color:var(--il-line)!important}
html[data-scheme][data-theme="light"] body.v5 .vs select,html[data-scheme][data-theme="light"] body.v5 .vs textarea,html[data-scheme][data-theme="light"] body.v5 .vs input:not([type=range]):not([type=checkbox]):not([type=radio]){background:#fff!important}
html[data-scheme] body.v5 .t-form{border-color:var(--il-line)!important;box-shadow:var(--il-sh)}
html[data-scheme][data-theme="light"] body.v5 .t-form{background:#fff!important}
/* side panel order: nav first, then (pushed down) the signed-in block, then Settings */
html[data-scheme] body.v5 #fRail .v5me{order:98}
html[data-scheme] body.v5 #fRail .fr-set{order:99}
/* the side panel is ink in both modes, so its own text tokens are the dark-mode ones (fixes the olive "N need you" line on light) */
html[data-scheme] body.v5 #fRail{--o-ac-ink:#dbe85a;--o-text:#ffffff;--o-mute:#b9bab4;--o-dim:#8f918c;--o-hair:rgba(255,255,255,.09);--o-hair2:rgba(255,255,255,.14);--o-hover:rgba(255,255,255,.06);--o-cnt-bg:#CAD824;--o-cnt-fg:#191918}

/* v19.26 (Oct 16 2026). Sherman 9:46 PM Oct 15: "In all chat boxes to Iliad across all sites, the color of the user's message should be blue, like the iMessage blue".
   Your own lines in the chat (#txList) and in Transcripts (.hx5-list) are iMessage-blue bubbles on the right: #007AFF light, #0A84FF dark, white text. Iliad's lines unchanged.
   The "You" label stays for screen readers only. */
html[data-scheme] body.v5 #txList li.me,html[data-scheme] body.v5 .hx5-list li.me{display:block!important;width:fit-content;max-width:82%;margin:8px 0 8px auto!important;padding:8px 13px!important;border:0!important;border-radius:18px 18px 5px 18px!important;background:#0A84FF!important;color:#fff!important;list-style:none;line-height:1.4}
html[data-scheme][data-theme="light"] body.v5 #txList li.me,html[data-scheme][data-theme="light"] body.v5 .hx5-list li.me{background:#007AFF!important}
html[data-scheme] body.v5 #txList li.me>b,html[data-scheme] body.v5 .hx5-list li.me>b{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
html[data-scheme] body.v5 #txList li.me a,html[data-scheme] body.v5 #txList li.me i,html[data-scheme] body.v5 .hx5-list li.me span{color:#fff!important}
html[data-scheme] body.v5 #txList li.me.pv{opacity:.75}
#txList li.me .sm.ok svg{stroke:#fff}
#txList li.me .sm.bad{background:#fff}
/* v19.26 (Sherman 9:50 PM Oct 15: "the 3 need you should be to the side of the Jobs, and when collapsed maybe it just shows the number 3"):
   the count is a lime pill at the right end of the Jobs row; on the collapsed icon rail it is a round badge on the icon's top-right corner. Hidden at 0. */
html[data-scheme] body.v5 #fRail #frTasks #v5Cnt:not([hidden]){display:inline-block!important;position:static!important;order:2;margin:0 0 0 auto!important;min-width:20px!important;height:20px!important;padding:0 7px!important;border:0!important;border-radius:999px!important;background:#CAD824!important;color:#191918!important;font:700 11.5px/20px Hanken,sans-serif!important;font-style:normal!important;text-align:center;box-shadow:none!important}
@media (min-width:821px){
  html[data-scheme] body.v5.v5-col #fRail #frTasks{position:relative!important;overflow:visible!important}
  html[data-scheme] body.v5.v5-col #fRail #frTasks #v5Cnt:not([hidden]){display:block!important;position:absolute!important;top:1px!important;right:2px!important;margin:0!important;min-width:17px!important;height:17px!important;padding:0 4px!important;font-size:10.5px!important;line-height:17px!important;border-radius:999px!important}
}

/* v19.27 (Oct 16 2026): phones say "tap", desktops say "click" (HQ suggestion as-mv86fx5od36d5d) */
@media (hover:none) and (pointer:coarse){
body.v5 #talk[data-state="idle"] .v5say-t::after{content:"Not listening · tap Talk to speak"}
body.v5 #talk[data-state="muted"] .v5say-t::after{content:"MUTED · tap here to unmute"}
}
/* v19.27: every dropdown gets its own chevron 14px in from the right edge, text never runs under it (Sherman 10:12 PM Oct 15) */
select:not(#_o):not([multiple]):not([size]){-webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;padding-right:40px!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%238E8E93' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 14px center!important;background-size:12px 12px!important;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
select:not(#_o)::-ms-expand{display:none}

/* v19.27: pinned sites nested under Sites, outline pin, folded until the caret is tapped (Sherman 10:14-10:15 PM Oct 15) */
body.v5 #fRail .fr-pins.folded{display:none}
body.v5 #fRail .fr-ptog{position:relative;z-index:2;align-self:flex-end;flex:none;width:30px;height:30px;margin:var(--ptog-m,-35px) 6px 5px 0;padding:0;border:0;border-radius:8px;background:none;color:var(--il-mute,#8E8E93);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;touch-action:manipulation}
body.v5 #fRail .fr-ptog[hidden]{display:none}
body.v5 #fRail .fr-ptog svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
body.v5 #fRail .fr-ptog.open svg{transform:rotate(90deg)}
body.v5 #fRail .fr-ptog:focus-visible{outline:1px solid var(--il-lime-line);outline-offset:1px}
body.v5.v5-col #fRail .fr-ptog{display:none}
body.v5 #fRail .fr-b.fr-pin{padding-left:30px!important}
body.v5 #fRail .fr-pin .frp-t.frp-pin{width:16px;height:16px;border:0;background:none;border-radius:0;color:var(--il-mute,#8E8E93)}
body.v5 #fRail .fr-pin .frp-pin svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linejoin:round}

/* v19.27 Part C (Sherman 10:19 PM Oct 15, same as HQ): pinned names line up with the other nav labels (measured: other labels start 40px into the row), same type and colour; the pin sits at the far right in the caret column; names truncate only at the pin */
body.v5 #fRail .fr-b.fr-pin{padding-left:40px!important;padding-right:12px!important;gap:11px!important}
body.v5 #fRail .fr-b.fr-pin::after{order:1;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px!important;font-weight:500!important;color:inherit!important}
body.v5 #fRail .fr-pin .frp-t.frp-pin{order:2;flex:none;width:14px;height:14px;margin:0 2px 0 auto}