per physical item, each with its own gPhotoPicker. The sheet is deliberately the TALLEST thing in the officer app — at 360x800 with three issued items it scrolls — so every item is drawn as a self-contained card with its own number ("2 / 3"): the officer has to be able to tell at a glance how much is left, and a run of undifferentiated fields on a scrolling sheet is where people give up and call dispatch instead. All from tokens, so both themes follow. ============================================================================================== */ .geq-sheet{max-width:520px} .geq-lead{margin:-4px 0 14px;font-size:13px;line-height:1.5;color:var(--muted)} .geq-lead b{color:var(--ink)} .geq-item{border:1px solid var(--line);border-radius:14px;padding:12px;margin-bottom:12px;background:var(--panel,transparent)} .geq-h{display:flex;align-items:center;gap:10px;margin-bottom:10px} .geq-ic{flex:none;width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center; background:var(--navy);color:#fff} .geq-ic svg{width:17px;height:17px} .geq-t{flex:1 1 auto;min-width:0;display:block} .geq-t b{display:block;font-size:14.5px;line-height:1.3;color:var(--heading,var(--ink));word-break:break-word} .geq-t small{display:block;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)} .geq-tag{font-family:var(--font-mono,ui-monospace,monospace);font-size:11.5px;font-weight:600;color:var(--muted)} /* The counter is a progress cue, not a label — mono so "2 / 3" and "11 / 12" hold the same width. */ .geq-n{flex:none;font-family:var(--font-mono,ui-monospace,monospace);font-size:11px;color:var(--muted)} .geq-chg{display:flex;align-items:center;gap:10px;margin-bottom:10px} .geq-chg[hidden]{display:none} .geq-chg label{flex:1 1 auto;font-size:12.5px;font-weight:700;color:var(--muted);margin:0} /* The % sits INSIDE the field's border rather than beside it: "80" floating next to a stray % sign reads as two controls, and this is the one number the dispatcher actually asked for. */ .geq-pct{flex:none;display:inline-flex;align-items:center;gap:2px;border:1px solid var(--line);border-radius:12px; padding-right:10px;background:var(--card,#fff)} .geq-pct input{width:84px;min-height:var(--tap,44px);border:0;background:transparent;padding:0 4px 0 12px; font-family:inherit;font-size:15px;font-weight:700;color:var(--ink);text-align:right} .geq-pct input:focus{outline:none} .geq-pct:focus-within{border-color:var(--navy-2,#005080);box-shadow:0 0 0 3px rgba(0,80,128,.16)} .geq-pct i{font-style:normal;font-size:13px;font-weight:700;color:var(--muted)} .geq-cond{margin-bottom:11px} .geq-cond button{min-height:var(--tap,44px)} /* Damaged/Missing are not errors to be shouted, but they are not the neutral choice either — selecting one is what opens the note field the whole flag path depends on. */ .geq-cond button[data-c="damaged"].on{background:var(--amber,#e08600);border-color:var(--amber,#e08600);color:#1e1400} .geq-cond button[data-c="missing"].on{background:var(--red,#e11d2a);border-color:var(--red,#e11d2a);color:#fff} .geq-item .geq-note{margin-top:10px;margin-bottom:0} .geq-item .geq-note[hidden]{display:none} [data-theme="dark"] .geq-item{background:rgba(255,255,255,.02)} [data-theme="dark"] .geq-pct{background:#0e1520;border-color:#22394d} /* ══ 21. THE DISCORD COMPOSER — ＋ tray and typing mode ══════════════════════════════════════════ Owner: "match the messaging tab to discord — a hidden menu, so there is more space for typing." The screenshot behind that: keyboard up, and the officer can see two lines of conversation. MEASURED at 360x800 with a thread open, BEFORE this section: .ghead 58.6 + .gth2 69 + .gth2-acts 61 + .gnav 60 = 248.6px of permanent chrome, leaving #g-thread 388px — and that is before the keyboard takes its ~300. Discord in the same place shows one slim header line and nothing else. ── 21a. The legacy rule that was eating the composer's whole skin ──────────────────────────── Section 2's pre-rebuild `.g-compose button{background:var(--navy);color:#fff;border-radius:12px; height:48px;padding:0 18px}` is (0,1,1). Every control in the rebuilt bar — `.gcx-b`, `.gfab` — is (0,1,0), so the LEGACY rule won every one of those properties no matter how far down the file the modern one sits. MEASURED at both 360 and 375: #g-emoji / the paperclip / the camera came out 38x48 painted rgb(3,43,73) with border-radius 12px, and .gfab 46x48 flat navy with radius 12px — i.e. the round transparent chips and the round gradient FAB the rebuild designed were never on screen; the bar was a row of navy blocks. (The earlier note in section 9 recorded this as "38x48 ovals"; it is not an oval, the radius is overridden too.) Restating them here at (0,2,0) is the smallest fix that cannot break an unseen consumer of the legacy block — nothing is deleted. Do NOT "fix" this by adding another bare `.gcx-b` rule; it will lose the same way. */ .g-compose .gcx-b{width:38px;height:38px;padding:0;border-radius:50%;background:transparent;color:var(--muted);font-weight:400;box-shadow:none;position:relative} .g-compose .gcx-b:active{background:var(--gb-press)} /* ★ TAP FLOOR. Restoring the designed 38px height costs the accidental 44 the legacy `height:48px` was giving these chips, so the house ::after overlay (section 14's trick) has to put it back: the key stays 38px painted, the finger gets 44x44. .gcx does not clip — the overlay really is hit-testable, PROVED with elementFromPoint 4px above the painted box at 360 and 375. */ .g-compose .gcx-b::after{content:"";position:absolute;left:-3px;right:-3px;top:-3px;bottom:-3px} .g-compose .gfab{width:46px;height:46px;padding:0;border-radius:50%;color:#fff;background:var(--grad-primary,linear-gradient(90deg,#005080,#0a6bb0));box-shadow:0 4px 14px rgba(0,80,128,.3)} /* …and the recording state has to be re-stated AFTER the line above, or a running voice note would lose its red. Same specificity + later would already do it; +1 class makes it unambiguous. */ .g-compose .gfab.recording{background:var(--red)} [data-theme="dark"] .g-compose .gfab{box-shadow:0 4px 14px rgba(0,0,0,.45)} /* ── 21b. The ＋ key ───────────────────────────────────────────────────────────────────────────── One control at the head of the field owns Camera / Photo / Video / Document. It rotates 45° into a close glyph while the tray is open, which is why ICON.plus is a bare cross and not a "+" glyph — a rotated font character would land off-centre. */ .gcx-plus svg{transition:transform .16s ease} .g-compose .gcx-plus.on{background:var(--gb-press);color:var(--blue,#0a6bb0)} /* --blue (#0a6bb0) is the LIGHT accent; on the dark bar it measured rgb(10,107,176) over #141b28, about 2.8:1. The dark surfaces already use #53bdeb (that is what .g-pr-ic switches to). */ [data-theme="dark"] .g-compose .gcx-plus.on{color:#53bdeb} .gcx-plus.on svg{transform:rotate(45deg)} /* ── 21c. The tray ────────────────────────────────────────────────────────────────────────────── In NORMAL FLOW directly above the bar (where #g-reply and #g-ment already live), never floating over it. Scrolls sideways rather than shrinking its targets, the same choice .gth2-acts makes. */ .g-plusrow{display:flex;gap:4px;background:var(--gb-surf);border-top:1px solid var(--line); padding:8px 8px 4px;position:relative;z-index:30;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none} .g-plusrow::-webkit-scrollbar{display:none} /* touch-action:pan-x — a horizontal drag STARTING ON A TILE must pan the row (the browser then pointercancels the tile, which the JS reads as not-a-tap). Without it some WebViews treat the button as a plain tap target and the tray only scrolls from the 4px gaps. */ .g-pr{flex:0 0 auto;width:74px;min-height:var(--tap,44px);border:0;background:transparent;padding:4px 0 6px;cursor:pointer;touch-action:pan-x; font-family:inherit;color:var(--ink);display:flex;flex-direction:column;align-items:center;gap:5px} .g-pr-ic{flex:none;width:46px;height:46px;border-radius:50%;background:var(--gb-tint);color:var(--blue,#0a6bb0); display:flex;align-items:center;justify-content:center} .g-pr-ic svg,.g-pr-ic .ic{width:21px;height:21px;vertical-align:0} /* The Mention key is the one glyph in this tray that is a CHARACTER, not an svg — an @ drawn as a path reads as a spiral at 21px. Sized to match the optical weight of the icons beside it. */ .g-pr-at{font-size:23px;font-weight:700;line-height:1;font-family:var(--font-display,inherit)} /* .g-pr-t, not `.g-pr span` — the icon IS a span, and `.g-pr span` (0,2,1) beat `.g-pr-ic` (0,1,0), which painted the glyph muted-grey instead of the accent. MEASURED before the class existed: .g-pr-ic color rgb(95,114,136) in light. */ .g-pr-t{font-size:11px;font-weight:600;color:var(--muted);line-height:1.2} .g-pr:active .g-pr-ic{background:var(--gb-press)} [data-theme="dark"] .g-pr-ic{background:rgba(83,189,235,.14);color:#53bdeb} /* ── 21d. Typing mode ─────────────────────────────────────────────────────────────────────────── ONE body class, set by gTypingWire() in guard.js. Everything here is display/padding only — no transitions on the chrome, deliberately: a transitioned property is exactly what goes stale in a non-compositing preview pane, and a 250ms fade on a 40px header reads as lag on a real phone. */ body.g-typing .ghead{display:none} body.g-typing .gnav{display:none} /* .gmain reserves the bottom-nav strip; with the nav gone that reserve is dead space under the compose bar (which applies env(safe-area-inset-bottom) itself). Horizontal padding is NOT touched — .gth2 bleeds to the edge with margin:-18px -18px 0 and would come unstuck. */ body.g-typing .gmain{padding-bottom:0} /* The hero collapses to Discord's one slim line: back chevron, name, LIVE dot. The tile, the sub-line and the whole round-button action row stand down. The sub-line is kept ONLY when it is carrying "…is typing" — gSubPaint() already stamps .typing on it for exactly that, so this reuses a signal that exists rather than inventing a second one. */ body.g-typing .gth2{padding:calc(6px + env(safe-area-inset-top,0px)) 14px 6px;gap:8px} body.g-typing .gth2-tile{display:none} body.g-typing .gth2-t b{font-size:14.5px} body.g-typing .gth2-t small:not(.typing){display:none} body.g-typing .gth2-t.tap::after{display:none} body.g-typing .gth2-acts{display:none} /* The radio bar and its minimized FAB float OVER the chat (z-index 100000/100009) and would land on the text field. They stand down with the rest of the chrome and come straight back on blur — the radio SESSION is untouched, this is paint only. */ body.g-typing .rad-bar,body.g-typing .rad-fab{display:none} /* Same treatment, same reason, for the "Notifications are off" bar: it is docked above the compose bar while a thread is open, and with the keyboard up that space belongs to the thread. It is a standing state, not an event — it comes straight back on blur and nothing is lost by hiding it. */ body.g-typing #g-notifbar{display:none} /* gnav() already hides #g-sos on the Chat tab; this covers every other surface a composer can open on top of (the ticket overlay, Field mode) so nothing overlaps the send button. */ body.g-typing .g-sos{display:none} /* Help-desk ticket overlay: same treatment, its own header. */ body.g-typing .tk-head{padding-top:calc(6px + env(safe-area-inset-top,0px));padding-bottom:6px} body.g-typing .tk-tile,body.g-typing .tk-ht small,body.g-typing .tk-pill.onhead{display:none} body.g-typing .tk-ht b{-webkit-line-clamp:1;font-size:14.5px} /* Field mode (supervisor) runs the same messenger inside its own shell. */ body.g-typing #g-sup .shead{display:none} body.g-typing #g-sup .snav{display:none} /* supervisor.css reserves 56px under the composer for .snav; with the nav gone that is a dead band between the bar and the bottom of the screen. */ body.g-typing #g-sup #sv-chat.on .g-compose{padding-bottom:calc(8px + env(safe-area-inset-bottom,0px))} body.g-typing #g-sup #sv-chat.on .gnewmsg{bottom:calc(78px + env(safe-area-inset-bottom,0px))} /* With the keyboard up the reader is writing, not browsing history — and the pill would be sitting over the thread they have left to look at. It comes straight back on blur. */ body.g-typing .gstartpill{display:none} /* ══ Message rich text — the officer/supervisor side of Discord-style markdown ══════════════════ Same tag set as the console (public/msgmd.js is shared); the colours are the officer app's. Two things to know before touching it: — .gtx is white-space:pre-wrap and msgmd.js emits ZERO literal newlines outside a

, so a
     quote or a list sits flush instead of gaining a phantom blank line above it;
   — .gtx is a SPAN, so these blocks are block boxes inside an inline parent. They are given an
     explicit display:block and no top margin on the first child, which is what keeps a message
     that opens with a code block from pushing off the top of its own bubble. */
.md-code{font-family:var(--font-mono);font-size:.87em;background:rgba(11,32,54,.08);border:1px solid rgba(11,32,54,.10);border-radius:4px;padding:.1em .34em;white-space:pre-wrap;word-break:break-word}
.md-codeblock{display:block;margin:5px 0;border-radius:8px;overflow:hidden;border:1px solid rgba(11,32,54,.12);background:rgba(11,32,54,.05)}
.md-lang{display:block;font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted,#5f7288);padding:5px 10px 0}
.md-pre{display:block;margin:0;padding:8px 10px;font-family:var(--font-mono);font-size:12.5px;line-height:1.5;white-space:pre;overflow-x:auto;-webkit-overflow-scrolling:touch}
.md-pre code{font:inherit;background:none;border:0;padding:0;white-space:inherit}
.md-quote{display:block;margin:3px 0;padding:1px 0 1px 10px;border-left:3px solid var(--blue-light,#4aa3dd)}
.md-list{display:block;margin:3px 0;padding-left:21px}
.md-list li{display:list-item;margin:1px 0}
.md-codeblock:first-child,.md-quote:first-child,.md-list:first-child{margin-top:0}
/* Spoiler: blacked out and unselectable until it is tapped. The reveal is a delegated listener in
   msgmd.js — no inline handler is ever emitted into a message body. Padding keeps the tap target
   honest on a phone without changing the line box. */
.md-spoiler{background:rgba(11,32,54,.86);color:transparent;border-radius:4px;padding:1px 4px;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:background .13s ease,color .13s ease}
.md-spoiler>*{visibility:hidden}
.md-spoiler.on{background:rgba(11,32,54,.09);color:inherit;cursor:auto;-webkit-user-select:auto;user-select:auto}
.md-spoiler.on>*{visibility:visible}
.md-spoiler:focus-visible{outline:2px solid var(--blue-bright,#1a86d0);outline-offset:1px}
/* an emoji-only message renders big, the way Discord does */
.md-jumbo{font-size:2.5em;line-height:1.2;display:inline-block}
.md-link{color:var(--blue,#0a6bb0);text-decoration:underline;word-break:break-all;font-weight:600}
/* on the officer's own gradient bubble */
.gwrap.mine .md-code,.gwrap.mine .md-codeblock{background:rgba(255,255,255,.17);border-color:rgba(255,255,255,.25)}
.gwrap.mine .md-lang{color:rgba(255,255,255,.72)}
.gwrap.mine .md-quote{border-left-color:rgba(255,255,255,.6)}
.gwrap.mine .md-spoiler{background:rgba(4,14,26,.7)}
.gwrap.mine .md-spoiler.on{background:rgba(255,255,255,.2)}
.gwrap.mine .md-link,.gwrap.mine .glink{color:#dcecff}
[data-theme="dark"] .md-code{background:rgba(140,180,225,.14);border-color:rgba(140,180,225,.20)}
[data-theme="dark"] .md-codeblock{background:rgba(6,14,24,.55);border-color:rgba(140,180,225,.18)}
[data-theme="dark"] .md-quote{border-left-color:#4a7fb5}
[data-theme="dark"] .md-spoiler{background:rgba(4,12,22,.92)}
[data-theme="dark"] .md-spoiler.on{background:rgba(140,180,225,.16)}
[data-theme="dark"] .md-link{color:#7fc4f0}

/* ══ 22. SWIPE BETWEEN TABS — the affordance ════════════════════════════════════════════════════
   The gesture itself is gSwipeWire() in guard.js; everything here is paint. Two signals, both of
   which exist so the officer knows WHERE the swipe is going before they commit to it:
     · the page follows the finger by up to 30px (JS writes the inline transform),
     · and the tab it is heading for lights up in the bar.
   The peek is deliberately the SAME 26x3 underline and the same #0a6bb0 the active tab already
   wears (sections 9 and 12, light and dark both), at 45% — a preview of the state you are about to
   land in reads instantly; a new colour would just be a second thing to learn. */
/* While a drag is live the view is pushed sideways past the shell's edge. .gapp only clips itself
   on the Chat tab, so without this the document grows a horizontal scroll and the whole page rubber
   -bands sideways on Android. Transient — the class lives only for the length of the gesture. */
body.gsw-drag{overflow-x:hidden}
/* Settle only; the drag itself is direct manipulation and must never be transitioned, or the page
   lags the finger. The class is added at release and taken off 260ms later.
   ALL THREE SHELL SECTION CLASSES. .sview was already given .gsw-settle by the shipped JS and had
   no rule to match, so Field mode's pull SNAPPED back; .aview is the #g-adm command post, which is
   not on this branch yet and must not arrive with a missing rule. --t-med/--ease are the house
   motion tokens where the base defines them, and the literals are the same 200ms house curve. */
.gview.gsw-settle,.sview.gsw-settle,.aview.gsw-settle{transition:transform var(--t-med,200ms) var(--ease,cubic-bezier(.2,.7,.3,1))}
@media (prefers-reduced-motion:reduce){.gview.gsw-settle,.sview.gsw-settle,.aview.gsw-settle{transition:none}}
/* The ARRIVING screen, after a committed swipe or a system back: it slides the short way in, from
   the side the finger came from. Opt-IN motion (no-preference), CSS keyframes only — no rAF loop
   and nothing measured per frame, which is the whole reason this is a class and not a JS tween. */
@media (prefers-reduced-motion:no-preference){
  .gview.gsw-in-l,.sview.gsw-in-l,.aview.gsw-in-l{animation:gswinl var(--t-med,200ms) var(--ease,cubic-bezier(.2,.7,.3,1))}
  .gview.gsw-in-r,.sview.gsw-in-r,.aview.gsw-in-r{animation:gswinr var(--t-med,200ms) var(--ease,cubic-bezier(.2,.7,.3,1))}
}
@keyframes gswinl{from{transform:translateX(-16px);opacity:.55}to{transform:none;opacity:1}}
@keyframes gswinr{from{transform:translateX(16px);opacity:.55}to{transform:none;opacity:1}}
.gnav button.gnav-peek{color:#0a6bb0}
.gnav button.gnav-peek::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:26px;height:3px;border-radius:0 0 3px 3px;background:#0a6bb0;opacity:.45}
/* The centre Clock tab wears a raised puck instead of an underline (.gnav5 .gnav-mid.on::before is
   display:none for exactly that reason), so its peek has to be the puck growing, not a bar that
   would appear from nowhere behind it. */
.gnav5 .gnav-mid.gnav-peek::before{display:none}
.gnav5 .gnav-mid.gnav-peek .ic{transform:translateX(-50%) scale(1.06)}

/* The quote inside an OUTGOING bubble sits on the blue fill — inherit the bubble's light text
   instead of darkening it (console twin fixed the same day, owner: "hard to read when replying"). */
.gbubble.me .reply-quote{background:rgba(255,255,255,.16);border-left-color:rgba(255,255,255,.6);color:inherit}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   16. MOTION — the officer app's half of the house motion system.
   THE LAW: unified-platform/DESIGN-SYSTEM.md §7. Tokens: :root at the top of this file.
   ═══════════════════════════════════════════════════════════════════════════════════════════════
   SHELL (settled on the integration branch claude/int-1323): guard.css CHANGED in this branch, so the officer
     shell needed a purge or every already-installed app would keep serving the old stylesheet from
     cache and none of this motion would ship. This branch deliberately bumped nothing itself — two
     branches racing that constant is a merge conflict with a silent-failure payload — and the
     integration branch performed the one bump, v106 → v107, carrying this pass and the generated
     -identity reskin together. The reasoning is on that constant's line in sw.js.

   Same three tokens, same values, as the console — a sheet must not open at a different speed
   depending on which screen you are holding.

   FOUR RULES, identical to styles.css → MOTION SYSTEM:
     1. inside @media (prefers-reduced-motion:no-preference);
     2. opacity / transform / box-shadow / background only — NEVER top/left/height. On this app
        that is not a style preference: these are mid-range Androids on Afghan networks, and a
        height transition is a layout pass every frame;
     3. CSS only, no JS animation loops;
     4. enter via @keyframes so the failure mode is "no animation", not "invisible control".

   THREE THINGS THIS SECTION DELIBERATELY DOES NOT TOUCH, and each has a reason:
     · THE TYPING COLLAPSE (section 21d, body.g-typing) — .gcx / .gnav / .gth2 heights and paddings
       are MEASURED, and the collapse is a display/padding swap by design. A transition on any of
       those is a layout animation on the one surface where the keyboard is already fighting for
       every pixel. Not tokenised, not animated, not touched.
     · TAB CONTENT (.gview.on) — no cross-fade. The app already has a purpose-built DIRECTIONAL
       swipe between tabs (.gsw-settle, tokenised above); a fade layered on top would fight it and
       would fire on every gnav() call as well, giving one action two competing motions.
     · --press-ms (.09s, section 14) stays sub-token. A tap has to feel landed before the finger
       lifts; --t-fast there reads as a laggy button. Different job, different number.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */
@keyframes gmo-fade{from{opacity:0}to{opacity:1}}

/* ⚠⚠ THE SPACING ON THE NEXT LINE IS LOAD-BEARING. DO NOT NORMALISE IT. ⚠⚠
   Same pin as styles.css, same reason, and it is the officer half of the same pair. This file also
   carries TWO motion blocks — this house one and the messenger one at the end — and
   msg-dynamism-ui.test.js separates them by ONE character: it looks for the at-rule written WITH A
   SPACE after the colon, so this opener must stay colon-tight and no comment above the messenger
   block may spell it the spaced way. Give this one a space and that test silently reads the wrong
   block and then complains that '.g-ment' lost its rule. motion-block-discrimination in that same
   file fails loudly if this drifts.

   ⚠ CORRECTION, claude/int-1323: the pin first said "exactly one spaced spelling per file". THIS
   FILE NOW HAS TWO and that is correct — the messenger block at section 16's end, and the search
   section's own block further down (claude/msg-parity), which must stay spaced because its suite
   matches on that form. So the rule is ORDER: the messenger block must remain the FIRST spaced one,
   because that is the one motionBlock() returns. Below it, another spaced block is harmless. */
@media (prefers-reduced-motion:no-preference){
  /* Bottom sheets: the panel rises (gsheetin, above) and the scrim behind it fades in with it,
     instead of the hard grey cut that used to land a frame before the sheet arrived.
     Inherited by every .g-sheet in the officer app — the attach/paperclip sheet, the house confirm
     sheet, the availability and note sheets, and the supervisor overlay's sheets (#g-sup shares
     this stylesheet's document, so it inherits the tokens and this rule for free). */
  /* ⚠ .g-sheet IS DECLARED TWICE IN THIS FILE, and that is a known, deliberate state as of the
     claude/int-1323 integration — not something to "clean up" without reading both. The messenger
     dynamism batch reached the same scrim independently (its base did not carry this section) and
     its MOTION LAYER at the very end of this file re-declares .g-sheet with its own gm-veil/.18s.
     Source order gives that one the win, and the two are the same effect — an opacity fade of the
     same backdrop — so the rendered result is identical either way. This declaration is kept
     because it is the house layer's only officer-app rule and it is what makes the token vocabulary
     real here; that one is kept because msg-dynamism-ui.test.js asserts .g-sheet has a rule inside
     ITS guarded block. Collapsing them to a single owner is a call for whoever ships this train. */
  .g-sheet{animation:gmo-fade var(--t-fast) var(--ease)}
}

@media (prefers-reduced-motion:reduce){
  /* gsheetin had no stillness guard of its own; the sheet still appears, it just does not travel. */
  .g-sheet-in{animation:none}
  .g-sheet{animation:none}
}

/* ══ LINK PREVIEW CARD — officer app ═══════════════════════════════════════════════════════════
   The phone twin of the console's .lpc. It sits BETWEEN .gbubble and .grxbar inside .gwrap (see
   gBubble / gApplyPreview), not inside the bubble — .gbubble is white-space:pre-wrap and its
   timestamp placement is measured against its own contents, so a block card in there would move
   the ticks. Out here it inherits .gwrap's alignment (flex-start for them, flex-end for mine) and
   touches none of that.

   ★ NO min-height and NO placeholder. The unfurl lands a second or two after the bubble is already
   painted, and most messages never get a card at all — a reserved box would be a grey hole under
   every link in the thread. Nothing is drawn until there is something to draw.
   ★ --tap does not apply: this is a LINK, not a control in a control row. It is a 300px-wide
   target that is already far larger than the 44px floor. */
.glpc{display:block;max-width:100%;width:100%;margin:5px 0 0;padding:8px 10px;border-radius:11px;
  border:1px solid var(--gb-them-line,#e2e9f1);border-left:3px solid var(--navy-2,#005080);
  background:var(--gb-them,#fff);color:var(--ink,#16222f);text-decoration:none;overflow:hidden;
  -webkit-tap-highlight-color:transparent}
.glpc:active{background:var(--gb-tint,#e7f0fa)}
.glpc-dom{display:block;font-size:11px;font-weight:700;color:var(--muted,#5f7288);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px}
.glpc-t{font-size:13.5px;font-weight:700;color:var(--navy-2,#005080);line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.glpc-d{font-size:12.5px;color:var(--ink,#16222f);opacity:.8;line-height:1.4;margin-top:3px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* max-height in vh, not px: the same card must not eat half a 360x640 phone. */
.glpc-img{display:block;margin-top:7px;width:100%;max-height:26vh;object-fit:cover;border-radius:8px;
  background:var(--gb-them-line,#e2e9f1)}
/* On an own-message bubble the wrap is right-aligned but the CARD keeps the neutral surface: the
   bubble's blue gradient is on .gbubble only, so there is nothing here to fight and a second blue
   panel beside it would read as a second message. */
.gwrap.mine .glpc{border-left-color:var(--navy-2,#005080)}
[data-theme="dark"] .glpc{background:var(--gb-them,#1a2231);border-color:var(--gb-them-line,#26303f)}
[data-theme="dark"] .glpc-t{color:#7fc4f0}
[data-theme="dark"] .glpc:active{background:var(--gb-tint,#16273a)}

/* ══ MOTION LAYER — officer app (2026-08-11) ═══════════════════════════════════════════════════
   Same doctrine as the console's block in styles.css, and the same three rules: opt-in via
   prefers-reduced-motion:no-preference (this is NEW motion, so under `reduce` it simply does not
   exist), CSS only — never a JS animation loop, because this runs on the cheapest Android in the
   fleet — and transform/opacity only, never a layout property, because the thread's scroll
   position is load-bearing on a phone.

   ⚠ .g-sheet-in and .rxq ALREADY animate (gsheetin / rxqin, unconditionally). They are deliberately
   left alone: retro-fitting them into this block would change shipped behaviour under `reduce`,
   which is a separate decision from adding new motion, and they are referenced by name in the
   officer test suite. This block only adds what had none. */
@media (prefers-reduced-motion: no-preference){
  /* The @-suggestion panel opens in normal flow directly above the compose bar (never an overlay —
     see gMentPanel), so it grows downward out of that slot rather than fading in place. */
  .g-ment{animation:gm-rise .16s cubic-bezier(.16,.84,.44,1)}
  @keyframes gm-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  /* The sheet BACKDROP. .g-sheet-in (the panel) already slides; the scrim behind it appeared as a
     hard cut, which is what made the whole gesture read as a jump rather than a lift. */
  .g-sheet{animation:gm-veil .18s ease-out}
  @keyframes gm-veil{from{opacity:0}to{opacity:1}}
  /* A card that lands on a message already on screen. Opacity only — a card that MOVED would drag
     the thread's scroll with it, and gApplyPreview only chases the bottom when the reader was
     already there. */
  .glpc{animation:gm-fade .18s ease-out}
  @keyframes gm-fade{from{opacity:0}to{opacity:1}}
}

/* ══ 23. MESSAGE SEARCH + JUMP TO A DATE ════════════════════════════════════════════════════════
   Two surfaces, one rule: everything sits IN FLOW. The chip row, the suggestion list, the "search
   everything" bar and the results all follow the search field down the column rather than floating
   over it — the same reasoning the @mention picker is built on (.g-ment, section 11): an overlay
   next to a text field on a phone is how a control ends up eating the taps meant for the thing
   underneath it, and an in-flow panel cannot cover anything.

   Colour comes entirely from the tokens already in this file (--gb-tint / --gb-field /
   --gb-field-line / --gb-press / --gb-chip-ink / --line / --ink / --muted / --heading / --card), so
   dark mode follows without a parallel stylesheet. The two places that need a FILLED navy get the
   lifted #1d4a80 in dark, exactly like .gib-f.on — --navy itself is #032b49, darker than the dark
   surface, which is why it can never simply be reused there. */

/* --- search mode: which half of the inbox is on screen ----------------------------------------
   A class on the container, never [hidden]: .gib-filters carries display:flex from this stylesheet,
   which outranks the user agent [hidden]{display:none} rule, so the filter row would have stayed on
   screen over the results. Empty containers collapse on :empty for the same reason — no attribute
   to keep in sync with the markup. */
.ginbox.gms-on #gib-filters,.ginbox.gms-on #gib-list{display:none}
.gms-chips:empty,.gms-sugg:empty,.gms-bar:empty,.gms-results:empty{display:none}

/* --- committed filters, as chips ---------------------------------------------------------------
   The painted chip is 32px because a row of 44px pills would push the conversation list off a
   360x800 screen; the REMOVE control carries the house 44px target as an invisible ::after instead
   (section 5 idiom — that is why the chip is position:relative). */
.gms-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 8px}
.gms-chip{display:inline-flex;align-items:center;min-height:32px;max-width:100%;min-width:0;
  border:1px solid var(--gb-field-line,#d8e0ea);background:var(--gb-tint,#e7f0fa);border-radius:999px;
  font-size:12.5px;line-height:1.2;padding-left:10px;overflow:hidden}
.gms-chip-k{flex:none;font-weight:800;letter-spacing:.02em;color:var(--blue,#0a6bb0)}
.gms-chip-v{min-width:0;margin-left:5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gms-chip-x{flex:none;position:relative;border:0;background:none;color:var(--muted);
  font-size:19px;line-height:1;width:30px;height:30px;margin-left:2px;padding:0;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;border-radius:50%;
  transition:background .15s cubic-bezier(.2,.7,.3,1),color .15s cubic-bezier(.2,.7,.3,1)}
.gms-chip-x::after{content:"";position:absolute;left:50%;top:50%;width:var(--tap,44px);height:var(--tap,44px);transform:translate(-50%,-50%)}
.gms-chip-x:active{background:var(--gb-press,rgba(10,30,60,.07));color:var(--ink)}
.gms-chip-clr{position:relative;border:0;background:none;color:var(--muted);font-family:inherit;
  font-size:12.5px;font-weight:700;padding:0 6px;min-height:32px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.gms-chip-clr::after{content:"";position:absolute;left:0;right:0;top:50%;height:var(--tap,44px);transform:translateY(-50%)}
[data-theme="dark"] .gms-chip{background:var(--gb-tint,#16273a);border-color:var(--gb-field-line,#2b3648)}
[data-theme="dark"] .gms-chip-k{color:#7fc4f0}

/* --- inline autocomplete ------------------------------------------------------------------------
   Capped at 8 rows and ~40vh: this opens between the search field and the conversation list, and a
   list that fills the screen would hide the very thing the officer is deciding between. */
.gms-sugg{background:var(--gb-surf,#fff);border:1px solid var(--line);border-radius:14px;
  margin:0 0 8px;overflow-x:hidden;overflow-y:auto;max-height:40vh;overscroll-behavior:contain;
  box-shadow:0 6px 18px rgba(11,22,40,.09)}
.gms-sug-h{display:flex;align-items:baseline;gap:8px;padding:9px 13px 7px;font-size:10.5px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:var(--gb-chip-ink,#5b6b80);border-bottom:1px solid var(--line)}
.gms-sug-h small{font-size:11px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--muted)}
.gms-sug-i{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;
  width:100%;min-height:var(--tap,44px);border:0;border-bottom:1px solid var(--line);background:none;
  font-family:inherit;text-align:left;padding:8px 13px;cursor:pointer;
  transition:background .15s cubic-bezier(.2,.7,.3,1)}
.gms-sug-i:last-child{border-bottom:0}
.gms-sug-i b{font-size:14px;font-weight:700;color:var(--ink);line-height:1.25;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gms-sug-i small{font-size:11.5px;color:var(--muted);line-height:1.3;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gms-sug-i.on,.gms-sug-i:active{background:var(--gb-press,rgba(10,30,60,.07))}
.gms-sug-none{padding:12px 13px;font-size:12.5px;line-height:1.5;color:var(--muted)}
[data-theme="dark"] .gms-sugg{background:var(--gb-surf,#141b28);box-shadow:0 6px 18px rgba(0,0,0,.4)}

/* --- "search all messages" ---------------------------------------------------------------------
   The discovery point. Without it the ONLY way into the server search is the keyboard search key,
   which several Android keyboards draw as a plain return arrow. */
.gms-bar{margin:0 0 9px}
.gms-go{display:flex;align-items:center;gap:9px;width:100%;min-height:var(--tap,44px);
  border:1px solid var(--gb-field-line,#d8e0ea);background:var(--gb-tint,#e7f0fa);color:var(--blue,#0a6bb0);
  border-radius:12px;padding:9px 13px;font-family:inherit;font-size:13.5px;font-weight:700;text-align:left;cursor:pointer;
  transition:background .15s cubic-bezier(.2,.7,.3,1),border-color .15s cubic-bezier(.2,.7,.3,1),opacity .15s cubic-bezier(.2,.7,.3,1)}
.gms-go svg{width:18px;height:18px;flex:none}
.gms-go span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gms-go:active{background:var(--gb-press,rgba(10,30,60,.07))}
.gms-go:disabled{opacity:.6;cursor:default;color:var(--muted);background:var(--gb-field,#f2f5f9)}
.gms-hint{margin:6px 2px 0;font-size:11.5px;line-height:1.55;color:var(--muted)}
.gms-hint b{font-family:var(--font-mono,ui-monospace,monospace);font-weight:700;color:var(--ink);font-size:11px}
[data-theme="dark"] .gms-go{background:var(--gb-tint,#16273a);border-color:var(--gb-field-line,#2b3648);color:#7fc4f0}
[data-theme="dark"] .gms-go:disabled{background:var(--gb-field,#1e2735);color:var(--muted)}

/* --- results ------------------------------------------------------------------------------------ */
.gms-head{display:flex;align-items:center;gap:10px;margin:0 0 10px;padding-bottom:9px;border-bottom:1px solid var(--line)}
.gms-h-t{flex:1;min-width:0;font-family:var(--font-display,inherit);font-size:15px;font-weight:800;color:var(--heading,#0b2036);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gms-x{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:var(--tap,44px);
  border:1px solid var(--line);background:var(--card,#fff);color:var(--ink);border-radius:12px;
  padding:0 12px;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;
  transition:background .15s cubic-bezier(.2,.7,.3,1)}
.gms-x svg,.gms-x .ic{width:15px;height:15px;flex:none}
.gms-x:active{background:var(--gb-press,rgba(10,30,60,.07))}

.gms-grp{margin:0 0 14px}
.gms-g{display:flex;align-items:center;gap:8px;margin:0 0 5px;padding:0 2px;min-width:0}
.gms-g .gib-av{width:26px;height:26px;font-size:11px;border-radius:8px}
.gms-g .gib-av.glyph .ic{width:14px;height:14px}
.gms-g-n{min-width:0;font-size:12.5px;font-weight:800;color:var(--heading,#0b2036);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gms-g-tag{flex:none;border:1px solid var(--line);border-radius:999px;padding:1px 7px;
  font-size:9.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.gms-g-c{flex:none;margin-left:auto;font-size:11px;font-weight:800;color:var(--gb-chip-ink,#5b6b80);
  background:var(--gb-field,#f2f5f9);border-radius:999px;padding:2px 8px;font-variant-numeric:tabular-nums}
[data-theme="dark"] .gms-g-c{background:var(--gb-field,#1e2735)}

/* One hit. The thumbnail is 52px on the RIGHT so every card text starts on the same left edge — a
   photo-led left rail would make the column of names ragged, and the name is what is scanned. */
.gms-hit{position:relative;display:flex;align-items:flex-start;gap:10px;width:100%;min-width:0;
  border:1px solid var(--line);background:var(--card,#fff);border-radius:14px;
  padding:10px 11px;margin:0 0 7px;font-family:inherit;text-align:left;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background .15s cubic-bezier(.2,.7,.3,1),border-color .15s cubic-bezier(.2,.7,.3,1),transform .15s cubic-bezier(.2,.7,.3,1)}
.gms-hit:active{background:var(--gb-press,rgba(10,30,60,.07));transform:scale(.99)}
.gms-hit-m{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.gms-l1{display:flex;align-items:baseline;gap:6px;min-width:0}
.gms-who{min-width:0;font-size:13px;font-weight:800;color:var(--heading,#0b2036);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gms-pin{flex:none;color:var(--muted);opacity:.8}
.gms-pin .ic,.gms-pin svg{width:12px;height:12px;vertical-align:-1px}
.gms-when{flex:none;margin-left:auto;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
/* Three lines, then ellipsis: the snippet is already centred on the match server-side, so a fourth
   line adds height without adding the answer. */
.gms-tx{font-size:13px;line-height:1.45;color:var(--ink);word-break:break-word;
  display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.gms-kic{margin-right:4px;opacity:.75;color:var(--muted)}
.gms-kic .ic,.gms-kic svg{width:13px;height:13px;vertical-align:-2px}
.gms-att{color:var(--muted);font-style:italic}
.gms-mk{background:rgba(233,163,25,.30);color:inherit;border-radius:3px;padding:0 1px}
[data-theme="dark"] .gms-mk{background:rgba(233,163,25,.34)}
.gms-th{flex:none;position:relative;width:52px;height:52px;border-radius:10px;overflow:hidden;background:var(--gb-field,#f2f5f9)}
.gms-th img{width:100%;height:100%;object-fit:cover;display:block}
/* A video hit shows its poster frame; the play triangle says it is a clip without a second row of text. */
.gms-th.vid::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  border-style:solid;border-width:7px 0 7px 11px;border-color:transparent transparent transparent #fff;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}

.gms-page{display:flex;align-items:center;gap:10px;margin:4px 0 2px}
.gms-pg{flex:none;min-height:var(--tap,44px);border:1px solid var(--line);background:var(--card,#fff);
  color:var(--ink);border-radius:12px;padding:0 14px;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;
  transition:background .15s cubic-bezier(.2,.7,.3,1),opacity .15s cubic-bezier(.2,.7,.3,1)}
.gms-pg:active{background:var(--gb-press,rgba(10,30,60,.07))}
.gms-pg:disabled{opacity:.4;cursor:default}
.gms-pg-n{flex:1;text-align:center;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.gms-note{display:block;font-size:11.5px;line-height:1.55;color:var(--muted)}
.gms-note.foot{margin:10px 2px 4px;text-align:center;opacity:.85}
.gms-tips{display:block;font-size:11.5px;line-height:1.7;color:var(--muted);margin-top:6px}
.gms-tips b{font-family:var(--font-mono,ui-monospace,monospace);font-weight:700;color:var(--ink);font-size:11px}
/* .gsk carries the shimmer AND its own prefers-reduced-motion opt-out (section 7) — reused here so
   the loading state reads as the same app, not a second skeleton with a second timing. */
.gms-skel{display:flex;flex-direction:column;gap:8px}
.gms-skel i{display:block;height:62px;border-radius:14px}

/* --- jump to a date ----------------------------------------------------------------------------
   The field is the phone OWN : one tap to the OS wheel, already skinned by the
   sheet form rules (section 1) and already dark-aware through :root{color-scheme} (section 2), so
   there is no calendar to build, translate or keep in step with the company timezone.
   The failure line stays INSIDE the sheet on purpose: a retention miss is the one answer the officer
   has to act on ("try a more recent day"), and a toast is gone in 1.8s. */
.gjd-sub{font-size:12.5px;line-height:1.5;color:var(--muted);margin:-4px 0 12px}
.gjd-quick{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.gjd-q{flex:1 1 auto;min-width:96px;min-height:var(--tap,44px);border:1px solid var(--line);
  background:var(--card,#fff);color:var(--ink);border-radius:12px;padding:0 12px;
  font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;
  transition:background .15s cubic-bezier(.2,.7,.3,1),border-color .15s cubic-bezier(.2,.7,.3,1),color .15s cubic-bezier(.2,.7,.3,1)}
.gjd-q:active{background:var(--gb-press,rgba(10,30,60,.07))}
.gjd-q.on{background:var(--navy);border-color:var(--navy);color:#fff}
[data-theme="dark"] .gjd-q{background:#0e1520;border-color:#22394d;color:#e8eef5}
[data-theme="dark"] .gjd-q.on{background:#1d4a80;border-color:#1d4a80;color:#fff}
.gjd-msg{border:1px solid var(--amber,#e08600);background:rgba(224,134,0,.10);color:var(--ink);
  border-radius:12px;padding:10px 12px;margin:0 0 12px;font-size:12.5px;line-height:1.55;
  animation:gjdmsg .2s cubic-bezier(.2,.7,.3,1)}
@keyframes gjdmsg{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .gjd-msg{animation:none}
  .gms-hit:active{transform:none}
  .gms-chip-x,.gms-sug-i,.gms-go,.gms-x,.gms-hit,.gms-pg,.gjd-q{transition:none}
}

/* ══ 24. MESSENGER PARITY — double-tap react · grouped action sheet · header presence ·
      back-badge · the Filters sheet ══════════════════════════════════════════════════════════════
   Five surfaces the phone was missing next to the console, all built out of tokens already in this
   file (--gb-tint / --gb-field / --gb-field-line / --gb-press / --line / --ink / --muted /
   --heading / --navy / --blue / --green), so both themes follow with no parallel stylesheet, and
   every target clears the --tap 44px floor.
   MOTION: transform + opacity only, and every animation is inside the
   prefers-reduced-motion:no-preference block at the end of this section. Nothing here animates a
   layout property — these are mid-range Androids and the thread's scroll position is load-bearing. */

/* --- 24a. Double-tap to react: the glyph that confirms it landed -------------------------------
   Parented to #g-thread (position:relative, section 15) so it rides the thread's own scroll, and
   pointer-events:none so the 760ms it is alive cannot swallow the next tap. Under `reduce` it
   simply appears and is removed — still a confirmation, with no flight. */
.gdbl-pop{position:absolute;z-index:5;transform:translate(-50%,-50%);pointer-events:none;
  font-size:34px;line-height:1;opacity:0;filter:drop-shadow(0 3px 8px rgba(2,20,38,.35))}

/* --- 24b. Message action sheet: Discord's grouped blocks --------------------------------------
   The rows are still .g-atr (42px disc, dark theme, --tap floor all inherited). What is new is the
   BLOCK: related actions share a rounded surface, and the gap between blocks is what makes a nine-
   row sheet scannable on a 360px screen. The divider rule is re-scoped to inside a block, so the
   hairline separates siblings and never runs across the gap between two groups. */
.g-msheet-g{background:var(--gb-field,#f2f5f9);border:1px solid var(--gb-field-line,#dde5ee);
  border-radius:14px;padding:0 12px;margin-top:8px;overflow:hidden}
.g-msheet-g .g-atr{padding:11px 0}
.g-msheet-g .g-atr+.g-atr{border-top:1px solid var(--gb-field-line,#dde5ee)}
.g-msheet-g .g-atr:active{background:var(--gb-press)}
[data-theme="dark"] .g-msheet-g{background:var(--gb-field,#1e2735);border-color:var(--gb-field-line,#2b3648)}
[data-theme="dark"] .g-msheet-g .g-atr+.g-atr{border-top-color:var(--gb-field-line,#2b3648)}

/* --- 24c. Thread header: "N online" ------------------------------------------------------------
   The second line became a ROW so the pill can sit beside the sub-text instead of under it — the
   header is 34px of vertical budget and a third line would have cost the thread a message. #gth2-sub
   keeps min-width:0 + ellipsis so a long channel description yields to the pill rather than pushing
   it off the edge. The header is always the dark navy gradient in BOTH themes (.gth2), so these
   colours are fixed against that surface and correctly have no [data-theme="dark"] twin. */
.gth2-subrow{display:flex;align-items:center;gap:7px;min-width:0;margin-top:1px}
.gth2-subrow #gth2-sub{margin-top:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gth2-on{flex:none;display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:800;
  letter-spacing:.03em;color:#7fe0a9;background:rgba(15,157,88,.18);border:1px solid rgba(63,191,122,.45);
  border-radius:20px;padding:2px 8px;white-space:nowrap}
.gth2-on i{width:6px;height:6px;border-radius:50%;background:#3fbf7a;flex:none}
/* Nobody online is an ANSWER, not an error — it goes quiet grey rather than disappearing, so the
   officer can tell "no one is here" from "we do not know". */
.gth2-on.none{color:#9dbdd6;background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.16)}
.gth2-on.none i{background:#7f93a8}

/* --- 24d. The back control's unread badge ------------------------------------------------------
   Rides ON the back chevron rather than beside it: .gth2-back is already a 44px target and the
   badge must not widen the header or move the channel tile. Same red as every other unread count. */
.gth2-back{position:relative}
/* To the RIGHT of the chevron, inside the button's own 44px box: the header gradient is tenant-
   brandable, so the badge deliberately carries no ring in the header's colour — it would be the one
   thing in this file that breaks when a tenant changes their navy. */
.gth2-bk-n{position:absolute;top:3px;right:1px;min-width:17px;height:17px;padding:0 4px;
  border-radius:9px;background:var(--red,#e11d2a);color:#fff;font-size:10px;font-weight:800;
  line-height:17px;text-align:center;pointer-events:none}

/* --- 24e. The Filters button on the inbox ------------------------------------------------------ */
.gib-filt{position:relative}
.gib-filt.on{background:var(--gb-tint,#e7f0fa);border-color:var(--blue,#0a6bb0);color:var(--blue,#0a6bb0)}
[data-theme="dark"] .gib-filt.on{background:#1d4a80;border-color:#1d4a80;color:#fff}
.gib-filt svg{width:19px;height:19px}
.gib-filt-n{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;
  border-radius:9px;background:var(--blue,#0a6bb0);color:#fff;font-size:10px;font-weight:800;
  line-height:17px;text-align:center;pointer-events:none}
[data-theme="dark"] .gib-filt-n{background:#1d4a80}

/* --- 24f. The Filters sheet -------------------------------------------------------------------
   .g-sheet chassis (backdrop, 92vh cap, safe-area padding, the gsheetin slide) — only the contents
   below are new. Every tappable thing in here is a .gmf-chip or a .seg button, and both clear the
   --tap 44px floor without needing a min-height on the sheet itself. */
/* --- 24g. CATEGORIES — collapsed by default (guard.js §gms-groups) ------------------------------
   The sheet used to print six open sections and every channel chip in one column: 870px of content
   against the 92vh (747px) cap. Now it is a quick row plus collapsed headers, so the whole panel is
   under the fold on a 375x812 phone and Search is reachable without scrolling a form. */
.gmf-quick{display:flex;flex-wrap:wrap;gap:7px;padding:12px 0 14px;border-bottom:1px solid var(--line)}
.gmf .gmf-sec{border-bottom:1px solid var(--line)}
/* The whole header row is the target, not the caret. */
.gmf .gmf-sec-b{display:flex;align-items:center;gap:10px;width:100%;min-height:var(--tap,44px);
  padding:4px 0;border:0;background:none;font-family:inherit;text-align:left;cursor:pointer;color:var(--ink)}
.gmf .gmf-h{font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);display:flex;align-items:baseline;gap:8px;flex:0 0 auto}
.gmf .gmf-h small{font-size:11px;font-weight:600;letter-spacing:0;text-transform:none;opacity:.85}
/* Badge + summary: what a CLOSED category is holding, so no filter is ever switched on and invisible. */
.gmf-hd{display:flex;align-items:center;gap:7px;flex:1 1 auto;min-width:0;justify-content:flex-end}
.gmf-n{min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:var(--blue,#0a6bb0);
  color:#fff;font-size:11px;font-weight:800;line-height:19px;text-align:center;flex:0 0 auto}
[data-theme="dark"] .gmf-n{background:#1d4a80}
.gmf-sum{font-size:12.5px;font-weight:600;color:var(--muted);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;min-width:0}
.gmf-cv{width:18px;height:18px;flex:0 0 auto;color:var(--muted)}
.gmf-sec.open>.gmf-sec-b .gmf-cv{transform:rotate(180deg)}
/* Closed is display:none, not height:0 — the sheet must not reserve space for what it is hiding, and
   a collapsed body must stay out of the tab order. */
.gmf-sec:not(.open)>.gmf-body{display:none}
.gmf-sec>.gmf-body{padding:2px 0 14px}
.gmf-row{display:flex;flex-wrap:wrap;gap:7px}
.gmf-none{font-size:13px;color:var(--muted)}
/* --- The type-ahead inside a category (FROM / MENTIONS / IN) ----------------------------------- */
.gmf-q{width:100%;min-height:var(--tap,44px);border:1px solid var(--gb-field-line,#dde5ee);
  background:var(--gb-field,#f2f5f9);color:var(--ink);border-radius:12px;padding:0 14px;
  font-family:inherit;font-size:15px;margin-bottom:9px}
[data-theme="dark"] .gmf-q{background:var(--gb-field,#1e2735);border-color:var(--gb-field-line,#2b3648);color:#e8eef5}
.gmf-pl{display:flex;flex-direction:column;gap:2px;margin-top:2px}
.gmf-pi{display:flex;align-items:center;gap:8px;width:100%;min-height:var(--tap,44px);
  border:0;background:none;border-radius:10px;padding:6px 10px;font-family:inherit;text-align:left;
  cursor:pointer;color:var(--ink)}
.gmf-pi b{font-size:14.5px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gmf-pi small{font-size:12px;color:var(--muted);white-space:nowrap}
.gmf-pi:active{background:var(--gb-press)}
[data-theme="dark"] .gmf-pi{color:#e8eef5}
[data-theme="dark"] .gmf-pi:active{background:#1e2735}
.gmf-chosen{margin-bottom:9px}
.gmf-x{margin-left:7px;font-size:16px;line-height:1;opacity:.85}
/* A filter chip. 44px tall on purpose: these are the sheet's primary targets and a 32px chip in a
   wrapped grid is the classic phone mis-tap. */
.gmf-chip{min-height:var(--tap,44px);max-width:100%;border:1px solid var(--gb-field-line,#dde5ee);
  background:var(--gb-field,#f2f5f9);color:var(--ink);border-radius:22px;padding:0 15px;
  font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gmf-chip.on{background:var(--navy);border-color:var(--navy);color:#fff}
.gmf-chip:active{background:var(--gb-press)}
.gmf-chip.on:active{background:var(--navy);opacity:.85}
[data-theme="dark"] .gmf-chip{background:var(--gb-field,#1e2735);border-color:var(--gb-field-line,#2b3648);color:#e8eef5}
/* --navy is #032b49 — DARKER than the dark surface — so a filled chip has to use the lifted navy
   there, exactly like .gib-f.on and the jump-to-date quick picks already do. */
[data-theme="dark"] .gmf-chip.on{background:#1d4a80;border-color:#1d4a80;color:#fff}
.gmf-date{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.gmf-date input[type=date]{flex:1;min-width:0}
.gmf .seg.gmf-seg button{min-height:var(--tap,44px)}
/* The live chip strip: the same filters the search field shows, so the sheet and the box can never
   look like they disagree. It reuses .gms-chip wholesale — same markup, same remove target. */
.gmf-live{display:flex;flex-wrap:wrap;gap:6px;padding:10px;border-radius:12px;
  background:var(--gb-tint,#e7f0fa);margin-bottom:2px}
[data-theme="dark"] .gmf-live{background:#16273a}
/* STICKY, and measured: at 375x812 the sheet's content is 864px against a 92vh (747px) cap, so
   Search would sit below the fold and the officer would have to scroll a form to run it. Full-bleed
   negative margins so the bar's background covers the rows sliding under it; the sheet's own bottom
   padding (16px + the safe area) stays below it, which is why bottom:0 lands correctly on a phone
   with a home indicator. */
.gmf-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;
  position:sticky;bottom:0;z-index:2;background:#fff;
  margin:18px -16px 0;padding:14px 16px 6px;border-top:1px solid var(--line)}
[data-theme="dark"] .gmf-foot{background:#141b28}
.gmf-clr{border:0;background:none;color:var(--muted);font-family:inherit;font-size:13.5px;
  font-weight:700;min-height:var(--tap,44px);padding:0 4px;cursor:pointer}
.gmf-clr[disabled]{opacity:.4}
.gmf-foot .gbtn{min-height:var(--tap,44px);padding:0 26px}
.gmf-foot .gbtn[disabled]{opacity:.45}

@media (prefers-reduced-motion: no-preference){
  /* The reaction landing: up and away, transform + opacity only. */
  .gdbl-pop{animation:gdblpop .62s cubic-bezier(.2,.7,.3,1) forwards}
  @keyframes gdblpop{
    0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}
    28%{opacity:1;transform:translate(-50%,-64%) scale(1.18)}
    55%{opacity:1;transform:translate(-50%,-84%) scale(1)}
    100%{opacity:0;transform:translate(-50%,-124%) scale(.92)}
  }
  .gmf-chip{transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
  .gib-filt{transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
  /* Opening a category. The caret turns and the body arrives — transform and opacity only, never the
     height: an animated collapse is a layout animation, which this section does not do. */
  .gmf-cv{transition:transform var(--t-fast) var(--ease)}
  .gmf-pi{transition:background var(--t-fast) var(--ease)}
  .gmf-sec.open>.gmf-body{animation:gmfsecin var(--t-fast) var(--ease)}
  @keyframes gmfsecin{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
  .gth2-on{transition:opacity var(--t-med) var(--ease)}
  .g-msheet-g .g-atr{transition:background var(--t-fast) var(--ease)}
}

/* ══ 23. THE TIME WIDGET — .gtmi (guard.js gTmInput / gWireTm) ══════════════════════════════════
   OWNER RULE: no native  anywhere a human picks a time, because that control
   renders from the DEVICE locale — a 24-hour spinner on one officer's phone, a 12-hour wheel on the
   next. This is a plain type="text" box, so it already inherits the house control skin from the
   HOUSE CONTROL LAYER above (`.gapp input:not(...)`, 46px / 12px 14px / 16px, both themes) wherever
   it is mounted; everything here is the SMALL delta on top of that skin. Deliberately no width, no
   background and no border in the base rule: the widget appears inside .gfield, inside .grow2, and
   inside the gPrompt sheet as `.gtmi.gcf-in`, and each of those already owns its own box.

   Why this block sits at the very END of the file: `.gtmi.bad` (0,2,0) has to outrank `.gcf-in:focus`
   (0,2,0, line ~2159). Equal specificity means the later rule wins, so a field the officer is still
   focused on keeps its red edge instead of flashing back to blue while it is still wrong. */
/* max(), not a bare var(--tap): 46px is the height every other control in the house skin (and .gcf-in
   in the sheet) already computes to, and a bare 44 here would win on source order and make the time
   field 2px shorter than the field beside it. The token still names the FLOOR, so if the tap bar ever
   moves above 46 this follows it. */
.gtmi{min-height:max(46px,var(--tap,44px));font-variant-numeric:tabular-nums}
/* The invalid state is a BORDER, not a background: an officer types this one-handed on a bright post
   and a tinted fill reads as "disabled" at arm's length. Paired with setCustomValidity() in
   gWireTm(), so the reason is spoken as well as painted. */
.gtmi.bad,.gtmi.bad:focus{border-color:#e11d2a;box-shadow:0 0 0 3px rgba(225,29,42,.20)}
[data-theme="dark"] .gtmi.bad,[data-theme="dark"] .gtmi.bad:focus{border-color:#f0707c;box-shadow:0 0 0 3px rgba(240,112,124,.24)}
.gtmi:disabled{opacity:.55}
/* The shorthand is only worth having if the officer knows it exists — one line, under the field(s),
   in the same voice as .ff-help. */
.gtm-hint{font-size:11.5px;color:var(--muted);line-height:1.45;margin:-6px 0 2px}
@media (prefers-reduced-motion:reduce){.gtmi{transition:none}}
/* ---- CASH ADVANCE on the officer to-do ----------------------------------------------------------
   The recipient's side: how much, where it went, and the receipt once the payer files it. The amount
   and the handle are tap-to-copy for the same reason as the console — a pasted $cashtag is a
   correct $cashtag. Sized for a 44px tap target on a phone. */
.td-row.adv{border-left:3px solid #2f9e5c}
.td-adv{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
/* ⚠ EVERY RULE HERE IS NAMED TWICE, FOR button AND FOR `.td-adv>span`. The officer's advance chips
   are NOT buttons any more (owner rule 2026-08-14, "the officer should not be able to have copied
   cash advance values" — gAdvCard's opts.copy): the amount and the $cashtag still render, with the
   same text and the same geometry, as plain spans carrying the SAME classes. A rule written only
   against `button` would leave the officer — the reader this card exists for — looking at unstyled
   text where the money used to be, which is the exact failure the specificity note below describes.
   The child combinator matters: `.td-adv-h` wraps an inner  for the ellipsis (see below), and
   a bare `.td-adv span` would style that inner one too. */
.td-adv button,.td-adv>span{min-height:var(--tap,44px);display:inline-flex;align-items:center;border-radius:9px;border:1.5px solid #cfe3f5;background:#fff;font-family:inherit;font-weight:700;padding:0 12px}
.td-adv button{cursor:pointer}
/* MEASURED at 375x812: `.td-adv button` above is (0,1,1) and beat the plain `.td-adv-amt` class on
   COLOUR, so the amount rendered in body text and lost the one signal that says "this is money" —
   the background only survived because it carried !important. Every rule below is written at
   button-level specificity instead, so the two themes are decided by the cascade rather than by a
   race between !important flags. (`.td-adv>span.td-adv-amt` is (0,2,1) — a shade higher again, and
   it only ever matches the chips this file's own gAdvCard emits, so nothing else can be caught.) */
.td-adv button.td-adv-amt,.td-adv>span.td-adv-amt{font-size:16px;font-weight:800;color:#0d7a45;border-color:#bfe0cb;background:#f2faf5;font-variant-numeric:tabular-nums}
.td-adv button.td-adv-h,.td-adv>span.td-adv-h{font-size:12.5px;color:#16222f;max-width:100%;overflow:hidden}
.td-adv-h span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.td-adv button.td-adv-r{font-size:12.5px;color:#0a6bb0}
[data-theme="dark"] .td-adv button,[data-theme="dark"] .td-adv>span{background:#1a2231;border-color:#26424f;color:#e6eaf2}
[data-theme="dark"] .td-adv button.td-adv-amt,[data-theme="dark"] .td-adv>span.td-adv-amt{background:#16301f;border-color:#2a5238;color:#8fd6a8}
[data-theme="dark"] .td-adv button.td-adv-r{color:#7fbdf0}
/* ── GAS: THE SENTENCE THAT STOPS IT READING AS A DEBT ──────────────────────────────────────────
   An officer who is told money came to them assumes, correctly on every other money surface in this
   app, that they will be paying it back. Gas is the one case where that is wrong, so the card says
   so in words rather than relying on a colour nobody has been taught.
   ⚠ IT IS A  INSIDE .td-adv, so it inherits the (0,1,1) `.td-adv>span` rule above — including
   min-height:44px, which would make a full-width sentence a 44px-tall tap target that is not
   tappable. Named at (0,2,1) to unset that, exactly the way `.td-adv>span.td-adv-amt` overrides the
   same base rule (see the specificity note beside it). */
.td-adv>span.td-gasfree{min-height:0;flex:1 0 100%;justify-content:flex-start;padding:6px 10px;font-size:12px;font-weight:700;color:#12626f;background:#e6f3f6;border-color:#b3dbe4;border-radius:9px}
/* The money chip on a gas card is teal, not the advance's green: still clearly money, unmistakably
   not the same thing as money that is owed back. */
.td-adv.gas button.td-adv-amt,.td-adv.gas>span.td-adv-amt{color:#12626f;background:#e6f3f6;border-color:#b3dbe4}
[data-theme="dark"] .td-adv>span.td-gasfree{color:#7fd0de;background:#0f2a30;border-color:#1f4d57}
[data-theme="dark"] .td-adv.gas button.td-adv-amt,[data-theme="dark"] .td-adv.gas>span.td-adv-amt{color:#7fd0de;background:#0f2a30;border-color:#1f4d57}

/* ══ 24. THE FILE CARD — .gatt-file (guard.js gFileCardHtml) ═══════════════════════════════════
   ⚠ WHY THIS BLOCK IS AT THE END OF THE FILE. `.gatt-file` is declared THREE times above — line
   ~338 (the original underlined link), ~595 (`.gatt-file .ic` sizing, shared with .po-file) and
   ~1536 (the 2026 chat skin's inline-flex pill). All three are single-class rules, so they beat
   nothing and are beaten by nothing except document order. The card is a two-target ROW, not a
   pill, so every one of those has to be re-stated here rather than nudged in place — and moving
   this block up the file silently gives the row back to the pill.

   Geometry: an icon square, a text column that is the only thing allowed to shrink, and a download
   target on the right. `min-width:0` on .gaf-main and .gaf-tx is what makes the ellipsis work at
   all — a flex child refuses to shrink under its content without it, and the name would push the
   download button out of the bubble instead of truncating. MEASURED at 320px: the bubble's content
   box is 258px, of which the icon takes 38 and the download 44, leaving 168 for the name. */
.gatt-file{display:flex;align-items:stretch;gap:2px;width:100%;max-width:100%;margin:3px 0;
  background:var(--gb-press);border-radius:11px;overflow:hidden;text-decoration:none}
.gatt-file .gaf-main{flex:1;min-width:0;display:flex;align-items:center;gap:10px;
  min-height:var(--tap,44px);padding:8px 4px 8px 10px;color:inherit;text-decoration:none}
/* The glyph square. .gatt-file .ic (line ~595) sizes every icon in here to 15px with a 3px right
   margin for the old inline link; (0,3,0) beats that (0,2,0) so the card's own icon is 20px and
   owns its spacing through the flex gap instead. */
.gatt-file .gaf-ic{flex:none;width:38px;height:38px;border-radius:10px;display:flex;
  align-items:center;justify-content:center;background:var(--gb-tint);color:var(--blue,#0a6bb0)}
.gatt-file .gaf-ic .ic{width:20px;height:20px;margin:0;vertical-align:0}
.gatt-file .gaf-tx{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:2px}
/* ONE line with an ellipsis, never a wrap: a 90-character filename would otherwise turn a card into
   a paragraph and push the whole thread about. The extension is repeated in .gaf-m below precisely
   so the one thing the truncation eats is never the thing that says what the file IS. */
.gatt-file .gaf-n{font-size:13.5px;font-weight:700;line-height:1.3;color:inherit;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gatt-file .gaf-m{font-size:11.5px;line-height:1.25;opacity:.72;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
/* A full --tap square, and its own control: the officer who wants the file rather than the preview
   must not have to find a menu. Separated from the card body by a hairline so it reads as a second
   target instead of decoration on the first. */
.gatt-file .gaf-dl{flex:none;width:var(--tap,44px);min-height:var(--tap,44px);
  display:flex;align-items:center;justify-content:center;color:inherit;text-decoration:none;
  border-left:1px solid var(--gb-rule);opacity:.75}
.gatt-file .gaf-dl svg{width:19px;height:19px}
.gatt-file .gaf-main:active,.gatt-file .gaf-dl:active{background:var(--gb-press)}
.gatt-file .gaf-dl:active{opacity:1}
/* On MY bubble the fill is the navy gradient, so the card's own surfaces have to be drawn out of
   white at low alpha — --gb-press/--gb-tint are tuned against the page, not against that gradient,
   and both vanish on it. Same reason `.gbubble.mine .gatt-file{color:#fff}` (line ~339) exists. */
.gwrap.mine .gatt-file{background:rgba(255,255,255,.16);color:#fff}
.gwrap.mine .gatt-file .gaf-ic{background:rgba(255,255,255,.20);color:#fff}
.gwrap.mine .gatt-file .gaf-dl{border-left-color:rgba(255,255,255,.22)}
.gwrap.mine .gatt-file .gaf-main:active,.gwrap.mine .gatt-file .gaf-dl:active{background:rgba(255,255,255,.12)}
/* A set puts the cards under the photo mosaic; line ~1232 already gives the first one 4px, this
   keeps the rest from touching each other. */
.gbubble .gatt-file+.gatt-file{margin-top:0}
@media (prefers-reduced-motion:no-preference){
  .gatt-file .gaf-main,.gatt-file .gaf-dl{transition:background var(--t-fast) var(--ease),opacity var(--t-fast) var(--ease)}
}

/* ══ 25. THE PDF SHEET — .gdoc-ov (guard.js gDocPeek) ══════════════════════════════════════════
   The .g-modal chassis is a bottom sheet (line ~257: fixed, flex, align-items:flex-end) and
   .note-card already paints the surface in both themes. Only the column and the frame are new.
   The card is capped at 92vh and made a flex column so the title, the hint and the button row keep
   their intrinsic height and the FRAME is the only thing that absorbs the rest — a percentage
   height on the iframe inside an auto-height card collapses it to nothing. */
.gdoc-card{max-height:92vh;display:flex;flex-direction:column;gap:10px;
  padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}
.gdoc-t{font-family:var(--font-display,inherit);font-weight:800;font-size:15px;line-height:1.3;
  color:var(--ink);overflow-wrap:anywhere}
.gdoc-f{flex:1 1 auto;min-height:46vh;width:100%;border:0;border-radius:12px;background:var(--gb-field)}
.gdoc-hint{flex:none;font-size:11.5px;line-height:1.45;color:var(--muted)}
.gdoc-btns{flex:none;display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
/* .gbtn is already on the section-14 press list and clears the tap floor at its own padding; only
   the anchor needs the layout a