/* Monter Monsters Day / Night system
   Day mode = Monter Sketchbook / Colored Workshop Sketch
   Night mode remains the existing technical black/carbon UI.
   2026-09-18
*/

:root{color-scheme:dark}
html[data-theme="dark"]{color-scheme:dark}

html[data-theme="light"]{
  color-scheme:light;

  /* Core workshop-paper palette */
  --mm-paper:#F4EFE4;
  --mm-paper-deep:#E9E0D0;
  --mm-paper-soft:#FAF7F0;
  --mm-sheet:#FFFDF8;
  --mm-sheet-2:#F8F3E9;
  --mm-ink:#171719;
  --mm-ink-soft:#4F4C48;
  --mm-pencil:#8B847A;
  --mm-rule:#2A292B;
  --mm-rule-soft:#B8AEA0;
  --mm-shadow:#CEC2B1;
  --mm-red:#E00024;
  --mm-red-deep:#B91C32;
  --mm-yellow:#D5AF28;
  --mm-blue:#4C7399;
  --mm-green:#527B5B;
  --mm-steel:#747980;

  /* Existing application token bridge */
  --black:var(--mm-paper);
  --panel:var(--mm-sheet);
  --line:#C8BFB2;
  --text:var(--mm-ink);
  --muted:#66615B;
  --white:#FFFFFF;

  --mm-surface-main:var(--mm-sheet);
  --mm-surface-raised:#FFFFFF;
  --mm-surface-support:var(--mm-sheet-2);
  --mm-border:#C8BFB2;
  --mm-border-soft:#DDD4C7;
  --mm-copy:var(--mm-ink);
  --mm-copy-muted:#69635C;
  --mm-copy-faint:#8A8379;
  --mm-group-mark:#8E8578;
}

/* Page = open workshop notebook, not a white SaaS canvas. */
html[data-theme="light"],
html[data-theme="light"] body{
  background:
    linear-gradient(rgba(224,0,36,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(23,23,25,.025) 1px,transparent 1px),
    radial-gradient(circle at 12% 8%,rgba(255,255,255,.72),transparent 27%),
    var(--mm-paper);
  background-size:28px 28px,28px 28px,auto,auto;
  color:var(--mm-ink);
}
html[data-theme="light"] body{
  transition:background-color .18s ease,color .18s ease;
  text-rendering:optimizeLegibility;
}
html[data-theme="light"] ::selection{background:rgba(224,0,36,.18);color:var(--mm-ink)}

/* Header = strip of paper pinned above the notebook. */
html[data-theme="light"] .site-header{
  background:rgba(244,239,228,.96);
  border-bottom:2px solid var(--mm-rule);
  box-shadow:0 3px 0 rgba(23,23,25,.08);
  backdrop-filter:blur(14px);
}
html[data-theme="light"] .header-inner{position:relative}
html[data-theme="light"] .header-inner:after{
  content:"";
  position:absolute;
  left:38px;
  bottom:-2px;
  width:54px;
  height:3px;
  background:var(--mm-red);
  transform:rotate(-1.2deg);
}
html[data-theme="light"] .brand-wordmark b{color:var(--mm-ink)}
html[data-theme="light"] .brand-wordmark em{color:var(--mm-red)}
html[data-theme="light"] .brand-symbol img{
  content:url('/assets/mm-helmet-black-transparent.png');
  filter:none
}
html[data-theme="light"] .hero-mark img{filter:invert(1)}
html[data-theme="light"] .main-nav a{color:#5F5A54;font-weight:760}
html[data-theme="light"] .main-nav a:hover,
html[data-theme="light"] .main-nav a.active{color:var(--mm-ink);border-color:var(--mm-red)}
html[data-theme="light"] .mobile-nav{
  background:var(--mm-paper-soft);
  border-top:1px dashed var(--mm-rule-soft)
}
html[data-theme="light"] .mobile-nav a{color:#57534E}
html[data-theme="light"] .mobile-nav a:hover,
html[data-theme="light"] .mobile-nav a.active{color:var(--mm-ink)}

/* Large titles read like notes written at the top of a technical sheet. */
html[data-theme="light"] .page-hero,
html[data-theme="light"] .profile-hero{border-bottom-color:var(--mm-rule-soft)}
html[data-theme="light"] .page-hero h1,
html[data-theme="light"] .hero h1,
html[data-theme="light"] .profile-main h1{color:var(--mm-ink)}
html[data-theme="light"] .lead,
html[data-theme="light"] .page-hero p,
html[data-theme="light"] .split>div:first-child p,
html[data-theme="light"] .about p{color:#625E58}
html[data-theme="light"] .kicker,
html[data-theme="light"] .eyebrow{
  color:var(--mm-red);
  font-weight:950;
  letter-spacing:.15em
}
html[data-theme="light"] .page-hero .kicker:before,
html[data-theme="light"] .admin-hero .kicker:before,
html[data-theme="light"] .profile-hero .kicker:before{
  background:var(--mm-red);
  height:3px;
  transform:rotate(-2deg)
}

/* Shared section headings = ruled notebook dividers. */
html[data-theme="light"] .head,
html[data-theme="light"] .hub-section-head{
  border-bottom:1px dashed var(--mm-rule-soft)
}
html[data-theme="light"] .head:after,
html[data-theme="light"] .hub-section-head:after{
  width:52px;
  height:3px;
  background:var(--mm-red);
  transform:rotate(-1.5deg)
}
html[data-theme="light"] .head>a,
html[data-theme="light"] .text-link{color:var(--mm-ink)}
html[data-theme="light"] .panel-title{
  border-bottom-color:var(--mm-rule-soft)
}
html[data-theme="light"] .panel-title b{color:var(--mm-ink)}
html[data-theme="light"] .panel-title span{color:#7A736B}

/* Base paper-card grammar. Deliberately square / hand-cut rather than SaaS-rounded. */
html[data-theme="light"] :is(
  .challenge-card,.feature,.league,.profession,.filters,.video-card,.tree-demo,.node,
  .feed,.side-card,.company-board,.profile-section,.cv-controls,.language-settings,
  .sponsor-principles article,.rule-stack article,.canonical-panel,.project-card,
  .community-composer,.feature-registry-row,.proof-card-live,.procedure-section,
  .procedure-requirements>div,.procedure-quality-grid>div,.procedure-step-editor,
  .profession-load-card,.profession-load-boundary,.hub-card,.hub-section,
  .account-panel,.ops-panel,.admin-panel,.field-trip-form,.field-trip-list,
  .trip-console,.price-history-panel,.price-offers,.price-deal-audit,.mm-collab-node
){
  background:var(--mm-sheet);
  color:var(--mm-ink);
  border-color:var(--mm-rule);
  box-shadow:3px 4px 0 rgba(111,98,79,.16);
  border-radius:2px 5px 2px 4px;
}
html[data-theme="light"] :is(
  .challenge-card,.feature,.profession,.project-card,.hub-card,.side-card
):hover{
  border-color:var(--mm-ink);
  box-shadow:4px 5px 0 rgba(111,98,79,.19)
}

/* Slight handmade irregularity, restrained to lists so text remains crisp. */
html[data-theme="light"] .challenge-card:nth-child(3n+1),
html[data-theme="light"] .profession:nth-child(3n+1),
html[data-theme="light"] .feature:nth-child(3n+1){transform:rotate(-.12deg)}
html[data-theme="light"] .challenge-card:nth-child(3n+2),
html[data-theme="light"] .profession:nth-child(3n+2),
html[data-theme="light"] .feature:nth-child(3n+2){transform:rotate(.12deg)}
html[data-theme="light"] .challenge-card:hover,
html[data-theme="light"] .profession:hover,
html[data-theme="light"] .feature:hover{transform:translateY(-2px) rotate(0)}

/* Small red pencil mark at the top edge of important working sheets. */
html[data-theme="light"] :is(
  .canonical-panel,.hub-section,.hub-card,.side-card,.project-card,
  .challenge-card,.feature,.profession,.profile-section
){position:relative}
html[data-theme="light"] :is(
  .canonical-panel,.hub-section,.hub-card,.side-card,.project-card,
  .challenge-card,.feature,.profession,.profile-section
):before{
  content:"";
  position:absolute;
  left:-1px;
  top:-1px;
  width:30px;
  height:3px;
  background:#777068;
  transform:rotate(-1.5deg);
  pointer-events:none
}
html[data-theme="light"] :is(
  .challenge-card:hover,.profession:hover,.feature:hover,.project-card:hover
):before{background:var(--mm-red)}

/* Main vs support paper sheets. */
html[data-theme="light"] :is(
  .canonical-side>.canonical-panel,.side-card,.profile-side>.account-panel,
  .mm-priority-support,.empty-state,.empty-practical,.deal-empty,.profession-empty
){
  background:var(--mm-sheet-2);
  border-color:#BDB3A6
}
html[data-theme="light"] :is(
  .canonical-main>.canonical-panel,.profession-layout>.profession-panel,.hub-section
){background:var(--mm-sheet)}

/* Priority notes = red pencil / safety annotation, not pink SaaS panels. */
html[data-theme="light"] :is(
  .next-action,.estimate-card,.quick-jobs-panel,.profession-pack-head,
  .price-detail-head,.billing-current,.deal-section.featured,.mm-priority-primary
){
  background:
    linear-gradient(90deg,rgba(224,0,36,.06),transparent 20%),
    var(--mm-sheet);
  border:2px solid var(--mm-rule);
  box-shadow:4px 4px 0 rgba(224,0,36,.13);
  color:var(--mm-ink)
}
html[data-theme="light"] :is(
  .next-action,.estimate-card,.quick-jobs-panel,.profession-pack-head,
  .price-detail-head,.billing-current,.deal-section.featured,.mm-priority-primary
):before{
  background:var(--mm-red);
  height:4px;
  width:58px
}
html[data-theme="light"] :is(
  .next-action h2,.price-detail-head h2,.billing-current h2,.profession-pack-head h2
){color:var(--mm-ink)}

/* Home hero = technical sketch sheet. */
html[data-theme="light"] .hero-stage{
  background:
    radial-gradient(circle at 50% 42%,rgba(224,0,36,.08),transparent 50%),
    linear-gradient(rgba(23,23,25,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(23,23,25,.035) 1px,transparent 1px),
    var(--mm-sheet);
  background-size:auto,34px 34px,34px 34px,auto;
  border:2px solid var(--mm-rule);
  box-shadow:7px 7px 0 var(--mm-shadow)
}
html[data-theme="light"] .hero-stage:before{
  background:
    linear-gradient(135deg,transparent 49%,rgba(224,0,36,.06) 50%,transparent 51%);
  background-size:96px 96px;
  opacity:.6;
  mask-image:none
}
html[data-theme="light"] .float-note,
html[data-theme="light"] .score-card{
  background:rgba(255,253,248,.96);
  color:var(--mm-ink);
  border:1.5px solid var(--mm-rule);
  box-shadow:3px 3px 0 rgba(111,98,79,.14)
}
html[data-theme="light"] .float-note b,
html[data-theme="light"] .bars b,
html[data-theme="light"] .scoring b{color:var(--mm-ink)}
html[data-theme="light"] .bars i{background:#DFD7CB}
html[data-theme="light"] .pillars{border-top-color:var(--mm-rule-soft)}
html[data-theme="light"] .pillars>div{border-right-color:var(--mm-rule-soft)}
html[data-theme="light"] .pillars small{color:#766F67}

/* Profession cards feel like catalog index cards. */
html[data-theme="light"] .profession{background:var(--mm-sheet)}
html[data-theme="light"] .profession-icon{
  border:2px solid var(--mm-rule);
  background:var(--mm-paper-soft);
  color:var(--mm-ink)
}
html[data-theme="light"] .profession p,
html[data-theme="light"] .profession small{color:#6B655E}
html[data-theme="light"] .profession>span:last-child{color:var(--mm-red)}

/* Challenges / features / lists */
html[data-theme="light"] .challenge-card p,
html[data-theme="light"] .feature p,
html[data-theme="light"] .company-board p,
html[data-theme="light"] .profile-main p,
html[data-theme="light"] .side-card p,
html[data-theme="light"] .side-card small,
html[data-theme="light"] .canonical-panel p,
html[data-theme="light"] .canonical-panel small,
html[data-theme="light"] .project-card p,
html[data-theme="light"] .project-card small,
html[data-theme="light"] .procedure-step p,
html[data-theme="light"] .procedure-copy p,
html[data-theme="light"] .profession-load-card ul{color:#68625B}
html[data-theme="light"] .challenge-foot,
html[data-theme="light"] .challenge-list,
html[data-theme="light"] .challenge-row,
html[data-theme="light"] .matrix-row,
html[data-theme="light"] .matrix-head,
html[data-theme="light"] .feed-item,
html[data-theme="light"] .spark,
html[data-theme="light"] .mini-row,
html[data-theme="light"] .inventory-line,
html[data-theme="light"] .health-row,
html[data-theme="light"] .request-row,
html[data-theme="light"] .task-line{border-color:#D5CCBF}
html[data-theme="light"] .challenge-row:hover,
html[data-theme="light"] .context-link-list a:hover,
html[data-theme="light"] .jobs-list article:hover,
html[data-theme="light"] .mini-row[href]:hover,
html[data-theme="light"] .request-row:hover{background:#EEE7DA}

/* Buttons = stamped workshop labels. */
html[data-theme="light"] .btn{
  background:var(--mm-sheet);
  color:var(--mm-ink);
  border:1.7px solid var(--mm-rule);
  border-radius:2px;
  box-shadow:2px 2px 0 rgba(111,98,79,.12);
  font-weight:850
}
html[data-theme="light"] .btn:hover{
  background:#F3ECDF;
  border-color:var(--mm-ink);
  transform:translateY(-1px)
}
html[data-theme="light"] .btn.primary{
  background:var(--mm-red);
  border-color:var(--mm-rule);
  color:#FFF;
  box-shadow:2px 2px 0 rgba(23,23,25,.16)
}
html[data-theme="light"] .btn.primary:hover{background:var(--mm-red-deep)}
html[data-theme="light"] .btn.ghost:hover{background:#F3ECDF;border-color:var(--mm-rule)}

/* Tags, filters, badges = little cut paper labels. */
html[data-theme="light"] :is(
  .tag,.status,.lang,.header-icon-link,.weights span,.brand-pills span,.badges span,
  .filter,.profession-family-shortcut,.practice-badge,.trip-state,.deal-status,.prio
){
  background:var(--mm-paper-soft);
  color:var(--mm-ink);
  border-color:var(--mm-rule)
}
html[data-theme="light"] .filter.active,
html[data-theme="light"] .price-ranges a.active,
html[data-theme="light"] .trip-status-strip button.active,
html[data-theme="light"] .profession-filter-features label:has(input:checked){
  background:var(--mm-red);
  border-color:var(--mm-rule);
  color:#FFF
}
html[data-theme="light"] .tag.red{color:var(--mm-red);border-color:var(--mm-red)}

/* Inputs = actual form fields on a work sheet. */
html[data-theme="light"] :is(
  input:not([type="checkbox"]):not([type="radio"]),select,textarea
){
  background:#FFFDF8!important;
  color:var(--mm-ink)!important;
  border:1.7px solid var(--mm-rule)!important;
  border-radius:1px!important;
  box-shadow:inset 0 1px 0 rgba(23,23,25,.035)
}
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder{color:#8A837A}
html[data-theme="light"] :is(input,select,textarea):focus-visible{
  outline:2px solid rgba(224,0,36,.75);
  outline-offset:2px
}

/* Working diagrams / canvases */
html[data-theme="light"] .tree-canvas{
  background-color:var(--mm-sheet);
  background-image:radial-gradient(#BDB3A6 1px,transparent 1px)
}
html[data-theme="light"] .tree-canvas>i{background:#7D756C}
html[data-theme="light"] .branch:before{border-color:#7D756C;background:transparent}
html[data-theme="light"] .node{
  background:var(--mm-sheet);
  border-color:var(--mm-rule)
}
html[data-theme="light"] .node.finish{background:#F0E9DE;border-color:var(--mm-rule)}
html[data-theme="light"] .language-terms span{
  background:var(--mm-sheet);
  border-color:var(--mm-rule)
}
html[data-theme="light"] .campaign-url,
html[data-theme="light"] .field-device-output,
html[data-theme="light"] .passport code{
  background:var(--mm-paper-soft);
  border-color:var(--mm-rule);
  color:var(--mm-ink)
}
html[data-theme="light"] .field-voice-note{
  background:var(--mm-sheet);
  color:var(--mm-ink);
  border-color:var(--mm-rule)
}

/* Metrics = ruled ledger cells. */
html[data-theme="light"] .metrics,
html[data-theme="light"] .admin-metrics,
html[data-theme="light"] .billing-kpis,
html[data-theme="light"] .ops-metrics{
  background:var(--mm-rule);
  border-color:var(--mm-rule)
}
html[data-theme="light"] .metrics div,
html[data-theme="light"] .admin-metrics div,
html[data-theme="light"] .billing-kpis div,
html[data-theme="light"] .ops-metrics div{
  background:var(--mm-sheet)
}
html[data-theme="light"] .metrics span,
html[data-theme="light"] .admin-metrics span,
html[data-theme="light"] .billing-kpis span,
html[data-theme="light"] .ops-metrics span{color:#756E66}

/* Keep deliberate dark / red emphasis surfaces high-contrast. */
html[data-theme="light"] :is(
  .btn.primary,.filter.active,.notification-link b,
  .crew-radio-ptt-button[data-state="recording"],.workwear-item-no,
  .workwear-legal-note,.tool-stat.accent,.mini-ledger,.google-auth,
  .trip-status-strip button.active,.price-ranges a.active,
  .profession-filter-features label:has(input:checked)
){color:#FFF}
html[data-theme="light"] :is(
  .btn.primary,.filter.active,.notification-link b,
  .crew-radio-ptt-button[data-state="recording"],.tool-stat.accent
){
  background:var(--mm-red);
  border-color:var(--mm-rule)
}
html[data-theme="light"] .mini-ledger,
html[data-theme="light"] .methodology-node>summary,
html[data-theme="light"] .workwear-legal-note{
  background:#171719;
  color:#FFF;
  border-color:#171719
}
html[data-theme="light"] .methodology-node>summary small{color:#BDBDC0}
html[data-theme="light"] .methodology-node>summary>i{border-color:#FFF}

/* Data Atlas already speaks sketchbook; align its shell, don't flatten its paper identity. */
html[data-theme="light"] .insights-hero{
  background:
    linear-gradient(rgba(23,23,25,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(23,23,25,.035) 1px,transparent 1px),
    var(--mm-paper-soft);
  background-size:28px 28px,28px 28px,auto;
  border-bottom:2px solid var(--mm-rule)
}
html[data-theme="light"] .insights-hero:before{
  background:repeating-linear-gradient(0deg,transparent 0 24px,rgba(23,23,25,.045) 25px)
}
html[data-theme="light"] .insights-hero:after{color:rgba(23,23,25,.045)}
html[data-theme="light"] .insights-hero h1{color:var(--mm-ink)}
html[data-theme="light"] .insights-hero-copy>p{color:#5F5A54}
html[data-theme="light"] .insight-scope a{
  background:var(--mm-sheet);
  border:1.7px solid var(--mm-rule);
  color:var(--mm-ink);
  box-shadow:2px 2px 0 rgba(111,98,79,.10)
}
html[data-theme="light"] .insight-scope a:hover,
html[data-theme="light"] .insight-scope a.active{
  background:var(--mm-red);
  border-color:var(--mm-rule);
  color:#FFF
}
html[data-theme="light"] .insights-page{
  background:
    linear-gradient(rgba(224,0,36,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(23,23,25,.025) 1px,transparent 1px),
    var(--mm-paper);
  background-size:28px 28px
}

/* Workwear is already our strongest paper-sketch component: make it the visual reference. */
html[data-theme="light"] .profession-workwear{
  background:#F7F3EA;
  border-color:#171719;
  box-shadow:6px 6px 0 #171719
}
html[data-theme="light"] .workwear-sketch-card,
html[data-theme="light"] .workwear-item,
html[data-theme="light"] .workwear-rules,
html[data-theme="light"] .workwear-conditions article{
  background:#FFFDF8;
  border-color:#171719
}

/* Footer = closing page of the notebook. */
html[data-theme="light"] .site-footer{
  border-top:2px solid var(--mm-rule);
  background:rgba(239,232,219,.72)
}
html[data-theme="light"] .footer-bottom{
  border-top:1px dashed var(--mm-rule-soft);
  color:#777067
}
html[data-theme="light"] .footer-grid p,
html[data-theme="light"] .footer-grid>div:not(:first-child)>a{color:#67615B}
html[data-theme="light"] .footer-grid>div:not(:first-child)>a:hover{color:var(--mm-ink)}
html[data-theme="light"] .footer-code{color:var(--mm-red)}

/* Theme switch */
.theme-toggle{
  width:34px;height:34px;display:inline-grid;place-items:center;flex:0 0 auto;
  border:1px solid var(--line,#2B2B2F);background:transparent;color:inherit;cursor:pointer;
  padding:0;position:relative;
  transition:background-color .15s ease,border-color .15s ease,transform .15s ease
}
.theme-toggle:hover{transform:translateY(-1px);border-color:#777}
.theme-toggle-icon{width:17px;height:17px;display:block;position:relative}
.theme-toggle-icon:before{
  position:absolute;inset:0;display:grid;place-items:center;
  font:900 18px/17px ui-monospace,monospace
}
html[data-theme="dark"] .theme-toggle-icon:before{content:"☾"}
html[data-theme="light"] .theme-toggle-icon:before{content:"☼"}
html[data-theme="light"] .theme-toggle{
  background:var(--mm-sheet);
  border:1.7px solid var(--mm-rule);
  color:var(--mm-ink);
  box-shadow:2px 2px 0 rgba(111,98,79,.12)
}

/* Mobile: retain the paper language without wasting viewport width. */
@media(max-width:760px){
  .theme-toggle{width:32px;height:32px}
  html[data-theme="light"] .header-inner:after{left:24px;width:42px}
  html[data-theme="light"] :is(
    .challenge-card,.feature,.profession,.canonical-panel,.hub-card,.hub-section,
    .side-card,.project-card,.profile-section
  ){box-shadow:2px 3px 0 rgba(111,98,79,.14)}
  html[data-theme="light"] .hero-stage{box-shadow:4px 4px 0 var(--mm-shadow)}
}
@media(max-width:560px){
  html[data-theme="light"] .profession-workwear{
    box-shadow:none;
    border-left:0;
    border-right:0
  }
}
@media(prefers-reduced-motion:reduce){
  html[data-theme="light"] body,.theme-toggle{transition:none}
  html[data-theme="light"] .challenge-card,
  html[data-theme="light"] .profession,
  html[data-theme="light"] .feature{transform:none!important}
}


/* Homepage-specific Sketchbook conversion */
html[data-theme="light"] .mm-home-principles{
  border-top:1px dashed var(--mm-rule-soft)
}
html[data-theme="light"] .mm-home-principles span{
  border-right-color:var(--mm-rule-soft)
}
html[data-theme="light"] .mm-home-principles small{color:#756E66}

html[data-theme="light"] .mm-home-system{
  position:relative;
  background:
    linear-gradient(rgba(23,23,25,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(23,23,25,.035) 1px,transparent 1px),
    var(--mm-sheet);
  background-size:24px 24px,24px 24px,auto;
  border:2px solid var(--mm-rule);
  box-shadow:7px 7px 0 var(--mm-shadow);
  border-radius:2px 7px 2px 5px;
  transform:rotate(.12deg)
}
html[data-theme="light"] .mm-home-system:before{
  content:"";
  position:absolute;
  left:42px;
  top:-8px;
  width:84px;
  height:17px;
  background:rgba(213,175,40,.62);
  transform:rotate(-3deg);
  mix-blend-mode:multiply;
  pointer-events:none
}
html[data-theme="light"] .mm-system-head{
  border-bottom:1px dashed var(--mm-rule-soft)
}
html[data-theme="light"] .mm-system-head img{filter:invert(1)}
html[data-theme="light"] .mm-system-head b{color:var(--mm-ink)}
html[data-theme="light"] .mm-system-head small{color:#6E675F}
html[data-theme="light"] .mm-system-grid{
  background:var(--mm-rule);
  border:1px solid var(--mm-rule);
  box-shadow:2px 2px 0 rgba(111,98,79,.08)
}
html[data-theme="light"] .mm-system-grid>a{
  background:var(--mm-sheet);
  color:var(--mm-ink)
}
html[data-theme="light"] .mm-system-grid>a:hover{background:#EFE7DA}
html[data-theme="light"] .mm-system-grid small{color:#736C64}

html[data-theme="light"] .mm-home-purpose{
  border-top:1px dashed var(--mm-rule-soft)
}
html[data-theme="light"] .mm-purpose-grid article{
  position:relative;
  background:var(--mm-sheet);
  color:var(--mm-ink);
  border:2px solid var(--mm-rule);
  box-shadow:4px 4px 0 rgba(111,98,79,.15);
  border-radius:3px 6px 2px 5px
}
html[data-theme="light"] .mm-purpose-grid article:nth-child(2){transform:rotate(.12deg)}
html[data-theme="light"] .mm-purpose-grid article:nth-child(3){transform:rotate(-.12deg)}
html[data-theme="light"] .mm-purpose-grid article>b{
  color:var(--mm-red);
  font-family:ui-monospace,monospace
}
html[data-theme="light"] .mm-purpose-grid article>b:after{
  content:"";
  display:block;
  width:34px;
  height:2px;
  margin-top:6px;
  background:var(--mm-red);
  transform:rotate(-4deg)
}
html[data-theme="light"] .mm-purpose-grid p{color:#68615A}

html[data-theme="light"] .mm-module{
  position:relative;
  background:var(--mm-sheet);
  color:var(--mm-ink);
  border:2px solid var(--mm-rule);
  box-shadow:4px 4px 0 rgba(111,98,79,.15);
  border-radius:2px 6px 2px 5px
}
html[data-theme="light"] .mm-module:nth-child(3n+1){transform:rotate(-.10deg)}
html[data-theme="light"] .mm-module:nth-child(3n+2){transform:rotate(.10deg)}
html[data-theme="light"] .mm-module:before{
  content:"";
  position:absolute;
  left:-2px;
  top:-2px;
  width:42px;
  height:4px;
  background:var(--mm-red);
  transform:rotate(-2deg)
}
html[data-theme="light"] .mm-module p{color:#68615A}
html[data-theme="light"] .mm-module nav{
  border-top:1px dashed var(--mm-rule-soft)
}
html[data-theme="light"] .mm-module nav a{
  color:var(--mm-ink);
  border-bottom:1px dashed #D7CEC1
}
html[data-theme="light"] .mm-module nav a:hover{
  color:var(--mm-red);
  background:linear-gradient(90deg,rgba(224,0,36,.045),transparent)
}

html[data-theme="light"] .mm-now-grid>a{
  position:relative;
  background:var(--mm-sheet);
  color:var(--mm-ink);
  border:1.7px solid var(--mm-rule);
  box-shadow:3px 3px 0 rgba(111,98,79,.12);
  border-radius:2px 5px 2px 4px
}
html[data-theme="light"] .mm-now-grid>a:hover{
  background:#F2EBDE;
  border-color:var(--mm-rule);
  transform:translateY(-1px)
}
html[data-theme="light"] .mm-now-grid>a>span{
  background:var(--mm-paper-soft);
  border:1.7px solid var(--mm-red)
}
html[data-theme="light"] .mm-now-grid small{color:#736C64}

html[data-theme="light"] .deal-card{
  background:var(--mm-sheet);
  color:var(--mm-ink);
  border:1.7px solid var(--mm-rule);
  box-shadow:3px 3px 0 rgba(111,98,79,.12);
  border-radius:2px 5px 2px 4px
}
html[data-theme="light"] .deal-card:hover{
  background:#F3ECDF;
  border-color:var(--mm-rule)
}

html[data-theme="light"] .mm-home-manifesto{
  background:
    linear-gradient(90deg,transparent,rgba(255,253,248,.72) 18%,rgba(255,253,248,.72) 82%,transparent);
  border-top:1px dashed var(--mm-rule-soft);
  border-bottom:1px dashed var(--mm-rule-soft)
}
html[data-theme="light"] .site-share{
  border-top:1px dashed var(--mm-rule-soft)
}
html[data-theme="light"] .site-share .share-btn{
  background:var(--mm-sheet);
  color:var(--mm-ink);
  border-color:var(--mm-rule);
  box-shadow:2px 2px 0 rgba(111,98,79,.10)
}
html[data-theme="light"] .site-share .share-btn.primary{
  background:var(--mm-red);
  color:#FFF
}

@media(max-width:760px){
  html[data-theme="light"] .mm-home-system{transform:none;box-shadow:4px 4px 0 var(--mm-shadow)}
  html[data-theme="light"] .mm-purpose-grid article,
  html[data-theme="light"] .mm-module{transform:none!important}
}


/* Homepage uses real canonical Monter Sketchbook profession sheets. */
html[data-theme="light"] .mm-home-sketchbook{
  position:relative
}
html[data-theme="light"] .mm-home-sketchbook:before{
  content:"";
  position:absolute;
  left:48px;
  right:48px;
  top:0;
  border-top:1px dashed var(--mm-rule-soft)
}
html[data-theme="light"] .mm-home-sketch-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px
}
html[data-theme="light"] .mm-home-sketch-card{
  display:grid;
  overflow:hidden;
  background:var(--mm-sheet);
  color:var(--mm-ink);
  border:2px solid var(--mm-rule);
  box-shadow:5px 5px 0 var(--mm-shadow);
  border-radius:2px 7px 3px 5px;
  transition:transform .16s ease,box-shadow .16s ease
}
html[data-theme="light"] .mm-home-sketch-card:nth-child(2){transform:rotate(.16deg)}
html[data-theme="light"] .mm-home-sketch-card:nth-child(3){transform:rotate(-.16deg)}
html[data-theme="light"] .mm-home-sketch-card:hover{
  transform:translateY(-3px) rotate(0);
  box-shadow:7px 7px 0 var(--mm-shadow)
}
html[data-theme="light"] .mm-home-sketch-thumb{
  aspect-ratio:16/10;
  overflow:hidden;
  background:#F2EFE7;
  border-bottom:2px solid var(--mm-rule)
}
html[data-theme="light"] .mm-home-sketch-thumb>svg{
  width:100%;
  height:100%;
  display:block
}
html[data-theme="light"] .mm-home-sketch-card footer{
  display:grid;
  gap:4px;
  padding:13px 15px 15px;
  background:var(--mm-sheet)
}
html[data-theme="light"] .mm-home-sketch-card footer span{
  color:var(--mm-red);
  font:900 9px/1.2 ui-monospace,monospace;
  letter-spacing:.11em
}
html[data-theme="light"] .mm-home-sketch-card footer b{
  color:var(--mm-ink);
  font-size:17px
}

/* In night mode the added Sketchbook strip remains a deliberate paper artifact. */
html[data-theme="dark"] .mm-home-sketch-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px
}
html[data-theme="dark"] .mm-home-sketch-card{
  display:grid;
  overflow:hidden;
  background:#111113;
  border:1px solid #303036;
  color:#F2F2F0
}
html[data-theme="dark"] .mm-home-sketch-thumb{
  aspect-ratio:16/10;
  overflow:hidden;
  background:#F2EFE7
}
html[data-theme="dark"] .mm-home-sketch-thumb>svg{width:100%;height:100%;display:block}
html[data-theme="dark"] .mm-home-sketch-card footer{display:grid;gap:4px;padding:12px 14px}
html[data-theme="dark"] .mm-home-sketch-card footer span{
  color:var(--red);
  font:900 9px/1.2 ui-monospace,monospace;
  letter-spacing:.11em
}
html[data-theme="dark"] .mm-home-sketch-card footer b{font-size:17px}

@media(max-width:980px){
  html[data-theme] .mm-home-sketch-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  html[data-theme="light"] .mm-home-sketchbook:before{left:12px;right:12px}
  html[data-theme] .mm-home-sketch-grid{
    display:flex;
    overflow-x:auto;
    gap:12px;
    padding:2px 4px 10px;
    scroll-snap-type:x mandatory
  }
  html[data-theme] .mm-home-sketch-card{
    flex:0 0 84%;
    min-width:0;
    transform:none!important;
    scroll-snap-align:start
  }
}


/* Global day-mode contrast safety net.
   Content cards/panels are paper in light mode; dark surfaces belong to night mode.
   2026-09-18 */
html[data-theme="light"] :is(
  [class$="-card"],[class*="-card "],
  [class$="-panel"],[class*="-panel "],
  .profession-picker,.work-context-bar,.weather-controls,.weather-context-chip,
  .price-catalog,.price-admin,.exchange-main,.exchange-filter,.exchange-connection,
  .show-work-form,.show-work-rating,.show-work-history,.hub-region-filter,
  .verification-scope,.trade-language-settings,.offline-sync-state,
  .profession-context-panel,.admin-id,.admin-alert,.request-form,.estimate-card
){
  background:var(--mm-sheet,#FFFDF8)!important;
  color:var(--mm-ink,#171719)!important;
  border-color:var(--mm-rule-soft,#B8AEA0)!important
}
html[data-theme="light"] :is(
  [class$="-card"],[class*="-card "],
  [class$="-panel"],[class*="-panel "],
  .profession-picker,.work-context-bar,.weather-controls,.weather-context-chip,
  .price-catalog,.price-admin,.exchange-main,.exchange-filter,.exchange-connection,
  .show-work-form,.show-work-rating,.show-work-history,.hub-region-filter,
  .verification-scope,.trade-language-settings,.offline-sync-state,
  .profession-context-panel,.admin-id,.admin-alert,.request-form,.estimate-card
) :is(h1,h2,h3,h4,h5,h6,b,strong){
  color:var(--mm-ink,#171719)
}
html[data-theme="light"] :is(
  [class$="-card"],[class*="-card "],
  [class$="-panel"],[class*="-panel "],
  .profession-picker,.work-context-bar,.weather-controls,.weather-context-chip,
  .price-catalog,.price-admin,.exchange-main,.exchange-filter,.exchange-connection,
  .show-work-form,.show-work-rating,.show-work-history,.hub-region-filter,
  .verification-scope,.trade-language-settings,.offline-sync-state,
  .profession-context-panel,.admin-id,.admin-alert,.request-form,.estimate-card
) :is(p,small,dt){
  color:var(--mm-copy-muted,#5F5A54)
}

/* Nested Work OS / registry surfaces that used hard-coded black backgrounds. */
html[data-theme="light"] :is(
  .job-starter,.registry-list span,.hazard-list span,.preflight-list span,
  .profession-calc,.admin-module,.admin-profession,.profession-coverage span,
  .replenishment-list>div,.crew-live-list article,.route-match,.weather-day,
  .weather-job-grid article,.exchange-mode-grid article,.exchange-card,
  .exchange-own-grid article,.exchange-messages article,.exchange-links a,
  .profile-exchange-list a,.quick-job-card,.quick-candidate-card,
  .admin-site-tree>section,.admin-module-overview article,.admin-plan-overview article,
  .admin-doc-grid article,.admin-feature-table article,.admin-data-cards article,
  .admin-architecture>div,.hub-tree-card,.hub-work-item,.brand-lab-principle,
  .brand-test-process li,.brand-test-offer,.exchange-travel-plan,
  .exchange-job-grid article,.show-work-flow
){
  background:var(--mm-paper-soft,#FAF7F0)!important;
  color:var(--mm-ink,#171719)!important;
  border-color:var(--mm-border,#C8BFB2)!important
}
html[data-theme="light"] :is(
  .job-starter,.registry-list span,.hazard-list span,.preflight-list span,
  .profession-calc,.admin-module,.admin-profession,.profession-coverage span,
  .replenishment-list>div,.crew-live-list article,.route-match,.weather-day,
  .weather-job-grid article,.exchange-mode-grid article,.exchange-card,
  .exchange-own-grid article,.exchange-messages article,.exchange-links a,
  .profile-exchange-list a,.quick-job-card,.quick-candidate-card,
  .admin-site-tree>section,.admin-module-overview article,.admin-plan-overview article,
  .admin-doc-grid article,.admin-feature-table article,.admin-data-cards article,
  .admin-architecture>div,.hub-tree-card,.hub-work-item,.brand-lab-principle,
  .brand-test-process li,.brand-test-offer,.exchange-travel-plan,
  .exchange-job-grid article,.show-work-flow
) :is(h2,h3,h4,b,strong){
  color:var(--mm-ink,#171719)
}
html[data-theme="light"] :is(
  .job-starter,.profession-calc,.admin-module,.admin-profession,
  .replenishment-list>div,.crew-live-list article,.route-match,.weather-day,
  .weather-job-grid article,.exchange-card,.quick-job-card,.quick-candidate-card,
  .hub-tree-card,.hub-work-item
) :is(p,small){
  color:var(--mm-copy-muted,#5F5A54)
}

/* Keep selected states visible without returning to a black fill. */
html[data-theme="light"] .job-starter:hover,
html[data-theme="light"] .job-starter.active,
html[data-theme="light"] .preflight-list input:checked+span{
  background:#F1E9DC!important;
  border-color:var(--mm-red,#E00024)!important;
  color:var(--mm-ink,#171719)!important
}
html[data-theme="light"] .profession-calc output{
  color:var(--mm-ink,#171719);
  border-top-color:var(--mm-border-soft,#DDD4C7)
}
html[data-theme="light"] .loadout-columns h3{color:var(--mm-ink,#171719)}
html[data-theme="light"] .loadout-columns li{border-bottom-color:var(--mm-border-soft,#DDD4C7)}
html[data-theme="light"] .work-context-bar>div{border-color:var(--mm-border-soft,#DDD4C7)}
html[data-theme="light"] .module-foot{border-top-color:var(--mm-border-soft,#DDD4C7)}
html[data-theme="light"] .module-cat,
html[data-theme="light"] .module-state,
html[data-theme="light"] .pack-stat span{color:#6B655E}