/* ============================================================
   PHAROS LUMEN - sample reporting dashboard (/reporting-dashboards), "the work on a map"
   Loads after styles/lumen.css and styles/lumen-sub.css. Daylight tokens only:
   azure accent, navy text, white cards, no dark backgrounds. Spacing uses the 4px scale:
   4, 8, 12, 16, 24, 32, 48.
   Design: round-2 direction B, a soft town map where every job is a pin that carries its money.
   Chosen by Gabriel 2026-10-10 (decision #450, build #1743).
============================================================ */
.rd {
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --leaf-ink: #2b6431;
  --amber: #a84a08; --amber-line: #e9b46f;
  --shadow-1: 0 1px 2px rgba(16, 51, 77, 0.06), 0 10px 28px rgba(16, 51, 77, 0.1);
  --shadow-2: 0 2px 4px rgba(16, 51, 77, 0.06), 0 24px 56px rgba(16, 51, 77, 0.16);
  --ease-out: cubic-bezier(.19, 1, .22, 1);
  font-variant-numeric: lining-nums tabular-nums;
}
.rd *, .rd *::before, .rd *::after { box-sizing: border-box; }

/* ---------- the top: copy on the left, dashboard on the right, both columns end level ---------- */
.rd-hero {
  position: relative;
  background: radial-gradient(1200px 700px at 78% 480px, #e3eff9, #f4f8fc00 60%);
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: var(--s7);
  max-width: 1560px;
  margin: 0 auto;
  padding: 96px var(--pad-x) var(--s5);
}
.rd-copy { grid-column: 1; grid-row: 1; min-width: 0; }
.rd-more { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; justify-content: space-between; gap: var(--s5); min-width: 0; padding-top: var(--s6); }
.rd-dash { grid-column: 2; grid-row: 1 / span 2; position: relative; min-width: 0; }
.rd-eyebrow {
  display: inline-block;
  margin: 0 0 var(--s4);
  line-height: 1.3;
  font-family: 'Cinzel', 'Trajan Pro', Georgia, serif;
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sky-ink);
}
.rd-title {
  margin: 0 0 var(--s5);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 2.6vw, 2.6rem);
  letter-spacing: -0.03em;
  line-height: 1.14;
  color: var(--ink);
  text-wrap: balance;
}
.rd-intro {
  margin: 0;
  max-width: 52ch;
  font-size: clamp(1.0625rem, 1.2vw, 1.25rem);
  line-height: 1.65;
  color: var(--ink-2);
}

.asks-title { margin: 0 0 var(--s3); font-size: 0.875rem; font-weight: 600; line-height: 1.35; color: var(--ink-2); }
.asks-list { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.asks-list li { padding: var(--s1) var(--s3); border-radius: 8px; background: var(--azure-soft); font-size: 0.9375rem; font-weight: 500; line-height: 1.4; color: var(--deep); cursor: default; }
.proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); margin: 0; padding: 0; list-style: none; }
.proof li {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3);
  min-width: 0;
  padding: var(--s4);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-1);
  font-size: 0.9375rem; font-weight: 600; line-height: 1.45; color: var(--deep);
}
.proof-ico { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--azure-soft); color: var(--azure-text); }
.proof-ico svg { width: 22px; height: 22px; }
.rd-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); }
.rd-cta .btn { margin: 0; min-height: 52px; padding: 18px 24px; border-radius: 14px; font: 600 18px/1 var(--f-body); box-shadow: 0 10px 24px #2278bd40; }
.rd-cta .btn:hover { box-shadow: 0 14px 30px #2278bd52; }
.rd-cta-note { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--ink-2); }

/* ---------- small parts ---------- */
.chip-fiction {
  display: inline-flex; align-items: center; flex: none; white-space: nowrap;
  min-height: 36px; margin: 0;
  padding: var(--s2) var(--s4);
  border: 1px solid var(--azure); border-radius: 999px;
  background: var(--surface); color: var(--azure-text);
  font-family: var(--f-body); font-size: 0.875rem; font-weight: 600; line-height: 1.3;
}
.dash-name { margin: 0; font-family: var(--f-display); font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; color: var(--deep); }

.seg-wrap { border: 0; margin: 0; padding: 0; min-width: 0; }
.seg-wrap legend { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.seg { display: inline-flex; max-width: 100%; padding: var(--s1); border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); box-shadow: 0 1px 2px rgba(16, 51, 77, 0.06); }
.seg label { position: relative; display: block; }
.seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.seg span {
  display: flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 44px; padding: 0 var(--s4);
  border-radius: 999px;
  font-family: var(--f-body); font-size: 0.9375rem; font-weight: 600; color: var(--deep); white-space: nowrap;
  transition: background var(--t-micro) var(--ease-sine), color var(--t-micro) var(--ease-sine);
}
.seg input:checked + span { background: var(--azure-deep); color: #fff; }
.seg input:focus-visible + span { outline: 3px solid var(--deep); outline-offset: 2px; }
.seg input:not(:checked):hover + span { background: var(--azure-soft); }

.dash-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.dash-noscript { margin: 0; padding: var(--s3) var(--s4); border: 1px solid var(--line-2); border-radius: 12px; background: #fff; font-size: 0.9375rem; line-height: 1.5; color: var(--ink-2); }

.num { margin: 0; font-family: var(--f-display); font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; color: var(--deep); }

/* ---------- the dashboard card ---------- */
.b-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s4);
  height: 100%;
  align-content: start;
  padding: var(--s5);
  border: 1px solid var(--line);
  border-radius: 28px;
  background:
    radial-gradient(70% 60% at 8% 0%, var(--wash1), transparent 70%),
    radial-gradient(60% 55% at 96% 0%, var(--wash2), transparent 72%),
    rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow-2);
}
.b-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s3) var(--s4); }

.b-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpi { min-width: 0; padding: 0 var(--s4); border-left: 1px solid var(--line-2); }
.kpi:first-child { padding-left: 0; border-left: 0; }
.kpi-label { margin: 0 0 var(--s2); font-size: 0.875rem; font-weight: 600; line-height: 1.35; color: var(--ink-2); }
.kpi .num { margin-bottom: var(--s2); font-size: clamp(1.4rem, 2vw, 2rem); }
.kpi-delta { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: 0.8125rem; font-weight: 500; line-height: 1.4; color: var(--ink-2); }
.kpi-delta svg { flex: none; margin-top: 3px; }

.b-map {
  --ar: 1000 / 520;
  position: relative;
  aspect-ratio: var(--ar);
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #edf4fa;
  overflow: hidden;
}
.b-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.b-map::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  background: radial-gradient(60% 55% at 14% 0%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 70%), radial-gradient(90% 90% at 50% 50%, rgba(16, 51, 77, 0) 60%, rgba(16, 51, 77, 0.1) 100%); }
.rt-under { fill: none; stroke: #fff; stroke-width: 9; stroke-linecap: round; opacity: 0.9; vector-effect: non-scaling-stroke; }
.rt { fill: none; stroke-width: 4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.rt-1 { stroke: var(--azure-deep); stroke-dasharray: 12 8; }
.rt-2 { stroke: var(--sky-ink); stroke-dasharray: 2 9; stroke-width: 5; }
.rt-3 { stroke: var(--deep); stroke-dasharray: 22 7 4 7; }

.b-hood { position: absolute; z-index: 2; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--deep); pointer-events: none; }
.b-yard { position: absolute; z-index: 2; display: grid; justify-items: center; gap: 2px; transform: translate(-50%, -50%); pointer-events: none; }
.b-yard-ico {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='%23fff'%3E%3Cpath d='M16 24C11 22 9 15 12 9c3 2 5 7 4 15z'/%3E%3Cpath d='M16 24c5-2 7-9 4-15-3 2-5 7-4 15z'/%3E%3Crect x='9' y='24' width='14' height='2' rx='1'/%3E%3C/g%3E%3C/svg%3E") center / 22px no-repeat;
  box-shadow: 0 0 0 4px #fff, var(--shadow-1);
}
.b-yard-name { padding: 1px 8px; border-radius: 999px; background: #fff; border: 1px solid var(--line-2); font-size: 0.6875rem; font-weight: 700; color: var(--deep); white-space: nowrap; }

.b-pins { position: absolute; inset: 0; z-index: 3; }
.job {
  position: absolute;
  width: 44px; height: 44px;
  margin: 0; padding: 0;
  transform: translate(-50%, -50%);
  border: 0; background: none; cursor: pointer;
  font: inherit;
}
.job-ico {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 2px 10px rgba(16, 51, 77, 0.35);
  transition: transform var(--t-micro) var(--ease-out);
}
.job-ico svg { width: 22px; height: 22px; }
.job-paid .job-ico { background: var(--azure-deep); color: #fff; }
.job-wait .job-ico { background: #fff; color: var(--azure-deep); border-color: var(--azure-deep); }
.job-late .job-ico { background: var(--amber); color: #fff; }
.job:hover .job-ico { transform: scale(1.1); }
.job:focus-visible { outline: none; }
.job:focus-visible .job-ico { outline: 3px solid var(--deep); outline-offset: 3px; }
.job.is-on { z-index: 6; }
.job.is-on .job-ico { transform: scale(1.14); box-shadow: 0 0 0 4px var(--deep), 0 6px 16px rgba(16, 51, 77, 0.4); }
.job-amt {
  position: absolute; top: calc(100% + 2px); left: 50%; transform: translateX(-50%);
  padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff;
  font-size: 0.75rem; font-weight: 700; line-height: 1.4; color: var(--deep); white-space: nowrap;
  box-shadow: 0 1px 3px rgba(16, 51, 77, 0.18);
}
.job-late .job-amt { color: var(--amber); border-color: var(--amber-line); }
.js-anim .job { animation: pin-in 0.6s var(--ease-out) both; animation-delay: calc(var(--i) * 55ms); }
@keyframes pin-in { from { opacity: 0; transform: translate(-50%, -100%) scale(0.4); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

.b-sel {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s4);
  margin-top: var(--s3);
  padding: var(--s3) var(--s4);
  border: 1px solid var(--line-2); border-radius: 16px;
  background: #fff;
}
.sel-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #fff; background: var(--azure-deep); }
.sel-ico svg { width: 20px; height: 20px; }
.is-wait .sel-ico { background: #fff; color: var(--azure-deep); box-shadow: inset 0 0 0 3px var(--azure-deep); }
.is-late .sel-ico { background: var(--amber); }
.sel-txt { display: grid; min-width: 0; }
.sel-who { font-weight: 700; line-height: 1.3; color: var(--deep); }
.sel-job { font-size: 0.8125rem; line-height: 1.4; color: var(--ink-2); }
.sel-right { display: grid; justify-items: end; }
.sel-amt { font-size: 1.375rem; }
.sel-state { font-size: 0.875rem; font-weight: 700; line-height: 1.3; }
.is-paid .sel-state { color: var(--leaf-ink); }
.is-wait .sel-state { color: var(--azure-text); }
.is-late .sel-state { color: var(--amber); }

.b-key { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); margin: 0; padding: 0; list-style: none; font-size: 0.875rem; font-weight: 500; color: var(--ink-2); }
.b-key li { display: inline-flex; align-items: center; gap: var(--s2); }
.pk { width: 16px; height: 16px; border-radius: 50%; flex: none; }
.pk-paid { background: var(--azure-deep); }
.pk-wait { background: #fff; border: 3px solid var(--azure-deep); }
.pk-late { background: var(--amber); }
.b-note { margin: calc(var(--s2) * -1) 0 0; font-size: 0.875rem; line-height: 1.4; color: var(--ink-2); }

/* ---------- the deck under the card ---------- */
.b-deck {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--s5);
  max-width: 1560px;
  margin: 0 auto;
  padding: 0 var(--pad-x);
}
.b-panel { display: flex; flex-direction: column; min-width: 0; padding: var(--s5); border: 1px solid var(--line); border-radius: 22px; background: rgba(255, 255, 255, 0.94); box-shadow: var(--shadow-1); }
.b-title { margin: 0 0 var(--s3); font-family: var(--f-display); font-size: 1.125rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; color: var(--deep); }
.b-panel-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s2) var(--s4); margin-bottom: var(--s2); }
.b-panel-head .b-title { margin: 0; }
.b-legend { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); margin: 0; padding: 0; list-style: none; font-size: 0.875rem; color: var(--ink-2); }
.b-legend li { display: inline-flex; align-items: center; gap: var(--s2); }
.sw { display: inline-block; width: 14px; height: 14px; border-radius: 4px; flex: none; }
.sw-in { background: var(--azure); }
.sw-out { background: #fff; border: 2px solid var(--deep); }

#dash-chart { position: relative; flex: 1; width: 100%; min-height: 280px; }
#dash-chart svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.c-band { fill: var(--azure-soft); }
.c-grid { stroke: var(--line-2); stroke-width: 1; }
.c-axis { font-family: var(--f-body); font-size: 11px; fill: var(--ink-2); }
.c-in { fill: var(--azure); }
.c-out { fill: #fff; stroke: var(--deep); stroke-width: 1.5; }
.c-week.is-dim { opacity: 0.45; }
.c-in, .c-out { transform-box: fill-box; transform-origin: 50% 100%; }
.js-anim .b-chart:not(.in) .c-in, .js-anim .b-chart:not(.in) .c-out { transform: scaleY(0); }
.js-anim .b-chart.in .c-in, .js-anim .b-chart.in .c-out { animation: bar-up 0.9s var(--ease-out) both; animation-delay: calc(var(--i) * 45ms); }
@keyframes bar-up { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.bills { margin: 0 0 var(--s3); padding: 0; list-style: none; }
.bill { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: var(--s3); padding: var(--s3) 0; border-top: 1px solid var(--line); }
.bill:first-child { border-top: 0; }
.bill-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--azure-soft); color: var(--azure-text); }
.bill-ico.is-pay { background: var(--deep); color: #fff; }
.bill-ico svg { width: 20px; height: 20px; }
.bill-name { display: block; font-weight: 600; color: var(--deep); line-height: 1.3; }
.bill-due { display: block; font-size: 0.875rem; color: var(--ink-2); line-height: 1.35; }
.bill-amt { font-family: var(--f-display); font-weight: 700; color: var(--deep); }
.b-cover { margin: auto 0 0; padding: var(--s3) var(--s4); border-radius: 12px; background: var(--azure-soft); font-size: 0.9375rem; font-weight: 600; line-height: 1.5; color: var(--deep); }

.b-try { max-width: 1560px; margin: var(--s4) auto 0; padding: 0 var(--pad-x); font-size: 0.9375rem; line-height: 1.6; color: var(--ink-2); }

/* ---------- the sections below, as before ---------- */
.dash-rest.about-article { padding-top: 0; }
.dash-rest > .about-block:first-child {
  margin-top: clamp(40px, 6vw, 64px);
  padding-top: 40px;
  border-top: 1px solid var(--line);
}
/* from 1280px the sample at the top uses the same width and right gutter as the sections below it, so the floating buttons never sit over it (build #1952); narrower windows keep its own sizing, which its card needs */
@media (min-width: 1280px) {
  .rd-hero, .b-deck, .b-try { max-width: none; margin-left: var(--sub-l); margin-right: var(--sub-r); padding-left: 0; padding-right: 0; }
}
/* below 900px the first section sits inside a .sub-pair wrapper (build #1952) and keeps the same opening gap */
@media (max-width: 899px) {
  .dash-rest > .sub-pair:first-child > .about-block:first-of-type {
    margin-top: clamp(40px, 6vw, 64px);
    padding-top: 40px;
  }
}

/* ---------- smaller screens ---------- */
@media (max-width: 1099px) {
  .asks { display: none; }
  .rd-hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: var(--s6); padding-top: 96px; }
  .rd-copy, .rd-more, .rd-dash { grid-column: 1; grid-row: auto; }
  .rd-more { padding-top: 0; justify-content: flex-start; margin-top: calc(var(--s2) * -1); }
  .rd-title { font-size: clamp(1.75rem, 5.2vw, 2.6rem); }
  .rd-title, .rd-intro { max-width: 40rem; }
  .b-deck { grid-template-columns: minmax(0, 1fr); }
  #dash-chart { min-height: 300px; }
}
@media (max-width: 767px) {
  .seg-wrap { width: 100%; }
  .seg { display: flex; width: 100%; }
  .seg label { flex: 1 1 auto; min-width: 0; }
  .chip-fiction { flex: 0 1 auto; white-space: normal; }
  .seg span { padding: 0 var(--s2); font-size: 0.875rem; }
  .rd-hero { row-gap: var(--s4); padding-top: 80px; }
  .rd-eyebrow { margin-bottom: var(--s2); }
  .rd-title { margin-bottom: var(--s3); font-size: 1.625rem; }
  .rd-intro { font-size: 1rem; line-height: 1.55; }
  .rd-more { display: contents; }
  .rd-copy { order: 1; }
  .rd-dash { order: 2; }
  .proof { order: 3; }
  .rd-cta { order: 4; }
  .proof { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .proof li { flex-direction: row; align-items: center; gap: var(--s3); padding: var(--s2) 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; }
  .proof li:first-child { border-top: 0; }
  .proof-ico { width: 36px; height: 36px; }
  .rd-cta-note { display: none; }
  .b-card { gap: var(--s3); padding: var(--s4); border-radius: 22px; }
  .dash-name { font-size: 1rem; }
  .b-top { flex-direction: column; align-items: flex-start; }
  .b-top .seg { width: 100%; }
  .b-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) 0; }
  .kpi:nth-child(odd) { padding-left: 0; border-left: 0; }
  .b-map { --ar: 1000 / 1300; }
  .job-amt { display: none; }
  .job.is-on .job-amt { display: block; }
  .b-sel { grid-template-columns: auto minmax(0, 1fr); }
  .sel-right { grid-column: 1 / -1; justify-items: start; grid-auto-flow: column; gap: var(--s3); align-items: baseline; }
  .b-hood, .b-yard-name { display: none; }
  .b-panel { padding: var(--s4); }
}
@media (max-width: 420px) {
  .seg span { padding: 0 var(--s1); font-size: 0.8125rem; line-height: 1.2; text-align: center; white-space: normal; }
  .b-map { --ar: 1000 / 1500; }
  .rd-eyebrow { font-size: 1rem; }
  .rd-intro { font-size: 0.9375rem; line-height: 1.5; }
  .b-kpis { gap: var(--s3) 0; }
  .rd-cta .btn { width: 100%; }
}
@media (max-width: 767px) {
  .dash-fab-hide .contact-floater { opacity: 0; visibility: hidden; pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) {
  .contact-floater { transition: none; }
  .seg span { transition: none; }
  .js-anim .b-chart .c-in, .js-anim .b-chart .c-out { animation: none !important; transform: none !important; }
  .js-anim .job { animation: none; }
  .job-ico { transition: none; }
}