/* Persona Homepage: public recreation, mock data.
   One stylesheet, no build step, no framework. */

:root {
  --navy: #0C3A5E;
  --navy-deep: #0A2540;
  --navy-card: #12395A;
  --blue: #0070A8;
  --blue-soft: #E7F1F7;
  --gold: #F5C647;
  --gold-deep: #E8B84B;
  --ink: #1B2B36;
  --mut: #5F7383;
  --line: #E1E7EC;
  --line-soft: #EDF1F4;
  --page: #F3F4F5;
  --white: #fff;
  --ok: #3E9B57;
  --warn: #E4922B;
  --crit: #CF3B31;
  --rail-w: 76px;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(16, 36, 52, .06), 0 6px 18px rgba(16, 36, 52, .05);
}

* { box-sizing: border-box }

/* The overlays below set their own display (grid, flex), which is a stronger
   declaration than the user-agent rule the `hidden` attribute relies on -- so a
   hidden modal stayed laid out over the page and swallowed every click on it.
   One line, and it has to be !important because the rules it is overriding are
   in this same file. */
[hidden] { display: none !important }

html, body { margin: 0; padding: 0 }

body {
  background: var(--page);
  color: var(--ink);
  font: 400 14px/1.45 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round }

/* ------------------------------------------------------------------ rail */
.rail {
  position: fixed; left: 0; top: 0; bottom: 0; width: var(--rail-w);
  background: var(--navy-card); display: flex; flex-direction: column;
  align-items: center; gap: 6px; padding: 14px 0 18px; z-index: 40;
}
.rail-logo { width: 46px; height: 46px; display: grid; place-items: center; margin-bottom: 6px }
.rail-logo svg { width: 34px; height: 34px; stroke: none }
.rail-btn {
  width: 40px; height: 38px; display: grid; place-items: center; border: 0;
  background: transparent; color: #C6D6E1; border-radius: 9px; cursor: pointer;
  position: relative;
}
.rail-btn svg { width: 21px; height: 21px }
.rail-btn:hover { background: rgba(255, 255, 255, .07); color: #fff }
.rail-btn.is-on { color: #fff }
.rail-btn.is-on { background: rgba(255, 255, 255, .12) }
.rail-group { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; }
.rail-group + .rail-group { border-top: 1px solid rgba(255, 255, 255, .09) }
.rail-foot { margin-top: auto; display: flex; flex-direction: column; gap: 4px }

/* ------------------------------------------------------------------ page */
.page { margin-left: var(--rail-w); padding: 26px 32px 90px; max-width: 1560px }

.head h1 { margin: 0; font-size: 38px; font-weight: 700; color: var(--navy); letter-spacing: -.01em }
.head-sub { margin: 4px 0 0; color: var(--mut); font-size: 12.5px }

/* --------------------------------------------------------------- scope */
.scopebar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 20px 0 22px; padding: 9px 10px; border-radius: 15px;
  background: #EDF1F4; border: 1px solid #E4E9ED;
}
.scope-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #4C6A80; padding-left: 6px;
}
.chips { display: flex; gap: 8px; flex-wrap: wrap; flex: 1 }
.chip {
  display: inline-flex; align-items: center; gap: 8px; background: #E3E9EE;
  border: 1px solid transparent; border-radius: 999px; padding: 7px 14px;
  font-size: 12.5px; color: var(--navy); white-space: nowrap;
}
.chip .i { width: 14px; height: 14px; color: var(--mut); flex: none }
.chip b { font-weight: 700 }
.chip .k { color: #6E8394; text-transform: uppercase; font-size: 10px; letter-spacing: .1em; font-weight: 700 }

.scope-actions { display: flex; align-items: center; gap: 8px }

.btn {
  display: inline-flex; align-items: center; gap: 7px; border: 1px solid transparent;
  background: #fff; color: var(--navy); border-radius: 999px; padding: 8px 15px;
  font: 600 12.5px/1 Inter, sans-serif; cursor: pointer; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(16, 36, 52, .07);
}
.btn .i { width: 15px; height: 15px }
.btn:hover { color: var(--blue) }
.btn.ghost { background: transparent; box-shadow: none; border-color: #C9D8E3 }
.btn.soft { background: #DCE7EF; box-shadow: none; color: var(--navy) }
.btn.soft:hover { background: #CEDEE9; color: var(--navy) }
.btn.ghost:hover { background: #fff }
.btn.icon { padding: 9px; border-radius: 50%; background: #DCE7EF; box-shadow: none }
.btn.primary { background: var(--navy); color: #fff }
.btn.primary:hover { background: #02506F; color: #fff }
.btn.is-on { background: #5D7183; color: #fff; box-shadow: none }
.btn.is-on:hover { background: #4E6172; color: #fff }
.btn .chev { width: 13px; height: 13px; opacity: .6 }

/* application tabs (leader) */
.apptabs { display: flex; gap: 8px; margin: -6px 0 18px; flex-wrap: wrap }
.apptab {
  border: 1px solid #D8E3EB; background: #fff; border-radius: 999px;
  padding: 6px 14px; font: 600 11.5px/1 Inter, sans-serif; color: var(--mut);
  cursor: pointer;
}
.apptab.is-on { background: var(--blue-soft); border-color: #B8D4E6; color: var(--navy) }

/* ---------------------------------------------------------------- grid */
.grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px; align-items: stretch;
}
/* Cards in a row share a height. Left to themselves they hug their content and
   a short one leaves a hole beside a tall one, which reads as a broken grid
   rather than as a small widget. */
.cell { grid-column: span 1; min-width: 0; display: flex; flex-direction: column }
.cell > .card { flex: 1 }
.cell.w2 { grid-column: span 2 }
.cell.w3 { grid-column: span 3 }

/* --------------------------------------------------------------- cards */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px 18px 16px; position: relative;
  min-height: 148px; display: flex; flex-direction: column; background-image: radial-gradient(rgba(16, 36, 52, .045) 1px, transparent 1px);
  background-size: 16px 16px;
}
.card.navy { background-color: var(--navy-card); border-color: transparent; color: #fff;
  background-image: radial-gradient(rgba(255, 255, 255, .10) 1px, transparent 1px) }
.card.gold { background-color: var(--gold); border-color: transparent; color: #12395A;
  background-image: radial-gradient(rgba(34, 48, 59, .09) 1px, transparent 1px) }

.card-top { display: flex; align-items: center; gap: 10px }
.badge {
  width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none;
  background: var(--navy); color: #fff;
}
.badge svg { width: 19px; height: 19px }
.badge.gold { background: var(--gold); color: var(--navy) }
.badge.red { background: var(--crit); color: #fff }
.badge.green { background: var(--ok); color: #fff }
.badge.plain { background: rgba(18, 57, 90, .13); color: #12395A }
.card-title { font-size: 18px; font-weight: 700; margin: 0; flex: 1; min-width: 0; letter-spacing: -.01em }
/* A card inside a stack takes the outline, so the tab strip above it reads as
   belonging to that card rather than floating over the column. */
.card.instack { border: 2px solid var(--navy) }
.card.navy .card-title, .card.gold .card-title { color: inherit }
.infobtn {
  border: 0; background: transparent; padding: 3px; border-radius: 6px; cursor: pointer;
  color: var(--mut); flex: none; display: grid; place-items: center; position: relative; z-index: 2;
}
.infobtn:hover { background: rgba(16, 36, 52, .07) }
.card.navy .infobtn, .card.gold .infobtn { color: inherit }
.card.navy .infobtn:hover, .card.gold .infobtn:hover { background: rgba(255, 255, 255, .16) }
body.editing .infobtn { box-shadow: inset 0 0 0 1px rgba(16, 36, 52, .14) }
.info { width: 18px; height: 18px; opacity: .85; display: block }
.star { width: 20px; height: 20px; color: var(--gold); stroke: none; fill: currentColor; flex: none }

.card-scope {
  display: flex; align-items: center; gap: 6px; margin: 10px 0 2px;
  font-size: 11.5px; color: var(--mut); flex-wrap: wrap;
}
.card.navy .card-scope { color: #A9C4D5 }
.card.gold .card-scope { color: #4A5C68 }
.card-scope .i { width: 13px; height: 13px; flex: none }

/* A widget pinned below the page scope, and a widget the page scope cannot
   reach. Both have to be visible on the card itself: a number scoped to
   something other than what the page says it is scoped to, with nothing on the
   card admitting it, is the failure this whole model exists to avoid. */
.card-scope em {
  font-style: normal; font-size: 10.5px; font-weight: 600; white-space: nowrap;
  letter-spacing: .02em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px;
  background: var(--chip); color: var(--mut);
}
.card-scope.pinned { color: #2F5C7E }
.card-scope.pinned em { background: #DCE7EF; color: #2F5C7E }
.card-scope.warn { color: #9A6412 }
.card-scope.warn em { background: #FBEBCC; color: #8A5A0E }
.card.navy .card-scope.warn { color: #F0C86A }
.card.navy .card-scope.warn em { background: rgba(245,198,71,.20); color: #F5D68A }
.card.gold .card-scope.warn em { background: rgba(255,255,255,.55); color: #6A4A08 }

.seemore {
  margin-top: auto; padding-top: 12px; font-size: 12.5px; font-style: italic;
  color: var(--mut); text-decoration: none; align-self: flex-start;
}
.seemore:hover { color: var(--blue) }
.card.navy .seemore { color: #A9C4D5 }
.card.gold .seemore { color: #4A5C68 }

/* big readouts */
.grade { font-size: 76px; font-weight: 700; line-height: .95; letter-spacing: -.03em; margin: 8px 0 0 }
.grade-row { display: flex; align-items: flex-end; gap: 18px }
.sub { font-size: 12px; opacity: .8; margin: 10px 0 0 }
.bignum { font-size: 54px; font-weight: 700; line-height: 1; letter-spacing: -.02em }
.bignum-row { display: flex; align-items: baseline; gap: 10px; margin: 12px 0 4px }
.bignum-row span { font-size: 13px; font-weight: 600 }
.kvs { margin: 12px 0 0; display: grid; gap: 7px }
.kv { display: flex; justify-content: space-between; font-size: 12.5px }
.kv b { font-weight: 700 }

/* tab strip above a stack */
.stack-tabs { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap }
.stack-tab {
  display: inline-flex; align-items: center; gap: 7px; border: 0; cursor: pointer;
  background: #E7EBEF; color: #6E8394; border-radius: 999px; padding: 7px 15px;
  font: 700 11px/1 Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase;
}
.stack-tab i { font-style: normal; opacity: .55 }
.stack-tab.is-on { background: var(--navy); color: #fff }
.stack-tab.is-on i { opacity: .7 }

/* segmented control */
.seg { display: inline-flex; background: #EEF1F4; border-radius: 999px; padding: 3px; margin: 10px 0 4px }
.seg button {
  border: 0; background: transparent; cursor: pointer; border-radius: 999px;
  padding: 5px 13px; font: 600 11.5px/1 Inter, sans-serif; color: var(--mut);
}
.seg button.is-on { background: var(--blue); color: #fff }

/* charts */
.chart { width: 100%; height: auto; display: block; margin-top: 8px; overflow: visible }

/* stat tiles */
.tiles { display: grid; gap: 8px; margin-top: 10px }
.tile {
  border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; background: #fff;
}
.tile span { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--mut) }
.tile b { font-size: 20px; font-weight: 700 }
.tile em { font-style: normal; font-size: 11.5px; color: var(--mut); margin-left: 4px }
.delta.down { color: var(--ok) } .delta.up { color: var(--crit) }
.split { display: grid; grid-template-columns: 168px 1fr; gap: 14px; align-items: start }

/* notices carousel */
.notice {
  border-left: 3px solid var(--crit); background: #FBF6F5; border-radius: 6px;
  padding: 11px 14px; margin-top: 10px;
}
.notice-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap }
.sev { font-size: 9.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--crit) }
.sev.warn { color: var(--warn) }
.notice-title { font-weight: 700; font-size: 13.5px }
.notice-when { margin-left: auto; font-size: 11.5px; color: var(--mut) }
.notice p { margin: 5px 0 0; font-size: 12.5px; color: var(--mut) }
.notice a { font-size: 12px; font-weight: 700; color: var(--blue); text-decoration: none; display: inline-block; margin-top: 6px }
.dots { display: flex; gap: 5px; justify-content: center; margin-top: 10px }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: #CBD5DD; display: block }
.dots i.is-on { width: 16px; border-radius: 3px; background: var(--navy) }
.foot-note { margin: 10px 0 0; font-size: 11.5px; color: var(--mut) }

/* tables */
.tablewrap { margin-top: 10px; overflow-x: auto }
table { width: 100%; border-collapse: collapse; font-size: 12.5px }
th {
  text-align: left; font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--mut); font-weight: 700; padding: 0 10px 8px 0; border-bottom: 2px solid var(--ink);
  white-space: nowrap;
}
td { padding: 9px 10px 9px 0; border-bottom: 1px solid var(--line-soft); white-space: nowrap }
tbody tr:nth-child(even) { background: rgba(16, 36, 52, .022) }
.card.gold th { border-bottom-color: #7C6A2E } .card.gold td { border-bottom-color: rgba(0,0,0,.08) }

.pill { display: inline-block; border-radius: 999px; padding: 3px 9px; font-size: 10.5px; font-weight: 700 }
.pill.sg { background: var(--navy); color: #fff }
.pill.cost { background: var(--ok); color: #fff }
.pill.res { background: #6B4FA8; color: #fff }
.tag { display: inline-block; border-radius: 999px; padding: 3px 10px; font-size: 10.5px; font-weight: 700; border: 1px solid }
.tag.critical { color: var(--crit); border-color: #EBBCB7; background: #FCF3F2 }
.tag.high { color: var(--warn); border-color: #F0D6AF; background: #FDF7EE }
.tag.medium { color: var(--blue); border-color: #BBD9E9; background: #F0F7FB }
.tag.low { color: var(--mut); border-color: var(--line); background: #F7F9FA }

.tablefoot { display: flex; align-items: center; justify-content: space-between; margin-top: 12px }
.count { font-size: 12px; color: var(--mut) }
.export {
  display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--navy);
  background: #fff; color: var(--navy); border-radius: 6px; padding: 7px 14px;
  font: 700 11px/1 Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
}
.export svg { width: 14px; height: 14px }
.export:hover { background: var(--navy); color: #fff }

.filters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px }
.select {
  position: relative; border: 1px solid var(--line); border-radius: 6px; background: #fff;
  padding: 9px 30px 9px 12px; font-size: 12.5px; color: var(--mut); cursor: pointer;
}
.select svg { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px }

/* --------------------------------------------------- edit mode dressing */
.grip {
  position: absolute; left: 7px; top: 15px; width: 14px; height: 20px; cursor: grab;
  display: none; color: var(--mut);
}
body.editing .grip { display: block }
.grip span { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: currentColor }
.grip span:nth-child(1) { left: 2px; top: 2px }  .grip span:nth-child(2) { left: 9px; top: 2px }
.grip span:nth-child(3) { left: 2px; top: 9px }  .grip span:nth-child(4) { left: 9px; top: 9px }
.grip span:nth-child(5) { left: 2px; top: 16px } .grip span:nth-child(6) { left: 9px; top: 16px }
body.editing .card { padding-left: 28px }
body.editing .card.navy .grip, body.editing .card.gold .grip { color: currentColor }
body.editing .cell { outline: 1px dashed transparent; border-radius: var(--radius) }
body.editing .cell:hover { outline-color: #B9CEDC }
.cell.dragging { opacity: .45 }
.cell.dropbefore { box-shadow: -4px 0 0 0 var(--blue) }

.addtile {
  border: 2px dashed #B9CEDC; border-radius: var(--radius); background: rgba(255, 255, 255, .5);
  min-height: 148px; display: none; place-items: center; cursor: pointer; color: var(--blue);
  font-weight: 700; font-size: 13px;
}
body.editing .addtile { display: grid }
.addtile:hover { background: #fff; border-color: var(--blue) }
.addtile div { display: grid; justify-items: center; gap: 6px }
.addtile svg { width: 26px; height: 26px }

/* ---------------------------------------------------------------- menu */
.menu {
  position: absolute; z-index: 60; min-width: 236px; background: #fff; border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 12px 34px rgba(16, 36, 52, .18); padding: 6px; font-size: 13px;
}
.menu button {
  display: flex; align-items: center; gap: 9px; width: 100%; border: 0; background: transparent;
  text-align: left; padding: 8px 10px; border-radius: 7px; cursor: pointer; color: var(--ink);
  font: 400 13px/1.3 Inter, sans-serif;
}
.menu button:hover { background: #F1F5F8 }
.menu button .ck { margin-left: auto; width: 15px; height: 15px; color: var(--blue) }
.menu .sep { height: 1px; background: var(--line); margin: 5px 4px }
.menu .lbl { font-size: 9.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--mut); padding: 7px 10px 4px }
.menu small { display: block; color: var(--mut); font-size: 11.5px }

/* --------------------------------------------------------------- drawer */
.drawer {
  position: fixed; right: 0; top: 0; bottom: 0; width: 420px; background: #fff; z-index: 70;
  box-shadow: -18px 0 40px rgba(16, 36, 52, .14); display: flex; flex-direction: column;
}
.drawer-head { display: flex; align-items: flex-start; gap: 12px; padding: 20px 20px 12px }
.drawer-head h2 { margin: 0; font-size: 18px; font-weight: 700; color: var(--navy) }
.drawer-head p { margin: 3px 0 0; font-size: 12px; color: var(--mut) }
.iconbtn { border: 0; background: transparent; color: var(--mut); cursor: pointer; padding: 4px;
  border-radius: 6px; margin-left: auto }
.iconbtn svg { width: 20px; height: 20px }
.iconbtn:hover { background: #F1F5F8 }
.drawer-search { position: relative; margin: 0 20px 12px }
.drawer-search .i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--mut) }
.drawer-search input {
  width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px 10px 34px;
  font: 400 13px Inter, sans-serif; color: var(--ink);
}
.drawer-search input:focus { outline: 2px solid var(--blue); outline-offset: -1px }
.drawer-body { overflow-y: auto; padding: 0 20px 24px }
.cat { font-size: 9.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--mut); margin: 16px 0 8px }
.wrow {
  display: flex; align-items: center; gap: 11px; border: 1px solid var(--line); border-radius: 9px;
  padding: 10px 12px; margin-bottom: 7px; cursor: pointer; background: #fff;
}
.wrow:hover { border-color: var(--blue); background: #F7FBFD }
.wrow.on { background: var(--blue-soft); border-color: #B8D4E6 }
.wrow b { font-size: 13px; font-weight: 600; display: block }
.wrow small { color: var(--mut); font-size: 11.5px }
.wrow .add { margin-left: auto; color: var(--blue); font-weight: 700; font-size: 18px; line-height: 1 }

.scrim { position: fixed; inset: 0; background: rgba(10, 37, 64, .3); z-index: 65 }

/* --------------------------------------------------------------- modals */
.modal-wrap { position: fixed; inset: 0; background: rgba(10, 37, 64, .42); z-index: 80;
  display: grid; place-items: center; padding: 24px }
.modal { background: #fff; border-radius: 14px; width: min(680px, 100%); padding: 26px 28px;
  box-shadow: 0 24px 60px rgba(16, 36, 52, .28) }
.modal.narrow { width: min(520px, 100%) }
.modal h2 { margin: 0; font-size: 21px; color: var(--navy) }
.modal-sub { margin: 6px 0 16px; color: var(--mut); font-size: 13px }
.detected { display: flex; align-items: center; gap: 10px; background: #EEF6EC; border-radius: 8px;
  padding: 10px 12px; font-size: 12.5px; color: #34503C }
.pill-auto { background: var(--ok); color: #fff; border-radius: 999px; padding: 4px 10px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase }
.ob-rows { margin-top: 16px; display: grid; gap: 14px }
.ob-row span.k { font-size: 9.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--mut) }
.ob-row span.k em { font-style: normal; font-weight: 400; text-transform: none; letter-spacing: 0;
  margin-left: 8px; font-size: 11px }
.ob-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 7px }
.ob-chip { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 6px 12px;
  font-size: 12px; background: var(--blue-soft); border: 1px solid #CFE3EF }
.ob-chip button { border: 0; background: transparent; cursor: pointer; color: var(--mut); font-size: 14px; line-height: 1 }
.ob-add { border: 1px dashed #B9CEDC; background: #fff; border-radius: 999px; padding: 6px 12px;
  font-size: 12px; color: var(--mut); cursor: pointer }
.modal-foot { margin: 18px 0 0; font-size: 12px; color: var(--mut) }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px }
.modal-actions.spread { justify-content: space-between; align-items: center }
.field { display: block; margin: 4px 0 14px }
.field span { display: block; font-size: 11px; font-weight: 700; color: var(--mut); margin-bottom: 5px }
.field input { width: 100%; border: 2px solid var(--blue); border-radius: 8px; padding: 10px 12px;
  font: 400 13.5px Inter, sans-serif }
.saved-list { border-top: 1px solid var(--line); padding-top: 10px }
.saved-list .row { display: flex; align-items: center; justify-content: space-between; padding: 7px 0 }
.saved-list b { font-size: 13px; font-weight: 600; display: block }
.saved-list small { color: var(--mut); font-size: 11.5px }
.saved-list .btn { padding: 5px 12px; font-size: 11px }

/* --------------------------------------------------------------- toast */
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 90;
  background: var(--ok); color: #fff; border-radius: 8px; padding: 11px 18px;
  font-size: 13px; font-weight: 600; box-shadow: 0 10px 26px rgba(16, 36, 52, .24);
}

.notindefault { margin: 22px 0 0; font-size: 11.5px; color: var(--mut) }

/* --------------------------------------------------------------- narrow */
@media (max-width: 1180px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .cell.w3 { grid-column: span 2 }
}
@media (max-width: 820px) {
  .page { padding: 20px 16px 80px }
  .grid { grid-template-columns: 1fr }
  .cell.w2, .cell.w3 { grid-column: span 1 }
  .split { grid-template-columns: 1fr }
  .drawer { width: 100% }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important } }


/* ------------------------------------------------------- resize handles
   Drag the right edge for width, the bottom edge for height, the corner for
   both. Only in edit mode, and only on a pointer: a handle you cannot grab is a
   decoration that gets in the way of tapping the card. */
.rz { position: absolute; display: none; z-index: 3 }
body.editing .rz { display: block }
.rz.e { right: -3px; top: 18%; bottom: 18%; width: 8px; cursor: ew-resize }
.rz.s { left: 18%; right: 18%; bottom: -3px; height: 8px; cursor: ns-resize }
.rz.se { right: -3px; bottom: -3px; width: 16px; height: 16px; cursor: nwse-resize }
.rz::after {
  content: ""; position: absolute; inset: 2px; border-radius: 3px;
  background: var(--blue); opacity: 0; transition: opacity .15s ease;
}
.rz:hover::after, .rz.on::after { opacity: .55 }
.cell.resizing { outline: 2px solid var(--blue); border-radius: var(--radius) }

/* ------------------------------------------------------------- skeletons
   The page renders its shape first and lets each widget arrive as its data
   resolves, top of the page first. It is what the real one does, and it is also
   the only honest way to show a dashboard that talks to eight endpoints. */
.card.loading > *:not(.grip):not(.rz) { visibility: hidden }
.card.loading::after {
  content: ""; position: absolute; inset: 16px 18px;
  border-radius: 8px;
  background: linear-gradient(100deg, #EEF1F3 30%, #F7F9FA 50%, #EEF1F3 70%);
  background-size: 300% 100%; animation: sk 1.1s linear infinite;
}
.card.navy.loading::after { background-image: linear-gradient(100deg, #1B4468 30%, #23547E 50%, #1B4468 70%) }
.card.gold.loading::after { background-image: linear-gradient(100deg, #EDC153 30%, #F9DE7E 50%, #EDC153 70%) }
@keyframes sk { from { background-position: 150% 0 } to { background-position: -150% 0 } }

/* ------------------------------------------------------------------ tour
   Five steps, once, remembered. Dim the page, cut a hole over the thing being
   described, anchor the tooltip to it. */
.tour { position: fixed; inset: 0; z-index: 85; pointer-events: none }
.tour-dim { position: absolute; inset: 0; background: rgba(10, 37, 64, .55); pointer-events: auto }
.tour-hole {
  position: absolute; border-radius: 12px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(10, 37, 64, .55), 0 0 0 3px var(--gold);
  transition: all .28s cubic-bezier(.3, .9, .3, 1);
}
.tour-dim { display: none }
.tour-tip {
  position: absolute; width: 320px; background: #fff; border-radius: 12px;
  padding: 16px 18px; box-shadow: 0 20px 44px rgba(10, 37, 64, .3);
  pointer-events: auto; transition: all .28s cubic-bezier(.3, .9, .3, 1);
}
.tour-step { font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--mut) }
.tour-tip h3 { margin: 6px 0 4px; font-size: 16px; color: var(--navy) }
.tour-tip p { margin: 0; font-size: 12.5px; color: var(--mut); line-height: 1.5 }
.tour-acts { display: flex; justify-content: space-between; align-items: center; margin-top: 14px }
.tour-acts .btn { padding: 6px 13px; font-size: 12px }
.tour-list {
  position: absolute; left: 26px; bottom: 26px; margin: 0; padding: 14px 18px;
  list-style: none; background: #fff; border-radius: 10px; pointer-events: auto;
  box-shadow: 0 14px 32px rgba(10, 37, 64, .26); font-size: 12px; color: var(--mut);
}
.tour-list b { display: block; font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--mut); margin-bottom: 7px }
.tour-list li { padding: 3px 0 }
.tour-list li.is-on { color: var(--navy); font-weight: 700 }





/* -------------------------------------------------------- cursors
   Hand-painted set from the portfolio site: same 48x48 PNGs, same measured
   hotspots. The -v2 suffix is a cache-bust -- browsers cache cursor bitmaps
   on the path alone, so a fixed icon needs a fresh filename to be picked up. */
:root { cursor: url("assets/cursor-arrow-v2.png") 18 6, auto; }

a, button, summary,
[role="button"], [role="menuitem"], [role="tab"],
label[for], input[type="checkbox"], input[type="radio"], select {
  cursor: url("assets/cursor-point-v2.png") 18 2, pointer;
}

[draggable="true"], .grip {
  cursor: url("assets/cursor-move-v2.png") 23 23, grab;
}
[draggable="true"]:active, .grip:active {
  cursor: url("assets/cursor-move-v2.png") 23 23, grabbing;
}
.rz.e { cursor: url("assets/cursor-resize-v2.png") 24 23, ew-resize; }
.rz.s { cursor: url("assets/cursor-resize-v2.png") 24 23, ns-resize; }
.rz.se { cursor: url("assets/cursor-resize-v2.png") 24 23, nwse-resize; }