/* The Spectator — shared stylesheet */
:root{
  /* Main Palette */
  --light-shades:  #F3E9D4;
  --light-accent:  #C8922E;
  --main-brand-color: #8C2A1B;
  --dark-accent:   #6E1F13;
  --dark-shades:   #241F1C;

  /* Resource Legend Palette — manufactured goods */
  --res-concrete:    #C88000;  /* amber-yellow     */
  --res-steel:       #2C4A6A;  /* deep blue-gray   */
  --res-paper:       #1A5C22;  /* deep green       */
  --res-oil:         #5C2E10;  /* dark brown       */
  --res-bread:       #B87000;  /* deep golden      */
  --res-steak:       #8C2828;  /* deep red         */
  --res-cooked-fish: #1A70A0;  /* ocean blue       */
  --res-heavy-ammo:  #4A1080;  /* dark purple      */
  --res-ammo:        #7030A0;  /* medium purple    */
  --res-light-ammo:  #A060C0;  /* light purple     */
  --res-cocain:      #7A8800;  /* deep yellow-green*/

  /* Resource Legend Palette — raw materials */
  --res-limestone:   #E8CC80;  /* pale yellow      */
  --res-iron:        #8AAABB;  /* pale blue-gray   */
  --res-wood:        #78A878;  /* pale sage        */
  --res-petroleum:   #A87858;  /* pale tan         */
  --res-grain:       #DEC870;  /* pale straw       */
  --res-livestock:   #D09090;  /* pale pink        */
  --res-fish:        #80C0E0;  /* pale sky         */
  --res-lead:        #505060;  /* dark gray        */
  --res-coca:        #B8CC58;  /* pale yellow-green*/


  /* Semantic tokens derived from palette */
  --paper:  var(--light-shades);
  --ink:    var(--dark-shades);
  --ox:     var(--main-brand-color);
  --ox-d:   var(--dark-accent);
  --wheat:  var(--light-accent);
  --olive:#3B6D11; --rule:rgba(36,31,28,.28);
  --ledger:#EADDBF; --card:#FBF4E2;
}
*{box-sizing:border-box}
body{margin:0; background:var(--paper); color:var(--ink);
  font-family:"Source Serif 4",Georgia,serif; font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased}
.sheet{max-width:980px; margin:0 auto; padding:36px 22px 70px}
.masthead{border-top:3px solid var(--ink); border-bottom:1px solid var(--ink); padding:8px 0 12px; text-align:center; margin-bottom:26px}
.masthead .paper{font-family:"Playfair Display",serif; font-weight:900; font-size:14px; letter-spacing:.42em; text-transform:uppercase; margin-left:.42em}
.masthead a.paper{color:inherit; text-decoration:none}
.masthead a.paper:hover{text-decoration:underline}
h1{font-family:"Playfair Display",serif; font-weight:900; font-size:clamp(28px,5vw,40px); margin:0 0 6px; letter-spacing:-.01em}
.sub{font-style:italic; color:#3a322d; margin:0 0 26px}
.grid{display:grid; gap:20px; grid-template-columns:1fr; align-items:start}
@media(min-width:880px){ .grid{grid-template-columns:340px 1fr} }
.grid.viewonly{grid-template-columns:1fr}
.grid.viewonly #controls{display:none}
.tablewrap{overflow-x:auto}
.card{background:var(--card); border:1px solid var(--ink); padding:18px}
.card h2{font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--ox); margin:0 0 14px; border-bottom:1px solid var(--rule); padding-bottom:8px}
.card h2:not(:first-child){margin-top:24px}
.fields{display:grid; grid-template-columns:1fr 1fr; gap:12px 14px}
.fields+.fields{margin-top:12px}
.field{display:flex; flex-direction:column; gap:4px}
.field.wide{grid-column:1 / -1}
label{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ox-d)}
input,select{font-family:"IBM Plex Mono",monospace; font-size:14px; padding:7px 8px; border:1px solid var(--rule); background:#fff; color:var(--ink); border-radius:2px; width:100%}
input:focus,select:focus{outline:2px solid var(--wheat); outline-offset:-1px}
input[readonly]{background:var(--ledger); color:#5a5147; cursor:default}
input[readonly]:focus{outline:none}
.copybtn{margin-top:8px; width:100%; cursor:pointer; border:1px solid var(--ink); background:var(--ink); color:var(--paper); padding:9px; font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; border-radius:2px}
.copybtn:hover{background:var(--ox-d)}
#link{font-size:11px; color:#555}
.chartcard h2{text-align:left}
.legend{display:flex; flex-wrap:wrap; gap:8px 16px; font-family:"IBM Plex Mono",monospace; font-size:12px; margin-bottom:12px}
.legend span{display:flex; align-items:center; gap:7px}
.legend .legend-item{cursor:pointer; transition:opacity .12s}
.legend.dimmed .legend-item{opacity:.2}
.legend.dimmed .legend-item.hovered{opacity:1}
#ov-legend{display:none}
#legend{display:none}
#overview-table tbody tr{cursor:pointer; transition:opacity .12s}
#overview-table.dimmed tbody tr{opacity:.25}
#overview-table.dimmed tbody tr.hov{opacity:1}
#readout tbody tr{cursor:default; transition:opacity .12s}
#readout.dimmed tbody tr{opacity:.25}
#readout.dimmed tbody tr.hov{opacity:1}
.sw{width:20px; height:10px; border-radius:2px; display:inline-block}
.chartbox{position:relative; width:100%; height:400px}
table{width:100%; border-collapse:collapse; margin-top:16px; font-family:"IBM Plex Mono",monospace; font-size:12px}
th,td{text-align:right; padding:6px 8px; border-bottom:1px solid var(--rule)}
th{font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ox-d)}
th:first-child,td:first-child{text-align:left}
td .dot{display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:6px; vertical-align:middle}
td.pos{color:var(--olive)} td.neg{color:var(--ox)}
.be-hi{color:var(--olive)} .be-lo{color:var(--ox)} .be-na{color:#9a8f7d}