/* ============================================================================
   ClusterHack — "Aperture" design system.  Light × Apple, hacker DNA.
   ----------------------------------------------------------------------------
   One system for the whole product. Light paper canvas + Apple typography and
   materials (frosted glass, hairlines, soft depth, generous space) with a
   monospace technical layer (eyebrows, labels, metadata, ⌘K) and ONE confident
   amber accent carried over from the brand. Headlines = refined system sans
   (Apple); the terminal/command voice lives in the mono chrome (hacker).

   Layers:
     1. tokens            :root
     2. base elements     body / headings / links / tables / code
     3. components        .hk-*  (evolved to light; used by new surfaces)
     4. compat            Bootstrap (.btn/.form-control/.card…) + .app-* shell
   Load AFTER bootstrap so the compat layer wins.  Prefix: .hk-
   ========================================================================== */

:root{
  /* midnight navy paper + cool ink (single theme source of truth) */
  --hk-bg:#0A0F1E; --hk-bg-2:#0E1526;
  --hk-surface:#141C30; --hk-surface-2:#1A2440;
  --hk-ink:#E9EEF9; --hk-fg:#E9EEF9;
  --hk-muted:#93A2BE; --hk-dim:#63708B; --hk-faint:#3C4967;
  --hk-line:#232F49; --hk-line-2:#1A2338;
  /* one bold accent (brand amber, brightened to pop on navy) */
  --hk-amber:#FF8A3D; --hk-amber-ink:#FFBE92; --hk-amber-wash:rgba(255,138,61,.13);
  /* semantic (separate from accent, used sparingly) */
  --hk-cyan:#55D3DE; --hk-live:#5AD08C; --hk-magenta:#FF5FA2; --hk-red:#FF6B6B;
  --hk-info:#5B9DFF;
  /* frosted chrome + deep terminal (dark-theme surfaces) */
  --hk-nav:rgba(11,16,30,.72); --hk-deep:#070B16;
  /* type */
  --hk-sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --hk-mono:"SF Mono",ui-monospace,"JetBrains Mono","Cascadia Code",Menlo,Consolas,monospace;
  /* material */
  --hk-radius:14px; --hk-radius-sm:10px; --hk-radius-lg:20px;
  --hk-shadow:0 1px 2px rgba(0,0,0,.35),0 14px 32px -16px rgba(0,0,0,.6);
  --hk-shadow-lg:0 1px 2px rgba(0,0,0,.45),0 34px 70px -30px rgba(0,0,0,.78);
  --hk-maxw:1180px;
  --hk-ease:cubic-bezier(.2,.7,.3,1);
}

/* ---- base -------------------------------------------------------------- */
.hk *,.ch *{box-sizing:border-box}
.hk,.ch{
  margin:0;background:var(--hk-bg);color:var(--hk-fg);font-family:var(--hk-sans);
  line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  min-height:100vh;
  background-image:
    radial-gradient(1200px 560px at 82% -12%,var(--hk-amber-wash),transparent 60%),
    radial-gradient(900px 480px at 4% -6%,rgba(14,124,134,.05),transparent 55%);
  background-attachment:fixed;
}
.hk a,.ch a{color:inherit;text-decoration:none}
.hk-wrap{max-width:var(--hk-maxw);margin:0 auto;padding:0 24px}
.hk-mono{font-family:var(--hk-mono)} .hk-tnum{font-variant-numeric:tabular-nums}
.hk-eyebrow{font-family:var(--hk-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--hk-muted)}
.hk-eyebrow .p,.hk-prompt{color:var(--hk-amber)}
.hk-comment{font-family:var(--hk-mono);font-size:13px;color:var(--hk-dim)}
.hk-cursor{display:inline-block;width:.55ch;height:1.05em;background:var(--hk-amber);
  transform:translateY(.14em);margin-left:2px;border-radius:1px;animation:hk-blink 1.05s step-end infinite}
@keyframes hk-blink{50%{opacity:0}}

/* ---- top bar (frosted, Apple) ----------------------------------------- */
.hk-bar{position:sticky;top:0;z-index:40;background:var(--hk-nav);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--hk-line)}
.hk-bar .hk-wrap{display:flex;align-items:center;gap:22px;height:58px}
.hk-brand{font-family:var(--hk-mono);font-weight:600;font-size:15px;letter-spacing:-.01em;color:var(--hk-ink)}
.hk-brand .slash{color:var(--hk-faint)} .hk-brand .path{color:var(--hk-dim)}
.hk-nav{display:flex;gap:20px;margin-left:6px}
.hk-nav a{font-family:var(--hk-mono);font-size:13px;color:var(--hk-muted);padding:6px 0;border-bottom:1.5px solid transparent;transition:color .15s var(--hk-ease)}
.hk-nav a:hover,.hk-nav a.active{color:var(--hk-ink);border-bottom-color:var(--hk-amber)}
.hk-spacer{flex:1}
.hk-kbd{font-family:var(--hk-mono);font-size:12px;color:var(--hk-muted);border:1px solid var(--hk-line);
  background:var(--hk-surface);border-radius:9px;padding:6px 10px;display:inline-flex;gap:8px;align-items:center;cursor:pointer;transition:border-color .15s var(--hk-ease),box-shadow .15s var(--hk-ease)}
.hk-kbd:hover{border-color:var(--hk-faint);color:var(--hk-ink);box-shadow:var(--hk-shadow)}
.hk-kbd kbd{font-family:var(--hk-mono);background:var(--hk-bg);border:1px solid var(--hk-line);border-radius:5px;padding:1px 5px;color:var(--hk-muted)}

/* ---- headings & type (sans headlines = Apple) ------------------------- */
.hk-h1{font-family:var(--hk-sans);font-weight:700;letter-spacing:-.03em;line-height:1.03;
  font-size:clamp(34px,5.2vw,60px);margin:14px 0 18px;text-wrap:balance;color:var(--hk-ink)}
.hk-h1 .amber{color:var(--hk-amber)}
.hk-h2{font-family:var(--hk-sans);font-weight:680;font-weight:700;font-size:clamp(23px,3vw,34px);letter-spacing:-.02em;margin:0 0 12px;color:var(--hk-ink);text-wrap:balance}
.hk-sub{font-size:18px;color:var(--hk-muted);max-width:56ch;line-height:1.6}
.hk-sec-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:0 0 14px}
.hk-sec-head h2{font-family:var(--hk-mono);font-size:14px;font-weight:600;margin:0;color:var(--hk-ink);letter-spacing:-.01em}

/* ---- buttons ----------------------------------------------------------- */
.hk-btn{font-family:var(--hk-sans);font-size:14.5px;font-weight:590;font-weight:600;border-radius:11px;padding:11px 18px;
  border:1px solid var(--hk-line);cursor:pointer;display:inline-flex;align-items:center;gap:8px;background:var(--hk-surface);color:var(--hk-ink);
  transition:transform .14s var(--hk-ease),border-color .14s var(--hk-ease),box-shadow .14s var(--hk-ease),background .14s var(--hk-ease)}
.hk-btn:hover{transform:translateY(-1px);box-shadow:var(--hk-shadow)}
.hk-btn.primary{background:var(--hk-amber);color:#fff;border-color:transparent}
.hk-btn.primary:hover{box-shadow:0 10px 30px -10px rgba(234,88,12,.55)}
.hk-btn.dark{background:var(--hk-ink);color:var(--hk-bg);border-color:transparent}
.hk-btn.dark:hover{box-shadow:0 10px 30px -12px rgba(11,14,20,.5)}
.hk-btn.ghost{background:transparent}
.hk-btn.ghost:hover{border-color:var(--hk-faint)}
.hk-cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hk-hint{font-family:var(--hk-mono);font-size:12.5px;color:var(--hk-dim)}
.hk-hint kbd{color:var(--hk-amber)}

/* ---- terminal block (light, subtle) ----------------------------------- */
.hk-term{background:var(--hk-surface);border:1px solid var(--hk-line);border-radius:var(--hk-radius);overflow:hidden;box-shadow:var(--hk-shadow-lg)}
.hk-term-bar{display:flex;align-items:center;gap:9px;padding:11px 14px;border-bottom:1px solid var(--hk-line);
  font-family:var(--hk-mono);font-size:12px;color:var(--hk-muted);background:var(--hk-surface-2)}
.hk-dot{width:11px;height:11px;border-radius:50%;display:inline-block}
.hk-term-title{margin-left:8px;color:var(--hk-dim)}
.hk-term-body{padding:18px;font-family:var(--hk-mono);font-size:13.5px;line-height:1.85;color:var(--hk-ink);background:var(--hk-surface)}
.hk-ln{white-space:pre-wrap;word-break:break-word}
.hk-ln .t{color:var(--hk-dim)} .hk-ln .ok{color:var(--hk-live)} .hk-ln .run{color:var(--hk-amber)}
.hk-ln .arrow{color:var(--hk-cyan)} .hk-ln .q{color:var(--hk-ink)} .hk-ln .p{color:var(--hk-amber)}

/* ---- env stat strip ---------------------------------------------------- */
.hk-env{border-top:1px solid var(--hk-line);border-bottom:1px solid var(--hk-line);background:var(--hk-surface)}
.hk-env .hk-wrap{display:flex;flex-wrap:wrap;gap:10px 34px;padding:16px 24px;font-family:var(--hk-mono);font-size:13px}
.hk-env b{color:var(--hk-muted);font-weight:400}
.hk-env .v{color:var(--hk-ink)} .hk-env .v.a{color:var(--hk-amber)} .hk-env .v.c{color:var(--hk-cyan)}

/* ---- chips ------------------------------------------------------------- */
.hk-filters{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0 26px}
.hk-chip{font-family:var(--hk-mono);font-size:12.5px;color:var(--hk-muted);background:var(--hk-surface);
  border:1px solid var(--hk-line);border-radius:999px;padding:6px 13px;cursor:pointer;transition:all .14s var(--hk-ease)}
.hk-chip[aria-pressed="true"],.hk-chip.active{color:var(--hk-bg);background:var(--hk-ink);border-color:var(--hk-ink)}
.hk-chip:hover:not([aria-pressed="true"]):not(.active){color:var(--hk-ink);border-color:var(--hk-faint);box-shadow:var(--hk-shadow)}

/* ---- grid + cards ------------------------------------------------------ */
.hk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.hk-grid.two{grid-template-columns:repeat(2,1fr)}
.hk-card{position:relative;background:var(--hk-surface);border:1px solid var(--hk-line);border-radius:var(--hk-radius);
  padding:18px;overflow:hidden;box-shadow:var(--hk-shadow);transition:border-color .18s var(--hk-ease),transform .18s var(--hk-ease),box-shadow .18s var(--hk-ease)}
.hk-card:hover{border-color:var(--hk-faint);transform:translateY(-3px);box-shadow:var(--hk-shadow-lg)}
.hk-card:hover .hk-scan{opacity:1}
.hk-scan{position:absolute;inset:0;opacity:0;transition:opacity .2s var(--hk-ease);pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(234,88,12,.04) 0 1px,transparent 1px 3px)}
.hk-card .top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.hk-card .cmd{font-family:var(--hk-mono);font-size:12px;color:var(--hk-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hk-card .cmd .p{color:var(--hk-amber)}
.hk-card h3{font-family:var(--hk-sans);font-weight:680;font-weight:700;font-size:19px;letter-spacing:-.01em;margin:0 0 6px;color:var(--hk-ink)}
.hk-card h3 a:hover{color:var(--hk-amber)}
.hk-card p{margin:0 0 14px;color:var(--hk-muted);font-size:14px}
.hk-pill{font-family:var(--hk-mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  padding:3px 8px;border-radius:6px;border:1px solid var(--hk-line);white-space:nowrap;background:var(--hk-surface-2);color:var(--hk-muted)}
.hk-pill.win{color:var(--hk-amber-ink);border-color:rgba(234,88,12,.3);background:var(--hk-amber-wash)}
.hk-pill.live{color:var(--hk-live);border-color:rgba(22,136,74,.28);background:rgba(22,136,74,.07)}
.hk-pill.ship{color:var(--hk-cyan);border-color:rgba(14,124,134,.28);background:rgba(14,124,134,.06)}
.hk-pill.draft{color:var(--hk-dim)}
.hk-tags{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}
.hk-tag{font-family:var(--hk-mono);font-size:11.5px;color:var(--hk-cyan)}
.hk-card .foot{display:flex;align-items:center;justify-content:space-between;gap:12px;
  border-top:1px solid var(--hk-line);padding-top:12px;font-family:var(--hk-mono);font-size:12.5px;color:var(--hk-muted)}
.hk-votes{color:var(--hk-ink)} .hk-votes .up{color:var(--hk-amber)}
.hk-score{color:var(--hk-muted);display:flex;align-items:center;gap:8px}
.hk-meter{width:74px;height:6px;border-radius:3px;background:var(--hk-bg-2);overflow:hidden;border:1px solid var(--hk-line)}
.hk-meter i{display:block;height:100%;background:linear-gradient(90deg,var(--hk-amber),var(--hk-magenta))}
.hk-card .ev{font-family:var(--hk-mono);font-size:11px;color:var(--hk-dim);margin-top:10px}

/* ---- panels / forms ---------------------------------------------------- */
.hk-panel{background:var(--hk-surface);border:1px solid var(--hk-line);border-radius:var(--hk-radius);padding:22px;box-shadow:var(--hk-shadow)}
.hk-label{font-family:var(--hk-mono);font-size:12px;letter-spacing:.03em;text-transform:uppercase;color:var(--hk-muted);display:block;margin:0 0 6px}
.hk-input,.hk-textarea,.hk-select{width:100%;background:var(--hk-surface);border:1px solid var(--hk-line);border-radius:var(--hk-radius-sm);
  color:var(--hk-ink);font-family:var(--hk-sans);font-size:15px;padding:11px 13px;transition:border-color .14s var(--hk-ease),box-shadow .14s var(--hk-ease)}
.hk-input:focus,.hk-textarea:focus,.hk-select:focus{outline:none;border-color:var(--hk-amber);box-shadow:0 0 0 4px var(--hk-amber-wash)}
.hk-field{margin-bottom:16px}
.hk-table{width:100%;border-collapse:collapse;font-family:var(--hk-mono);font-size:13px}
.hk-table th{text-align:left;color:var(--hk-muted);font-weight:500;border-bottom:1px solid var(--hk-line);padding:10px 12px;font-size:12px;letter-spacing:.03em;text-transform:uppercase}
.hk-table td{border-bottom:1px solid var(--hk-line);padding:11px 12px;color:var(--hk-ink)}
.hk-kv{font-family:var(--hk-mono);font-size:13px;color:var(--hk-muted)}
.hk-kv b{color:var(--hk-ink);font-weight:600}

/* ---- callout band ------------------------------------------------------ */
.hk-band{margin:46px 0;border:1px solid var(--hk-line);border-radius:var(--hk-radius-lg);overflow:hidden;
  background:linear-gradient(120deg,var(--hk-surface),var(--hk-bg-2));box-shadow:var(--hk-shadow)}
.hk-band .in{padding:34px;display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center}
.hk-band p{color:var(--hk-muted);margin:0;max-width:46ch}
.hk-runbox{font-family:var(--hk-mono);font-size:13.5px;background:var(--hk-deep);color:#E8ECF2;border:1px solid var(--hk-line);
  border-radius:var(--hk-radius-sm);padding:16px 18px;line-height:1.9}
.hk-runbox .p{color:var(--hk-amber)} .hk-runbox .c{color:#7C8698} .hk-runbox .g{color:#5FD08A}

/* ---- footer ------------------------------------------------------------ */
.hk-footer{border-top:1px solid var(--hk-line);padding:26px 0 46px;margin-top:36px;background:var(--hk-surface)}
.hk-footer .hk-wrap{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;font-family:var(--hk-mono);font-size:12.5px;color:var(--hk-dim)}
.hk-footer .live{color:var(--hk-live)}
.hk-footer .live .d{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--hk-live);margin-right:7px;box-shadow:0 0 0 3px rgba(22,136,74,.15)}
.hk-footer a:hover{color:var(--hk-amber)}

/* ---- command palette (light, frosted) --------------------------------- */
.hk-cmdk{position:fixed;inset:0;z-index:80;display:none;background:rgba(20,24,32,.28);backdrop-filter:blur(4px)}
.hk-cmdk.open{display:block}
.hk-cmdk .box{max-width:560px;margin:12vh auto 0;background:rgba(20,28,48,.92);backdrop-filter:saturate(180%) blur(20px);
  border:1px solid var(--hk-line);border-radius:var(--hk-radius);overflow:hidden;box-shadow:var(--hk-shadow-lg)}
.hk-cmdk .in{display:flex;align-items:center;gap:10px;padding:15px 17px;border-bottom:1px solid var(--hk-line)}
.hk-cmdk .in .p{font-family:var(--hk-mono);color:var(--hk-amber)}
.hk-cmdk input{flex:1;background:transparent;border:0;outline:0;color:var(--hk-ink);font-family:var(--hk-mono);font-size:15px}
.hk-cmdk ul{list-style:none;margin:0;padding:8px;max-height:340px;overflow:auto}
.hk-cmdk li{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:var(--hk-radius-sm);cursor:pointer;font-family:var(--hk-mono);font-size:14px;color:var(--hk-ink)}
.hk-cmdk li .ic{color:var(--hk-cyan);width:16px;text-align:center}
.hk-cmdk li .k{margin-left:auto;color:var(--hk-dim);font-size:12px}
.hk-cmdk li[aria-selected="true"]{background:var(--hk-bg-2)}
.hk-cmdk li[aria-selected="true"] .ic{color:var(--hk-amber)}

@media(max-width:900px){
  .hk-grid,.hk-band .in,.hk-grid.two{grid-template-columns:1fr}
  .hk-nav{display:none}
}
@media(max-width:560px){.hk-grid{grid-template-columns:1fr}}
.hk :focus-visible,.ch :focus-visible{outline:2px solid var(--hk-amber);outline-offset:2px;border-radius:6px}
@media(prefers-reduced-motion:reduce){.hk-cursor{animation:none}.hk-card,.hk-btn,.hk-chip{transition:none}}

/* ============================================================================
   COMPAT LAYER — legacy Bootstrap pages (extends base.html / base_maine.html).
   Scoped to body.ch so it re-skins old markup to Aperture without rewrites.
   Loaded after bootstrap.min.css, so these win by source order.
   ========================================================================== */
body.ch{background:var(--hk-bg);color:var(--hk-ink);font-family:var(--hk-sans);line-height:1.55;-webkit-font-smoothing:antialiased}
body.ch h1,body.ch h2,body.ch h3,body.ch h4{font-family:var(--hk-sans);letter-spacing:-.02em;color:var(--hk-ink);font-weight:700}
body.ch h1{letter-spacing:-.03em}
body.ch p{color:var(--hk-ink)}
body.ch a{color:var(--hk-amber-ink)}
body.ch a:hover{color:var(--hk-amber)}
body.ch .text-muted{color:var(--hk-muted)!important}
body.ch hr{border-color:var(--hk-line)}
body.ch code,body.ch pre,body.ch kbd{font-family:var(--hk-mono)}
/* legacy base_maine assumes a dark bg via inline color:white on .container */
body.ch .container[style*="color: white"],body.ch .container[style*="color:white"]{color:var(--hk-ink)!important}
body.ch footer .text-white,body.ch .container[style*="white"] a{color:var(--hk-muted)!important}
/* Bootstrap buttons -> Aperture */
body.ch .btn{font-family:var(--hk-sans);font-weight:600;border-radius:11px;padding:9px 16px;transition:transform .14s var(--hk-ease),box-shadow .14s var(--hk-ease),background .14s var(--hk-ease)}
body.ch .btn:hover{transform:translateY(-1px)}
body.ch .btn-primary{background:var(--hk-amber);border-color:var(--hk-amber);color:#fff}
body.ch .btn-primary:hover,body.ch .btn-primary:focus{background:#d24e0a;border-color:#d24e0a;box-shadow:0 10px 26px -12px rgba(234,88,12,.55)}
body.ch .btn-success{background:var(--hk-live);border-color:var(--hk-live);color:#fff}
body.ch .btn-danger{background:var(--hk-red);border-color:var(--hk-red)}
body.ch .btn-secondary,body.ch .btn-dark{background:var(--hk-surface-2);border-color:var(--hk-line);color:var(--hk-ink)}
body.ch .btn-outline-secondary,body.ch .btn-outline-primary,body.ch .btn-outline-dark{background:var(--hk-surface);border:1px solid var(--hk-line);color:var(--hk-ink)}
body.ch .btn-outline-secondary:hover,body.ch .btn-outline-primary:hover,body.ch .btn-outline-dark:hover{background:var(--hk-surface);border-color:var(--hk-faint);color:var(--hk-ink);box-shadow:var(--hk-shadow)}
body.ch .btn-link{color:var(--hk-amber-ink)}
/* Bootstrap forms -> Aperture */
body.ch .form-control,body.ch .custom-select,body.ch textarea,body.ch input[type=text],body.ch input[type=email],body.ch input[type=password],body.ch input[type=number],body.ch input[type=url],body.ch input[type=search],body.ch input[type=date]{
  background:var(--hk-surface);border:1px solid var(--hk-line);border-radius:var(--hk-radius-sm);color:var(--hk-ink);padding:10px 13px;font-family:var(--hk-sans);font-size:15px}
body.ch .form-control:focus,body.ch .custom-select:focus,body.ch textarea:focus,body.ch input:focus{border-color:var(--hk-amber);box-shadow:0 0 0 4px var(--hk-amber-wash);outline:none}
body.ch label{font-weight:600;color:var(--hk-muted)}
/* Bootstrap surfaces */
body.ch .card,body.ch .list-group-item,body.ch .modal-content,body.ch .dropdown-menu{background:var(--hk-surface);border:1px solid var(--hk-line);border-radius:var(--hk-radius);color:var(--hk-ink);box-shadow:var(--hk-shadow)}
body.ch .card{overflow:hidden}
body.ch .badge{font-family:var(--hk-mono);font-weight:500;border-radius:6px;letter-spacing:.03em}
body.ch .badge-primary{background:var(--hk-amber-wash);color:var(--hk-amber-ink)}
body.ch .alert{border-radius:var(--hk-radius-sm);border:1px solid var(--hk-line)}
body.ch .table{color:var(--hk-ink)} body.ch .table th{color:var(--hk-muted);border-color:var(--hk-line)} body.ch .table td{border-color:var(--hk-line)}
body.ch .bg-white,body.ch .bg-light{background:var(--hk-surface)!important}
/* app-shell (base.html) */
body.ch .app-main{padding:34px 0 10px}
body.ch .app-footer{border-top:1px solid var(--hk-line);margin-top:46px;padding-top:26px;color:var(--hk-dim)}
body.ch .app-footer-kicker{font-family:var(--hk-mono);color:var(--hk-ink);letter-spacing:.02em}
body.ch .app-footer-description,body.ch .app-footer-year{color:var(--hk-muted)}