/* The Makhanya App: the owner's own page, read on a phone first. It stands apart from the careers site, so it carries its own
   few colours: warm paper and navy ink by day, navy and first light gold by night. Fonts are Makhanya's own files (OFL, see
   packages/ui/fonts/LICENCES.md). */
@font-face { font-family: "Inter"; src: url("/owner/fonts/inter.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/owner/fonts/manrope.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }

:root {
  --f: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fn: "Manrope", "Inter", system-ui, sans-serif;
  --bg: #F6F4EF; --bg-glow-1: rgba(181, 133, 32, .10); --bg-glow-2: rgba(60, 92, 150, .08);
  --card: #FFFFFF; --card-2: #FBFAF7; --sunk: #EFECE5; --line: #E3DED3; --line-2: #D3CCBE;
  --ink: #111A2B; --ink-2: #3F4A5E; --slate: #5E6878;
  --gold: #A9741A; --gold-hi: #E4B65A; --gold-wash: rgba(201, 146, 46, .14); --gold-ink: #FFFFFF;
  --steel: #7E93B8; --good: #1E8A5A; --bad: #C2412D;
  --bar-glass: rgba(246, 244, 239, .82); --shadow: 0 1px 2px rgba(17, 26, 43, .05), 0 6px 20px rgba(17, 26, 43, .06);
  --hero-1: #17233B; --hero-2: #0E1729; --hero-ink: #F4F1EA; --hero-2nd: #B9C2D3; --hero-gold: #F0C468; --hero-line: rgba(255, 255, 255, .10);
  --mark-bg: #17233B; --mark-sun: #F0C468;
  --focus: #A9741A;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0B1322; --bg-glow-1: rgba(240, 196, 104, .11); --bg-glow-2: rgba(111, 143, 196, .14);
    --card: #121C30; --card-2: #15203A; --sunk: #0F1829; --line: #22304A; --line-2: #2E3E5C;
    --ink: #EEF1F7; --ink-2: #B9C2D3; --slate: #8C98AE;
    --gold: #F0C468; --gold-hi: #F6D58E; --gold-wash: rgba(240, 196, 104, .2); --gold-ink: #111A2B;
    --steel: #6F8FC4; --good: #6FD3A4; --bad: #F2917F;
    --bar-glass: rgba(11, 19, 34, .78); --shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 8px 24px rgba(0, 0, 0, .25);
    --hero-1: #1B2945; --hero-2: #111B30; --hero-line: rgba(255, 255, 255, .08);
    --mark-bg: #1B2945;
    --focus: #F0C468;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0B1322; --bg-glow-1: rgba(240, 196, 104, .11); --bg-glow-2: rgba(111, 143, 196, .14);
  --card: #121C30; --card-2: #15203A; --sunk: #0F1829; --line: #22304A; --line-2: #2E3E5C;
  --ink: #EEF1F7; --ink-2: #B9C2D3; --slate: #8C98AE;
  --gold: #F0C468; --gold-hi: #F6D58E; --gold-wash: rgba(240, 196, 104, .2); --gold-ink: #111A2B;
  --steel: #6F8FC4; --good: #6FD3A4; --bad: #F2917F;
  --bar-glass: rgba(11, 19, 34, .78); --shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 8px 24px rgba(0, 0, 0, .25);
  --hero-1: #1B2945; --hero-2: #111B30; --hero-line: rgba(255, 255, 255, .08);
  --mark-bg: #1B2945;
  --focus: #F0C468;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--bg); -webkit-tap-highlight-color: transparent; }
body { margin: 0; min-height: 100dvh; color: var(--ink); font: 400 15px/1.45 var(--f); -webkit-font-smoothing: antialiased;
  background: radial-gradient(70vmax 50vmax at 110% -10%, var(--bg-glow-1), transparent 60%), radial-gradient(70vmax 50vmax at -20% 0%, var(--bg-glow-2), transparent 60%), var(--bg); background-attachment: fixed; }
.plain { padding: 24px; }
h1, h2, h3, p, ol, ul, dl, dd { margin: 0; }
button, input { font: inherit; color: inherit; }
button { -webkit-user-select: none; user-select: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* The bar runs the full width of any screen. Below it the page runs flush with the bar up to 2560 wide and stays centred on a
   wider screen: the gutter grows by half of whatever is past 2560. */
.app { --gutter: max(14px, env(safe-area-inset-left), env(safe-area-inset-right)); width: 100%; padding: 0 var(--gutter) calc(24px + env(safe-area-inset-bottom)); display: grid; gap: 12px; align-content: start; }

/* The mark keeps its navy square in both themes; only the square deepens at night. */
.mark { width: 34px; height: 34px; flex: none; display: block; }
.mark-bg { fill: var(--mark-bg); }
.mark-sun { fill: var(--mark-sun); }
.mark-rays { stroke: var(--mark-sun); }

/* The bar stays at the top as the numbers scroll under it. */
.bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px; margin: 0 calc(-1 * var(--gutter)); padding: max(10px, env(safe-area-inset-top)) var(--gutter) 10px;
  background: var(--bar-glass); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--line); }
.bar h1 { font: 700 17px/1.15 var(--fn); letter-spacing: -.01em; }
.stamp { color: var(--slate); font-size: 12px; }
.grow { flex: 1; min-width: 0; }
.icon { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border: 1px solid var(--line); border-radius: 50%; background: var(--card); cursor: pointer; transition: transform .15s ease-out, background-color .2s ease-out; }
.icon:active { transform: scale(.92); }
.icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon.busy svg { animation: turn .9s linear infinite; }
@keyframes turn { to { transform: rotate(360deg); } }

.controls { display: grid; gap: 10px; }
/* One track with a thumb that slides to the range chosen. */
.segment { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); padding: 4px; border-radius: 14px; background: var(--sunk); border: 1px solid var(--line); }
.segment .thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 4); border-radius: 10px; background: var(--card); box-shadow: var(--shadow); transform: translateX(calc(var(--i, 0) * 100%)); transition: transform .38s cubic-bezier(.2, .8, .2, 1); }
.segment button { position: relative; min-height: 40px; border: 0; background: none; color: var(--slate); font-weight: 600; font-size: 13.5px; cursor: pointer; transition: color .2s ease-out; }
.segment button[aria-pressed="true"] { color: var(--ink); }
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -14px; padding: 2px 14px; scroll-padding-inline: 14px; scroll-snap-type: x proximity; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink-2); font-weight: 600; font-size: 13.5px; cursor: pointer; scroll-snap-align: start; transition: background-color .2s ease-out, color .2s ease-out, border-color .2s ease-out, transform .12s ease-out; }
.chip:active { transform: scale(.96); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.chip:disabled { opacity: .55; cursor: default; }
i.up, i.down { width: 7px; height: 7px; border-radius: 50%; background: var(--good); flex: none; }
i.down { background: var(--bad); }

/* The headline numbers on a navy card in both themes, so they read as the heart of the page. */
.hero { display: grid; gap: 16px; padding: 18px; border-radius: 22px; color: var(--hero-ink); background: radial-gradient(120% 90% at 100% 0%, rgba(240, 196, 104, .22), transparent 55%), linear-gradient(160deg, var(--hero-1), var(--hero-2)); box-shadow: var(--shadow); animation: rise .38s cubic-bezier(.2, .8, .2, 1); }
.hero-main h2 { color: var(--hero-2nd); font: 600 13px/1.2 var(--f); }
.hero-main .count { display: block; margin: 6px 0 4px; color: var(--hero-gold); font: 800 56px/1 var(--fn); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.hero-main p { color: var(--hero-2nd); font-size: 12.5px; }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; border-radius: 14px; overflow: hidden; background: var(--hero-line); }
.stats > div { padding: 12px; background: rgba(255, 255, 255, .03); }
.stats dt { display: flex; align-items: center; gap: 6px; color: var(--hero-2nd); font-size: 12px; font-weight: 600; }
.stats .count { display: block; margin-top: 4px; font: 750 22px/1.1 var(--fn); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.live { width: 8px; height: 8px; border-radius: 50%; background: var(--hero-2nd); opacity: .6; }
.live.on { background: #6FD3A4; opacity: 1; box-shadow: 0 0 0 0 rgba(111, 211, 164, .6); animation: pulse 2s ease-out infinite; }
@keyframes pulse { to { box-shadow: 0 0 0 8px rgba(111, 211, 164, 0); } }

.card { display: grid; gap: 12px; align-content: start; padding: 16px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); box-shadow: var(--shadow); }
.card > h2, .panel > h2 { font: 700 15.5px/1.2 var(--fn); letter-spacing: -.005em; }
.panel > h3 { margin-top: 6px; color: var(--ink-2); font: 650 13.5px/1.2 var(--f); }

/* The chart. */
.chart { display: grid; gap: 10px; }
.read { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.read-day { color: var(--slate); font-size: 12.5px; font-weight: 600; }
.read-nums { display: flex; align-items: baseline; gap: 10px; }
.read-nums b { font: 750 17px/1 var(--fn); color: var(--ink); }
.read-views { color: var(--slate); font-size: 12.5px; }
.frame { position: relative; height: 150px; touch-action: pan-y; cursor: crosshair; border-radius: 10px; }
.plot { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.plot .views { fill: var(--steel); opacity: .22; }
.plot .area { fill: url(#fill); }
.plot .fill-top { stop-color: var(--gold); stop-opacity: .32; }
.plot .fill-end { stop-color: var(--gold); stop-opacity: 0; }
.plot .line { fill: none; stroke: var(--gold); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.guide { position: absolute; top: 0; bottom: 0; left: var(--x, 100%); width: 1px; background: var(--line-2); transform: translateX(-.5px); transition: left .12s ease-out; pointer-events: none; }
.dot { position: absolute; left: var(--x, 100%); top: var(--y, 50%); width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--gold); border: 2.5px solid var(--card); box-shadow: 0 0 0 1px var(--gold); transition: left .12s ease-out, top .12s ease-out, transform .15s ease-out; pointer-events: none; }
.frame.held .dot { transform: scale(1.35); }
.frame.held .guide, .frame.held .dot { transition: none; }
.axis { display: flex; justify-content: space-between; color: var(--slate); font-size: 11.5px; }
.key { display: flex; gap: 16px; color: var(--ink-2); font-size: 12px; }
.key span { display: inline-flex; align-items: center; gap: 6px; }
.k-line { width: 14px; height: 3px; border-radius: 2px; background: var(--gold); }
.k-bar { width: 9px; height: 11px; border-radius: 2px; background: var(--steel); opacity: .4; }
.chart-none { padding: 18px 0; }

/* Each site with its line, pressed to see that site alone. */
.sites ul { list-style: none; padding: 0; display: grid; }
.sites li + li { border-top: 1px solid var(--line); }
.site { display: grid; grid-template-columns: minmax(0, 1fr) 64px auto 18px; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 6px 2px; border: 0; background: none; text-align: left; cursor: pointer; border-radius: 10px; transition: background-color .15s ease-out; }
.site:hover:not(:disabled) { background: var(--card-2); }
.site:disabled { cursor: default; }
.site-name { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; min-width: 0; }
.site-num { font: 750 16px/1 var(--fn); font-variant-numeric: tabular-nums; text-align: right; }
.site.off .site-num { color: var(--bad); font: 600 12.5px/1.2 var(--f); }
.site svg:not(.spark) { width: 18px; height: 18px; fill: none; stroke: var(--slate); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.spark { width: 64px; height: 24px; display: block; }
.spark path { fill: none; stroke: var(--gold); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }

/* The details: tabs on a phone, side by side when there is room. */
.details { display: grid; gap: 10px; }
.tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; margin: 0 -14px; padding: 0 14px; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { flex: none; min-height: 44px; padding: 0 14px; border: 0; border-radius: 12px; background: none; color: var(--slate); font-weight: 650; font-size: 14px; cursor: pointer; position: relative; transition: color .2s ease-out, background-color .2s ease-out; }
.tabs button[aria-selected="true"] { color: var(--ink); background: var(--card); box-shadow: var(--shadow); }
.panel { display: none; }
.panel.on { display: grid; animation: rise .25s ease-out; }

.list { display: grid; gap: 8px; }
.rows { padding: 0; list-style: none; display: grid; gap: 6px; }
.rows li { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 40px; padding: 8px 12px; border-radius: 10px; overflow: hidden; background: var(--card-2); }
.rows .meter { position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); background: var(--gold-wash); border-radius: 10px; transform-origin: left; animation: grow .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: var(--d, 0ms); }
.rows span, .rows b { position: relative; }
.rows span { min-width: 0; overflow-wrap: anywhere; font-size: 14px; }
.rows b { flex: none; font: 700 14px/1 var(--fn); font-variant-numeric: tabular-nums; }
.more { justify-self: start; min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--gold); font-weight: 650; font-size: 13.5px; cursor: pointer; }
.none { color: var(--slate); font-size: 13.5px; }
.loading { padding: 40px 0; text-align: center; animation: breathe 1.4s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .45; } }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
@keyframes grow { from { transform: scaleX(0); } }

.wrong { color: var(--bad); font-size: 14px; }
.foot { display: grid; gap: 8px; justify-items: start; padding-top: 8px; color: var(--slate); font-size: 12.5px; }
.own summary { min-height: 44px; display: flex; align-items: center; color: var(--ink-2); font-weight: 600; cursor: pointer; }
.own p { margin-bottom: 6px; }
.own ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.own a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink-2); text-decoration: none; font-weight: 600; }
.link { min-height: 44px; padding: 0; border: 0; background: none; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* The door: the key, asked once. */
.gate-page { grid-column: 1 / -1; min-height: 100dvh; display: grid; grid-template-rows: auto 1fr; padding-top: max(10px, env(safe-area-inset-top)); }
.gate-top { display: flex; justify-content: flex-end; }
.gate { align-self: center; display: grid; gap: 16px; width: 100%; max-width: 400px; margin: 0 auto; padding-bottom: 12vh; animation: rise .38s cubic-bezier(.2, .8, .2, 1); }
.gate .mark { width: 60px; height: 60px; }
.gate h1 { font: 800 30px/1.1 var(--fn); letter-spacing: -.025em; }
.gate-line { color: var(--ink-2); margin-top: -8px; }
.field { display: grid; gap: 6px; }
.field label { font-weight: 600; font-size: 14px; }
.field input { min-height: 52px; padding: 0 14px; border: 1.5px solid var(--line-2); border-radius: 14px; background: var(--card); font-size: 16px; }
.field input:focus { border-color: var(--gold); outline: none; box-shadow: 0 0 0 3px var(--gold-wash); }
.help { color: var(--slate); font-size: 12.5px; }
.btn { min-height: 52px; border: 0; border-radius: 999px; background: var(--ink); color: var(--bg); font-weight: 700; font-size: 16px; cursor: pointer; transition: transform .12s ease-out; }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .7; }

/* Room for more: the details sit side by side and the tabs are no longer needed. */
@media (min-width: 760px) {
  .app { --gutter: max(24px, calc((100vw - 2560px) / 2 + 24px)); gap: 16px; }
  .controls { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); align-items: center; }
  .chips { margin: 0; padding: 2px 0; }
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: center; padding: 24px; }
  .hero-main .count { font-size: 72px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .frame { height: 220px; }
}
@media (min-width: 1100px) {
  .app { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .bar, .controls, .hero, .wrong, .foot, .loading, .chart-card.solo { grid-column: 1 / -1; }
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .details { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); align-items: start; gap: 16px; }
  .tabs { display: none; }
  .panel { display: grid; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }