/* Storage Kings / premium operating desk
   Shares Cope Live's ethereal glass language while keeping Storage Kings'
   dense operational data legible and useful on a phone. */

:root {
  --bg: #060606;
  --panel: #0c0c0d;
  --panel-raised: #111113;
  --gold: #c59a69;
  --gold-bright: #e5bd8c;
  --gold-dim: rgba(197, 154, 105, .16);
  --fg: #f5f1ea;
  --muted: #96928c;
  --dim: #5f5c58;
  --hairline: rgba(255, 255, 255, .075);
  --hairline-bright: rgba(255, 255, 255, .12);
  --tier-climate: #d49a57;
  --tier-driveup: #68a8df;
  --sev-high: #e18a76;
  --sev-medium: #d9b866;
  --sev-low: #81b697;
  --spring: cubic-bezier(.32, .72, 0, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { min-height: 100%; }
body {
  min-height: 100dvh;
  padding: 18px;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 12% 5%, rgba(197, 154, 105, .1), transparent 32rem),
    radial-gradient(circle at 88% 24%, rgba(68, 91, 81, .09), transparent 38rem),
    var(--bg);
  color: var(--fg);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: .028;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitchTiles'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}

[hidden] { display: none !important; }
.num { font-family: "DM Mono", monospace; font-variant-numeric: tabular-nums; }

#auth-loading, #load-error {
  min-height: calc(100dvh - 36px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
  color: var(--muted);
  text-align: center;
}
#load-error { color: var(--sev-high); }

/* Floating status island */
.topbar-shell {
  width: min(1560px, calc(100% - 20px));
  margin: 0 auto 18px;
  padding: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .025);
  box-shadow: 0 0 0 1px var(--hairline), 0 18px 70px rgba(0, 0, 0, .18);
}
.topbar {
  min-height: 50px;
  padding: 0 10px 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-radius: 999px;
  background: rgba(10, 10, 11, .94);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
  font-family: "DM Mono", monospace;
}
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 13px; min-width: 0; }
.status-dot { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: var(--sev-low); box-shadow: 0 0 8px rgba(129, 182, 151, .55); }
.brand { font-size: 11px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; }
.brand-sep, .brand-tag { color: var(--dim); font-size: 10px; }
.stamp { color: var(--muted); font-size: 9px; white-space: nowrap; }
.stamp.stale { color: var(--sev-medium); }
.role-chip { padding: 5px 8px; border-radius: 999px; background: var(--gold-dim); color: var(--gold-bright); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
body[data-role="field"] .owner-only, body[data-role="field"] .field-hidden, body[data-role="operations"] .owner-only { display: none; }
body[data-role="field"] .action-rail a:nth-child(1), body[data-role="field"] .action-rail a:nth-child(4) { display: none; }
body[data-role="field"] .action-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body[data-role="field"] #refresh-data { display: none; }
.back {
  min-height: 38px;
  padding: 0 5px 0 15px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  background: var(--fg);
  color: var(--bg);
  text-decoration: none;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 11px;
  font-weight: 700;
  transition: transform 700ms var(--spring), background-color 700ms var(--spring);
}
.back i { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: rgba(0, 0, 0, .08); font-style: normal; transition: transform 700ms var(--spring); }
.back:hover { transform: translateY(-1px); background: var(--gold-bright); }
.back:hover i { transform: translate(2px, -1px) scale(1.04); }
.back:active { transform: scale(.98); }

main { width: min(1560px, 100%); margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }

.command-bar { position: sticky; top: 8px; z-index: 3; border-radius: 22px; }
.command-core { min-height: 68px; padding: 13px 16px 13px 20px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-radius: 16px; backdrop-filter: blur(20px); }
.source-health, .command-actions { display: flex; align-items: center; gap: 12px; }
.source-health div { display: flex; flex-direction: column; gap: 2px; }
.source-health strong { font-size: 11px; }
.source-health span:not(.status-dot) { color: var(--dim); font-size: 9px; }
.status-dot.attention { background: var(--sev-medium); box-shadow: 0 0 8px rgba(217, 184, 102, .5); }
.data-age { color: var(--muted); font-size: 9px; }
.command-button, .filter-chip { min-height: 38px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--fg); color: var(--bg); font: 700 10px "Plus Jakarta Sans", sans-serif; cursor: pointer; transition: transform 500ms var(--spring), background-color 500ms var(--spring); }
.command-button:hover { transform: translateY(-1px); background: var(--gold-bright); }
.command-button:disabled { cursor: wait; opacity: .6; }

/* Double-bezel system shared with Cope Live */
.panel-shell, .metric-shell, .table-bezel {
  padding: 6px;
  border-radius: 30px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .016));
  box-shadow: 0 0 0 1px var(--hairline), 0 36px 90px rgba(0, 0, 0, .18);
}
.panel-core, .tile, .panel {
  border-radius: 24px;
  background: linear-gradient(152deg, rgba(17, 17, 19, .98), rgba(9, 9, 10, .98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .075), inset 0 0 0 1px rgba(255, 255, 255, .025);
}
.reveal-card { opacity: 0; transform: translateY(34px) scale(.985); transition: transform 900ms var(--spring) var(--reveal-delay, 0ms), opacity 700ms var(--spring) var(--reveal-delay, 0ms); }
.reveal-card.is-visible { opacity: 1; transform: translateY(0) scale(1); }

.hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(430px, 5fr); gap: 18px; align-items: stretch; }
.hero { min-height: 290px; padding: 40px 46px; display: grid; grid-template-columns: 1fr 150px; align-items: center; gap: 28px; overflow: hidden; position: relative; }
.hero::after { content: ""; position: absolute; right: -90px; bottom: -125px; width: 280px; height: 280px; border-radius: 50%; background: rgba(197, 154, 105, .1); filter: blur(58px); pointer-events: none; }
.eyebrow, .section-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(197, 154, 105, .08);
  box-shadow: inset 0 0 0 1px rgba(197, 154, 105, .16);
  color: var(--gold-bright);
  font-family: "DM Mono", monospace;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.hero h1 { max-width: 730px; margin-top: 28px; font-size: clamp(2.7rem, 4.5vw, 5rem); font-weight: 600; line-height: .96; letter-spacing: -.065em; }
.hero h1 span { color: var(--gold); font-weight: 500; }
.hero p { max-width: 560px; margin-top: 22px; color: var(--muted); font-size: 12px; line-height: 1.75; }
.hero-mark { width: 132px; height: 132px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 28%, rgba(229, 189, 140, .55), rgba(197, 154, 105, .12) 45%, transparent 70%); box-shadow: 0 0 0 1px rgba(197, 154, 105, .16), inset 0 0 40px rgba(197, 154, 105, .08); }
.hero-mark span { font-family: "DM Mono", monospace; color: var(--gold-bright); font-size: 18px; letter-spacing: .18em; }

.portfolio-block { min-width: 0; padding: 18px; border-radius: 30px; background: rgba(255, 255, 255, .018); box-shadow: inset 0 0 0 1px var(--hairline); }
.action-rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; overflow: hidden; border-radius: 24px; background: var(--hairline); box-shadow: 0 0 0 1px var(--hairline); }
.action-rail a { min-height: 112px; padding: 20px; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-content: center; background: rgba(12,12,13,.98); color: var(--fg); text-decoration: none; transition: background-color 500ms var(--spring); }
.action-rail a:hover { background: rgba(197,154,105,.09); }
.action-rail span { grid-row: span 2; color: var(--gold); font: 500 9px "DM Mono", monospace; }
.action-rail strong { font-size: 12px; }
.action-rail small { color: var(--dim); font-size: 9px; }
.section-kicker { margin: 2px 0 14px; }
.tiles { display: grid; gap: 10px; }
.portfolio-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.collections-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 18px; }
.payment-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 18px; }
.metric-shell { min-width: 0; padding: 5px; border-radius: 20px; box-shadow: 0 0 0 1px var(--hairline); }
.tile { min-height: 140px; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; border-radius: 15px; }
.tile .label { color: var(--muted); font-family: "DM Mono", monospace; font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }
.tile .value { margin: 12px 0 6px; color: var(--fg); font-size: clamp(1.65rem, 2.8vw, 2.65rem); font-weight: 500; line-height: 1; letter-spacing: -.05em; }
.tile .sub { color: var(--dim); font-size: 10px; line-height: 1.45; }
.tile.accent { background: linear-gradient(152deg, rgba(45, 32, 22, .98), rgba(15, 12, 10, .98)); }
.tile.accent .value { color: var(--gold-bright); }

/* Invoice tally — a wide ledger plate between the portfolio and operations. */
.billing-shell { scroll-margin-top: 18px; }
.billing-head { align-items: center; }
.billing-rate { display: flex; align-items: baseline; gap: 10px; font-family: "DM Mono", monospace; }
.billing-rate strong { color: var(--gold-bright); font-size: 2rem; font-weight: 500; letter-spacing: -.06em; }
.billing-rate span { color: var(--dim); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.billing-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 18px; }
.billing-months { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.billing-month { min-width: 0; padding: 18px; border-radius: 22px; background: rgba(255, 255, 255, .018); box-shadow: inset 0 0 0 1px var(--hairline); }
.billing-month-head { margin-bottom: 14px; display: flex; align-items: end; justify-content: space-between; gap: 18px; }
.billing-month-head div { display: flex; align-items: baseline; gap: 12px; }
.billing-month-head span { color: var(--muted); font-family: "DM Mono", monospace; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.billing-month-head strong { color: var(--gold-bright); font-family: "DM Mono", monospace; font-size: 1.25rem; font-weight: 500; }
.billing-month-head p { color: var(--dim); font-size: 9px; text-align: right; }
.billing-fee { color: var(--gold-bright); }
.muted-money { color: var(--muted); }
.billing-foot { margin-top: 16px; display: flex; justify-content: space-between; gap: 24px; color: var(--dim); font-family: "DM Mono", monospace; font-size: 9px; line-height: 1.55; }
.billing-foot p { max-width: 680px; }
.billing-foot span { text-align: right; white-space: nowrap; }
.billing-empty { padding: 28px; color: var(--dim); text-align: center; }

.dashboard-grid { display: grid; grid-template-columns: minmax(340px, 4fr) minmax(0, 8fr); gap: 18px; align-items: start; }
.dashboard-lane { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.section-core { padding: 34px; }
.section-head { margin-bottom: 26px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.section-head h2 { margin-top: 14px; font-size: clamp(1.7rem, 2.4vw, 2.7rem); font-weight: 600; line-height: 1; letter-spacing: -.05em; }
.section-note { max-width: 220px; color: var(--dim); font-family: "DM Mono", monospace; font-size: 9px; line-height: 1.5; text-align: right; }
/* Links to the field/entry pages, next to a section heading rather than
   inside the section body, because they lead off the dashboard entirely. */
.section-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.section-link {
  min-height: 44px; padding: 0 14px; display: inline-flex; align-items: center;
  border-radius: 999px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--hairline);
  color: var(--muted); text-decoration: none; font-family: "DM Mono", monospace; font-size: 9px;
  letter-spacing: .04em; white-space: nowrap; transition: background-color 700ms var(--spring), color 700ms var(--spring);
}
.section-link:hover { background: var(--gold-dim); color: var(--gold-bright); }
.section-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.change-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.change-card { padding: 18px; min-height: 128px; display: flex; flex-direction: column; justify-content: space-between; border-radius: 18px; background: rgba(255,255,255,.022); box-shadow: inset 0 0 0 1px var(--hairline); }
.change-card span { color: var(--muted); font: 500 8px "DM Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.change-card strong { margin: 12px 0 6px; font-size: 1.55rem; font-weight: 500; }
.change-card small { color: var(--dim); font-size: 9px; }
.change-card.good strong, .change-card.good small { color: var(--sev-low); }
.change-card.bad-change strong, .change-card.bad-change small { color: var(--sev-high); }

.recs { display: flex; flex-direction: column; gap: 10px; }
.rec { padding: 16px 17px; border-radius: 16px; background: rgba(255, 255, 255, .022); box-shadow: inset 3px 0 0 var(--dim), inset 0 0 0 1px rgba(255, 255, 255, .045); transition: transform 700ms var(--spring), background-color 700ms var(--spring); }
.rec:hover { transform: translateX(3px); background: rgba(255, 255, 255, .038); }
.rec.high { box-shadow: inset 3px 0 0 var(--sev-high), inset 0 0 0 1px rgba(255, 255, 255, .045); }
.rec.medium { box-shadow: inset 3px 0 0 var(--sev-medium), inset 0 0 0 1px rgba(255, 255, 255, .045); }
.rec.low { box-shadow: inset 3px 0 0 var(--sev-low), inset 0 0 0 1px rgba(255, 255, 255, .045); }
.rec-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.rec-title { font-size: 13px; font-weight: 600; }
.rec-detail { margin-top: 7px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.chip, .tier { display: inline-flex; align-items: center; min-height: 21px; padding: 0 8px; border-radius: 999px; font-family: "DM Mono", monospace; font-size: 8px; letter-spacing: .09em; text-transform: uppercase; }
.chip.high { color: var(--sev-high); background: rgba(225, 138, 118, .1); }
.chip.medium { color: var(--sev-medium); background: rgba(217, 184, 102, .1); }
.chip.low { color: var(--sev-low); background: rgba(129, 182, 151, .1); }
.rec-value { margin-left: auto; color: var(--gold-bright); font-size: 12px; white-space: nowrap; }

.section-intro { margin: -12px 0 20px; }
.visit { margin-bottom: 10px; overflow: hidden; border-radius: 17px; background: rgba(255, 255, 255, .022); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); }
.visit:last-child { margin-bottom: 0; }
.visit-head { padding: 13px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: rgba(255, 255, 255, .025); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .04); }
.visit-name { font-weight: 600; font-size: 12px; }
.visit-count { color: var(--gold); font-family: "DM Mono", monospace; font-size: 9px; }
.visit-body { padding: 8px 0; }
.visit-group { padding: 8px 16px; }
.visit-group h3 { font-family: "DM Mono", monospace; font-size: 8px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }

/* Each group is a <details>. The heading row is the summary, so the label you
   already read is the thing you click. The default marker is removed on both
   the standard and WebKit paths and replaced with a triangle that inherits the
   group's own colour, so the disclosure state and the severity stay one
   signal rather than two. */
.visit-group > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 30px; cursor: pointer; list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.visit-group > summary::-webkit-details-marker { display: none; }
.visit-group > summary::marker { content: ""; }
.visit-group[open] > summary { margin-bottom: 7px; }
.visit-group > summary h3 { display: flex; align-items: center; gap: 7px; min-width: 0; }
.visit-group > summary h3::before {
  content: ""; flex: none; width: 0; height: 0;
  border-left: 3.5px solid currentColor;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  transform-origin: 30% 50%;
  transition: transform 320ms var(--spring);
}
.visit-group[open] > summary h3::before { transform: rotate(90deg); }
.visit-group > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 5px; }
.visit-group-count { color: var(--dim); font-family: "DM Mono", monospace; font-size: 9px; }
.visit-group > summary:hover .visit-group-count { color: var(--muted); }
.visit-group.unlock h3 { color: var(--sev-high); }
.visit-group.auction h3 { color: var(--sev-high); }
.visit-group.overlock h3 { color: var(--sev-medium); }
.visit-group.vacant h3 { color: var(--tier-driveup); }
.visit-group.soon h3 { color: var(--muted); }
.visit-item { display: grid; grid-template-columns: minmax(68px, .8fr) minmax(55px, .7fr) minmax(0, 2fr); gap: 8px; padding: 6px 0; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .035); }
.visit-item:last-child { box-shadow: none; }
.visit-unit { font-family: "DM Mono", monospace; font-size: 10px; }
.visit-size, .visit-why { color: var(--muted); font-size: 10px; }
.visit-why { text-align: right; }
.visit-none, .empty { padding: 24px 14px; color: var(--dim); font-size: 11px; text-align: center; }

.table-bezel { min-width: 0; padding: 5px; border-radius: 20px; box-shadow: 0 0 0 1px var(--hairline); }
.panel { overflow: hidden; border-radius: 15px; }
.scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 11px; }
th { padding: 12px 14px; color: var(--muted); font-family: "DM Mono", monospace; font-size: 8px; font-weight: 500; letter-spacing: .07em; text-align: left; text-transform: uppercase; white-space: nowrap; box-shadow: inset 0 -1px 0 var(--hairline); }
td { padding: 12px 14px; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .045); white-space: nowrap; }
tr:last-child td { box-shadow: none; }
tbody tr { transition: background-color 700ms var(--spring); }
tbody tr:hover { background: rgba(255, 255, 255, .035); }
.r { text-align: right; }
.split-tables { display: grid; grid-template-columns: minmax(270px, 4fr) minmax(0, 8fr); gap: 12px; }
.collections-workbench { grid-template-columns: minmax(250px, 3fr) minmax(620px, 9fr); }
.workbench-tools { margin: -8px 0 12px; display: flex; gap: 7px; }
.filter-chip { min-height: 32px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px var(--hairline); color: var(--muted); font-family: "DM Mono", monospace; font-size: 8px; }
.filter-chip.active { background: var(--gold-dim); color: var(--gold-bright); box-shadow: inset 0 0 0 1px rgba(197,154,105,.22); }
.row-ref { display: block; margin-top: 3px; color: var(--dim); font-size: 8px; font-weight: 400; }
.table-action { display: inline-flex; min-height: 28px; padding: 0 10px; align-items: center; border-radius: 999px; background: var(--gold-dim); color: var(--gold-bright); font-size: 9px; font-weight: 600; text-decoration: none; }
button.table-action { border: 0; font-family: inherit; cursor: pointer; }
.missing { color: var(--sev-medium); font-size: 9px; }
.priority-pill { display: inline-flex; min-height: 22px; padding: 0 8px; align-items: center; border-radius: 999px; font: 500 8px "DM Mono", monospace; text-transform: uppercase; white-space: nowrap; }
.priority-pill.contact_today, .priority-pill.lien_review { color: var(--sev-high); background: rgba(225,138,118,.1); }
.priority-pill.lien_review { box-shadow: inset 0 0 0 1px rgba(225,138,118,.18); }
.priority-pill.promise_pending { color: var(--tier-driveup); background: rgba(104,168,223,.1); }
.priority-pill.no_contact_info { color: var(--sev-medium); background: rgba(217,184,102,.1); }
.priority-pill.contacted { color: var(--muted); background: rgba(255,255,255,.05); }
.priority-pill.resolved { color: var(--sev-low); background: rgba(129,182,151,.1); }
.status-pill { display: inline-flex; min-height: 22px; padding: 0 8px; align-items: center; border-radius: 999px; font: 500 8px "DM Mono", monospace; text-transform: uppercase; }
.status-pill.warn { color: var(--sev-medium); background: rgba(217,184,102,.1); }
.status-pill.good { color: var(--sev-low); background: rgba(129,182,151,.1); }
.progress-track { height: 8px; margin: -8px 0 18px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.05); }
.progress-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold), var(--gold-bright)); transition: width 700ms var(--spring); }
.campaign-list { display: grid; gap: 10px; }
.campaign-row { padding: 18px; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 14px; border-radius: 18px; background: rgba(255,255,255,.022); box-shadow: inset 0 0 0 1px var(--hairline); }
.campaign-row > div:first-child { display: grid; grid-template-columns: auto 1fr; gap: 7px 10px; align-items: center; }
.campaign-row > div:first-child small { grid-column: 2; color: var(--dim); font-size: 9px; }
.campaign-total { color: var(--gold-bright); font-size: 1.7rem; }
.campaign-facilities { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 7px; }
.campaign-outcomes { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 14px; color: var(--dim); font-size: 9px; }
.campaign-outcomes b { margin-left: 4px; color: var(--muted); font-weight: 400; }
.campaign-facilities span { padding: 5px 8px; border-radius: 8px; background: rgba(255,255,255,.035); color: var(--muted); font-size: 9px; }
.campaign-facilities b { color: var(--fg); font-weight: 400; }
.quality-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 9px; }
.quality-row { min-height: 90px; padding: 16px; border-radius: 16px; background: rgba(255,255,255,.02); box-shadow: inset 0 0 0 1px var(--hairline); }
.quality-row > summary { display: flex; align-items: center; gap: 14px; cursor: pointer; list-style: none; }
.quality-row > summary::-webkit-details-marker { display: none; }
.quality-row > summary > strong { min-width: 34px; color: var(--sev-low); font-size: 1.35rem; font-weight: 500; }
.quality-row.has-issue > summary > strong { color: var(--sev-medium); }
.quality-row > summary div { display: flex; flex-direction: column; gap: 4px; }
.quality-row > summary span { font-size: 10px; font-weight: 600; }
.quality-row > summary small { color: var(--dim); font-size: 8px; }
.quality-row[data-empty="true"] > summary { cursor: default; }
.quality-details { margin-top: 14px; padding-top: 10px; display: grid; gap: 8px; box-shadow: inset 0 1px 0 var(--hairline); }
.quality-details div { padding-top: 7px; display: grid; gap: 2px; }
.quality-details strong { font-size: 9px; font-weight: 600; overflow-wrap: anywhere; }
.quality-details span { color: var(--muted); font-size: 8px; line-height: 1.5; }

.workflow-dialog { width: min(600px, calc(100% - 24px)); margin: auto; padding: 6px; border: 0; border-radius: 28px; background: linear-gradient(145deg, rgba(255,255,255,.1), rgba(255,255,255,.025)); color: var(--fg); box-shadow: 0 45px 120px rgba(0,0,0,.72); }
.workflow-dialog::backdrop { background: rgba(0,0,0,.78); backdrop-filter: blur(8px); }
.workflow-dialog form { padding: 28px; display: grid; gap: 16px; border-radius: 22px; background: linear-gradient(152deg, rgba(17,17,19,.99), rgba(9,9,10,.99)); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.dialog-head { display: flex; justify-content: space-between; gap: 20px; }
.dialog-head h2 { margin-top: 12px; font-size: 1.6rem; letter-spacing: -.04em; }
.dialog-head p { margin-top: 5px; color: var(--muted); font-size: 10px; }
.dialog-close { width: 40px; height: 40px; flex: none; border: 0; border-radius: 50%; background: rgba(255,255,255,.05); color: var(--muted); font-size: 20px; cursor: pointer; }
.workflow-dialog label { display: grid; gap: 7px; color: var(--muted); font: 500 9px "DM Mono", monospace; letter-spacing: .05em; text-transform: uppercase; }
.workflow-dialog input, .workflow-dialog select, .workflow-dialog textarea { width: 100%; min-height: 46px; padding: 11px 13px; border: 0; border-radius: 12px; outline: 0; background: rgba(255,255,255,.055); box-shadow: inset 0 0 0 1px var(--hairline); color: var(--fg); font: 400 12px "Plus Jakarta Sans", sans-serif; text-transform: none; }
.workflow-dialog textarea { resize: vertical; }
.workflow-dialog input:focus, .workflow-dialog select:focus, .workflow-dialog textarea:focus { box-shadow: inset 0 0 0 1px var(--gold); }
.dialog-fields { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.dialog-save { min-height: 48px; border: 0; border-radius: 999px; background: var(--fg); color: var(--bg); font: 700 11px "Plus Jakarta Sans", sans-serif; cursor: pointer; }
.dialog-save:disabled { opacity: .55; cursor: wait; }
.dialog-error { color: var(--sev-high); font-size: 10px; }

.bar { min-width: 150px; display: flex; align-items: center; gap: 9px; }
.bar-track { flex: 1; height: 6px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, .06); }
.bar-fill { height: 100%; border-radius: 999px; }
.bar-val { width: 52px; color: var(--muted); font-size: 9px; text-align: right; }
.tier.climate { color: var(--tier-climate); background: rgba(212, 154, 87, .11); }
.tier.driveup { color: var(--tier-driveup); background: rgba(104, 168, 223, .11); }
.aging-row td:first-child { color: var(--muted); }
.warn { color: var(--sev-medium); }
.bad { color: var(--sev-high); }
.note { margin-top: 12px; color: var(--dim); font-size: 10px; line-height: 1.6; }

footer { width: min(1560px, 100%); min-height: 58px; margin: 18px auto 0; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; color: var(--dim); font-family: "DM Mono", monospace; font-size: 9px; letter-spacing: .04em; }
footer strong { color: var(--muted); font-weight: 400; }

@media (max-width: 1180px) {
  .hero-grid, .dashboard-grid { grid-template-columns: 1fr; }
  .portfolio-block { padding: 0; background: transparent; box-shadow: none; }
  .portfolio-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .payment-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .billing-months { grid-template-columns: 1fr; }
  .change-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quality-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  body { padding: 8px 0 24px; }
  .topbar-shell { width: calc(100% - 20px); margin-bottom: 12px; }
  .topbar { min-height: 48px; padding: 5px 5px 5px 15px; }
  .brand-tag, .brand-sep, .stamp { display: none; }
  main { width: 100%; padding: 0 10px; gap: 12px; }
  .hero-grid, .dashboard-grid, .dashboard-lane { gap: 12px; }
  .panel-shell { padding: 5px; border-radius: 24px; }
  .panel-core { border-radius: 19px; }
  .hero { min-height: 300px; padding: 34px 26px; grid-template-columns: 1fr; }
  .hero h1 { font-size: clamp(2.55rem, 13vw, 4rem); }
  .hero-mark { display: none; }
  .portfolio-tiles, .collections-tiles, .payment-tiles, .billing-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile { min-height: 132px; padding: 17px; }
  .section-core { padding: 28px 18px; }
  .section-head { align-items: flex-start; flex-direction: column; gap: 10px; }
  .section-note { text-align: left; }
  .split-tables { grid-template-columns: 1fr; }
  .action-rail { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .command-core { align-items: flex-start; }
  .source-health span:not(.status-dot) { display: none; }
  .data-age { display: none; }
  .billing-head, .billing-month-head, .billing-foot { align-items: flex-start; flex-direction: column; }
  .billing-month { padding: 12px; }
  .billing-month-head p, .billing-foot span { text-align: left; }
  .dialog-fields { grid-template-columns: 1fr; }
  .visit-item { grid-template-columns: 1fr auto; }
  .visit-size { display: none; }
  .visit-group > summary { min-height: 40px; }
  footer { width: 100%; padding: 0 18px; }
}

@media (max-width: 430px) {
  .portfolio-tiles, .collections-tiles, .payment-tiles, .billing-tiles { grid-template-columns: 1fr; }
  .tile { min-height: 116px; }
  .change-grid, .quality-grid { grid-template-columns: 1fr; }
  .action-rail { grid-template-columns: 1fr; }
  .action-rail a { min-height: 86px; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-card, .back, .back i, .rec, tbody tr,
  .visit-group > summary h3::before { transition: none !important; }
  .reveal-card { opacity: 1; transform: none; }
}

/* --- Jake's field page: portal/storage-kings-field.html --- */

.field-head { padding: 16px; }
.field-head h1 { font-size: 20px; font-weight: 600; letter-spacing: -.03em; }
#field-sites { padding: 0 8px 24px; }
.field-head .note, #field-sites .note { padding: 0 8px; }
/* Every tap target clears 44px, which is the whole point of this page. */
.visit-item.tick { width: 100%; min-height: 44px; display: grid; align-items: center;
  grid-template-columns: minmax(68px,.8fr) minmax(55px,.7fr) minmax(0,2fr); gap: 8px;
  border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent; }
.visit-item.tick[aria-pressed="true"] { background: rgba(129,182,151,.1); }
.visit-item.tick[aria-pressed="true"] .visit-unit::after { content: " ✓"; color: var(--sev-low); }
.cells { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 6px; padding: 4px 0 10px; }
.cell { min-height: 44px; border-radius: 10px; border: 0; background: rgba(255,255,255,.04);
  color: var(--muted); font-family: "DM Mono", monospace; font-size: 11px; cursor: pointer; }
.cell[aria-pressed="true"] { background: rgba(225,138,118,.16); color: var(--fg); box-shadow: inset 0 0 0 1px var(--sev-high); }
/* A unit CCStorage gave us no id for. Shown, because it is still a unit to
   walk past, but not tappable: a tick has nothing to anchor to. */
.cell.readonly { display: grid; place-items: center; opacity: .45; cursor: default; }
.walk { width: 100%; min-height: 48px; margin: 8px 0 4px; border: 0; border-radius: 14px;
  background: var(--fg); color: var(--bg); font-weight: 700; font-size: 13px; cursor: pointer; }
.walked { padding: 10px 16px; color: var(--sev-low); font-size: 11px; }
.visit-item.tick:focus-visible, .cell:focus-visible, .walk:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Site container gets its own bottom padding so the walk control never
   touches the next site's header, and .visit-walk keeps the "I walked"
   button visually separate from the tappable work above it. */
.visit-walk { padding: 0 16px 14px; }
.vacant-attestation { padding: 0 16px 8px; }
.vacant-verify { width: 100%; min-height: 46px; padding: 0 14px; border: 0; border-radius: 12px; background: rgba(104,168,223,.08); box-shadow: inset 0 0 0 1px rgba(104,168,223,.2); color: var(--tier-driveup); font: 600 10px "Plus Jakarta Sans", sans-serif; cursor: pointer; }
.vacant-verify[aria-pressed="true"] { background: rgba(129,182,151,.12); box-shadow: inset 0 0 0 1px rgba(129,182,151,.25); color: var(--sev-low); }

/* The reason chooser that opens under a tapped empty-unit cell. Anchored
   inline rather than as a modal: a technician's thumb is already at this
   part of the screen, and a full-screen overlay would hide the unit number
   he is trying to confirm. */
.reason-picker { margin: 6px 0 10px; padding: 10px; border-radius: 12px;
  background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.reason-picker .note { margin-top: 0; padding: 0 0 8px; }
.reason-opt, .reason-cancel { display: block; width: 100%; min-height: 44px; margin-bottom: 6px;
  border: 0; border-radius: 10px; background: rgba(255,255,255,.05); color: var(--fg);
  font: inherit; font-size: 12px; text-align: left; padding: 0 14px; cursor: pointer;
  -webkit-tap-highlight-color: transparent; }
.reason-opt:last-of-type { margin-bottom: 6px; }
.reason-cancel { color: var(--muted); background: none; }
.reason-opt:focus-visible, .reason-cancel:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

#queue-note { padding: 0 16px; color: var(--sev-medium); }
.visit-cockpit { position: sticky; z-index: 3; bottom: 10px; margin: 0 8px 12px; padding: 10px 10px 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-radius: 18px; background: rgba(17,17,19,.94); box-shadow: 0 0 0 1px var(--hairline-bright), 0 18px 60px rgba(0,0,0,.55); backdrop-filter: blur(18px); }
.visit-cockpit div { display: flex; flex-direction: column; gap: 2px; }
.visit-cockpit strong { font-size: 11px; }
.visit-cockpit span { color: var(--muted); font-size: 9px; }
.visit-cockpit button, .summary-actions a, .summary-actions button { min-height: 44px; padding: 0 16px; border: 0; border-radius: 12px; background: var(--fg); color: var(--bg); font: 700 10px "Plus Jakarta Sans", sans-serif; text-decoration: none; cursor: pointer; }
.visit-summary { width: min(440px, calc(100% - 28px)); margin: auto; padding: 28px; border: 1px solid var(--hairline-bright); border-radius: 22px; background: var(--panel-raised); color: var(--fg); box-shadow: 0 40px 100px rgba(0,0,0,.7); }
.visit-summary::backdrop { background: rgba(0,0,0,.76); backdrop-filter: blur(6px); }
.visit-summary h2 { font-size: 1.5rem; letter-spacing: -.04em; }
.visit-summary p { margin: 12px 0 20px; color: var(--muted); font-size: 11px; line-height: 1.7; }
.summary-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.summary-actions button { background: rgba(255,255,255,.06); color: var(--muted); }

@media (max-width: 767px) {
  /* .visit-item.tick has two classes, so it out-specifies the shared
     .visit-item rule above (which drops to 1fr auto at this width) and would
     otherwise keep its 3-column layout past the point where the base rows
     collapse. Matching that collapse here keeps the tap target and the
     read-only rows consistent at phone width. */
  .visit-item.tick { grid-template-columns: minmax(56px,.8fr) minmax(0,1.6fr); }
  .visit-item.tick .visit-size { display: none; }
}

/* --- Frank's entry page: portal/storage-kings-entry.html --- */

#entry-list { padding: 0 8px 24px; }
.field-head .note, #entry-list .note { padding: 0 8px; }
.entry-facility { margin-bottom: 10px; overflow: hidden; border-radius: 17px; background: rgba(255,255,255,.022); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.entry-facility:last-child { margin-bottom: 0; }
.entry-facility-head { padding: 13px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: rgba(255,255,255,.025); box-shadow: inset 0 -1px 0 rgba(255,255,255,.04); }
.entry-facility-head .entry-facility-name { font-weight: 600; font-size: 12px; }
.entry-facility-count { color: var(--gold); font-family: "DM Mono", monospace; font-size: 9px; }
.entry { padding: 12px 16px; box-shadow: inset 0 -1px 0 rgba(255,255,255,.035); }
.entry:last-child { box-shadow: none; }
.entry-main { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.entry-unit { font-size: 12px; }
.entry-change { color: var(--fg); font-size: 12px; }
.entry-meta { margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.6; }
/* A tick that has already been through a full pull and CCStorage still
   disagrees is a different problem than one still waiting on tonight's
   ingest, so it gets its own colour rather than blending into the meta line. */
.entry.stale { box-shadow: inset 3px 0 0 var(--sev-medium), inset 0 -1px 0 rgba(255,255,255,.035); }
.entry-flag { display: block; margin-top: 2px; color: var(--sev-medium); }
.entry-summary { margin: 14px 8px 10px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.entry-summary strong, .entry-summary span { min-height: 28px; padding: 0 10px; display: inline-flex; align-items: center; border-radius: 999px; background: rgba(255,255,255,.04); color: var(--muted); font: 500 9px "DM Mono", monospace; }
.entry-summary strong { color: var(--fg); }
.entry-filters { margin: 0 8px 14px; }
.entry-status { display: block; width: fit-content; margin-top: 5px; padding: 3px 7px; border-radius: 999px; font: 500 8px "DM Mono", monospace; text-transform: uppercase; }
.entry-status.new { color: var(--tier-driveup); background: rgba(104,168,223,.1); }
.entry-status.stale { color: var(--sev-medium); background: rgba(217,184,102,.1); }
.entry-dismiss {
  min-height: 44px; margin-top: 8px; padding: 0 16px; border: 0; border-radius: 10px;
  background: rgba(255,255,255,.05); color: var(--fg); font: inherit; font-size: 11px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.entry-dismiss:hover { background: rgba(255,255,255,.08); }
.entry-dismiss:disabled { opacity: .5; cursor: default; }
.entry-dismiss:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* --- Closed-loop operations additions --- */
.campaign-sync { grid-column: 1 / -1; color: var(--dim); font-size: 9px; }
.operations-pair { display: grid; grid-template-columns: 1.08fr .92fr; gap: 18px; margin: 18px 0; }
.operations-pair .section-shell { margin: 0; }
.alert-grid, .closeout-grid, .score-grid, .correction-list, .access-list, .audit-list { display: grid; gap: 10px; }
.alert-card, .correction-row, .access-list article, .audit-list article, .closeout-card, .score-grid article {
  padding: 15px 16px; border-radius: 17px; background: rgba(255,255,255,.024);
  box-shadow: inset 0 0 0 1px var(--hairline); transition: transform 480ms cubic-bezier(.32,.72,0,1), opacity 480ms cubic-bezier(.32,.72,0,1);
}
.alert-card { display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.alert-card > div { display: grid; gap: 5px; }
.alert-card p, .correction-row p, .audit-list p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.alert-card.critical { box-shadow: inset 3px 0 0 var(--sev-high), inset 0 0 0 1px rgba(255,113,103,.16); }
.alert-card.attention { box-shadow: inset 3px 0 0 var(--gold), inset 0 0 0 1px rgba(218,171,92,.16); }
.alert-card.acknowledged, .correction-row.fixed { opacity: .5; }
.alert-card button, .correction-row button, .access-form button, .access-list button {
  border: 0; border-radius: 999px; padding: 9px 13px; color: var(--fg); background: rgba(255,255,255,.07); cursor: pointer;
  transition: transform 420ms cubic-bezier(.32,.72,0,1), background 420ms cubic-bezier(.32,.72,0,1);
}
.alert-card button:active, .correction-row button:active, .access-form button:active { transform: scale(.97); }
.closeout-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.closeout-card { display: grid; gap: 4px; box-shadow: inset 3px 0 0 var(--sev-high), inset 0 0 0 1px var(--hairline); }
.closeout-card.complete { box-shadow: inset 3px 0 0 var(--sev-low), inset 0 0 0 1px var(--hairline); }
.closeout-card span, .closeout-card small, .score-grid span, .score-grid small { color: var(--muted); font-size: 9px; }
.score-grid { grid-template-columns: repeat(5, minmax(0,1fr)); }
.score-grid article { display: grid; gap: 7px; }
.score-grid strong { font-size: 1.25rem; }
.correction-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.correction-row > div { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 5px 9px; }
.correction-row p { grid-column: 2; }
.access-form { display: grid; grid-template-columns: 1fr 160px auto; gap: 9px; margin-bottom: 13px; }
.access-form input, .access-form select { border: 0; border-radius: 14px; padding: 11px 13px; color: var(--fg); background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px var(--hairline); }
.access-list article { display: flex; justify-content: space-between; align-items: center; }
.access-list article div { display: grid; gap: 4px; }
.access-list article span { color: var(--gold-bright); font-size: 9px; text-transform: uppercase; letter-spacing: .12em; }
.audit-list article { display: grid; grid-template-columns: 135px 1fr auto; gap: 14px; align-items: start; }
.audit-list time, .audit-list > article > span { color: var(--dim); font: 9px "DM Mono", monospace; }
.activity-fields { margin: 15px 0; padding: 14px; border: 0; border-radius: 17px; box-shadow: inset 0 0 0 1px var(--hairline); }
.activity-fields legend { padding: 0 7px; color: var(--gold-bright); font-size: 9px; text-transform: uppercase; letter-spacing: .12em; }
.activity-history { display: grid; gap: 5px; max-height: 150px; overflow: auto; margin-bottom: 15px; }
.activity-history p { margin: 0; padding: 8px 10px; border-radius: 11px; background: rgba(255,255,255,.03); display: grid; gap: 3px; }
.activity-history span, .activity-history small { font-size: 9px; color: var(--muted); }
.route-toolbar { position: sticky; top: 12px; z-index: 4; margin: 0 8px 16px; padding: 8px; border-radius: 999px; background: rgba(10,12,13,.88); backdrop-filter: blur(18px); box-shadow: 0 14px 42px rgba(0,0,0,.16), inset 0 0 0 1px var(--hairline); display: flex; align-items: center; gap: 7px; }
.route-toolbar button, .route-toolbar a { border: 0; border-radius: 999px; padding: 9px 13px; background: rgba(255,255,255,.065); color: var(--fg); text-decoration: none; cursor: pointer; }
.route-toolbar strong { flex: 1; text-align: center; font-size: 10px; }
.route-toolbar span { padding-right: 10px; color: var(--muted); font-size: 9px; }
body[data-route-mode="true"] #field-sites .visit:not(.route-active) { display: none; }
.visit-item-shell { display: grid; grid-template-columns: 1fr auto; gap: 7px; align-items: stretch; }
.photo-add, .facility-photo { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 8px 11px; background: rgba(255,255,255,.055); color: var(--muted); font-size: 9px; cursor: pointer; }
.photo-add.saved, .facility-photo.saved { color: var(--sev-low); background: rgba(103,206,158,.09); }
.photo-add input, .facility-photo input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; }
.visit-walk { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.evidence-status { position: sticky; top: 70px; z-index: 3; margin: 0 8px 12px; padding: 10px 14px; border-radius: 14px; background: rgba(218,171,92,.12); color: var(--gold-bright); }
.field-alerts { display: grid; gap: 8px; margin: 0 8px 12px; }
.field-alert { padding: 13px 14px; border-radius: 16px; background: rgba(255,113,103,.08); box-shadow: inset 3px 0 0 var(--sev-high), inset 0 0 0 1px rgba(255,113,103,.14); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.field-alert p { margin: 3px 0 0; color: var(--muted); font-size: 9px; }
.field-alert button, .field-alert > span { border: 0; border-radius: 999px; padding: 8px 10px; background: rgba(255,255,255,.07); color: var(--fg); font-size: 9px; }
.field-alert.acknowledged { opacity: .5; }

@media (max-width: 767px) {
  .operations-pair, .score-grid, .closeout-grid, .access-form { grid-template-columns: 1fr; }
  .audit-list article { grid-template-columns: 1fr; gap: 5px; }
  .route-toolbar { border-radius: 22px; flex-wrap: wrap; }
  .route-toolbar strong { order: -1; flex-basis: 100%; }
  .route-toolbar span { margin-left: auto; }
  .visit-item-shell { grid-template-columns: 1fr; }
}

@media print {
  body * { visibility: hidden; }
  #audit-report, #audit-report * { visibility: visible; }
  #audit-report { position: absolute; inset: 0; width: 100%; color: #111; background: #fff; }
  #audit-report button { display: none; }
  .audit-list article { break-inside: avoid; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); background: #fff; }
}