/* anchored_scale.css — styles for <AnchoredScale> per the Claude Design mockup.
   Source: Pilot/v3/_anchored_scale_design/where-the-scales2/project/Anchored Scale Cards.html
   :root tokens (--ink-*, --brass-*, etc.) come from the existing styles.css. */

.page { max-width:1500px; margin:0 auto; }
.page-title { display:flex; justify-content:space-between; align-items:flex-end; border-bottom:1px solid var(--rule); padding-bottom:18px; margin:0 0 28px; }
.page-title h1 { font-family:"Cormorant Garamond",Georgia,serif; color:var(--paper); font-weight:600; font-size:44px; line-height:1; margin:0; }
.decknote { color:var(--text-dim); font-family:"JetBrains Mono",monospace; font-size:12px; letter-spacing:.1em; text-transform:uppercase; }

/* card chassis */
.scale-card { position:relative; width:1400px; max-width:100%; height:472px; margin:24px auto 36px; border:1px solid var(--rule); border-radius:22px; background:linear-gradient(145deg,rgba(28,35,48,.98),rgba(16,20,28,.98)); box-shadow:0 24px 70px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.035); overflow:hidden; touch-action:none; user-select:none; }
.scale-card:before { content:""; position:absolute; inset:0; background:radial-gradient(850px 220px at 50% 0%, rgba(212,166,87,.11), transparent 72%), linear-gradient(90deg, transparent, rgba(255,255,255,.018), transparent); pointer-events:none; }

/* card head */
.card-head { position:relative; z-index:2; display:grid; grid-template-columns:auto 1fr auto; gap:18px; align-items:center; padding:22px 26px 8px; }
.chip { font-family:"JetBrains Mono",monospace; font-size:12px; letter-spacing:.15em; color:var(--brass-hi); border:1px solid rgba(212,166,87,.35); border-radius:999px; padding:8px 11px; background:rgba(10,13,18,.55); text-transform:uppercase; }
.title { font-family:"Cormorant Garamond",Georgia,serif; font-size:30px; line-height:1; color:var(--paper); letter-spacing:.02em; }
.subtitle { font-size:13px; color:var(--text-dim); margin-top:3px; }
.sample { font-family:"JetBrains Mono",monospace; text-align:right; font-size:12px; color:var(--text-2); max-width:260px; }
.sample strong { display:block; font-family:"Cormorant Garamond",Georgia,serif; color:var(--paper); font-size:17px; font-weight:600; }

/* rail */
.rail-wrap { position:absolute; left:42px; right:42px; top:108px; height:252px; border:1px solid rgba(58,70,92,.75); border-radius:18px; background:linear-gradient(180deg, rgba(10,13,18,.58), rgba(7,9,13,.25)); overflow:hidden; cursor:crosshair; }
.bands { position:absolute; left:22px; right:22px; top:14px; height:44px; border-radius:11px; overflow:hidden; border:1px solid rgba(58,70,92,.45); }
.band { position:absolute; top:0; bottom:0; border-right:1px solid rgba(229,226,214,.08); display:flex; align-items:center; justify-content:center; font-family:"Cormorant Garamond",Georgia,serif; font-style:italic; font-size:14px; color:rgba(229,226,214,.56); white-space:nowrap; }
.band:nth-child(1) { background:var(--band-a); }
.band:nth-child(2) { background:var(--band-b); }
.band:nth-child(3) { background:var(--band-c); }
.band:nth-child(4) { background:var(--band-d); }
.band:nth-child(5) { background:var(--band-e); }

.axis { position:absolute; left:48px; right:48px; top:98px; height:2px; background:linear-gradient(90deg, transparent, rgba(212,166,87,.45), rgba(109,191,163,.45), transparent); box-shadow:0 0 18px rgba(212,166,87,.11); }
.axis:before, .axis:after { content:""; position:absolute; top:-4px; width:1px; height:10px; background:rgba(212,166,87,.45); }
.axis:before { left:0; }
.axis:after  { right:0; }

/* anchors */
.anchor { position:absolute; top:62px; text-align:center; z-index:3; }
.unit { font-family:"JetBrains Mono",monospace; font-size:11px; line-height:1.08; color:var(--paper-2); text-shadow:0 1px 0 #000; white-space:nowrap; transition:color .2s; }
.tick { width:1px; height:14px; margin:7px auto 5px; background:rgba(212,166,87,.55); position:relative; transition:background .2s; }
.tick:after { content:""; position:absolute; left:-3px; top:11px; width:7px; height:7px; border-radius:50%; background:rgba(212,166,87,.65); transition:background .2s; }
.glyphwrap { width:100%; height:56px; margin:0 auto; display:flex; align-items:flex-end; justify-content:center; position:relative; }
.glyph { max-height:54px; max-width:100%; width:auto; height:auto; display:block; filter:drop-shadow(0 2px 5px rgba(0,0,0,.4)); transition:filter .2s, transform .2s; }
.hint { font-family:"Cormorant Garamond",Georgia,serif; font-size:11px; font-style:italic; line-height:1.12; color:rgba(229,226,214,.46); margin-top:6px; white-space:normal; }

/* near-highlight (truth = verdigris, guess = brass) */
.anchor.truth-near .glyphwrap:before, .anchor.guess-near .glyphwrap:before { content:""; position:absolute; left:50%; top:50%; width:74px; height:74px; transform:translate(-50%,-50%); border-radius:50%; pointer-events:none; }
.anchor.truth-near .glyphwrap:before { background:radial-gradient(circle, rgba(109,191,163,.34), transparent 70%); }
.anchor.guess-near .glyphwrap:before { background:radial-gradient(circle, rgba(240,200,117,.30), transparent 70%); }
.anchor.truth-near .glyph { transform:scale(1.06); filter:drop-shadow(0 0 8px rgba(109,191,163,.55)) drop-shadow(0 2px 5px rgba(0,0,0,.4)); }
.anchor.truth-near .unit, .anchor.truth-near .hint { color:var(--verd); }
.anchor.truth-near .tick, .anchor.truth-near .tick:after { background:var(--verd); }
.anchor.guess-near .glyph { transform:scale(1.04); filter:drop-shadow(0 0 7px rgba(240,200,117,.5)) drop-shadow(0 2px 5px rgba(0,0,0,.4)); }
.anchor.guess-near .unit { color:var(--brass-hi); }
.anchor.guess-near .tick, .anchor.guess-near .tick:after { background:var(--brass-hi); }

/* markers (the player's needle + the truth marker) */
.marker { position:absolute; top:74px; left:0; z-index:5; transform:translateX(-50%); height:110px; pointer-events:none; }
.marker .stem { width:2px; height:80px; margin:0 auto; background:var(--brass-hi); box-shadow:0 0 14px rgba(240,200,117,.35); }
.marker .dot { width:15px; height:15px; border-radius:50%; background:var(--brass-hi); border:2px solid var(--ink-deep); box-shadow:0 0 16px rgba(240,200,117,.5); }
.marker.truth .stem { background:var(--verd); box-shadow:0 0 14px rgba(109,191,163,.4); }
.marker.truth .dot  { border-radius:3px; transform:rotate(45deg); background:var(--verd); box-shadow:0 0 18px rgba(109,191,163,.5); }

/* callout (revealed value cards) */
.callout { position:absolute; top:368px; z-index:6; transform:translateX(-50%); min-width:150px; max-width:200px; border:1px solid rgba(212,166,87,.30); border-radius:14px; background:rgba(10,13,18,.9); padding:9px 12px; box-shadow:0 16px 34px rgba(0,0,0,.4); text-align:center; }
.callout.truth { border-color:rgba(109,191,163,.42); }
.callout .eyebrow { font-family:"JetBrains Mono",monospace; font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-dim); }
.callout .val { font-family:"JetBrains Mono",monospace; font-size:18px; color:var(--paper); line-height:1.4; }
.callout.truth .val { color:var(--verd); }
.callout .near { font-family:"Cormorant Garamond",Georgia,serif; font-style:italic; color:var(--text-2); font-size:13px; line-height:1.1; }

.ratio { position:absolute; right:28px; bottom:18px; font-family:"JetBrains Mono",monospace; font-size:12px; color:var(--text-dim); z-index:6; }
.ratio b { color:var(--brass-hi); font-weight:500; }

.teach { position:absolute; left:26px; bottom:17px; right:300px; color:var(--text-dim); font-size:13px; line-height:1.4; z-index:6; }
.teach b { color:var(--paper-2); font-weight:600; }

.card-footer-tag { position:absolute; top:14px; right:18px; color:rgba(229,226,214,.13); font-family:"JetBrains Mono",monospace; font-size:78px; line-height:1; font-weight:600; letter-spacing:-.06em; z-index:1; pointer-events:none; }

/* temperature: rainbow gradient backdrop */
.tempgrad { position:absolute; left:48px; right:48px; top:90px; height:18px; border-radius:9px; opacity:.5; background:linear-gradient(90deg, #3a6fd8 0%, #36c5d8 16%, #5fc77a 33%, #e8d24a 50%, #e89a3c 66%, #d35a4a 82%, #f0e8d8 100%); }
.scale-temp .axis { background:linear-gradient(90deg, #3a6fd8, #36c5d8, #5fc77a, #e8d24a, #e89a3c, #d35a4a, #f0e8d8); opacity:.85; box-shadow:0 0 18px rgba(211,90,74,.18); }

/* band tints — extend the existing palette with two more so 5-band length card works */
:root {
  --band-a: rgba(212,166,87,.055);
  --band-b: rgba(109,191,163,.045);
  --band-c: rgba(211,90,74,.045);
  --band-d: rgba(240,200,117,.042);
  --band-e: rgba(141,152,194,.052);
}

@media print { .scale-card { break-inside:avoid; } }