/* ══ THE ORGANISATION DASHBOARD ═════════════════════════════  11 Oct 2026 (rp91) ══
   organisation.html. The frame is the trade dashboard's own (hyyryn-dash-
   frame-a.css and -b.css, measured out of it) and the parts inside the tabs
   are the organisation page's (hyyryn-organisation.css, .og). This holds only
   what an organisation adds: its mark in the round, the grid of homes and
   their certificates, the lines of what happened lately, the certificates
   under each home, and the job rows. Values are the frame's tokens. */

[hidden] { display: none !important; }
.og-dash { background: none; }
.og-dash .og-msg { margin: 0 0 30px; }
.og-dash > .st-sec { margin: 0 0 34px; }
.og-dash .dash-tab-panel { outline: none; scroll-margin-top: 96px; }
.og-dash .dash-tab-panel:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 8px; }
.og-dash .dash-tab-panel > .st-sec + .st-sec { margin-top: 30px; }

/* the organisation's mark in the round: its initials, as a trade with no
   photograph gets them (the rail's monogram, at the cover's size) */
.og-mono { display: grid; place-items: center; background: var(--cream-2); }
.og-mono span { font-family: var(--serif-display); font-size: calc(var(--av) * .36); line-height: 1; letter-spacing: .02em; color: var(--navy); }

/* the figures under the name: a certificate already run out is said in red */
.ov-figs.is-late #ogCerts, .ov-figs.is-late #ogCertsW { color: var(--danger-ink); }

/* the head's main button is the navy one, as List a service is on the trade's */
.ov-acts .og-act-main { background: var(--navy); color: var(--cream); box-shadow: inset 0 0 0 1px var(--navy), 0 1px 2px rgba(10,22,40,.14), 0 12px 24px -12px rgba(10,22,40,.45); }
.ov-acts .og-act-main:hover, .ov-acts .og-act-main:focus-visible { background: linear-gradient(rgb(255,255,255) 0%, rgb(252,251,248) 58%, rgb(244,241,232) 100%); color: var(--navy); }

/* the side panel: the organisations this account is part of */
.rail-orgs { display: grid; gap: 2px; margin-bottom: 12px; }
.rail-orgs-k { margin: 0 0 6px; font-family: var(--sans); font-size: 9.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.rail-orgs a { padding: 7px 10px; font-family: var(--sans); font-size: 13px; color: var(--navy); text-decoration: none; border-radius: 6px; }
.rail-orgs a:hover { background: var(--cream-2); }
.rail-orgs a[aria-current] { font-weight: 600; box-shadow: inset 2px 0 0 var(--navy); }

/* ── THE OVERVIEW ── */
.og-dash .og-status { margin-bottom: clamp(26px, 2.6vw, 38px); }
.og-dash .st-v { white-space: nowrap; }

/* every home: a grid a landlord reads across, home by home */
.og-glance-w { overflow-x: auto; margin-top: 4px; }
.og-glance-t { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: 13px; color: var(--ink, #1B2638); }
.og-glance-t th, .og-glance-t td { padding: 13px 14px 13px 0; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line); }
.og-glance-t thead th { padding-top: 4px; font-size: 9.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.og-glance-t tbody th { font-weight: 400; min-width: 180px; }
.og-glance-t tbody th a { display: block; font-weight: 500; color: var(--navy); text-decoration: none; }
.og-glance-t tbody th a:hover { text-decoration: underline; text-underline-offset: 3px; }
.og-glance-t tbody th span { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.og-glance-t td.n a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.og-glance-t tbody tr:last-child > * { border-bottom: 0; }
.og-quiet { color: var(--muted); }
.og-chip { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font-size: 12.5px; color: var(--ink, #1B2638); }
.og-chip::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.og-chip.is-due::before, .og-chip.is-soon::before { background: var(--gold-soft); }
.og-chip.is-soon { font-weight: 600; }
.og-chip.is-out { color: var(--danger-ink); font-weight: 600; }
.og-chip.is-out::before { background: var(--danger); }
.og-chip.is-none, .og-chip.is-none::before { color: var(--muted); }
.og-chip.is-none::before { background: none; box-shadow: inset 0 0 0 1.4px var(--line-2); }
.og-more { margin: 14px 0 0; font-family: var(--sans); font-size: 12.5px; }
.og-more a { color: var(--navy); }

/* what happened lately */
.og-feed-l { margin: 4px 0 0; padding: 0; list-style: none; }
.og-feed-l li { display: flex; justify-content: space-between; gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--line); font-family: var(--serif); font-size: 14.5px; line-height: 1.5; color: var(--ink, #1B2638); }
.og-feed-l li:last-child { border-bottom: 0; }
.og-feed-l .a { flex: none; font-family: var(--sans); font-size: 12px; color: var(--muted); }

/* ── HOMES: each home, and its certificates under it ── */
/* a home is one column: its name, its address, then its certificates (the
   list's two-column row is for a line with an action at its end) */
.og .og-homes > li { grid-template-columns: minmax(0, 1fr); padding: 18px 0 20px; }
.og .og-homes > li > .t, .og .og-homes > li > .s { grid-column: 1; }
.og .og-certs { grid-column: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px 14px; margin: 12px 0 0; padding: 0; list-style: none; border: 0; }
.og .og-certs li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 2px; padding: 10px 12px 10px 28px; border: 1px solid var(--line); border-radius: 3px; background: #FFFDF8; font-family: var(--sans); font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.og .og-certs li::before { content: ''; position: absolute; left: 11px; top: 15px; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.og .og-certs li b { font-weight: 500; color: var(--navy); }
.og .og-certs li.is-due::before, .og .og-certs li.is-soon::before { background: var(--gold-soft); }
.og .og-certs li.is-out { border-color: rgba(169,68,66,.35); }
.og .og-certs li.is-out::before { background: var(--danger); }
.og .og-certs li.is-out span { color: var(--danger-ink); font-weight: 500; }
.og .og-certs li.is-none::before, .og .og-certs li.is-missing::before { background: none; box-shadow: inset 0 0 0 1.4px var(--line-2); }
.og .og-certs li.is-missing { border-style: dashed; background: none; }
.og .og-certs .og-x { justify-self: start; margin-top: 4px; padding: 0; border: 0; background: none; cursor: pointer; font-family: var(--sans); font-size: 11px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.og .og-certs .og-x:hover { color: var(--navy); }
.og .og-certs .og-x:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 2px; }

/* ── JOBS ── */
.og .og-jobs .r { display: inline-flex; align-items: center; gap: 12px; }
.og .og-amt { font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--navy); font-variant-numeric: tabular-nums; }
.og .og-job:not(.is-on) .t { color: var(--muted); }

/* on a phone each home is a block: its name, then its three certificates and
   its work, each with the column's name beside it, rather than a table to
   scroll sideways */
@media (max-width: 640px) {
  .og-glance-t thead { display: none; }
  .og-glance-t, .og-glance-t tbody, .og-glance-t tr, .og-glance-t th, .og-glance-t td { display: block; width: auto; }
  .og-glance-t tr { padding: 12px 0 10px; border-bottom: 1px solid var(--line); }
  .og-glance-t tbody tr:last-child { border-bottom: 0; }
  .og-glance-t th, .og-glance-t td { padding: 0; border: 0; }
  .og-glance-t tbody th { min-width: 0; margin-bottom: 8px; }
  .og-glance-t td { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; }
  .og-glance-t td::before { content: attr(data-k); font-size: 11px; letter-spacing: .06em; color: var(--muted); }
}
@media (max-width: 720px) {
  .og-feed-l li { flex-direction: column; gap: 2px; }
  .og .og-certs { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .og-dash .dash-tab-panel { scroll-behavior: auto; }
}

/* the Overview's grid (the shared .ref-grid): the tiles keep their own place,
   the two cards an organisation adds run the full width under them */
/* a column of the shared grid can be display: contents at some widths, so the
   card itself is what takes the place in the grid */
html body #tab-earnings .ref-grid > .og-col, html body #tab-earnings .ref-grid > .og-col > .rcard { grid-column: 1 / -1; order: 5; }
html body #tab-earnings .ref-grid > .og-col--feed, html body #tab-earnings .ref-grid > .og-col--feed > .rcard { order: 6; }
html body #tab-earnings .ref-grid > .og-status { grid-column: 1 / -1; }

/* the side panel has no portrait on top here (the trade's hangs one), so its
   name starts below the button that opens it, rather than beside it */
body[data-hy-role="organisation"] .dash-rail .rail-id { padding-top: 44px; }
@media (max-width: 980px) { body[data-hy-role="organisation"] .dash-rail .rail-id { padding-top: 0; } }

/* rp106: a figure and its word are one thing. Set loose, the phone broke
   "0" from "certificates due in 60 days" and left the number alone on a line. */
.ov-figs .og-fig { white-space: nowrap; }
@media (max-width: 640px) { .ov-figs .ov-dot { display: none; } .ov-figs { column-gap: 18px; } }

/* ══ rp130, 14 Oct 2026: THE ORGANISATION PAGES, FACTS FIRST (Sir: "the organisation pages needs work") ══ */
/* Homes: the certificates fill the row and stand the same height, in the same order on every home */
.og .og-certs { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); align-items: stretch; }
.og .og-certs li { align-content: start; }
.og .og-homes .og-home-jobs, .og .og-job-go { grid-column: 1; justify-self: start; margin-top: 6px; font-family: var(--sans); font-size: 10.5px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.og .og-home-jobs:focus-visible, .og .og-job-go:focus-visible, .og .og-note a:focus-visible { outline: 3px solid var(--gold-soft); outline-offset: 2px; }
/* Jobs: each says where it has got to, in a sentence the record gives, with its way in */
.og .og-jobs > li > .r { grid-row: 1 / span 4; align-self: start; padding-top: 2px; }
.og .og-job-line { grid-column: 1; margin-top: 4px; font-family: var(--serif); font-size: 14px; line-height: 1.55; color: var(--ink); max-width: 72ch; }
.og .og-job:not(.is-on) .og-job-line { color: var(--muted); }
/* a note under a list says the rule once, in the terms' words */
.og .og-note { margin: 16px 0 0; font-family: var(--serif); font-size: 13.5px; line-height: 1.6; color: var(--muted); max-width: 86ch; }
.og .og-note a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
#ogHomeNote { margin: 16px 0 0; }
/* the actions under a list sit in a row; a form, opened, takes the row's width under them */
.og .og-acts { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; margin-top: 22px; }
.og .og-acts > .og-row, .og .og-acts > .og-add { margin-top: 0; padding-top: 0; }
.og .og-acts > .og-add[open] { flex-basis: 100%; order: 9; }
@media (max-width: 720px) {
  .og .og-jobs > li { grid-template-columns: minmax(0, 1fr); }
  .og .og-jobs > li > .r { grid-column: 1; grid-row: auto; margin-top: 8px; }
}