/* ══ THE DASHBOARD'S FRAME, PART A ═══════════════════════════  11 Oct 2026 (rp91) ══
   MEASURED OUT OF dashboard-tradesperson.html, never written by hand: every
   rule of its first inline sheet that styles the frame (masthead, side panel,
   cover and identity row, the cover run to the edges and blurred behind the
   page, tab heads, the Overview's tiles and cards, footer), in order.
   The organisation dashboard links it before hyyryn-account.css, where the trade page
   has the sheet, so the cascade is the same. To bring it up to date after the
   trade page changes: node platform-worker/test/dash-ui/frame-css.mjs
   (the check, --check, is part of test/dash-ui/org.mjs). */
:root { --cream: #FAF8F3; --cream-2: #F3EFE4; --cream-3: #EFE8D4; --navy: #0A1628; --navy-2: #152238; --ink: #1B2638; --muted: #636976; --line: #E6E0D0; --line-2: #D8CFB8; --green: #0F5A4F; --green-2: #0B3F37; --gold: #83632C; --gold-soft: #D4A943; --danger: #A94442; --danger-ink: #7A3230; --code-stop-bg: rgba(169, 68, 66, .075); --serif: 'Libre Caslon Text', Georgia, 'Times New Roman', serif; --serif-display: 'Libre Caslon Display', 'Libre Caslon Text', Georgia, serif; --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --edge: 32px; }
* { margin: 0px; padding: 0px; box-sizing: border-box; }
:focus:not(:focus-visible) { outline: none; }
* { transition: background-color 200ms, color 200ms, border-color 200ms, box-shadow 200ms; }
html { scrollbar-width: thin; scrollbar-color: rgb(216, 207, 184) transparent; }
body { font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 14px; line-height: 1.5; color: var(--navy); background: var(--cream); -webkit-font-smoothing: antialiased; font-feature-settings: "ss01", "cv11"; }
a { color: inherit; text-decoration: none; }
.topbar { position: sticky; top: 0px; z-index: 100; background: rgba(250, 248, 243, 0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.topbar-inner { position: relative; max-width: none; height: 74px; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--edge); }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--navy); }
.brand .mark { width: 16px; height: 16px; flex: 0 0 auto; }
.brand .word { font-family: var(--sans); font-size: 12px; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: var(--navy); line-height: 1; }
.topbar-right { display: flex; gap: 18px; align-items: center; }
.hamburger { display: none; width: 40px; height: 40px; padding: 8px; flex-direction: column; justify-content: center; gap: 5px; cursor: pointer; background: none; border: none; }
.hamburger span { display: block; height: 2px; background: var(--navy); border-radius: 2px; transition: 250ms; }
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.page-wrap { position: relative; background: linear-gradient(180deg, var(--cream) 0%, rgba(243,239,228,0.4) 35%, var(--cream) 65%, rgba(239,232,212,0.3) 100%); min-height: 100vh; }
.main { max-width: 1320px; margin: 0px auto; padding: 0px 24px 48px; position: relative; z-index: 2; }
.nm-mini { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(430px, 34vw); display: flex; align-items: center; height: 40px; padding: 0px 5px 0px 15px; background: rgb(255, 255, 255); border: 1px solid var(--line); border-radius: 999px; box-shadow: rgba(10, 22, 40, 0.04) 0px 1px 2px, rgba(10, 22, 40, 0.45) 0px 10px 26px -18px; }
.nm-mini-icon { width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: var(--muted); stroke-width: 1.7; stroke-linecap: round; margin-right: 10px; }
.nm-mini input { min-width: 0px; border: 0px; background: none; outline: none; padding: 0px; font-family: var(--sans); font-size: 14px; color: var(--ink); }
.nm-mini input:focus { border: 0px; box-shadow: none; }
.nm-mini input::placeholder { color: var(--muted); opacity: 0.75; }
.nm-mini #miniQ { flex: 1 1 auto; }
.nm-mini #miniLoc { flex: 0 0 84px; }
.nm-mini-div { width: 1px; height: 18px; background: var(--line); margin: 0px 12px; flex: 0 0 auto; }
.nm-mini-go { flex: 0 0 auto; width: 32px; height: 32px; margin-left: 8px; display: grid; place-items: center; cursor: pointer; background: var(--navy); border: 0px; border-radius: 50%; transition: background 0.2s; }
.nm-mini-go svg { width: 15px; height: 15px; fill: none; stroke: var(--cream); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nm-mini-go:hover { background: rgb(14, 30, 52); }
@media (max-width: 900px) {
  .nm-mini { display: none; }
}
.dash-tabs { margin-bottom: 32px; }
.dash-tab-btn { flex: 1 1 0%; padding: 12px 8px; font-size: 14px; font-weight: 600; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--muted); background: none; border-top: none; border-right: none; border-left: none; border-image: initial; cursor: pointer; text-align: center; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: color 200ms, border-color 200ms; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.dash-tab-btn:hover { color: var(--navy); }
.dash-tab-btn.active { color: var(--green); border-bottom-color: var(--green); }
.dash-tab-btn .tab-count { font-size: 10px; font-weight: 600; background: var(--cream-2); color: var(--muted); width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.dash-tab-btn.active .tab-count { background: rgba(15, 90, 79, 0.1); color: var(--green); }
.dash-tab-panel { display: none; padding-top: 20px; }
.dash-tab-panel.active { display: block; }
.btn { padding: 11px 18px; border-radius: 8px; border: none; cursor: pointer; font-size: 14px; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 7px; transition: 200ms cubic-bezier(0.25, 0.1, 0.25, 1); font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.btn svg { width: 15px; height: 15px; stroke: currentcolor; fill: none; stroke-width: 1.8; }
.sr { opacity: 0; transform: translateY(16px); transition: opacity 500ms, transform 500ms; }
.sr.visible { opacity: 1; transform: translateY(0px); }
@media (max-width: 900px) {
  .hamburger { display: flex; }
}
@media (max-width: 768px) {
  .dash-tab-btn { font-size: 12px; padding: 10px 6px; }
}
@media (max-width: 600px) {
  .main { padding: 0px 16px 40px; }
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border: 0px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0px 30px; border: 0px; border-radius: 999px; cursor: pointer; font-family: var(--sans); font-size: 10px; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; transition: background 0.25s, color 0.25s, border-color 0.25s, box-shadow 0.25s; }
.btn--fill { background: linear-gradient(rgb(255, 255, 255) 0%, rgb(252, 251, 248) 58%, rgb(244, 241, 232) 100%); color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy),
      inset 0 1px 0 rgba(255,255,255,.92),
      inset 0 -1px 0 rgba(10,22,40,.10),
      0 1px 2px rgba(10,22,40,.14),
      0 12px 24px -12px rgba(10,22,40,.38); }
.btn--fill:hover { 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,.38); }
.btn--line { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 1px var(--line-2); }
.btn--line:hover { background: var(--navy); color: var(--cream); box-shadow: inset 0 0 0 1px var(--navy); }
.dash-tabs { margin: 34px 0px 0px; }
.dash-tab-btn { flex: 0 0 auto; padding: 16px 0px; margin: 0px; font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; border-bottom: 2px solid transparent; }
.dash-tab-btn.active { color: var(--navy); border-bottom-color: var(--navy); }
.dash-tab-btn .tab-count { width: auto; min-width: 18px; height: 18px; padding: 0px 5px; border-radius: 9px; background: var(--cream-2); color: var(--muted); font-weight: 600; }
.dash-tab-btn.active .tab-count { background: var(--navy); color: var(--cream); }
.dash-tab-panel { padding-top: 26px; }
.main { max-width: none; padding: 0 var(--edge) 64px; }
.topbar-right { gap: 10px; }
:root { --edge: clamp(16px, 1.6vw, 28px); }
.topbar { height: 74px; }
.topbar-inner { height: 100%; }
.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand .mark { width: auto; height: 16px; flex: 0 0 auto; }