/* =====================================================================
   Oriented Networks · the light theme of the public site
   Loaded after the page's own stylesheet (site.css, or a homepage
   design's home-*.css) and does nothing until the visitor picks light
   with the sun key in the header (html[data-theme="light"]).

   The page turns to warm paper; the panels become white enamel and the
   keys ivory. What stands for a real screen - bezels, screen faces, the
   photographs on them, the ads - stays dark, as a TV in a bus does in
   daylight: inside those the dark tokens are put back.
   ===================================================================== */

html[data-theme="light"]{
  --ink:#F5F0E6;--ink-raised:#FFFDF8;--ink-lift:#ECE5D7;--ink-sunk:#EBE3D3;--edge:#D6CBB6;
  --paper:#1A1612;--paper-dim:#544C42;--paper-faint:#645B4F;--paper-soft:#2E2822;
  --gold:#765809;--gold-lit:#765809;--gold-deep:#6B520D;--on-gold:#1B1712;
  --metal:linear-gradient(100deg,#5E470A 0%,#8A6A0F 24%,#B08A1A 46%,#8A6A0F 64%,#5E470A 100%);
  --err:#B3261E;--alert:#B5452F;--live:#1E7F53;
  --hair:rgba(130,99,12,.24);--hair-soft:rgba(26,22,18,.11);
  --logo:url(/assets/img/logo-light.png);
  --l-plate:linear-gradient(180deg,#FFFFFF 0%,#F8F3EA 100%);
  --l-plate-ring:0 0 0 1px rgba(70,52,20,.13),0 1px 0 rgba(255,255,255,.9) inset,0 22px 40px -28px rgba(70,52,20,.38);
  --l-key:linear-gradient(180deg,#FFFFFF 0%,#EFE8DB 100%);
  --l-key-ring:0 0 0 1px rgba(70,52,20,.2),inset 0 1px 0 #FFFFFF,0 3px 6px -3px rgba(70,52,20,.35);
  --l-gold-plate:linear-gradient(180deg,#FFF9E9 0%,#F6E8C3 100%);
  color-scheme:light;
}

/* ---- real screens stay dark: the dark tokens back inside them ---- */
html[data-theme="light"] :is(.bezel,.face,.screen-ads,.pk-screen,.mod-pic,.get-pic,.net-pic,.partner-pic,.bus-crop,.scene,.ad,.st-1,.st-2,.st-3,.device,.pop-side,.lcd,.screen,.bezel-face,.map){
  --ink:#0A0908;--ink-raised:#131110;--ink-lift:#1C1917;--ink-sunk:#060505;--edge:#2C2721;
  --paper:#F7F5F1;--paper-dim:#A69E92;--paper-faint:#8A8176;--paper-soft:#D9D2C6;
  --gold:#C9A227;--gold-lit:#F2DA8B;--gold-deep:#7E6014;
  --metal:linear-gradient(100deg,#7E6014 0%,#C9A227 20%,#F2DA8B 44%,#C9A227 60%,#7E6014 100%);
  --hair:rgba(242,218,139,.16);--hair-soft:rgba(247,245,241,.08);
  --logo:url(/assets/img/logo.png);
  color-scheme:dark;
  color:var(--paper);
}

html[data-theme="light"] ::selection{background:rgba(201,162,39,.35);color:#1A1612}

/* ---- the bar ---- */
html[data-theme="light"] .site-header,
html[data-theme="light"] .nav{
  background:linear-gradient(180deg,rgba(255,253,248,.92),rgba(245,240,230,.9));
  box-shadow:0 14px 30px -26px rgba(70,52,20,.5),0 1px 0 rgba(130,99,12,.22);
}
html[data-theme="light"] .site-header.scrolled{background:linear-gradient(180deg,rgba(255,253,248,.97),rgba(245,240,230,.96))}
html[data-theme="light"] .mnav{background:linear-gradient(180deg,#FFFDF8,#F3EDE2);box-shadow:0 20px 40px -24px rgba(70,52,20,.45)}
html[data-theme="light"] .btn-ghost:hover{background:rgba(26,22,18,.06)}

/* ---- panels: white enamel instead of brushed dark metal ---- */
html[data-theme="light"] :is(.plate,.how-step,.faq,.card,.tile){
  background:var(--l-plate);
  box-shadow:var(--l-plate-ring);
}
html[data-theme="light"] .faq[open]{background:linear-gradient(180deg,#FFFDF6,#F6EEDC)}
html[data-theme="light"] :is(.door-main,.pk-hot){
  background:var(--l-gold-plate);
  box-shadow:0 0 0 1px rgba(130,99,12,.35),0 0 0 3px rgba(201,162,39,.18),0 28px 50px -30px rgba(110,80,10,.45);
}
html[data-theme="light"] .band{background:linear-gradient(180deg,#FBF8F1 0%,var(--ink) 100%)}
html[data-theme="light"] .tile::after{background:linear-gradient(118deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 40%)}

/* ---- keys: ivory, with the ink they are labelled in ---- */
html[data-theme="light"] :is(.key,.btn-dark,.menu-btn,.aud-key,.ck,.pm,.knob > span){
  color:var(--paper-dim);
  background:var(--l-key);
  box-shadow:var(--l-key-ring);
}
html[data-theme="light"] :is(.btn-dark,.menu-btn,.aud-key):hover{background:linear-gradient(180deg,#FFFFFF,#E9E1D2);color:var(--paper)}
html[data-theme="light"] :is(.aud-key.main,.ck){background:var(--l-gold-plate);color:var(--paper)}
html[data-theme="light"] .menu-btn .bars i{background:var(--paper)}

/* ---- fields ---- */
html[data-theme="light"] :is(.input,.sw-track):not(.device *){background:#FFFFFF;box-shadow:inset 0 1px 2px rgba(70,52,20,.18),0 0 0 1px rgba(70,52,20,.2)}
html[data-theme="light"] select.input option{background:#FFFFFF;color:#1A1612}
html[data-theme="light"] .pop::backdrop{background:rgba(40,32,20,.45)}

/* ---- words written in a fixed light colour ---- */
html[data-theme="light"] .pk-list li{color:var(--paper-soft)}

/* ---- the sun / moon key in the bar ---- */
.theme-switch{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;border:0;border-radius:11px;cursor:pointer;color:#D9D2C6;background:linear-gradient(180deg,#26221d,#161310);box-shadow:0 0 0 1px #000,inset 0 1px 0 rgba(255,238,196,.12)}
.theme-switch:hover{color:#F2DA8B}
.theme-switch:focus-visible{outline:2px solid #F2DA8B;outline-offset:3px}
.theme-switch svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.theme-switch .sun{display:none}
html[data-theme="light"] .theme-switch{color:#544C42;background:var(--l-key);box-shadow:var(--l-key-ring)}
html[data-theme="light"] .theme-switch:hover{color:#82630C}
html[data-theme="light"] .theme-switch:focus-visible{outline-color:#82630C}
html[data-theme="light"] .theme-switch .sun{display:block}
html[data-theme="light"] .theme-switch .moon{display:none}
html.theme-switching *,html.theme-switching *::before,html.theme-switching *::after{transition:none!important}

/* =====================================================================
   The inner pages (site.css)
   ===================================================================== */
html[data-theme="light"].js .nav,
html[data-theme="light"].js .nav.nav-stuck{
  background:linear-gradient(180deg,rgba(255,253,248,.95),rgba(245,240,230,.93));
  box-shadow:0 14px 30px -26px rgba(70,52,20,.5),0 1px 0 rgba(130,99,12,.22);
}
html[data-theme="light"].js .nav__links{background:linear-gradient(180deg,#FFFDF8,#F3EDE2)}
html[data-theme="light"] :is(.btn-outline,.nav__toggle,.foot__social-link,.pkg__mark,.route__marker::after,.done__mark::before){
  color:var(--paper);
  background:var(--l-key);
  box-shadow:var(--l-key-ring);
}
html[data-theme="light"] .btn-outline:hover{background:linear-gradient(180deg,#FFFFFF,#E9E1D2)}
html[data-theme="light"] .nav__toggle .nav__bar{background:var(--paper)}
html[data-theme="light"] :is(.stat,.pkg,.city,.table-wrap,.seo-districts li,.seo-faq details,.seo-toc){
  background:var(--l-plate);
  box-shadow:var(--l-plate-ring);
}
html[data-theme="light"] .pkg-featured{
  background:var(--l-gold-plate);
  box-shadow:0 0 0 1px rgba(130,99,12,.35),0 0 0 3px rgba(201,162,39,.18),0 28px 50px -30px rgba(110,80,10,.45);
}
html[data-theme="light"] :is(.input,.select,.textarea,.check__box,.done__ref):not(.device *){
  background:#FFFFFF;
  box-shadow:inset 0 1px 2px rgba(70,52,20,.18),0 0 0 1px rgba(70,52,20,.2);
}
html[data-theme="light"] .select option{background:#FFFFFF;color:#1A1612}
html[data-theme="light"] .pkg__feat{color:var(--paper-soft)}
html[data-theme="light"] .form-note-bad{color:#9B2C1D}
html[data-theme="light"] .ondialog{background:var(--l-plate);box-shadow:var(--l-plate-ring)}
html[data-theme="light"] .ondialog::backdrop{background:rgba(40,32,20,.45)}

/* =====================================================================
   Plain Talk (home-plain.css)
   ===================================================================== */
html[data-theme="light"] .glass{
  background:linear-gradient(180deg,rgba(255,255,255,.86) 0%,rgba(250,246,238,.78) 100%);
  box-shadow:var(--l-plate-ring);
}
html[data-theme="light"] .nav-shell{background:rgba(255,253,248,.78);box-shadow:0 0 0 1px rgba(70,52,20,.14),0 16px 34px -26px rgba(70,52,20,.45)}
html[data-theme="light"] .site-header.scrolled .nav-shell{background:rgba(255,253,248,.95)}
html[data-theme="light"] [data-design="plain"] .mnav,
html[data-theme="light"][data-design="plain"] .mnav{background:rgba(255,253,248,.98)}
html[data-theme="light"] :is(.wc-main){background:var(--l-gold-plate);box-shadow:0 0 0 1px rgba(130,99,12,.35),0 28px 50px -30px rgba(110,80,10,.45)}
html[data-theme="light"][data-design="plain"] .pk-hot{background:var(--l-gold-plate);box-shadow:0 0 0 1px rgba(130,99,12,.35),0 0 0 3px rgba(201,162,39,.18),0 28px 50px -30px rgba(110,80,10,.45)}
html[data-theme="light"] .form-status.is-bad{color:#9B2C1D}
/* text written over photographs keeps the dark tokens */
html[data-theme="light"] :is(.why-band,.wc-photo,.own-photo,.shot-img,.pin,.toast){
  --ink:#0A0908;--ink-raised:#131110;--ink-lift:#1C1917;--edge:#2C2721;
  --paper:#F7F5F1;--paper-dim:#A69E92;--paper-faint:#8A8176;--paper-soft:#D2CBC0;
  --gold:#C9A227;--gold-lit:#F2DA8B;
  --metal:linear-gradient(100deg,#7E6014 0%,#C9A227 20%,#F2DA8B 44%,#C9A227 60%,#7E6014 100%);
  --hair:rgba(242,218,139,.16);--hair-soft:rgba(247,245,241,.08);
  color:var(--paper);
}
html[data-theme="light"] .why-band.glass{background:#0A0908}
/* the labels over the hero photograph (wide windows only; below that they are a list on the page) */
@media (min-width:1280px){
  html[data-theme="light"][data-design="plain"] .lab{--paper:#F7F5F1;--paper-dim:#A69E92;--gold:#C9A227;--gold-lit:#F2DA8B;color:var(--paper)}
}
html[data-theme="light"] :is(.ht-1,.closer-title .w){background:linear-gradient(180deg,#1A1612 30%,#4A4238 100%);-webkit-background-clip:text;background-clip:text}
html[data-theme="light"][data-design="plain"] .check .box{background:#FFFFFF;box-shadow:inset 0 0 0 1.5px rgba(70,52,20,.45)}

/* =====================================================================
   Poster Wall (home-poster.css)
   ===================================================================== */
html[data-theme="light"][data-design="poster"]{
  --metal:linear-gradient(100deg,#7E6014 0%,#C9A227 20%,#F2DA8B 44%,#C9A227 60%,#7E6014 100%);
  --metal-lit:linear-gradient(100deg,#5E470A 0%,#8A6A0F 26%,#AD871A 50%,#8A6A0F 74%,#5E470A 100%);
  --edge-2:#CDBFA6;--paper-soft:#3A332B;--gold-line:rgba(130,99,12,.5);--gold-wash:rgba(201,162,39,.12);--field:#8A7F70;
}
html[data-theme="light"] .wall::before{background:linear-gradient(90deg,var(--ink) 4%,rgba(245,240,230,0))}
html[data-theme="light"] .wall::after{background:linear-gradient(270deg,var(--ink) 4%,rgba(245,240,230,0))}
html[data-theme="light"] :is(.pf-in,.get-fig,.gf-in,.pt-fig,.cl-fig){
  --paper:#F7F5F1;--paper-dim:#A69E92;--paper-faint:#8A8176;--gold:#C9A227;--gold-lit:#F2DA8B;
}

/* a gold disc with dark figures: the bright gold, not the text gold */
html[data-theme="light"] .seo-steps__no{background:linear-gradient(100deg,#7E6014 0%,#C9A227 20%,#F2DA8B 44%,#C9A227 60%,#7E6014 100%)}

/* "Where we run" is words over a photograph only on a wide window; narrower, the words sit under it, on the page */
@media (min-width:900px){html[data-theme="light"][data-design="plain"] .net{--ink:#0A0908;--ink-raised:#131110;--ink-lift:#1C1917;--edge:#2C2721;--paper:#F7F5F1;--paper-dim:#A69E92;--paper-faint:#8A8176;--paper-soft:#D2CBC0;--gold:#C9A227;--gold-lit:#F2DA8B;--metal:linear-gradient(100deg,#7E6014 0%,#C9A227 20%,#F2DA8B 44%,#C9A227 60%,#7E6014 100%);--metal-lit:linear-gradient(100deg,#B8921F 0%,#E2C158 26%,#F8E7A5 50%,#E2C158 74%,#B8921F 100%);color:var(--paper)}}
@media (min-width:861px){html[data-theme="light"][data-design="poster"] .net{--ink:#0A0908;--ink-raised:#131110;--ink-lift:#1C1917;--edge:#2C2721;--paper:#F7F5F1;--paper-dim:#A69E92;--paper-faint:#8A8176;--paper-soft:#D2CBC0;--gold:#C9A227;--gold-lit:#F2DA8B;--metal:linear-gradient(100deg,#7E6014 0%,#C9A227 20%,#F2DA8B 44%,#C9A227 60%,#7E6014 100%);--metal-lit:linear-gradient(100deg,#B8921F 0%,#E2C158 26%,#F8E7A5 50%,#E2C158 74%,#B8921F 100%);color:var(--paper)}}

/* Plain Talk and Poster Wall draw the logo as a picture: the dark-N copy on a light page */
html[data-theme="light"] img[src="/assets/img/logo.png"]{content:url(/assets/img/logo-light.png)}

/* the inner pages: the key sits with the menu button, at the right of the bar */
.nav__inner .theme-switch{margin-left:auto}
.nav__inner .theme-switch + .nav__toggle{margin-left:10px}
