/* ==========================================================================
   De Leone OFFICE — the application.

   Owner, 2026-08-09, four times of asking: "everything still looks like crap
   amateur", "LOOKS PATHETIC AMATUER". The previous three attempts moved
   spacing, split a card into four tasks and put a sidebar on it, and every one
   of them left the same three things in place. Those three things are what
   "amateur" was pointing at, and this file changes all of them:

   1. IT WAS A PAGE, IN A COLUMN, ON A DESK MONITOR. `#office` was capped at
      78rem and sat inside the body padding app.css writes for a phone, so a
      27-inch screen showed a 1250px strip of cards floating in slate. An
      application does not have a page width. It has a rail, a header, and a
      content pane that scrolls under them.

   2. IT WORE THE MARKETING TYPE SCALE. `--step-0` is `clamp(1rem … 1.1rem)`
      and `--step-1` reaches 1.46rem — a scale built for a headline read from a
      sofa. At those sizes a table row is 44px tall and eleven of them fill a
      viewport. The palette is the owner's ruling and is untouched; the SIZES
      are not the ruling, and a desk tool needs its own, which is what
      `--o-t-*` below is: a fixed 11/13/15/20/32 ramp, no clamping, tuned for a
      mouse at 60cm rather than a thumb at arm's length.

   3. EVERY SURFACE WAS THE SAME SURFACE. The palette gives the dark side two
      values, `--slate-deep` and `--slate`, and app.css derives one more. Three
      greys cannot express ground / rail / card / inset / well, so everything
      was the same card with the same 1px border and nothing had any weight.
      The `--o-*` ramp below is SIX steps on the brand's own slate-to-ink axis
      — no new hue, nothing borrowed from outside the token file — and that is
      what lets a card sit ON something instead of beside it.

   WHAT IS NOT NEGOTIABLE: the two faces, and the rule that a number on this
   screen comes from a row somebody can open. (The hues were on this list
   until 2026-09-27; see THE PALETTE MOVED below.)

   THE FIELD APP IS DELIBERATELY UNTOUCHED. Its 56px targets are correct for a
   phone in a glove in July sun. This is a desk with a mouse.

   ---------------------------------------------------------------------------
   MATTE BLACK, NOT GLASS. Owner, 2026-08-09: "keep it minimalistic but
   futuristic pro like Elon Musk's X app for admin experience/office dash.
   glass looks cheap/half assed" — and then, on seeing it: "too glossy".

   The first attempt ported the marketing site's frosted header onto every
   surface: blurred translucent panels, a five-layer ring, a 102 degree
   specular streak, and an ambient radial field behind them for the blur to
   refract. That is the right treatment for a MARKETING header, which is one
   floating element over a photograph. Applied to thirty surfaces at once it is
   thirty competing highlights, and the verdict was correct — a diagonal shine
   on a data panel is decoration pretending to be depth.

   What replaced it is the opposite discipline, and it is X's:

     · TRUE BLACK, #000000. Not a dark grey pretending to be black. On an OLED
       panel the ground is genuinely off, so a hairline reads as a hairline.
     · NO ELEVATION AT ALL. No shadow, no blur, no gradient, no inner
       highlight. A panel is the ground plus a one-pixel border. Hierarchy
       comes from type weight, spacing and position — the things that survive
       being screenshotted, printed, or looked at for eight hours.
     · ONE ACCENT, USED WHEN IT MEANS SOMETHING. The brand sage marks the
       current section and a good state; the warn amber marks the one number
       that is costing money. Everywhere else is a three-step grey.
     · HAIRLINES DO THE DIVIDING. #2F3336 at one pixel, and a 1px grid gap
       over a line-coloured ground where a run of cells needs separating.

   THE PALETTE MOVED, 2026-09-27 (owner: "the outdated purple theme"). The
   office follows deleoneai.com's current monochrome system through tokens.css:
   the public #070707 canvas rather than true black, the public hairlines
   composited on it, and an accent that is white. Colour is reserved for
   state — green healthy, amber needs attention, red failed or overdue. The
   discipline above stands; the values quoted in it (#000000, #2F3336, the
   sage, the #C4703A warn) are its history, not its current palette.

   THE SIGN-IN SCREEN IS UNTOUCHED, by owner instruction. Everything here is
   scoped to the three signed-in roots, and app.css's #signin block is not read
   by this file.
   ========================================================================== */

/* ==========================================================================
   1. THE PALETTE AND SCALE

   Owner, 2026-08-09: "make the entire /admin logged-in experience dark black
   glass". THREE ROOTS, NOT ONE — and finding that out is what stopped this
   being a regression. `owner.html` and `portal.html` both `<link>` this
   stylesheet and build themselves out of its classes: .ofc-head, .ofc-lede,
   .ofc-tally, .ofc-card--wide and .ofc-list are all theirs as much as they
   were ever the office's. Rewriting this file around `#office` alone deleted
   nine classes those two pages depend on and scoped the new buttons where
   neither could reach them. Both pages would have rendered with an unstyled
   header, no lede band and 56px field-app buttons.

   So the scope is the five signed-in roots — #ebay joined them when the eBay
   console was built, #ads when De Leone Ads was.

   AND EVERY LIST HAS TO CARRY EVERY ROOT. #ads was added to the block below
   and to nothing else, so all twenty `:is(...)` lists in this file excluded
   it: every .ofc-primary, .ofc-ghost, .ofc-quiet and .ofc-link on those
   screens fell back to app.css's 56px purple field-app slab, and the
   prefers-reduced-motion block did not reach them at all — an accessibility
   failure nothing would have reported. tools/verify.mjs now fails the build
   if any list here is missing a root that loads this stylesheet.
   `#signin` is deliberately NOT
   among them — the owner asked for the sign-in screen to stay exactly as it
   is, and it is styled entirely by app.css, which this file never touches.
   ========================================================================== */

#office, #portal, #ebay, #ads {
  /* ---- surfaces ----
     deleoneai.com's canvas, not true black: #070707 is the public site's ground,
     and the office is the same company one click on. An "inset" is the
     public L1 level and a hover is the public hover step, both white. The
     cool blue-grey greys that were here (#0B0D0E, rgba(231,233,234,…)) are
     gone with the purple: the public ramp is true neutral. */
  --o-bg:     #070707;
  --o-panel:  #070707;   /* a panel is the ground plus a border */
  --o-inset:  #101010;   /* a well, a chip, a nested block: L1 on the canvas */
  --o-raised: #131313;   /* a popover or a menu, above the page */
  --o-hover:  rgba(255, 255, 255, 0.05);
  --o-press:  rgba(255, 255, 255, 0.08);

  /* ---- lines. Solid hex, not alpha: over one ground an alpha line is a
     different colour on every surface it crosses, and the whole point of a
     hairline system is that one weight looks like one weight. So each is the
     public hairline COMPOSITED on #070707 — the same pixel deleoneai.com draws,
     written down once. ---- */
  --o-line:    #161616;   /* hair-1 (.06): a divider inside a panel */
  --o-line-2:  #202020;   /* hair-2 (.10): the edge of a panel */
  /* THE ONLY LINE ALLOWED TO BE A CONTROL'S SOLE BOUNDARY (WCAG 1.4.11):
     3.22:1 on the canvas, 3.05:1 against a field's own L1 fill. A field drawn
     in --o-line-2 measured 1.65:1 before and 1.23:1 now, which is a box
     nobody can find. */
  --o-line-3:  #606060;   /* hair-3 (.36) */
  --o-line-4:  #8F8F8F;   /* hair-4 (.55): a control's edge on hover — 6.26:1 */

  /* ---- ink. Four steps of the public neutral ramp, measured on the canvas:
     16.14:1, 7.99:1, 5.91:1, and --o-neutral 4.96:1 for marks. The faint step
     stays at 5.06:1 even on L3, which is why it is #8B8B8B and not the public
     floor. ---- */
  --o-text:    #E6E6E6;
  --o-dim:     #A3A3A3;
  --o-faint:   #8B8B8B;

  /* ---- the accent, which is white ----
     deleoneai.com took the hue out of its accent, so the office does too: the
     current section's icon and a link are WHITE (focus is the lit edge,
     --focus-edge in tokens.css, never white), and the one
     filled control is white with a black label. Nothing here is a colour any
     more; a state that needs one reads the three below. The accent WASH is
     composed from the channel triple so it follows the token, never typed as
     an rgba() the next palette cannot reach. */
  --o-accent:      var(--aqua);         /* #FFFFFF — active, link */
  --o-accent-deep: var(--teal-soft);    /* #FFFFFF — the filled control */
  --o-accent-wash: rgb(var(--aqua-rgb) / 0.08);
  --o-on-accent:   var(--on-accent);    /* #0A0A0A — its label, 19.80:1 */

  /* ---- state. Reserved meanings, never a series colour and never
     decoration. INK for text, MARK for a dot, edge or bar, BG for a ground
     (each wash composited on the canvas, solid for the reason the lines are).
     The word is always printed too: the three hues sit 1.41-1.60:1 apart. */
  --o-ok:       var(--ok);        /* #63B78C — healthy, live, done: 8.33:1 */
  --o-ok-mark:  var(--ok-mark);   /* #2E8B63 — 4.79:1 */
  --o-ok-bg:    #0C1914;          /* ok ink on it 7.42:1 */
  --o-warn:     var(--attn-mark); /* #C9973F — needs attention, a MARK: 7.66:1 */
  --o-warn-ink: var(--attn);      /* #E8C07A — the same, for TEXT: 11.75:1 */
  --o-warn-bg:  #1E1A13;          /* warn ink on it 10.16:1 */
  --o-bad:      var(--bad);       /* #F2837A — failed, overdue, destructive: 7.96:1 */
  --o-bad-mark: var(--bad-mark);  /* #E5534B — 5.44:1 */
  --o-bad-bg:   #22100F;          /* bad ink on it 7.23:1 */
  --o-neutral:  var(--inactive);  /* #7E7E7E — not applicable, cancelled, unknown */

  /* ---- type. Fixed, not clamped: see the header. ---- */
  --o-t-xs:  0.6875rem;   /* 11px — micro labels, chips, badges */
  --o-t-sm:  0.8125rem;   /* 13px — tables, lists, form text */
  --o-t-md:  0.875rem;    /* 14px — body, card titles */
  --o-t-lg:  1rem;        /* 16px — section headings */
  --o-t-xl:  1.25rem;     /* 20px — the view title */
  --o-t-num: 2rem;        /* 32px — a stat value */
  --o-t-hero: 3.25rem;    /* 52px — the one hero figure per view */

  /* ---- geometry. ---- */
  --o-r:     12px;
  --o-r-sm:  8px;
  --o-r-lg:  12px;   /* floating panels (rule 8); the Phase VI block below says the same */
  /* NO CAPSULES (rule 8, 2026-10-15): this was 999px and drew the chips,
     Sent's states, a thread's count, "Write to them", eBay's badge and the
     home's "Sample" tag round-ended. A control is 6px; office-layout fails a
     capsule with words anywhere in the Office. */
  --o-pill:  6px;
  --o-rail-w: 15.5rem;
  --o-pad:   1.25rem;

  /* ---- THE OLD NAMES, POINTED AT THE NEW VALUES ----
     owner.css and portal.css are written against `--app-*` and `--step-*`, and
     they are not wrong — they were written against the palette that existed.
     Re-pointing the names inside these three roots brings both files onto the
     new ground and the new density without editing either, and without any
     risk of the two drifting: there is one definition, here.

     The alternative was find-and-replace across 236 lines of two stylesheets,
     which is how a colour gets missed and one card keeps the old slate. */
  --app-bg:      var(--o-bg);
  --app-surface: var(--o-panel);
  --app-raised:  var(--o-inset);
  --app-text:    var(--o-text);
  --app-mute:    var(--o-dim);
  --app-line:    var(--o-line);
  --app-accent:  var(--o-accent);

  /* The marketing type scale is built for a headline read from a sofa. Same
     reasoning as --o-t-* above, applied to the two pages that ask for the
     steps by their old names. */
  --step--1: 0.8125rem;
  --step-0:  0.875rem;
  --step-1:  1rem;
  --step-2:  1.25rem;
  --step-3:  2rem;
  --step-4:  3.25rem;
}

/* PHASE VI — THE OPERATING SYSTEM PASS (owner brief, 2026-09-30).
   The admin roots only: the client portal keeps its tuning. Same discipline —
   matte, monochrome, colour only for state — with three corrections the
   brief names and the screenshot wall confirmed:
   · THE TYPE WAS ZOOMED OUT. 13px tables and 11px labels read as a developer
     tool squinting to fit. One step up everywhere: body 14, rows 13.5, meta
     11.5, titles 22. Density comes from layout, not from small type.
   · ONE BLACK CANNOT HOLD A HIERARCHY. Chrome (the rail) sits a shade darker
     than the work, so the work comes forward without a single bright card;
     surfaces step up in four small increments.
   · SOFT 12–16px RADII EVERYWHERE READ AS A TEMPLATE. Precision radii: 6 for
     controls, 8 for surfaces, 12 for the rare floating panel. */
#office, #portal, #ebay, #ads {
  /* TRUE NEUTRAL (OF-02, rule 18: no hue). These were #050506, #08090A,
     #0F1012, #15161A, #16171A, #212327, #3B3E43, #B4B5B8 and #8E9095: a blue
     lean in every step, under the public ramp's pure greys. Each is now the
     neutral grey of the same luminance, so every contrast written here holds
     (to within .05). tools/office-ink.mjs holds it. */
  --o-chrome: #050505;
  --o-bg:     #090909;
  --o-panel:  #090909;
  --o-inset:  #101010;
  --o-raised: #161616;
  --o-hover:  rgba(255, 255, 255, 0.045);
  --o-press:  rgba(255, 255, 255, 0.075);
  --o-line:   #171717;
  --o-line-2: #232323;
  --o-line-3: #3E3E3E;
  --o-text:   #ECECEC;
  --o-dim:    #B5B5B5;
  --o-faint:  #909090;
  --o-t-xs:  0.71875rem;  /* 11.5px — meta, badges */
  /* ONE VOICE FOR A LABEL (OF-02). A label is the body face in sentence case,
     quieter than what it labels by size and colour: never capitals, never
     letter-spaced, never mono. Mono is for figures and codes only (a time,
     an amount, TK-0148). tools/office-type.mjs holds it on every view. */
  --o-t-label: 0.78125rem; /* 12.5px — a field's label, a table's head, a group */
  --o-t-sm:  0.84375rem;  /* 13.5px — rows, lists, form text */
  --o-t-md:  0.875rem;    /* 14px — body */
  --o-t-lg:  1rem;        /* 16px — section headings */
  --o-t-xl:  1.375rem;    /* 22px — the page title */
  --o-r:     8px;
  --o-r-sm:  6px;
  --o-r-lg:  12px;
  --o-rail-w: 14.5rem;    /* 232px */
  --o-row:   44px;        /* a list row */
  --o-ease:  cubic-bezier(.2, .7, .2, 1);
}

/* BUTTONS ARE PRECISE, NOT CAPSULES (Phase VI): the admin's controls take the
   6px control radius; the portal keeps its own. */
/* `html` lifts this over §3's capsule rule, which comes later at the same weight. */
html :is(#office, #portal, #ebay, #ads) :is(.ofc-primary, .ofc-ghost, .ofc-quiet) { border-radius: var(--o-r-sm); }

/* ---- THE PAGE'S PRIMARY ACTION, AND DRAWERS (Phase VI) -------------------
   A view's one create action lives in the location bar, shown only on its
   view. Creation opens a drawer from the right: the page stays visible behind
   it (dimmed), so nobody loses their place to fill in a name. */
.ofc-pageact { display: none !important; }
#office[data-view="crm"] .ofc-pageact[data-for~="crm"],
#office[data-view="clients"] .ofc-pageact[data-for~="clients"],
#office[data-view="jobs"] .ofc-pageact[data-for~="jobs"],
#office[data-view="mail"] .ofc-pageact[data-for~="mail"],
#ads .ofc-pageact[data-for~="ads"] { display: inline-flex !important; }
.ofc-pageact::before { content: "+"; margin-right: 0.4rem; font-weight: 500; font-size: 1.05em; }

dialog.ofc-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(30rem, 100vw);
  height: 100dvh;
  max-height: none;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--o-line-2);
  background: var(--o-raised);
  color: var(--o-text);
  box-shadow: -24px 0 60px -30px rgba(0, 0, 0, 0.9);
  overflow: hidden;
}
dialog.ofc-drawer[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); animation: ofc-drawer-in .22s var(--o-ease, ease) both; }
dialog.ofc-drawer::backdrop { background: rgba(0, 0, 0, 0.55); }
@keyframes ofc-drawer-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.ofc-drawer__head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 64px; padding: 0 0.9rem 0 1.4rem;
  border-bottom: 1px solid var(--o-line-2);
}
.ofc-drawer__head h2 { margin: 0; font: 650 var(--o-t-lg)/1.2 var(--display); letter-spacing: -0.012em; }
:is(#office, #portal, #ebay, #ads) .ofc-drawer__x { min-width: 34px; padding: 0; justify-content: center; font-size: 1.25rem; }
.ofc-drawer__body { overflow-y: auto; padding: 1.25rem 1.4rem 2rem; }
.ofc-drawer__body .ofc-fields { grid-template-columns: minmax(0, 1fr) !important; }
/* Already on file (OF-35): who has this phone or email, before a second record is made. */
.ofc-enq-same { margin: 1.1rem 0 1rem; padding: 0.8rem 0.9rem; border: 1px solid var(--o-line-2); border-radius: var(--o-r); font-size: var(--o-t-sm); }
.ofc-enq-same[hidden] { display: none; }
.ofc-enq-same > p { margin: 0; color: var(--o-dim); }
.ofc-enq-same ul { display: grid; margin: 0.5rem 0 0.7rem; padding: 0; list-style: none; border-top: 1px solid var(--o-line); }
.ofc-enq-same li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.6rem; padding: 0.45rem 0; border-bottom: 1px solid var(--o-line); }
.ofc-enq-same li > span { color: var(--o-dim); }
.ofc-enq-same .ofc-ghost { margin-top: 0.7rem; }
@media (prefers-reduced-motion: reduce) { dialog.ofc-drawer[open] { animation: none; } }

/* ---- History (OF-38) ----------------------------------------------------------
   One change a row: when and who on the left, what happened to which record
   and what changed on the right; "was → now", the old value quieter. A
   deletion is the one state with a mark (red). Stacked on a phone. */
#ofc-hist-card > .ofc-card__bar { flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin: 0 0 1rem; }
#ofc-hist-card > .ofc-card__bar > .ofc-addr { margin: 0; }
#ofc-hist-card > .ofc-card__bar .ofc-filter { min-width: 16rem; }
.ofc-hist__for { margin: 0 0 0.75rem; color: var(--o-dim); font-size: var(--o-t-sm); }
.ofc-hist { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--o-line); }
.ofc-hist__r { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 0.25rem 1.25rem; padding: 0.8rem 0; border-bottom: 1px solid var(--o-line); }
.ofc-hist__when { display: grid; align-content: start; gap: 0.1rem; margin: 0; font-size: var(--o-t-sm); font-variant-numeric: tabular-nums; }
/* A DAY IS ONE PIECE (2026-10-17): "16" ended a line and "Oct" began the next on a phone. Every <time> the
   Office and a client's record draw holds a day, a clock or "3 days ago", short enough never to need the break.
   Not the Cloudflare record (.in-shell): its timeline's <time> is a whole entry, up to a hundred characters. */
#office:not(.in-shell) time { white-space: nowrap; }
/* …and a day said inside running text ("They wrote 16 Oct"), which admin/js/day-keep.mjs puts in a span. */
.day-keep { white-space: nowrap; }
.ofc-hist__when time { color: var(--o-text); }
.ofc-hist__who { color: var(--o-dim); }
.ofc-hist__h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.5rem; margin: 0; }
.ofc-hist__op { color: var(--o-dim); }
.ofc-hist__op.is-delete { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--o-bad); }
.ofc-hist__op.is-delete::before { content: ''; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--o-bad-mark); }
.ofc-hist__name { font-weight: 600; color: var(--o-text); overflow-wrap: anywhere; }
a.ofc-hist__name { text-decoration: none; }
a.ofc-hist__name:hover { text-decoration: underline; text-underline-offset: 3px; }
.ofc-hist__only { margin-left: auto; font-size: var(--o-t-xs); }
.ofc-hist__lines { display: grid; gap: 0.2rem; margin: 0.45rem 0 0; font-size: var(--o-t-sm); }
.ofc-hist__lines > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 0.75rem; }
.ofc-hist__lines dt { color: var(--o-dim); }
.ofc-hist__lines dd { margin: 0; color: var(--o-text); overflow-wrap: anywhere; }
.ofc-hist__was { color: var(--o-dim); }
.ofc-hist__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; padding: 0.9rem 0 0; color: var(--o-dim); font-size: var(--o-t-sm); }
.ofc-hist__foot[hidden] { display: none; }
.ofc-lead__hist { margin: 1rem 0 0; font-size: var(--o-t-sm); }
@media (max-width: 40rem) {
  .ofc-hist__r { grid-template-columns: minmax(0, 1fr); }
  .ofc-hist__when { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .ofc-hist__lines > div { grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0.6rem; }
  #ofc-hist-card > .ofc-card__bar > * { flex: 1 1 100%; }
  #ofc-hist-card > .ofc-card__bar .ofc-filter { min-width: 0; width: 100%; }
}

/* ---- Clients (Phase VI) ----------------------------------------------------
   The search sits on the tab row, right-aligned, so the view bar is one line:
   tabs on the left, search on the right. The row actions never wrap. */
#ofc-clients-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 1.5rem; }
#ofc-clients-card > * { grid-column: 1 / -1; }
#ofc-clients-card > .ofc-card__bar { grid-column: 2; grid-row: 1; margin: 0 0 1rem; align-self: end; }
#ofc-clients-card > .ofc-addr { grid-column: 1; grid-row: 1; }
#ofc-clients-card > .ofc-card__bar .ofc-filter { min-width: 16rem; }
#ofc-clients-table td a, #ofc-clients-table td .ofc-linkish { white-space: nowrap; }
#ofc-clients-table td:last-child { white-space: nowrap; }
#ofc-clients-table td:last-child > * { display: inline-flex; vertical-align: middle; margin-right: 0.5rem; }
.ofc-opt { font-style: normal; font-weight: 450; color: var(--o-faint); margin-left: 0.25rem; }
/* A ZERO IS NOT NEWS. A summary figure that reads 0 steps back (office-quiet.mjs
   marks it), so a real number is the one the eye lands on. */
.ofc-stat.is-zero .ofc-stat__n { color: var(--o-faint); }
.ofc-stat.is-zero .ofc-stat__s { color: var(--o-faint); }

/* ---- Projects (Phase VI) ---------------------------------------------------
   Tabs over the table; the site under a project's name is a quiet line, not a
   second link competing with the name; a healthy row says so with a dash. */
#ofc-jb-tabs { margin-bottom: 0.25rem; }
/* Nothing recorded is a word at a zero's grey, never the hairline's (1.88:1, Q-04). */
#ofc-jb-table td > .ofc-none { margin: 0; color: var(--o-faint); }
#ofc-jb-table td small { display: block; margin-top: 0.15rem; font-size: var(--o-t-xs); color: var(--o-faint); font-weight: 450; }
#ofc-jb-table td small .ofc-linkish { color: var(--o-faint); text-decoration: none; }
#ofc-jb-table td small .ofc-linkish:hover { color: var(--o-text); text-decoration: underline; }
#ofc-jb-table td:first-child { font-weight: 600; color: var(--o-text); }
#ofc-jb-table td:nth-child(5) { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* The quiet button's own 28px (OF-02). Its height was taken to 0 to keep the
   old 32px rows short, which left an 18.7px target; a row is 44px now. */
#ofc-jb-table .ofc-jb-act .ofc-quiet { padding: 0 0.5rem; }

/* ---- Requests (Phase VI) ---------------------------------------------------
   Tabs over the list. A row is the request, whose it is, and one quiet meta
   line; the due day and "Write to them" are words that act, not boxed fields;
   the state select is the one control at the row's end. */
#ofc-req-tabs { margin-bottom: 0.25rem; }
#office .ofc-req { padding: 0.85rem 0.25rem; align-items: center; }
#office .ofc-req:hover { background: var(--o-hover); }
#office .ofc-req__m { gap: 0.25rem 0.9rem; align-items: center; margin-top: 0.15rem; }
#office .ofc-req__link { text-decoration: none; }
#office .ofc-req__link:hover { text-decoration: underline; }
/* A ROW'S ACTION IS THE OFFICE'S LINK, UNDERLINED AT REST (OF-02), as
   Enquiries' Email, Call and Spam are. Write to them and the due day were
   underlined only under a pointer, so beside "asked 14 Oct" they read as
   more of the date line, and a phone, which has no pointer, never showed
   them as anything to press. */
#office .ofc-req__write,
.ofc-req__duebtn { min-height: 24px; padding: 0; border: 0; background: none; border-radius: 0;
  color: var(--o-dim); font: 500 var(--o-t-xs)/24px var(--body, inherit); cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--o-line-3); text-underline-offset: 3px; }
#office .ofc-req__write:hover, .ofc-req__duebtn:hover { color: var(--o-text); text-decoration-color: currentColor; }
.ofc-req__duebtn:focus-visible { outline: 1px solid var(--focus-edge); outline-offset: 2px; }
.ofc-req__duebtn.is-empty { color: var(--o-faint); }
.ofc-req__due.is-late .ofc-req__duebtn { color: var(--o-warn-ink); }
.ofc-req__due.is-late .ofc-req__duebtn::before { content: ''; display: inline-block; width: 0.45rem; height: 0.45rem; margin-right: 0.4rem; border-radius: 50%; vertical-align: 0.1em; background: var(--o-warn); }
/* They wrote about it and we have not answered (2026-10-16): a state, so a word after its mark. */
#office .ofc-req__wait { color: var(--o-warn-ink); font-weight: 600; line-height: 24px; }
#office .ofc-req__wait::before { content: ''; display: inline-block; width: 0.45rem; height: 0.45rem; margin-right: 0.4rem; border-radius: 50%; vertical-align: 0.1em; background: var(--o-warn); }
#office .ofc-req > .ofc-input--sm { min-width: 8.5rem; background-color: transparent; border-color: var(--o-line-2); }

/* ---- Money (Phase VI) -------------------------------------------------------
   States are upright words with a mark, not italics; a $0 steps back, to the
   quiet grey a zero is everywhere else in the Office (it was the hairline's
   #3E3E3E, 1.88:1: faded, office-wall found it, Q-04); the row's way out to
   Stripe is a quiet link (.ofc-rowlink), not a capsule per row. */
#office .ofc-lines td.is-overdue, #office .ofc-lines td.is-unpriced { font-style: normal; }
/* An invoice's state is a word after its mark: red overdue, amber due soon. */
#office .ofc-lines td:is(.is-overdue, .is-unpriced) > .ofc-inv__st::before { content: ''; display: inline-block; width: 0.45rem; height: 0.45rem; margin-right: 0.4rem; border-radius: 50%; vertical-align: 0.1em; background: var(--o-warn); }
#office .ofc-lines td.is-overdue > .ofc-inv__st::before { background: var(--o-bad-mark); }
#office .ofc-lines td.num.is-zero { color: var(--o-faint); }
#ofc-inv-tabs { margin-bottom: 0.25rem; }
.ofc-rowlink { display: inline-flex; align-items: center; min-height: 24px; color: var(--o-dim);
  font-size: var(--o-t-sm); font-weight: 500; text-decoration: none; white-space: nowrap; }
.ofc-rowlink::after { content: '\2197'; margin-left: 0.3rem; font-size: 0.85em; color: var(--o-faint); }
.ofc-rowlink:hover { color: var(--o-text); text-decoration: underline; text-underline-offset: 3px; }
.ofc-rowlink:focus-visible { outline: 1px solid var(--focus-edge); outline-offset: 2px; border-radius: 2px; }
#ofc-inv-table td:last-child, #ofc-plans-table td:last-child { text-align: right; }
.ofc-foot { margin: 1rem 0 0; font-size: var(--o-t-xs); color: var(--o-faint); max-width: 70ch; }
.ofc-foot a { color: var(--o-dim); }

/* ---- Mailbox (Phase VI) -----------------------------------------------------
   One bar: address tabs left; filter, unread, mark-all and help right. Compose
   docks bottom-right over the page, non-modal — the list and the message you
   are answering stay readable and usable beside it. */
.ofc-pageact[data-for="mail"]::before { content: none; }

#office .ofc-addr__n.is-unread { color: var(--o-text); font-weight: 650; }

#office #ofc-mail-count { border: 0; padding: 0; margin-top: 0.75rem; font-size: var(--o-t-xs); color: var(--o-faint); }

/* ---- Settings (Phase VI) ----------------------------------------------------
   Facts as a key/value list on hairlines, not three boxed pills; the limits
   behind a summary. */
#office .ofc-kv { list-style: none; margin: 0; padding: 0; gap: 0; border-top: 1px solid var(--o-line); }
#office .ofc-kv li { display: grid; grid-template-columns: minmax(9rem, 14rem) minmax(0, 1fr); gap: 1rem; padding: 0.7rem 0;
  border: 0; border-bottom: 1px solid var(--o-line); border-radius: 0; background: none; font-weight: 500; }
#office .ofc-kv li > span { color: var(--o-faint); }
#office .ofc-kv li > b { font-weight: 550; color: var(--o-text); overflow-wrap: anywhere; }
/* CONNECTIONS (Settings, OF-55): the state in its own ink after a dot, as the
   queue says one; quiet is plain words. What it rests on is quieter. */
#office .ofc-conn__st[data-tone="ok"] { color: var(--o-ok); }
#office .ofc-conn__st[data-tone="attn"] { color: var(--o-warn-ink); }
#office .ofc-conn__st[data-tone="bad"] { color: var(--o-bad); }
#office .ofc-conn__st:not([data-tone="quiet"])::before { content: ''; display: inline-block; width: 0.45rem; height: 0.45rem;
  margin-right: 0.4rem; border-radius: 50%; vertical-align: 0.1em; background: var(--o-ok-mark); }
#office .ofc-conn__st[data-tone="attn"]::before { background: var(--o-warn); }
#office .ofc-conn__st[data-tone="bad"]::before { background: var(--o-bad-mark); }
#office .ofc-conn__d { font-weight: 400; color: var(--o-dim); }
#ofc-settings-card .ofc-actions { margin-top: 1rem; }
#ofc-sample-wrap { margin-top: 1.75rem; }
#office .ofc-limits, #ebay .eby-limits { border: 0; padding: 0; }
#office .ofc-limits > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.5rem; min-height: 24px; }
#office .ofc-limits > summary::-webkit-details-marker { display: none; }
#office .ofc-limits > summary h2 { margin: 0; font-size: var(--o-t-md); color: var(--o-dim); font-weight: 600; }
#office .ofc-limits > summary::after { content: '+'; color: var(--o-faint); }
#office .ofc-limits[open] > summary::after { content: '\2212'; }
#office .ofc-limits > summary:hover h2 { color: var(--o-text); }
#office .ofc-limits[open] > .ofc-cannot { margin-top: 1rem; }
/* In the enquiry pane (what they told the chat) the column is narrow, so the
   label takes what it needs and the value the rest. */
#office #ofc-lead-detail .ofc-kv li { grid-template-columns: minmax(6rem, 38%) minmax(0, 1fr); padding: 0.55rem 0; }
@media (max-width: 40rem) { #office .ofc-kv li { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; } }

/* ---- the palette, with records (Phase VI) ---------------------------------- */
.ofc-palette ul { max-height: min(60vh, 28rem); overflow-y: auto; }
.ofc-palette li { display: flex; align-items: baseline; gap: 0.5rem; }
.ofc-palette li > span { flex: none; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ofc-palette li > em { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ofc-palette__kind { flex: none; min-width: 4.6rem; font-size: var(--o-t-label); font-weight: 500; color: var(--o-faint); }
.ofc-palette__note { margin: 0.5rem 0.25rem 0; font-size: var(--o-t-xs); color: var(--o-faint); }
.ofc-palette__note:empty { display: none; }
.ofc-palette li.ofc-palette__none { color: var(--o-faint); cursor: default; }

/* ---- lists by keyboard (Phase VI; office-keys.mjs) -------------------------
   The row with focus carries the lit edge, inside it; ? opens the keys the
   list answers, in the Mailbox help's own shape. */
#office :is(#ofc-clients-body, #ofc-jb-body, #ofc-inv-body, #ofc-plans-body) tr:focus { outline: none; }
#office :is(#ofc-clients-body, #ofc-jb-body, #ofc-inv-body, #ofc-plans-body) tr:focus-visible,
#office .ofc-req:focus-visible { outline: 1px solid var(--focus-edge); outline-offset: -1px; background: var(--o-hover); }
#office .ofc-req:focus { outline: none; }
/* An enquiry's row reached by j/k (OF-12): the lit edge, as every list's. */
#office .ofc-q:focus { outline: none; }
#office .ofc-q:focus-visible { outline: 1px solid var(--focus-edge); outline-offset: -1px; background: var(--o-hover); }
#office .ofc-req:focus-visible { outline: 1px solid var(--focus-edge); }
.ofc-keys { margin: 0 0 1rem; padding: 0.8rem 1rem; border: 1px solid var(--o-line-2); border-radius: var(--o-r); background: var(--o-inset); }
.ofc-keys dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.4rem 1.5rem; margin: 0; font-size: var(--o-t-sm); }
.ofc-keys dl > div { display: flex; align-items: baseline; gap: 0.6rem; }
.ofc-keys dt { flex: 0 0 auto; display: flex; gap: 0.25rem; }
.ofc-keys dd { margin: 0; color: var(--o-dim); }
.ofc-keys kbd { min-width: 1.5rem; padding: 0.1rem 0.35rem; border: 1px solid var(--o-line); border-bottom-width: 2px; border-radius: 5px;
  background: var(--o-bg); font: 650 0.72rem/1.5 var(--mono, ui-monospace, monospace); color: var(--o-text); text-align: center; }

/* A CLEAR HERO IS NOT A HEADLINE (Phase VI). "0 overdue" in 64px green was the
   biggest thing on a healthy page. Clear keeps its green dot — the state is
   still said — and the figure drops to the size of its neighbours. */
#office .ofc-stat--hero.is-clear .ofc-stat__n { font-size: 1.625rem; color: var(--o-faint); }
.ofc-stat--hero.is-clear { flex: 0 1 auto; }

section[data-view="crm"] > .ofc-grid.is-bare > :is(#ofc-lead-card, #ofc-speed-card) { display: none; }
section[data-view="crm"] > .ofc-grid.is-bare .ofc-mode { display: none; }
section[data-view="crm"] > .ofc-grid.is-bare #ofc-crm-q { display: none; }
@media (min-width: 62.01rem) { section[data-view="crm"] > .ofc-grid.is-bare { grid-template-columns: minmax(0, 1fr); } }
/* ---- Enquiries: the queue + inspector (Phase VI, OF-32) --------------------
   The queue on the left; on the right the inspector: the open enquiry, moved
   from its own stage button, and speed-to-lead as a small insight. Below
   62rem the grid's own rule stacks them (list, then inspector). */
@media (min-width: 62.01rem) {
  section[data-view="crm"] > .ofc-grid { grid-template-columns: minmax(0, 1fr) minmax(20rem, 26rem); grid-template-rows: auto auto 1fr; column-gap: 2rem; row-gap: 1rem; }
  #ofc-crm-card { grid-column: 1; grid-row: 1 / span 3; }
  /* NOT STICKY. The enquiry card stuck to the top while "Work a lead" and
     "Speed to lead" scrolled up underneath it, and a pane taller than the
     window could not show its own foot (the filed conversation, OF-25).
     Opening an enquiry focuses the pane, which brings it into view. */
  #ofc-lead-card, #ofc-speed-card { grid-column: 2; }
  #ofc-lead-card { grid-row: 1; }
  #ofc-speed-card { grid-row: 2; }
}
#ofc-lead-card, #ofc-speed-card {
  padding: 1rem 1.1rem;
  border: 1px solid var(--o-line-2);
  border-radius: var(--o-r);
  background: var(--o-inset);
}
#ofc-lead-card > .ofc-sub, #ofc-speed-card > .ofc-sub { display: none; }
/* The page header already names the view; the list needs no second title.
   Its view bar is one line: the List/Pipeline switch, then search at the right. */
#ofc-crm-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 1rem; }
#ofc-crm-card > * { grid-column: 1 / -1; }
#ofc-crm-card > .ofc-card__bar { grid-column: 2; grid-row: 1; margin: 0 0 0.85rem; justify-content: flex-end; }
#ofc-crm-card > .ofc-card__bar > div { display: none; }
#ofc-crm-card > .ofc-mode { grid-column: 1; grid-row: 1; }
/* At 320 the search shared a line with List and Pipeline and cut its own
   words to "Search enquirie"; under 24rem it takes the line under them
   (2026-10-16). */
@media (max-width: 24rem) {
  #ofc-crm-card > .ofc-card__bar { grid-column: 1 / -1; grid-row: 2; }
}
#ofc-crm-card > .ofc-card__bar .ofc-filter { min-width: 16rem; }
/* The inspector names the enquiry itself; "The enquiry" above it said nothing.
   Focus lands on the panel when a row opens it; the row's selection is the
   indicator, so the panel draws no second ring. */
#ofc-lead-card > h2 { display: none; }
#ofc-lead-detail:focus { outline: none; }
#ofc-speed-card .ofc-stats { margin: 0; padding: 0; border: 0; gap: 1.5rem; }
#ofc-speed-card .ofc-stat__n { font-size: 1.25rem; }

/* The mode switch: a two-way segmented control, quiet. */
.ofc-mode { display: inline-flex; gap: 2px; padding: 2px; margin: 0 0 0.85rem; border: 1px solid var(--o-line-2); border-radius: var(--o-r); background: var(--o-inset); }
:is(#office, #portal, #ebay, #ads) .ofc-mode__b {
  min-height: 28px; padding: 0 0.75rem; border: 0; border-radius: var(--o-r-sm);
  background: transparent; box-shadow: none; color: var(--o-faint);
  font: 550 var(--o-t-xs)/1 var(--body); cursor: pointer;
}
:is(#office, #portal, #ebay, #ads) .ofc-mode__b[aria-pressed="true"] { background: var(--o-press); color: #FFFFFF; }

/* LIST MODE IS THE QUEUE (OF-32): one row per enquiry, most urgent first.
   A row is three short lines: who (and how many unread), what they want,
   how to reach them and where they came from; at its right what needs doing
   and since when, the moves under it, and the stage, which opens the
   picker. */
.ofc-board[data-mode="list"] { display: block !important; overflow: visible !important; }
.ofc-q__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--o-line); }
.ofc-q {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: "main side stage" "main do stage";
  align-items: start;
  column-gap: 1rem;
  row-gap: 0.2rem;
  padding: 0.6rem 0.6rem 0.6rem 0.75rem;
  border-bottom: 1px solid var(--o-line);
}
.has-stars .ofc-q {
  grid-template-columns: 1.5rem minmax(0, 1fr) auto auto;
  grid-template-areas: "star main side stage" "star main do stage";
  column-gap: 0.85rem;
  padding-left: 0.35rem;
}
.ofc-q:hover { background: var(--o-hover); }
.ofc-q.is-on { background: var(--o-press); box-shadow: inset 2px 0 0 var(--o-accent); }
:is(#office, #portal, #ebay, #ads) .ofc-q__star,
:is(#office, #portal, #ebay, #ads) .ofc-lead__star {
  grid-area: star;
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; min-height: 24px; height: 24px; padding: 0;
  border: 0; border-radius: var(--o-r-sm);
  background: none; box-shadow: none;
  color: var(--o-faint); font: 400 1rem/1 var(--body);
  cursor: pointer;
}
:is(#office, #portal, #ebay, #ads) :is(.ofc-q__star, .ofc-lead__star):hover { color: var(--o-text); background: var(--o-hover); }
:is(#office, #portal, #ebay, #ads) :is(.ofc-q__star, .ofc-lead__star)[aria-pressed="true"] { color: #FFFFFF; }
:is(#office, #portal, #ebay, #ads) :is(.ofc-q__star, .ofc-lead__star):active { background: var(--o-press); transform: none; }
:is(#office, #portal, #ebay, #ads) :is(.ofc-q__star, .ofc-lead__star):disabled { background: none; color: var(--o-faint); cursor: default; }
:is(#office, #portal, #ebay, #ads) .ofc-q__open {
  grid-area: main;
  display: grid; gap: 0.15rem;
  min-width: 0; min-height: 0;
  margin: 0; padding: 0;
  border: 0; border-radius: var(--o-r-sm);
  background: none; box-shadow: none;
  color: inherit; font: inherit; text-align: left;
  cursor: pointer;
}
:is(#office, #portal, #ebay, #ads) .ofc-q__open:active { background: none; transform: none; }
.ofc-q__l1 { display: flex; align-items: baseline; gap: 0.55rem; min-width: 0; }
.ofc-q__name { overflow: hidden; color: var(--o-text); font: 600 var(--o-t-sm)/1.35 var(--body); text-overflow: ellipsis; white-space: nowrap; }
.ofc-q__unread { flex: none; color: var(--o-text); font: 600 var(--o-t-xs)/1.35 var(--body); }
.ofc-q__what { overflow: hidden; color: var(--o-dim); font: 400 var(--o-t-sm)/1.35 var(--body); text-overflow: ellipsis; white-space: nowrap; }
.ofc-q__meta { overflow: hidden; color: var(--o-faint); font: 400 var(--o-t-xs)/1.4 var(--body); text-overflow: ellipsis; white-space: nowrap; }
.ofc-q__side { grid-area: side; display: grid; justify-items: end; gap: 0.15rem; text-align: right; white-space: nowrap; }
.ofc-q__when { color: var(--o-faint); font: 400 var(--o-t-xs)/1.35 var(--body); }
.ofc-q__next { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--o-dim); font: 500 0.75rem/1.35 var(--body); }
.ofc-q__next.is-attn { color: var(--o-warn-ink); font-weight: 600; }
.ofc-q__next.is-attn::before { content: ''; flex: none; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--o-warn); }
.ofc-q__next.is-money { color: var(--o-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.ofc-q__acts { display: contents; }
:is(#office, #portal, #ebay, #ads) :is(.ofc-q__stage, .ofc-lead__stage) {
  grid-area: stage;
  align-self: center;
  display: inline-flex; align-items: center; gap: 0.45rem;
  min-height: 28px; padding: 0 0.6rem 0 0.7rem;
  border: 1px solid var(--o-line-3); border-radius: var(--o-r-sm);
  background: var(--o-inset); box-shadow: none;
  color: var(--o-text); font: 550 var(--o-t-label)/1 var(--body);
  white-space: nowrap; cursor: pointer;
}
:is(#office, #portal, #ebay, #ads) :is(.ofc-q__stage, .ofc-lead__stage)::after {
  content: ''; width: 10px; height: 6px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23909090' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
:is(#office, #portal, #ebay, #ads) :is(.ofc-q__stage, .ofc-lead__stage):hover:not(:disabled) { border-color: var(--o-line-4); }
:is(#office, #portal, #ebay, #ads) :is(.ofc-q__stage, .ofc-lead__stage):active { background: var(--o-inset); transform: none; }
:is(#office, #portal, #ebay, #ads) :is(.ofc-q__stage, .ofc-lead__stage)[aria-expanded="true"] { border-color: var(--focus-edge); }
:is(#office, #portal, #ebay, #ads) :is(.ofc-q__stage, .ofc-lead__stage):disabled { background: var(--o-inset); color: var(--o-dim); cursor: default; }
:is(#office, #portal, #ebay, #ads) :is(.ofc-q__stage, .ofc-lead__stage):disabled::after { display: none; }
.ofc-q__do { grid-area: do; display: flex; justify-content: flex-end; gap: 0.85rem; }
:is(#office, #portal, #ebay, #ads) .ofc-q__act {
  display: inline-flex; align-items: center;
  min-height: 24px; padding: 0;
  border: 0; border-radius: 0;
  background: none; box-shadow: none;
  color: var(--o-dim); font: 500 var(--o-t-xs)/1 var(--body);
  text-decoration: underline; text-decoration-color: var(--o-line-3); text-underline-offset: 3px;
  white-space: nowrap; cursor: pointer;
}
:is(#office, #portal, #ebay, #ads) .ofc-q__act:hover { color: #FFFFFF; text-decoration-color: currentColor; }
:is(#office, #portal, #ebay, #ads) .ofc-q__act:active { background: none; transform: none; }
:is(#office, #portal, #ebay, #ads) .ofc-q__act:disabled { background: none; color: var(--o-faint); cursor: progress; }
.ofc-q__none { margin: 0; padding: 1rem 0.75rem; border-top: 1px solid var(--o-line); color: var(--o-faint); font-size: var(--o-t-sm); }
.ofc-board[data-mode="list"] .ofc-board__sum { margin: 0 0 0.6rem; font-size: var(--o-t-xs); color: var(--o-dim); }
.ofc-board[data-mode="list"] .ofc-board__sum strong { color: var(--o-text); font-size: var(--o-t-sm); font-variant-numeric: tabular-nums; }
/* ON A PHONE A ROW IS FOUR LINES: who, what they want, what needs doing and
   since when, then the stage and the moves. How to reach them is the moves. */
@media (max-width: 40rem) {
  .ofc-q, .has-stars .ofc-q {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "main" "side" "acts";
    row-gap: 0.35rem;
    padding: 0.7rem 0.6rem;
  }
  .has-stars .ofc-q { grid-template-columns: 1.5rem minmax(0, 1fr); grid-template-areas: "star main" ". side" ". acts"; column-gap: 0.6rem; padding-left: 0.3rem; }
  .ofc-q__meta { display: none; }
  .ofc-q__side { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; gap: 0 0.6rem; text-align: left; }
  .ofc-q__acts { grid-area: acts; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.1rem; }
  :is(#office, #portal, #ebay, #ads) .ofc-q__stage { grid-area: auto; min-height: 36px; }
  .ofc-q__do { grid-area: auto; gap: 1.1rem; }
  :is(#office, #portal, #ebay, #ads) .ofc-q__act { min-height: 36px; font-size: var(--o-t-label); }
}

/* THE QUEUE'S TOOLS: the tabs (the Office's underline strip), then the
   filters at the left and the order at the right, one line. A filter is a
   6px control, never a capsule; the one pressed is edged in white. */
#ofc-crm-card > .ofc-addr { margin-bottom: 0.6rem; }
.ofc-crm__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin: 0 0 0.7rem; }
.ofc-crm__tools:not(:has(> :not([hidden]))) { display: none; }
.ofc-crm__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ofc-crm__chips[hidden] { display: none; }
:is(#office, #portal, #ebay, #ads) .ofc-crm__chip {
  display: inline-flex; align-items: center; gap: 0.45rem;
  min-height: 28px; padding: 0 0.6rem;
  border: 1px solid var(--o-line-3); border-radius: var(--o-r-sm);
  background: var(--o-inset); box-shadow: none;
  color: var(--o-dim); font: 550 var(--o-t-label)/1 var(--body);
  white-space: nowrap; cursor: pointer;
}
:is(#office, #portal, #ebay, #ads) .ofc-crm__chip:hover { border-color: var(--o-line-4); color: var(--o-text); }
:is(#office, #portal, #ebay, #ads) .ofc-crm__chip:active { background: var(--o-inset); transform: none; }
:is(#office, #portal, #ebay, #ads) .ofc-crm__chip[aria-pressed="true"] { border-color: #FFFFFF; background: var(--o-press); color: #FFFFFF; }
.ofc-crm__chipn { color: var(--o-text); font-variant-numeric: tabular-nums; }
.ofc-crm__sort { display: inline-flex; align-items: center; gap: 0.5rem; margin-left: auto; color: var(--o-faint); font: 500 var(--o-t-label)/1 var(--body); }
.ofc-crm__sort[hidden] { display: none; }
:is(#office, #portal, #ebay, #ads) .ofc-crm__sort select { min-height: 28px; padding-top: 0; padding-bottom: 0; font-size: var(--o-t-label); }
.ofc-crm__msg { margin: 0 0 0.7rem; color: var(--o-text); font-size: var(--o-t-sm); }
.ofc-crm__msg[hidden] { display: none; }
.ofc-crm__msg .ofc-linkish { padding: 0.15rem 0; }

/* THE OPEN ENQUIRY (OF-34). Its head: the star, the name and Rename, the
   stage; under them what needs doing and since when, and the site. Then the
   one move that answers it with the rest beside it, the three tabs, and the
   tab's panel. */
.ofc-lead__head { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.35rem; }
.ofc-lead__head .ofc-lead__h { flex: 1 1 auto; min-width: 0; margin: 0; overflow-wrap: anywhere; }
/* The name gives way on a phone; the star keeps its 24px. */
.ofc-lead__head > .ofc-lead__star { flex: none; }
:is(#office, #portal, #ebay, #ads) .ofc-lead__rename {
  flex: none; min-height: 24px; padding: 0 0.3rem;
  border: 0; border-radius: var(--o-r-sm); background: none; box-shadow: none;
  color: var(--o-faint); font: 500 var(--o-t-xs)/1 var(--body);
  text-decoration: underline; text-decoration-color: var(--o-line-3); text-underline-offset: 3px; cursor: pointer;
}
:is(#office, #portal, #ebay, #ads) .ofc-lead__rename:hover { color: var(--o-text); background: none; }
:is(#office, #portal, #ebay, #ads) .ofc-lead__rename:active { background: none; transform: none; }
.ofc-lead__renaming { flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; min-width: 0; }
.ofc-lead__renaming .ofc-input { flex: 1 1 12rem; min-width: 0; min-height: 32px; font-size: var(--o-t-sm); }
.ofc-lead__says { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.75rem; margin: 0 0 0.2rem; }
.ofc-lead__when2 { color: var(--o-faint); font-size: var(--o-t-xs); }
#ofc-lead-detail .ofc-lead__scope { margin: 0 0 0.75rem; font-size: var(--o-t-sm); }
.ofc-lead__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin: 0 0 0.9rem; }
.ofc-lead__acts .ofc-lead__msg { flex: 1 1 100%; }
:is(#office, #portal, #ebay, #ads) .ofc-lead__go { min-height: 32px; padding: 0 0.9rem; }
.ofc-lead__moves { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin: 0; }
#ofc-lead-detail > .ofc-lead__tabs { margin: 0 0 0.9rem; }
.ofc-lead__panel:focus { outline: none; }
.ofc-lead__panel:focus-visible { outline: 1px solid var(--focus-edge); outline-offset: 4px; border-radius: var(--o-r-sm); }
.ofc-lead__panel > .ofc-lead__sub:first-child { margin-top: 0; }
.ofc-lead__goal { margin: 0; color: var(--o-text); line-height: 1.55; overflow-wrap: anywhere; text-wrap: pretty; }
.ofc-lead__none { margin: 0; color: var(--o-dim); font-size: var(--o-t-sm); }
.ofc-lead__msg { margin: 0; color: var(--o-dim); font-size: var(--o-t-xs); }
.ofc-lead__msg:empty { display: none; }
#ofc-lead-detail .ofc-tot > div.is-due dd small { color: var(--o-warn-ink); }
/* Recent: the last five things, either way, one line each. */
.ofc-lead__recent { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--o-line); }
.ofc-lead__recent li { display: grid; grid-template-columns: 5.5rem 4.5rem minmax(0, 1fr); align-items: baseline; gap: 0.6rem; padding: 0.5rem 0; border-bottom: 1px solid var(--o-line); font-size: var(--o-t-sm); }
.ofc-lead__rk { color: var(--o-dim); }
.ofc-lead__unfiled { margin: 0.6rem 0 0; color: var(--o-dim); font-size: var(--o-t-sm); overflow-wrap: anywhere; }
.ofc-lead__rw { color: var(--o-faint); font-size: var(--o-t-xs); font-variant-numeric: tabular-nums; }
.ofc-lead__rt { overflow: hidden; color: var(--o-text); text-overflow: ellipsis; white-space: nowrap; }
a.ofc-lead__rt { text-decoration: none; }
a.ofc-lead__rt:hover { text-decoration: underline; text-underline-offset: 3px; }
/* What their address sent that nobody filed, above the conversation. */
.ofc-lead__loose { margin: 0.6rem 0 0.25rem; }
.ofc-lead__loose:empty { display: none; }
.ofc-lead__panel > .ofc-note { margin: 0 0 0.5rem; }
.ofc-lead__panel > .ofc-lead__unconfirmed { margin: 0.75rem 0 0; }
/* The conversation's answer, under it. */
.ofc-lead__panel > .ofc-convo { margin: 0.5rem 0 0; }
.ofc-lead__convfoot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin: 1rem 0 0; padding: 0.9rem 0 0; border-top: 1px solid var(--o-line); }
.ofc-lead__to { color: var(--o-faint); font-size: var(--o-t-xs); overflow-wrap: anywhere; }
/* Add a note: the field, then its button, then what happened. */
.ofc-lead__addnote { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 0.5rem; margin: 0 0 0.75rem; }
.ofc-lead__addnote textarea { width: 100%; min-height: 3.2rem; padding: 0.5rem 0.6rem; line-height: 1.5; resize: vertical; font: 400 var(--o-t-sm)/1.5 var(--body); }
.ofc-lead__addnote .ofc-lead__msg { grid-column: 1 / -1; }
.ofc-lead__notelist { display: grid; gap: 0.5rem; }
.ofc-lead__notelist .ofc-lead__notes + .ofc-lead__notes { margin-top: 0; }
@media (max-width: 40rem) {
  .ofc-lead__recent li { grid-template-columns: minmax(0, 1fr) auto; }
  .ofc-lead__recent .ofc-lead__rt { grid-column: 1 / -1; }
  .ofc-lead__addnote { grid-template-columns: minmax(0, 1fr); }
}

/* Table links read as names, not as underlined hyperlinks (Phase VI): the
   row is the affordance, the underline arrives on hover. An ACTION in a row
   (.ofc-linkish: "Preview as client", "Invite") is a verb, not a name, and
   keeps the Office's link underline whether it is an <a> or a <button>, so
   the two in one row look alike (OF-02). */
:is(#office, #portal, #ebay, #ads) :is(.ofc-lines, .ofc-table, table) a:not(.ofc-primary):not(.ofc-ghost):not(.ofc-linkish) {
  text-decoration: none;
}
:is(#office, #portal, #ebay, #ads) :is(.ofc-lines, .ofc-table, table) a:not(.ofc-primary):not(.ofc-ghost):not(.ofc-linkish):hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ==========================================================================
   2. THE FRAME

   Full viewport, three panes, and the CONTENT is the only thing that scrolls.
   A dashboard whose rail scrolls away is a dashboard where navigation is a
   scroll-to-top away, which is a menu bar with extra steps.
   ========================================================================== */

/* app.css writes phone padding onto <body> and it is wrong here. Same :has()
   mechanism the sign-in split already uses, so the field app is unaffected. */
body:has(#office), body:has(#portal), body:has(#ebay), body:has(#ads) {
  padding: 0;
  /* deleoneai.com's canvas, the same #070707 the shell roots paint, so nothing
     at the edge of a short screen shows a second black. It was #000000, a
     true black the public site does not use. */
  background: var(--paper);
  /* THE BASE IS NOT SET HERE, AND IT LOOKED AS THOUGH IT WERE.
     `font-size: var(--o-t-md)` sat on this rule from `2b5dcd8` (2026-08-09)
     until 2026-08-15 and was dead every one of those six days — the date came
     from `git log -S`, not from an impression. The `--o-*` tokens are declared
     on the shell roots, and custom properties inherit DOWNWARDS, so
     the parent of those roots cannot see a token its own child defines. The
     declaration resolved to nothing and was dropped, exactly as `--o-t-s` was
     in `.ofc-board__money`.
     Everything else in this rule worked, which is what made it invisible —
     `line-height: 1.45` computed against the browser's 16px and the background
     painted, so the rule plainly matched and only the one declaration died.
     The base now lives on the roots below, where the token is in scope.

     AND REMOVING IT MOVED `body` ITSELF, which is worth stating because it is
     not obvious and was measured rather than predicted: 16px → 17.6px. A
     `var()` naming an undefined property is invalid at computed-value time,
     and for an inherited property that means the declaration computes to
     `inherit` — it does NOT fall through to the next rule in the cascade. So
     the dead line was still MASKING `app.css`'s `body { font-size:
     var(--step-0) }` and pinning body to the browser default. With it gone,
     app.css applies, which is what every other page in this app already gets.
     Nothing visible rides on it: these three pages carry only their root
     `<main>`, a `<noscript>` and two `<script>`s, nothing is ever appended to
     `body`, and `rem` is relative to `html` regardless — so the whole
     observable difference is the size of "This app needs JavaScript." on a
     page with JavaScript turned off. */
  line-height: 1.45;
}

#office, #portal, #ebay, #ads {
  /* 14px, not --step-0's clamp. Every size in this file is relative to it —
     true here, and not true where this line used to be. Moving it is a no-op
     on today's markup and was measured rather than assumed: 447 visible text
     elements across the six office views, and the static chrome of the owner
     and portal pages, all resolve their own size from the rem ramp, so 0 of
     them changed. It matters for the NEXT element that does not set a size —
     which is what `.ofc-board__money` turned out to be. `app-tokens --check`
     now fails any `html`/`body` rule that references an `--o-*` token, so this
     particular hole cannot be dug again. */
  font-size: var(--o-t-md);
}

/* #ads IS THE SAME SHELL. ads.html is a sibling of office.html — same rail,
   same grid, same views — and duplicating these rules under a second id is how
   two screens of one product start drifting apart a pixel at a time. The id
   list above is the extension point; this joins it. */
#office, #ads, #ebay {
  display: grid;
  grid-template-columns: var(--o-rail-w) minmax(0, 1fr);
  /* dvh, so the rail is not cut off by a mobile browser's own chrome. */
  height: 100dvh;
  max-width: none;
  margin: 0;
  padding: 0;
  color: var(--o-text);
  overflow: hidden;
}

/* THE OTHER THREE ARE PAGES. They have no rail and no section router — the
   owner screen is one long read, the portal is one customer's project, and the
   eBay console is one shop — so they get a measure and the document scrolls,
   which is what they had before body.padding went to zero for the office's
   sake.

   ADDING A ROOT MEANS ADDING IT TO EVERY LIST IN THIS FILE, and that is the
   trap #ebay walked into first: the `--o-*` and `--app-*` tokens are declared
   on these roots and custom properties inherit DOWNWARDS, so a new root that
   is not on the list resolves every var() to nothing. The page renders — at
   the browser's own font size, on the browser's own white — which reads as a
   missing stylesheet rather than as a missing selector. */
#portal {
  max-width: 78rem;
  margin: 0 auto;
  padding: 1.25rem clamp(1rem, 3vw, 2rem) 4rem;
  color: var(--o-text);
}

/* The content pane. `minmax(0, 1fr)` above and `min-width: 0` here are both
   load-bearing: without them a wide table inside a grid child refuses to
   shrink and pushes the whole layout sideways. */
.ofc-main {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  overflow: hidden;
}

.ofc-scroll {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.15rem clamp(1rem, 2.2vw, 1.9rem) 3rem;
  scrollbar-color: var(--o-line-2) transparent;
}

/* ---- the rail ---------------------------------------------------------- */

/* One hairline is the whole treatment. A rail that needs a shadow to separate
   itself from the content is a rail whose content is not black. */
.ofc-rail {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 0;
  /* Chrome recedes: the rail is a shade darker than the work beside it. */
  background: var(--o-chrome, var(--o-bg));
  border-right: 1px solid var(--o-line-2);
}

.ofc-rail__brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 0.9rem;
  border-bottom: 1px solid var(--o-line);
  color: var(--o-text);
  text-decoration: none;
}

/* THE PUBLIC MARK, NOT THE APP-ICON TILE. This was /admin/img/mark-192.png, a
   violet monogram on an opaque near-black square, set on a plate — the last
   purple object in the shell. It is now /assets/mark-128.png, the white mark
   on transparency that the sign-in, the client account and the Cloudflare
   record use, a solid grey below the name beside it (tokens.css
   --mark-filter). The artwork is 128x111, so the box keeps its size and the
   glyph is contained. */
.ofc-logo {
  width: 30px;
  height: 30px;
  flex: none;
  object-fit: contain;
  filter: var(--mark-filter);
}

.ofc-rail__name {
  display: grid;
  gap: 0.05rem;
  min-width: 0;
}
.ofc-rail__name b {
  font-family: var(--display);
  font-size: var(--o-t-md);
  font-weight: 750;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.ofc-rail__name span {
  font-size: var(--o-t-label);
  font-weight: 600;
  color: var(--o-faint);
}

.ofc-rail__nav {
  min-height: 0;
  overflow-y: auto;
  padding: 0.6rem 0.55rem 1rem;
}

.ofc-side__g {
  margin: 1.15rem 0 0.35rem;
  padding: 0 0.7rem;
  font-size: var(--o-t-label);   /* the group is a quiet label, not a heading */
  font-weight: 600;
  color: var(--o-faint);
}
.ofc-side__g:first-child { margin-top: 0.15rem; }

/* A HAIRLINE, NOT A SECOND COLOUR. The break between what is finished and what
   is not has to be visible at a glance, and the palette has one accent that is
   spent on things that cost money — an "unfinished" tint would be a second one
   competing with it. The rule does the separating; the label does the saying. */

.ofc-side__a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 32px;
  padding: 0 0.7rem;
  border-radius: var(--o-r-sm);
  color: var(--o-dim);
  text-decoration: none;
  font-size: var(--o-t-sm);
  font-weight: 500;
  /* The highlight is drawn with an inset shadow rather than a border so the
     row does not change size when it becomes current — a menu whose items
     jump 2px on selection is a menu that feels broken. */
  transition: background-color .12s ease, color .12s ease;
}
.ofc-side__a:hover { background: var(--o-hover); color: var(--o-text); }

/* The current section is a filled pill, not a tinted strip with a coloured
   edge. One shape change reads at a glance and survives being colour-blind —
   it also carries aria-current, which is what a screen reader gets. */
/* SELECTED: a tonal field and a 2px accent rail at the left edge — never a
   bright capsule. The label steps up to full white; the icon takes the accent. */
.ofc-side__a.is-on {
  background: var(--o-press);
  color: #FFFFFF;
  font-weight: 600;
}
.ofc-side__a.is-on::before {
  content: "";
  position: absolute;
  left: -0.55rem;
  top: 7px;
  bottom: 7px;
  width: 2px;
  border-radius: 0 2px 2px 0;
  background: var(--o-accent);
}
/* Stated, not implied by colour — it also carries aria-current. A third of
   people cannot rely on the accent, and a screen reader gets nothing at all
   from a box-shadow. */
.ofc-side__a.is-on .ofc-i { color: var(--o-accent); }
/* Pages whose router marks the row with aria-current (Ads) get the same
   selected state as .is-on — it had none, so Ads never said where you were. */
.ofc-side__a[aria-current="page"] { background: var(--o-press); color: #FFFFFF; font-weight: 600; }
.ofc-side__a[aria-current="page"]::before {
  content: ""; position: absolute; left: -0.55rem; top: 7px; bottom: 7px; width: 2px;
  border-radius: 0 2px 2px 0; background: var(--o-accent);
}
.ofc-side__a[aria-current="page"] .ofc-i { color: var(--o-accent); }

/* A WORLD OPEN IN PLACE (Phase VI). The parent row (Ads) reads as "you are
   inside this", its views hang beneath it on a guide line, and the current
   view carries the selection. Sub-labels are quieter still than group labels. */
.ofc-side__parent.is-open { color: var(--o-text); font-weight: 600; }
.ofc-side__parent.is-open .ofc-i { color: var(--o-text); }
.ofc-side__sub {
  position: relative;
  margin: 0.1rem 0 0.35rem 1.15rem;
  padding-left: 0.55rem;
  border-left: 1px solid var(--o-line-2);
}
.ofc-side__sub .ofc-side__a { min-height: 30px; padding-left: 0.6rem; font-size: 0.8125rem; }
.ofc-side__sub .ofc-side__a .ofc-i { width: 14px; height: 14px; }
.ofc-side__sub .ofc-side__a[aria-current="page"]::before { left: calc(-0.55rem - 1px); }

/* The sprite itself is a definitions block, not a picture. Taken out of flow
   rather than `display: none`, because a `<use>` referencing a symbol inside a
   display:none tree still resolves but some engines skip painting it. */
.ofc-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.ofc-i {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--o-faint);
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ofc-side__a:hover .ofc-i { color: var(--o-dim); }

.ofc-side__t { flex: 1 1 auto; min-width: 0; }

/* The count beside a section. Only ever the number that COSTS something —
   see the badge comments in page-office.mjs. */
/* A BADGE MEANS SOMEONE HAS TO ACT. Quiet figures at rest; the ones that
   need action (.is-hot) carry the warn mark — a dot and the number, not a
   filled lozenge competing with the label. */
.ofc-side__n {
  min-width: 1.25rem;
  padding: 0;
  background: none;
  color: var(--o-faint);
  font-size: var(--o-t-xs);
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ofc-side__n:empty { display: none; }
/* `--o-warn-bg`, not a second near-black: #17100B differed from the token by a
   luminance of 0.0003 — invisible, and a separate value to keep in step. */
.ofc-side__n.is-hot { background: none; color: var(--o-warn-ink); }
.ofc-side__n.is-hot::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  vertical-align: 1px;
  border-radius: 50%;
  background: var(--o-warn);
}

.ofc-rail__foot {
  padding: 0.75rem 0.8rem;
  border-top: 1px solid var(--o-line-2);
  display: grid;
  gap: 0.6rem;
}
/* One row, evenly weighted, no wrap: three controls on two ragged lines is
   what a footer looks like when nobody laid it out. */
.ofc-rail__foot .ofc-actions {
  gap: 0.15rem;
  margin-inline: -0.55rem;
}
.ofc-rail__foot .ofc-actions > * { flex: 0 1 auto; }

.ofc-me { display: flex; align-items: center; gap: 0.55rem; min-width: 0; }

/* Initials, not a photograph nobody has uploaded. */
.ofc-me__mark {
  width: 28px;
  height: 28px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--o-accent-wash);
  border: 1px solid rgb(var(--aqua-rgb) / 0.24);
  color: var(--o-accent);
  font-family: var(--display);
  font-size: var(--o-t-xs);
  font-weight: 750;
  letter-spacing: 0.02em;
}

.ofc-me__id { display: grid; min-width: 0; gap: 0.05rem; }
.ofc-me__id b {
  font-size: var(--o-t-sm);
  font-weight: 650;
  /* An email is longer than a 15rem rail and must not wrap it wider. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ofc-me__id span {
  font-size: var(--o-t-label);
  font-weight: 600;
  color: var(--o-faint);
}

/* ---- the header -------------------------------------------------------- */

.ofc-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 64px;
  padding: 0.75rem clamp(1rem, 2.4vw, 2rem);
  background: var(--o-bg);
  border-bottom: 1px solid var(--o-line-2);
}

.ofc-top__where { min-width: 0; flex: 1 1 auto; }
.ofc-top__where h1 {
  margin: 0;
  font-family: var(--display);
  font-size: var(--o-t-xl);
  font-weight: 650;
  letter-spacing: -0.022em;
  line-height: 1.15;
}
.ofc-top__where p {
  margin: 0.2rem 0 0;
  font-size: var(--o-t-sm);
  font-weight: 450;
  color: var(--o-faint);
}

.ofc-top__acts { display: flex; align-items: center; gap: 0.5rem; flex: none; }

/* ⌘K. A section list you aim at with a mouse is a menu; one you type at is a
   tool. */
.ofc-jump {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 34px;
  min-width: 15rem;
  justify-content: space-between;
  padding: 0 0.45rem 0 0.75rem;
  border: 1px solid var(--o-line-2);
  border-radius: var(--o-r);
  background: var(--o-inset);
  background-image: none;
  box-shadow: none;
  color: var(--o-faint);
  font: 600 var(--o-t-sm)/1 var(--body);
  cursor: pointer;
}
.ofc-jump:hover { color: var(--o-text); border-color: var(--o-line-2); background: var(--o-hover); }
.ofc-jump:active { transform: none; }
.ofc-jump kbd {
  padding: 0.12rem 0.32rem;
  border: 1px solid var(--o-line-2);
  border-radius: 5px;
  background: var(--o-inset);
  font: 650 var(--o-t-xs)/1 var(--body);
  color: var(--o-faint);
}

/* ==========================================================================
   3. CONTROLS

   app.css gives every <button> a 56px filled green treatment, which is right
   for a thumb in a glove and wrong for a toolbar. Everything below is scoped
   to #office so the field app keeps its targets.
   ========================================================================== */

:is(#office, #portal, #ebay, #ads) .ofc-primary,
:is(#office, #portal, #ebay, #ads) .ofc-ghost,
:is(#office, #portal, #ebay, #ads) .ofc-quiet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 34px;
  padding: 0 0.9rem;
  border-radius: var(--o-pill);
  font: 600 var(--o-t-sm)/1 var(--body);
  letter-spacing: 0.005em;
  cursor: pointer;
  /* These are class-shaped, not element-shaped, and the mailbox's Reply and
     Forward are <a> because they hand off to a mail client rather than doing
     something here. Without this they arrive underlined: button geometry
     wearing link decoration, which reads as neither. */
  text-decoration: none;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
:is(#office, #portal, #ebay, #ads) .ofc-primary:active,
:is(#office, #portal, #ebay, #ads) .ofc-ghost:active,
:is(#office, #portal, #ebay, #ads) .ofc-quiet:active { transform: none; }

/* THE ONE FILLED CONTROL: solid white, black label, the same as deleoneai.com's. */
:is(#office, #portal, #ebay, #ads) .ofc-primary {
  justify-self: start;
  border: 1px solid var(--o-accent-deep);
  background: var(--o-accent-deep);
  /* FLAT. The site's button gradient is right on a photograph and wrong here:
     it is the same specular idea as the glass, one control at a time. */
  background-image: none;
  box-shadow: none;
  /* BLACK ON WHITE, deleoneai.com's one filled control: 19.80:1. It was white on
     #9A5CF3, which measured 4.04:1 — under the floor on the control every
     form ends with (the 5.34:1 once written here was measured on an older
     green). */
  color: var(--o-on-accent);
  font-weight: 700;
}
/* HOVER IS ONE STEP DARKER, AND IT IS A TOKEN: --teal is #EDEDED, the middle
   stop of the public button ramp, and keeps the label at 16.91:1. An earlier
   hover (`#128e62`) took its own label under 4.5:1 at the moment somebody was
   about to click it; a token measured once cannot drift like that. */
:is(#office, #portal, #ebay, #ads) .ofc-primary:hover:not(:disabled) {
  background-color: var(--teal);
}
:is(#office, #portal, #ebay, #ads) .ofc-primary:disabled {
  background: var(--o-inset);
  background-image: none;
  border-color: var(--o-line);
  box-shadow: none;
  color: var(--o-faint);
  cursor: default;
}

:is(#office, #portal, #ebay, #ads) .ofc-ghost {
  /* A control's only edge, so it is the 3:1 hairline, as deleoneai.com's chips
     are; --o-line-2 is a container's edge and measures 1.23:1. */
  border: 1px solid var(--o-line-3);
  background: transparent;
  background-image: none;
  box-shadow: none;
  color: var(--o-dim);
}
:is(#office, #portal, #ebay, #ads) .ofc-ghost:hover:not(:disabled) { background: var(--o-hover); border-color: var(--o-line-4); color: var(--o-text); }
:is(#office, #portal, #ebay, #ads) .ofc-ghost:disabled { opacity: 0.5; cursor: default; }

/* THE QUIET CONTROL IS THE GHOST WITHOUT ITS EDGE (2026-10-16): the same
   words at the same size and weight, for an action that is one of many (a
   toolbar's, a message's, Sign out). It was 11.5px at 650, a third voice
   beside the ghost and the link, and a rail of them read as small print. */
:is(#office, #portal, #ebay, #ads) .ofc-quiet {
  min-height: 30px;
  padding: 0 0.7rem;
  border: 1px solid transparent;
  background: transparent;
  background-image: none;
  box-shadow: none;
  color: var(--o-dim);
}
:is(#office, #portal, #ebay, #ads) .ofc-quiet:hover:not(:disabled) { background: var(--o-hover); color: var(--o-text); }
:is(#office, #portal, #ebay, #ads) .ofc-quiet:disabled { opacity: 0.5; cursor: default; }

/* :where AND NOT :is, on purpose — the scope adds no specificity, so a
   component that sets its own focus style wins without !important. It omitted
   #ads until 2026-09-22, which means the entire Ads screen had no focus ring:
   a keyboard user could not see where they were. Nothing reported it, because
   verify.mjs's scope-list guard matched only `:is(` and never looked inside
   a `:where(`. The guard reads both now.
   NO border-radius HERE (OF-01): it outranked every control's own radius
   declared above it, so a 6px rail row or the 8px Jump button squared its
   corners the moment it took focus. The edge follows the control's shape. */
:where(#office, #portal, #ebay, #ads) :focus-visible {
  outline: 1px solid var(--focus-edge);
  outline-offset: 2px;
}
/* A CONTROL WITH AN EDGE LIGHTS THAT EDGE (OF-01): the 1px line lies over its
   own border, and one pixel of halo sits outside it, as on the home's composer.
   A borderless control keeps the edge 2px outside it, above. */
:where(#office, #portal, #ebay, #ads) :where(.ofc-ghost, .ofc-quiet, input, select, textarea):focus-visible {
  outline-offset: -1px;
  box-shadow: 0 0 0 1px var(--focus-halo);
}
/* A CONTROL THAT FILLS A BOX THAT CLIPS draws the edge inside itself. 2px
   outside, the rail's brand lost its top and left to the shell and a mail row
   its sides to the list, so focus showed nothing (tools/focus-check.mjs
   measures where an edge is cut off). */
.ofc-rail__brand:focus-visible,
.ofc-split__item:focus-visible { outline-offset: -1px; }

/* ==========================================================================
   4. CARDS AND GRID
   ========================================================================== */

.ofc-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 2rem 2.25rem;
  align-items: start;
}
/* One column until there is room for real columns. */
@media (max-width: 62rem) {
  .ofc-grid { grid-template-columns: minmax(0, 1fr); }
  .ofc-grid > * { grid-column: 1 / -1 !important; }
}

/* A PANEL IS THE GROUND PLUS ONE HAIRLINE. No fill, no shadow, no gradient —
   the panel is not a different material from the page, it is a boundary drawn
   on it. That is the whole difference between this and the version before it. */
/* NOT A BOX AROUND EVERY PAGE (Phase VI). A section of a view is a heading
   and its content on the canvas; sections are told apart by space and, when
   one follows another in the same column, a hairline. A drawn boundary is
   kept for what is genuinely separate — .ofc-card--panel, the inspector, a
   drawer, an alert — so a border means something again. */
.ofc-card {
  grid-column: span 12;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

.ofc-card--half { grid-column: span 6; }

/* The honest half of the screen: a note ABOUT the screen rather than a panel
   of it, so it gets the dashed edge and no fill. */
.ofc-card--muted { border-style: dashed; }

.ofc-card__bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.85rem;
}
.ofc-card__bar > div { min-width: 0; }

.ofc-card h2 {
  margin: 0;
  font-family: var(--display);
  font-size: var(--o-t-lg);
  font-weight: 650;
  letter-spacing: -0.012em;
  line-height: 1.2;
}

.ofc-sub {
  margin: 0.25rem 0 0.9rem;
  max-width: 68ch;
  color: var(--o-faint);
  font-size: var(--o-t-sm);
  font-weight: 500;
  line-height: 1.5;
}
.ofc-card__bar .ofc-sub { margin-bottom: 0; }

/* A refusal is a sentence, not an empty box: "your role cannot read leads" and
   "no leads yet" are opposite facts and the screen says which. */
.ofc-state {
  margin: 0 0 0.75rem;
  color: var(--o-dim);
  font-size: var(--o-t-sm);
  font-weight: 600;
}
.ofc-state:empty { display: none; }

.ofc-note {
  /* BLOCK, ALWAYS. A note carries a left border and vertical margin, which an
     inline box cannot lay out — as a <span> in a table cell three of them drew
     on top of one another, a column overlapping itself into an unreadable
     stack. It renders as a <p> in the markup and as a <span> from
     the renderers, and it has to behave the same either way. */
  display: block;
  margin: 0.85rem 0 0;
  padding: 0 0 0 0.65rem;
  border-left: 2px solid var(--o-line-2);
  color: var(--o-dim);
  font-size: var(--o-t-sm);
  font-weight: 500;
}
/* Stacked in a cell, the first needs no lead-in and the rest need less. */
.ofc-lines td > .ofc-note { margin-top: 0.35rem; }
.ofc-lines td > .ofc-note:first-child { margin-top: 0; }
/* A note that is a PROBLEM has to read differently from one that is an
   observation. It was toggled by four renderers and styled by none. */
.ofc-note.is-warn {
  padding: 0.55rem 0.75rem;
  border-radius: var(--o-r-sm);
  background: var(--o-warn-bg);
  border-left: 2px solid var(--o-warn);
  /* `--o-warn-ink`, not a second cream. This was #F3D8C4 in two rules — a
     fourth warn colour with no token and no measured contrast, which drifts the
     moment one of the two is edited. The token is 9.20:1 on this ground. */
  color: var(--o-warn-ink);
  font-weight: 600;
}
/* THE READING PANE'S OWN NOTE ("Sample: nothing was sent", a refusal) is
   the first thing in the pane, so its space is below it: with a note's top
   margin only, "All messages" and the subject touched it (2026-10-16). */
.ofc-note--unsaved { margin: 0 0 0.85rem; }

/* ==========================================================================
   5. THE STAT ROW

   A few readings, one of them the hero. Exactly one hero figure per view: on
   Invoices it is what is overdue, on Projects the open build with no start.
   ========================================================================== */

/* A SUMMARY LINE, NOT A ROW OF TILES (Phase VI). Passive figures sit in one
   compact strip under the header; they are context for the list below, not
   the page's subject, so they get a number and a label and no box. A
   wrapping flex row, so no line ends in an empty field. */
.ofc-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2.75rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1.1rem;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--o-line);
  border-radius: 0;
  overflow: visible;
}

.ofc-stat {
  flex: 0 1 auto;
  max-width: 22rem;
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 0.2rem;
  padding: 0;
  background: none;
  outline: 0;
}

.ofc-stat__k {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--o-t-label);
  font-weight: 600;
  color: var(--o-faint);
}

/* PROPORTIONAL figures, deliberately. tabular-nums gives every digit the width
   of a zero, which at 32px makes "121" read loose and badly spaced. Tabular is
   for COLUMNS of numbers that have to line up — see the tables below. */
.ofc-stat__n {
  margin: 0.1rem 0 0;
  font-family: var(--display);
  font-size: 1.625rem;
  font-weight: 750;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--o-text);
}

/* "At least" in front of a figure counted over a list cut short: the body's
   words, small, so the figure stays the figure. */
.ofc-stat__floor { margin-right: 0.35rem; font: 500 var(--o-t-sm)/1 var(--body); letter-spacing: 0; color: var(--o-dim); }

.ofc-stat__s {
  margin: 0;
  font-size: var(--o-t-sm);
  font-weight: 500;
  color: var(--o-faint);
  line-height: 1.4;
}

/* THE HERO. Spans two cells. "4 people are waiting" and "nobody is waiting"
   are not the same news and must not look alike — but the difference is
   carried by the FIGURE and a dot beside its label, not by painting a quarter
   of the screen amber. A tinted panel is what a dashboard does when it does
   not trust its own typography. */
.ofc-stat--hero { flex: 2 1 27rem; }
.ofc-stat--hero .ofc-stat__k::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--o-warn);
  flex: none;
}
.ofc-stat--hero .ofc-stat__n {
  font-size: var(--o-t-hero);
  color: var(--o-warn-ink);
}
.ofc-stat--hero .ofc-stat__k { color: var(--o-warn-ink); }

/* Clear is its own state and is SAID, not left as an absence: the dot turns
   green and the figure with it. (It was the purple accent for a month, which
   made "healthy" the brand colour rather than a state.) */
.ofc-stat--hero.is-clear .ofc-stat__k::before { background: var(--o-ok-mark); }
.ofc-stat--hero.is-clear .ofc-stat__n { color: var(--o-ok); }
.ofc-stat--hero.is-clear .ofc-stat__k { color: var(--o-faint); }

/* The invoices hero is labelled OVERDUE, and overdue money is the red state,
   not the amber one: past its date is past attention. Every other hero keeps
   the amber, which is what "needs you" means. */
#ofc-inv-lede:not(.is-clear):not(.is-unknown) .ofc-stat__k::before { background: var(--o-bad-mark); }
#ofc-inv-lede:not(.is-clear):not(.is-unknown) .ofc-stat__k,
#ofc-inv-lede:not(.is-clear):not(.is-unknown) .ofc-stat__n { color: var(--o-bad); }

@media (max-width: 62rem) {
  .ofc-stat--hero { flex-basis: 13.5rem; }
  .ofc-stat--hero .ofc-stat__n { font-size: var(--o-t-num); }
}

/* NONE, AS ONE QUIET LINE. Still REPORTED — "nothing here" is a fact, and
   hiding it would be the screen deciding what you may know — just reported at
   what a zero is worth. */
.ofc-none {
  margin: 0.65rem 0 0;
  font-size: var(--o-t-sm);
  font-weight: 500;
  color: var(--o-faint);
}
.ofc-none:empty { display: none; }

/* ==========================================================================
   8. LISTS AND TABLES
   ========================================================================== */

.ofc-table { width: 100%; border-collapse: collapse; font-size: var(--o-t-sm); }

.ofc-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  text-align: left;
  padding: 0.4rem 0.6rem;
  background: var(--o-bg);
  border-bottom: 1px solid var(--o-line-2);
  color: var(--o-faint);
  font-size: var(--o-t-label);
  font-weight: 600;
}

/* ONE ROW HEIGHT (OF-02). Rows were 32, 36 and 37px from table to table, and
   37 to 45px inside the Clients table, where a row grew when it carried an
   Invite button. A one-line row is --o-row (44px) in every table and list,
   with or without a control, its content centred; a second line grows it.
   A table cell's height is its minimum. */
.ofc-table td {
  height: var(--o-row);
  padding: 0.3rem 0.6rem;
  border-bottom: 1px solid var(--o-line);
  font-weight: 500;
  color: var(--o-dim);
  vertical-align: middle;
}
.ofc-table tbody tr:hover td { background: var(--o-hover); color: var(--o-text); }
.ofc-table tbody tr:last-child td { border-bottom: 0; }
.ofc-table td:first-child { color: var(--o-text); font-weight: 650; }
.ofc-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
/* SAID, NOT BLANK. An empty cell reads as "not loaded yet"; a customer with no
   current property is a customer nothing can be attached to. */
/* Quieter by colour, not by a second face (OF-02: no italics on a value, 2026-10-16). */
.ofc-table td.is-missing { color: var(--o-faint); }
/* A SECOND LINE IN A CELL, on the model of `.ofc-tot dd small`. Inline it read
   "none now77 Industrial Way, Lincoln — owned until 2026-03-01" — two facts
   with no space between them, which is worse than the omission it replaced.
   Upright, because the qualifier is the concrete half: the cell above it is
   italic to mark an absence, and a date is not an absence. */
.ofc-table td small {
  display: block;
  margin-top: 0.15rem;
  font-size: var(--o-t-xs);
  font-style: normal;
  color: var(--o-faint);
}

.ofc-tablewrap { overflow-x: auto; margin: 0 -0.35rem; padding: 0 0.35rem; }

/* ---- chips ------------------------------------------------------------- */

.ofc-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.14rem 0.45rem;
  border-radius: var(--o-pill);   /* 6px: no capsules (rule 8) */
  background: var(--o-inset);
  color: var(--o-dim);
  font-size: var(--o-t-xs);
  font-weight: 650;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
/* NOT AN ALARM. An unchecked lead is a real lead and must not be dressed as a
   problem — it sits in the same NEW column as every other one and is worked the
   same way. This says "read the number twice", not "something went wrong", so
   it borrows the warm wash rather than the warning one. */
.ofc-chip--unchecked { background: var(--o-warn-bg); color: var(--o-warn-ink); }
/* ---- the roster -------------------------------------------------------- */

.ofc-roster { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.ofc-roster li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--o-row);
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--o-line);
  border-radius: var(--o-r-sm);
  background: var(--o-inset);
  font-size: var(--o-t-sm);
  font-weight: 600;
}
.ofc-roster button:first-of-type { margin-left: auto; }

/* A reason sits under its figure rather than beside it — a sentence in a
   numeric column pushes every cell after it out of line. */
.ofc-lines td > small {
  display: block;
  margin-top: 0.15rem;
  font-size: var(--o-t-xs);
  font-weight: 400;
  color: var(--o-dim);
  line-height: 1.35;
}

/* THE SAMPLE-CONTENT BANNER.
 *
 * This is the one place on the screen where the warn colour is spent on
 * something that is not a number costing money, and it earns it: every figure
 * below it is fabricated, and the entire risk of the feature is somebody
 * reading one as real. It sits above the content rather than in a corner, it
 * is solid, and it cannot be dismissed while the mode is on — the button
 * turns the MODE off, not the banner.
 *
 * ONE SLIM LINE (OF-02). It was a bordered amber box with a bordered button,
 * 51px at 1440 and 150px on a phone, where it pushed the first row of work
 * off the screen. It is the dossier's fixture bar now: one line on the
 * amber wash, the state's 2px mark at its edge, a quiet "Turn it off". */
.ofc-sample-banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 0.75rem;
  margin: 0 0 1rem;
  padding: 0.2rem 0.35rem 0.2rem 0.8rem;
  border-radius: var(--o-r-sm);
  background: var(--o-warn-bg);
  box-shadow: inset 2px 0 0 var(--o-warn);
  color: var(--o-warn-ink);
  font-size: var(--o-t-label);
  font-weight: 500;
  line-height: 1.4;
}
.ofc-sample-banner strong { color: var(--o-warn-ink); font-weight: 650; }
:is(#office, #portal, #ebay, #ads) .ofc-sample-banner__off {
  margin-left: auto;
  min-height: 28px;
  padding: 0 0.45rem;
  border: 0;
  border-radius: var(--o-r-sm);
  background: none;
  color: var(--o-text);
  font: 500 var(--o-t-label)/1 var(--body);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
:is(#office, #portal, #ebay, #ads) .ofc-sample-banner__off:hover { color: var(--o-strong); text-decoration-thickness: 2px; }
:is(#office, #portal, #ebay, #ads) .ofc-sample-banner__off:focus-visible { outline: 1px solid var(--focus-edge); outline-offset: 0; }
/* On a phone the sentence wraps, and in a flex row "Turn it off" took a third
   line to itself. It ends the sentence instead: two lines. Its 24px target
   reaches past the line on negative margins, so the line does not grow. */
@media (max-width: 40rem) {
  .ofc-sample-banner { display: block; padding: 0.4rem 0.75rem; }
  :is(#office, #portal, #ebay, #ads) .ofc-sample-banner__off {
    display: inline-block; vertical-align: baseline;
    min-height: 24px; margin: -4px 0 -4px 0.3rem; padding: 4px 0.25rem; line-height: 16px;
  }
}

/* A LIST THAT IS NOT SHOWING EVERYTHING SAYS SO, and it is not a warning.
   Nothing is wrong when a table is capped — the screen is doing what it was
   asked. Warn amber here would make an ordinary large table look like a fault
   and would spend the one accent this design reserves for a number that is
   costing money. Dim ink and the same hairline every other note uses. */
.ofc-state.is-partial {
  color: var(--o-dim);
  border-left: 2px solid var(--o-line-2);
  padding-left: 0.65rem;
}

/* A checkbox reads left-to-right, not stacked. `.ofc-fields label` puts its
   text above the control, which is right for a text field and wrong here — the
   box belongs beside the words it qualifies. */
.ofc-fields label.ofc-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--o-t-sm);
  font-weight: 600;
  color: var(--o-text);
  align-self: end;
  min-height: 2.4rem;
}
.ofc-fields label.ofc-check input {
  width: 1.05rem;
  height: 1.05rem;
  min-height: 0;
  accent-color: var(--o-accent);
  flex: 0 0 auto;
}

/* ---- counted rows (Database) ------------------------------------------- */

.ofc-counts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.3rem;
}
.ofc-counts li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.4rem 0.65rem;
  border: 1px solid var(--o-line);
  border-radius: var(--o-r-sm);
  background: var(--o-inset);
  font-size: var(--o-t-sm);
  font-weight: 600;
}
.ofc-counts span { color: var(--o-dim); }
.ofc-counts b {
  font-family: var(--display);
  font-size: var(--o-t-md);
  font-variant-numeric: tabular-nums;
  color: var(--o-text);
}
/* REFUSED IS NOT ZERO. Three different answers, never one dash. */
.ofc-counts li.is-empty b { color: var(--o-faint); }
.ofc-counts li.is-refused b { font-family: var(--body); font-size: var(--o-t-xs); color: var(--o-warn-ink); }

/* ---- what this cannot tell you ----------------------------------------- */

.ofc-cannot { margin: 0; display: grid; gap: 0.2rem; }
.ofc-cannot dt {
  margin-top: 0.9rem;
  font-family: var(--display);
  font-size: var(--o-t-md);
  font-weight: 700;
}
.ofc-cannot dt:first-child { margin-top: 0; }
.ofc-cannot dd {
  margin: 0;
  max-width: 70ch;
  color: var(--o-faint);
  font-size: var(--o-t-sm);
  font-weight: 500;
  line-height: 1.5;
}
/* What it would take to know. Brighter than the explanation above it, and
   not a colour: it is not a problem to act on today, and six amber lines down
   the eBay screen were exactly the orange-as-decoration the owner objected to. */
.ofc-cannot dd.ofc-needs { color: var(--o-text); margin-top: 0.15rem; }

/* ---- the messages filed against one enquiry (the other half of 0044) ------
   A LIST OF BUTTONS, because each one goes to the message. Styled as text
   rather than as controls: five buttons stacked in a detail pane read as a
   toolbar, and these are a thread. */
.ofc-lead__mail {
  margin: 0.4rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.55rem;
  font-size: var(--o-t-sm);
}
.ofc-lead__mail li { line-height: 1.45; min-width: 0; overflow-wrap: anywhere; }
/* Who wrote it and the day, under the subject (OF-25). */
.ofc-lead__mail-m { display: block; font-size: var(--o-t-xs); color: var(--o-dim); }
.ofc-linkish {
  appearance: none;
  background: none;
  border: 0;
  /* app.css gives every <button> min-height:56px for a touch target. This one
     is a LINK — it resets background, border and padding but never that, so
     the text sat at the top of an invisible 56px box with the underline
     stranded at the bottom of it, nowhere near the words it belongs to. The
     target stays reachable through padding instead: ~30px, comfortably past
     WCAG 2.5.8's 24px, and inline controls are exempt from the 44px AAA
     figure that 56 was reaching for. */
  min-height: 0;
  padding: 0.3rem 0;
  font: inherit;
  color: var(--o-text);
  text-align: left;
  cursor: pointer;
  /* THE OFFICE'S ONE LINK (OF-02): an underline 3px under the words in the
     .55 grey, white on hover, as a link in a table cell and the home's links
     draw it. It was a 1px border at the foot of the padding, 5px below the
     words in a grey at 1.3:1, so "Invite" read as a stray dash. */
  text-decoration: underline;
  text-decoration-color: var(--o-line-4);
  text-underline-offset: 3px;
}
.ofc-linkish:hover { color: #fff; text-decoration-color: currentColor; }
.ofc-linkish:focus-visible { outline: 1px solid var(--focus-edge); outline-offset: 2px; }

/* Below the rail's collapse the hint is the first thing worth losing: it
   describes keys a phone does not have. */

/* M-04 — WHAT THE FIRST SCREEN IS SPENT ON. At 390px the card's orientation
   paragraph and four address pills wrapping onto two rows pushed the first
   message most of the way down the viewport: three-quarters of a phone screen
   explaining the mailbox to somebody who opened the mailbox.

   The paragraph is orientation and orientation belongs where there is room for
   it. The pills stay — they are a filter, not decoration — but they scroll on
   one row instead of stacking, which is the same trade the rail makes. */
@media (max-width: 48rem) {
  .ofc-view[data-view="mail"] .ofc-card__bar .ofc-sub { display: none; }

  /* Scoped to the page, so it outranks the view bar's own rule further down
     (`.ofc-addr { flex-wrap: wrap }`), which had made this one dead: Ads'
     tabs stood on two and three lines at 390 (OF-07). */
  :is(#office, #portal, #ebay, #ads) .ofc-addr {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }
  .ofc-addr::-webkit-scrollbar { display: none; }
  .ofc-addr > * { flex: none; scroll-snap-align: start; }

}

/* A-06 — off-canvas until focused, then a real target. Moved with a transform
   and never `display:none` or `visibility:hidden`, both of which take it out
   of the tab order — a skip link that cannot be reached by tabbing is a skip
   link that does not exist. */
.ofc-skip {
  position: absolute;
  left: 0.6rem; top: 0.6rem;
  z-index: 100;
  padding: 0.6rem 0.9rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-radius: 8px;
  background: var(--o-accent-deep);
  color: var(--o-on-accent);
  font: 650 var(--o-t-sm)/1 var(--body);
  text-decoration: none;
  transform: translateY(-160%);
}
/* BOTH, and `:focus` is the load-bearing one. `:focus-visible` alone leaves
   the link off-canvas for anything that focuses it without the browser
   deciding a keyboard did it — which is how a screen-reader user gets a
   control that is announced and not drawn. */
.ofc-skip:focus,
.ofc-skip:focus-visible {
  transform: none;
  outline: 1px solid var(--focus-edge);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: no-preference) {
  .ofc-skip { transition: transform .14s ease; }
}

/* WHERE IT LANDS YOU HAS TO SHOW. The target is a container the size of the
   screen, so this is the one place an outline is drawn round everything on
   purpose: pressing the link otherwise looks like nothing happened, and the
   only proof would be the next tab press. `:focus-visible` so it appears for
   the keyboard and not for a script. */
#ofc-grid:focus { outline: none; }
#ofc-grid:focus-visible {
  outline: 1px solid var(--focus-edge);
  outline-offset: 6px;
  border-radius: 10px;
}

/* Named for a screen reader, removed from sight. The icon above carries the
   same fact visually. */
.ofc-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ==========================================================================
   9. THE CRM BOARD
   ========================================================================== */

.ofc-board {
  display: grid;
  grid-auto-flow: column;
  /* SIX COLUMNS, NOT FIVE — new, contacted, quoted, won, lost AND spam. Six at
     a width where a name, a phone number and a line of scope are all readable
     does not fit a laptop, so this genuinely has to scroll. It always did; what
     it lacked was any sign of it, so the sixth column sat sliced down its
     middle by the card edge and read as broken rather than as more. Hence the
     fade below rather than columns squeezed until they fit. */
  grid-auto-columns: minmax(12rem, 1fr);
  gap: 0.7rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-bottom: 0.4rem;
}
/* THE EDGE SAYS THERE IS MORE. Applied only when the board actually overflows
   and removed once it is scrolled to the end, so the fade is information rather
   than decoration — a permanent gradient on a board with nothing past it is a
   promise of content that is not there. */
.ofc-board.is-overflowing {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent);
}
.ofc-board.is-overflowing.is-scroll-end {
  -webkit-mask-image: none;
  mask-image: none;
}
@media (prefers-reduced-motion: reduce) { .ofc-board { scroll-behavior: auto; } }

.ofc-board__col {
  display: grid;
  /* ONE TRACK THAT MAY SHRINK BELOW ITS CONTENT: a long unbroken address used to widen a card past its column
     and over the next column's heading (seen in the WON column, 2026-09-28). */
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  align-content: start;
  gap: 0.35rem;
  padding: 0.5rem;
  border-radius: var(--o-r);
  min-height: 6rem;
  /* A column is a shallower pane than a card — it sits INSIDE one, and two
     full-strength rings nested is what makes a UI look bevelled. */
  border: 1px solid var(--o-line-2);
}
.ofc-board__h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0 0 0.2rem;
  padding: 0 0.15rem;
  font-size: var(--o-t-label);
  font-weight: 600;
  color: var(--o-faint);
}
/* THE COLUMN THAT COSTS MONEY WHILE YOU READ IT. */
.ofc-board__col.is-hot { border-color: rgb(var(--attn-rgb) / 0.34); }
.ofc-board__col.is-hot .ofc-board__h { color: var(--o-warn-ink); }

.ofc-board__card {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
  overflow-wrap: anywhere;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--o-line);
  border-radius: var(--o-r-sm);
  background: var(--o-inset);
}
.ofc-board__card strong { font-size: var(--o-t-sm); font-weight: 650; }
.ofc-board__card em {
  font-style: normal;
  font-size: var(--o-t-xs);
  font-weight: 500;
  color: var(--o-faint);
}
.ofc-board__empty { margin: 0; padding: 0.2rem 0.15rem; color: var(--o-faint); font-size: var(--o-t-xs); }
/* An empty list's state fills the list's height, centred, as "Nothing open" fills the pane (listEmpty). */
.ofc-list__empty { list-style: none; display: grid; min-height: min(60vh, 26rem); }

/* ==========================================================================
   10. FORMS

   A task with a name, a rule above it, and its own button. Four unlabelled
   forms in one card was a wall of controls where nothing said where one job
   ended and the next began.
   ========================================================================== */

.ofc-task {
  display: grid;
  gap: 0.7rem;
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--o-line);
}
/* The first task follows the card's own subtitle, which is already a
   separator; a second rule there reads as a mistake. */
.ofc-card > .ofc-sub + .ofc-task,
.ofc-card > .ofc-state + .ofc-task,
.ofc-card > .ofc-card__bar + .ofc-task { border-top: 0; padding-top: 0; margin-top: 0.4rem; }

.ofc-fields {
  display: grid;
  /* A field is as wide as its content needs, not as wide as the card: a single
     "Name" box stretched across 1300px was one of the things that read as
     unfinished. */
  grid-template-columns: repeat(auto-fit, minmax(11rem, 18rem));
  gap: 0.65rem 0.8rem;
}
.ofc-fields label {
  display: grid;
  gap: 0.25rem;
  font-size: var(--o-t-label);
  font-weight: 600;
  color: var(--o-faint);
}
/* "optional" sits beside its label's words, not on a line of its own (every
   drawer's Email, Phone and Website did that): the words are the first
   column, the tag the second, and the field and anything else under them
   span both. */
.ofc-fields label:has(> .ofc-opt) { grid-template-columns: auto minmax(0, 1fr); align-items: baseline; }
.ofc-fields label:has(> .ofc-opt) > :not(.ofc-opt) { grid-column: 1 / -1; }
.ofc-fields label > .ofc-opt { justify-self: start; }
/* The pairs that genuinely need the room keep it — a customer-and-property
   line truncated into a half-width control is how somebody picks the wrong
   one. */
.ofc-field--wide { grid-column: 1 / -1; max-width: 38rem; }

/* `.ofc-input` IS A FIELD OUTSIDE A FORM: the Requests board's per-row state
   <select> carried it with no rule anywhere, so it rendered as the browser's
   own full-width control (review, 2026-09-28). */
.ofc-input,
.ofc-fields input,
.ofc-fields select,
/* A TEXTAREA IS A FIELD TOO, and left off this list it kept the browser
   default: white ground, black text, grey bevel, in the middle of a near-
   black card. Nothing warns about that — the element is simply never styled,
   so it renders exactly as the user agent intends. */
.ofc-fields textarea {
  min-height: 34px;
  padding: 0 0.6rem;
  /* The 3:1 control hairline: at --o-line-2 an empty field was a box nobody
     could find (1.65:1 before this palette, 1.23:1 after it). */
  border: 1px solid var(--o-line-3);
  border-radius: var(--o-r-sm);
  /* An input is a WELL: darker than the card behind it. A pale raised box on a
     dark ground reads as a button. */
  background: var(--o-inset);
  color: var(--o-text);
  font: 500 var(--o-t-sm)/1 var(--body);
  text-transform: none;
  letter-spacing: normal;
}
/* THREE INK STEPS, ALL MEASURED ON BLACK — so a placeholder is `--o-faint`
   and not an alpha wash. `rgba(237,241,239,0.28)` resolves over black to
   #424343, which is 2.12:1: a fourth step, invented, and less legible than the
   dimmest sanctioned one at 4.58:1. */
.ofc-fields input::placeholder,
.ofc-fields textarea::placeholder { color: var(--o-faint); }
.ofc-fields textarea { padding: 0.45rem 0.6rem; line-height: 1.5; resize: vertical; }
/* A FILE INPUT'S BUTTON IS A SEPARATE, UNSTYLED CONTROL and it arrives white
   on the same dark card. It is the one part of a form the page cannot draw
   itself, so it has to be reached through its pseudo-element. */
/* Its own width (a button and "No file chosen") ran 24px out of its column. */
.ofc-fields input[type="file"] { width: 100%; min-width: 0; padding: 0.3rem 0.4rem; }
.ofc-fields input[type="file"]::file-selector-button {
  min-height: 0;
  margin-right: 0.6rem;
  padding: 0.28rem 0.7rem;
  border: 1px solid var(--o-line-2);
  border-radius: var(--o-r-sm);
  background: var(--o-raised);
  color: var(--o-text);
  font: 600 var(--o-t-xs)/1.2 var(--body);
  cursor: pointer;
}
.ofc-fields input[type="file"]::file-selector-button:hover { border-color: var(--o-line-4); }
/* A SELECT SIZES TO ITS WIDEST OPTION, AND THAT PUSHED THE PAGE SIDEWAYS.
   Found at 390px the first time this screen was ever rendered that narrow:
   "INV-2026-0007 — Vance — rear yard, phase 1 — $14,400 owing" made the
   control 437px in a 390px viewport, and the whole document scrolled
   horizontally. `min-width: 0` is the half people forget — a grid item's
   default `min-width: auto` refuses to shrink below its content, so
   `max-width: 100%` alone does nothing here.

   The option text is not shortened: a payment posted against the wrong invoice
   is worse than a truncated line, so the control keeps the whole label and
   clips it. */
.ofc-fields select {
  padding-right: 0.4rem;
  min-width: 0;
  max-width: 100%;
  text-overflow: ellipsis;
}
.ofc-fields label { min-width: 0; }
.ofc-fields select:disabled { opacity: 0.55; }
/* A FIELD IN USE LIGHTS ITS EDGE (OF-01): the border brightens to
   --focus-edge, drawn as an outline over it so forced-colours mode (which
   drops box-shadow) still shows it, with one pixel of halo outside. It was a
   2px white outline, the ring the owner called too bright on the home. :focus,
   not :focus-visible — the field you are typing in is the orientation, and a
   click should show it too. */
.ofc-input:focus,
.ofc-fields input:focus,
.ofc-fields select:focus {
  outline: 1px solid var(--focus-edge);
  outline-offset: -1px;
  border-color: var(--focus-edge);
  box-shadow: 0 0 0 1px var(--focus-halo);
}
/* The compact one, sized to its options rather than to its row. */
.ofc-input--sm {
  width: auto;
  max-width: 14rem;
  min-height: 28px;
  justify-self: start;
  align-self: start;
}
.ofc-input:disabled { opacity: 0.55; }

/* A SELECT IS DRAWN BY THE OFFICE (OF-03). The browser's own arrow and face
   came with every <select>: a different control on every platform, beside
   fields the Office draws itself. The list that opens stays the system's
   (on a phone it is the wheel a thumb knows); the closed control is a well
   like every field, with one chevron in the faint grey. */
:is(#office, #portal, #ebay, #ads) select:not([multiple]):not([size]) {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 1.7rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23909090' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  background-size: 10px 6px;
  cursor: pointer;
}
:is(#office, #portal, #ebay, #ads) select:not([multiple]):not([size]):disabled { cursor: default; }

/* ==========================================================================
   THE DAY PICKER (OF-03, admin/js/office-day.mjs). A date field is a button
   that says the day ("Thu 16 Oct", or "Pick a day"), in front of the native
   field it fills; the calendar is a floating panel, a sheet on a phone.
   ========================================================================== */
/* The field it fills stays in the form, out of sight. An id in the selector,
   so a form's own field rules (.ofc-fields input, .ofc-edit input) cannot
   give it back its size. */
:is(#office, #portal, #ebay, #ads) input.ofc-day__native {
  position: absolute; width: 1px; height: 1px; min-width: 0; min-height: 0; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
:is(#office, #portal, #ebay, #ads) .ofc-day {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 34px;
  padding: 0 0.6rem;
  border: 1px solid var(--o-line-3);
  border-radius: var(--o-r-sm);
  background: var(--o-inset);
  color: var(--o-text);
  font: 500 var(--o-t-sm)/1 var(--body);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
/* A calendar drawn in the faint grey, at the end, as a select has its arrow. */
:is(#office, #portal, #ebay, #ads) .ofc-day::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  margin-left: auto;
  background: var(--o-faint);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Crect x='1.5' y='2.5' width='11' height='10' rx='1.5' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3Cpath d='M1.5 5.5h11M4.5 1v3M9.5 1v3' stroke='%23000' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Crect x='1.5' y='2.5' width='11' height='10' rx='1.5' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3Cpath d='M1.5 5.5h11M4.5 1v3M9.5 1v3' stroke='%23000' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
:is(#office, #portal, #ebay, #ads) .ofc-day.is-empty { color: var(--o-faint); }
:is(#office, #portal, #ebay, #ads) .ofc-day:hover:not(:disabled) { border-color: var(--o-line-4); background: var(--o-inset); }
:is(#office, #portal, #ebay, #ads) .ofc-day:active { background: var(--o-inset); transform: none; }
:is(#office, #portal, #ebay, #ads) .ofc-day:focus-visible,
:is(#office, #portal, #ebay, #ads) .ofc-day[aria-expanded="true"] {
  outline: 1px solid var(--focus-edge);
  outline-offset: -1px;
  border-color: var(--focus-edge);
  box-shadow: 0 0 0 1px var(--focus-halo);
}
:is(#office, #portal, #ebay, #ads) .ofc-day[hidden] { display: none; }
:is(#office, #portal, #ebay, #ads) .ofc-day.is-invalid { border-color: var(--o-bad-mark); }
:is(#office, #portal, #ebay, #ads) .ofc-day:disabled { background: var(--o-inset); color: var(--o-faint); opacity: 0.55; cursor: default; }

:is(#office, #portal, #ebay, #ads) .ofc-daypick {
  position: fixed;
  inset: auto;
  margin: 0;
  width: 20.5rem;
  max-width: calc(100vw - 16px);
  padding: 0.75rem;
  border: 1px solid var(--o-line-3);
  border-radius: var(--o-r-lg);
  background: var(--o-raised);
  color: var(--o-text);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.8);
}
:is(#office, #portal, #ebay, #ads) .ofc-daypick::backdrop { background: transparent; }
:is(#office, #portal, #ebay, #ads) .ofc-daypick button {
  min-height: 28px;
  border: 1px solid transparent;
  border-radius: var(--o-r-sm);
  background: none;
  color: var(--o-text);
  font: 500 var(--o-t-label)/1 var(--body);
  cursor: pointer;
}
:is(#office, #portal, #ebay, #ads) .ofc-daypick button:active { background: var(--o-press); transform: none; }
:is(#office, #portal, #ebay, #ads) .ofc-daypick button:focus-visible { outline: 1px solid var(--focus-edge); outline-offset: -1px; }
.ofc-daypick__quick { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem; margin: 0 0 0.7rem; }
/* A quick day says its day too, quieter, so "Next Monday" is never a sum. */
:is(#office, #portal, #ebay, #ads) .ofc-daypick .ofc-daypick__q { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; padding: 0 0.55rem; white-space: nowrap; border-color: var(--o-line-3); background: var(--o-inset); text-align: left; }
.ofc-daypick__qd { color: var(--o-faint); font-variant-numeric: tabular-nums; }
:is(#office, #portal, #ebay, #ads) .ofc-daypick .ofc-daypick__q:hover:not(:disabled) { border-color: var(--o-line-4); }
:is(#office, #portal, #ebay, #ads) .ofc-daypick .ofc-daypick__q:disabled { opacity: 0.5; cursor: default; }
.ofc-daypick__head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 0.3rem; }
.ofc-daypick__month { margin: 0; font: 650 var(--o-t-sm)/1.2 var(--display); }
:is(#office, #portal, #ebay, #ads) .ofc-daypick .ofc-daypick__nav { width: 32px; min-height: 32px; padding: 0; color: var(--o-dim); font-size: 1.15rem; }
:is(#office, #portal, #ebay, #ads) .ofc-daypick .ofc-daypick__nav:hover { background: var(--o-hover); color: var(--o-text); }
.ofc-daypick__grid { width: 100%; border-collapse: separate; border-spacing: 2px; table-layout: fixed; }
.ofc-daypick__grid th { padding: 0 0 0.25rem; color: var(--o-faint); font: 500 var(--o-t-label)/1 var(--body); text-align: center; }
.ofc-daypick__day {
  height: 34px;
  padding: 0;
  border-radius: var(--o-r-sm);
  color: var(--o-text);
  font: 500 var(--o-t-sm)/1 var(--body);
  font-variant-numeric: tabular-nums;
  text-align: center;
  cursor: pointer;
}
.ofc-daypick__day:hover { background: var(--o-hover); }
.ofc-daypick__day.is-out { color: var(--o-faint); }
/* Today is an edge; the chosen day is white (rule 7: white marks selection). */
.ofc-daypick__day[aria-current="date"] { box-shadow: inset 0 0 0 1px var(--o-line-4); }
.ofc-daypick__day[aria-selected="true"] { background: #FFFFFF; color: #000000; font-weight: 650; }
.ofc-daypick__day[aria-disabled="true"] { color: var(--o-line-3); background: none; cursor: default; }
.ofc-daypick__day:focus-visible { outline: 1px solid var(--focus-edge); outline-offset: -1px; box-shadow: 0 0 0 1px var(--focus-halo); }
.ofc-daypick__day[aria-selected="true"]:focus-visible { outline-offset: 1px; }
.ofc-daypick__foot { display: flex; justify-content: space-between; gap: 0.5rem; margin: 0.55rem 0 0; }
:is(#office, #portal, #ebay, #ads) .ofc-daypick :is(.ofc-daypick__clear, .ofc-daypick__close) { padding: 0 0.4rem; color: var(--o-dim); text-decoration: underline; text-decoration-color: var(--o-line-4); text-underline-offset: 3px; }
:is(#office, #portal, #ebay, #ads) .ofc-daypick .ofc-daypick__close { margin-left: auto; }
:is(#office, #portal, #ebay, #ads) .ofc-daypick :is(.ofc-daypick__clear, .ofc-daypick__close):hover { color: var(--o-text); }
@media (max-width: 40rem) {
  :is(#office, #portal, #ebay, #ads) .ofc-daypick {
    inset: auto 0 0 0;
    width: 100%;
    max-width: 100%;
    padding: 0.9rem 1rem calc(0.9rem + env(safe-area-inset-bottom, 0px));
    border-width: 1px 0 0;
    border-radius: var(--o-r-lg) var(--o-r-lg) 0 0;
  }
  :is(#office, #portal, #ebay, #ads) .ofc-daypick::backdrop { background: rgba(0, 0, 0, 0.6); }
  .ofc-daypick__day { height: 42px; }
  :is(#office, #portal, #ebay, #ads) .ofc-daypick .ofc-daypick__q { min-height: 36px; }
}

/* ==========================================================================
   THE STAGE PICKER (OF-33, page-office.mjs). A floating panel beside the
   button that says the stage, 12px like every floating panel; a sheet at the
   foot of a phone, as the day picker is.
   ========================================================================== */
:is(#office, #portal, #ebay, #ads) .ofc-stagepick {
  position: fixed;
  inset: auto;
  margin: 0;
  width: 19.5rem;
  max-width: calc(100vw - 16px);
  max-height: calc(100dvh - 16px);
  overflow-y: auto;
  padding: 0.6rem;
  border: 1px solid var(--o-line-3);
  border-radius: var(--o-r-lg);
  background: var(--o-raised);
  color: var(--o-text);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.8);
}
:is(#office, #portal, #ebay, #ads) .ofc-stagepick::backdrop { background: transparent; }
.ofc-stagepick__top { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.35rem; }
.ofc-stagepick__h { flex: 1 1 auto; min-width: 0; margin: 0.15rem 0.45rem; overflow: hidden; color: var(--o-dim); font: 600 var(--o-t-label)/1.3 var(--body); text-overflow: ellipsis; white-space: nowrap; }
:is(#office, #portal, #ebay, #ads) .ofc-stagepick .ofc-stagepick__close {
  flex: none; padding: 0 0.45rem;
  color: var(--o-dim); font-size: var(--o-t-xs);
  text-decoration: underline; text-decoration-color: var(--o-line-4); text-underline-offset: 3px;
}
:is(#office, #portal, #ebay, #ads) .ofc-stagepick .ofc-stagepick__close:hover { color: var(--o-text); }
.ofc-stagepick__list { display: grid; gap: 1px; }
:is(#office, #portal, #ebay, #ads) .ofc-stagepick button {
  min-height: 28px;
  border: 1px solid transparent;
  border-radius: var(--o-r-sm);
  background: none;
  box-shadow: none;
  color: var(--o-text);
  font: 500 var(--o-t-label)/1.2 var(--body);
  cursor: pointer;
}
:is(#office, #portal, #ebay, #ads) .ofc-stagepick button:active { background: var(--o-press); transform: none; }
:is(#office, #portal, #ebay, #ads) .ofc-stagepick button:focus-visible { outline: 1px solid var(--focus-edge); outline-offset: -1px; }
:is(#office, #portal, #ebay, #ads) .ofc-stagepick .ofc-stagepick__s {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 0.6rem;
  padding: 0.45rem 0.5rem; text-align: left;
}
:is(#office, #portal, #ebay, #ads) .ofc-stagepick .ofc-stagepick__s:hover:not(:disabled) { background: var(--o-hover); }
:is(#office, #portal, #ebay, #ads) .ofc-stagepick .ofc-stagepick__s:disabled { background: var(--o-inset); color: var(--o-text); cursor: default; }
.ofc-stagepick__w { grid-column: 1; font: 600 var(--o-t-sm)/1.3 var(--body); }
.ofc-stagepick__hint { grid-column: 1; color: var(--o-faint); font: 400 var(--o-t-xs)/1.35 var(--body); }
.ofc-stagepick__now { grid-column: 2; grid-row: 1 / span 2; color: var(--o-dim); font: 500 var(--o-t-xs)/1 var(--body); }
.ofc-stagepick__part { margin: 0.55rem 0 0; padding: 0.6rem 0 0; border-top: 1px solid var(--o-line-2); }
.ofc-stagepick__k { display: block; margin: 0 0.45rem 0.45rem; color: var(--o-dim); font: 500 var(--o-t-label)/1.3 var(--body); }
.ofc-stagepick__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem; }
:is(#office, #portal, #ebay, #ads) .ofc-stagepick .ofc-stagepick__q {
  display: flex; align-items: center; justify-content: space-between; gap: 0.4rem;
  min-height: 32px; padding: 0 0.55rem;
  border-color: var(--o-line-3); background: var(--o-inset);
  text-align: left;
}
:is(#office, #portal, #ebay, #ads) .ofc-stagepick .ofc-stagepick__q:hover { border-color: var(--o-line-4); }
:is(#office, #portal, #ebay, #ads) .ofc-stagepick .ofc-stagepick__q[aria-pressed="true"] { border-color: #FFFFFF; color: #FFFFFF; }
.ofc-stagepick__qd { color: var(--o-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
:is(#office, #portal, #ebay, #ads) .ofc-stagepick .ofc-stagepick__link {
  margin: 0.45rem 0.45rem 0; padding: 0;
  color: var(--o-dim);
  text-decoration: underline; text-decoration-color: var(--o-line-4); text-underline-offset: 3px;
}
:is(#office, #portal, #ebay, #ads) .ofc-stagepick .ofc-stagepick__link:hover { color: var(--o-text); }
.ofc-stagepick__said { margin: 0 0.45rem 0.2rem; font: 500 var(--o-t-sm)/1.45 var(--body); }
.ofc-stagepick__said .ofc-stagepick__link { margin: 0 0 0 0.25rem; }
:is(#office, #portal, #ebay, #ads) .ofc-stagepick .ofc-stagepick__done { width: 100%; margin: 0.7rem 0 0; border: 0; background: #FFFFFF; color: #000000; font-weight: 600; min-height: 32px; }
.ofc-stagepick__value { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 0.5rem; }
.ofc-stagepick__value .ofc-stagepick__k { display: grid; gap: 0.35rem; margin: 0; }
:is(#office, #portal, #ebay, #ads) .ofc-stagepick__money {
  min-height: 32px; padding: 0 0.6rem;
  border: 1px solid var(--o-line-3); border-radius: var(--o-r-sm);
  background: var(--o-inset); color: var(--o-text);
  font: 500 var(--o-t-sm)/1 var(--body); font-variant-numeric: tabular-nums;
}
:is(#office, #portal, #ebay, #ads) .ofc-stagepick .ofc-ghost { min-height: 32px; border: 1px solid var(--o-line-3); padding: 0 0.8rem; }
.ofc-stagepick__msg { grid-column: 1 / -1; margin: 0.3rem 0.45rem 0; color: var(--o-dim); font-size: var(--o-t-xs); }
.ofc-stagepick__msg:empty { display: none; }
.ofc-stagepick__msg.is-bad { margin: 0 0.45rem 0.5rem; color: var(--o-bad); }
@media (max-width: 40rem) {
  :is(#office, #portal, #ebay, #ads) .ofc-stagepick {
    inset: auto 0 0 0;
    width: 100%;
    max-width: 100%;
    padding: 0.9rem 1rem calc(0.9rem + env(safe-area-inset-bottom, 0px));
    border-width: 1px 0 0;
    border-radius: var(--o-r-lg) var(--o-r-lg) 0 0;
  }
  :is(#office, #portal, #ebay, #ads) .ofc-stagepick::backdrop { background: rgba(0, 0, 0, 0.6); }
  :is(#office, #portal, #ebay, #ads) .ofc-stagepick .ofc-stagepick__s { min-height: 44px; }
  :is(#office, #portal, #ebay, #ads) .ofc-stagepick .ofc-stagepick__q { min-height: 40px; }
  :is(#office, #portal, #ebay, #ads) .ofc-stagepick__money { min-height: 40px; font-size: 16px; }
}

/* ==========================================================================
   10b. THE REQUESTS BOARD (lead decision A8, 2026-09-28)

   One request per row, compact: the title and whose it is on one line, what
   they asked in at most two lines under it, when and how urgent in small
   type, and the state select at the row's end, sized to its options. The rows
   used to wear the forms' `.ofc-task` (a rule, a 1rem gap and a heading's
   margin per row) plus four classes with no rule anywhere, so a board of
   five requests filled the screen and each state control ran the width of
   the card.
   ========================================================================== */
.ofc-reqs {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
}
.ofc-req {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.2rem 1rem;
  align-items: start;
  padding: 0.6rem 0;
  border-top: 1px solid var(--o-line);
}
.ofc-req:first-child { border-top: 0; }
.ofc-req__main { display: grid; gap: 0.15rem; min-width: 0; }
.ofc-req__h {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.6rem;
  margin: 0;
  min-width: 0;
}
.ofc-req__t {
  font-size: var(--o-t-md);
  font-weight: 650;
  color: var(--o-text);
  overflow-wrap: anywhere;
}
.ofc-req__who { font-size: var(--o-t-sm); color: var(--o-dim); }
.ofc-req__b {
  margin: 0;
  max-width: 72ch;
  font-size: var(--o-t-sm);
  line-height: 1.45;
  color: var(--o-dim);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.ofc-req__m {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  font-size: var(--o-t-xs);
  color: var(--o-faint);
}
/* Urgent is attention, so amber, and said in the word as well. */
.ofc-req__urgent { color: var(--o-warn-ink); font-weight: 700; }
/* A closed request is history: it stays, quieter. */
.ofc-req[data-state="done"] .ofc-req__t,
.ofc-req[data-state="declined"] .ofc-req__t { color: var(--o-dim); font-weight: 550; }
.ofc-req > .ofc-input--sm { align-self: center; }
/* MILESTONE E: a project changed where it is read, in a well under its own row. */
.ofc-jb-act { white-space: nowrap; text-align: right; }
.ofc-jb-edit > td { background: var(--o-inset); }
.ofc-edit { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 0.6rem 1rem; align-items: end; padding: 0.35rem 0; }
.ofc-edit label { display: grid; gap: 0.25rem; min-width: 0; font-size: var(--o-t-xs); color: var(--o-dim); }
/* A text field's own width (twenty characters) was wider than its column, and
   "Site address" ran under "Next action", which ran off the table. */
.ofc-edit :is(input, select) { width: 100%; min-width: 0; }
.ofc-edit__acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.ofc-edit__msg { margin: 0; font-size: var(--o-t-sm); color: var(--o-dim); }
.ofc-edit__msg[data-tone="bad"] { color: var(--o-bad); }
/* MILESTONE D: an enquiry card says what the home says about it, in the home's words and with a mark. */
.ofc-board__attn { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.75rem; font-weight: 600; }
.ofc-board__attn::before { content: ''; flex: none; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor; }
.ofc-board__attn--bad { color: var(--o-bad); }
.ofc-board__attn--attn { color: var(--o-warn); }
/* THE RECORD AN ADDRESS NAMED (#requests/<id>, #invoices/<id>; lead decision A3): marked by a bar and a
   well, not by colour alone, and focused so the next Tab starts from it. */
.ofc-req.is-target,
#office #ofc-inv-body tr.is-target { background: var(--o-inset); box-shadow: inset 3px 0 0 var(--o-ink, #fff); }
.ofc-req.is-target:focus,
#office #ofc-inv-body tr.is-target:focus { outline: none; }
.ofc-req.is-target:focus-visible,
#office #ofc-inv-body tr.is-target:focus-visible { outline: 1px solid var(--focus-edge); outline-offset: -1px; }
/* On a phone the select goes under the words rather than squeezing them. */
@media (max-width: 40rem) {
  .ofc-req { grid-template-columns: minmax(0, 1fr); }
  .ofc-req > .ofc-input--sm { align-self: start; min-height: 36px; }
}

/* THE TITLE OPENS THE REQUEST'S PAGE (OF-46). */
.ofc-req__open { color: inherit; text-decoration: none; }
.ofc-req__open:hover { text-decoration: underline; text-decoration-color: var(--o-line-4); text-underline-offset: 3px; }

/* A REQUEST'S OWN PAGE (OF-46, #requests/<id>): its words, its state and the
   conversation about it, in one column at reading width. Rows, not cards;
   the edge on the left says whose message it is (theirs the brighter). */
.ofc-reqpage { display: grid; gap: 1.25rem; max-width: 52rem; padding: 0.25rem 0 1rem; }
.ofc-reqpage[hidden] { display: none; }
.ofc-reqpage__back {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 32px;
  padding: 0 0.65rem 0 0.5rem;
  border: 1px solid var(--o-line-2);
  border-radius: var(--o-r-sm);
  background: var(--o-inset);
  color: var(--o-text);
  font: 600 var(--o-t-sm)/1 var(--body);
  text-decoration: none;
}
.ofc-reqpage__back:hover { background: var(--o-raised); }
.ofc-reqpage__head { display: grid; gap: 0.3rem; }
.ofc-reqpage__t {
  margin: 0;
  font: 650 1.375rem/1.25 var(--display);
  letter-spacing: -0.012em;
  color: var(--o-strong);
  overflow-wrap: anywhere;
}
.ofc-reqpage__t:focus { outline: none; }
.ofc-reqpage__who { margin: 0; font-size: var(--o-t-md); color: var(--o-dim); }
.ofc-reqpage__ctl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.1rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--o-line);
  border-bottom: 1px solid var(--o-line);
  font-size: var(--o-t-sm);
  color: var(--o-faint);
}
.ofc-reqpage__state { display: inline-flex; align-items: center; gap: 0.5rem; }
.ofc-reqpage__k,
.ofc-reqpage__h {
  margin: 0;
  font-size: var(--o-t-label);
  font-weight: 600;
  color: var(--o-faint);
}
.ofc-reqpage__state .ofc-input--sm { min-width: 8.5rem; background-color: transparent; border-color: var(--o-line-2); }
.ofc-reqpage__s { display: grid; gap: 0.6rem; }
.ofc-reqpage__body,
.ofc-convo__b {
  margin: 0;
  max-width: 68ch;
  font-size: var(--o-t-md);
  line-height: 1.55;
  color: var(--o-text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.ofc-reqpage__none { margin: 0; font-size: var(--o-t-sm); color: var(--o-dim); }
/* Theirs to last: ours to answer, so attention, in the word and a mark. */
.ofc-reqpage__wait { margin: 0; font-size: var(--o-t-sm); color: var(--o-warn-ink); }
.ofc-reqpage__wait::before { content: ''; display: inline-block; width: 0.45rem; height: 0.45rem; margin-right: 0.4rem; border-radius: 50%; vertical-align: 0.1em; background: var(--o-warn); }
.ofc-reqpage__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; margin-top: 0.25rem; }
.ofc-reqpage__to { font-size: var(--o-t-sm); color: var(--o-dim); overflow-wrap: anywhere; }
.ofc-convo { list-style: none; margin: 0; padding: 0; display: grid; }
.ofc-convo:empty { display: none; }
.ofc-convo__m { display: grid; gap: 0.35rem; padding: 0.75rem 0 0.75rem 0.9rem; border-left: 2px solid var(--o-line-2); }
.ofc-convo__m.is-in { border-left-color: var(--o-line-3); }
.ofc-convo__top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  margin: 0;
  font-size: var(--o-t-sm);
  color: var(--o-text);
}
.ofc-convo__top b { font-weight: 650; overflow-wrap: anywhere; }
.ofc-convo__when { font-size: var(--o-t-xs); color: var(--o-faint); font-variant-numeric: tabular-nums; }
.ofc-convo__open { margin-left: auto; font-size: var(--o-t-xs); color: var(--o-dim); text-underline-offset: 3px; }
.ofc-convo__open:hover { color: var(--o-text); }
/* Through the site (OF-35): the door, where a mail has its link. */
.ofc-convo__via { margin-left: auto; font-size: var(--o-t-xs); color: var(--o-faint); }
.ofc-convo__subj { margin: 0; font-size: var(--o-t-xs); color: var(--o-dim); overflow-wrap: anywhere; }
@media (max-width: 40rem) {
  .ofc-reqpage__t { font-size: 1.2rem; }
  :is(.ofc-convo__open, .ofc-convo__via) { margin-left: 0; }
}

.ofc-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

/* A form's own status line, everywhere rather than per-id. #nc-msg had this
   and the five forms added after it did not. */
.ofc-task p[role="status"] {
  margin: 0;
  min-height: 1.25em;
  font-size: var(--o-t-sm);
  font-weight: 550;
  color: var(--o-dim);
}
.ofc-task p[role="status"].is-warn { color: var(--o-warn-ink); }

.ofc-filter {
  min-height: 30px;
  min-width: 15rem;
  padding: 0 0.6rem;
  border: 1px solid var(--o-line-3);
  border-radius: var(--o-r-sm);
  background: var(--o-inset);
  color: var(--o-text);
  font: 500 var(--o-t-sm)/1 var(--body);
}
.ofc-filter::placeholder { color: var(--o-faint); }
.ofc-filter:focus {
  outline: 1px solid var(--focus-edge);
  outline-offset: -1px;
  border-color: var(--focus-edge);
  box-shadow: 0 0 0 1px var(--focus-halo);
}

/* ==========================================================================
   11. BANNERS AND THE PALETTE
   ========================================================================== */

/* #ofc-boot says the screen stopped or failed to load, which is the red
   state; #ofc-stale below is a quiet grey note about old numbers. */
#ofc-boot, #ofc-stale {
  margin: 0 0 0.9rem;
  padding: 0.7rem 0.9rem;
  border-radius: var(--o-r);
  background: var(--o-bad-bg);
  border-left: 3px solid var(--o-bad-mark);
  color: var(--o-bad);
  font-size: var(--o-t-sm);
  font-weight: 600;
}
#ofc-stale {
  background: var(--o-inset);
  border-left-color: var(--o-line-2);
  color: var(--o-dim);
}

.ofc-palette {
  width: min(32rem, 92vw);
  margin: 12vh auto auto;
  padding: 0.45rem;
  border: 1px solid var(--o-line-2);
  border-radius: var(--o-r-lg);
  background: var(--o-bg);
  color: var(--o-text);
}
/* ONE RULE. There were two of these on consecutive lines, so the first was
   dead the moment the second was written — and the second used rgb(10,14,18),
   a near-black sitting 0.0003 in luminance from `--o-inset`. A fourth
   near-black nobody can see is still a fourth value to keep in step. */
.ofc-palette::backdrop { background: rgb(0 0 0 / 0.62); }
.ofc-palette input {
  width: 100%;
  min-height: 38px;
  padding: 0 0.7rem;
  border: 1px solid var(--o-line-3);
  border-radius: var(--o-r-sm);
  background: var(--o-inset);
  color: var(--o-text);
  font: 500 var(--o-t-md)/1 var(--body);
}
.ofc-palette input:focus { outline: 1px solid var(--focus-edge); outline-offset: -1px; border-color: var(--focus-edge); box-shadow: 0 0 0 1px var(--focus-halo); }
.ofc-palette ul { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 0.1rem; }
.ofc-palette li {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.45rem 0.6rem;
  border-radius: var(--o-r-sm);
  font-size: var(--o-t-sm);
  font-weight: 650;
  cursor: pointer;
}
.ofc-palette li.is-on { background: var(--o-press); }
.ofc-palette li em { font-style: normal; color: var(--o-faint); font-weight: 500; }
/* WHERE ONE KIND OF RESULT ENDS (OF-11): what was open, what can be done,
   where to go, what was found. A rule between them, not a heading. */
.ofc-palette li.is-gap { position: relative; margin-top: 0.45rem; }
.ofc-palette li.is-gap::before { content: ""; position: absolute; top: -0.3rem; left: 0.6rem; right: 0.6rem; border-top: 1px solid var(--o-line); }

.ofc-view[hidden] { display: none; }

/* ==========================================================================
   12. NARROW

   Below 62rem the rail stops being a rail: its six sections are a bar at the
   foot of the screen and the open section's pages are tabs under the brand
   (the side menu's own rules, further down), the frame stops owning the
   viewport height, and the page scrolls the way a page does — because a 15rem
   fixed column on a 380px screen is 40% of the screen spent on navigation.
   ========================================================================== */

@media (max-width: 62rem) {
  #office, #ads, #ebay {
    display: block;
    height: auto;
    overflow: visible;
  }
  .ofc-main { display: block; overflow: visible; }
  .ofc-scroll { overflow: visible; padding: 0.9rem 0.9rem 3rem; }

  .ofc-rail {
    display: block;
    border-right: 0;
    border-bottom: 1px solid var(--o-line);
  }
  .ofc-side__g { display: none; }
  .ofc-rail__foot { display: none; }

  .ofc-top { position: sticky; top: 0; z-index: 20; }
  .ofc-jump { display: none; }

  
}

/* ---- PHONE (Phase VI) --------------------------------------------------------
   Measured at 390px on the wall: the page action covered the page title
   ("Cli[+ New client]"), summary figures stacked into a screen of their own,
   the Clients view bar fell into a column, and Ads' nested rail stood 480px
   tall. On a phone: the title has its own line and the actions a row under
   it; figures sit three to a row without their sentences; the Ads strip is
   Ads' own views. */
@media (max-width: 40rem) {
  .ofc-top { flex-wrap: wrap; row-gap: 0.55rem; min-height: 0; padding: 0.7rem 1rem; }
  .ofc-top__where { flex: 1 1 100%; }
  .ofc-top__acts { flex: 1 1 100%; flex-wrap: wrap; }
  /* THE OFFICE'S IS ONE LINE (OF-07): the title, then the page's action and
     the refresh arc at its end. The title had a line to itself and the arc a
     second line under it, alone; the line under the title is the desktop's. */
  #office .ofc-top { flex-wrap: nowrap; gap: 0.75rem; min-height: 3.5rem; padding: 0.5rem 1rem; }
  #office .ofc-top__where { flex: 1 1 auto; min-width: 0; }
  #office .ofc-top__where h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #office .ofc-top__acts { flex: none; flex-wrap: nowrap; gap: 0.25rem; }
  /* As many figures to a line as fit at 8rem, not three thirds: a third of 320px is 90px, and Invoices'
     "$3,149.00" ran to its neighbour's first digit (2026-10-17, once amounts said their cents). */
  .ofc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 0.75rem 1rem; }
  .ofc-stat { max-width: none; }
  .ofc-stat__s { display: none; }
  .ofc-stat__n, #office .ofc-stat--hero .ofc-stat__n { font-size: 1.375rem; }
  .ofc-stat--hero:not(.is-clear) { grid-column: 1 / -1; }
  .ofc-stat--hero:not(.is-clear) .ofc-stat__s { display: block; }
  .ofc-stat__k { font-size: var(--o-t-xs); }
  #ofc-clients-card { display: block; }
  #ofc-clients-card > .ofc-card__bar { margin: 0 0 0.75rem; }
  #ofc-clients-card > .ofc-card__bar .ofc-filter { min-width: 0; width: 100%; }
  /* Enquiries' view bar: List/Pipeline, then the search in what is left. The
     search kept its desktop 16rem and ran under the switch (OF-07). */
  #ofc-crm-card > .ofc-card__bar .ofc-filter { flex: 1 1 auto; min-width: 0; width: 100%; }

}

/* A FIELD ON A PHONE IS 16PX (OF-07). Under 16px, Safari on a phone zooms the
   page into a field as it takes focus and leaves it zoomed: the Office's
   13.5px fields did it on every search box and form. */
@media (max-width: 40rem), (pointer: coarse) {
  :is(#office, #portal, #ebay, #ads) :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"], [type="hidden"], [type="submit"], [type="button"]), select, textarea) { font-size: 16px; }
}

/* THE CHROME'S SIGN OUT is the rail's (its foot, above 62rem) and Settings'
   (every width; a phone's rail has no foot). The top bar's third copy sat
   among the page's own actions on a phone and went with OF-04. */

@media (prefers-reduced-motion: reduce) {
  :is(#office, #portal, #ebay, #ads) *,
  :is(#office, #portal, #ebay, #ads) *::before,
  :is(#office, #portal, #ebay, #ads) *::after { transition: none !important; }
}

/* ==========================================================================
   13. THE OWNER SCREEN AND THE CUSTOMER PORTAL

   Both `<link>` this stylesheet and build themselves out of its classes. The
   rewrite above gave the office a rail, a header and a router; these two have
   none of that and should not — the owner screen is one long read, the portal
   is one customer looking at one project. What they share is the MATERIAL:
   the same glass, the same ink, the same controls, the same density.

   Every class below is one those two pages were already using and the rewrite
   dropped. They are restored as the new design, not as the old one.
   ========================================================================== */

/* ---- the page header ----
   A masthead is wrong for the office, which is why it became a rail — but it
   is right here: neither page has sections to move between, so the header's
   whole job is to say whose screen this is and offer the way out.

   ONE HAIRLINE UNDER IT, nothing else — the same rule the office's top bar
   gets. A masthead that is also a floating panel is two ideas. */
.ofc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.1rem;
  padding-inline: 0;
  border-bottom: 1px solid var(--o-line-2);
}

.ofc-head__id { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.ofc-head h1 {
  margin: 0;
  font-family: var(--display);
  font-size: var(--o-t-xl);
  font-weight: 750;
  letter-spacing: -0.018em;
  line-height: 1.15;
}
.ofc-head__id p {
  margin: 0.1rem 0 0;
  color: var(--o-faint);
  font-size: var(--o-t-sm);
  font-weight: 500;
}

/* The header logo is the one place a 40px mark is right — it is the only
   brand element on the page, where the rail's 30px sits above a wordmark. */
.ofc-head .ofc-logo { width: 38px; height: 38px; }

/* ---- the lede band ----
   One number and the decision it implies, at the top of the screen: the
   project's stage on the portal. The office's equivalent is `.ofc-stat--hero`
   and they are deliberately the same figure size — it is the same idea. */
.ofc-lede {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 0.95rem 1.2rem;
  margin-bottom: 1.1rem;
  border-radius: var(--o-r-lg);
  border: 1px solid var(--o-line-2);
  /* The one place a colour edge earns its keep: this band exists to say
     something needs a decision today. One 2px rule, not a tinted panel. */
  border-left: 2px solid var(--o-warn);
}

.ofc-lede__n {
  margin: 0;
  font-family: var(--display);
  font-size: var(--o-t-hero);
  font-weight: 750;
  line-height: 0.95;
  letter-spacing: -0.03em;
  /* Proportional figures: tabular gives every digit the width of a zero, which
     at 52px makes a number like 121 read loose. Tabular is for COLUMNS. */
  color: var(--o-warn-ink);
}
.ofc-lede__label { margin: 0; font-size: var(--o-t-lg); font-weight: 700; color: var(--o-text); }
.ofc-lede__sub { margin: 0.15rem 0 0; color: var(--o-faint); font-size: var(--o-t-sm); font-weight: 500; }

/* CLEAR IS ITS OWN STATE AND IS SAID, not left as an absence — and it is worth
   a line rather than a headline, because "nothing needs you" is good news and
   good news does not need 52 pixels. */
.ofc-lede.is-clear {
  padding: 0.6rem 1rem;
  border-left-color: var(--o-ok-mark);
}
.ofc-lede.is-clear .ofc-lede__n { font-size: var(--o-t-lg); color: var(--o-ok); }
.ofc-lede.is-clear .ofc-lede__label { font-size: var(--o-t-sm); font-weight: 650; }
/* UNKNOWN IS NEITHER (2026-10-16): nothing is known to need anyone, so there
   is no warn edge and no headline figure. eBay before it is connected drew a
   52px amber dash with the edge that says a decision is due today. */
.ofc-lede.is-unknown { padding: 0.6rem 1rem; border-left: 1px solid var(--o-line-2); }
.ofc-lede.is-unknown .ofc-lede__n { font-size: var(--o-t-lg); color: var(--o-faint); }
.ofc-lede.is-unknown .ofc-lede__label { font-size: var(--o-t-sm); font-weight: 650; }

/* ---- the tally ----
   A TALLY SHOWS WHAT EXISTS; the zeros go in a sentence underneath. Seventeen
   equal tiles, fifteen of them reading 0, is what the owner called amateur on
   the office dashboard — the office answered it with a stacked bar, and these
   two pages answer it with tiles that size to their own labels. A tile is only
   here because there is something in it. */
.ofc-tally {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.ofc-tally li {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  padding: 0.35rem 0.65rem;
  border-radius: var(--o-r-sm);
  background: var(--o-inset);
  border: 1px solid var(--o-line);
}
/* The number and its name on one line, so a long stage name simply makes a
   longer tile instead of overrunning its neighbour. */
.ofc-tally b {
  font-family: var(--display);
  font-size: var(--o-t-lg);
  font-weight: 750;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--o-text);
}
.ofc-tally li span {
  font-size: var(--o-t-label);
  font-weight: 600;
  color: var(--o-faint);
  white-space: nowrap;
}
/* The zeros, as one quiet line rather than fifteen loud boxes. */

.ofc-tally li.is-zero, .ofc-tally li.is-zero :is(b, span) { color: var(--o-faint); }

/* ---- the full-width card ----
   `--wide` spans the whole 12-column grid; `--half` takes six tracks. */
.ofc-card--wide { grid-column: 1 / -1; }

/* The owner screen is a single column of wide cards on any screen that can
   hold two, so its grid does not need the office's twelve tracks — but it uses
   the same class, so the tracks are what it gets, and `--wide` is what makes
   that correct rather than accidental. */
#portal .ofc-grid { gap: 0.9rem; }

/* ==========================================================================
   14. FIGURES AND LINE TABLES
   ========================================================================== */

/* The totals strip: a few figures across the top of a pane, divided by the
   gap over a line-coloured ground — the same instrument treatment as the
   stat row, at a smaller size. */
.ofc-tot {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 1px;
  margin: 0.85rem 0;
  background: var(--o-line-2);
  border: 1px solid var(--o-line-2);
  border-radius: var(--o-r);
  overflow: hidden;
  container-type: inline-size;
}
.ofc-tot > div { background: var(--o-bg); padding: 0.6rem 0.75rem; }
/* NO EMPTY CELL (OF-07). Two to a row, an odd fact left a cell of the line
   colour beside it, a grey box that read as something missing: the
   enquiry's three facts did it in the inspector and on a phone. Under three
   columns' width the last odd fact takes the row. */
@container (max-width: 24.2rem) {
  .ofc-tot > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.ofc-tot dt {
  margin: 0 0 0.15rem;
  font-size: var(--o-t-label);
  font-weight: 600;
  color: var(--o-faint);
}
.ofc-tot dd {
  margin: 0;
  font-family: var(--display);
  font-size: var(--o-t-xl);
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--o-text);
}
.ofc-tot dd small {
  display: block;
  margin-top: 0.1rem;
  font-family: var(--body);
  font-size: var(--o-t-xs);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--o-faint);
}
/* ---- the lines ---- */
.ofc-lines { width: 100%; border-collapse: collapse; font-size: var(--o-t-sm); }
.ofc-lines th {
  position: sticky;
  top: 0;
  z-index: 1;
  text-align: left;
  padding: 0.35rem 0.5rem;
  background: var(--o-bg);
  border-bottom: 1px solid var(--o-line-2);
  color: var(--o-faint);
  font-size: var(--o-t-label);
  font-weight: 600;
  white-space: nowrap;
}
.ofc-lines td {
  height: var(--o-row);
  padding: 0.3rem 0.5rem;
  border-bottom: 1px solid var(--o-line);
  color: var(--o-dim);
  font-weight: 500;
  vertical-align: middle;
}
/* A row with a note under a cell reads from the top, so its other cells
   start level with the first line rather than floating beside the note. */
.ofc-lines tr:has(.ofc-note) td { vertical-align: top; }
.ofc-lines tbody tr:hover td { background: var(--o-hover); }
.ofc-lines td:first-child { color: var(--o-text); font-weight: 600; }
.ofc-lines td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* A FIGURE NOBODY HAS SET IS NOT A FIGURE WORTH ZERO, and it must not read as
   one. */
.ofc-lines td.is-unpriced { color: var(--o-warn-ink); }
.ofc-lines td.is-overdue { color: var(--o-bad); }

.ofc-lines td.act { width: 1%; text-align: right; }

/* A small label inside a list row. */
.ofc-co__meta {
  margin: 0;
  font-size: var(--o-t-label);
  font-weight: 600;
  color: var(--o-faint);
}

/* A qualifier under a figure in a table cell — "$450 disputed" beneath the
   amount it is part of. Without `display:block` it ran straight on from the
   number and read as one value: "$3,100$450 disputed".
 *
 * IT WRAPS. `white-space: nowrap` is right for a two-word qualifier under a
 * number and catastrophic for a sentence: one explanation on one line forces
 * the cell, the table and the card wider than the screen, and clips every
 * explanation mid-word.
 *
 * Numbers still do not wrap: `.ofc-lines td.num` sets nowrap on the cell
 * itself, which is where it belongs — a figure broken across two lines is
 * unreadable, a sentence broken across two lines is a sentence. */
.ofc-lines td small {
  display: block;
  margin-top: 0.1rem;
  font-size: var(--o-t-xs);
  font-weight: 500;
  color: var(--o-faint);
  line-height: 1.35;
  /* Long enough for a clause, short enough that the column cannot run away. */
  max-width: 34rem;
  overflow-wrap: anywhere;
}
/* A qualifier under a FIGURE is short by nature and reads better on one line. */
.ofc-lines td.num small { white-space: nowrap; max-width: none; }

/* A DEAD CONTROL HAS TO LOOK DEAD. Choosing "lost" disables the revisit date,
   and the box was styled identically to a live one — so it read as a field that
   simply would not open, which is indistinguishable from a broken page. */
.ofc-fields input:disabled,
.ofc-fields select:disabled,
.ofc-fields textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---- the CRM board card, which carried a name and an age and nothing else -- */
.ofc-board__what {
  display: block;
  margin-top: 0.3rem;
  font-size: var(--o-t-xs);
  line-height: 1.4;
  color: var(--o-dim);
}
.ofc-board__reach {
  margin: 0.35rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.6rem;
  font-size: var(--o-t-xs);
}
.ofc-board__reach a { color: var(--o-text); text-decoration: none; border-bottom: 1px solid var(--o-line-2); }
.ofc-board__reach a:hover { border-bottom-color: var(--teal); }

/* ---- the outcome, which the board never drew ------------------------------
   MONEY IS THE LOUDEST THING ON A WON CARD, because it is the only figure on
   this screen that is revenue. It gets weight and the full text colour, which
   nothing else on the card has — the name is bold, but this is bold AND
   bright, and there is exactly one per card so it cannot become noise. */
.ofc-board__money {
  display: block;
  margin-top: 0.4rem;
  font-size: var(--o-t-sm);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--o-text);
}
/* AND THE ABSENCE OF IT IS A DIFFERENT THING FROM A SMALL NUMBER. Drawn as a
   prompt rather than as a figure: no tabular numerals, no weight, and the
   dimmed colour the rest of the card's secondary text uses, so the eye reads
   it as "still to do" rather than misreading it as an amount. */
.ofc-board__money--none {
  font-weight: 400;
  color: var(--o-dim);
}
.ofc-board__why {
  display: block;
  margin-top: 0.4rem;
  font-size: var(--o-t-xs);
  color: var(--o-dim);
}
/* The lost reason reads as a label rather than as more description, so it is
   set apart from `__what` above it by a rule rather than by size alone. */
.ofc-board__why::before {
  content: "Lost: ";
  color: var(--o-dim-2, var(--o-dim));
}
/* THE COLUMN TOTAL sits under the heading and above the cards, so it is read
   before the column rather than discovered after scrolling it. */
.ofc-board__sum {
  margin: 0 0 0.5rem;
  font-size: var(--o-t-xs);
  font-variant-numeric: tabular-nums;
  color: var(--o-text);
}
.ofc-board__sum .ofc-dim { font-variant-numeric: normal; }
/* "AT LEAST" IS A QUALIFIER, NOT PART OF THE FIGURE, so it takes the dim step
   and leaves the money the brightest thing on the line. It sits INSIDE the
   total rather than in a note underneath on purpose: the truncation is already
   stated on the card's state line, and that is exactly where it failed to be
   read — a caveat one element away from the number it qualifies is a caveat
   nobody connects to it. `--o-dim` rather than `--o-dim-2`, which is not
   defined anywhere and only ever resolves to its fallback. */
.ofc-board__atleast {
  font-variant-numeric: normal;
  color: var(--o-dim);
}

/* PARKED IS QUIET, DUE IS NOT. A revisit date in the future is a note; one that
   has arrived is the enquiry asking to be picked up today, which is the single
   thing this board exists to surface. */
.ofc-board__revisit {
  display: block;
  margin-top: 0.35rem;
  font-size: var(--o-t-xs);
  color: var(--o-faint);
}
.ofc-board__revisit.is-due { color: var(--o-warn-ink); font-weight: 650; }
.ofc-board__card.is-due { border-left: 2px solid var(--o-warn); }

/* ---- the mailbox addresses -----------------------------------------------
   A row of what mail has actually arrived for. Pills, like every other control
   on this screen, and the count carries the weight rather than a colour: an
   address with something waiting says so in words. */
/* A VIEW BAR, NOT A ROW OF BUBBLES (Phase VI). The same buttons, the same
   aria-pressed, the same counts — drawn as an integrated tab strip on a
   hairline: the current view underlined in the accent, the rest plain text.
   Pills stay for what they are for: a tag or a state on a row. */
.ofc-addr {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.35rem;
  margin: 0.1rem 0 1rem;
  border-bottom: 1px solid var(--o-line);
}
:is(#office, #portal, #ebay, #ads) .ofc-addr__b {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  min-height: 0;
  margin: 0 0 -1px;
  padding: 0.55rem 0 0.6rem;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--o-faint);
  font: 550 var(--o-t-sm)/1.2 var(--body);
  cursor: pointer;
  transition: color .12s ease, border-color .12s ease;
}
:is(#office, #portal, #ebay, #ads) .ofc-addr__b:hover { color: var(--o-text); background: transparent; }
:is(#office, #portal, #ebay, #ads) .ofc-addr__b.is-on {
  background: transparent;
  border-bottom-color: var(--o-accent);
  color: #FFFFFF;
}
.ofc-addr__t { letter-spacing: 0; }
.ofc-addr__n { color: var(--o-faint); font-weight: 500; font-variant-numeric: tabular-nums; }
.ofc-addr__b.is-on .ofc-addr__n { color: var(--o-dim); }
.ofc-addr__n.is-unread { color: var(--o-warn-ink); font-weight: 650; }

/* ---- one enquiry, opened -------------------------------------------------
   The board card is now a control, so it has to say so on hover and focus. */
.ofc-board__card { cursor: pointer; }
.ofc-board__card:hover { border-color: var(--o-line-4); }
/* Its name is the button that opens it (2026-10-16): the card's words, no
   button's box, and the keyboard's lit edge round the name. */
:is(#office, #portal, #ebay, #ads) .ofc-board__open {
  justify-self: start;
  min-height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--o-r-sm);
  background: none;
  color: var(--o-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
:is(#office, #portal, #ebay, #ads) .ofc-board__open:active { transform: none; }
.ofc-board__open:focus-visible {
  outline: 1px solid var(--focus-edge);
  outline-offset: 2px;
}
/* The stage, under what the card says, as a row has it at its end. Not in
   the row's "stage" area: a card has none, and naming it made the card two
   columns, the words squeezed beside the button. */
:is(#office, #portal, #ebay, #ads) .ofc-board__card .ofc-board__stage {
  grid-area: auto; justify-self: start; align-self: start; margin-top: 0.35rem;
}
.ofc-board__card.is-on { background: var(--o-press); }

.ofc-lead__h { margin: 0 0 0.2rem; font-size: var(--o-t-lg); }
.ofc-lead__scope {
  margin: 0 0 0.9rem;
  color: var(--o-dim);
  line-height: 1.5;
  text-wrap: pretty;
}
.ofc-lead__sub {
  margin: 1.1rem 0 0.35rem;
  font-size: var(--o-t-label);
  font-weight: 600;
  color: var(--o-faint);
}
.ofc-lead__reach {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.9rem;
  margin: 0.6rem 0 0;
  font-size: var(--o-t-sm);
}
.ofc-lead__reach a { color: var(--o-text); text-decoration: none; border-bottom: 1px solid var(--o-line-2); }
.ofc-lead__reach a:hover { border-bottom-color: var(--teal); }

/* WHAT SOMEBODY WROTE, in their own words — so it is set apart from the
   screen's own sentences rather than reading as more chrome. */
.ofc-lead__notes {
  margin: 0;
  padding: 0.6rem 0.8rem;
  border-left: 2px solid var(--o-line-2);
  background: var(--o-inset);
  border-radius: 0 var(--o-r-sm) var(--o-r-sm) 0;
  color: var(--o-text);
  line-height: 1.55;
  white-space: pre-wrap;
  text-wrap: pretty;
}
/* One entry each (PS-03): the day and the door it came through, above the words. */
.ofc-lead__notes + .ofc-lead__notes { margin-top: 0.5rem; }
.ofc-lead__when { display: block; margin-bottom: 0.2rem; color: var(--o-faint); font-size: var(--o-t-xs); white-space: normal; }

/* ---- can this client sign in (0009) ---------------------------------------
   THE OFFICE'S STATE VOICE, as Plans speaks it (OF-40): a word with a small
   mark, never a capsule and never colour alone. Signed in is quiet, a ring in
   the page's ink; invited and no login are the same ring, dimmer; a lapsed
   invitation is ours to send again, so it carries the attention mark. A read
   that failed is a dash with no mark: it must not look like an answer. */
.ofc-login { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; color: var(--o-text); }
.ofc-login::before { content: ''; flex: none; width: 0.45rem; height: 0.45rem; border-radius: 50%; border: 1px solid currentColor; }
.ofc-login.is-invited, .ofc-login.is-none { color: var(--o-dim); }
.ofc-login.is-lapsed { color: var(--o-warn-ink); }
.ofc-login.is-lapsed::before { border-color: var(--o-warn); background: var(--o-warn); }
.ofc-login.is-unknown { color: var(--o-faint); }
.ofc-login.is-unknown::before { content: none; }

/* The Invite control sits AFTER the state rather than replacing it, so the
   cell still says what is true while offering the thing to do about it. */
.ofc-login + .ofc-linkish { margin-left: 0.5rem; }

.ofc-invite { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.4rem; }
.ofc-invite__in {
  font: inherit;
  color: var(--o-text);
  background: var(--o-bg-2, transparent);
  border: 1px solid var(--o-line-3);
  border-radius: 6px;
  padding: 0.28rem 0.5rem;
  min-width: 20ch;
  flex: 1 1 20ch;
}
.ofc-invite__in:focus-visible { outline: 1px solid var(--focus-edge); outline-offset: -1px; box-shadow: 0 0 0 1px var(--focus-halo); }
.ofc-invite__msg { margin: 0.35rem 0 0; font-size: var(--o-t-xs); color: var(--o-dim); max-width: 40ch; }

/* Project A, Phase 9: the one link to every client's Cloudflare infrastructure, drawn only where
   tkati-infra is configured (page-office.mjs drawClients). */
.ofc-infra-link{
  display:inline-flex; align-items:center; min-height:36px; white-space:nowrap;
  color:var(--ofc-text-2, #C8C8C8); text-decoration:none; border-bottom:1px solid rgba(255,255,255,.36);
  font:500 13px/1.4 "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.ofc-infra-link:hover{color:#FFFFFF}

/* PLANS (Phase I, milestone H): a plan's state is a word with a mark, never colour alone. */
.ofc-plan__st { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
.ofc-plan__st::before { content: ''; flex: none; width: 0.45rem; height: 0.45rem; border-radius: 50%; border: 1px solid currentColor; }
.ofc-plan__st--bad { color: var(--o-bad); }
.ofc-plan__st--bad::before, .ofc-plan__st--attn::before { background: currentColor; }
.ofc-plan__st--attn { color: var(--o-warn); }
.ofc-plan__st--unknown { color: var(--o-neutral); }
#office #ofc-plans-sum .oh-kv { max-width: 34rem; margin: 0 0 1rem; }
/* A NAME IN A TABLE IS A LINK IN THE PAGE'S INK, not the browser's default blue and visited purple
   (the Plans and Clients lists open the client's record from the name). */
#office .ofc-lines td > a:not([class]),
#office .ofc-table td > a:not([class]) { color: var(--o-text); text-decoration: underline; text-decoration-color: var(--o-line-4);
  text-underline-offset: 3px; }
#office .ofc-lines td > a:not([class]):hover,
#office .ofc-table td > a:not([class]):hover { color: #fff; text-decoration-color: currentColor; }
#office #ofc-plans-body tr.is-target { background: var(--o-inset); box-shadow: inset 3px 0 0 var(--o-ink, #fff); }
#office #ofc-plans-body tr.is-target:focus { outline: none; }
#office #ofc-plans-body tr.is-target:focus-visible { outline: 1px solid var(--focus-edge); outline-offset: -1px; }
#office #ofc-plans-sum .oh-kv--rec { margin-top: 0; border-top: 0; }
/* MILESTONE J: a request names its client (a link to their record) and its project, and offers the Mailbox. */
.ofc-req__link { color: var(--o-text); text-decoration: underline; text-decoration-color: var(--o-line-4); text-underline-offset: 3px;
  display: inline-block; min-height: 24px; line-height: 24px; }
.ofc-req__link:hover { color: #fff; text-decoration-color: currentColor; }
.ofc-req__write { min-height: 24px; padding: 0 0.6rem; border: 1px solid var(--o-line-3); border-radius: var(--o-pill);
  background: transparent; color: var(--o-text); font: 600 var(--o-t-xs)/1 var(--body, inherit); cursor: pointer; }
.ofc-req__write:hover { border-color: var(--o-line-4); }
.ofc-req__write:focus-visible { outline: 1px solid var(--focus-edge); outline-offset: 2px; }
/* 0037: a project's next move, under its standing; a day that has passed is said ("was due") and marked. */
.ofc-jb-move { display: block; overflow-wrap: anywhere; }
.ofc-jb-next { display: block; margin-top: 0.2rem; font-size: var(--o-t-xs); color: var(--o-dim); overflow-wrap: anywhere; }
.ofc-jb-next.is-late { color: var(--o-warn-ink); }
.ofc-jb-next.is-late::before { content: ''; display: inline-block; width: 0.45rem; height: 0.45rem; margin-right: 0.4rem; border-radius: 50%; vertical-align: 0.1em; background: var(--o-warn); }
#office #ofc-jb-body tr.is-target { background: var(--o-inset); box-shadow: inset 3px 0 0 var(--o-ink, #fff); }
#office #ofc-jb-body tr.is-target:focus { outline: none; }
#office #ofc-jb-body tr.is-target:focus-visible { outline: 1px solid var(--focus-edge); outline-offset: -1px; }
/* 0037: how long a project has been at its stage. */
.ofc-jb-age { display: block; margin-top: 0.15rem; font-size: var(--o-t-xs); color: var(--o-dim); }
/* A link inside a card's subtitle (Plans → Ads): the page's ink, underlined, a 24px target. */
#office .ofc-sub a:not([class]) { color: var(--o-text); text-decoration: underline; text-decoration-color: var(--o-line-4);
  text-underline-offset: 3px; display: inline-block; min-height: 24px; line-height: 24px; }
#office .ofc-sub a:not([class]):hover { color: #fff; text-decoration-color: currentColor; }

/* ON A PHONE, A LIST IS CARDS, NOT A TABLE THAT SCROLLS (the wall of 2026-09-29: Plans, Projects and
   Invoices pushed their state and next-step columns off a 390px screen). Each cell says its column's name
   (data-label, set from the header by page-office.mjs labelCells); a cell whose header has no words (an
   action) shows no name. The header stays for screen readers, visually hidden. */
@media (max-width: 640px) {
  #office :is(.ofc-lines, .ofc-table).is-cards { display: block; min-width: 0; }
  #office :is(.ofc-lines, .ofc-table).is-cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  #office :is(.ofc-lines, .ofc-table).is-cards tbody { display: block; }
  #office :is(.ofc-lines, .ofc-table).is-cards tr { display: block; padding: 0.55rem 0; border-top: 1px solid var(--o-line); }
  #office :is(.ofc-lines, .ofc-table).is-cards tbody tr:first-child { border-top: 0; }
  #office :is(.ofc-lines, .ofc-table).is-cards td { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0.1rem 0.6rem; align-items: baseline;
    height: auto; padding: 0.15rem 0; border: 0; text-align: left; white-space: normal; overflow-wrap: anywhere; }
  #office :is(.ofc-lines, .ofc-table).is-cards td::before { content: attr(data-label); color: var(--o-faint); font-size: var(--o-t-label);
    font-weight: 500; }
  #office :is(.ofc-lines, .ofc-table).is-cards td:not([data-label]) { display: block; }
  #office :is(.ofc-lines, .ofc-table).is-cards td:not([data-label])::before { content: none; }
  #office :is(.ofc-lines, .ofc-table).is-cards td[colspan] { display: block; }
  /* A cell across two columns that still has a name (a Clients enquiry's "Account"). */
  #office :is(.ofc-lines, .ofc-table).is-cards td[colspan][data-label] { display: grid; }
  /* THE RECORD'S NAME IS THE CARD'S TITLE: the first cell, with no label
     beside it. A client read "Client Ashgrove Veterinary", an invoice "Number
     TK-0141", a project "Project Website" with its site dealt into the other
     column. */
  #office :is(.ofc-lines, .ofc-table).is-cards tbody td:first-child { display: block; padding-bottom: 0.3rem;
    font-size: var(--o-t-md); font-weight: 600; color: var(--o-text); }
  #office :is(.ofc-lines, .ofc-table).is-cards tbody td:first-child::before { content: none; }
  #office :is(.ofc-lines, .ofc-table).is-cards tbody td:first-child > :is(small, .ofc-linkish) { display: block; margin-top: 0.15rem; font-weight: 400; }
  #office :is(.ofc-lines, .ofc-table).is-cards tbody tr:hover td { background: transparent; }
  /* Every element in a named cell sits in the value column (Phase VI): a name
     and the line under it were being dealt into both columns of the card. */
  #office :is(.ofc-lines, .ofc-table).is-cards td[data-label] > * { grid-column: 2; justify-self: start; }
  /* A card's quiet action lines up with the words above it: its own padding
     set "Edit" 8px in from every other line of a Projects card. */
  #office #ofc-jb-table.is-cards .ofc-jb-act { text-align: left; }
  #office #ofc-jb-table.is-cards .ofc-jb-act .ofc-quiet { margin-left: -0.5rem; }
}

/* A PHONE'S LIST ROW (2026-10-17). The cards above give every column a line of its own beside its name,
   so an invoice was eight lines (190px), a project nine, and a screen held three. The Office's four lists
   read as a phone's own apps read a list: the record's name with its figure or its action on the first
   line, whose it is with its state on the second, the rest quieter under them. A column's name stays
   only beside a value that would not say what it is (Paid, Owing, Tier, Started, Next). Placement only:
   the table, its order, and its header for a screen reader are unchanged. */
@media (max-width: 640px) {
  #office :is(#ofc-inv-table, #ofc-plans-table, #ofc-jb-table, #ofc-clients-table).is-cards > tbody > tr:not(.ofc-jb-edit) {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; row-gap: 0.2rem;
    align-items: baseline; padding: 0.8rem 0; }
  #office :is(#ofc-inv-table, #ofc-plans-table, #ofc-jb-table, #ofc-clients-table).is-cards > tbody > tr:not(.ofc-jb-edit) > td {
    display: block; grid-column: 1 / -1; min-width: 0; padding: 0; }
  #office :is(#ofc-inv-table, #ofc-plans-table, #ofc-jb-table, #ofc-clients-table).is-cards > tbody > tr:not(.ofc-jb-edit) > td::before {
    content: none; }
  #office :is(#ofc-inv-table, #ofc-plans-table, #ofc-jb-table, #ofc-clients-table).is-cards > tbody > tr:not(.ofc-jb-edit) > td:empty {
    display: none; }

  /* The left of a two-part line, and its right: a figure, a state or an action, set to the edge. */
  #office #ofc-inv-table.is-cards > tbody > tr > td:is(:nth-child(1), :nth-child(3), :nth-child(6)),
  #office #ofc-plans-table.is-cards > tbody > tr > td:is(:nth-child(1), :nth-child(2)),
  #office #ofc-jb-table.is-cards > tbody > tr > td:is(:nth-child(1), :nth-child(2), :nth-child(3)),
  #office #ofc-clients-table.is-cards > tbody > tr > td:is(:nth-child(1), :nth-child(5)) { grid-column: 1; }
  #office #ofc-inv-table.is-cards > tbody > tr > td:is(:nth-child(4), :nth-child(5), :nth-child(7)),
  #office #ofc-plans-table.is-cards > tbody > tr > td:is(:nth-child(3), :nth-child(4)),
  #office #ofc-jb-table.is-cards > tbody > tr > td:is(:nth-child(4), :nth-child(5), :nth-child(7)),
  #office #ofc-clients-table.is-cards > tbody > tr > td:is(:nth-child(2), :nth-child(6)) {
    grid-column: 2; justify-self: end; text-align: right; }

  /* Invoices: number and total; whose it is and its state; what it is for; paid and owing. */
  #office #ofc-inv-table.is-cards > tbody > tr > td:is(:nth-child(1), :nth-child(5)) { grid-row: 1; }
  #office #ofc-inv-table.is-cards > tbody > tr > td:is(:nth-child(3), :nth-child(4)) { grid-row: 2; }
  #office #ofc-inv-table.is-cards > tbody > tr > td:nth-child(2) { grid-row: 3; }
  #office #ofc-inv-table.is-cards > tbody > tr > td:is(:nth-child(6), :nth-child(7)) { grid-row: 4; }
  #office #ofc-inv-table.is-cards > tbody > tr > td:nth-child(8) { grid-row: 5; }
  #office #ofc-inv-table.is-cards > tbody > tr > td:nth-child(5) { font-weight: 600; color: var(--o-text); }
  /* Plans: whose and the price; the plan and its state; what is next; the way to Stripe. */
  #office #ofc-plans-table.is-cards > tbody > tr > td:is(:nth-child(1), :nth-child(3)) { grid-row: 1; }
  #office #ofc-plans-table.is-cards > tbody > tr > td:is(:nth-child(2), :nth-child(4)) { grid-row: 2; }
  #office #ofc-plans-table.is-cards > tbody > tr > td:nth-child(5) { grid-row: 3; }
  #office #ofc-plans-table.is-cards > tbody > tr > td:nth-child(6) { grid-row: 4; }
  #office #ofc-plans-table.is-cards > tbody > tr > td:nth-child(3) { font-weight: 600; color: var(--o-text); }
  /* Projects: the project and Edit; whose and the stage; the tier and when it started; the next move. */
  #office #ofc-jb-table.is-cards > tbody > tr:not(.ofc-jb-edit) > td:is(:nth-child(1), :nth-child(7)) { grid-row: 1; }
  #office #ofc-jb-table.is-cards > tbody > tr:not(.ofc-jb-edit) > td:is(:nth-child(2), :nth-child(4)) { grid-row: 2; }
  #office #ofc-jb-table.is-cards > tbody > tr:not(.ofc-jb-edit) > td:is(:nth-child(3), :nth-child(5)) { grid-row: 3; }
  #office #ofc-jb-table.is-cards > tbody > tr:not(.ofc-jb-edit) > td:nth-child(6) { grid-row: 4; }
  /* Its words end at the edge the stage above ends at: no padding on that side, rather than a margin past it. */
  #office #ofc-jb-table.is-cards .ofc-jb-act .ofc-quiet { margin: 0; padding-inline-end: 0; }
  /* Clients: the name and where they stand; their site; how to reach them; their view and their login. */
  #office #ofc-clients-table.is-cards > tbody > tr > td:is(:nth-child(1), :nth-child(2)) { grid-row: 1; }
  #office #ofc-clients-table.is-cards > tbody > tr > td:nth-child(3) { grid-row: 2; }
  #office #ofc-clients-table.is-cards > tbody > tr > td:nth-child(4) { grid-row: 3; }
  #office #ofc-clients-table.is-cards > tbody > tr > td:is(:nth-child(5), :nth-child(6)) { grid-row: 4; }
  /* An enquiry's one cell for both account columns runs the line. */
  #office #ofc-clients-table.is-cards > tbody > tr > td[colspan] { grid-column: 1 / -1; justify-self: stretch; text-align: left; }

  /* The quieter lines. */
  #office #ofc-inv-table.is-cards > tbody > tr > td:is(:nth-child(2), :nth-child(6), :nth-child(7)),
  #office #ofc-plans-table.is-cards > tbody > tr > td:nth-child(5),
  #office #ofc-jb-table.is-cards > tbody > tr:not(.ofc-jb-edit) > td:is(:nth-child(3), :nth-child(5)),
  #office #ofc-clients-table.is-cards > tbody > tr > td:is(:nth-child(2), :nth-child(4)) {
    font-size: var(--o-t-sm); color: var(--o-dim); }

  /* A column's name, beside the value it names. */
  #office #ofc-inv-table.is-cards > tbody > tr > td:is(:nth-child(6), :nth-child(7))[data-label]::before,
  #office #ofc-jb-table.is-cards > tbody > tr:not(.ofc-jb-edit) > td:is(:nth-child(3), :nth-child(5), :nth-child(6))[data-label]::before {
    content: attr(data-label); display: inline-block; margin-right: 0.45rem; color: var(--o-faint);
    font-size: var(--o-t-label); font-weight: 500; }
  /* A next move runs the line under its name; "Started" keeps its launch day under the date. */
  #office #ofc-jb-table.is-cards > tbody > tr:not(.ofc-jb-edit) > td:nth-child(6) > .ofc-jb-move { display: inline; }
  /* Nothing next is said by saying nothing: "Next —" was a line on every healthy row. */
  #office #ofc-jb-table.is-cards > tbody > tr:not(.ofc-jb-edit) > td:nth-child(6):has(> .ofc-none:only-child) { display: none; }
}

/* ═══ THE SIDE MENU: SIX SECTIONS, THEIR PAGES UNDERNEATH ═══════════════════
   Owner, 2026-10-01: "side menu is super confusing complex etc, shud be bigger
   labels then subpages/organization". Eight tiny uppercase group labels, five
   of them over a single link, became six sections with big labels:
   Dashboard, Inbox, Clients, Money, Channels, System. The pages of the
   section you are in hang under it, smaller, on a guide line; the other
   sections stay closed and show their count (office-rail.mjs sums it). The
   markup is written by tools/office-rail.mjs.

   `:has()` opens the section holding the current page. A browser without it
   shows every section open, which is the old amount of menu and still
   correct. */
.ofc-sec__h,
.ofc-side__a--top {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 40px;
  padding: 0 0.7rem;
  border-radius: var(--o-r-sm);
  font-size: 0.9375rem;               /* 15px: a section reads as a section */
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--o-text);
  text-decoration: none;
  transition: background-color .12s ease, color .12s ease;
}
.ofc-sec__h .ofc-i,
.ofc-side__a--top .ofc-i { width: 18px; height: 18px; color: var(--o-dim); }
.ofc-sec__h:hover { background: var(--o-hover); color: #FFFFFF; }
.ofc-sec__h:focus-visible { outline: 1px solid var(--focus-edge); outline-offset: -1px; }
.ofc-sec__t { flex: 1 1 auto; min-width: 0; }
.ofc-sec { margin-top: 2px; }

/* The section you are in: its label at full white, its icon in the accent. */
.ofc-sec:has([aria-current="page"]) > .ofc-sec__h { color: #FFFFFF; }
.ofc-sec:has([aria-current="page"]) > .ofc-sec__h .ofc-i { color: var(--o-accent); }

/* ITS PAGES: smaller, no icons, on a guide line that starts under the
   section's icon, so the page names line up with the section's name. */
.ofc-sec__pages {
  display: grid;
  gap: 1px;
  margin: 2px 0 10px 19px;
  padding-left: 8px;
  border-left: 1px solid var(--o-line-2);
}
.ofc-sec__pages .ofc-side__a {
  min-height: 32px;
  padding-left: 12px;
  font-size: 0.84375rem;              /* 13.5px */
}
.ofc-sec__pages .ofc-side__a .ofc-i { display: none; }
.ofc-sec__pages .ofc-side__a[aria-current="page"]::before,
.ofc-sec__pages .ofc-side__a.is-on::before { left: -9px; }

/* ONLY THE SECTION YOU ARE IN IS OPEN. */
.ofc-rail__nav:has([aria-current="page"]) .ofc-sec:not(:has([aria-current="page"])) > .ofc-sec__pages { display: none; }

/* SWITCHING IS A GLIDE, NOT A JUMP (owner, 2026-10-16: "side menu feels
   glitchy when switching between tabs"). Measured: every section change moved
   everything below it by 33 to 75px in one frame, as one section's pages shut
   and another's opened. On the desktop rail the pages now close and open over
   180ms, so the sections under them slide; a browser without
   interpolate-size simply switches, as before. The clip lets the open page's
   mark (left: -9px) draw outside the box while the height clips the rest. */
@media (min-width: 62.0625rem) {
  .ofc-sec__pages {
    interpolate-size: allow-keywords;
    height: auto;
    clip-path: inset(0 0 0 -12px);
    transition: height 0.18s ease, margin 0.18s ease, opacity 0.14s ease, visibility 0s;
  }
  .ofc-rail__nav:has([aria-current="page"]) .ofc-sec:not(:has([aria-current="page"])) > .ofc-sec__pages {
    display: grid;
    height: 0;
    margin-block: 0;
    opacity: 0;
    visibility: hidden;
    transition: height 0.18s ease, margin 0.18s ease, opacity 0.1s ease, visibility 0s linear 0.18s;
  }
}

/* BETWEEN THE OFFICE'S PAGES, A CROSS-FADE, NOT A CUT (2026-10-16). Ads, eBay,
   a client's dossier and the Cloudflare record are separate pages, so going to
   one was a full reload: the screen blanked and the rail was drawn again. Both
   pages opt in here, the rail is named so it holds still, and the rest fades
   over 120ms. Off for anyone who asks for less motion. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  /* DESKTOP ONLY. A view-transition-name makes its element a layer of its
     own; on a phone the rail is the bottom tab bar, and as a layer at the
     page's level the rows scrolled under it painted over it ("Ashgrove
     Veterinary" across the tabs, found 2026-10-16). */
  @media (min-width: 62.0625rem) { .ofc-rail { view-transition-name: ofc-rail; } }
  ::view-transition-group(ofc-rail) { animation: none; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: 0.12s; }
}
@media (prefers-reduced-motion: reduce) {
  .ofc-sec__pages { transition: none !important; }
}

/* A closed section's count: the sum of its pages' (office-rail.mjs), marked
   like theirs. An open section shows each page's own instead. */
.ofc-sec__n {
  min-width: 1.25rem;
  color: var(--o-faint);
  font-size: var(--o-t-xs);
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ofc-sec__n:empty,
.ofc-sec:has([aria-current="page"]) .ofc-sec__n { display: none; }
.ofc-sec__n.is-hot { color: var(--o-warn-ink); }
.ofc-sec__n.is-hot::before {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px;
  vertical-align: 1px; border-radius: 50%; background: var(--o-warn);
}

/* Ads' own views, a third level under Ads: three runs told apart by a gap,
   not by three more labels. */
.ofc-side__gap { display: block; height: 6px; }
.ofc-sec__pages .ofc-side__sub { margin: 1px 0 4px 0.9rem; }
.ofc-sec__pages .ofc-side__sub .ofc-side__a { min-height: 28px; font-size: 0.8125rem; }

/* AT PHONE WIDTH (OF-07) THE SECTIONS ARE A BAR AT THE FOOT OF THE SCREEN,
   and the pages of the one you are in are underline tabs at the top. It was
   one strip of sections and pages under the brand, about 1,000px of it in a
   390px window: "Enquir" cut at the edge, a fade promising more, and half the
   Office behind a sideways scroll nobody could see. Six sections fit a
   phone's width and a section's pages fit its top.

   ONE MENU, NOT A SECOND FOR PHONES. The bar is the six section links
   themselves, each fixed in its sixth of the width (--o-tab), so a screen
   reader still hears one menu in its order: a section, then its pages. */
@media (max-width: 62rem) {
  #office, #ads, #ebay { --o-tabbar: 3.5rem; }
  .ofc-main { padding-bottom: calc(var(--o-tabbar) + env(safe-area-inset-bottom, 0px)); }
  /* What Tab or a script brings into view stops clear of the bar at the foot
     and of the header that sticks at the top (56px; 73px where its actions
     wrap). Without it a control scrolled in from below came to rest under
     the bar. The bar's 3.5rem is said again: the page's scroller is <html>,
     above where --o-tabbar is set. Every shell is named, as every scope list
     here is (verify's "every shell reaches its own stylesheet"). */
  html:has(> body :is(#office, #portal, #ebay, #ads)) {
    scroll-padding-top: 5rem;
    scroll-padding-bottom: calc(3.5rem + env(safe-area-inset-bottom, 0px) + 0.75rem);
  }
  .ofc-rail__nav { display: block; min-height: 0; overflow: visible; padding: 0 1rem; }
  .ofc-sec { display: contents; }
  .ofc-side__gap { display: none; }

  /* The bar: the ground under the section links. */
  .ofc-rail::after {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    height: calc(var(--o-tabbar) + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--o-line-2);
    background: var(--o-chrome, var(--o-bg));
  }
  .ofc-side__a--top { --o-tab: 0; }
  .ofc-rail__nav > .ofc-sec:nth-of-type(1) > .ofc-sec__h { --o-tab: 1; }
  .ofc-rail__nav > .ofc-sec:nth-of-type(2) > .ofc-sec__h { --o-tab: 2; }
  .ofc-rail__nav > .ofc-sec:nth-of-type(3) > .ofc-sec__h { --o-tab: 3; }
  .ofc-rail__nav > .ofc-sec:nth-of-type(4) > .ofc-sec__h { --o-tab: 4; }
  .ofc-rail__nav > .ofc-sec:nth-of-type(5) > .ofc-sec__h { --o-tab: 5; }
  .ofc-rail__nav > .ofc-sec:nth-of-type(6) > .ofc-sec__h { --o-tab: 6; }
  :is(.ofc-rail__nav > .ofc-side__a--top, .ofc-sec > .ofc-sec__h) {
    /* SEVEN SLOTS since Beta systems (2026-10-16); the count is one number. */
    --o-tabs: 7;
    position: fixed;
    bottom: 0;
    left: calc(var(--o-tab) * 100% / var(--o-tabs));
    z-index: 41;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    width: calc(100% / var(--o-tabs));
    min-height: 0;
    height: calc(var(--o-tabbar) + env(safe-area-inset-bottom, 0px));
    padding: 0 0.1rem env(safe-area-inset-bottom, 0px);
    border-radius: 0;
    background: none;
    color: var(--o-faint);
    font-size: clamp(0.5625rem, 2.75vw, 0.6875rem);  /* 11px under a 20px mark at 400+; 9px at 320, where seven slots leave "Dashboard" 45px */
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
  }
  :is(.ofc-rail__nav > .ofc-side__a--top, .ofc-sec > .ofc-sec__h) .ofc-i { width: 20px; height: 20px; color: inherit; }
  /* A long section name says its short form in the bar ("Beta" for Beta
     systems); the full name stays the text a screen reader reads. */
  .ofc-sec > .ofc-sec__h .ofc-sec__t[data-short] { font-size: 0; }
  .ofc-sec > .ofc-sec__h .ofc-sec__t[data-short]::after { content: attr(data-short); font-size: clamp(0.5625rem, 2.75vw, 0.6875rem); }
  :is(.ofc-rail__nav > .ofc-side__a--top, .ofc-sec > .ofc-sec__h) :is(.ofc-side__t, .ofc-sec__t) { flex: none; }
  :is(.ofc-rail__nav > .ofc-side__a--top, .ofc-sec > .ofc-sec__h):hover { background: none; color: var(--o-text); }
  /* The section you are in: white, with a short white edge along the top. */
  .ofc-rail__nav > .ofc-side__a--top:is(.is-on, [aria-current="page"]),
  .ofc-sec:has([aria-current="page"]) > .ofc-sec__h { background: none; color: #FFFFFF; }
  .ofc-rail__nav > .ofc-side__a--top:is(.is-on, [aria-current="page"]) .ofc-i,
  .ofc-sec:has([aria-current="page"]) > .ofc-sec__h .ofc-i { color: #FFFFFF; }
  .ofc-rail__nav > .ofc-side__a--top:is(.is-on, [aria-current="page"])::before,
  .ofc-sec:has([aria-current="page"]) > .ofc-sec__h::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 50%;
    width: 1.5rem;
    height: 2px;
    margin-left: -0.75rem;
    border-radius: 0 0 2px 2px;
    background: var(--o-accent);
  }
  /* A closed section's count sits at its mark's shoulder. */
  .ofc-sec__h .ofc-sec__n {
    position: absolute;
    top: 0.45rem;
    left: calc(50% + 0.65rem);
    min-width: 0;
    font-size: 0.6875rem;
    line-height: 1;
    text-align: left;
  }
  .ofc-sec__h .ofc-sec__n.is-hot::before { width: 5px; height: 5px; margin-right: 3px; }
  .ofc-rail__brand:focus-visible,
  :is(.ofc-rail__nav > .ofc-side__a--top, .ofc-sec > .ofc-sec__h):focus-visible { outline-offset: -2px; }

  /* The pages of the section you are in: the Office's underline tabs. Nothing
     shows here until the page knows where it is, so the first frame is not
     every page of every section. */
  .ofc-sec__pages {
    display: flex;
    gap: 0 1.35rem;
    margin: 0;
    padding: 0;
    border: 0;
    overflow-x: auto;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .ofc-sec__pages::-webkit-scrollbar { display: none; }
  .ofc-rail__nav:not(:has([aria-current="page"])) .ofc-sec__pages { display: none; }
  .ofc-sec__pages .ofc-side__a {
    flex: none;
    gap: 0.4rem;
    min-height: 44px;
    padding: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: none;
    color: var(--o-faint);
    font-size: var(--o-t-sm);
    font-weight: 550;
    white-space: nowrap;
  }
  .ofc-sec__pages .ofc-side__a:hover { background: none; color: var(--o-text); }
  .ofc-sec__pages .ofc-side__a:is(.is-on, [aria-current="page"]) {
    background: none;
    border-bottom-color: var(--o-accent);
    color: #FFFFFF;
  }
  .ofc-sec__pages .ofc-side__a::before { display: none; }
  .ofc-sec__pages .ofc-side__a:focus-visible { outline-offset: -1px; }
  .ofc-sec__pages .ofc-side__n { min-width: 0; text-align: left; }
  /* Ads: its own views are the tabs (Ads itself is the page they are on),
     then eBay. */
  #ads .ofc-sec__pages > .ofc-side__parent { display: none; }
  #ads .ofc-side__sub { display: contents; }
}

/* A RECORD IS THE SCREEN ON A PHONE (OF-07). A message, an enquiry or a
   request opened from its list takes the page, and the way back is the
   header's "←", which stays in reach however far down it is read; the
   browser's Back does the same (page-office.mjs recordOpened). The in-page
   "← All messages" and its kin stand down at this width, so there is one way
   back on screen, and the list's search, tabs and tools go with the list. */
.ofc-top__back { display: none; }
@media (max-width: 62rem) {
  #office .ofc-top__where:has(> .ofc-top__back) { display: flex; flex-wrap: wrap; align-items: center; column-gap: 0.25rem; }
  #office .ofc-top__where > p { flex: 1 1 100%; }
  #office:is([data-view="mail"][data-detail="mail"], [data-view="crm"][data-detail="crm"], [data-view="requests"][data-detail="requests"]) .ofc-top__back {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-height: 0;                    /* app.css gives every button 56px */
    margin: 0 0 0 -0.75rem;
    padding: 0;
    border: 0;
    border-radius: var(--o-r);
    background: none;
    color: var(--o-text);
    cursor: pointer;
  }
  #office .ofc-top__back .ofc-i { width: 20px; height: 20px; color: inherit; }
  /* The list's own action goes with the list: "+ New enquiry" beside an open
     enquiry pushed the "←" onto a line of its own above the title at 320
     (found 2026-10-14). */
  #office:is([data-view="mail"][data-detail="mail"], [data-view="crm"][data-detail="crm"], [data-view="requests"][data-detail="requests"]) .ofc-pageact { display: none !important; }
  #office .ofc-top__back:hover { background: var(--o-hover); }
  #office .ofc-top__back:focus-visible { outline: 1px solid var(--focus-edge); outline-offset: -4px; }

  #office[data-view="mail"][data-detail="mail"] :is(#ofc-mail-back, .ofc-mail__head, .ofc-mail__bar, #ofc-mail-help, #ofc-mail-clean-panel, #ofc-mail-more, #ofc-mail-count),
  #office[data-view="mail"][data-detail="mail"] .ofc-split--mail.is-reading .ofc-split__back,
  #office[data-view="crm"][data-detail="crm"] :is(#ofc-crm-card, #ofc-speed-card),
  #office[data-view="requests"][data-detail="requests"] .ofc-reqpage__back { display: none; }
}

/* ==========================================================================
   THE MAILBOX

   Every rule whose selector names a mailbox part (ofc-mail, ofc-split,
   ofc-compose, ofc-attach, ofc-clean, ofc-queue, ofc-sig, ofc-autolink, the
   tool rail, pick and sweep). The address tabs keep the .ofc-addr look, which
   the Requests view shares.

   Ten tokens the palette above did not have, set here in its terms. Links in mail are the readable blue it settled on (8.61:1), because
   a link nobody can see is a link nobody clicks.
   ========================================================================== */
/* On the same elements as this palette (not :root): a token defined at :root as
   var(--o-ok) resolves at :root, where the palette does not exist yet, and the
   unread dot came out transparent. */
#office, #portal, #ebay, #ads {
  --o-link: #6CB6FF;
  --o-link-hi: #A8D6FF;
  --o-strong: #FFFFFF;
  --o-focus: var(--o-accent);
  --o-green-ink: var(--o-ok);
  --o-accent-hi: var(--o-accent);
  --o-accent-ink: var(--o-on-accent);
  --o-e1: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --o-sunk: var(--o-inset);
  --o-bg-2: var(--o-raised);
}
.ofc-more { margin: 0.7rem 0 0; display: flex; justify-content: center; }

.ofc-attach li { padding: 0; border: 0; background: none; }
.ofc-attach b { display: block; font-size: var(--o-t-sm); color: var(--o-text); }
.ofc-attach small { display: block; margin-top: 0.1rem; font-size: var(--o-t-xs); color: var(--o-faint); }
.ofc-more[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
.ofc-board__card,
  .ofc-split__item,
  .ofc-addr__b,
  .ofc-side__a {
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
  }
}
.ofc-split {
  display: grid;
  grid-template-columns: minmax(17rem, 22rem) minmax(0, 1fr);
  gap: 0;
  align-items: start;
  
  height: min(62vh, 40rem);
}
@media (max-width: 68rem) {
.ofc-split { grid-template-columns: minmax(0, 1fr); height: auto; }
.ofc-split__list {
    max-height: 24rem;
    border-right: 0;
    border-bottom: 1px solid var(--o-line-2);
  }
.ofc-split__pane { padding: 1rem 0 0; }
}
.ofc-split__list {
  list-style: none;
  margin: 0;
  padding: 0.25rem;
  height: 100%;
  overflow-y: auto;
  
  border-right: 1px solid var(--o-line-2);
  scrollbar-color: var(--o-line-2) transparent;
}

.ofc-split__item:hover { background: var(--o-hover); }
.ofc-split__item:active { transform: none; }
.ofc-split__item.is-on { background: var(--o-press); }
.ofc-split__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.1rem 0.6rem;
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 0;
  border-radius: var(--o-r-sm);
  background: transparent;
  background-image: none;
  box-shadow: none;
  color: inherit;
  text-align: left;
  font: inherit;
  min-height: 0;
  cursor: pointer;
  display: grid;
  grid-template-columns: 2rem minmax(7rem, 13rem) minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0.75rem;
  row-gap: 0;
  padding: 0 0.75rem;
  min-height: 2.75rem;
  border-radius: 0;
  border-bottom: 1px solid var(--o-line);
  text-align: left;
}
.ofc-split__item:last-child { border-bottom: 0; }
.ofc-mail__av {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #FFFFFF;
  user-select: none;
}
.ofc-mail__from {
  grid-column: 2;
  font-size: var(--o-t-sm);
  font-weight: 500;
  color: var(--o-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ofc-mail__subj {
  grid-column: 3;
  min-width: 0;
  font-size: var(--o-t-sm);
  font-weight: 500;
  color: var(--o-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ofc-mail__snip { color: var(--o-faint); font-weight: 400; }
/* The record a message is filed against, after the sender (OF-25). */
.ofc-mail__rec,
.ofc-split__item.is-unread .ofc-mail__rec { color: var(--o-faint); font-weight: 400; }
.ofc-mail__when {
  grid-column: 4;
  justify-self: end;
  font-size: var(--o-t-xs);
  font-weight: 500;
  color: var(--o-faint);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ofc-mail__thread {
  margin-left: 0.4rem;
  padding: 0.05rem 0.35rem;
  border: 1px solid var(--o-line-2);
  border-radius: 2px;
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--o-faint);
}
.ofc-split__item.is-unread .ofc-mail__from { color: var(--o-text); font-weight: 700; }
.ofc-split__item.is-unread .ofc-mail__subj { color: var(--o-text); font-weight: 650; }
.ofc-split__item.is-unread .ofc-mail__snip { color: var(--o-dim); font-weight: 400; }
.ofc-split__item.is-unread .ofc-mail__when { color: var(--o-text); font-weight: 650; }
.ofc-mail__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 0.4rem;
  border-radius: 50%;
  background: var(--o-accent);
  transform: translateY(-1px);
}

.ofc-split__pane {
  height: 100%;
  overflow-y: auto;
  padding: 0.2rem 0 0.2rem 1.25rem;
  scrollbar-color: var(--o-line-2) transparent;
}
.ofc-split__pane:focus-visible { outline: 1px solid var(--focus-edge); outline-offset: -1px; }
.ofc-mail__h { margin: 0 0 0.15rem; font-family: var(--display); font-size: var(--o-t-lg); font-weight: 700; letter-spacing: -0.012em; }
.ofc-mail__meta {
  display: grid;
  gap: 0.1rem;
  margin: 0 0 0.9rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--o-line);
  font-size: var(--o-t-sm);
  color: var(--o-faint);
}
.ofc-mail__meta b { color: var(--o-dim); font-weight: 650; }
.ofc-mail__body {
  margin: 0;
  max-width: 78ch;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: var(--o-t-sm);
  font-weight: 450;
  line-height: 1.6;
  color: var(--o-dim);
}
.ofc-mail__filing {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--o-line-2);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.75rem;
  font-size: var(--o-t-xs);
  color: var(--o-dim);
}
.ofc-mail__filing label {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.ofc-mail__lead {
  font: inherit;
  color: var(--o-text);
  background: var(--o-bg-2, transparent);
  border: 1px solid var(--o-line-2);
  border-radius: 6px;
  padding: 0.28rem 0.5rem;
  max-width: 26ch;
}
.ofc-mail__lead:disabled { opacity: 0.5; cursor: not-allowed; }
.ofc-mail__filing-msg { margin: 0; }
/* Said after the controls, so an empty one is no gap before them: it stood
   between the picker and "Put on the enquiry board" and pushed the button
   in by the row's gap. */
.ofc-mail__filing-msg { order: 1; }

/* WHO A MESSAGE LOOKS LIKE (OF-25): a suggestion, its reason, and one click to
   file. An edge and no fill, because it is a question for the reader and not
   a state. Also "N more from this sender are not filed". */
.ofc-suggest {
  width: 100%;
  display: grid;
  gap: 0.3rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--o-line-3);
  border-radius: var(--o-r);
}
.ofc-suggest[hidden] { display: none; }
.ofc-suggest__t { margin: 0; font-size: var(--o-t-sm); line-height: 1.4; color: var(--o-text); overflow-wrap: anywhere; }
.ofc-suggest__t b { font-weight: 700; color: var(--o-strong); }
.ofc-suggest__why { margin: 0; font-size: var(--o-t-xs); line-height: 1.45; color: var(--o-dim); overflow-wrap: anywhere; }
.ofc-suggest__acts { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.2rem; }

/* STAR AND SNOOZE (OF-27). The star sits in the time column in the white that
   marks a choice the reader made. The snooze times are rows under the
   actions: what it is called, then the time it means, in the reader's clock. */
.ofc-mail__star { margin-right: 0.3rem; color: var(--o-strong); font-weight: 400; }
.ofc-snooze {
  display: grid;
  margin-top: 0.6rem;
  border: 1px solid var(--o-line-2);
  border-radius: var(--o-r-sm);
  overflow: hidden;
}
.ofc-snooze[hidden] { display: none; }
.ofc-snooze__now {
  margin: 0;
  padding: 0.55rem 0.75rem;
  font-size: var(--o-t-sm);
  color: var(--o-text);
}
.ofc-snooze__b {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  min-height: 2.5rem;
  padding: 0.55rem 0.75rem;
  background: none;
  border: 0;
  border-top: 1px solid var(--o-line-2);
  color: var(--o-text);
  font: 500 var(--o-t-sm)/1.3 var(--body);
  text-align: left;
  cursor: pointer;
}
.ofc-snooze__b:first-child { border-top: 0; }
.ofc-snooze__b:hover { background: var(--o-raised); }
/* Focus is a lit edge (the owner's rule), drawn inside the row: the group
   clips anything outside it. */
.ofc-snooze__b:focus-visible { outline: 1px solid var(--focus-edge); outline-offset: -1px; background: var(--o-raised); }
.ofc-snooze__b:disabled { color: var(--o-dim); cursor: progress; }
.ofc-snooze__when { color: var(--o-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }

.ofc-mail__bar .ofc-addr { margin: 0; flex: 1 1 auto; }

.ofc-mail__keys {
  min-width: 34px;
  padding: 0;
  font-size: 0.95rem;
  font-weight: 700;
}
.ofc-mail__help-note {
  grid-column: 1 / -1;
  border-top: 1px solid var(--o-line-2);
  padding-top: 0.6rem;
  margin-top: 0.15rem;
}
.ofc-mail__help-note dd { margin: 0; color: var(--o-faint, var(--o-dim)); }
.ofc-mail__tools .ofc-ghost.is-on {
  background: var(--o-inset);
  border-color: var(--o-accent-deep);
  color: var(--o-text);
}

@media (max-width: 48rem) {
.ofc-mail__bar { gap: 0.5rem; }
.ofc-mail__tools { width: 100%; margin-left: 0; }
}
.ofc-mail__day {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 0.5rem 0.9rem 0.3rem;
  
  background: var(--o-panel);
  font-size: var(--o-t-label);
  font-weight: 600;
  color: var(--o-faint, var(--o-dim));
}
.ofc-mail__day:first-child { padding-top: 0.2rem; }
.ofc-mail__thread {
  margin-left: 0.5rem;
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--o-line-2);
  border-radius: var(--o-pill);
  font-size: var(--o-t-xs, 0.7rem);
  font-weight: 650;
  color: var(--o-faint, var(--o-dim));
  white-space: nowrap;
}
.ofc-mail__help {
  margin: 0.35rem 0 0;
  padding: 0.9rem 1rem;
  border: 1px solid var(--o-line-2);
  border-radius: var(--o-r, 10px);
  background: var(--o-inset);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.45rem 1.5rem;
  font-size: var(--o-t-sm);
}
.ofc-mail__help > div { display: flex; align-items: baseline; gap: 0.6rem; }
.ofc-mail__help dt { flex: 0 0 auto; display: flex; gap: 0.25rem; }
.ofc-mail__help dd { margin: 0; color: var(--o-dim); }
.ofc-mail__help kbd {
  min-width: 1.5rem;
  padding: 0.1rem 0.35rem;
  border: 1px solid var(--o-line);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--o-bg);
  font: 650 0.72rem/1.5 var(--mono, ui-monospace, monospace);
  color: var(--o-text);
  text-align: center;
}
.ofc-compose {
  display: grid;
  gap: 0.7rem;
  margin: 0.6rem 0 0.2rem;
  padding: 1rem 1.1rem 1.1rem;
  border: 1px solid var(--o-line);
  border-radius: var(--o-r, 10px);
  background: var(--o-inset);
}
.ofc-compose__head {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}
.ofc-compose__head b { font-size: var(--o-t-sm); }
.ofc-compose__from {
  color: var(--o-faint, var(--o-dim));
  font-size: var(--o-t-xs, 0.75rem);
}
.ofc-compose__head .ofc-quiet { margin-left: auto; }
.ofc-compose label {
  display: grid;
  gap: 0.3rem;
  font-size: var(--o-t-label);
  font-weight: 600;
  color: var(--o-faint, var(--o-dim));
}
.ofc-compose input,
.ofc-compose textarea {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--o-line);
  border-radius: 8px;
  background: var(--o-bg);
  color: var(--o-text);
  font: 450 var(--o-t-sm)/1.55 var(--body);
  text-transform: none;
  letter-spacing: 0;
}
.ofc-compose textarea { resize: vertical; min-height: 8rem; }
.ofc-compose input:focus-visible,
.ofc-compose textarea:focus-visible {
  outline: 1px solid var(--focus-edge);
  outline-offset: -1px;
  box-shadow: 0 0 0 1px var(--focus-halo);
}
.ofc-compose .ofc-actions { align-items: center; }
.ofc-compose .ofc-actions p { margin: 0; font-size: var(--o-t-sm); color: var(--o-dim); }
.ofc-mail__clip {
  width: 0.85em; height: 0.85em;
  margin-right: 0.3rem;
  vertical-align: -0.08em;
  fill: var(--o-faint);
}
.ofc-mail__actions {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--o-line-2);
  gap: 0.5rem;
}
/* Under a message the rest follow the replies in the same lines; in the
   reading rail beside it, and on a phone, they are a list. */
.ofc-mail__more { display: contents; }
/* A MESSAGE'S ACTIONS WRAP (2026-10-16). Below 68rem every .ofc-actions is
   one line that scrolls, and on a phone that showed Reply, Reply in mail app
   and Forward with a sliver of the seven others past the edge. The rail is
   the foot of the page there, with room for all of them. */
@media (max-width: 68rem) {
  #office .ofc-mail__actions { flex-wrap: wrap; overflow-x: visible; }
}
@media (max-width: 40rem) {
  /* ON A PHONE, REPLY IS UNDER THE MESSAGE (2026-10-17). The rail is the foot of the page there, and it led
     with who sent it and where it is filed, so Reply opened at 859px, under the first screen. The actions
     come first; the sender's verdict is in the message's own header too. The seven quieter ones are two to
     a line, so the filing under them is not a screen away. */
  #office[data-view="mail"] .ofc-split__rail > .ofc-rail__s:has(> .ofc-actions) { order: -1; }
  #office[data-view="mail"] .ofc-mail__more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem;
    width: 100%; margin-top: 0.4rem; }
  #office[data-view="mail"] .ofc-mail__more > .ofc-quiet { justify-content: flex-start; min-height: 44px; margin-inline: -0.7rem; }
}
.ofc-split__empty {
  display: grid;
  place-content: center;
  gap: 0.3rem;
  height: 100%;
  text-align: center;
  color: var(--o-faint);
  font-size: var(--o-t-sm);
}

@media (max-width: 68rem) {
.ofc-split { grid-template-columns: minmax(0, 1fr); height: auto; }
.ofc-split__list { max-height: none; border-right: 0; border-bottom: 0; }
.ofc-split__pane { padding: 0.75rem 0 0; }
.ofc-split.is-reading .ofc-split__list { display: none; }
.ofc-split:not(.is-reading) .ofc-split__pane { display: none; }
.ofc-split__back { display: none; }
.ofc-split.is-reading .ofc-split__back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.75rem;
    padding: 0.45rem 0.7rem 0.45rem 0.5rem;
    background: var(--o-inset);
    border: 1px solid var(--o-line-2);
    border-radius: var(--o-r-sm);
    color: var(--o-text);
    font: 600 var(--o-t-sm)/1 var(--body);
    cursor: pointer;
  }
.ofc-split__back:hover { background: var(--o-raised); }
.ofc-split__item {
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    padding: 0.5rem 0.6rem;
    min-height: 3.5rem;
    row-gap: 0.15rem;
  }
.ofc-mail__av { grid-row: 1 / span 2; align-self: start; }
.ofc-mail__from { grid-column: 2; grid-row: 1; }
.ofc-mail__when { grid-column: 3; grid-row: 1; }
.ofc-mail__subj { grid-column: 2 / -1; grid-row: 2; white-space: normal;
                    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ofc-mail__tools, .ofc-actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.4rem;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
.ofc-mail__tools::-webkit-scrollbar, .ofc-actions::-webkit-scrollbar { display: none; }
.ofc-mail__tools > *, .ofc-actions > * { flex: 0 0 auto; }
}
.ofc-split--mail {
  grid-template-columns: minmax(0, 1fr);
  height: auto;
}
.ofc-split--mail .ofc-split__list {
  max-height: none;
  border-right: 0;
  border-bottom: 0;
  padding: 0;
}
.ofc-split--mail .ofc-split__pane { padding: 0; }
.ofc-split--mail.is-reading .ofc-split__list { display: none; }
.ofc-split--mail:not(.is-reading) .ofc-split__pane { display: none; }
.ofc-split--mail .ofc-split__back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 1rem;
  padding: 0.45rem 0.75rem 0.45rem 0.6rem;
  background: var(--o-inset);
  border: 1px solid var(--o-line-2);
  border-radius: var(--o-r-sm);
  color: var(--o-text);
  font: 600 var(--o-t-sm)/1 var(--body);
  cursor: pointer;
}
.ofc-split--mail .ofc-split__back:hover { background: var(--o-raised); }
.ofc-split--mail .ofc-split__item {
  grid-template-columns: 2rem minmax(9rem, 15rem) minmax(0, 1fr) auto;
}
/* NARROW, A ROW IS TWO LINES (the 68rem block above): the sender and the
   time, then the subject. The four-column rule just above came later and won,
   so at 320 the time had a 0px column and ran over the sender's line (OF-07). */
@media (max-width: 68rem) {
  .ofc-split--mail .ofc-split__item { grid-template-columns: 2rem minmax(0, 1fr) auto; }
}
.ofc-split--mail .ofc-mail__body { max-width: 68ch; }
.ofc-split--mail .ofc-mail__h { max-width: 40ch; }

.ofc-mail__tools #ofc-mail-allread { margin-left: auto; }

.ofc-mail__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 0.9rem 0 0.25rem;
  display: block; margin: 0.5rem 0 0;
}
.ofc-mail__bar .ofc-addr { margin: 0 0 0.5rem; }
.ofc-mail__tools {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: 0 0 auto;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: flex-start;
  padding: 0.35rem 0 0.6rem;
  border-bottom: 1px solid var(--o-line-2);
  margin-bottom: 0.25rem;
  width: 100%;
}
.ofc-grid:has(> .ofc-card:only-child) > .ofc-card:not(:has(table)):not(:has(.ofc-split)):not(:has(ol)):not(:has(ul)) {
  max-width: 46rem;
  margin-inline: auto;
}
.ofc-compose input, .ofc-compose textarea { border-radius: var(--o-r-sm); }
.ofc-jump kbd, .ofc-mail__help kbd { border-radius: 2px; }
.ofc-autolink {
  color: var(--o-link);          
  text-decoration: underline;
  text-underline-offset: 2px;
  
  text-decoration-color: rgba(108, 182, 255, 0.55);
  
  overflow-wrap: anywhere;
  word-break: break-word;
}
.ofc-autolink:hover {
  
  color: var(--o-link-hi);
  text-decoration-color: currentColor;
}
.ofc-autolink:focus-visible {
  outline: 1px solid var(--focus-edge);
  outline-offset: 2px;
  border-radius: 2px;
}

.ofc-addr__b,
.ofc-split__back {
  min-height: 0;
}
@media (max-width: 48rem) {
 .ofc-split__back { min-height: 40px; }
}
.ofc-mail__head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.85rem;
  flex-wrap: wrap;
}
.ofc-mail__q { flex: 1 1 10rem; min-width: 0; }

.ofc-mail__rich {
  max-width: 78ch;
  font-size: var(--o-t-sm);
  line-height: 1.6;
  color: var(--o-dim);
  
  overflow-x: auto;
  overflow-wrap: anywhere;
}
.ofc-mail__rich :where(div, p, span, a, blockquote, ul, ol, li, h1, h2, h3, h4, h5, h6, section, article, header, footer) {
  max-width: 100%;
}
.ofc-mail__rich img { max-width: 100%; height: auto; }
.ofc-mail__img-real { display: inline-block; max-width: 100%; height: auto; background: var(--o-line, rgba(0,0,0,0.05)); }
.ofc-mail__img-real.is-loaded { background: none; }
.ofc-mail__rich img { object-fit: contain; }
.ofc-mail__rich p { margin: 1em 0; }
.ofc-mail__rich > p:last-child { margin-bottom: 0; }
.ofc-mail__rich h1,
.ofc-mail__rich h2,
.ofc-mail__rich h3,
.ofc-mail__rich h4 {
  margin: 1.2em 0 0.5em;
  line-height: 1.25;
  
  color: var(--o-text);
  font-weight: 650;
}
.ofc-mail__rich h1 { font-size: 1.4em; }
.ofc-mail__rich h2 { font-size: 1.2em; }
.ofc-mail__rich h3,
.ofc-mail__rich h4 { font-size: 1.05em; }
.ofc-mail__rich > :first-child { margin-top: 0; }
.ofc-mail__rich ul,
.ofc-mail__rich ol { margin: 0 0 0.85em; padding-left: 1.4em; }
.ofc-mail__rich li { margin: 0.2em 0; }
.ofc-mail__rich blockquote {
  margin: 0 0 0.85em;
  padding-left: 0.9em;
  border-left: 2px solid var(--o-line);
  color: var(--o-dim);
}
.ofc-mail__rich pre {
  margin: 0 0 0.85em;
  padding: 0.7em 0.9em;
  background: var(--o-sunk, rgba(0, 0, 0, .18));
  border-radius: 3px;
  overflow-x: auto;
  white-space: pre;
}
.ofc-mail__rich code { font-size: 0.92em; }
.ofc-mail__rich hr {
  margin: 1.1em 0;
  border: 0;
  border-top: 1px solid var(--o-line);
}
.ofc-mail__rich table { border-collapse: separate; border-spacing: 0; max-width: 100%; }
.ofc-mail__rich td,
.ofc-mail__rich th { padding: 0.15em 0.4em; vertical-align: top; text-align: inherit; }
.ofc-mail__link {
  /* The link blue, not the accent: the accent is white in this office, and a
     white underline in a white-on-dark message reads as emphasis, not a link.
     paintMailLinks() picks the deep blue when the sender's card is light. */
  color: var(--o-link);
  text-decoration: underline;
  text-decoration-color: rgba(108, 182, 255, 0.55);
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}
.ofc-mail__link:hover { text-decoration-thickness: 2px; }
.ofc-mail__link--box { display: inline-block; color: inherit; text-decoration: none; }
.ofc-mail__link--box:hover { text-decoration: none; }

/* An image's alt text standing in for it (mailAltText): a caption, not a
   dashed chip in brackets. Ink comes from the message (enforceMailContrast
   keeps it readable on the sender's own background). */
.ofc-mail__alt {
  font-style: italic;
}
.ofc-mail__rich * {
  position: static !important;
  float: none !important;
}
/* A STATE, SO A WORD AFTER ITS MARK (2026-10-16): it was a lower-case
   "unverified sender" in a 2px amber box beside the address, the only boxed
   tag left in the Mailbox. */
.ofc-mail__unverified {
  margin-left: 0.6em;
  font-size: 0.85em;
  font-weight: 600;
  color: var(--o-warn);
  cursor: help;
  white-space: nowrap;
}
.ofc-mail__unverified::before { content: ''; display: inline-block; width: 0.45rem; height: 0.45rem;
  margin-right: 0.4rem; border-radius: 50%; vertical-align: 0.1em; background: var(--o-warn); }
.ofc-attach__open {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.7rem;
  background: var(--o-inset, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--o-line, rgba(255, 255, 255, 0.12));
  border-radius: var(--o-r-sm, 3px);
  color: var(--o-text, #fff);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.ofc-attach__open:hover {
  background: var(--o-hover, rgba(255, 255, 255, 0.08));
  border-color: var(--o-accent);
}
.ofc-attach__open b { font-weight: 650; }
.ofc-attach__open small { color: var(--o-dim); font-size: 0.78rem; }
.ofc-attach__open:disabled { opacity: 0.6; cursor: default; }
.ofc-attach__err {
  display: block;
  color: var(--o-warn-ink);
  font-size: 0.78rem;
  margin-top: 0.2rem;
}
.ofc-sig { margin: 0.2rem 0 0.4rem; font-size: var(--o-t-sm, 0.8125rem); }
/* 24px to press (WCAG 2.5.8), by padding, so it keeps its own triangle. */
.ofc-sig > summary { padding: 3px 0; cursor: pointer; color: var(--o-dim); font-size: var(--o-t-label); }
textarea#ofc-compose-sig {
  width: 100%;
  margin-top: 0.3rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--o-line-2);
  border-radius: var(--o-r-sm);
  background: var(--o-inset);
  color: var(--o-text);
  font: 400 var(--o-t-sm, 0.8125rem)/1.4 var(--body);
  resize: vertical;
}
:is(#office, #portal, #ebay, #ads) .ofc-mail__body {
  font-family: var(--body);
  font-size: var(--o-t-md);
  font-weight: 400;
  line-height: 1.6;
  color: var(--o-dim);
}
:is(#office, #portal, #ebay, #ads) .ofc-mail__h {
  font-family: var(--display);
  font-size: var(--o-t-xl);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--o-text);
}

:is(#office, #portal, #ebay, #ads) .ofc-addr__b.is-on,
:is(#office, #portal, #ebay, #ads) .ofc-addr__b[aria-pressed="true"],
:is(#office, #portal, #ebay, #ads) .ofc-mail__tools .ofc-ghost.is-on,
:is(#office, #portal, #ebay, #ads) .ofc-mail__tools .ofc-quiet.is-on {
  background: var(--o-raised);
  border-color: transparent;
  /* WHITE MARKS SELECTION (the owner's rule); green means only "ok". */
  color: var(--o-strong);
  font-weight: 700;
  box-shadow: inset 0 -2px 0 var(--o-accent-hi);   
}

:is(#office, #portal, #ebay, #ads) .ofc-addr__b:focus-visible,
:is(#office, #portal, #ebay, #ads) .ofc-mail__tools .ofc-ghost.is-on:focus-visible {
  outline: 1px solid var(--focus-edge);
  outline-offset: 2px;
}
.ofc-split__item:not(.is-unread) .ofc-mail__from {
  color: var(--o-strong);
  font-weight: 600;
}
.ofc-split__item:not(.is-unread) .ofc-mail__subj { color: var(--o-dim); }
.ofc-split__item:not(.is-unread) .ofc-mail__snip { color: var(--o-faint); }
.ofc-mail__dot { background: var(--o-strong); }   /* unread is not a state of health: white, not green */
.ofc-split__list { background: var(--o-bg); }
.ofc-split__pane { background: var(--o-panel); }
:is(#office, #portal, #ebay, #ads) .ofc-split__empty {
  gap: 0.45rem;
  padding: 2rem;
  color: var(--o-faint);
}
:is(#office, #portal, #ebay, #ads) .ofc-split__empty::before {
  content: '';
  width: 48px;
  height: 48px;
  margin: 0 auto 0.6rem;
  border-radius: var(--o-r-lg);
  background-color: var(--o-inset);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23909090'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%2013l3-8h12l3%208'/%3E%3Cpath%20d='M3%2013v5a1%201%200%200%200%201%201h16a1%201%200%200%200%201-1v-5'/%3E%3Cpath%20d='M3%2013h5l1.4%202h5.2l1.4-2h5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px 24px;
  border: 1px solid var(--o-line-2);
  box-shadow: var(--o-e1);
}
:is(#office, #portal, #ebay, #ads) .ofc-split__empty b {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--o-t-lg);
  letter-spacing: -0.01em;
  color: var(--o-strong);
}
:is(#office, #portal, #ebay, #ads) .ofc-split__empty span {
  font-size: var(--o-t-sm);
  color: var(--o-faint);
}
:is(#office, #portal, #ebay, #ads) .ofc-card:has(.ofc-task[hidden]):not(:has(.ofc-lines)):not(:has(.ofc-tablewrap)):not(:has(.ofc-roster)):not(:has(.ofc-board)):not(:has(.ofc-split)):not(:has(.ofc-bar)) {
  display: none;
}

@media (min-width: 76rem) {
#office[data-view="mail"] .ofc-split--mail {
    grid-template-columns: minmax(16rem, 21rem) minmax(0, 1fr) minmax(15rem, 19rem);
    height: min(74vh, 46rem);
  }
#office[data-view="mail"] .ofc-split--mail.is-reading .ofc-split__list {
    display: block;
    border-right: 1px solid var(--o-line-2);
    overflow-y: auto;
    max-height: 100%;
  }
#office[data-view="mail"] .ofc-split--mail .ofc-split__pane {
    padding: 0 1.15rem;
    overflow-y: auto;
  }
#office[data-view="mail"] .ofc-split--mail .ofc-split__back { display: none; }
}
@media (max-width: 76rem) {
#office[data-view="mail"] .ofc-split--mail {
    grid-template-columns: minmax(15rem, 20rem) minmax(0, 1fr);
  }
#office[data-view="mail"] .ofc-split__rail {
    grid-column: 1 / -1;
    border-top: 1px solid var(--o-line-2);
    border-left: 0;
  }
}
@media (max-width: 68rem) {
#office[data-view="mail"] .ofc-split--mail { grid-template-columns: minmax(0, 1fr); }
}
#office[data-view="mail"] .ofc-mail__body,
#office[data-view="mail"] .ofc-mail__rich {
  background: var(--o-inset);
  border: 1px solid var(--o-line);
  border-radius: var(--o-r);
  padding: 1.1rem 1.25rem;
  margin-top: 0.85rem;
  max-width: 68ch;
  color: var(--o-strong);
  line-height: 1.62;
}
#office[data-view="mail"] .ofc-mail__body blockquote,
#office[data-view="mail"] .ofc-mail__rich blockquote {
  margin: 0.8rem 0 0;
  padding-left: 0.8rem;
  border-left: 2px solid var(--o-line-2);
  color: var(--o-faint);
}
#office[data-view="mail"] .ofc-mail__h {
  font-size: var(--o-t-xl);
  font-weight: 800;
  letter-spacing: -0.014em;
  line-height: 1.2;
}
#office[data-view="mail"] .ofc-split__rail {
  border-left: 1px solid var(--o-line-2);
  padding: 0.9rem 1rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
/* UNDER THE MESSAGE, A RULE ABOVE AND NONE BESIDE (2026-10-16). The rule
   above put the left edge back after the narrow layouts took it off, so at
   900px and under the rail had both, a stray line down the side of a phone. */
@media (max-width: 900px) {
#office[data-view="mail"] .ofc-split__rail { border-left: 0; }
}
#office[data-view="mail"] .ofc-rail__h {
  margin: 0 0 0.45rem;
  font-family: var(--display);
  font-size: var(--o-t-label);
  font-weight: 600;
  color: var(--o-faint);
}
#office[data-view="mail"] .ofc-rail__n {
  margin: 0.3rem 0 0;
  font-size: var(--o-t-xs);
  color: var(--o-faint);
  overflow-wrap: anywhere;
}
#office[data-view="mail"] .ofc-rail__v {
  margin: 0;
  font-size: var(--o-t-sm);
  font-weight: 700;
}
#office[data-view="mail"] .ofc-rail__v[data-trust="yes"] { color: var(--o-green-ink); }
/* The same state as the header's, so the same mark: it was a 3px amber bar. */
#office[data-view="mail"] .ofc-rail__v[data-trust="no"] { color: var(--o-warn-ink); }
#office[data-view="mail"] .ofc-rail__v[data-trust="no"]::before {
  content: ''; display: inline-block; width: 0.45rem; height: 0.45rem;
  margin-right: 0.4rem; border-radius: 50%; vertical-align: 0.1em; background: var(--o-warn);
}
@media (min-width: 901px) {
#office[data-view="mail"] .ofc-split--mail {
    grid-template-columns: minmax(0, 31fr) minmax(0, 41fr) minmax(0, 28fr);
  }
#office[data-view="mail"] .ofc-split--mail:not(.is-reading) {
    
    grid-template-columns: minmax(0, 100fr) minmax(0, 0fr) minmax(0, 0fr);
  }
#office[data-view="mail"] .ofc-split--mail .ofc-split__pane,
  #office[data-view="mail"] .ofc-split--mail .ofc-split__rail {
    min-width: 0; overflow: hidden;
    transition: opacity .3s ease .08s, visibility 0s;
  }
#office[data-view="mail"] .ofc-split--mail:not(.is-reading) .ofc-split__pane,
  #office[data-view="mail"] .ofc-split--mail:not(.is-reading) .ofc-split__rail {
    opacity: 0; visibility: hidden; padding-inline: 0; border: 0;
    transition: opacity .16s ease, visibility 0s linear .16s;
  }
#office[data-view="mail"] .ofc-split--mail:not(.is-reading) .ofc-split__list {
    display: block; border-right: 0; overflow-y: auto; max-height: 100%;
  }
#office[data-view="mail"] .ofc-split--mail.is-reading .ofc-mail__snip { color: var(--o-faint); }
@media (prefers-reduced-motion: reduce) {
#office[data-view="mail"] .ofc-split--mail,
    #office[data-view="mail"] .ofc-split--mail .ofc-split__pane,
    #office[data-view="mail"] .ofc-split--mail .ofc-split__rail,
    #office[data-view="mail"] .ofc-split--mail .ofc-mail__snip {
      transition: none;
    }
}
}
@media (min-width: 901px) {
#office[data-view="mail"] .ofc-split--mail.is-reading .ofc-split__back {
    display: inline-flex; align-items: center; gap: .45rem;
    margin: 0 0 .9rem; padding: .5rem .85rem .5rem .7rem;
    border: 1px solid var(--o-line-2); border-radius: var(--o-r-sm, 8px);
    cursor: pointer;
    background: var(--o-raised); color: var(--o-text);
    font: inherit; font-size: var(--o-t-sm); font-weight: 600;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
  }
#office[data-view="mail"] .ofc-split--mail.is-reading .ofc-split__back:hover {
    background: var(--o-accent-wash); color: var(--o-text);
    border-color: var(--o-accent);
  }
#office[data-view="mail"] .ofc-mail__back { display: none; }
#office[data-view="mail"] .ofc-split--mail.is-reading .ofc-split__back:focus-visible {
    outline: 1px solid var(--focus-edge); outline-offset: 2px;
  }
}
#ofc-mail-card {
  container-type: inline-size;
  container-name: mailcard;
}
@media (min-width: 901px) {
#office[data-view="mail"] .ofc-split--mail.is-reading {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
  }
#office[data-view="mail"] .ofc-split--mail.is-reading .ofc-split__list {
    display: none;
  }
#office[data-view="mail"] .ofc-split--mail.is-reading .ofc-split__pane,
  #office[data-view="mail"] .ofc-split--mail.is-reading .ofc-split__rail {
    overflow: visible;
    max-height: none;
  }
#office[data-view="mail"] .ofc-split--mail .ofc-split__rail {
    grid-column: 1 / -1;
    border-left: 0;
    border-top: 1px solid var(--o-line-2);
  }
}
@container mailcard (min-width: 900px) and (max-width: 1264.98px) {
#office[data-view="mail"] .ofc-split--mail.is-reading {
    grid-template-columns: minmax(0, 1fr) minmax(14rem, 16rem);
    height: min(78vh, 52rem);
  }
#office[data-view="mail"] .ofc-split--mail.is-reading .ofc-split__pane,
  #office[data-view="mail"] .ofc-split--mail.is-reading .ofc-split__rail {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    max-height: 100%;
  }
#office[data-view="mail"] .ofc-split--mail .ofc-split__rail {
    grid-column: auto;
    border-left: 1px solid var(--o-line-2);
    border-top: 0;
  }
}
#office[data-view="mail"] .ofc-split__rail .ofc-mail__filing label {
  flex-direction: column;
  align-items: stretch;
  gap: 0.3rem;
  width: 100%;
}
#office[data-view="mail"] .ofc-split__rail .ofc-mail__lead {
  width: 100%;
  max-width: none;
}
/* IN THE RAIL A HEADING SAYS WHAT FOLLOWS (2026-10-16). Filing and the
   actions kept the rule above them from when they sat under the message, so
   "Filed against" and "Actions" each stood over a line, cut off from what
   they name; and the picker was the small print of a meta line. */
#office[data-view="mail"] .ofc-split__rail :is(.ofc-mail__filing, .ofc-mail__actions) {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
#office[data-view="mail"] .ofc-split__rail .ofc-mail__filing { font-size: var(--o-t-sm); }
@container mailcard (min-width: 900px) {
#office[data-view="mail"] .ofc-split--mail.is-reading .ofc-split__rail .ofc-mail__more {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 0.4rem;
  }
#office[data-view="mail"] .ofc-split--mail.is-reading .ofc-split__rail .ofc-mail__more > .ofc-quiet {
    justify-content: flex-start;
    margin-inline: -0.7rem;
  }
}
@container mailcard (min-width: 1265px) {
#office[data-view="mail"] .ofc-split--mail.is-reading {
    grid-template-columns: minmax(15rem, 18rem) minmax(0, 1fr) minmax(14rem, 17rem);
    height: min(74vh, 46rem);
  }
#office[data-view="mail"] .ofc-split--mail.is-reading .ofc-split__list {
    display: block;
    border-right: 1px solid var(--o-line-2);
    overflow-y: auto;
    max-height: 100%;
  }
#office[data-view="mail"] .ofc-split--mail.is-reading .ofc-split__pane,
  #office[data-view="mail"] .ofc-split--mail.is-reading .ofc-split__rail {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
#office[data-view="mail"] .ofc-split--mail .ofc-split__rail {
    grid-column: auto;
    border-left: 1px solid var(--o-line-2);
    border-top: 0;
  }
#office[data-view="mail"] .ofc-split--mail.is-reading .ofc-split__item {
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    row-gap: 0.1rem;
    align-items: center;
  }
#office[data-view="mail"] .ofc-split--mail.is-reading .ofc-split__item .ofc-mail__av {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
  }
#office[data-view="mail"] .ofc-split--mail.is-reading .ofc-split__item .ofc-mail__from {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }
#office[data-view="mail"] .ofc-split--mail.is-reading .ofc-split__item .ofc-mail__when {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }
#office[data-view="mail"] .ofc-split--mail.is-reading .ofc-split__item .ofc-mail__subj {
    grid-column: 2 / -1;
    grid-row: 2;
    min-width: 0;
  }
}
#office[data-view="mail"] .ofc-mail__rich { max-width: 52rem; }
:is(#office, #portal, #ebay, #ads) .ofc-mail__unverified {
  color: var(--o-warn-ink);
}
@media (max-width: 700px) {
#office[data-view="mail"] .ofc-mail__rich table,
  #office[data-view="mail"] .ofc-mail__rich tbody,
  #office[data-view="mail"] .ofc-mail__rich tr,
  #office[data-view="mail"] .ofc-mail__rich td,
  #office[data-view="mail"] .ofc-mail__rich th {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
  }
}
.ofc-compose-dlg {
  width: min(46rem, calc(100vw - 2rem));
  max-width: none;
  max-height: min(92vh, 54rem);
  padding: 0;
  border: 1px solid var(--o-line-2);
  border-radius: var(--o-r, 12px);
  background: var(--o-panel);
  color: var(--o-text);
  box-shadow:
    0 32px 64px -16px rgba(0, 0, 0, .72),
    0 4px 12px rgba(0, 0, 0, .45);
  
  display: flex;
  flex-direction: column;
  overflow: visible;                 
}
.ofc-compose-dlg:not([open]) { display: none; }
.ofc-compose-dlg::backdrop {
  /* A dim, never a blur (rule 5): the page stays where it was, darker. */
  background: rgba(0, 0, 0, .62);
}
.ofc-compose-dlg {
  opacity: 0;
  transform: translateY(10px) scale(.985);
  transition:
    opacity .2s ease,
    transform .2s cubic-bezier(.2, .8, .2, 1),
    overlay .2s allow-discrete,
    display .2s allow-discrete;
}
.ofc-compose-dlg[open] { opacity: 1; transform: none; }
.ofc-compose-dlg::backdrop {
  opacity: 0;
  transition: opacity .2s ease, overlay .2s allow-discrete, display .2s allow-discrete;
}
.ofc-compose-dlg[open]::backdrop { opacity: 1; }
:root:has(#ofc-compose-dlg[open]) .ofc-scroll { overflow: hidden; }
.ofc-compose-dlg .ofc-compose {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: none;
}
.ofc-compose-dlg .ofc-compose__head {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: 1.05rem 1.15rem .85rem;
  border-bottom: 1px solid var(--o-line);
}
.ofc-compose__title {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 0;
}
.ofc-compose-dlg .ofc-compose__head b {
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: -.01em;
  color: var(--o-text);
  overflow-wrap: anywhere;
}
.ofc-compose-dlg .ofc-compose__from {
  font-size: var(--o-t-xs);
  color: var(--o-faint, var(--o-dim));
}
.ofc-compose__draft {
  font-size: var(--o-t-xs);
  font-weight: 600;
  color: var(--o-green-ink, var(--o-accent));
}
.ofc-compose__x {
  margin-left: auto;
  flex: none;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--o-dim);
  font: 400 1.35rem/1 var(--body);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.ofc-compose__x:hover { background: var(--o-inset); color: var(--o-text); }
.ofc-compose__x:focus-visible { outline: 1px solid var(--focus-edge); outline-offset: 2px; }
.ofc-compose__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  padding: 1rem 1.15rem 1.1rem;
}
.ofc-compose__body > * { flex: none; }
.ofc-compose__msg {
  flex: 1 1 auto;
  min-height: 0;
}
.ofc-compose__msg textarea {
  min-height: 6rem;
  height: 100%;
}
/* Sized to its choices, not stretched across the dialog (OF-03): one short
   line ("hello@ — enquiries and clients") in a 697px box read as a field
   waiting for more. */
.ofc-compose-dlg .ofc-compose select {
  width: auto;
  min-width: min(100%, 18rem);
  max-width: 100%;
  justify-self: start;
  padding: .55rem .7rem;
  border: 1px solid var(--o-line);
  border-radius: 8px;
  background: var(--o-bg);
  color: var(--o-text);
  font: 450 var(--o-t-sm)/1.55 var(--body);
  text-transform: none;
  letter-spacing: 0;
}
#office .ofc-compose-dlg .ofc-compose select:focus-visible {
  outline: 1px solid var(--focus-edge);
  outline-offset: -1px;
  box-shadow: 0 0 0 1px var(--focus-halo);
}
.ofc-compose__foot {
  display: grid;
  gap: .6rem;
  padding: .85rem 1.15rem 1rem;
  border-top: 1px solid var(--o-line);
  background: var(--o-panel);
  border-radius: 0 0 var(--o-r, 12px) var(--o-r, 12px);
}
.ofc-compose__footrow {
  display: flex;
  align-items: center;
  gap: .8rem;
}
.ofc-compose__foot p {
  margin: 0 auto 0 0;
  font-size: var(--o-t-sm);
  color: var(--o-dim);
}
.ofc-compose__foot .ofc-attach__list {
  max-height: 9rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.ofc-attach__note:empty { display: none; }
.ofc-attach__note {
  font-size: var(--o-t-xs);
  color: var(--o-faint, var(--o-dim));
}
.ofc-compose__guard {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  border-radius: inherit;
  /* Solid (rule 5): the draft under the question is not shown through it. */
  background: var(--o-bg);
}
.ofc-compose__guard[hidden] { display: none; }
.ofc-compose__guard-in {
  max-width: 25rem;
  padding: 1.15rem 1.25rem 1.2rem;
  border: 1px solid var(--o-line-2);
  border-radius: var(--o-r-sm, 10px);
  background: var(--o-panel);
  box-shadow: 0 16px 40px -10px rgba(0, 0, 0, .65);
}
.ofc-compose__guard-in b {
  display: block;
  margin-bottom: .35rem;
  font-size: .95rem;
  font-weight: 650;
  color: var(--o-text);
}
.ofc-compose__guard-in p {
  margin: 0 0 .95rem;
  font-size: var(--o-t-sm);
  line-height: 1.5;
  color: var(--o-dim);
}
.ofc-compose__guard-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}
@media (max-width: 700px) {
.ofc-compose-dlg {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border: 0;
    border-radius: 0;
    transform: translateY(100%);
  }
.ofc-compose-dlg[open] { transform: none; }
.ofc-compose__foot { border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) {
.ofc-compose-dlg,
  .ofc-compose-dlg::backdrop { transition: none; }
}
.ofc-attach {
  list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.35rem;
  display: grid;
  gap: .5rem;
}
.ofc-attach__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}
.ofc-attach__btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
:is(#office, #portal, #ebay, #ads) .ofc-attach__cam { display: none; }
@media (pointer: coarse) {
:is(#office, #portal, #ebay, #ads) .ofc-attach__cam { display: inline-flex; }
}
.ofc-attach__list {
  display: grid;
  gap: .35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ofc-attach__list[hidden] { display: none; }
.ofc-attach__item {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .45rem .5rem .45rem .7rem;
  border: 1px solid var(--o-line);
  border-radius: 8px;
  background: var(--o-bg);
}
.ofc-attach__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--o-t-sm);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--o-text);
}
.ofc-attach__meta {
  flex: none;
  font-size: var(--o-t-xs);
  text-transform: none;
  letter-spacing: 0;
  color: var(--o-faint, var(--o-dim));
  font-variant-numeric: tabular-nums;
}
.ofc-attach__x {
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--o-dim);
  font: 400 1.1rem/1 var(--body);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.ofc-attach__x:hover { background: var(--o-inset); color: var(--o-text); }
.ofc-attach__x:focus-visible { outline: 1px solid var(--focus-edge); outline-offset: 2px; }
.ofc-compose.is-drop {
  outline: 2px dashed var(--o-accent);
  outline-offset: -6px;
  background: color-mix(in srgb, var(--o-accent) 6%, transparent);
}
@media (pointer: coarse) {
:is(#office, #portal, #ebay, #ads) .ofc-attach__btn {
    min-height: 2.75rem;
    padding-inline: .9rem;
  }
:is(#office, #portal, #ebay, #ads) .ofc-attach__x {
    width: 2.25rem;
    height: 2.25rem;
  }
:is(#office, #portal, #ebay, #ads) .ofc-compose__foot .ofc-primary {
    min-height: 2.75rem;
    padding-inline: 1.1rem;
  }
}
.ofc-queue {
  display: grid;
  gap: .45rem;
}
.ofc-queue__custom[hidden] { display: none; }
.ofc-queue__err {
  margin: 0;
  font-size: var(--o-t-xs);
  line-height: 1.45;
  
  color: var(--o-warn-ink);
  text-transform: none;
  letter-spacing: 0;
}
.ofc-queue__err[hidden] { display: none; }
.ofc-clean {
  display: grid;
  gap: 1rem;
  margin: 0 0 .9rem;
  padding: 1rem 1.1rem 1.1rem;
  border: 1px solid var(--o-line);
  border-radius: var(--o-r, 10px);
  background: var(--o-inset);
}
.ofc-clean[hidden] { display: none; }
.ofc-clean__s { display: grid; gap: .5rem; }
.ofc-clean__h {
  margin: 0;
  font-size: var(--o-t-sm);
  font-weight: 650;
  color: var(--o-text);
}
.ofc-clean__s .ofc-note { margin: 0; }
.ofc-clean__row {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
}
.ofc-clean__at {
  font-size: var(--o-t-sm);
  color: var(--o-faint, var(--o-dim));
}
#ofc-sweep-domain {
  flex: 1 1 12rem;
  min-width: 0;
  padding: .5rem .7rem;
  border: 1px solid var(--o-line);
  border-radius: 8px;
  background: var(--o-bg);
  color: var(--o-text);
  font: 450 var(--o-t-sm)/1.5 var(--body);
}
#office #ofc-sweep-domain:focus-visible {
  outline: 1px solid var(--focus-edge);
  outline-offset: -1px;
  box-shadow: 0 0 0 1px var(--focus-halo);
}
:is(#office, #portal, #ebay, #ads) .ofc-split__item.is-pickable { cursor: pointer; }
:is(#office, #portal, #ebay, #ads) .ofc-split__item.is-picked {
  background: color-mix(in srgb, var(--o-accent) 12%, transparent);
  box-shadow: inset 2px 0 0 var(--o-accent);
}
:is(#office, #portal, #ebay, #ads) .ofc-split__item.is-picked .ofc-mail__av {
  background: var(--o-accent) !important;   
  color: var(--o-bg);
  font-size: 0;
}
:is(#office, #portal, #ebay, #ads) .ofc-split__item.is-picked .ofc-mail__av::after {
  content: "\2713";
  font-size: .95rem;
  font-weight: 700;
  line-height: 1;
}
:is(#office, #portal, #ebay, #ads) .ofc-clean .ofc-danger {
  display: inline-flex;
  align-items: center;
  padding: .45rem .8rem;
  border: 1px solid color-mix(in srgb, var(--o-warn) 55%, transparent);
  border-radius: 8px;
  background: var(--o-warn-bg);
  color: var(--o-warn-ink);
  font: 600 var(--o-t-sm)/1.2 var(--body);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
:is(#office, #portal, #ebay, #ads) .ofc-clean .ofc-danger:hover {
  background: color-mix(in srgb, var(--o-warn) 22%, var(--o-warn-bg));
  border-color: var(--o-warn);
}
:is(#office, #portal, #ebay, #ads) .ofc-clean .ofc-danger:focus-visible {
  outline: 1px solid var(--focus-edge);
  outline-offset: 2px;
}
:is(#office, #portal, #ebay, #ads) .ofc-clean .ofc-danger[disabled] { opacity: .6; cursor: default; }
/* RULE 8's CORNERS (2026-10-16): a tile and a card are surfaces, 8px; a
   message in the list is chosen like a control, 6px. All three were 4px. */
:is(#office, #portal, #ebay, #ads) .ofc-stat,
:is(#office, #portal, #ebay, #ads) .ofc-board__card { border-radius: var(--o-r); }
:is(#office, #portal, #ebay, #ads) .ofc-split__item { border-radius: var(--o-r-sm); }

@media (max-width: 900px) {
#office[data-view="mail"] .ofc-mail__back {
  order: -1;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  flex: none;
  padding: .42rem .75rem;
  border: 1px solid var(--o-line-2);
  border-radius: var(--o-r-sm, 8px);
  background: var(--o-raised);
  color: var(--o-text);
  font: 600 var(--o-t-sm) / 1 var(--body);
  cursor: pointer;
  white-space: nowrap;
}
#office[data-view="mail"] .ofc-mail__back:hover {
  background: var(--o-accent-wash);
  border-color: var(--o-accent);
}
#office[data-view="mail"] .ofc-mail__back:focus-visible {
  outline: 1px solid var(--focus-edge);
  outline-offset: 2px;
}
#office[data-view="mail"] .ofc-mail__back[hidden] { display: none; }
}
@media (max-width: 26rem) {
#office[data-view="mail"] .ofc-mail__back { padding: .42rem .6rem; }
}

/* ONE LINE ON A PHONE (OF-07). The tools wrapped, and "Delete…" and "?"
   stood on a line of their own under the rest; they scroll on one line now,
   the way the tabs above them do, and the strip fades where there is more. */
@media (max-width: 40rem) {
#office .ofc-mail__tools { flex-wrap: nowrap; gap: 0.4rem; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
#office .ofc-mail__tools::-webkit-scrollbar { display: none; }
#office .ofc-mail__tools > * { flex: none; }
/* Enquiries' filters (OF-32) are the same kind of strip: three wrapped to two
   lines at 320, one alone on the second. */
#office .ofc-crm__chips { flex: 1 1 100%; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
#office .ofc-crm__chips::-webkit-scrollbar { display: none; }
#office .ofc-crm__chips > * { flex: none; }
}

/* A STRIP WITH MORE PAST ITS EDGE FADES OUT THERE (office-strip.mjs marks
   it), and stops fading when that end is reached: the word cut at the edge
   is then plainly the start of more, not a fault. */
:is(.ofc-addr, .ofc-mail__tools, .ofc-sec__pages, .ofc-crm__chips, .oc-head__acts, .oc-parts).is-more-right {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
}
:is(.ofc-addr, .ofc-mail__tools, .ofc-sec__pages, .ofc-crm__chips, .oc-head__acts, .oc-parts).is-more-left {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 2.5rem), transparent);
  mask-image: linear-gradient(to left, #000 calc(100% - 2.5rem), transparent);
}
:is(.ofc-addr, .ofc-mail__tools, .ofc-sec__pages, .ofc-crm__chips, .oc-head__acts, .oc-parts).is-more-left.is-more-right {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent);
  mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent);
}
/* A STRIP THAT SCROLLS CLIPS WHAT IS DRAWN OUTSIDE IT, so the keyboard's edge
   on a tab, a filter or a tool in one was cut to a stub on its right side.
   There it is drawn inside: over a bordered control's own border, and just
   inside an underline tab, as the section's pages at the top already have it.
   A tab hung 1px into the strip's rule to lie over it, and the clip took that
   pixel, of the edge and of the underline (1px on a phone, 2px on a desk);
   the rule is drawn inside the strip, under the tabs, so the tab sits in it. */
@media (max-width: 48rem) {
  :is(#office, #portal, #ebay, #ads) .ofc-addr { border-bottom: 0; box-shadow: inset 0 -1px 0 var(--o-line); }
  :is(#office, #portal, #ebay, #ads) .ofc-addr > .ofc-addr__b { margin-bottom: 0; }
  :is(#office, #portal, #ebay, #ads) .ofc-addr > .ofc-addr__b:focus-visible { outline-offset: -1px; }
}
@media (max-width: 40rem) {
  :is(#office, #portal, #ebay, #ads) :is(.ofc-mail__tools, .ofc-crm__chips) > :focus-visible,
  :is(#office, #portal, #ebay, #ads) .ofc-mail__tools .ofc-ghost.is-on:focus-visible { outline-offset: -1px; }
}
#office .ofc-split--mail.is-reading ~ #ofc-mail-more { display: none; }

/* The reading pane takes focus when a message opens, so a screen reader starts
   at the message; it is not a control, and a ring round the whole pane is the
   heavy white frame the owner has turned down elsewhere (2026-10-13). */
#ofc-mail-read:focus { outline: none; }

/* WHAT THIS OFFICE SENT, ONE ROW EACH (2026-10-13): to, subject, what became of
   it, when. The status is the word the provider's events gave it, coloured by
   whether it arrived, is still on its way, or did not. */
.ofc-split__item.ofc-sent {
  grid-template-columns: minmax(10rem, 16rem) minmax(0, 1fr) auto 5.5rem;
  align-items: center;
  column-gap: 0.9rem;
  min-height: 2.75rem;
  padding: 0 0.75rem;
  text-align: left;
}
.ofc-sent .ofc-mail__who,
.ofc-sent .ofc-mail__subject {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
}
.ofc-sent .ofc-mail__who { color: var(--o-strong); font-weight: 600; }
.ofc-sent .ofc-mail__subject { color: var(--o-dim); }
.ofc-sent .ofc-mail__when { color: var(--o-faint); text-align: right; font-size: var(--o-t-sm); }
.ofc-sent__status {
  /* THE OFFICE'S STATE VOICE (OF-40): a word after a small ring, filled when
     it did not arrive. It was a bordered capsule. */
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--o-t-xs);
  font-weight: 600;
  white-space: nowrap;
  color: var(--o-dim);
}
.ofc-sent__status::before { content: ''; flex: none; width: 0.45rem; height: 0.45rem; border-radius: 50%; border: 1px solid currentColor; }
.ofc-sent__status.is-ok { color: var(--o-ok); }
.ofc-sent__status.is-hot { color: var(--o-bad); }
.ofc-sent__status.is-hot::before { background: currentColor; }
@media (max-width: 40rem) {
  .ofc-split__item.ofc-sent {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "who status" "subject when";
    padding: 0.55rem 0.75rem;
    row-gap: 0.2rem;
  }
  .ofc-sent .ofc-mail__who { grid-area: who; }
  .ofc-sent .ofc-mail__subject { grid-area: subject; }
  .ofc-sent__status { grid-area: status; }
  .ofc-sent .ofc-mail__when { grid-area: when; }
}

/* ONE WAY BACK ON A PHONE. Both the header's back (meant for phones) and the
   pane's (meant for a desktop) would draw under 900px, so a phone would show
   "All messages" twice. The header's is the phone's. */
@media (max-width: 900px) {
  #office[data-view="mail"] .ofc-split--mail .ofc-split__back { display: none; }
}

/* SPAM (OF-24): the blocked senders above the list, each with its Unblock, and
   a spam message read as plain words. Quiet rows, like the rest of the list. */
.ofc-spam__blocked {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 1rem;
  padding: 0.7rem 0.75rem;
  border-bottom: 1px solid var(--o-line-2);
  font-size: var(--o-t-sm);
  list-style: none;
}
.ofc-spam__h { color: var(--o-dim); font-weight: 600; }
.ofc-spam__b { display: inline-flex; align-items: baseline; gap: 0.5rem; min-width: 0; }
.ofc-spam__addr { color: var(--o-text); overflow-wrap: anywhere; }
.ofc-spam__acts { flex-wrap: wrap; }
.ofc-spam__body { white-space: pre-wrap; overflow-wrap: anywhere; }
/* "Show as plain text" sits above the message body, small and to the right. */
.ofc-mail__as { display: block; margin: 0 0 0.6rem auto; font-size: var(--o-t-sm); }

/* HOW OLD THIS PAGE IS (OF-05): a quiet control in the header, the age in
   words and a press to read again. No border until it is hovered: it is a
   fact first and a button second. */
.ofc-fresh {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 34px;
  padding: 0 0.6rem;
  border: 1px solid transparent;
  border-radius: var(--o-r);
  background: none;
  box-shadow: none;
  color: var(--o-faint);
  font: 500 var(--o-t-sm)/1 var(--body);
  white-space: nowrap;
  cursor: pointer;
}
.ofc-fresh:hover { color: var(--o-text); border-color: var(--o-line-2); }
.ofc-fresh:hover .ofc-i { color: var(--o-text); }
.ofc-fresh[aria-busy="true"] .ofc-i { animation: ofc-fresh-turn 0.9s linear infinite; }
.ofc-fresh:disabled { cursor: default; }
@keyframes ofc-fresh-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .ofc-fresh[aria-busy="true"] .ofc-i { animation: none; }
}
/* On a phone the header row is already full: the arc alone, named for a
   screen reader by its aria-label. */
@media (max-width: 40rem) {
  .ofc-fresh #ofc-refresh-t { display: none; }
}

/* ---- "Client view" in the header (back by the owner's word, 2026-10-16) ---
   A popover rather than a <select>, because the list is names and a select in
   a header reads as a filter for the screen behind it. Anchored to the button
   and right-aligned so it cannot run off the edge on a narrow window. On a
   phone the header is the page's own actions; "Preview as client" on each
   client's row and record is the way in there. */
.ofc-clientview { position: relative; display: inline-block; }
.ofc-clientview__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 40;
  min-width: 15rem;
  max-width: min(24rem, 80vw);
  max-height: 60vh;
  overflow-y: auto;
  padding: 0.35rem;
  background: var(--o-raised);
  border: 1px solid var(--o-line-2);
  border-radius: var(--o-r-lg);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.8);
}
.ofc-clientview__menu a,
.ofc-clientview__menu p {
  display: block;
  margin: 0;
  padding: 0.5rem 0.6rem;
  border-radius: var(--o-r-sm);
  font-size: var(--o-t-sm);
  color: var(--o-text);
  text-decoration: none;
}
.ofc-clientview__menu p { color: var(--o-dim); }
.ofc-clientview__menu a:hover { background: var(--o-hover); }
.ofc-clientview__menu a:focus-visible {
  background: var(--o-press);
  outline: 1px solid var(--focus-edge);
  outline-offset: -1px;
}
.ofc-clientview__menu a small { display: block; color: var(--o-dim); font-size: var(--o-t-xs); }
@media (max-width: 40rem) { #office .ofc-clientview { display: none; } }

/* ==========================================================================
   TWO TONES (owner, 2026-10-16): "Black + near-black, modern, futuristic dark
   grey. Give the side menu character: wider, a rounded island hovering above
   the side of the desktop. Give every page more character with the two tones,
   not just black."

   THE FRAME IS deleoneai.com's BLACK (#070707, the brand's ground, kept); the
   work is a dark-grey stage set into it, and the side menu is a lighter grey
   island that floats over the frame beside the stage. Still solid and still
   monochrome (rules 7 and 18): no hue, no gradient, no blur, no glow; the
   island is lifted by a shade and a drop shadow, nothing lit.

   The page's own surfaces step up from the stage as they stepped up from the
   black: a field #161616, a popover #1C1C1C. The quietest text in the Office
   is --o-faint #909090, 5.9:1 on the stage and 5.4:1 on the island. Sheets
   that paint "the ground" by their own names (--paper on Ads, --in-bg on the
   Cloudflare record, --of-bg on a client's page) are pointed at the stage
   inside it, so a sticky tab row is never a black bar across the grey.
   ========================================================================== */
#office, #portal, #ebay, #ads {
  --o-frame:  #070707;   /* the black the islands sit on                  */
  --o-chrome: #191919;   /* the island: the side menu, the phone's bar    */
  --o-bg:     #0F0F0F;   /* the stage: every page's work                  */
  --o-panel:  #0F0F0F;
  --o-inset:  #161616;
  --o-raised: #1C1C1C;
  --o-line:   #1D1D1D;
  --o-line-2: #282828;
  --o-line-3: #444444;
}
#office, #ads, #ebay { background: var(--o-frame); }
.ofc-main { --paper: var(--o-bg); --in-bg: var(--o-bg); --of-bg: var(--o-bg); background: var(--o-bg); }

/* THE ISLAND AND THE STAGE, on a screen wide enough for a side menu. The
   menu is wider (280px, was 232) so a section reads as a place, not a list
   squeezed against the edge. Both float 12px inside the frame with 16px
   corners: the one radius beyond rule 8's three, kept for these two
   (tools/office-layout.mjs). */
@media (min-width: 62.0625rem) {
  #office, #ads, #ebay {
    --o-rail-w: 17.5rem;
    gap: 0.75rem;
    padding: 0.75rem;
  }
  .ofc-rail {
    border: 1px solid #2A2A2A;
    border-radius: 16px;
    background: var(--o-chrome);
    box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.04) inset, 0 28px 56px -24px rgba(0, 0, 0, 0.95), 0 2px 6px rgba(0, 0, 0, 0.5);
    overflow: hidden;
  }
  .ofc-main {
    border: 1px solid var(--o-line);
    border-radius: 16px;
  }
  .ofc-top { border-bottom-color: var(--o-line); }

  /* Inside the island: more air, taller rows, the brand given room. */
  .ofc-rail__brand { padding: 1.05rem 1.15rem; border-bottom-color: var(--o-line-2); }
  .ofc-logo { width: 32px; height: 32px; }
  .ofc-rail__nav { padding: 0.85rem 0.8rem 1rem; }
  .ofc-side__a { min-height: 36px; padding: 0 0.8rem; border-radius: var(--o-r); }
  .ofc-side__a.is-on,
  .ofc-side__a[aria-current="page"] { background: rgba(255, 255, 255, 0.07); box-shadow: 0 0 0 1px var(--o-line-2) inset; }
  .ofc-side__a.is-on::before,
  .ofc-side__a[aria-current="page"]::before { left: -0.75rem; }
  .ofc-rail__foot { padding: 0.9rem 1rem 1rem; border-top-color: var(--o-line-2); }
}