/* The Dynamo: copper warmth balanced with aged bronze and verdigris. Loaded after page styles. */
:root {
  --ink-0: #1c1b18;
  --ink-1: #26231e;
  --ink-2: #32302a;
  --ink-3: #5c594b;
  --text-hi: #f7e9d4;
  --text-mid: #d3c6b4;
  --text-low: #ada596;
  --accent: #e38348;
  --accent-hi: #f8b27a;
  --accent-dim: rgba(227, 131, 72, .18);
  --on-accent: #282019;
  --ember: #e38348;
  --umber: #965a3c;
  --patina: #8faf9d;
  --brass: var(--accent);
  --brass-hi: var(--accent-hi);
  --brass-dim: var(--accent-dim);
  --brand-cogmachina: #e7ad70;
  --brand-damageport: #63cdb1;
  --brand-ravenbreath: #dc143c;
  --good: #94bc9b;
  --warn: #eba16b;
  --info: #abc3ad;
  --scroll-thumb: #777669;
  --radius: 5px;
  --font-head: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "DM Sans", "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", Consolas, monospace;
}
html { scroll-padding-top: 90px; }
body { background: var(--ink-0); color: var(--text-mid); font-size: 14.5px; }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; }
a { color: var(--accent-hi); }
h1, h2, h3 { letter-spacing: .012em; }
.shell-body { grid-template-columns: 236px minmax(0,1fr); }
.topbar {
  height: 74px; gap: clamp(16px,2.4vw,36px); padding: 0 24px;
  background: linear-gradient(100deg, #302820, #292821 55%, #343025);
  border-bottom: 1px solid rgba(191,143,99,.47);
  box-shadow: 0 7px 28px rgba(0,0,0,.2);
}
.topbar .brand { gap: 8px; flex: none; }
.cogworks-art { display: block; width: 57px; height: 57px; line-height: 0; flex: none; }
.cogworks-art svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cogworks-brand .brand-copy { display: grid; gap: 1px; line-height: 1; font-size: inherit; }
.cogworks-brand strong { color: var(--text-hi); font: 700 1.68rem/.89 var(--font-head); letter-spacing: .07em; }
.cogworks-brand small { color: var(--accent); font: 500 .52rem/1.2 var(--font-mono); letter-spacing: .11em; white-space: nowrap; }
.site-switch { gap: 3px; }
.site-switch a {
  padding-inline: clamp(10px,1.3vw,19px); font: 500 .7rem/1.3 var(--font-mono);
  letter-spacing: .045em; text-transform: uppercase; border-bottom-width: 3px;
}
.site-switch a.on { background: linear-gradient(to top, rgba(217,135,80,.15), transparent 62%); }
.site-switch a.estate-cogmachina.on { background: linear-gradient(to top, rgba(231,173,112,.19), transparent 62%); }
.site-switch a.estate-damageport.on { background: linear-gradient(to top, rgba(99,205,177,.1), transparent 55%); }
.site-switch a.estate-ravenbreath.on { background: linear-gradient(to top, rgba(220,20,60,.1), transparent 55%); }
.topbar-who { min-width: 0; white-space: nowrap; font: 500 .76rem var(--font-mono); }
.topbar-who .who { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--text-mid); }
.topbar-who a { flex: none; color: var(--text-low); }
.topbar-who a:hover { color: var(--accent-hi); }
.side { padding: 22px 12px 35px; gap: 18px; background: linear-gradient(180deg, #312c25, #292b25 66%); border-right: 1px solid #746d54; }
.side > nav { top: 96px; }
.side nav { gap: 3px; }
.side nav a { border-radius: 3px; padding: 9px 12px; font-size: .87rem; border-left: 2px solid transparent; }
.side nav a:hover { background: rgba(166,155,113,.13); }
.side nav a.on {
  color: #f8e8ca; background: linear-gradient(90deg, rgba(150,90,60,.36), rgba(103,147,111,.25));
  border-left-color: var(--accent); font-weight: 700;
}
.side nav .nav-group {
  color: #d1ad87; font: 600 .64rem/1.4 var(--font-mono);
  letter-spacing: .15em; padding: 17px 12px 6px; border-top: 1px solid rgba(176,162,120,.2);
}
.side nav .nav-group:hover { color: var(--accent-hi); }
.nav-caret { opacity: .65; }
.main {
  min-width: 0; padding: 38px clamp(24px,3.2vw,54px) 80px;
  background: radial-gradient(950px 560px at 93% 0, rgba(150,90,60,.17), transparent 72%),
    radial-gradient(750px 540px at 5% 100%, rgba(103,147,111,.14), transparent 72%),
    repeating-linear-gradient(90deg, transparent 0 139px, rgba(255,203,162,.014) 139px 140px),
    #1c1b18;
}
.page-top { padding: 2px 0 23px; margin-bottom: 25px; border-bottom: 1px solid rgba(176,162,120,.36); }
.page-top::before {
  content: "THE DYNAMO / OPERATIONS"; display: block; margin-bottom: 8px;
  color: var(--accent); font: 600 .62rem var(--font-mono); letter-spacing: .15em;
}
.ops-top::before { flex: 0 0 100%; margin-bottom: 0; }
.ops-top > div { min-width: 0; flex: 1 1 500px; }
.ops-top > .ops-pick { flex: 0 1 425px; }
.page-top h1 { font: 700 clamp(2.5rem,3.6vw,3.7rem)/.98 var(--font-head); text-transform: uppercase; }
.page-top p { margin-top: 8px; color: var(--text-low); font-size: .93rem; }
.tiles { gap: 12px; margin-bottom: 22px; }
.tile {
  position: relative; background: linear-gradient(145deg, rgba(150,90,60,.22), transparent 70%), var(--ink-2);
  border: 1px solid var(--ink-3); border-top: 2px solid #e3905b;
  border-radius: 4px; padding: 17px 19px 19px; min-height: 103px;
}
.tiles .tile:nth-child(even) { border-top-color: var(--patina); background: linear-gradient(145deg, rgba(103,147,111,.2), transparent 70%), var(--ink-2); }
.tiles-ops .tile { border-top-color: rgba(143,175,157,.9); background: linear-gradient(145deg, rgba(103,147,111,.17), transparent 67%), var(--ink-2); }
.tiles-ops .tile:nth-child(even) { border-top-color: rgba(227,131,72,.85); }
.tile-link:hover { background-color: #414039; border-color: var(--patina); transform: translateY(-1px); }
.tile-n { font: 700 clamp(2rem,2.4vw,2.7rem)/1 var(--font-head); letter-spacing: .02em; color: var(--text-hi); }
.tile-l { color: #c0bba9; font-size: .79rem; line-height: 1.45; margin-top: 8px; }
.panel, .modal-content { border-radius: 4px; border-color: var(--ink-3); background: linear-gradient(150deg, rgba(103,147,111,.08), transparent 58%), var(--ink-2); }
.panel { padding: 22px 24px; box-shadow: 0 10px 30px rgba(0,0,0,.075); }
.panel h2, .modal-title { font: 700 1.52rem/1.1 var(--font-head); text-transform: uppercase; letter-spacing: .025em; }
.panel.is-collapsible > h2:hover { color: var(--accent-hi); }
table { font-size: .87rem; }
th { color: #dbc299; font: 600 .64rem var(--font-mono); letter-spacing: .09em; }
td { border-bottom-color: rgba(183,181,154,.17); }
tbody tr:hover td { background-color: rgba(143,175,157,.09); }
.chip { border-radius: 3px; font: 600 .66rem/1.5 var(--font-mono); letter-spacing: .035em; }
.chip-estate-cogmachina { background: var(--accent-dim); }
.btn, .btn-mini, .mbtn, .auth-card button { border-radius: 3px; }
.btn { font: 700 .95rem var(--font-head); text-transform: uppercase; letter-spacing: .05em; }
.btn-mini { font: 600 .71rem var(--font-mono); }
.ctl-label, .auth-label { font: 600 .67rem var(--font-mono); letter-spacing: .09em; }
input, textarea, select { accent-color: var(--accent); }
.ctl input:focus, .ctl textarea:focus, .ctl select:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-dim); }
.ops-filter, .line-switch { border-radius: 3px; }
.ops-filter a, .line-switch a { border-radius: 2px; }
.auth-body {
  background: radial-gradient(560px 500px at 50% 45%, rgba(150,90,60,.2), transparent 70%),
    repeating-linear-gradient(90deg, transparent 0 119px, rgba(255,255,255,.018) 119px 120px),
    #1c1b18;
  position: relative;
}
.auth-body::before {
  content: ""; position: fixed; width: min(630px,95vw); aspect-ratio: 1; top: 50%; left: 50%;
  transform: translate(-50%,-50%); border: 1px solid rgba(143,175,157,.32); border-radius: 50%;
  box-shadow: 0 0 0 35px rgba(227,131,72,.035), inset 0 0 0 28px rgba(103,147,111,.05);
  pointer-events: none;
}
.auth-card { width: min(450px,100%); position: relative; border-radius: 4px; border-color: rgba(181,151,111,.52); background: #32302a; }
.auth-head { padding: 32px 30px 27px; border-bottom-color: var(--ink-3); }
.auth-art { display: block; width: 108px; height: 108px; margin: 0 auto 10px; line-height: 0; }
.auth-art svg { display: block; width: 100%; height: 100%; }
.auth-kicker { color: var(--accent); font: 600 .64rem/1.5 var(--font-mono); letter-spacing: .13em; margin-bottom: 6px; }
.auth-card h1 { font: 700 3.5rem/.95 var(--font-head); letter-spacing: .065em; margin-bottom: 6px; }
.auth-sub { color: var(--text-mid); font-size: .85rem; }
.auth-main { padding: 28px 30px 33px; }
.auth-card input[type="email"], .auth-card input[type="text"] { border-radius: 3px; padding: 12px 13px; }
.auth-card button { font: 700 1.05rem var(--font-head); text-transform: uppercase; letter-spacing: .07em; padding: 12px 16px; }
.auth-dev, .auth-err { border-radius: 3px; }
@media (max-width: 1060px) {
  .topbar { gap: 14px; padding-inline: 15px; }
  .site-switch a { padding-inline: 9px; font-size: .63rem; }
  .cogworks-brand strong { font-size: 1.42rem; }
  .shell-body { grid-template-columns: 208px minmax(0,1fr); }
}
@media (max-width: 800px) {
  .topbar { height: auto; min-height: 72px; padding-block: 10px; }
  .site-switch { order: 3; width: 100%; height: auto; overflow-x: auto; }
  .site-switch a { flex: none; padding: 8px 10px; }
  .shell-body { grid-template-columns: 1fr; }
  .side { padding: 11px 14px; border-right: 0; border-bottom: 1px solid var(--ink-3); }
  .side > nav { position: static; }
  .side nav .nav-group { border-top: 0; }
  .main { padding: 24px 18px 55px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }