/* Aureon Editor Portal - shared styles (2026-10-16).
   Same direction as aureon_theme.css: a calm instrument. Dark ground, surfaces that step up in lightness, one silver action colour.
   Green / amber / red are used ONLY to mean in range / borderline / out of range. Instrument Serif for display and the big number,
   Manrope for interface text, JetBrains Mono for numbers. Nothing animates on its own except the two preview canvases the person
   starts; prefers-reduced-motion stops CSS motion. */
:root {
  --ground: #040405; --s1: #0b0c0d; --s2: #121314; --s3: #1a1b1d;
  --line: rgba(255,255,255,.08); --line-2: rgba(255,255,255,.16);
  --text: #f1f0eb; --text-2: #a7afab; --text-3: #8b928f; --silver: #d9dbda;
  --ok: #a9c9a0; --warn: #c9a876; --bad: #e08a7a;
  --display: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --ui: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --num: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  --r-card: 18px; --r-ctl: 12px;
}
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; background: var(--ground); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--text); font: 400 15px/1.55 var(--ui); text-rendering: optimizeLegibility; }
::selection { background: var(--silver); color: var(--ground); }
a { color: inherit; }
img, canvas { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--silver); color: var(--ground); padding: 8px 14px; border-radius: 999px; z-index: 100; }
.skip:focus { left: 12px; }

/* header */
.bar { position: sticky; top: 0; z-index: 50; background: rgba(4,4,5,.92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.bar-in { max-width: 1180px; margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; gap: 18px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--display); font-size: 1.35rem; letter-spacing: -.005em; }
.brand img { width: 24px; height: 24px; }
.bar nav { margin-left: auto; display: flex; gap: 2px; }
.bar nav a { text-decoration: none; padding: 8px 14px; border-radius: 999px; color: var(--text-2); font-weight: 500; font-size: 14px; }
.bar nav a:hover { color: var(--text); background: rgba(255,255,255,.05); }
.bar nav a[aria-current="page"] { color: var(--text); box-shadow: inset 0 -2px 0 var(--silver); border-radius: 0; }

/* layout */
main { max-width: 1180px; margin: 0 auto; padding: 44px 20px 80px; }
.back { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); text-decoration: none; font-size: 14px; font-weight: 500; margin-bottom: 22px; }
.back:hover { color: var(--text); }
.eyebrow { color: var(--text-3); font-size: 13px; font-weight: 600; margin: 0 0 10px; }
h1 { font: 400 clamp(2.2rem, 4.6vw, 3.4rem)/1.06 var(--display); letter-spacing: -.012em; margin: 0 0 14px; text-wrap: balance; }
h2 { font: 400 clamp(1.5rem, 2.4vw, 1.9rem)/1.12 var(--display); letter-spacing: -.01em; margin: 0 0 12px; text-wrap: balance; }
h3 { font: 600 16px/1.35 var(--ui); margin: 0 0 6px; }
.lede { color: var(--text-2); max-width: 62ch; margin: 0 0 32px; font-size: 16px; text-wrap: pretty; }
p, li { text-wrap: pretty; }
.muted { color: var(--text-2); }
.small { font-size: 13px; color: var(--text-3); }
.num { font-family: var(--num); font-variant-numeric: tabular-nums; }

/* cards */
.card { background: var(--s1); border: 1px solid var(--line); border-radius: var(--r-card); padding: 22px; }
.card.link { display: flex; flex-direction: column; gap: 14px; text-decoration: none; transition: background .15s, border-color .15s; }
.card.link:hover { background: var(--s2); border-color: var(--line-2); }
.card.link:active { background: var(--s3); }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tag { display: inline-block; align-self: flex-start; font-size: 12.5px; font-weight: 600; padding: 3px 11px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--text-2); }
.tag.first { color: var(--warn); border-color: rgba(201,168,118,.5); }
.thumb { position: relative; height: 150px; border-radius: 12px; background: var(--s2); border: 1px solid var(--line); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.thumb .big { font: 400 64px/1 var(--display); color: var(--text); }
.thumb .scanline { position: absolute; left: 0; right: 0; height: 2px; background: var(--silver); top: 30%; opacity: .85; }
.thumb .scantext { position: absolute; bottom: 14px; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.thumb .lines { width: 56%; display: grid; gap: 7px; }
.thumb .lines i { display: block; height: 7px; border-radius: 4px; background: var(--s3); position: relative; }
.thumb .lines i::after { content: ''; position: absolute; inset: 0; border-radius: 4px; background: var(--ok); width: var(--w); }
.cta-row { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; color: var(--text); }
@media (prefers-reduced-motion: no-preference) { .thumb .scanline { animation: sweep 2.4s ease-in-out infinite alternate; } }
@keyframes sweep { from { top: 14%; } to { top: 80%; } }

/* controls */
.btn { appearance: none; border: 0; cursor: pointer; font: 600 14px/1 var(--ui); padding: 14px 22px; border-radius: 999px; background: var(--silver); color: var(--ground); display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; transition: background .15s, transform .08s; }
.btn:hover { background: #fff; } .btn:active { transform: scale(.98); }
.btn[disabled] { opacity: .4; cursor: not-allowed; transform: none; }
.btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--line-2); }
.btn.ghost:hover { background: rgba(255,255,255,.06); }
.btn.block { width: 100%; }
.field { margin: 0 0 24px; }
.field > label, .field > .lab { display: block; font-size: 13px; font-weight: 600; color: var(--text-2); margin-bottom: 8px; }
.drop { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 92px; border: 1px dashed var(--line-2); border-radius: var(--r-ctl); background: var(--s1); color: var(--text-2); cursor: pointer; padding: 16px; font-weight: 600; transition: background .15s, border-color .15s; }
.drop:hover, .drop.over { background: var(--s2); border-color: var(--text-3); }
.drop.has { color: var(--ok); border-style: solid; }
input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
input[type=range] { width: 100%; accent-color: var(--silver); height: 28px; }
select, .seg button, input[type=text] { font: 500 14px/1.2 var(--ui); color: var(--text); background: var(--s1); border: 1px solid var(--line-2); border-radius: var(--r-ctl); padding: 12px 14px; }
select { width: 100%; }
.val { font-family: var(--num); font-variant-numeric: tabular-nums; color: var(--text); }
.row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.seg { display: inline-flex; gap: 4px; padding: 4px; background: var(--s1); border: 1px solid var(--line); border-radius: 999px; }
.seg button { border: 0; background: transparent; border-radius: 999px; padding: 9px 16px; color: var(--text-2); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--silver); color: var(--ground); font-weight: 600; }
.seg button:hover:not([aria-pressed="true"]) { color: var(--text); background: rgba(255,255,255,.06); }

/* tool layout */
.tool { display: grid; grid-template-columns: minmax(300px, 400px) 1fr; gap: 36px; align-items: start; }
.panel { min-width: 0; }
.stage { position: sticky; top: 76px; display: grid; gap: 16px; justify-items: center; }
.stage .frame { width: 100%; max-width: 560px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--s1); padding: 14px; }
.stage .frame.tall { max-width: 360px; }
.stage canvas { width: 100%; height: auto; border-radius: 10px; background: #000; }
.stage .actions { display: grid; gap: 10px; width: 100%; max-width: 560px; }
.note { background: var(--s1); border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 14px 16px; font-size: 13.5px; color: var(--text-2); }
.note b { color: var(--text); }
.chips { display: grid; gap: 8px; }
.metric { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; background: var(--s1); border: 1px solid var(--line); border-radius: var(--r-ctl); }
.metric .nm { font-size: 14px; font-weight: 500; }
.metric .seg { padding: 3px; } .metric .seg button { padding: 6px 10px; font-size: 12.5px; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.dot.ok { background: var(--ok); } .dot.warn { background: var(--warn); } .dot.bad { background: var(--bad); }

/* guidelines */
.toc { display: grid; gap: 4px; margin: 0 0 40px; padding: 0; list-style: none; }
.toc a { display: flex; gap: 12px; padding: 12px 14px; border-radius: var(--r-ctl); text-decoration: none; color: var(--text-2); }
.toc a:hover { background: var(--s1); color: var(--text); }
.toc .n { font-family: var(--num); color: var(--text-3); }
.sec { margin: 0 0 56px; scroll-margin-top: 80px; }
.sec .no { font-family: var(--num); color: var(--text-3); font-size: 13px; }
.fmt { margin: 0 0 22px; }
.steps { list-style: none; margin: 14px 0; padding: 0; display: grid; gap: 14px; }
.steps li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; }
.steps .i { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-2); display: flex; align-items: center; justify-content: center; font: 500 13px var(--num); color: var(--text-2); }
.timeline { position: relative; height: 56px; margin: 22px 0 30px; border-radius: 12px; background: var(--s2); border: 1px solid var(--line); overflow: hidden; }
.timeline .seg-a { position: absolute; top: 0; bottom: 0; background: rgba(169,201,160,.16); border-right: 2px solid var(--ok); }
.timeline .seg-b { position: absolute; top: 0; bottom: 0; background: rgba(201,168,118,.14); border-right: 2px solid var(--warn); }
.timeline .tick { position: absolute; bottom: 6px; font: 500 12px var(--num); color: var(--text-2); transform: translateX(4px); }
.timeline .lbl { position: absolute; top: 8px; left: 10px; font-size: 12.5px; font-weight: 600; color: var(--text); }
.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.do, .dont { border-radius: var(--r-card); padding: 20px; border: 1px solid var(--line); background: var(--s1); }
.do h3 { color: var(--ok); } .dont h3 { color: var(--bad); }
.rule { padding: 16px 18px; background: var(--s1); border: 1px solid var(--line); border-radius: var(--r-ctl); margin: 0 0 12px; }
.copy { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; background: var(--s1); border: 1px solid var(--line); border-radius: var(--r-ctl); margin: 0 0 8px; width: 100%; text-align: left; color: var(--text); font: 500 14.5px/1.4 var(--ui); cursor: pointer; }
.copy:hover { background: var(--s2); border-color: var(--line-2); }
.copy span.c { color: var(--text-3); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.draft { display: inline-block; font-size: 12.5px; font-weight: 600; color: var(--warn); border: 1px solid rgba(201,168,118,.5); border-radius: 999px; padding: 3px 11px; margin-left: 8px; vertical-align: middle; }
.callout { border-left: 2px solid var(--warn); padding: 4px 0 4px 16px; margin: 18px 0; color: var(--text-2); }

@media (max-width: 900px) {
  .grid3, .cols2 { grid-template-columns: 1fr; }
  .tool { grid-template-columns: 1fr; }
  .stage { position: static; }
  .bar nav a { padding: 8px 10px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } }