/* The Bleed analytics console, from the design handoff's "Bleed Analytics Console" screen.
   Values that depend on the data (bar sizes, ramp colours) are set from console.js. */

@font-face { font-family: 'Alegreya'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/alegreya.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Alegreya'; font-style: italic; font-weight: 400 800; font-display: swap; src: url(fonts/alegreya-italic.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Alegreya Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/alegreya-sans-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Alegreya Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/alegreya-sans-500.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Alegreya Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/alegreya-sans-700.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --paper: #EFE8DA;
  --card: #FBF7EE;
  --ink: #2B2A33;
  --ink2: #5E5A57;
  --cream: #F7F1E5;
  --rule: #E6DDCB;
  --teal: #1F6F78;
  --teal-dark: #174F56;
  --error: #B23347;
  --up: #2F6F3A;
  --hex: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  --serif: 'Alegreya', serif;
  --sans: 'Alegreya Sans', sans-serif;
  --shadow: 0 1px 2px rgba(60, 40, 20, .08);
}

[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; background: var(--paper); }
a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--teal-dark); }
button { font-family: var(--sans); }

.app { min-height: 100vh; background: var(--paper); color: var(--ink); font-family: var(--sans); font-variant-numeric: tabular-nums; }

/* Wordmark: "Bleed" and three small hexes */
.wordmark { display: flex; align-items: baseline; gap: 10px; }
.wordmark-name { font-family: var(--serif); font-style: italic; font-weight: 800; line-height: 1; }
.wordmark-lg { font-size: 30px; }
.wordmark-md { font-size: 26px; }
.wordmark-hexes { display: flex; gap: 2px; align-self: baseline; margin-left: -5px; }
.wordmark-hexes i { width: 9px; height: 10px; clip-path: var(--hex); }
.hex-red { background: #D2475A; }
.hex-violet { background: #6E4A8E; }
.hex-blue { background: #3B5BA9; }

/* Sign-in */
.locked { min-height: 100vh; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.locked-art { background: var(--ink); color: var(--cream); padding: 40px 48px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.locked-pitch { display: flex; flex-direction: column; gap: 16px; max-width: 440px; }
.locked-title { font-family: var(--serif); font-style: italic; font-weight: 800; font-size: clamp(44px, 5vw, 64px); line-height: .95; letter-spacing: -.02em; }
.locked-lede { font-size: 17px; line-height: 1.5; color: #D8D0C2; text-wrap: pretty; }
.locked-hexes { display: flex; gap: 6px; }
.locked-hexes div { width: 34px; height: 39px; clip-path: var(--hex); }
.locked-side { display: flex; align-items: center; justify-content: center; padding: 48px 32px; }
.locked-form { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 22px; }
.step { display: flex; flex-direction: column; gap: 20px; }
.step-head { display: flex; flex-direction: column; gap: 6px; }
.step-title { font-family: var(--serif); font-style: italic; font-weight: 800; font-size: 36px; line-height: 1; }
.step-lede { font-size: 16px; color: var(--ink2); }
.step-lede-wrap { line-height: 1.45; text-wrap: pretty; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field-label { font-size: 13px; font-weight: 700; letter-spacing: .1em; color: var(--ink2); }
.input { height: 50px; padding: 0 14px; border-radius: 12px; border: 1.5px solid #CFC5B3; background: var(--card); font: 500 17px var(--sans); color: var(--ink); outline: none; }
.input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(31, 111, 120, .18); }
.input-code { height: 60px; padding: 0 16px; font: 700 28px var(--sans); letter-spacing: .4em; text-align: center; }
.btn-primary { height: 52px; border-radius: 14px; border: none; background: var(--teal); color: var(--cream); font-size: 17px; font-weight: 700; cursor: pointer; }
.btn-link { align-self: flex-start; height: 44px; padding: 0; border: none; background: none; color: var(--teal); font-size: 16px; font-weight: 700; cursor: pointer; }
.login-error { font-size: 15px; color: var(--error); }
/* "Set your password": the two live rules, a dash until met, then a tick */
.rules { display: flex; flex-direction: column; gap: 6px; font-size: 15px; color: var(--ink2); }
.rule { display: flex; align-items: center; gap: 8px; }
.rule-icon { flex: none; }
.rule.met { color: var(--up); }
.input-backup { font-size: 22px; letter-spacing: .12em; }
/* The authenticator setup and the backup codes. No design draws them yet: built from the sign-in
   step's own sizes. */
.qr { align-self: flex-start; width: 196px; height: 196px; }
.qr svg { display: block; width: 100%; height: 100%; }
.setup-key { font: 700 18px/1.4 var(--sans); letter-spacing: .08em; word-spacing: .3em; }
.backup-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; font: 700 18px/1.3 var(--sans); letter-spacing: .06em; }
.backup-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.copyright { font-size: 14px; color: var(--ink2); }

/* Header */
.topbar { position: sticky; top: 0; z-index: 5; background: var(--ink); color: var(--cream); }
.topbar-inner { max-width: 1400px; margin: 0 auto; padding: 12px 28px; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.topnav { display: flex; gap: 22px; font-size: 15px; font-weight: 500; flex: 1; white-space: nowrap; }
.topnav a { color: var(--cream); text-decoration: none; }
.who { display: flex; align-items: center; gap: 12px; font-size: 14px; color: #B9B2A6; }
.btn-who { height: 32px; padding: 0 4px; border: none; background: none; color: #B9B2A6; font-size: 14px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.btn-who:hover { color: var(--cream); }
.btn-ghost { height: 32px; padding: 0 12px; border-radius: 8px; border: 1.5px solid #5E5A66; background: none; color: var(--cream); font-size: 14px; font-weight: 700; cursor: pointer; }

/* Segmented controls: dark in the header, light on the level map */
.seg { display: flex; gap: 4px; padding: 3px; border-radius: 10px; }
.seg button { height: 32px; padding: 0 12px; border: none; border-radius: 8px; background: transparent; font-size: 14px; font-weight: 700; cursor: pointer; }
.seg-dark { background: #3A3942; }
.seg-dark button { color: var(--cream); }
.seg-dark button[aria-pressed="true"] { background: var(--cream); color: var(--ink); }
.seg-light { background: var(--paper); flex-wrap: wrap; }
.seg-light button { color: var(--ink); }
.seg-light button[aria-pressed="true"] { background: var(--ink); color: var(--cream); }

/* Page */
.main { max-width: 1400px; margin: 0 auto; padding: 28px 28px 64px; display: flex; flex-direction: column; gap: 28px; }
.page-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.page-title { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 800; font-size: 40px; line-height: 1; }
.muted-note { font-size: 14px; color: var(--ink2); }
.footer { max-width: 1400px; margin: 0 auto; padding: 0 28px 32px; font-size: 14px; color: var(--ink2); }
.card { background: var(--card); border-radius: 14px; box-shadow: var(--shadow); padding: 20px 22px 22px; }
.card-title { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 800; font-size: 28px; line-height: 1; }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--ink2); }
.block { display: flex; flex-direction: column; gap: 10px; }
.block-label { font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--ink2); }

/* KPI strip */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); background: var(--card); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; }
.kpi { padding: 16px 18px 14px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); display: flex; flex-direction: column; gap: 6px; }
.kpi-label { font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--ink2); }
.kpi-row { display: flex; align-items: baseline; gap: 8px; }
.kpi-value { font: 700 30px/1 var(--serif); }
.kpi-delta { font-size: 14px; font-weight: 700; color: var(--up); }
.kpi-delta.down { color: var(--error); }
.kpi-spark { width: 100%; height: 28px; display: block; }
.kpi-empty { font-size: 13px; line-height: 1.35; color: var(--ink2); min-height: 58px; text-wrap: pretty; }

/* A card the play data cannot fill yet: why, in place of its figures (#357). */
.empty-state { padding: 14px 16px; border: 1.5px dashed var(--rule); border-radius: 10px; font-size: 14px; line-height: 1.4; color: var(--ink2); text-wrap: pretty; }

/* Level map */
.levels { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.card-map { flex: 2 1 640px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.map-scroll { overflow-x: auto; padding-bottom: 4px; }
.chapters { display: flex; flex-direction: column; gap: 2px; min-width: 720px; width: max-content; }
.chapter { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 12px; }
.chapter-label { display: flex; flex-direction: column; }
.chapter-n { font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--ink2); }
.chapter-name { font: 700 16px/1.2 var(--serif); }
.chapter-levels { display: flex; gap: 3px; }
.chapter-levels.offset { padding-left: 25px; }
/* Keyboard focus shows the hover ring, or an ink ring on the selected cell: clip-path would clip
   an outline. */
.cell { position: relative; width: 46px; height: 52px; flex: none; border: none; padding: 0; cursor: pointer; clip-path: var(--hex); background: transparent; display: flex; align-items: center; justify-content: center; }
.cell.hover, .cell:focus-visible { background: var(--ink2); }
.cell.selected { background: var(--teal); }
.cell.selected:focus-visible { background: var(--ink); }
.cell-face { position: absolute; inset: 0; clip-path: var(--hex); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.cell.hover .cell-face, .cell:focus-visible .cell-face { inset: 2px; }
.cell.selected .cell-face { inset: 3px; }
.cell-n { font-size: 13px; font-weight: 700; line-height: 1; }
.cell-v { font-size: 10px; line-height: 1; opacity: .85; }
.cell-flag { position: absolute; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 1.5px var(--card); }
.legend { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 14px; color: var(--ink2); }
.legend-scale { display: contents; }
/* In place of the scale, when the chosen metric has nothing in the range (Quit here in 7 days, #357). */
.legend-note { color: var(--ink2); text-wrap: pretty; }
.legend-ramp { display: block; width: 220px; height: 10px; border-radius: 5px; background: linear-gradient(90deg, #F1E6CF, #E8B33A 35%, #D2475A 70%, #6E4A8E); }
.legend-flag { display: flex; align-items: center; gap: 6px; margin-left: 12px; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }

/* Selected level */
.card-level { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.level-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.level-title { font-family: var(--serif); font-style: italic; font-weight: 800; font-size: 34px; line-height: 1.05; }
.btn-flag { height: 36px; padding: 0 14px; border-radius: 18px; border: 1.5px solid var(--ink); background: transparent; color: var(--ink); font-size: 14px; font-weight: 700; cursor: pointer; flex: none; }
.btn-flag[aria-pressed="true"] { background: var(--ink); color: var(--cream); }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.stat { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--rule); padding-top: 10px; }
.stat-label { font-size: 13px; color: var(--ink2); }
.stat-value { font: 700 24px/1.1 var(--serif); }
.stat-empty { font-size: 13px; line-height: 1.35; color: var(--ink2); text-wrap: pretty; }
.hist { display: flex; align-items: flex-end; gap: 6px; height: 96px; }
.hist-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; }
.hist-pct { font-size: 11px; color: var(--ink2); }
.hist-bar { width: 100%; background: #3B5BA9; border-radius: 4px 4px 2px 2px; }
.hist-k { font-size: 12px; font-weight: 700; }
.assist { display: grid; grid-template-columns: 96px minmax(0, 1fr) 36px; align-items: center; gap: 10px; font-size: 14px; }
.assist-track { height: 10px; border-radius: 5px; background: var(--paper); overflow: hidden; }
.assist-fill { height: 100%; border-radius: 5px; }
.num { text-align: right; font-weight: 700; }

/* Gold leaf */
.economy { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 20px; }
.card-econ { display: flex; flex-direction: column; gap: 16px; }
.econ-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.econ-total { font: 700 20px var(--serif); }
.products { display: contents; }
.product { display: grid; grid-template-columns: minmax(120px, 170px) minmax(0, 1fr) 64px 46px; align-items: center; gap: 12px; font-size: 15px; }
.product-name { display: flex; flex-direction: column; }
.product-name b { font-weight: 700; }
.product-price { font-size: 13px; color: var(--ink2); }
.product-track { height: 14px; border-radius: 3px; background: var(--paper); overflow: hidden; }
.product-fill { height: 100%; background: #C07A12; }
.product-share { text-align: right; color: var(--ink2); }
.sink-bar { display: flex; height: 40px; border-radius: 8px; overflow: hidden; }
.sinks { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.sink { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 10px; align-items: start; }
.sink-swatch { width: 12px; height: 12px; border-radius: 3px; margin-top: 4px; }
.sink-text { display: flex; flex-direction: column; gap: 1px; }
.sink-name { font-weight: 700; font-size: 15px; }
.sink-note { font-size: 13px; color: var(--ink2); }
.sink-value { font: 700 18px var(--serif); }

/* Breakdown sections: Daily Canvas, Revenue breakdown, Duels played */
.bk { display: flex; flex-direction: column; gap: 18px; }
.bk-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.sink-delta { font-size: 13px; font-weight: 700; color: var(--up); }
.sink-delta.down { color: var(--error); }
.bk-chart { display: flex; flex-direction: column; gap: 6px; }
.stack-chart { height: 180px; display: flex; align-items: flex-end; gap: 2px; border-bottom: 1.5px solid var(--ink); }
.stack-day { flex: 1; min-width: 0; display: flex; flex-direction: column-reverse; border-radius: 2px 2px 0 0; overflow: hidden; }
.stack-axis { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink2); }
.bk-cols { display: flex; flex-wrap: wrap; gap: 20px 40px; border-top: 1px solid var(--rule); padding-top: 16px; }
.bk-col { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.bk-rows { display: contents; }
.bk-row { display: grid; grid-template-columns: minmax(96px, 130px) minmax(0, 1fr) 64px 42px; align-items: center; gap: 10px; font-size: 15px; }
.bk-name { font-weight: 700; }
.bk-track { height: 12px; border-radius: 3px; background: var(--paper); overflow: hidden; }
.bk-fill { height: 100%; }

/* Duel */
.duel { display: flex; flex-wrap: wrap; gap: 24px 40px; }
.duel-stats { flex: 1 1 220px; display: flex; flex-direction: column; gap: 16px; }
.duel-stat-list { display: contents; }
.duel-chart { flex: 3 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.rating { position: relative; height: 220px; display: flex; align-items: flex-end; gap: 3px; border-bottom: 1.5px solid var(--ink); margin-top: 24px; }
.rating-bar { flex: 1; border-radius: 3px 3px 0 0; }
.tier { position: absolute; top: -24px; bottom: 0; border-left: 1.5px dashed var(--ink); padding-left: 6px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.rating-axis { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink2); }

/* Header for the admin pages: the page switcher, the role badge, and a spacer where the analytics
   controls would be */
.spacer { flex: 1; }
.role-badge { padding: 3px 8px; border-radius: 6px; background: #3A3942; color: var(--cream); font-size: 12px; font-weight: 700; letter-spacing: .08em; }
.page-note { max-width: 620px; }

/* Admin pages */
.admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 20px; }
.admin-grid-wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); align-items: start; }
.done { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 14px; background: #E3EEDF; color: var(--up); font-size: 16px; font-weight: 700; }
.done-tick { flex: none; }
.done-text { flex: 1; }
.notice-wrap { max-width: 1400px; margin: 0 auto; padding: 28px 28px 0; }
.done.notice { background: #F6E6C4; color: #8A5A12; }
.done.notice .done-dismiss { color: #8A5A12; }
.done-dismiss { height: 36px; padding: 0 12px; border: none; background: none; color: var(--up); font-size: 15px; font-weight: 700; cursor: pointer; }

/* Version cards */
.version-card { display: flex; flex-direction: column; gap: 16px; }
.version-name { font-family: var(--serif); font-style: italic; font-weight: 800; font-size: 26px; line-height: 1; }
.version-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.version-fact { display: flex; flex-direction: column; gap: 4px; }
.version-fact-value { font: 700 28px/1 var(--serif); }
.version-rows { display: flex; flex-direction: column; gap: 8px; }
.version-row { display: grid; grid-template-columns: 72px minmax(0, 1fr) 72px; gap: 12px; align-items: center; font-size: 15px; }
.version-fill { height: 100%; border-radius: 3px; background: #A9C3CF; }
.version-fill.latest { background: var(--teal); }

/* Forms */
.form-card { display: flex; flex-direction: column; gap: 20px; }
#addUser { gap: 18px; }
.form-head { display: flex; flex-direction: column; gap: 4px; }
.form-lede { font-size: 15px; color: var(--ink2); }
.field-head { display: flex; justify-content: space-between; }
.field-head .field-note { font-size: 13px; }
.field-note { font-size: 14px; color: var(--ink2); }
.field-note-wrap { line-height: 1.4; text-wrap: pretty; }
.input-form { background: #FFFDF8; }
.input-version { max-width: 220px; font: 700 18px var(--sans); }
.input-notes { height: auto; padding: 12px 14px; font: 500 16px/1.4 var(--sans); resize: vertical; }
.seg-form { background: var(--rule); align-self: flex-start; flex-wrap: wrap; }
.seg-form button { height: 36px; padding: 0 14px; font-size: 15px; color: var(--ink); }
.seg-form button[aria-pressed="true"] { background: var(--ink); color: var(--cream); }
.seg-tall button { height: 44px; padding: 0 16px; }
.checks { display: flex; flex-direction: column; gap: 4px; }
.check { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 4px 0; border: none; background: none; text-align: left; cursor: pointer; color: var(--ink); }
.check-box { flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 6px; border: 1.5px solid var(--ink); box-sizing: border-box; display: flex; align-items: center; justify-content: center; }
.check[aria-checked="true"] .check-box { background: var(--ink); }
.check[aria-checked="false"] .check-box svg { opacity: 0; }
.check-text { display: flex; flex-direction: column; gap: 2px; }
.check-title { font-size: 16px; font-weight: 700; }
.check-note { font-size: 14px; color: var(--ink2); line-height: 1.35; }
.form-rule { height: 1px; background: var(--rule); }
.btn-wide { align-self: flex-start; padding: 0 24px; }
.add-row { display: flex; flex-wrap: wrap; gap: 16px 20px; align-items: flex-end; }
.add-name { flex: 1 1 220px; }
.add-email { flex: 1 1 260px; }
.btn-add { height: 50px; padding: 0 22px; }

/* What players see */
.preview-card { display: flex; flex-direction: column; gap: 18px; }
.push { max-width: 380px; display: flex; gap: 12px; padding: 12px 14px; border-radius: 18px; background: var(--ink); color: var(--cream); }
.push-icon { flex: none; width: 38px; height: 38px; border-radius: 9px; background: var(--cream); display: flex; align-items: center; justify-content: center; gap: 1px; }
.push-icon i { width: 9px; height: 10px; clip-path: var(--hex); }
.push-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.push-top { display: flex; justify-content: space-between; font-size: 13px; color: #B9B2A6; }
.push-app { font-weight: 700; letter-spacing: .06em; }
.push-title { font-size: 15px; font-weight: 700; }
.push-notes { font-size: 14px; line-height: 1.35; color: #D8D0C2; }
.prompt { max-width: 340px; padding: 22px 22px 20px; border-radius: 20px; background: var(--cream); box-shadow: 0 12px 26px rgba(70, 50, 30, .18), 0 0 0 1px rgba(43, 42, 51, .1); display: flex; flex-direction: column; gap: 10px; }
.prompt-title { font-family: var(--serif); font-style: italic; font-weight: 800; font-size: 28px; line-height: 1.05; }
.prompt-line { font-size: 16px; line-height: 1.4; }
.prompt-notes { font: italic 500 17px/1.35 var(--serif); color: var(--ink2); }
.prompt-buttons { display: flex; gap: 10px; margin-top: 6px; }
.prompt-later, .prompt-update { height: 48px; border-radius: 14px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; }
.prompt-later { flex: 1; border: 1.5px solid var(--ink); }
.prompt-update { flex: 1.3; background: var(--teal); color: var(--cream); }

/* Tables: Release history and Everyone with access */
.table-card { display: flex; flex-direction: column; gap: 14px; }
.table-scroll { overflow-x: auto; }
.table { display: grid; font-size: 15px; line-height: 1.4; }
.table-releases { min-width: 1200px; grid-template-columns: 80px 130px 110px 90px 150px 90px minmax(280px, 1fr) 230px; }
.table-sessions { min-width: 560px; grid-template-columns: minmax(180px, 1.4fr) 150px 150px 120px; }
/* The actions column is wider than the design's 180px so "Send the invite again" fits on its own line under Turn off and Remove. */
.table-users { min-width: 840px; grid-template-columns: minmax(120px, 1fr) minmax(150px, 1.2fr) 130px 110px 110px 220px; }
.table-head, .table-row { display: contents; }
.table-head > div { padding: 8px 10px; border-bottom: 1.5px solid var(--ink); font-size: 13px; font-weight: 700; letter-spacing: .1em; color: var(--ink2); }
.table-row > div { padding: 12px 10px; border-bottom: 1px solid var(--rule); }
.table-row > .cell-badge { padding: 10px; }
.table-row > .cell-tight { padding: 8px 10px; }
.table-row > .cell-strong { font-weight: 700; }
.table-row > .cell-muted { color: var(--ink2); }
.you { color: var(--ink2); font-weight: 500; }
.badge { display: inline-block; padding: 3px 9px; border-radius: 7px; font-size: 14px; font-weight: 700; }
.badge.ok { background: #E3EEDF; color: var(--up); }
.badge.pending { background: #F6E6C4; color: #8A5A12; }
.badge.idle { background: var(--rule); color: var(--ink2); }
.badge.plain { color: var(--ink2); }
.row-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.row-actions .muted-note { align-self: center; }
.row-actions-start { justify-content: flex-start; }
.btn-row { height: 36px; padding: 0 12px; border-radius: 9px; border: 1.5px solid var(--ink); background: none; color: var(--ink); font-size: 14px; font-weight: 700; cursor: pointer; }
.btn-row.danger { border-color: var(--error); color: var(--error); }
.seg-row { display: inline-flex; gap: 3px; padding: 3px; border-radius: 9px; background: var(--rule); }
.seg-row button { height: 32px; padding: 0 10px; border: none; border-radius: 7px; background: transparent; color: var(--ink); font-size: 14px; font-weight: 700; cursor: pointer; }
.seg-row button[aria-pressed="true"] { background: var(--ink); color: var(--cream); }
.seg-row button:disabled { opacity: .55; cursor: default; }

/* Dialogs */
.modal { position: fixed; inset: 0; z-index: 20; background: rgba(20, 18, 22, .42); display: flex; align-items: center; justify-content: center; padding: 24px; }
.dialog { width: 100%; max-width: 460px; padding: 26px 26px 22px; border-radius: 18px; background: var(--card); box-shadow: 0 20px 50px rgba(0, 0, 0, .3); display: flex; flex-direction: column; gap: 16px; }
.dialog-narrow { max-width: 440px; gap: 14px; }
.dialog-title { font-family: var(--serif); font-style: italic; font-weight: 800; font-size: 30px; line-height: 1.05; }
.dialog-rows { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px 14px; font-size: 16px; line-height: 1.35; }
.dialog-rows .dialog-key { color: var(--ink2); }
.dialog-rows .dialog-value { font-weight: 700; }
.dialog-note { font-size: 14px; line-height: 1.4; color: var(--ink2); }
.dialog-body { font-size: 16px; line-height: 1.45; }
.dialog-buttons { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.btn-outline { height: 48px; padding: 0 18px; border-radius: 12px; border: 1.5px solid var(--ink); background: none; color: var(--ink); font-size: 16px; font-weight: 700; cursor: pointer; }
.btn-dialog { height: 48px; padding: 0 20px; border-radius: 12px; border: none; background: var(--teal); color: var(--cream); font-size: 16px; font-weight: 700; cursor: pointer; }
.btn-dialog.btn-danger { background: var(--error); }