/* ==========================================================================
   OFFICE HOME — the attention-first home (Phase I, milestone B).

   Loaded by office.html after office.css. Every selector is under `#office`
   and every class starts `oh-`, so nothing here can reach another view or
   another page, and every value reads office.css's --o-* palette, which
   tokens.css points at tkati.com's monochrome system (#070707 canvas,
   neutral ink, hairlines). No new colour is introduced.

   COLOUR MEANS STATE AND NOTHING ELSE.
     red    --o-bad / --o-bad-mark    overdue or failed
     amber  --o-warn-ink / --o-warn   needs attention; a read that failed
     green  --o-ok-mark               a check that came back clean
     grey   --o-neutral               unknown, recorded-but-unchecked, none
   Every state is also a word; the hues sit 1.4-1.6:1 apart.

   NO BOXES. Sections are headings, hairlines and space on the canvas: rows
   over cards, no container around a summary, no figure larger than the
   text around it, nothing that moves.

   RESPONSIVE BY THE PAGE'S OWN WIDTH (container queries on #ofc-home), not
   the viewport's: the Office rail takes 15.5rem at desktop and disappears
   below 62rem, so the page width is what decides.
     < 40rem   phone: one column, action first; rows restack
     40-62rem  tablet: one column; money, live, enquiries two by two
     62-84rem  laptop (1366-1512): attention across the page, then the
               dated band and the work beside a 19rem side column
     84-96rem  wide (1728): two columns from the top
     >= 96rem  very wide (1920): the side column splits into money | live

   TYPE, IN ORDER OF WEIGHT
     section     Inter Tight 650 15px (attention 17px)   --o-text
     object      Inter 600 14px                          --o-text
     state word  Inter 600 13px, the state's ink
     fact        Inter 13px                              --o-dim
     context     Inter 12px                              --o-faint
     figure      650, tabular
     time        mono 12px                               --o-faint
   ========================================================================== */

#office .oh {
  container: oh / inline-size;
  max-width: 120rem;
  color: var(--o-text);
  font-family: var(--body);
  font-size: var(--o-t-sm);
}
#office .oh[hidden] { display: none; }

/* ---- the grid ----------------------------------------------------------- */

#office .oh-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "attn" "day" "work" "side" "move";
  gap: 1.75rem;
  align-items: start;
}
#office .oh-grid > .oh-attn { grid-area: attn; }
#office .oh-grid > .oh-day { grid-area: day; }
#office .oh-grid > .oh-work { grid-area: work; }
#office .oh-grid > .oh-side { grid-area: side; }
#office .oh-grid > .oh-move { grid-area: move; }
#office .oh-grid > *,
#office .oh-side > * { min-width: 0; }
#office .oh-side > .oh-sec + .oh-sec { margin-top: 1.6rem; }

/* TABLET: one column; the side's blocks sit two by two under the work
   rather than as a second long column. */
@container oh (min-width: 40rem) and (max-width: 61.99rem) {
  #office .oh-side {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.6rem 2.25rem;
    align-items: start;
  }
  #office .oh-side > .oh-sec + .oh-sec { margin-top: 0; }
}

/* LAPTOP: the attention list across the whole page, so each problem is one
   line; the dated band and the work beside the reference column. The last
   row takes any height the side column adds, so no gap opens between the
   dated band and the work. */
@container oh (min-width: 62rem) {
  #office .oh-grid {
    grid-template-columns: minmax(0, 1fr) 19rem;
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas: "attn attn" "day side" "work side" "move side";
    gap: 1.5rem 2.5rem;
  }
}

/* WIDE: two columns from the top; the main column is wide enough for a
   one-line attention row beside the reference column. */
@container oh (min-width: 84rem) {
  #office .oh-grid {
    grid-template-columns: minmax(0, 1fr) 20rem;
    grid-template-areas: "attn side" "day side" "work side" "move side";
    column-gap: 3rem;
  }
}

/* VERY WIDE: money and live systems side by side, enquiries and movement
   under them, so 1920 has no empty field under the work. */
@container oh (min-width: 96rem) {
  #office .oh-grid { grid-template-columns: minmax(0, 1fr) 36rem; }
  #office .oh-side {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.6rem 2.25rem;
    align-items: start;
  }
  #office .oh-side > .oh-sec + .oh-sec { margin-top: 0; }
}

/* ---- section heads: a name, a count, a note, where to go for the rest -- */

#office .oh-sec__h {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.2rem 0.6rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--o-line-2);
}
#office .oh-sec__h h2 {
  margin: 0;
  font: 650 0.9375rem/1.25 var(--display);
  letter-spacing: -0.006em;
  color: var(--o-text);
}
#office .oh-attn .oh-sec__h h2 { font-size: 1.0625rem; }
#office .oh-sec__n {
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--o-text);
}
#office .oh-sec__note { font-size: 0.75rem; color: var(--o-faint); }
#office .oh-sec__more {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin: -4px 0 -4px auto;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--o-dim);
  text-decoration: none;
  white-space: nowrap;
}
#office .oh-sec__more:hover { color: var(--o-text); text-decoration: underline; text-underline-offset: 3px; }

/* ---- shared pieces ------------------------------------------------------ */

#office .oh a { color: inherit; }
/* 24px TARGETS WITHOUT TALLER ROWS. A name or an inline link grows its hit
   box (and the box a focus ring draws) by padding, and gives the line its
   height back with an equal negative margin. Repo rule: no control under
   24px tall (tools/a11y-check.mjs). */
#office .oh a:is(.oh-who, .oh-sys__name, .oh-inline) {
  display: inline-block;
  padding-block: 4px;
  margin-block: -4px;
}
#office .oh-who { font-weight: 600; color: var(--o-text); text-decoration: none; }
#office a.oh-who:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--o-line-4); }
#office .oh-fig { font-weight: 650; font-variant-numeric: tabular-nums; color: var(--o-text); }
#office .oh-ext { color: var(--o-faint); }
#office .oh-inline { color: var(--o-text); text-decoration: underline; text-underline-offset: 3px; }

#office .oh-dot {
  display: inline-block;
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--o-neutral);
}
#office .oh-dot--ok { background: var(--o-ok-mark); }

#office .oh-none,
#office .oh-note {
  margin: 0.45rem 0 0;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--o-faint);
}
#office .oh-none { font-size: var(--o-t-sm); color: var(--o-dim); padding-top: 0.1rem; }

/* A READ THAT FAILED is said where its figures would have been: amber,
   because the area needs a look before anybody trusts it. */
#office .oh-unread {
  margin: 0.5rem 0 0;
  padding: 0.3rem 0 0.3rem 0.6rem;
  border-left: 2px solid var(--o-warn);
  font-size: var(--o-t-sm);
  line-height: 1.45;
  color: var(--o-warn-ink);
}

#office .oh-more {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--o-dim);
  font: 550 var(--o-t-xs)/1 var(--body);
  cursor: pointer;
}
#office .oh-more:hover { background: transparent; color: var(--o-text); text-decoration: underline; text-underline-offset: 3px; }

/* A link inside a note (milestones G and H: "Every plan", "Client infrastructure"): the page's ink,
   underlined, and a 24px target like every other control. */
#office .oh-link {
  display: inline-block;
  min-height: 24px;
  line-height: 24px;
  color: var(--o-text);
  text-decoration: underline;
  text-decoration-color: var(--o-line-4);
  text-underline-offset: 3px;
}
#office .oh-link:hover { color: #fff; text-decoration-color: currentColor; }

/* KEYBOARD FOCUS IS VISIBLE EVERYWHERE, and white: the accent is white.
   The ring follows the control's own shape: a pill stays a pill while it
   has focus (this rule used to set 3px on everything and, at higher
   specificity than .oh-act, squared the pills). Only the text links, which
   have no shape of their own, get the small radius. */
#office .oh :is(a, button):focus-visible {
  outline: 2px solid var(--o-accent);
  outline-offset: 2px;
}
#office .oh :is(.oh-who, .oh-inline, .oh-sys__name, .oh-sec__more):focus-visible { border-radius: 3px; }

#office .oh-vh {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ==========================================================================
   1 · NEEDS ATTENTION: one line per problem where the column allows.
   kind · client · the problem (cut with an ellipsis, full text in the
   title) · how long · one action.
   ========================================================================== */

#office .oh-attn { container: attn / inline-size; }
#office .oh-list { list-style: none; margin: 0; padding: 0; }

#office .oh-item {
  display: grid;
  /* THE ACTION COLUMN IS A FIXED WIDTH, so the wait column lines up down
     the list: each row is its own grid, and an `auto` action column let a
     short quiet link ("Open client") push that row's age out of line. */
  grid-template-columns: 10.25rem minmax(7rem, 12rem) minmax(0, 1fr) 4.75rem 7.75rem;
  grid-template-areas: "kind who what age act";
  align-items: center;
  column-gap: 1rem;
  min-height: 2.5rem;
  padding: 0.25rem 0.25rem;
  border-bottom: 1px solid var(--o-line);
}
#office .oh-item:hover { background: var(--o-hover); }
/* A tablet, or the main column beside the reference at 1920: the kind and
   the client give up width to the problem. */
@container attn (max-width: 62rem) {
  #office .oh-item { grid-template-columns: 9.75rem minmax(6rem, 10rem) minmax(0, 1fr) 4.25rem 7.75rem; column-gap: 0.85rem; }
}

#office .oh-item__kind {
  grid-area: kind;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  font-weight: 600;
  color: var(--o-dim);
  white-space: nowrap;
}
#office .oh-item__kind > span:last-child { overflow: hidden; text-overflow: ellipsis; }
#office .oh-item[data-tone="bad"] .oh-item__kind { color: var(--o-bad); }
#office .oh-item[data-tone="bad"] .oh-dot { background: var(--o-bad-mark); }
#office .oh-item[data-tone="attn"] .oh-item__kind { color: var(--o-warn-ink); }
#office .oh-item[data-tone="attn"] .oh-dot { background: var(--o-warn); }

#office .oh-item__who {
  grid-area: who;
  min-width: 0;
  font-size: var(--o-t-md);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#office .oh-item__what {
  grid-area: what;
  min-width: 0;
  color: var(--o-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#office .oh-item__age {
  grid-area: age;
  justify-self: end;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--o-text);
  white-space: nowrap;
}
/* "Today" is a word in a different kind of type, so it cannot be read as a
   small number in a column of numbers (office-home.mjs, waitOf). */
#office .oh-today { font-family: var(--mono); font-size: 0.75rem; font-weight: 500; color: var(--o-dim); }

/* ONE ACTION. Outlined where TKATI owes the move (the 3:1 line is its only
   edge, WCAG 1.4.11); a quiet text link where the client or Stripe holds
   it. Never the white fill: that is the one primary control per screen. */
#office .oh-act {
  grid-area: act;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 0.7rem;
  border: 1px solid var(--o-line-3);
  border-radius: var(--o-r-sm);
  color: var(--o-text);
  font-size: 0.78125rem;
  font-weight: 550;
  text-decoration: none;
  white-space: nowrap;
}
#office a.oh-act:hover { border-color: var(--o-line-4); background: var(--o-hover); }
/* The grouped row's control is a <button>: app.css gives every button the
   56px white fill, so this one is reset to the outlined pill. */
#office button.oh-act {
  height: auto;
  margin: 0;
  background: transparent;
  font-family: var(--body);
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
}
#office button.oh-act:hover { border-color: var(--o-line-4); background: var(--o-hover); }
#office button.oh-act:active { transform: none; }
#office .oh-act--quiet { border-color: transparent; color: var(--o-dim); padding: 0 0.35rem 0 0.8rem; }
#office a.oh-act--quiet:hover { border-color: transparent; background: none; color: var(--o-text); text-decoration: underline; text-underline-offset: 3px; }
#office .oh-act--none { border-style: dashed; color: var(--o-faint); }

#office .oh-attn__foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  margin-top: 0.5rem;
}
/* THE QUIET LINE: every check that came back clean, as one sentence. */
#office .oh-clear {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 0.4rem;
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--o-faint);
}
#office .oh-clear .oh-dot { align-self: center; width: 6px; height: 6px; }
#office .oh-clear__k { color: var(--o-dim); font-weight: 600; }
/* The collapsed form (Phase VI): one line, the list on demand. */
#office details.oh-clear { display: block; }
#office .oh-clear__sum { display: inline-flex; align-items: center; gap: 0.45rem; cursor: pointer; list-style: none; }
#office .oh-clear__sum::-webkit-details-marker { display: none; }
#office .oh-clear__sum::after { content: "Show"; margin-left: 0.35rem; color: var(--o-faint); text-decoration: underline; text-underline-offset: 3px; }
#office details[open] > .oh-clear__sum::after { content: "Hide"; }
#office .oh-clear__sum:hover .oh-clear__k { color: var(--o-text); }
#office .oh-clear__list { margin: 0.35rem 0 0 1rem; max-width: 72ch; }
#office .oh-clear--all { padding-top: 0.6rem; font-size: var(--o-t-sm); }
#office .oh-clear--all .oh-clear__k { font: 650 0.9375rem/1.3 var(--display); color: var(--o-text); }

/* A GROUPED RED KIND: the same row, its "who" a count ("5 invoices"); its
   members sit under it when opened, set in by the width of the dot so they
   read as belonging to it. */
#office .oh-item--group .oh-item__who { font-weight: 650; }
#office .oh-item--member .oh-item__kind { padding-left: 1rem; }
#office .oh-item--member .oh-item__kind > span:last-child { font-weight: 500; }

/* TABLET (the page between 44 and 62rem: 820 portrait, 1180 landscape): the
   row is recomposed, not shrunk. The problem sentence got about 240px on
   one line and was cut in every row; here it takes its own line under the
   client, up to two lines, and the kind and the action span both. Keyed to
   the PAGE (container oh), so the main column beside the reference at
   1920 keeps its one-line rows. */
@container oh (min-width: 44rem) and (max-width: 61.99rem) {
  #office .oh-item {
    grid-template-columns: 9.75rem minmax(0, 1fr) 4.75rem 7.75rem;
    grid-template-areas: "kind who age act" "kind what what act";
    row-gap: 0.1rem;
    padding-block: 0.4rem;
  }
  #office .oh-item__what {
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
}

/* NARROW (a phone): the same row, restacked so the action sits beside the
   kind and the client instead of on a line of its own; 44px to the thumb. */
@container attn (max-width: 43.99rem) {
  #office .oh-item {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "kind age act" "who who act" "what what what";
    column-gap: 0.75rem;
    row-gap: 0.1rem;
    padding: 0.55rem 0;
  }
  #office .oh-item:hover { background: none; }
  #office .oh-item__who { white-space: normal; }
  #office .oh-item__what {
    padding-top: 0.15rem;
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  #office .oh-act { min-height: 44px; align-self: center; }
}

/* ==========================================================================
   2 · TODAY: two lists side by side where the column allows. Neutral.
   ========================================================================== */

#office .oh-day { container: day / inline-size; }
#office .oh-day__cols { display: grid; grid-template-columns: minmax(0, 1fr); }
@container day (min-width: 36rem) {
  #office .oh-day__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
}
#office .oh-day__list { container: dl / inline-size; list-style: none; margin: 0; padding: 0; }
#office .oh-day__row {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  min-width: 0;
  padding: 0.36rem 0;
  border-bottom: 1px solid var(--o-line);
}
#office .oh-day__row--none { color: var(--o-faint); }
#office .oh-day__row--more { border-bottom: 0; padding-top: 0.45rem; }
#office .oh-day__when { flex: none; width: 3.1rem; font-family: var(--mono); font-size: 0.75rem; color: var(--o-faint); }
#office .oh-day__marker { flex: none; width: 3.7rem; font-weight: 600; color: var(--o-dim); }
#office .oh-day__who { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#office .oh-day__detail { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--o-faint); }
#office .oh-day__amt { flex: none; margin-left: auto; white-space: nowrap; }
/* A narrow list drops the detail rather than cutting it to a stray letter;
   the row's title carries it. */
@container dl (max-width: 25rem) {
  #office .oh-day__detail { display: none; }
}

/* ==========================================================================
   3 · ACTIVE CLIENT WORK: a dense table; a list on a phone.
   ========================================================================== */

#office .oh-work { container: work / inline-size; }
#office .oh-table { width: 100%; border-collapse: collapse; }
#office .oh-table th[scope="col"] {
  padding: 0.5rem 0.9rem 0.4rem 0;
  border-bottom: 1px solid var(--o-line);
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--o-faint);
  white-space: nowrap;
}
#office .oh-table td,
#office .oh-table th[scope="row"] {
  padding: 0.45rem 0.9rem 0.45rem 0;
  border-bottom: 1px solid var(--o-line);
  text-align: left;
  vertical-align: baseline;
  font-weight: 400;
  white-space: nowrap;
}
#office .oh-table tbody tr:hover { background: var(--o-hover); }
#office .oh-table .oh-num { text-align: right; padding-right: 0; }
#office .oh-proj { color: var(--o-text); }
#office .oh-stage { color: var(--o-dim); }
#office .oh-moved { color: var(--o-faint); }
/* THE WAITING CELL TAKES WHAT IS LEFT AND ENDS IN AN ELLIPSIS rather than
   doubling the row; the full sentence is its title. */
#office .oh-wait { width: 100%; max-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--o-dim); }
#office .oh-wait__who { font-weight: 650; color: var(--o-text); }
#office .oh-wait[data-who="tkati"] .oh-wait__who { color: var(--o-warn-ink); }
#office .oh-wait[data-who="unread"] .oh-wait__who { color: var(--o-warn-ink); font-weight: 500; }
#office .oh-wait__none { color: var(--o-faint); }
#office .oh-work__foot { margin-top: 0.5rem; }

@container work (max-width: 39.99rem) {
  #office .oh-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  #office .oh-table,
  #office .oh-table tbody { display: block; }
  #office .oh-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.1rem 0.75rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--o-line);
  }
  #office .oh-table td,
  #office .oh-table th[scope="row"] { display: block; padding: 0; border: 0; white-space: normal; }
  #office .oh-table .oh-cl { grid-column: 1; }
  #office .oh-table .oh-stage { grid-column: 2; grid-row: 1; text-align: right; }
  #office .oh-table .oh-proj { grid-column: 1; }
  #office .oh-table .oh-moved { grid-column: 2; grid-row: 2; }
  #office .oh-table .oh-wait { grid-column: 1 / -1; width: auto; max-width: none; }
}

/* ==========================================================================
   4 · MONEY: label and note on the left, the figure on the right.
   ========================================================================== */

#office .oh-kv { margin: 0; }
#office .oh-kv--rec { margin-top: 0.75rem; border-top: 1px solid var(--o-line-2); }
#office .oh-kv__r {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 0.75rem;
  align-items: baseline;
  padding: 0.34rem 0;
  border-bottom: 1px solid var(--o-line);
}
#office .oh-kv dt {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 0.4rem;
  min-width: 0;
  color: var(--o-dim);
}
#office .oh-kv__s { font-size: 0.75rem; color: var(--o-faint); }
#office .oh-kv dd { margin: 0; text-align: right; }
#office .oh-kv__fig { font-size: var(--o-t-md); white-space: nowrap; }
#office .oh-kv__words { color: var(--o-faint); }
#office .oh-kv__r[data-tone] dt::before {
  content: "";
  flex: none;
  align-self: center;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--o-neutral);
}
#office .oh-kv__r[data-tone="bad"] dt::before { background: var(--o-bad-mark); }
#office .oh-kv__r[data-tone="bad"] :is(.oh-kv__k, .oh-kv__fig) { color: var(--o-bad); }
#office .oh-kv__r[data-tone="attn"] dt::before { background: var(--o-warn); }
#office .oh-kv__r[data-tone="attn"] :is(.oh-kv__k, .oh-kv__fig) { color: var(--o-warn-ink); }
#office .oh-kv__r[data-tone="unknown"] dt::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--o-neutral); }
#office .oh-kv__r[data-tone="unknown"] .oh-kv__words { color: var(--o-warn-ink); }

/* ==========================================================================
   5 · LIVE SYSTEMS, 6 · ENQUIRIES
   ========================================================================== */

#office .oh-line { margin: 0; padding-top: 0.45rem; line-height: 1.5; color: var(--o-text); }
#office .oh-line__s { color: var(--o-dim); }
/* UNKNOWN IS NOT HEALTHY, so it is never green. */
#office .oh-unknown { color: var(--o-faint); }

#office .oh-sys__list { list-style: none; margin: 0.35rem 0 0; padding: 0; border-top: 1px solid var(--o-line); }
#office .oh-sys {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 0.75rem;
  row-gap: 0.05rem;
  padding: 0.36rem 0;
  border-bottom: 1px solid var(--o-line);
}
#office .oh-sys__name {
  min-width: 0;
  font-weight: 600;
  color: var(--o-text);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#office a.oh-sys__name:hover { text-decoration: underline; text-underline-offset: 3px; }
#office .oh-sys__state {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--o-dim);
  white-space: nowrap;
}
/* NOT LIVE YET is a hollow mark; a recorded live is a solid neutral one. */
#office .oh-sys:not([data-state="live"]) .oh-dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--o-neutral); }
#office .oh-sys__meta,
#office .oh-sys__note { grid-column: 1 / -1; font-size: 0.75rem; line-height: 1.4; color: var(--o-faint); }
#office .oh-sys__note { color: var(--o-dim); }

#office .oh-lead__list { list-style: none; margin: 0.35rem 0 0; padding: 0; border-top: 1px solid var(--o-line); }
#office .oh-lead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 2.5rem;
  column-gap: 0.75rem;
  align-items: baseline;
  padding: 0.32rem 0;
  border-bottom: 1px solid var(--o-line);
}
#office .oh-lead__who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#office .oh-lead__s { font-size: 0.75rem; color: var(--o-faint); white-space: nowrap; }
#office .oh-lead__v { text-align: right; font-variant-numeric: tabular-nums; color: var(--o-faint); }

/* ==========================================================================
   7 · RECENT MOVEMENT, WHERE TO BEGIN, LOADING
   ========================================================================== */

#office .oh-log { list-style: none; margin: 0; padding: 0; font-size: 0.75rem; }
#office .oh-log__day { padding: 0.55rem 0 0.1rem; font-family: var(--mono); color: var(--o-faint); }
#office .oh-log__e {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  gap: 0.5rem;
  padding: 0.14rem 0;
  line-height: 1.45;
  color: var(--o-dim);
}
#office .oh-log__t { font-family: var(--mono); color: var(--o-faint); font-variant-numeric: tabular-nums; }
#office .oh-log__x b { color: var(--o-text); font-weight: 600; }
#office .oh-log__m { color: var(--o-faint); }

#office .oh-start__list { list-style: none; margin: 0; padding: 0; }
#office .oh-start__list li { padding: 0.55rem 0; border-bottom: 1px solid var(--o-line); }
#office .oh-start__list .oh-inline { font-weight: 600; }
#office .oh-start__why { color: var(--o-faint); }
#office .oh > .oh-start { margin-top: 1.75rem; }

#office .oh-skel { list-style: none; margin: 0; padding: 0; }
#office .oh-skel__row {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 2.5rem;
  border-bottom: 1px solid var(--o-line);
}
#office .oh-skel__bar { height: 0.55rem; border-radius: 3px; background: var(--o-line-2); }
#office .oh-skel__bar--a { flex: none; width: 7rem; }
#office .oh-skel__bar--b { flex: none; width: 9rem; }
#office .oh-skel__bar--c { flex: 1 1 auto; max-width: 22rem; }

/* ==========================================================================
   THE CHROME AROUND THE HOME, only while it is drawn (#office[data-home]).
   ========================================================================== */

/* The inherited tiles and cards are not drawn under the home. */
#office[data-home] section[data-view="dashboard"] > :not(#ofc-home) { display: none; }

/* SAMPLE is said beside the title: neutral, because a fixture is not a
   problem, and small, because it must not cost the fold. */
#office .oh-sample {
  display: inline-flex;
  align-items: center;
  height: 1.25rem;
  margin-left: 0.6rem;
  padding: 0 0.5rem;
  border: 1px solid var(--o-line-3);
  border-radius: var(--o-pill);
  font: 600 0.6875rem/1 var(--body);
  letter-spacing: 0.02em;
  color: var(--o-dim);
  vertical-align: 0.2em;
}

/* On a phone the top bar is sticky, and the state sentence would make it
   three lines tall for the whole scroll; the attention heading carries the
   count there. */
@media (max-width: 40rem) {
  #office[data-home] #ofc-crumb { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  #office .oh * { transition: none !important; }
}

/* A SHORT LAPTOP SCREEN (1366x768 and the like): the same rows on a tighter
   rhythm, so the active work reaches the fold under a full attention list.
   Width alone cannot tell a 768px-tall laptop from a 900px one. */
@media (min-width: 62rem) and (max-height: 50rem) {
  #office .oh-grid { row-gap: 1.25rem; }
  #office .oh-item { min-height: 2.25rem; padding-block: 0.15rem; }
  #office .oh-day__row { padding-block: 0.3rem; }
  #office .oh-table td,
  #office .oh-table th[scope="row"] { padding-top: 0.38rem; padding-bottom: 0.38rem; }
}

/* A `hidden` row stays hidden whatever display its class gives it. Last in
   the file, and specific enough to beat every row rule above. */
#office .oh [hidden][hidden] { display: none; }