/* =============================================================================
   hyyryn-settings-ground.css                                  19 Oct 2026 (rp158)

   SETTINGS AND YOUR CHECKS, ON THEIR OWN NIGHT.
   Sir, 19 Oct 2026, on the trade's settings: "remove the pins unless you think
   it's needed for each section and put an image in the background, blur it, and
   make sure the image matches the theme of the page ... try improve the
   containers for each section and how each section shows information ... the
   stripe section has the stereotypical AI mark where it has a colour on the side
   of the container." Chosen with him: both settings pages and Your checks; the
   page's own night house; the portrait settles, then reacts (hyyryn-hang.js).

   Loaded last on settings-tradesperson, settings-homeowner and
   verification-tradesperson, which carry class="sg" on <html> (so nothing here
   reaches another page, and nothing flashes before it applies).

     1. the ground: the cover's own photograph, blurred ONCE into a 3.5 KB file
        (assets/ground-night.webp, baked rather than filtered: a live blur on a
        fixed full-screen layer is the most expensive thing a phone can be asked
        to paint), fixed behind the page under a navy veil that deepens towards
        the footer, so the page arrives at the footer's colour (Mason 09.5);
     2. the pins go: a pin says a sheet is held to a wall, and these are cards
        standing on a picture. The one pin kept is the hanging portrait's,
        because its cords hang from it;
     3. the containers: one card, one radius (20), one depth for a dark ground;
        the section's number on a navy disc in the cover's gold; a gold hairline
        that fades instead of a rule;
     4. no colour on the side of anything: a state is the pill's colour, an icon
        and a faint tint across the whole plate, never a stripe;
     5. facts read as facts: each with its own mark; rows of fact and action are
        tiles; the notices grid is quieter;
     6. motion, productive and short: each card rises in as it is reached
        (html.sg-motion, set by hyyryn-settings-ground.js only where motion is
        allowed); the portrait's swing is the page's one expressive moment.
   ============================================================================= */

/* ---- 1. the ground ------------------------------------------------------- */
html.sg { background: #0E1A2E; }
html.sg body { background: transparent; }
html.sg body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(120% 70% at 72% 18%, rgba(212,169,67,.10), rgba(212,169,67,0) 60%),
    linear-gradient(180deg, rgba(10,22,40,.34) 0%, rgba(10,22,40,.52) 46%, rgba(10,22,40,.80) 100%),
    url(ground-night.webp) 58% 40% / cover no-repeat,
    #0E1A2E;
}
/* the masthead and the side panel keep the cream they have on every other
   page. On a drawer page the masthead's glass is a pseudo-element (::before),
   thin (.38) because cream was behind it; over the night it turned the
   wordmark and the figure grey, and anything that reads the ground by walking
   up the elements (the balance's own ink, the gate's contrast check) went
   past it to the night and judged the masthead dark. Here the masthead
   carries its own near-solid cream, so the ground under its words is the
   ground every reader of it finds. With both near-solid, the masthead and an
   open side panel meet without the doubled-glass seam that put the glass on
   ::before in the first place. */
html.sg.has-drawer header.topbar {
  background: rgba(250,248,243,.96) !important;
  -webkit-backdrop-filter: blur(12px) !important; backdrop-filter: blur(12px) !important;
}
html.sg.has-drawer header.topbar::before { display: none; }
html.sg .hy-rail-glass { background: rgba(250,248,243,.95); }

/* the cover keeps its own crisp photograph, and now meets the cards' radius */
html.sg .st-cover { border-radius: 22px; box-shadow: 0 30px 60px -36px rgba(0,0,0,.7); }
html.sg .st-cover::after { display: none; }

/* the night meets the footer without a seam: the body's own background (which
   paints over the ground and under every card) fades to the footer's navy over
   the 220px above it. The footer's height comes from hyyryn-settings-ground.js
   (--sg-foot); the fallback is its height at a desktop width. (A fade drawn by
   the footer itself painted over the last card: the footer is z-index 2.) */
html.sg body {
  background: linear-gradient(180deg, rgba(10,22,40,0), var(--navy, #0A1628) 220px)
              left bottom / 100% calc(var(--sg-foot, 480px) + 220px) no-repeat;
}

/* words that stand on the ground itself (the homeowner's head, a breadcrumb) */
html.sg .sw-head .k, html.sg .dash-body > .crumb, html.sg .dash-body > .crumb a,
html.sg .sw-page ~ .crumb, html.sg .crumb-on-ground { color: rgba(250,248,243,.78); }
html.sg .sw-head .h-lg { color: #FAF8F3; }
html.sg .sw-lead { color: rgba(250,248,243,.86); }

/* ---- 2. the pins go ------------------------------------------------------ */
html.sg .st-sec::before, html.sg .st-sec::after,
html.sg .vf-card::before, html.sg .vf-card::after { display: none; }
html.sg .sw-board > .pin { display: none; }

/* ---- 3. the containers --------------------------------------------------- */
html.sg .st-sec,
html.sg .sw-course,
html.sg .vf-card {
  background: #FAF8F3;                 /* solid: a muted label on cream .975 over the night measured 4.35 */
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 20px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 2px 4px rgba(4,9,15,.16),
    0 30px 60px -30px rgba(4,9,15,.68);
}
html.sg .st-sec { padding: 30px clamp(20px,2.4vw,34px) 26px; }
html.sg .st-main { gap: 28px; }

html.sg .st-sec-h { align-items: center; gap: 16px; border-bottom: 0; padding-bottom: 18px; margin-bottom: 24px; position: relative; }
html.sg .st-sec-h::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, rgba(212,169,67,.65), rgba(212,169,67,.18) 55%, rgba(212,169,67,0));
}
html.sg .st-n {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #1C2A44, #0A1628 70%);
  color: #E2BE6A; font-size: 11.5px; letter-spacing: .06em;
  box-shadow: 0 0 0 4px rgba(212,169,67,.13), 0 6px 14px -8px rgba(10,22,40,.6);
}
html.sg .st-sec-h h2 { font-size: 20px; }

/* the photograph well and the save row */
html.sg .st-photo { border-radius: 16px; border-color: rgba(10,22,40,.08);
  background: linear-gradient(135deg, #F3EEE3, #EFE8DA); }
html.sg .st-save { border-top: 0; position: relative; }
html.sg .st-save::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, rgba(10,22,40,0), rgba(10,22,40,.12) 20%, rgba(10,22,40,.12) 80%, rgba(10,22,40,0)); }

/* the card she reads, on the same footing */
html.sg .pv { border-radius: 20px; border-color: rgba(255,255,255,.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 2px 4px rgba(4,9,15,.16), 0 30px 60px -30px rgba(4,9,15,.68); }

/* ---- 4. no colour on the side of anything ------------------------------- */
html.sg .st-plate {
  border: 1px solid rgba(10,22,40,.1); border-radius: 16px; background: #fff; padding: 18px 20px;
  box-shadow: 0 1px 2px rgba(10,22,40,.05), 0 12px 24px -18px rgba(10,22,40,.4);
  transition: background-color 420ms ease, border-color 420ms ease;
}
html.sg .st-plate[data-state=on]   { background: #F3F8F6; border-color: rgba(15,90,79,.24); }
html.sg .st-plate[data-state=part] { background: #FBF6EA; border-color: rgba(176,138,62,.3); }
html.sg .st-plate[data-state=off]  { background: #FBF1F0; border-color: rgba(169,68,66,.26); }
html.sg .st-plate.st-call.is-called { box-shadow: 0 0 0 8px rgba(212,169,67,.12); }
html.sg .st-plate-b { width: 48px; height: 48px; border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 6px 14px -8px rgba(99,91,255,.7); }
html.sg .st-plate-b--rtw { box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 6px 14px -8px rgba(10,22,40,.7); }
/* the pill carries the state, with its own mark */
html.sg .st-plate .st-pill { display: inline-flex; align-items: center; gap: 6px; }
html.sg .st-plate .st-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; }
html.sg .st-plate[data-state=unknown] .st-pill::before { animation: sgBreath 1.4s ease-in-out infinite; }
@keyframes sgBreath { 50% { opacity: .25; } }

/* the five posts on Your checks: a dot says the state, not a bar across the top */
html.sg .vf-posts { gap: 10px; margin-bottom: 8px; border: 0; border-radius: 0; background: transparent; overflow: visible; }
html.sg .vf-post { border: 1px solid rgba(255,255,255,.5); border-radius: 16px; background: #FAF8F3;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 20px 40px -26px rgba(4,9,15,.6); padding: 16px 18px; }
html.sg .vf-post:first-child { border-left: 1px solid rgba(255,255,255,.5); }
html.sg .vf-post-k { display: flex; align-items: center; gap: 7px; }
html.sg .vf-post-k::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #C8BFA0; }
html.sg .vf-post[data-state=on] .vf-post-k::before { background: var(--green, #0F5A4F); box-shadow: 0 0 0 3px rgba(15,90,79,.14); }
html.sg .vf-post[data-state=part] .vf-post-k::before { background: var(--gold, #B08A3E); box-shadow: 0 0 0 3px rgba(176,138,62,.16); }
html.sg .vf-post[data-state=off] .vf-post-k::before { background: var(--danger, #A94644); box-shadow: 0 0 0 3px rgba(169,68,66,.14); }
@media (max-width:900px) { html.sg .vf-post:nth-child(odd) { border-left: 1px solid rgba(255,255,255,.5); } }

/* the homeowner's ledger ("What Hyyryn stands behind"): a dot, not a bar down the side */
html.sg .sw-led-r { grid-template-columns: 10px 46px 1fr; }
html.sg .sw-led-b { align-self: center; width: 8px; height: 8px; border-radius: 50%; }
html.sg .sw-led-r.is-checked .sw-led-b { box-shadow: 0 0 0 3px rgba(15,90,79,.14); }
html.sg .sw-led-r.is-held .sw-led-b { box-shadow: 0 0 0 3px rgba(10,22,40,.12); }
html.sg .sw-led-r.is-waiting .sw-led-b { box-shadow: 0 0 0 3px rgba(176,138,62,.16); }

/* ---- 5. facts, rows and notices ------------------------------------------ */
html.sg .st-facts { gap: 10px; margin-top: 20px; }
html.sg .st-facts > div { grid-template-columns: 42px minmax(0,1fr); gap: 3px 16px; padding: 16px 18px;
  border: 0; border-radius: 16px; background: #F3EEE3; align-items: start; }
html.sg .st-facts > div::before {
  content: ''; grid-row: 1 / span 2; width: 42px; height: 42px; border-radius: 13px;
  background: var(--sg-ico, none) center / 20px no-repeat, linear-gradient(160deg, #1C2A44, #0A1628);
  box-shadow: 0 6px 14px -8px rgba(10,22,40,.6);
}
html.sg .st-facts dt { grid-column: 2; padding-top: 2px; color: var(--muted, #636976); }   /* 4.76 on the tile; #6B7280 was 4.18 */
html.sg .st-facts dd { grid-column: 2; }
/* each fact its own mark (Lucide, ISC, drawn in the cover's gold); a fact without one of
   its own gets the quiet "i", never the warning mark (the plan's facts carried "!" on preview) */
html.sg .st-facts > div { --sg-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2BE6A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E"); }
html.sg #money .st-facts > div:nth-child(1) { --sg-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2BE6A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='19' x2='5' y1='5' y2='19'/%3E%3Ccircle cx='6.5' cy='6.5' r='2.5'/%3E%3Ccircle cx='17.5' cy='17.5' r='2.5'/%3E%3C/svg%3E"); }
html.sg #money .st-facts > div:nth-child(2) { --sg-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2BE6A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M16 2v4'/%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='m9 16 2 2 4-4'/%3E%3C/svg%3E"); }
html.sg #money .st-facts > div:nth-child(3) { --sg-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2BE6A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }
/* the plan's two standing facts: the fee (the same mark as Payouts' fee) and an equal place in results (a balance) */
html.sg #plan > .st-facts:last-of-type > div:nth-child(1) { --sg-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2BE6A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='19' x2='5' y1='5' y2='19'/%3E%3Ccircle cx='6.5' cy='6.5' r='2.5'/%3E%3Ccircle cx='17.5' cy='17.5' r='2.5'/%3E%3C/svg%3E"); }
html.sg #plan > .st-facts:last-of-type > div:nth-child(2) { --sg-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2BE6A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z'/%3E%3Cpath d='m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z'/%3E%3Cpath d='M7 21h10'/%3E%3Cpath d='M12 3v18'/%3E%3Cpath d='M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2'/%3E%3C/svg%3E"); }

html.sg .st-list { gap: 10px; }
html.sg .st-row { padding: 16px 18px; border: 1px solid rgba(10,22,40,.09); border-radius: 16px; background: #fff;
  transition: border-color 220ms ease, box-shadow 220ms ease; }
html.sg .st-row:first-child { padding-top: 16px; }
html.sg .st-row:last-child { padding-bottom: 16px; border-bottom: 1px solid rgba(10,22,40,.09); }
@media (hover: hover) {
  html.sg .st-row:hover { border-color: rgba(10,22,40,.2); box-shadow: 0 12px 22px -18px rgba(10,22,40,.5); }
}

html.sg .st-grid-n { border-collapse: separate; border-spacing: 0; }
html.sg .st-grid-n td { border-top-color: rgba(10,22,40,.07); transition: background-color 180ms ease; }
html.sg .st-grid-n td:first-child { padding-left: 10px; }
html.sg .st-grid-n th:first-child { padding-left: 10px; }
@media (hover: hover) { html.sg .st-grid-n tbody tr:hover td { background: rgba(10,22,40,.025); } }
html.sg .st-tick i { border-radius: 7px; }

/* the homeowner's courses, on the same card */
html.sg .sw-course { padding: clamp(22px,2.4vw,32px); margin-bottom: 26px; overflow: hidden; }
html.sg .sw-board { filter: drop-shadow(0 30px 40px rgba(4,9,15,.45)); }

/* ---- on a phone ----------------------------------------------------------- */
@media (max-width: 640px) {
  /* the number sits over the title, so the title and its line have the card's
     whole width instead of the width left beside a disc */
  html.sg .st-sec-h { flex-direction: column; align-items: flex-start; gap: 12px; }
  html.sg .st-n { width: 34px; height: 34px; font-size: 10.5px; }
@media (max-width: 760px) { html.sg .st-n { font-size: 12px; } }  /* rp200 phone floor, was 10.5px */
  html.sg .st-sec { padding: 24px 18px 20px; border-radius: 18px; }
  html.sg .st-facts > div { grid-template-columns: 36px minmax(0,1fr); gap: 3px 14px; padding: 14px; }
  html.sg .st-facts > div::before { width: 36px; height: 36px; border-radius: 11px; background-size: 18px, auto; }
  /* a homeowner's row: what it is and why it matters across the width, its
     state and its button under them, as the page's own phone rule meant
     ("what has to drop is the state word and the button beside it"). That rule
     names column 2, which was the words' column when a 3px bar was column 1;
     the bar went, so column 2 became the side column and the words were left
     106px wide. Column 1 is the words' column now. A switch stays on its line. */
  html.sg .sw-f > .sw-fs, html.sg .sw-f > .sw-fs-act { grid-column: 1; justify-self: start; justify-content: flex-start; }
  html.sg .sw-course { border-radius: 18px; }
}

/* ---- 6. motion ------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  html.sg-motion .st-sec, html.sg-motion .sw-course, html.sg-motion .vf-post, html.sg-motion .st-side .pv {
    transition: opacity 560ms cubic-bezier(.2,.7,.2,1), transform 720ms cubic-bezier(.2,.7,.2,1),
                box-shadow 320ms ease;
  }
  html.sg-motion .st-sec:not(.sg-in), html.sg-motion .sw-course:not(.sg-in),
  html.sg-motion .vf-post:not(.sg-in), html.sg-motion .st-side .pv:not(.sg-in) {
    opacity: 0; transform: translateY(22px);
  }
  /* a card the keyboard reaches is there at once: focus never lands on a card
     that is still at nothing (WCAG 2.4.7) */
  html.sg-motion .st-sec:focus-within, html.sg-motion .sw-course:focus-within,
  html.sg-motion .vf-post:focus-within, html.sg-motion .st-side .pv:focus-within {
    opacity: 1; transform: none; transition: none;
  }
  html.sg-motion .st-sec.sg-in .st-facts > div { animation: sgRise 520ms cubic-bezier(.2,.7,.2,1) both; }
  html.sg-motion .st-sec.sg-in .st-facts > div:nth-child(2) { animation-delay: 70ms; }
  html.sg-motion .st-sec.sg-in .st-facts > div:nth-child(3) { animation-delay: 140ms; }
}
@keyframes sgRise { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) {
  html.sg .st-plate[data-state=unknown] .st-pill::before { animation: none; }
}

/* ---- the user's own settings, honoured ----------------------------------- */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more), (forced-colors: active) {
  html.sg body::before { background: #0E1A2E; }
}
@media print {
  html.sg, html.sg body { background: #fff; }
  html.sg body::before { display: none; }
}