/* The family office, layered over app.css.
 *
 * Only identity lives here — the palette, the masthead, and the couple of
 * elements the office has that the household does not. Everything structural
 * (layout, tables, cards, forms, the sign-in card) comes from app.css and
 * should keep coming from there, so a fix to a control benefits both
 * applications instead of one.
 *
 * The mechanism is the custom properties app.css already defines. Redeclaring
 * them on body.office re-resolves every var() beneath it, including on body
 * itself, so a handful of lines restyles the whole surface without touching a
 * single component rule.
 *
 * Cooler and darker on purpose. HouseOps is warm paper and a serif — a house.
 * This should feel like a different building, so that someone with both open
 * knows which one they are in before reading a word.
 */

body.office {
  --ink:          #12151c;
  --ink-soft:     #4a5262;
  --ink-faint:    #7c8697;
  --paper:        #f5f6f8;
  --paper-raised: #ffffff;
  --line:         #dfe3ea;
  --line-soft:    #eef0f4;
  --accent:       #3d5a8a;
  --accent-soft:  #e9eef6;
}

/* A dark masthead is the single strongest "you are somewhere else" signal
 * available, and it costs one rule. */
body.office .masthead {
  background: #14171f;
  border-bottom-color: #14171f;
}

body.office .wordmark { color: #f2f4f7; }
body.office .wordmark span { color: #8b97ab; }

body.office .nav a { color: #aab4c4; }
body.office .nav a:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
body.office .nav a.active { background: rgba(255, 255, 255, 0.12); color: #fff; }

body.office .who-name { color: #aab4c4; }
body.office .who a { color: #7c8697; }
body.office .who a:hover { color: #fff; }

/* A nav entry for an area that exists in the policy but has no page yet.
 * Deliberately not a link: an anchor that 404s is worse than a label that
 * admits the page is not built. Removed as each area lands. */
body.office .nav-soon {
  padding: 7px 11px;
  border-radius: 7px;
  font-size: 0.85rem;
  color: #5d6879;
  cursor: default;
  white-space: nowrap;
}

/* The sign-in and no-access cards sit outside the masthead, so they need the
 * mark treated directly. */
body.office .signin-card .mark { color: var(--ink); }

/* Phase 0 scaffolding. The overview lists the areas that are planned but not
 * built; these read as inventory rather than as navigation. */
body.office .planned {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

body.office .planned span {
  border: 1px dashed var(--line);
  border-radius: 999px;
  padding: 5px 13px;
  font-size: 0.82rem;
  color: var(--ink-faint);
}

/* ---------------------------------------------------------------------------
 * The spine pages
 * ---------------------------------------------------------------------------
 * Deliberately few. Everything structural on entities and parties — the form
 * card, .f fields, .rowform, .formactions, .banner, .linkbtn, .pill, .empty —
 * is app.css's, so those pages inherit household fixes. What is here is what
 * the household has no equivalent of.
 */

/* A row of actions above a record, distinct from .formactions (inside a form)
 * and .rowactions (inside a table row). */
body.office .toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
body.office .toolbar form.inline { display: inline-flex; margin: 0; }

/* Archived, and former role-holders. Dimmed rather than hidden: a dissolved
 * trust and a trustee who resigned are the history the time ranges exist to
 * keep, and a list that drops them silently answers "who were the trustees"
 * with a confident lie. */
body.office tr.archived { opacity: 0.55; }
body.office tr.archived a { color: var(--ink-soft); }

/* Free prose somebody typed about a record, as opposed to its fields. */
body.office .notes {
  white-space: pre-wrap;
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin-top: 12px;
  padding-left: 12px;
  border-left: 2px solid var(--line);
}

body.office .subhead {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 0.95rem;
  color: var(--ink-faint);
  margin: 20px 0 6px;
}

/* Removing a row is not the same button as ending one, and should not look
 * like it. */
body.office .linkbtn.danger { color: var(--ink-faint); }
body.office .linkbtn.danger:hover { color: #a33; }

body.office td.right { text-align: right; white-space: nowrap; }
body.office td.right form.inline { display: inline-flex; align-items: center; gap: 4px; margin-left: 10px; }
body.office input.tiny { width: 8.5em; font-size: 0.8rem; padding: 4px 7px; }

/* ---------------------------------------------------------------------------
 * Key dates
 * ---------------------------------------------------------------------------
 * Colour carries urgency here and nowhere else in this application, which is
 * what makes it work: a page where four things are coloured has no emphasis
 * left to spend. Overdue is the only red in the office.
 */
body.office h2.bucket { display: flex; align-items: baseline; gap: 8px; }
body.office h2.bucket::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--ink-faint);
  flex: none;
}
body.office h2.bucket.overdue::before { background: #a33; }
body.office h2.bucket.due::before     { background: var(--warn, #9a5b25); }
body.office h2.bucket.soon::before    { background: var(--accent); }
body.office h2.bucket.later::before   { background: var(--line); }

/* The one-sentence verdict at the top of a key date. Same component as the
 * overview's compartment note, tinted by how much trouble the date is in. */
body.office .assert.overdue {
  border-left-color: #a33;
  background: #fdf1f1;
  color: var(--ink);
}
body.office .assert.due {
  border-left-color: var(--warn, #9a5b25);
  background: var(--warn-soft, #fbf1e7);
  color: var(--ink);
}
body.office .assert.soon {
  border-left-color: var(--accent);
  background: var(--accent-soft);
  color: var(--ink);
}
/* `later` keeps the default treatment — a date eight months out is
 * information, not a warning, and styling it like one is how a list becomes
 * uniformly urgent and therefore silent. */

/* A short statement of fact at the top of a page — used by the overview to say
 * that the compartment is real, which is the only claim Phase 0 can make. */
body.office .assert {
  border-left: 3px solid var(--good, #3d6b4a);
  background: var(--good-soft, #edf3ee);
  padding: 12px 16px;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin-bottom: 22px;
}