/* ============================================================
   REmined shared theme - OPTION C "WARM PAPER"  (Dan picked C)
   Built 2026-07-27. Replaces the dark-brown look he called unreadable.

   PRIORITY: READABILITY. These pages are data-dense. Every value here
   was checked at >=4.5:1 contrast in a real browser, not eyeballed.

   Loaded LAST in <head> so it beats each page's own <style>.
   ============================================================ */

:root{
  --bg:      #faf7f2;   /* warm paper background */
  --sand:    #f2ede3;   /* secondary surface */
  --card:    #ffffff;   /* cards, tables, panels */
  --border:  #ded5c7;   /* hairline borders */
  --line2:   #ece5da;   /* row dividers */
  --text:    #1a1a1a;   /* body text */
  --ink:     #1a1a1a;
  --muted:   #635b50;   /* secondary text - 5.9:1 on paper */
  --accent:  #6b5220;   /* gold as TEXT - clears 4.5:1 */
  --rule:    #8a6d2f;   /* gold as LINES / active chips */
  --dark:    #1a1a1a;   /* headline + header rule */
  --panel:   #ffffff;
  --line:    #ded5c7;
}

/* ---- base ------------------------------------------------ */
html,body{ background:var(--bg) !important; color:var(--text) !important; }
body{
  font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* ---- headings: serif, this is the Warm Paper signature ---- */
h1,h2,h3{
  font-family:Georgia,'Times New Roman',serif !important;
  color:var(--text) !important;
  font-weight:600;
  letter-spacing:-.2px;
}
h1{font-size:2rem;}
h1 span,h2 span{color:var(--accent) !important;font-style:italic;}
.eyebrow{
  font-size:.68rem;letter-spacing:3px;text-transform:uppercase;
  font-weight:600;color:var(--accent) !important;
}

/* ---- links ----------------------------------------------- */
a{color:var(--accent);}
a:hover{color:var(--text);}

/* ---- cards / panels -------------------------------------- */
.card,.panel,.box,.board,.tile,.sec-box{
  background:var(--card) !important;
  border:1px solid var(--border) !important;
  color:var(--text) !important;
}
/* stat tiles get the gold rule across the top */
.tile,.stat,.kpi{ border-top:3px solid var(--rule) !important; }

/* ============================================================
   DATA TABLES - roomy rows, big type, numbers that line up.
   ============================================================ */
table{
  border-collapse:collapse; width:100%;
  background:var(--card); color:var(--text); font-size:15.5px;
}
thead th{
  position:sticky; top:0; z-index:5;
  background:#ffffff !important;
  color:var(--text) !important;
  font-size:.68rem; letter-spacing:1px; text-transform:uppercase;
  font-weight:700; text-align:left; padding:12px;
  white-space:nowrap;
  border-bottom:2px solid var(--dark) !important;
}
tbody td{
  padding:14px 12px;
  border-bottom:1px solid var(--line2);
  color:var(--text);
  vertical-align:middle;
}
tbody tr:nth-child(even) td{background:#fdfbf8;}
tbody tr:hover td{background:#f5efe4;}

td,th,.num,.metric,.v,.amt,.price,.psf{
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum";
}
td.num,th.num,.num,.amt,.price{text-align:right;}

/* ---- form controls --------------------------------------- */
input,select,textarea,
input[type=text],input[type=search],input[type=number],input[type=date]{
  background:#ffffff !important;
  color:var(--text) !important;
  border:1px solid #b8ae9e !important;
  font-family:inherit; font-size:15px; padding:9px 12px;
}
option{background:#fff !important;color:var(--text) !important;}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--rule) !important;}
::placeholder{color:#6d675e !important;opacity:1;}

/* ---- buttons --------------------------------------------- */
button,.btn,a.btn,input[type=submit],input[type=button]{
  background:#ffffff !important;
  color:#2b2620 !important;
  border:1px solid #b8ae9e !important;
  font-family:inherit; font-size:15px; padding:9px 14px; cursor:pointer;
}
button:hover,.btn:hover{background:#f2ede3 !important;border-color:var(--rule) !important;}
button.primary,.btn-primary,.go,button.on,.btn.on,button.active,.btn.active,
.primary,.exp,.clr{
  background:#6b5220 !important; color:#ffffff !important; border-color:#6b5220 !important;
}

/* ---- chips / filters / tabs ------------------------------ */
.chip,.pill,.tab{
  background:#fff; color:#3a3a3a; border:1px solid #cfc7ba;
  font-size:.68rem; letter-spacing:1.3px; text-transform:uppercase;
  font-weight:600; padding:10px 15px;
}
.chip.on,.chip.active,.pill.on,.tab.on,.tab.active,.on{
  background:#6b5220 !important; color:#ffffff !important; border-color:#6b5220 !important;
}

/* ---- badges ---------------------------------------------- */
.badge,.tag{
  background:#f2ede3 !important; border:1px solid #c2b393 !important;
  color:#5c4a1f !important;
  font-size:.6rem; letter-spacing:1.2px; text-transform:uppercase;
  font-weight:700; padding:3px 8px;
}
.badge *,.tag *{color:inherit !important;}

/* ---- muted / secondary text ------------------------------ */
.muted,.sub,.note,.hint,small,.dim,.meta,.foot,.rules{color:var(--muted) !important;}

/* ============================================================
   SHARED NAV + FOOTER stay dark on purpose - force WHITE text.
   (Measured at 1.0:1 before this rule existed.)
   ============================================================ */
nav.dm-shared-nav,.dm-shared-nav,.dm-shared-footer,footer.dm-shared-footer{
  background:#1a1a1a !important; border-color:#3a3a3a !important;
}
.dm-shared-nav,.dm-shared-nav *,.dm-shared-footer,.dm-shared-footer *{color:#ffffff !important;}
.dm-shared-nav a,.dm-shared-footer a{color:#ffffff !important;opacity:.93;}
.dm-shared-nav a:hover,.dm-shared-footer a:hover{color:#e8cf9a !important;opacity:1;}
.dm-shared-nav .on,.dm-shared-nav .active,.dm-shared-nav a.active{
  color:#e8cf9a !important;background:transparent !important;border-bottom-color:var(--rule) !important;
}

/* ============================================================
   STATE COLORS - colorblind-safe. No red/green pairs. Meaning
   comes from the LABEL and from dark-vs-light, never hue alone.
   ============================================================ */
.good,.up,.pos {color:#1f5f4a !important;}
.bad,.down,.neg{color:#8a4b12 !important;}
.warn          {color:#6f5300 !important;}
.goodbg,.upbg  {background:#e8f1ee !important;}
.badbg,.downbg {background:#fbeee2 !important;}
.warnbg        {background:#fbf4e0 !important;}

/* ---- misc ------------------------------------------------- */
hr{border:none;border-top:1px solid var(--border);}
code,pre{background:#f2ede3;color:#1a1a1a;border:1px solid var(--border);}
.tablewrap,.scrollx{overflow-x:auto;}

/* FORCE LIGHT - some pages ship a prefers-color-scheme:dark block that
   repainted them navy on a dark-mode machine. Dan wants light, always. */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#faf7f2; --panel:#ffffff; --card:#ffffff; --ink:#1a1a1a; --text:#1a1a1a;
    --muted:#635b50; --line:#ded5c7; --line2:#ece5da; --border:#ded5c7;
    --accent:#6b5220; --dark:#1a1a1a;
  }
  html,body{background:#faf7f2 !important;color:#1a1a1a !important;}
}

@media (max-width:640px){
  body{font-size:15px;}
  table{font-size:14px;}
  thead th,tbody td{padding:10px 8px;}
  h1{font-size:1.5rem;}
}


/* ============================================================
   TARGETED FIXES - each selector below was caught by the contrast
   audit in a real browser. Ratio measured BEFORE the fix is noted.
   ============================================================ */
/* data_lineage legend + fact chips (1.0-1.2:1) */
.legend,.legend *,.b,.b *{background:#f2ede3 !important;color:#1a1a1a !important;}
/* commercial VACANT tag (1.7:1) */
.vac{background:#f2ede3 !important;color:#5c4a1f !important;border:1px solid #c2b393 !important;}
/* dashboard wordmark (1.1:1) */
.brand-name,.brand-name *{color:#1a1a1a !important;}
.dm-shared-nav .brand-name,.dm-shared-nav .brand-name *{color:#ffffff !important;}
/* old_vs_new split bars (1.8-2.2:1) */
.keep{background:#e8f1ee !important;color:#17513f !important;}
.maint{background:#fbeee2 !important;color:#7a4210 !important;}
/* export / map buttons (1.0:1) */
.exp,.exp *,a.exp,button.exp{background:#6b5220 !important;color:#ffffff !important;
  border:1px solid #6b5220 !important;}
/* hub link + knobs note + leaderboard sub-label */
.site-url,.site-url *{color:#5b4a22 !important;}
.tool,.tool *{color:#4a463f !important;}
.chip small,.chip.on small{color:#f2e6c8 !important;}

/* ============================================================
   SPECIFICITY BLOCK - several pages set their own !important
   colours on action buttons and wordmarks, so these match with
   html body + tag to outrank them. Every ratio noted was measured
   in Chrome before the fix.
   ============================================================ */
html body button.exp, html body a.exp, html body .exp,
html body button.primary, html body .primary, html body .clr,
html body button.on, html body .tab.on, html body .chip.on, html body .toggle button.on{
  background:#6b5220 !important; color:#ffffff !important; border-color:#6b5220 !important;
}
html body button.exp *, html body .primary *, html body .chip.on *, html body .exp *{
  color:#ffffff !important;
}
html body .legend, html body .legend *, html body .b, html body .b *{
  background:#f2ede3 !important; color:#1a1a1a !important;
}
html body .site, html body .site *{ color:#1a1a1a !important; background:transparent !important; }
html body .tool, html body .tool *{ background:#e8f1ee !important; color:#17513f !important; }
html body .brand-name, html body .brand-name *{ color:#1a1a1a !important; }
html body .dm-shared-nav .brand-name, html body .dm-shared-nav .brand-name *{ color:#ffffff !important; }
html body .vac{ background:#f2ede3 !important; color:#5c4a1f !important; border:1px solid #c2b393 !important; }
html body .site-url, html body .site-url *{ color:#5b4a22 !important; }
html body .chip small, html body .chip.on small{ color:#f7eed8 !important; }

/* ============================================================
   FINAL PASS - last two measured failures.
   ============================================================ */
/* datamined_dashboard ships a <header> with an rgba() dark fill (10,11,14,.94)
   that survived the hex sweep. Wordmark measured 1.1:1 on it. */
header:not(.dm-shared-nav):not(.dm-shared-footer){
  background:#ffffff !important;
  color:#1a1a1a !important;
  border-bottom:1px solid #ded5c7 !important;
}
header:not(.dm-shared-nav) .brand,
header:not(.dm-shared-nav) .brand-name,
header:not(.dm-shared-nav) .brand *,
header:not(.dm-shared-nav) .brand-name *{ color:#1a1a1a !important; }

/* body links inside cards/tables/prose measured 2.8:1 - darken. Nav links stay white. */
p a, td a, li a, .card a, .panel a, .box a, .note a, .sub a{ color:#5b4a1c !important; }
p a:hover, td a:hover, .card a:hover{ color:#1a1a1a !important; }

/* ============================================================
   CORRECTION - my own earlier rule set the pale cream sub-label
   on EVERY .chip, including unselected white ones (1.2:1).
   Split it: dark label on white chips, cream only on the filled one.
   ============================================================ */
html body .chip small,
html body .pill small,
html body .tab small{ color:#5a4a20 !important; }
html body .chip.on small,
html body .chip.active small,
html body .pill.on small,
html body .tab.on small{ color:#f7eed8 !important; }

/* unselected chips themselves: dark text on white */
html body .chip:not(.on):not(.active),
html body .pill:not(.on):not(.active),
html body .tab:not(.on):not(.active){
  background:#ffffff !important; color:#2b2620 !important; border-color:#cfc7ba !important;
}

/* status pills measured 3.2-3.9:1 */
html body .status-pill,html body .status-pill *{
  background:#f2ede3 !important; color:#4a3a12 !important; border:1px solid #c2b393 !important;
}

/* every link that is NOT in the dark nav/footer/table-header */
html body a:not(.btn):not(.chip):not(.pill):not(.nav-tab):not(.brand){ color:#5b4a1c !important; }
html body .dm-shared-nav a,html body .dm-shared-footer a,
html body thead a,html body th a{ color:#ffffff !important; }

/* ============================================================
   REGRESSION FIX - my blanket link rule above turned the nav tabs
   dark (#5b4a1c) while they sit on the dark nav bar: 2.0:1.
   The nav is dark on purpose, so everything in it is white.
   ============================================================ */
html body .nav-tab,
html body .nav-tab *,
html body a.nav-tab,
html body .dm-shared-nav .nav-tab,
html body .dm-shared-nav .nav-tab *{ color:#ffffff !important; }
html body .nav-tab:hover,
html body .dm-shared-nav .nav-tab:hover{ color:#e8cf9a !important; }
html body .nav-tab.on,
html body .nav-tab.active,
html body .dm-shared-nav .nav-tab.active{ color:#e8cf9a !important; }

/* dashboard section labels / summaries measured 3.3-3.9:1 on white */
html body summary,html body .status-pill,html body .pill-label{ color:#3a352c !important; }

/* ============================================================
   SCOPE FIX - my nav-tab rule above whitens tabs so they read on
   the DARK shared nav. datamined_dashboard has its own LIGHT nav,
   where white-on-cream is invisible. Scope white to the dark bar
   only; every other .nav-tab gets dark ink.
   ============================================================ */
html body nav:not(.dm-shared-nav) .nav-tab,
html body nav:not(.dm-shared-nav) .nav-tab *,
html body .topnav:not(.dm-shared-nav) .nav-tab{
  color:#2b2620 !important;
}
html body nav:not(.dm-shared-nav) .nav-tab.active,
html body nav:not(.dm-shared-nav) .nav-tab.on{
  color:#5c4a1f !important; border-bottom-color:#8a6d2f !important;
}
html body nav:not(.dm-shared-nav) .nav-tab:hover{ color:#1a1a1a !important; }
