/* tastemaker · macrostructure: App shell · mood: direct automotive · page: admin overview
 * shell: fixed sidebar + contextual topbar · separation: hairline dividers · motion: 180ms data-state transitions
 * palette: locked Yervo black, warm white, and muted red · contrast: pass (matrix)
 * critique: ShowTell 5 · Phil 5 · Hier 5 · Spec 5 · Restr 5 · Var 4 */
@font-face{font-family:Montserrat;src:url('/fonts/montserrat-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Montserrat;src:url('/fonts/montserrat-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Montserrat;src:url('/fonts/montserrat-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  --font:Montserrat,sans-serif;
  --bg:#080808;
  --surface:#151515;
  --surface-raised:#1d1d1d;
  --text:#f4f1ec;
  --muted:#c7c2ba;
  --quiet:#9d9890;
  --primary:#f4f1ec;
  --on-primary:#080808;
  --accent:#ad6262;
  --border:#777777;
  --grid:#343434;
  --error:#f2a3a3;
  --success:#b9d9b3;
  --backdrop:rgba(0,0,0,.7);
  color-scheme:dark;
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
}

*{box-sizing:border-box}
html,body{max-width:100%;overflow-x:hidden}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--text);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
button,input,select{min-height:44px;font:inherit}
button{white-space:nowrap}
button:disabled,input:disabled,select:disabled{cursor:not-allowed;opacity:.45}
:focus-visible{outline:3px solid var(--primary);outline-offset:2px}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

.auth-entry{min-height:100vh;display:grid;place-items:center;padding:24px}
.login-panel{width:min(440px,100%);border:1px solid var(--border);background:var(--surface);border-radius:8px;padding:32px}
.login-brand{display:inline-block;margin-bottom:28px;color:var(--text);font-size:18px;font-weight:700;letter-spacing:-.03em;text-decoration:none}
.login-panel h1,.page-head h1,.overview-head h1{margin:0 0 8px;font-size:28px;line-height:1.15;letter-spacing:-.025em}
.login-panel p,.page-head p,.overview-head p{margin:0 0 24px;color:var(--muted)}

.skip-link{position:fixed;top:-80px;left:16px;z-index:50;background:var(--primary);color:var(--on-primary);padding:12px 16px}
.skip-link:focus{top:16px}
.shell{
  --bg:#f5f5f3;
  --surface:#ffffff;
  --surface-raised:#ffffff;
  --text:#202124;
  --muted:#5f6368;
  --quiet:#70757a;
  --primary:#202124;
  --on-primary:#ffffff;
  --border:#d9d9d7;
  --grid:#e5e5e3;
  --error:#b42318;
  --success:#157347;
  min-height:100vh;display:grid;grid-template-columns:248px minmax(0,1fr);background:var(--bg);color:var(--text);color-scheme:light
}
.shell aside{background:#111;color:#f4f1ec;border-color:#2d2d2d}
.shell .brand{color:#f4f1ec}
.shell .nav-item{color:#b8b8b8}
.shell .nav-item:hover,.shell .nav-item.active{background:#080808;color:#ffffff}
.shell .nav-item.active{border-left-color:#ffffff}
.shell .store-link{color:#b8b8b8}
aside{position:sticky;top:0;height:100vh;background:var(--surface);border-right:1px solid var(--border);padding:20px 12px;display:flex;flex-direction:column}
.brand{padding:8px 12px 24px;color:var(--text);font-size:18px;font-weight:700;letter-spacing:-.03em;text-decoration:none}
.brand span{font-weight:400}
aside nav{display:grid;gap:4px}
.nav-item{padding:0 12px;background:transparent;border:0;border-left:3px solid transparent;color:var(--muted);text-align:left;cursor:pointer;transition:background-color 140ms ease,color 140ms ease,border-color 140ms ease}
.nav-item:hover{background:var(--bg);color:var(--text)}
.nav-item.active{border-left-color:var(--primary);background:var(--bg);color:var(--text)}
.store-link{margin-top:auto;padding:12px;color:var(--muted);text-underline-offset:4px}

.workspace{min-width:0}
.workspace>header{position:sticky;top:0;z-index:10;height:56px;display:flex;align-items:center;gap:12px;padding:0 24px;border-bottom:1px solid #2d2d2d;background:#111;color:#f4f1ec}
.workspace>header div{display:grid;min-width:0;line-height:1.25}
.workspace>header strong,.workspace>header span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.workspace>header span{color:#b8b8b8;font-size:12px}
#refresh{margin-left:auto}
#refresh,#signout,#menu{padding:0 16px;border:1px solid #6b6b6b;border-radius:4px;background:transparent;color:#f4f1ec;cursor:pointer;transition:background-color 140ms ease,border-color 140ms ease,color 140ms ease}
#refresh:hover,#signout:hover,#menu:hover{border-color:#ffffff;background:#202020}
#menu{display:none}
#admin-main{max-width:none;padding:28px 32px}

form{display:grid;gap:16px;min-width:0;max-width:100%}
label{display:grid;gap:8px;font-weight:700}
input,select,textarea{padding:0 12px;border:1px solid var(--border);border-radius:4px;background:var(--bg);color:var(--text)}
textarea{padding-top:12px;padding-bottom:12px;resize:vertical;line-height:1.45}
input:focus,select:focus,textarea:focus{border-color:var(--text)}
form button{width:100%;max-width:100%;min-width:0;border:1px solid var(--primary);border-radius:4px;background:var(--primary);color:var(--on-primary);font-weight:700;cursor:pointer;white-space:normal;overflow-wrap:anywhere}

.overview-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:16px;border-bottom:1px solid var(--border)}
.period-switch{display:grid;grid-template-columns:repeat(2,minmax(76px,1fr));border:1px solid var(--border);border-radius:4px;overflow:hidden}
.period-switch button{min-height:44px;padding:0 14px;border:0;border-right:1px solid var(--border);background:transparent;color:var(--muted);cursor:pointer;transition:background-color 140ms ease,color 140ms ease}
.period-switch button:last-child{border-right:0}
.period-switch button:hover{color:var(--text)}
.period-switch button.active{background:var(--primary);color:var(--on-primary);font-weight:700}

.summary-ledger{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin-bottom:24px;border:1px solid var(--border);border-radius:6px;background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.04)}
.summary-metric{min-width:0;padding:20px;border-left:1px solid var(--border)}
.summary-metric:first-child{border-left:0}
.summary-metric>span{display:block;color:var(--muted);font-size:12px}
.summary-metric>strong{display:block;margin:14px 0 8px;overflow-wrap:anywhere;font-size:30px;font-variant-numeric:tabular-nums;font-weight:700;letter-spacing:-.045em;line-height:1}
.summary-metric>strong+span{color:var(--quiet);font-size:11px;line-height:1.35}

.overview-primary{display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,1fr);gap:24px;margin-bottom:24px}
.overview-secondary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.overview-section{min-width:0;border:1px solid var(--border);border-radius:6px;background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.03)}
.section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:18px 20px;border-bottom:1px solid var(--border)}
.section-head h2{margin:0 0 4px;font-size:17px;line-height:1.25;letter-spacing:-.02em}
.section-head p{margin:0;color:var(--muted);font-size:12px}
.section-note{margin:0;padding:14px 20px;border-top:1px solid var(--border);color:var(--quiet);font-size:11px;line-height:1.5}

.chart-legend{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:12px;color:var(--muted);font-size:11px}
.chart-legend span{display:inline-flex;align-items:center;gap:6px}
.chart-legend i{width:12px;height:3px;display:inline-block;background:var(--primary)}
.chart-legend .visitors-key{background:var(--accent)}
.traffic-chart{height:280px;padding:14px 14px 4px;color:var(--text)}
.traffic-chart svg{display:block;width:100%;height:100%;overflow:visible}
.chart-grid{stroke:var(--grid);stroke-width:1}
.chart-axis{fill:var(--muted);font-family:var(--font);font-size:10px}
.chart-value{fill:var(--text);font-family:var(--font);font-size:11px;font-weight:700}
.chart-line{fill:none;stroke-width:2.5;vector-effect:non-scaling-stroke}
.chart-line-requests{stroke:var(--primary)}
.chart-line-visitors{stroke:var(--accent)}
.chart-point{stroke:#ffffff;stroke-width:2;vector-effect:non-scaling-stroke}
.chart-point-requests,.chart-requests{fill:var(--primary)}
.chart-point-visitors,.chart-visitors{fill:var(--accent)}
.chart-empty{height:100%;display:grid;place-items:center;margin:0;color:var(--muted)}

.metric-list{margin:0;padding:0 20px}
.metric-list>div{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:16px;padding:15px 0;border-bottom:1px solid var(--border)}
.metric-list>div:last-child{border-bottom:0}
.metric-list dt{color:var(--muted)}
.metric-list dd{max-width:210px;margin:0;text-align:right;font-variant-numeric:tabular-nums;font-weight:700;overflow-wrap:anywhere}
.path-list{margin:0;padding:0 20px;list-style:none}
.path-list li{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 0;border-bottom:1px solid var(--border)}
.path-list li:last-child{border-bottom:0}
.path-list code{min-width:0;overflow:hidden;color:var(--text);font-family:var(--font);text-overflow:ellipsis;white-space:nowrap}
.path-list strong{font-variant-numeric:tabular-nums}
.path-list .path-empty{display:grid;place-items:center;min-height:160px;color:var(--muted);text-align:center}

.overview-loading{margin:0 0 24px}
.overview-skeleton{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;border:1px solid var(--border);background:var(--border)}
.overview-skeleton span{height:102px;background:var(--surface);animation:skeleton-pulse 900ms ease-in-out infinite alternate}
.overview-skeleton span:nth-child(6){grid-column:1/-1;height:280px}
@keyframes skeleton-pulse{from{opacity:.58}to{opacity:1}}

.page-head{margin-bottom:16px;border-bottom:1px solid var(--border)}
.data-toolbar{display:flex;align-items:end;gap:20px;margin-bottom:16px;padding:16px;border:1px solid var(--border);background:var(--surface)}
.data-toolbar label{width:min(420px,100%)}
.data-toolbar-note{margin-bottom:12px;color:var(--muted);font-size:12px}
.data-state{min-width:0;max-width:100%;margin-bottom:16px;padding:16px;border:1px solid var(--border);background:var(--surface);overflow-wrap:anywhere}
.data-state:empty{display:none}
.data-state.error,#login-result.error{color:var(--error)}
.data-state.success,#login-result.success{color:var(--success)}
.table-wrap{overflow:auto;border:1px solid var(--border);border-radius:4px}
table{width:100%;min-width:780px;border-collapse:collapse;font-variant-numeric:tabular-nums}
th,td{padding:12px 16px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top;white-space:pre-line}
th{position:sticky;top:0;background:var(--surface);color:var(--muted);font-size:12px}
tbody tr{transition:background-color 120ms ease}
tbody tr:hover{background:var(--surface)}
tbody tr:last-child td{border-bottom:0}
.status-control{display:flex;align-items:center;gap:8px}
.status-control button,.version-row button,.dialog-actions button{min-width:88px;min-height:44px;padding:0 16px;border:1px solid var(--border);border-radius:4px;background:transparent;color:var(--text);font:inherit;font-weight:700;cursor:pointer}

.settings-grid{display:grid;grid-template-columns:minmax(280px,420px) minmax(0,1fr);gap:32px;min-width:0;max-width:100%}
.settings-form{align-self:start;min-width:0;max-width:100%;padding:24px;border:1px solid var(--border);background:var(--surface);overflow:hidden}
.settings-form h2,.versions h2,dialog h2{margin:0;font-size:18px}
.settings-form p,.version-row p,.empty-copy,dialog p{margin:0;color:var(--muted);overflow-wrap:anywhere;text-wrap:pretty}
.setup-label{display:block;margin-top:4px;color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.01em}
.setup-secret{display:block;max-width:100%;padding:12px;border:1px solid var(--border);background:var(--bg);color:var(--success);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;line-height:1.5;overflow-wrap:anywhere;word-break:break-all;white-space:normal}
.setup-uri{display:block;width:100%;max-width:100%;min-width:0;min-height:84px;padding:12px;border:1px solid var(--border);border-radius:4px;background:var(--bg);color:var(--text);font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;overflow-wrap:anywhere;word-break:break-all;resize:vertical}
.versions{min-width:0}
.version-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid var(--border)}
.version-row p{margin-top:4px;overflow-wrap:anywhere}
dialog{width:min(480px,calc(100vw - 32px));padding:0;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text)}
dialog::backdrop{background:var(--backdrop)}
dialog form{padding:24px}
.dialog-actions{display:flex;justify-content:flex-end;gap:8px}
.dialog-actions button:last-of-type{border-color:var(--primary);background:var(--primary);color:var(--on-primary)}
#rollback-result.error{color:var(--error)}
.campaign-composer{display:grid;gap:16px;margin-top:24px;border:1px solid var(--border);background:var(--surface)}
.campaign-composer .settings-form{border:0;background:transparent;max-width:720px}
.campaign-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.campaign-actions button:last-child{border-color:var(--accent);background:transparent;color:var(--text)}

@media(max-width:1100px){
  .summary-ledger{grid-template-columns:repeat(3,minmax(0,1fr))}
  .summary-metric:nth-child(4){border-left:0;border-top:1px solid var(--border)}
  .summary-metric:nth-child(5){border-top:1px solid var(--border)}
  .summary-metric:nth-child(6){border-top:1px solid var(--border)}
  .overview-primary{grid-template-columns:1fr}
  .overview-secondary{grid-template-columns:repeat(2,minmax(0,1fr))}
  .overview-secondary>.overview-section:last-child{grid-column:1/-1}
}

@media(max-width:760px){
  .shell{display:block}
  aside{position:fixed;left:-260px;z-index:30;width:248px;transition:left 180ms ease}
  aside.open{left:0}
  .workspace>header{padding:0 12px;gap:8px}
  .workspace>header span{display:none}
  #menu{display:block;padding:0 10px}
  #refresh,#signout{padding:0 10px}
  #admin-main{width:100%;min-width:0;max-width:100%;padding:16px;overflow-x:hidden}
  .login-panel{margin-top:32px;padding:24px}
  .overview-head{display:grid;gap:8px}
  .period-switch{width:100%}
  .summary-ledger{grid-template-columns:repeat(2,minmax(0,1fr))}
  .summary-metric{padding:16px;border-top:1px solid var(--border)}
  .summary-metric:nth-child(-n+2){border-top:0}
  .summary-metric:nth-child(odd){border-left:0}
  .summary-metric>strong{font-size:26px}
  .overview-primary,.overview-secondary{grid-template-columns:1fr;gap:16px;margin-bottom:16px}
  .overview-secondary>.overview-section:last-child{grid-column:auto}
  .section-head{display:grid;padding:16px}
  .chart-legend{justify-content:flex-start}
  .traffic-chart{height:238px;padding:8px 6px 0}
  .metric-list{padding:0 16px}
  .metric-list dd{max-width:170px}
  .overview-skeleton{grid-template-columns:repeat(2,minmax(0,1fr))}
  .overview-skeleton span:nth-child(6){grid-column:1/-1;height:238px}
  .table-wrap{overflow:visible;border:0}
  .data-toolbar{display:grid;gap:12px;align-items:stretch}
  .data-toolbar-note{margin:0}
  table{min-width:0}
  thead{display:none}
  tbody,tr,td{display:block}
  tbody{display:grid;gap:16px}
  tr{border:1px solid var(--border);border-radius:4px;background:var(--surface)}
  td{display:grid;grid-template-columns:minmax(88px,.7fr) minmax(0,1.3fr);gap:12px;overflow-wrap:anywhere}
  td::before{content:attr(data-label);color:var(--muted);font-size:12px;font-weight:700}
  tbody tr:last-child td:not(:last-child){border-bottom:1px solid var(--border)}
  .settings-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;width:100%;min-width:0;max-width:100%}
  .settings-form{width:100%;min-width:0;max-width:100%;padding:16px}
  .settings-form h2{overflow-wrap:anywhere;text-wrap:balance}
  .settings-form p{max-width:100%;white-space:normal}
  .setup-secret,.setup-uri{max-width:100%;}
  .version-row{align-items:flex-start}
}

@media(max-width:390px){
  .workspace>header strong{max-width:130px}
  #refresh,#signout,#menu{font-size:12px}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}