/* ══ AN ORGANISATION'S OWN PAGE ════════════════════════════  8 Oct 2026 (rp77) ══
   organisation.html: where a landlord or an agent sets an organisation up,
   sees its plan, its homes and its people, and where Stripe sends them back
   after buying or managing a plan. organisation-join.html, where an
   invitation is accepted, uses the same parts.

   THE PARTS ARE THE SETTINGS PAGE'S. A section is the settings section (the
   pinned card with its number and tracked title), a status is the payout
   plate, facts are its two-column list, fields are its pills. They are
   copied here under .og rather than moved out of settings-tradesperson.html,
   where they are inline: moving them would touch a settled page for the sake
   of a new one (Mason: a reference supplies grammar, and the settled page is
   the reference). Values are the settings page's, measured 8 Oct 2026.

   The head is the company pages' navy band (hyyryn-company.css), without a
   photograph: this is a working page, and the photograph belongs to the
   pages that introduce Hyyryn. */
.og {
  --code-money-bg: rgba(15,90,79,.075); --code-wait-bg: rgba(131,99,44,.085); --code-stop-bg: rgba(169,68,66,.075);
  --danger: #A94442; --danger-ink: #7A3230; --gold-ink: #5D4620; --muted: #636976; --cream-2: #F3EFE4;
  --stone: cubic-bezier(.16,1,.3,1); --ease: cubic-bezier(.25,.1,.25,1);
  background: var(--cream, #FAF8F3);
}
.og-head { background: var(--navy, #0A1628); color: #F3EEE3; margin-top: calc(-1 * var(--bar, 74px)); padding: calc(var(--bar, 74px) + clamp(28px, 4vw, 56px)) var(--gut-r, 40px) clamp(40px, 5vw, 64px) var(--gut-l, 40px); }
.og-head .co-in { max-width: 1040px; }
.og-head .co-crumb a { color: inherit; text-decoration: none; }
.og-h1 { margin: 14px 0 0; font-family: var(--serif-display, 'Libre Caslon Display', Georgia, serif); font-weight: 400; font-size: clamp(34px, 4vw, 54px); line-height: 1.08; color: #F3EEE3; }
.og-lede { margin: 16px 0 0; max-width: 60ch; font-family: var(--serif, 'Libre Caslon Text', Georgia, serif); font-size: 16px; line-height: 1.65; color: rgba(243,238,227,.82); }
.og-counts { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 26px 0 0; padding: 0; list-style: none; }
.og-counts li { font-family: var(--sans, 'Inter', sans-serif); font-size: 10.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: rgba(243,238,227,.7); }
.og-counts b { display: block; margin-bottom: 4px; font-family: var(--serif-display, 'Libre Caslon Display', Georgia, serif); font-size: 30px; font-weight: 400; letter-spacing: 0; text-transform: none; color: #F3EEE3; }
.og-pick { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.og-pick a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 999px; font-family: var(--sans, 'Inter', sans-serif); font-size: 10.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: #F3EEE3; text-decoration: none; box-shadow: inset 0 0 0 1px rgba(243,238,227,.32); }
.og-pick a[aria-current] { background: #F3EEE3; color: var(--navy, #0A1628); box-shadow: none; }

.og-body { max-width: 1040px; margin: 0 auto; padding: clamp(40px, 5vw, 64px) var(--gut-r, 40px) 110px var(--gut-l, 40px); display: grid; gap: 36px; }
.og-msg { padding: 22px 24px; border: 1px solid var(--line, #E6E0D0); border-radius: 4px; background: #FFFDF8; font-family: var(--serif, 'Libre Caslon Text', Georgia, serif); font-size: 15.5px; line-height: 1.65; color: var(--ink, #1B2638); }
.og-msg h2 { margin: 0 0 8px; font-family: var(--serif-display, 'Libre Caslon Display', Georgia, serif); font-size: 26px; font-weight: 400; color: var(--navy, #0A1628); }
.og-msg .st-btn { margin-top: 16px; }

/* the settings section, copied */
.og .st-sec { position: relative; background: var(--cream, #FAF8F3); border: 1px solid var(--line, #E6E0D0); border-radius: 4px; padding: 26px clamp(18px, 2.2vw, 30px) 22px;
  box-shadow: 0 1px 1px rgba(10,22,40,.035), 0 4px 9px -6px rgba(10,22,40,.18), 0 18px 30px -22px rgba(10,22,40,.45); scroll-margin-top: 110px; }
.og .st-sec::before { content: ''; position: absolute; z-index: 4; top: -11px; left: 50%; margin-left: -11px; width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle at 33% 28%, #46536A 0 18%, var(--navy, #0A1628) 52%, #04090F 100%); box-shadow: 0 1px 0 rgba(250,248,243,.22), 0 5px 8px -3px rgba(10,22,40,.34); }
.og .st-sec::after { content: ''; position: absolute; z-index: 5; top: -7.5px; left: 50%; margin-left: -7px; width: 6px; height: 5px; border-radius: 50%; background: rgba(250,248,243,.62); rotate: -24deg; }
.og .st-sec-h { display: flex; align-items: baseline; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line-2, #D8CFB8); margin-bottom: 22px; }
.og .st-n { flex: none; font-family: var(--sans, 'Inter', sans-serif); font-size: 11px; font-weight: 600; letter-spacing: .14em; color: var(--muted); font-variant-numeric: tabular-nums; }
.og .st-sec-h h2 { margin: 0; font-family: var(--sans, 'Inter', sans-serif); font-weight: 400; font-size: 21px; line-height: 1.3; letter-spacing: .16em; text-transform: uppercase; color: var(--navy, #0A1628); }
.og .st-sec-h p { margin: 4px 0 0; font-family: var(--serif, 'Libre Caslon Text', Georgia, serif); font-size: 14px; line-height: 1.55; color: var(--muted); }

/* fields */
.og .st-rows { display: grid; gap: 18px; }
.og .st-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.og .st-f { min-width: 0; }
.og .st-f > label, .og .st-lab { display: block; margin-bottom: 7px; font-family: var(--sans, 'Inter', sans-serif); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: #6B7280; }
.og .st-f input[type=text], .og .st-f input[type=email], .og .st-f input[type=date], .og .st-f select {
  width: 100%; box-sizing: border-box; margin: 0; padding: 12px 18px; font-family: var(--sans, 'Inter', sans-serif); font-size: 15px; line-height: 1.4; color: var(--ink, #1B2638);
  background: #fff; border: 1px solid #D0CCC4; border-radius: 999px; transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease); }
.og .st-f select { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1628' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") right 18px center / 14px no-repeat; }
.og .st-f input::placeholder { color: #9CA3AF; opacity: 1; }
.og .st-f input:focus, .og .st-f select:focus { outline: none; border-color: var(--green, #0F5A4F); box-shadow: 0 0 0 3px rgba(15,90,79,.14); }
.og .st-f input[aria-invalid=true] { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(169,68,66,.12); }
.og .st-hint { margin-top: 7px; font-family: var(--sans, 'Inter', sans-serif); font-size: 12.5px; line-height: 1.5; color: #6B7280; }
.og .st-hint[data-state=ok] { color: var(--green, #0F5A4F); }
.og .st-hint[data-state=bad] { color: var(--danger); }
.og fieldset.st-f { border: 0; margin: 0; padding: 0; }
.og .og-kinds { display: grid; gap: 10px; }
.og .og-kinds label { display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px; border: 1px solid #D0CCC4; border-radius: 14px; background: #fff; cursor: pointer; font-family: var(--serif, 'Libre Caslon Text', Georgia, serif); font-size: 15px; line-height: 1.5; color: var(--ink, #1B2638); }
.og .og-kinds label b { display: block; font-family: var(--sans, 'Inter', sans-serif); font-size: 14px; font-weight: 500; color: var(--navy, #0A1628); }
.og .og-kinds input { margin-top: 4px; accent-color: var(--navy, #0A1628); }
.og .og-kinds label:has(input:checked) { border-color: var(--navy, #0A1628); box-shadow: inset 0 0 0 1px var(--navy, #0A1628); }
.og .og-kinds label:has(input:focus-visible) { outline: 3px solid var(--gold-soft, #D4A943); outline-offset: 2px; }

/* buttons */
.og .st-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin: 0; padding: 13px 24px; border: 0; border-radius: 999px; cursor: pointer; text-decoration: none;
  background: var(--navy, #0A1628); color: var(--cream, #FAF8F3); font-family: var(--sans, 'Inter', sans-serif); font-size: 10.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  box-shadow: 0 1px 2px rgba(10,22,40,.14), 0 12px 24px -12px rgba(10,22,40,.45); transition: background 180ms var(--ease), opacity 180ms var(--ease), transform 180ms var(--ease); }
.og .st-btn:hover { background: var(--navy-2, #152238); }
.og .st-btn:active { transform: translateY(1px); }
.og .st-btn[disabled] { background: transparent; color: #8C8778; box-shadow: inset 0 0 0 1px #D8D2C4; cursor: default; }
.og .st-btn--line { background: transparent; color: var(--navy, #0A1628); box-shadow: inset 0 0 0 1px #D0CCC4; }
.og .st-btn--line:hover { background: var(--navy, #0A1628); color: var(--cream, #FAF8F3); box-shadow: inset 0 0 0 1px var(--navy, #0A1628); }
.og .st-btn:focus-visible { outline: 3px solid var(--gold-soft, #D4A943); outline-offset: 2px; }
.og .og-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 18px; }

/* the plate, the pill and the facts */
.og .st-plate { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px 18px; align-items: center; padding: 18px 20px; border-radius: 14px; background: #fff; border: 1px solid var(--line, #E6E0D0); box-shadow: inset 3px 0 0 var(--line-2, #D8CFB8); }
.og .st-plate[data-state=on] { box-shadow: inset 3px 0 0 var(--green, #0F5A4F); }
.og .st-plate[data-state=part] { box-shadow: inset 3px 0 0 var(--gold, #83632C); }
.og .st-plate[data-state=off] { box-shadow: inset 3px 0 0 var(--danger); }
.og .st-plate-b { display: grid; place-items: center; width: 54px; height: 34px; border-radius: 6px; }
.og .st-plate-h { margin: 0; font-family: var(--sans, 'Inter', sans-serif); font-size: 15px; font-weight: 500; color: var(--navy, #0A1628); }
.og .st-plate-s { margin: 2px 0 0; font-family: var(--serif, 'Libre Caslon Text', Georgia, serif); font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.og .st-plate .st-btn { grid-column: 3; grid-row: 1; }
.og .st-plate-h .st-pill { margin-left: 10px; vertical-align: 2px; }
.og .st-pill { display: inline-block; padding: 4px 10px; border-radius: 999px; font-family: var(--sans, 'Inter', sans-serif); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; background: var(--cream-2); color: var(--muted); }
.og .st-plate[data-state=on] .st-pill { background: var(--code-money-bg); color: var(--green, #0F5A4F); }
.og .st-plate[data-state=part] .st-pill { background: var(--code-wait-bg); color: var(--gold-ink); }
.og .st-plate[data-state=off] .st-pill { background: var(--code-stop-bg); color: var(--danger-ink); }
.og .st-facts { display: grid; gap: 0; margin: 20px 0 0; }
.og .st-facts > div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 6px 24px; padding: 14px 0; border-top: 1px solid var(--line, #E6E0D0); }
.og .st-facts dt { font-family: var(--sans, 'Inter', sans-serif); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: #6B7280; padding-top: 3px; }
.og .st-facts dd { margin: 0; font-family: var(--serif, 'Libre Caslon Text', Georgia, serif); font-size: 14.5px; line-height: 1.6; color: var(--ink, #1B2638); }
.og .st-call { scroll-margin-top: 130px; }

/* rp85: spacing above a sub-heading, and a pack's downloads */
.og .og-gap { margin-top: 22px; }
.og-list .r .st-btn + .st-btn { margin-left: 8px; }
.og-list .oj-confirm, .og-list .og-confirm { grid-column: 1 / -1; margin-top: 10px; padding: 14px 16px; border: 1px solid var(--line, #E6E0D0); border-radius: 14px; background: #fff; box-shadow: inset 3px 0 0 var(--danger, #A94442); font-family: var(--serif, 'Libre Caslon Text', Georgia, serif); font-size: 14px; line-height: 1.55; }

/* rp86: approvals and the contractor watch. A decision box takes the confirm
   box's shape; its edge says what it does (green to approve or confirm, the
   stop colour to refuse or query, plain to set a limit). Pills say a state in
   words, so colour is never the only sign. */
.og-list .og-confirm[data-tone=go] { box-shadow: inset 3px 0 0 var(--green, #0F5A4F); }
.og-list .og-confirm[data-tone=plain] { box-shadow: inset 3px 0 0 var(--line-2, #D8CFB8); }
.og-list .og-confirm > p { margin: 0; }
.og-list .og-confirm .st-f { margin-top: 12px; }
.og-list .og-confirm .og-row { margin-top: 12px; }
.og .st-pill[data-state=on] { background: var(--code-money-bg); color: var(--green, #0F5A4F); }
.og .st-pill[data-state=wait] { background: var(--code-wait-bg); color: var(--gold-ink); }
.og .st-pill[data-state=off] { background: var(--code-stop-bg); color: var(--danger-ink); }
.og-list .r .st-pill + .st-btn, .og-list .r .st-pill + .og-rec { margin-left: 10px; }
.og-list .og-lines { grid-column: 1; margin: 6px 0 0; padding: 0 0 0 16px; list-style: disc; border: 0; }
.og-list .og-lines li { display: list-item; padding: 2px 0; border: 0; font-family: var(--serif, 'Libre Caslon Text', Georgia, serif); font-size: 13.5px; line-height: 1.5; color: var(--ink, #1B2638); }
.og-list .og-rec { font-family: var(--sans, 'Inter', sans-serif); font-size: 10.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--navy, #0A1628); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.og-list .og-rec:focus-visible { outline: 3px solid var(--gold-soft, #D4A943); outline-offset: 2px; }
.og .og-check { display: flex; gap: 12px; align-items: flex-start; font-family: var(--serif, 'Libre Caslon Text', Georgia, serif); font-size: 14.5px; line-height: 1.55; color: var(--ink, #1B2638); cursor: pointer; }
.og .og-check input { flex: none; width: 16px; height: 16px; margin: 4px 0 0; accent-color: var(--navy, #0A1628); }
.og .og-check input:focus-visible { outline: 3px solid var(--gold-soft, #D4A943); outline-offset: 2px; }
#wcSet .st-f { max-width: 420px; }

/* lists: homes and people */
.og-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line, #E6E0D0); }
.og-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 18px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line, #E6E0D0); }
.og-list .t { font-family: var(--sans, 'Inter', sans-serif); font-size: 15px; font-weight: 500; color: var(--navy, #0A1628); }
.og-list .s { grid-column: 1; font-family: var(--serif, 'Libre Caslon Text', Georgia, serif); font-size: 14px; line-height: 1.5; color: var(--muted); }
.og-list .r { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.og-empty { margin: 0; padding: 16px 0; font-family: var(--serif, 'Libre Caslon Text', Georgia, serif); font-size: 15px; color: var(--muted); border-top: 1px solid var(--line, #E6E0D0); border-bottom: 1px solid var(--line, #E6E0D0); }
.og-add { margin-top: 22px; padding-top: 4px; }
.og-add > summary { cursor: pointer; display: inline-flex; list-style: none; }
.og-add > summary::-webkit-details-marker { display: none; }
.og-add[open] > summary { margin-bottom: 18px; }

@media (max-width: 720px) {
  .og .st-two { grid-template-columns: minmax(0, 1fr); }
  .og-list li:has(.r .st-btn) { grid-template-columns: minmax(0, 1fr); }
  .og-list li:has(.r .st-btn) .r { grid-column: 1; grid-row: auto; margin-top: 10px; }
  /* rp86: in Approvals and the watch a row's state goes under its words on a phone, so
     the words keep the width (a pill beside them left a column a word wide) */
  #approvals .og-list > li, #watch .og-list > li { grid-template-columns: minmax(0, 1fr); }
  #approvals .og-list > li > .r, #watch .og-list > li > .r { grid-column: 1; grid-row: auto; margin-top: 10px; }
  .og .st-plate { grid-template-columns: auto minmax(0, 1fr); }
  .og .st-plate .st-btn { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
  .og .st-plate-h .st-pill { display: table; margin: 6px 0 0; }
  .og .st-facts > div { grid-template-columns: minmax(0, 1fr); }
  .og-head { padding-left: 20px; padding-right: 20px; }
  .og-body { padding-left: 16px; padding-right: 16px; }
}
@media (prefers-reduced-motion: reduce) { .og .st-btn, .og .st-f input, .og .st-f select { transition: none; } }

/* ── THE INVITATION ON THE ORGANISATION'S COVER (rp106, 12 Oct 2026) ──────────
   organisation-join.html opened on flat navy, the one page of the organisation's
   three without a photograph. It now stands on the organisation dashboard's own
   cover (a home and its keys) under the company pages' navy fall and gold rule,
   so the invitation shows the place it leads to. */
.og-cover { position: relative; isolation: isolate; overflow: hidden; background-color: var(--navy, #0A1628); }
.og-cover-ph { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.og-cover::before { content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(10,22,40,.95) 0%, rgba(10,22,40,.86) 38%, rgba(10,22,40,.58) 70%, rgba(10,22,40,.42) 100%),
              linear-gradient(0deg, rgba(10,22,40,.6) 0%, rgba(10,22,40,0) 55%); }
.og-cover::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--gold-soft, #D4A943) 0%, rgba(212,169,67,.55) 40%, rgba(212,169,67,0) 85%); }
.og-cover .og-h1 { text-shadow: 0 4px 26px rgba(6,10,18,.45); }
@media (max-width: 640px) { .og-cover::before { background: linear-gradient(180deg, rgba(10,22,40,.82) 0%, rgba(10,22,40,.9) 100%); } }
@media (forced-colors: active) { .og-cover-ph, .og-cover::before, .og-cover::after { display: none; } }
/* rp106: a list straight under a section head draws no second rule of its own;
   the head's gold line is the one rule there */
.og .st-sec-h + .st-facts > div:first-child { border-top: 0; padding-top: 0; }

/* ── rp130, 14 Oct 2026: WHAT HYYRYN CHECKED, ON THE WATCH AND BESIDE A PRICE TO APPROVE ──
   Each check is a line with its state in words (in date, runs out on, ran out on), and a mark
   beside it: green in date, gold running out within 30 days, the stop colour run out. */
.og-list .og-checks { grid-column: 1; display: grid; gap: 6px; margin: 10px 0 2px; }
.og-list .og-checks-k { font-family: var(--sans, 'Inter', sans-serif); font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #6B7280; }
.og-list .og-checks-l { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 0; padding: 0; list-style: none; border: 0; }
.og-list .og-checks-l li { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px 5px 9px; border: 1px solid var(--line, #E6E0D0); border-radius: 999px; background: #FFFDF8;
  font-family: var(--sans, 'Inter', sans-serif); font-size: 12px; line-height: 1.35; color: var(--ink, #1B2638); }
.og-list .og-checks-l li::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--green, #0F5A4F); }
.og-list .og-checks-l li[data-state=wait]::before { background: var(--gold-soft, #D4A943); }
.og-list .og-checks-l li[data-state=off] { border-color: rgba(169,68,66,.4); color: var(--danger-ink); }
.og-list .og-checks-l li[data-state=off]::before { background: var(--danger); }
.og-list .og-checks-l li[data-state=muted] { color: var(--muted); border-style: dashed; }
.og-list .og-checks-l li[data-state=muted]::before { background: none; box-shadow: inset 0 0 0 1.4px var(--line-2, #D8CFB8); }
.og-list .og-warn { grid-column: 1; margin: 8px 0 0; padding: 10px 14px; border-radius: 10px; background: var(--code-stop-bg); box-shadow: inset 3px 0 0 var(--danger);
  font-family: var(--serif, 'Libre Caslon Text', Georgia, serif); font-size: 14px; line-height: 1.5; color: var(--danger-ink); }
@media (forced-colors: active) { .og-list .og-checks-l li::before { forced-color-adjust: none; } }
/* rp130: what a role may do, under the person */
.og-list .og-may { font-size: 13px; color: #6B7280; }
/* rp130: a list that opens a section draws no rule above its first line: the card's edge is the rule
   there (People, Homes and the watch had a lone line under an empty band) */
.og .st-sec > .og-list:first-child, .og .st-sec > [hidden]:first-child + .og-list { border-top: 0; }
.og .st-sec > .og-list:first-child > li:first-child, .og .st-sec > [hidden]:first-child + .og-list > li:first-child { padding-top: 2px; }