/* The original Office canvas, opt-in. V2 keeps tokens.css defaults. */
@font-face { font-family: "Instrument Sans"; src: url('/shell/fonts/InstrumentSans.ttf') format('truetype'); font-style: normal; font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url('/shell/fonts/InstrumentSerif-Italic.ttf') format('truetype'); font-style: italic; font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url('/shell/fonts/InstrumentSerif-Regular.ttf') format('truetype'); font-style: normal; font-weight: 400; font-display: swap; }
.office-theme {
  --font: var(--office-font); --ink: var(--office-ink); --muted: var(--office-muted); --faint: var(--office-faint);
  --hairline: var(--office-hairline); --box: var(--office-box); --wash: var(--office-neutral);
  --calm: color-mix(in srgb, var(--office-ink) 4%, var(--paper));
  --line: var(--hairline); --line-strong: var(--box); --fill: var(--calm); --soft: var(--wash);
  --hue: var(--tele); --accent: rgb(var(--hue)); --fw-display: 600; --fw-label: 500;
  --glass-lift: var(--office-glass-lift); --focus: 2px solid var(--office-ink);
  /* bar-17: the board's mega menu is blur(28px) saturate(160%), not the estate's
     18/140 — raised HERE and not in tokens.css so V2's glass keeps its own value. */
  --glass-blur: blur(28px) saturate(160%);
  /* hiring-27: the board's chat card is streak AND grain. tokens.css serves the
     streak alone; the Office adds the same inline fractal-noise the board draws
     (feTurbulence baseFrequency .9, two octaves, ink at .09) as a second layer. */
  --office-glass-sheen:
    linear-gradient(112deg, transparent 46%, color-mix(in srgb, var(--paper) 45%, transparent) 52%, transparent 58%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.08 0 0 0 0 0.09 0 0 0 0 0.11 0 0 0 0.09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  font-family: var(--font); color: var(--ink); font-size: 15px; line-height: 1.5;
  font-synthesis: none; font-optical-sizing: auto;
}
.office-theme [data-office-department="sales"], .office-theme[data-office-department="sales"] { --hue: var(--tele); }
.office-theme [data-office-department="rm"], .office-theme[data-office-department="rm"] { --hue: var(--rm); }
.office-theme [data-office-department="social"], .office-theme[data-office-department="social"] { --hue: var(--soc); }
.office-theme [data-office-department="knowledge"], .office-theme[data-office-department="knowledge"] { --hue: var(--kb); }
.office-theme [data-office-department="recruiter"], .office-theme[data-office-department="recruiter"] { --hue: var(--rec); }
.office-theme [data-office-department="grey"], .office-theme[data-office-department="grey"] { --hue: var(--grey); }
.office-frame { box-sizing: border-box; width: calc(100% - 2 * var(--office-gutter)); max-width: var(--col-wide); margin-inline: auto; padding-block: 56px 80px; }
.office-display { font-family: var(--office-display); font-weight: 400; font-style: italic; letter-spacing: -.015em; line-height: 1.1; text-wrap: balance; }
.office-eyebrow { font: 600 13px/1 var(--office-font); color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.office-portrait { display: block; width: 44px; height: 44px; flex: none; object-fit: cover; border-radius: var(--pill); }
.office-portrait--small { width: 22px; height: 22px; }
.office-portrait--large { width: 88px; height: 88px; box-shadow: 0 0 0 4px var(--paper), 0 0 0 5px var(--hairline); }
.office-glass-card { position: relative; isolation: isolate; box-sizing: border-box; background: var(--office-glass-ground); border: var(--glass-hairline); border-radius: var(--office-card-radius); box-shadow: var(--office-glass-lift); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.office-glass-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; background: var(--office-glass-sheen); }
.office-glass-card--chat { border-radius: 20px; box-shadow: var(--office-chat-lift); -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); }
.office-theme :is(button, a, input, select, summary):focus-visible { outline: var(--focus); outline-offset: 3px; }
.office-theme :is(button, a, input, select, textarea) { font-family: var(--font); }
.office-theme [hidden] { display: none !important; }

/* ── the presses (desk-16, knowledge-29) ────────────────────────────────────
   The boards use THREE press sizes and none of them is 44px: `.act` 36/13.5,
   `.act-s` 32/13, `.go` 40/14 (Main.dc.html:42,44,127). controls.css serves
   one 44px pill for the estate; the Office overrides its own three here rather
   than moving the estate's floor, and restores 44px under 700px where a press
   is a touch target. `height` with `min-height: 0` is what actually beats the
   served floor — a min-height alone would win over a shorter height. */
.office-theme .secondary-button {
  height: 36px; min-height: 0; padding: 0 16px; gap: var(--s3);
  font: 500 13.5px/1 var(--font);
  border: 1px solid var(--box); border-radius: var(--pill);
  background: color-mix(in srgb, var(--paper) 70%, transparent); color: var(--ink);
}
/* The served hovers are `:hover:not(:disabled)`, which outweighs a two-class
   rule — the Office states have to be written at the same weight or the pill
   snaps back to the estate's wash and tomato the moment a pointer lands. */
.office-theme .secondary-button:hover:not(:disabled) { border-color: var(--ink); background: var(--paper); }
.office-theme .primary-button {
  height: 40px; min-height: 0; padding: 0 18px; gap: var(--s3);
  font: 500 14px/1 var(--font);
  border: 0; border-radius: var(--pill);
  background: rgb(var(--hue)); color: var(--paper);
}
.office-theme .primary-button:hover:not(:disabled),
.office-theme .primary-button:active:not(:disabled) { border: 0; background: rgb(var(--hue)); filter: brightness(.92); }
/* The tile foot's smaller press (`.act-s`). A modifier, so it rides whichever
   of the two pills it is written on. */
.office-theme .press--small { height: 32px; padding: 0 13px; font-size: 13px; }
/* ── the segmented control (desk-21) ────────────────────────────────────────
   NeedsYou.dc.html:513 — Open/Done is ONE track, not two pills: one border,
   the pill radius, overflow hidden, and the pressed half filling ink INSIDE
   the track with no border of its own. Contract:
     <div class="office-seg" role="group"><button aria-pressed="true">…
   Scoped under `.office-theme` so it outweighs the press sizes above on a
   button that also carries `.secondary-button`. 34px on the phone too — the
   board draws the same track there (PhoneNeedsYou.dc.html:309). */
.office-theme .office-seg { display: inline-flex; border: 1px solid var(--box); border-radius: var(--pill); overflow: hidden; }
.office-theme .office-seg > button {
  height: 34px; min-height: 0; padding: 0 14px; margin: 0;
  border: 0; border-radius: 0; background: transparent;
  font: 500 13.5px/1 var(--font); color: var(--muted); cursor: pointer;
}
.office-theme .office-seg > button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
@media (max-width: 1199px) { .office-theme { --office-gutter: 80px; } }
@media (max-width: 700px) {
  .office-theme { --office-gutter: 20px; }
  /* The estate's touch floor comes back where a press is a touch target; the
     segmented track keeps the board's 34px, which the phone board also draws. */
  .office-theme :is(.primary-button, .secondary-button, .press--small) { min-height: 44px; }
  .office-theme :is(input,textarea,select):not([type=checkbox]):not([type=radio]) { font-size: 16px; }
  .office-frame { padding-block: 24px 56px; }
  .office-glass-card { border-radius: 18px; }
}
/* Table and funnel values are Office-only; V2 consumers keep their sheets. */
.office-theme .dtable { font:400 14px/1.35 var(--font); border-radius:var(--office-table-radius); overflow:hidden; }
.office-theme .dtable__bar { gap:10px; padding:12px 14px; }
.office-theme .dtable__search { position:relative; }
.office-theme .dtable__search::before { content:""; position:absolute; left:15px; top:14px; width:11px; height:11px; border:1.5px solid var(--faint); border-radius:var(--pill); pointer-events:none; }
.office-theme .dtable__search::after { content:""; position:absolute; left:27px; top:26px; width:6px; height:1.5px; background:var(--faint); transform:rotate(45deg); pointer-events:none; }
.office-theme .dtable__search input { padding-inline:40px 14px; border:0; border-radius:12px; background:var(--calm); font-size:14px; }
.office-theme .dtable__search input::placeholder { color:var(--faint); }
.office-theme .dtable__chips { gap:6px; }
.office-theme .dtable__chip { font:500 13px/1 var(--font); padding-inline:12px; }
.office-theme .dtable__t th { font-size:12px; letter-spacing:.01em; }
.office-theme .dtable__t th,.office-theme .dtable__t td { padding:12px 16px; }
.office-theme .dtable__t tr:last-child td { border-bottom:0; }
.office-theme .dtable__ckb { width:18px; height:18px; border-radius:6px; border-width:1.5px; }
.office-theme .dtable__ckb.is-on::after { font-size:14px; line-height:18px; }
.office-theme .who__av { width:34px; height:34px; flex-basis:34px; font-size:12px; }
.office-theme .dtable .who { gap:12px; }
.office-theme .who__info,.office-theme .dtable .stk { gap:3px; }
.office-theme .who__nm { font-weight:500; }
.office-theme .who__ph,.office-theme .stk__b { font-size:12.5px; }
.office-theme .dtable .pill { gap:6px; padding:5px 10px; font-size:12.5px; background:color-mix(in srgb, rgb(var(--hue)) 10%, var(--paper)); color:rgb(var(--hue)); }
.office-theme .dtable .pill i { width:6px; height:6px; }
.office-theme .dtable__foot { padding:12px 16px; border-top:1px solid var(--hairline); }
.office-theme .dtable__range { font-size:13px; }
.office-theme .dtable__pager { gap:6px; }
.office-theme .dtable__pager button { font:500 13px/1 var(--font); }
.office-theme .funnel__row { grid-template-columns:132px minmax(0,1fr) auto; column-gap:16px; margin-inline:-12px; padding-inline:12px; }
@media (max-width:700px) {
 .office-theme .dtable__bar { flex-direction:column; align-items:stretch; }
 .office-theme .dtable__search { flex-basis:auto; }
 .office-theme .dtable__chips { flex-wrap:wrap; }
 .office-theme .dtable__t tbody tr { grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px; padding:12px 14px; }
 .office-theme .dtable__t tbody tr:has(.dtable__check) { padding-right:58px; }
 .office-theme .dtable__t td,.office-theme .dtable__t td.r { padding:0; }
 .office-theme .dtable__t .dtable__primary { grid-column:auto; }
 .office-theme .dtable__t .dtable__pillcell { padding-left:0; }
 .office-theme .dtable__t .dtable__open { display:none; }
 .office-theme .dtable__foot { padding:12px 14px; }
 .office-theme .dtable__pager { gap:4px; }
 .office-theme .funnel__row { grid-template-columns:96px minmax(0,1fr) auto; }
}
@media (prefers-reduced-motion: reduce) { .office-theme *, .office-theme *::before, .office-theme *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }