/* views.css — three switchable skins for halacli.com: city, dossier, control (+ classic = untouched).
   Tokens are keyed on html[data-view] and combined with html[data-theme]; the site's own tokens
   (--font-display, --color-accent, --gradient-elegant, ...) are overridden per view so every page
   follows the chosen skin. View-specific heroes exist only on the homepage (#view-hero). */

/* ---------------------------------------------------------------- switcher (header top bar) */
.header .header-top-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.view-switch { display:inline-flex; gap:3px; padding:4px; border-radius:999px; background:rgba(127,127,127,.14); border:1px solid rgba(127,127,127,.28); }
.view-switch button { appearance:none; border:0; background:transparent; color:var(--hd-fg,#f8f9fa); font-family:var(--font-body); font-weight:600; font-size:12px; line-height:1; letter-spacing:.02em; padding:8px 12px; border-radius:999px; cursor:pointer; opacity:.85; transition:background .18s, color .18s, opacity .18s; }
.view-switch button:hover { opacity:1; }
.view-switch button[aria-pressed="true"] { background:var(--hd-fg,#f8f9fa); color:var(--hd-bg,#1a1f36); opacity:1; }
.view-switch button:focus-visible { outline:2px solid var(--hd-fg,#f8f9fa); outline-offset:2px; }
@media (max-width:575px) { .view-switch button { padding:9px 10px; min-height:34px; font-size:11px; } .header .header-top-bar { justify-content:center; } }

/* ---------------------------------------------------------------- classic parts hide under other views */
html[data-view]:not([data-view="classic"]) .classic-only { display:none !important; }
html[data-view]:not([data-view="classic"]) .header::before,
html[data-view]:not([data-view="classic"]) .header::after { display:none !important; }
html[data-view]:not([data-view="classic"]) .header { min-height:0 !important; height:auto !important; padding:0 !important; background:var(--hero-bg) !important; }
html[data-view]:not([data-view="classic"]) .header .container { min-height:0; padding-top:96px; padding-bottom:0; }
html[data-view]:not([data-view="classic"]) .header .social-link { color:var(--hd-fg) !important; background:transparent; border:1px solid currentColor; opacity:.8; backdrop-filter:none; }
html[data-view]:not([data-view="classic"]) .header .social-link:hover { opacity:1; transform:translateY(-2px); box-shadow:none; }
html[data-view="classic"] #view-hero { display:none; }

/* ---------------------------------------------------------------- shared skin application */
html[data-view]:not([data-view="classic"]) body { background:var(--view-bg) !important; color:var(--color-charcoal); }
html[data-view]:not([data-view="classic"]) .navbar { background:var(--view-nav) !important; box-shadow:0 1px 0 var(--rule); }
html[data-view]:not([data-view="classic"]) .nav-link { color:var(--color-navy) !important; }
html[data-view]:not([data-view="classic"]) .nav-link:hover,
html[data-view]:not([data-view="classic"]) .nav-link.active { color:var(--color-accent) !important; }
html[data-view]:not([data-view="classic"]) .brand-title,
html[data-view]:not([data-view="classic"]) .brand-subtitle { color:var(--color-navy) !important; }
html[data-view]:not([data-view="classic"]) .brand-img { background:var(--gradient-elegant) !important; }
html[data-view]:not([data-view="classic"]) h1,
html[data-view]:not([data-view="classic"]) h2,
html[data-view]:not([data-view="classic"]) h3 { font-family:var(--font-display); color:var(--color-navy); }
html[data-view]:not([data-view="classic"]) #projects .project-grid-item .card,
html[data-view]:not([data-view="classic"]) #projects .project-grid-item .card:hover { border-image:none !important; border-left-color:var(--color-accent) !important; background:var(--arch-card) !important; }
html[data-view]:not([data-view="classic"]) #projects .project-grid-item .card:hover .card-title { color:var(--color-accent) !important; }
html[data-view]:not([data-view="classic"]) .blog-content code { color:var(--color-accent); background:rgba(127,127,127,.12); }
html[data-view]:not([data-view="classic"]) .consult-card li::before { color:var(--color-accent); }
html[data-view]:not([data-view="classic"]) .consult-card,
html[data-view]:not([data-view="classic"]) .tool-card,
html[data-view]:not([data-view="classic"]) .blog-card { background:var(--arch-card) !important; border-color:var(--rule) !important; }
html[data-view]:not([data-view="classic"]) .text-muted { color:var(--color-slate) !important; }
html[data-view]:not([data-view="classic"]) .ea-header,
html[data-view]:not([data-view="classic"]) .ar-header,
html[data-view]:not([data-view="classic"]) .rc-header,
html[data-view]:not([data-view="classic"]) .blog-post-header { background:var(--hero-bg) !important; }
html[data-view]:not([data-view="classic"]) .ea-header h1, html[data-view]:not([data-view="classic"]) .ar-header h1,
html[data-view]:not([data-view="classic"]) .rc-header h1, html[data-view]:not([data-view="classic"]) .blog-post-header h1,
html[data-view]:not([data-view="classic"]) .ea-header p, html[data-view]:not([data-view="classic"]) .ar-header p,
html[data-view]:not([data-view="classic"]) .rc-header p, html[data-view]:not([data-view="classic"]) .blog-post-header .meta,
html[data-view]:not([data-view="classic"]) .ea-header a, html[data-view]:not([data-view="classic"]) .ar-header a,
html[data-view]:not([data-view="classic"]) .rc-header a, html[data-view]:not([data-view="classic"]) .blog-post-header a { color:var(--hd-fg) !important; }
html[data-view]:not([data-view="classic"]) .rc-kicker, html[data-view]:not([data-view="classic"]) .ar-kicker,
html[data-view]:not([data-view="classic"]) .rc-trust, html[data-view]:not([data-view="classic"]) .ar-trust { color:var(--hd-fg) !important; border-color:currentColor; background:transparent; opacity:.85; }

/* ================================================================ CITY ================================================================ */
html[data-view="city"] {
  --font-display:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --font-body:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --color-accent:#4c5fd7; --color-accent-light:#6b7ee6; --color-accent-dark:#3b4bb8;
  --gradient-elegant:linear-gradient(135deg,#4c5fd7 0%,#3b4bb8 100%);
  --color-navy:#14213d; --color-charcoal:#2b3552; --color-slate:#4b5875; --color-gray:#6b7590;
  --color-off-white:#e6ebf3; --color-white:#ffffff; --color-light:#d5dbe6;
  --arch-card:#ffffff; --arch-card-bd:rgba(20,33,61,.12); --arch-ink:#14213d; --arch-sub:#4b5875;
  --view-bg:#eef2f7; --view-nav:#ffffff; --rule:rgba(20,33,61,.14);
  --hero-bg:linear-gradient(180deg,#bfd9f2 0%,#e3eefb 100%); --hd-fg:#14213d; --hd-bg:#ffffff; --hero-em:#b45309;
  --city-grass:#9fcf9a; --city-road:#3f4a5c; --city-mark:#f2c14e; --city-case:#5566c9; --city-tool:#e3a53a; --city-repo:#8a97ad;
  --city-board:#ffffff; --city-board-ink:#14213d; --city-kiosk:#2f9d8f; --city-sign:#14213d; --city-window:#f2c14e; --city-window-dim:#c9d4e6;
  --city-walk:#c9cfd8; --city-civic:#7c6fcf; --city-post:#d9534f; --city-leaf:#4f9d5a; --city-sign-ink:#ffffff;
}
html[data-view="city"][data-theme="dark"] {
  --color-accent:#8fa2f5; --color-accent-light:#a9b8ff; --color-accent-dark:#6b7ee6;
  --gradient-elegant:linear-gradient(135deg,#6b7ee6 0%,#4c5fd7 100%);
  --color-navy:#f3efe6; --color-charcoal:#d8dbe6; --color-slate:#b8bfd3; --color-gray:#8b93aa;
  --color-off-white:#161c30; --color-white:#1b2240; --color-light:#2a3352;
  --arch-card:#1b2240; --arch-card-bd:rgba(243,239,230,.14); --arch-ink:#f3efe6; --arch-sub:#b8bfd3;
  --view-bg:#12172a; --view-nav:#1b2240; --rule:rgba(243,239,230,.14);
  --hero-bg:linear-gradient(180deg,#1b2140 0%,#3a2f5c 100%); --hd-fg:#f3efe6; --hd-bg:#1b2140; --hero-em:#f2c14e;
  --city-grass:#2f5d4b; --city-road:#2b3140; --city-mark:#f2c14e; --city-case:#5566c9; --city-tool:#e3a53a; --city-repo:#6b7a90;
  --city-board:#f3efe6; --city-board-ink:#1b2140; --city-kiosk:#3aa89a; --city-sign:#f3efe6; --city-window:#f2c14e; --city-window-dim:#7a6a30;
  --city-walk:#3d4459; --city-civic:#6d5fc4; --city-post:#c0392b; --city-leaf:#2f7a45; --city-sign-ink:#1b2140;
}
html[data-view="city"] h2 { font-weight:800; letter-spacing:-.02em; }
.vh-city { position:relative; max-width:1400px; margin:0 auto; padding:6px 16px 0; }
.vh-city .vh-text { max-width:680px; margin:0 auto 4px; text-align:center; }
.vh-city h1 { font-family:var(--font-display); font-weight:800; font-size:clamp(34px,5vw,58px); line-height:1.02; letter-spacing:-.02em; color:var(--color-navy); margin:0 0 12px; text-wrap:balance; }
.vh-city h1 em { font-style:normal; color:var(--hero-em); }
.vh-city .lede { color:var(--color-slate); font-size:clamp(15px,1.4vw,18px); line-height:1.55; margin:0 auto 14px; max-width:60ch; }
.vh-legend { display:flex; gap:8px 18px; flex-wrap:wrap; justify-content:center; font-family:var(--font-mono); font-size:11.5px; line-height:1.6; color:var(--color-slate); padding:10px 0 18px; }
.vh-legend i { display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:6px; vertical-align:-1px; }
.vh-city .city-wrap { margin-top:8px; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; }
.vh-city svg { display:block; width:100%; min-width:1000px; height:auto; }
.vh-city .b.sign { transition:transform .15s ease; }
.vh-city .b.sign:hover, .vh-city .b.sign:focus { transform:translateY(-3px); }
.vh-city .b { cursor:pointer; transition:transform .18s ease; outline:none; }
.vh-city .b:hover, .vh-city .b:focus { transform:translateY(-6px); }
.vh-city .city-tip { position:absolute; z-index:5; pointer-events:none; background:var(--city-board); color:var(--city-board-ink); font-family:var(--font-mono); font-size:12px; line-height:1; padding:7px 10px; border-radius:6px; box-shadow:0 4px 14px rgba(0,0,0,.28); white-space:nowrap; }
.vh-city .city-foot { text-align:center; font-family:var(--font-mono); font-size:12px; color:var(--color-slate); padding:6px 0 18px; }

/* ================================================================ DOSSIER ================================================================ */
html[data-view="dossier"] {
  --font-display:"Fraunces",Georgia,"Times New Roman",serif;
  --font-body:"Instrument Sans",system-ui,-apple-system,sans-serif;
  --font-mono:"Fragment Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --color-accent:#8b2635; --color-accent-light:#a63a49; --color-accent-dark:#6e1d2a;
  --gradient-elegant:linear-gradient(135deg,#8b2635 0%,#6e1d2a 100%);
  --color-navy:#14231b; --color-charcoal:#2d3d34; --color-slate:#3b4a43; --color-gray:#6f8f7c;
  --color-off-white:#eaeee7; --color-white:#ffffff; --color-light:#d9e0d9;
  --arch-card:#fbfcfa; --arch-card-bd:rgba(20,35,27,.14); --arch-ink:#14231b; --arch-sub:#3b4a43;
  --view-bg:#f4f6f2; --view-nav:#f4f6f2; --rule:rgba(20,35,27,.16);
  --hero-bg:#f4f6f2; --hd-fg:#14231b; --hd-bg:#f4f6f2;
}
html[data-view="dossier"][data-theme="dark"] {
  --color-accent:#d98b96; --color-accent-light:#e6a6af; --color-accent-dark:#c26f7b;
  --gradient-elegant:linear-gradient(135deg,#a63a49 0%,#8b2635 100%);
  --color-navy:#e8ede6; --color-charcoal:#cfd8cf; --color-slate:#a9b8ae; --color-gray:#8fb09e;
  --color-off-white:#132019; --color-white:#182a20; --color-light:#24382d;
  --arch-card:#182a20; --arch-card-bd:rgba(232,237,230,.14); --arch-ink:#e8ede6; --arch-sub:#a9b8ae;
  --view-bg:#0f1a15; --view-nav:#132019; --rule:rgba(232,237,230,.16);
  --hero-bg:#0f1a15; --hd-fg:#e8ede6; --hd-bg:#0f1a15;
}
html[data-view="dossier"] h2 { font-weight:500; letter-spacing:-.01em; }
.vh-dossier { max-width:1140px; margin:0 auto; padding:18px 15px 40px; }
.vh-mast { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--color-slate); border-bottom:1px solid var(--rule); padding-bottom:10px; }
.vh-dossier h1 { font-family:var(--font-display); font-weight:400; font-size:clamp(40px,6.4vw,76px); line-height:.98; letter-spacing:-.02em; margin:26px 0 12px; max-width:13ch; text-wrap:balance; color:var(--color-navy); }
.vh-dossier h1 em { font-style:italic; color:var(--color-accent); }
.vh-dossier .lede { max-width:56ch; font-size:17px; line-height:1.55; color:var(--color-slate); margin:0 0 28px; }
.vh-sec { font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--color-gray); margin:0 0 6px; }
.vh-files { border-top:2px solid var(--color-navy); }
.vh-file { display:grid; grid-template-columns:160px 1fr auto; gap:18px; align-items:baseline; padding:14px 0; border-bottom:1px solid var(--rule); color:inherit; text-decoration:none; }
.vh-file:hover .t, .vh-file:focus-visible .t { color:var(--color-accent); }
.vh-file .m { font-family:var(--font-mono); font-size:20px; line-height:1; color:var(--color-accent); font-variant-numeric:tabular-nums; }
.vh-file .t { font-family:var(--font-display); font-weight:600; font-size:20px; line-height:1.2; color:var(--color-navy); }
.vh-file .t small { display:block; font-family:var(--font-body); font-weight:400; font-size:14px; line-height:1.4; color:var(--color-slate); margin-top:3px; }
.vh-file .a { font-family:var(--font-mono); font-size:12px; color:var(--color-slate); }
.vh-dossier .vh-after { margin-top:22px; font-size:14px; color:var(--color-slate); }
.vh-dossier .vh-after a { color:var(--color-accent); font-weight:600; }
@media (max-width:640px) { .vh-file { grid-template-columns:1fr; gap:4px; } .vh-file .a { display:none; } }

/* ================================================================ CONTROL ROOM ================================================================ */
html[data-view="control"] {
  --font-display:"Chivo","Helvetica Neue",Arial,sans-serif;
  --font-body:"Chivo",system-ui,-apple-system,sans-serif;
  --font-mono:"Chivo Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --color-accent:#b45309; --color-accent-light:#d97706; --color-accent-dark:#92400e;
  --gradient-elegant:linear-gradient(135deg,#d97706 0%,#b45309 100%);
  --color-navy:#1c1f26; --color-charcoal:#2b303a; --color-slate:#4d5566; --color-gray:#6b7384;
  --color-off-white:#e1e5ec; --color-white:#ffffff; --color-light:#d3d8e0;
  --arch-card:#ffffff; --arch-card-bd:rgba(28,31,38,.12); --arch-ink:#1c1f26; --arch-sub:#4d5566;
  --view-bg:#e9ecf1; --view-nav:#ffffff; --rule:rgba(28,31,38,.14); --panel:#ffffff;
  --hero-bg:#e9ecf1; --hd-fg:#1c1f26; --hd-bg:#ffffff;
  --good:#15803d; --warn:#b45309; --info:#0e7490; --flow:#0e7490;
}
html[data-view="control"][data-theme="dark"] {
  --color-accent:#f5a524; --color-accent-light:#f7b955; --color-accent-dark:#d98b0f;
  --gradient-elegant:linear-gradient(135deg,#f5a524 0%,#d98b0f 100%);
  --color-navy:#e7eaf0; --color-charcoal:#c9cfda; --color-slate:#9aa3b5; --color-gray:#7d8699;
  --color-off-white:#1f232c; --color-white:#242934; --color-light:#2e3440;
  --arch-card:#1f232c; --arch-card-bd:rgba(231,234,240,.10); --arch-ink:#e7eaf0; --arch-sub:#9aa3b5;
  --view-bg:#171a21; --view-nav:#1f232c; --rule:rgba(231,234,240,.12); --panel:#1f232c;
  --hero-bg:#171a21; --hd-fg:#e7eaf0; --hd-bg:#1f232c;
  --good:#7ad39a; --warn:#f5a524; --info:#67c9e6; --flow:#67c9e6;
}
html[data-view="control"] h2 { font-weight:800; letter-spacing:-.02em; }
.vh-control { max-width:1180px; margin:0 auto; padding:14px 15px 36px; }
.vh-bar { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; font-family:var(--font-mono); font-size:12px; color:var(--color-slate); border-bottom:1px solid var(--rule); padding-bottom:10px; margin-bottom:18px; }
.vh-bar .ok { color:var(--good); }
.vh-bar .ok::before { content:''; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--good); margin-right:6px; box-shadow:0 0 0 3px rgba(122,211,154,.18); }
.vh-grid { display:grid; grid-template-columns:1.35fr 1fr; gap:18px; }
.vh-control h1 { font-family:var(--font-display); font-weight:800; font-size:clamp(30px,4vw,44px); line-height:1.02; letter-spacing:-.02em; color:var(--color-navy); margin:0 0 10px; text-wrap:balance; }
.vh-control h1 em { font-style:normal; color:var(--color-accent); }
.vh-control .sub { color:var(--color-slate); font-size:15px; line-height:1.55; max-width:56ch; margin:0 0 16px; }
.vh-map { background:var(--panel); border:1px solid var(--rule); border-radius:8px; padding:12px; }
.vh-map svg { width:100%; height:auto; display:block; }
.vh-map a rect { transition:stroke .15s; }
.vh-map a:hover rect, .vh-map a:focus rect { stroke:var(--color-accent); stroke-width:2; }
.vh-tiles { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; align-content:start; }
.vh-tile { background:var(--panel); border:1px solid var(--rule); border-radius:8px; padding:12px 14px; color:inherit; text-decoration:none; display:block; }
.vh-tile:hover .v { color:var(--color-accent); }
.vh-tile b { display:block; font-family:var(--font-mono); font-weight:400; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--color-slate); margin-bottom:8px; }
.vh-tile .v { font-family:var(--font-display); font-weight:800; font-size:28px; line-height:1; letter-spacing:-.02em; color:var(--color-navy); font-variant-numeric:tabular-nums; transition:color .15s; }
.vh-tile .v small { font-family:var(--font-body); font-weight:400; font-size:12px; color:var(--color-slate); margin-left:6px; letter-spacing:0; }
.vh-tile .bar { height:6px; border-radius:3px; background:var(--rule); margin-top:10px; overflow:hidden; }
.vh-tile .bar i { display:block; height:100%; background:var(--color-accent); }
.vh-sys { grid-column:1/-1; background:var(--panel); border:1px solid var(--rule); border-radius:8px; }
.vh-sys a { display:grid; grid-template-columns:1fr auto; gap:10px; padding:10px 14px; border-bottom:1px solid var(--rule); font-size:14px; color:var(--color-navy); text-decoration:none; }
.vh-sys a:last-child { border-bottom:0; }
.vh-sys a:hover { color:var(--color-accent); }
.vh-pill { font-family:var(--font-mono); font-size:11px; line-height:1.6; padding:2px 8px; border-radius:10px; white-space:nowrap; }
.p-live { background:rgba(122,211,154,.18); color:var(--good); }
.p-prod { background:rgba(245,165,36,.18); color:var(--warn); }
.p-res { background:rgba(103,201,230,.18); color:var(--info); }
.flow { stroke-dasharray:6 6; animation:vhDash 1.4s linear infinite; }
@keyframes vhDash { to { stroke-dashoffset:-24; } }
@media (max-width:900px) { .vh-grid { grid-template-columns:1fr; } }

/* ---------------------------------------------------------------- motion */
@media (prefers-reduced-motion: reduce) {
  .flow { animation:none; }
  .vh-city .b { transition:none; }
  .vh-city .b:hover, .vh-city .b:focus { transform:none; }
}