/* ═══════════════════════════════════════════════════════════════════════
   w_clock_blueprint_skin.css — DARX10 "white on dark, gold trim" console
   Page-local skin for __darmaster/10/w_clock_blueprint.php ONLY.
   Daralbeida Multi-Entity Platform · 2026-06-14

   UNIFORM RULE (set by the user): every piece of TEXT is WHITE, sitting on a
   DARK surface. GOLD is used ONLY for borders and the active state.

   HOW IT WORKS (Key 2 — one source of truth):
   The page loads DARX10 via darx_load_skin('DARX10', …) for its fonts + gold.
   This file then (a) overrides the platform skin vars the embedded world-clock
   widget already reads (--nav-bg / --nav-text / --bg-color / --surface-color /
   --text-color) so the widget renders dark-bg + WHITE text + gold accent with
   no per-widget styling, and (b) derives its own --bp-* tokens the same way.
   Gold stays from DARX10 (--brand-accent / --nav-gold = #D8BC66).

   FONTS stay from tokens.css (var(--font-mono) / var(--font-body)).
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   PLATFORM SKINS — DARMASTER + the entity skins, selectable via [data-skin].
   Each platform skin's REAL palette (its brand primary + accent) is mapped to:
     --bp-paper   = the skin's light page background (brand-primary on cream)
     --bp-surface = the skin's dark card/nav tone   (brand-primary on near-black)
     --bp-accent  = the skin's accent
     --bp-ink     = white (cards stay dark so the gauges read — contrast handling)
   So the page wears each skin's true background + accent while the instrument
   cards remain dark and legible. Derived below; the widget re-colours too.
   ═══════════════════════════════════════════════════════════════════════ */
/* DARMASTER — now SKINNABLE: derive from the LIVE skin vars emitted by
   darx_load_skin() (the skin manager edits these), so ddesk follows DARMASTER
   skin changes like any other page. --bp-surface keeps a guaranteed-dark card by
   mixing the skin's brand-primary toward near-black (white gauges stay legible). */
html[data-skin="darmaster"]{ --bp-paper: var(--page-bg); --bp-surface: color-mix(in srgb, var(--brand-primary, #3C3C3E) 84%, #0b0b0c); --bp-accent: var(--nav-gold, #C9BBA0); --bp-ink: var(--nav-text-hover, #EDE3CE); --bp-ink-soft: var(--nav-text, rgba(237,227,206,.6)); }
/* entities — paper/surface derived from each brand-primary, accent = brand-accent */
html[data-skin="darx"]   { --bp-paper: color-mix(in srgb, #46331E 22%, #FBF7F0); --bp-surface: color-mix(in srgb, #46331E 82%, #0b0b0c); --bp-accent: #D8A845; --bp-ink: #fff; --bp-ink-soft: rgba(255,255,255,.72); }
html[data-skin="darh"]   { --bp-paper: color-mix(in srgb, #2B4D7A 22%, #FBF7F0); --bp-surface: color-mix(in srgb, #2B4D7A 82%, #0b0b0c); --bp-accent: #C7A04E; --bp-ink: #fff; --bp-ink-soft: rgba(255,255,255,.72); }
html[data-skin="darm"]   { --bp-paper: color-mix(in srgb, #3E5B33 22%, #FBF7F0); --bp-surface: color-mix(in srgb, #3E5B33 82%, #0b0b0c); --bp-accent: #B89A4C; --bp-ink: #fff; --bp-ink-soft: rgba(255,255,255,.72); }
html[data-skin="darx07"] { --bp-paper: color-mix(in srgb, #353A40 22%, #FBF7F0); --bp-surface: color-mix(in srgb, #353A40 82%, #0b0b0c); --bp-accent: #C7A04E; --bp-ink: #fff; --bp-ink-soft: rgba(255,255,255,.72); }
html[data-skin="darx08"] { --bp-paper: color-mix(in srgb, #57503C 22%, #FBF7F0); --bp-surface: color-mix(in srgb, #57503C 82%, #0b0b0c); --bp-accent: #C7A04E; --bp-ink: #fff; --bp-ink-soft: rgba(255,255,255,.72); }
html[data-skin="darx09"] { --bp-paper: color-mix(in srgb, #7E6A2E 22%, #FBF7F0); --bp-surface: color-mix(in srgb, #7E6A2E 82%, #0b0b0c); --bp-accent: #D4B45E; --bp-ink: #fff; --bp-ink-soft: rgba(255,255,255,.72); }
html[data-skin="darx10"] { --bp-paper: color-mix(in srgb, #9C8038 22%, #FBF7F0); --bp-surface: color-mix(in srgb, #9C8038 82%, #0b0b0c); --bp-accent: #D8BC66; --bp-ink: #fff; --bp-ink-soft: rgba(255,255,255,.72); }
/* default / fallback for unknown values = the LIVE DARMASTER skin (skinnable) */
html{ --bp-paper: var(--bg-color, #EDE3CE); --bp-surface: color-mix(in srgb, var(--brand-primary, #3C3C3E) 84%, #0b0b0c); --bp-accent: var(--nav-gold, #C9BBA0); --bp-ink: #ffffff; --bp-ink-soft: rgba(255,255,255,.72); }

/* derived tokens + widget feed — resolve the active skin's base tokens.
   Selector is html:root (specificity 0,1,1) so these BEAT tokens.css / the
   inline skin vars (plain :root = 0,1,0); otherwise the world-clock widget
   would keep reading DARX10's --nav-bg/--nav-gold and the bands never recolour. */
html:root{
  --bp-gold:        var(--bp-accent);          /* internal name kept; = the skin accent */
  --bp-surface-2:   color-mix(in srgb, var(--bp-surface) 80%, #fff);
  --bg-color:       var(--bp-paper);
  --surface-color:  var(--bp-surface);
  --text-color:     var(--bp-ink);

  /* ── TYPE SCALE — sourced from the PLATFORM ladder (tokens.css --ui-fs-*) so this
     console matches the rest of the platform and is floor/zoom-aware. The old
     --base-size×ratio steps produced sub-14px labels (10.24 / 12.8px) that the
     browser font-floor flattened — the recurring "fonts wrong" bug. Clock digits
     stay large as a multiple of the platform display step. (user 2026-06-26) */
  --r:      var(--scale-ratio, 1.25);
  --fs-2xs: var(--ui-fs-micro, 12px);                /* small labels — platform micro */
  --fs-xs:  var(--ui-fs-label, 13px);                /* tab / sub-labels — platform label */
  --fs-sm:  var(--ui-fs-body, 14px);                 /* body — platform body */
  --fs-md:  var(--ui-fs-title, 16px);                /* headings — platform title */
  --fs-lg:  calc(var(--ui-fs-display, 19px) * 1.25); /* large readout */
  --fs-xl:  calc(var(--ui-fs-display, 19px) * 1.7);  /* clock digits — large data */
}

/* ── Widget-only nav-var remap ────────────────────────────────────────────
   The world-clock widget reads --nav-bg/--nav-gold to colour its bands. We
   remap those to the blueprint palette HERE on the widget container ONLY —
   NOT at html:root — so the platform nav header (mui_nav(), a SIBLING of
   .bp-wrap, NOT a descendant) keeps reading the live DARMASTER skin values
   from tokens.css, identical to every other DARMASTER page. ONE source of
   truth for the nav; the blueprint only recolours what lives inside it. */
.bp-wrap{
  --nav-bg:         var(--bp-surface);
  --nav-text:       var(--bp-ink);
  --nav-text-hover: var(--bp-ink);
  --nav-gold:       var(--bp-accent);
  --nav-gold-light: color-mix(in srgb, var(--bp-accent) 62%, #fff);
  --brand-accent:   var(--bp-accent);
}

/* ── Page: flat dark sheet, no chrome, no grid ───────────────────────────── */
html, body{ background-color: var(--bp-paper); color: var(--bp-ink); }
body.bp-sheet{ min-height: 100vh; background-color: var(--bp-paper); background-image: none; }

.bp-wrap{ position: relative; max-width: 1280px; margin: 0 auto; padding: 40px 22px; }
.bp-frame{ position: relative; border: none; box-shadow: none; background: none; padding: 0; }
.bp-frame::before, .bp-frame::after{ display: none; }

/* decorative chrome stays in the DOM but is not shown */
.bp-head, .bp-titleblock, .bp-sec-h, .bp-embed{ display: none !important; }

/* ── CONSOLE shell ────────────────────────────────────────────────────── */
.bp-console{ position: relative; max-width: 1120px; margin: 0 auto; }

/* outer 2-column split: COL 1 rail · COL 2 content (city table + shared table) */
.bp-layout{ display: grid; grid-template-columns: 224px minmax(0, 1fr); gap: 18px; align-items: start; }

/* ── COLUMN 1 — RAIL (skin chooser on top, then feature groups) ───────── */
.bp-rail{
  display: flex; flex-direction: column; gap: 16px;
  border: 1px solid color-mix(in srgb, var(--bp-gold) 18%, transparent);
  border-radius: 10px; padding: 14px; background: color-mix(in srgb, var(--bp-surface) 60%, transparent);
}
/* skin chooser — sits at the TOP of the rail; swatches wrap (8 skins + custom) */
.bp-skinbar{
  display: flex; align-items: center; flex-wrap: wrap; gap: 9px; padding-bottom: 13px;
  border-bottom: 1px solid color-mix(in srgb, var(--bp-gold) 20%, transparent);
}
.bp-skinbar-label{
  flex: 1 0 100%; margin: 0 0 4px;
  font-family: var(--font-sans); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--bp-ink-soft);
}
.bp-skin-sw{
  width: 18px; height: 18px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.35);
  transition: transform .12s ease, box-shadow .12s ease;
}
.bp-skin-sw:hover{ transform: scale(1.14); }
.bp-skin-sw.active{ box-shadow: 0 0 0 2px var(--bp-surface), 0 0 0 4px var(--bp-ink); }
.bp-skin-sw[data-skin="darmaster"]{ background: #C9BBA0; }
.bp-skin-sw[data-skin="darx"]{ background: #D8A845; }
.bp-skin-sw[data-skin="darh"]{ background: #C7A04E; }
.bp-skin-sw[data-skin="darm"]{ background: #B89A4C; }
.bp-skin-sw[data-skin="darx07"]{ background: #C7A04E; }
.bp-skin-sw[data-skin="darx08"]{ background: #C7A04E; }
.bp-skin-sw[data-skin="darx09"]{ background: #D4B45E; }
.bp-skin-sw[data-skin="darx10"]{ background: #D8BC66; }
/* custom-colour swatch (an <input type=color> styled as a round chip) */
.bp-skin-custom{
  width: 20px; height: 20px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.4); background: none; overflow: hidden;
  -webkit-appearance: none; appearance: none; transition: transform .12s ease, box-shadow .12s ease;
}
.bp-skin-custom::-webkit-color-swatch-wrapper{ padding: 0; }
.bp-skin-custom::-webkit-color-swatch{ border: none; border-radius: 50%; }
.bp-skin-custom::-moz-color-swatch{ border: none; border-radius: 50%; }
.bp-skin-custom:hover{ transform: scale(1.14); }
.bp-skin-custom.active{ box-shadow: 0 0 0 2px var(--bp-surface), 0 0 0 4px var(--bp-ink); }

.bp-rail-group{ display: flex; flex-direction: column; gap: 6px; }
.bp-rail-label{
  font-family: var(--font-sans); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--bp-ink-soft); padding: 0 2px 6px;
  border-bottom: 1px solid color-mix(in srgb, var(--bp-gold) 22%, transparent); margin-bottom: 2px;
}
.bp-tab{
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; cursor: pointer;
  padding: 11px 13px; border-radius: 8px;
  font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-xs); letter-spacing: 1px; text-transform: uppercase;
  color: var(--bp-ink); background: var(--bp-surface);
  border: 1px solid color-mix(in srgb, var(--bp-gold) 22%, transparent);
  transition: color .15s, border-color .15s, background .15s;
}
.bp-tab:hover{ border-color: var(--bp-gold); background: color-mix(in srgb, var(--bp-gold) 12%, var(--bp-surface)); }
.bp-tab.active{
  border-color: var(--bp-gold);
  background: color-mix(in srgb, var(--bp-gold) 20%, var(--bp-surface));
  box-shadow: inset 3px 0 0 0 var(--bp-gold);   /* gold active marker on the rail edge */
}
.bp-tab-ico{ flex: 0 0 auto; font-size: 1.05em; line-height: 1; }
.bp-tab-txt{ flex: 1 1 auto; }
.bp-tab[data-target="sun"] .bp-tab-ico{ color: #FFD24A; text-shadow: 0 0 8px rgba(255, 210, 74, 0.6); }
.bp-tab[data-target="moon"] .bp-tab-ico{ color: #FFFFFF; text-shadow: 0 0 8px rgba(255, 255, 255, 0.55); }
/* ── COLUMN 2 — city table + nested one-cell shared table ─────────────── */
.bp-col2{ min-width: 0; }

/* CITY TABLE: real table, 2 equal columns (one per city).

   border-spacing is horizontal-only (14px 0) so the first row's TOP aligns with
   the rail / skin-chooser top — no extra space pushing the cities down. */
.bp-citytable{ width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 14px 0; }
.bp-citytable th, .bp-citytable td{ width: 50%; vertical-align: top; padding: 0; text-align: left; font-weight: 400; }
.bp-citytable tbody td{ padding-top: 14px; }   /* header → body gap (replaces vertical border-spacing) */

/* header cell: city face card + its selector stacked */
.bp-citytable thead .bp-face{
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; flex-wrap: wrap;
  padding: 13px 16px; border-radius: 9px; margin-bottom: 7px;
  border: 1px solid color-mix(in srgb, var(--bp-gold) 24%, transparent); background: var(--bp-surface);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
.bp-face-city{
  font-family: var(--font-sans); font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase;
  font-size: var(--fs-xs); color: var(--bp-ink-soft);
}
.bp-face-readout{ display: flex; flex-direction: column; align-items: center; gap: 1px; }
.bp-face-time{
  font-family: var(--font-mono); font-weight: 800; letter-spacing: 1px; font-size: var(--fs-xl); line-height: 1.05;
  color: var(--bp-ink); font-variant-numeric: tabular-nums;
  /* crisp readout: a hairline depth shadow + a tight accent glow (no blur haze) */
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45), 0 0 6px color-mix(in srgb, var(--bp-gold) 32%, transparent);
}
.bp-face-date{
  font-family: var(--font-mono); font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase;
  font-size: var(--fs-2xs); color: var(--bp-ink-soft);
}
/* 2026-06-15 (user): the city dropdown reads as the city NAME with just a small
   caret HINT — no heavy box. */
.bp-city-select{
  -webkit-appearance: none; appearance: none;
  font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--bp-ink-soft); background-color: transparent;
  /* caret colour matches the skin accent (--bp-accent/--nav-gold = #D8A845);
     hardcoded because a CSS var can't be injected into an SVG data-URL. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%23D8A845' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: right 1px center;
  border: none; border-radius: 0; padding: 1px 17px; cursor: pointer;
  flex: 0 0 auto; max-width: 100%; min-width: 0; outline: none;
  text-align: center; text-align-last: center;
  transition: color .15s;
}
.bp-city-select:hover, .bp-city-select:focus{ color: var(--bp-gold); outline: none; }
.bp-city-select option{ background: var(--bp-surface); color: var(--bp-ink); font-weight: 600; letter-spacing: 0; text-transform: none; }

/* the body row only appears when a city-dependent feature is open */
.bp-citytable tbody tr:not(:has(.wtd-cband:not([hidden]))){ display: none; }
/* neutralise the widget card's own chrome so the band panel is the only box */
.bp-citytable .wtd-strip{ margin: 0; }
.bp-citytable .wtd-card{ background: none !important; border: none !important; box-shadow: none !important; padding: 0 !important; }
.bp-citytable .wtd-cband{
  border: 1px solid color-mix(in srgb, var(--bp-gold) 30%, transparent);
  border-radius: 10px; padding: 12px 14px; background: var(--bp-surface);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
/* band sub-titles inside the panels — uniform size so nothing looks huge/tiny */
.bp-citytable .wtd-group-bandlabel,
.bp-sharedtable .wtd-group-bandlabel{
  font-family: var(--font-sans); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--bp-ink-soft); margin: 4px 2px 8px;
}

/* SHARED TABLE: one cell; only appears when a shared feature is open */
.bp-sharedtable{ width: 100%; margin-top: 14px; border-collapse: separate; }
.bp-sharedtable td{ padding: 0; }
.bp-sharedtable:not(:has(.console-band:not([hidden]))){ display: none; }
.bp-sharedtable .console-band{
  border: 1px solid color-mix(in srgb, var(--bp-gold) 30%, transparent);
  border-radius: 10px; padding: 14px 16px; background: var(--bp-surface);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.bp-sharedtable .console-band[hidden]{ display: none; }

/* FOB Incoterm tabs were invisible (transparent inactive buttons) — give each a
   readable surface + border so they read as tabs; active stays the accent pill. */
.bp-sharedtable .dfob-seg{ gap: 4px; }
.bp-sharedtable .dfob-seg button{
  background: color-mix(in srgb, var(--bp-gold) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--bp-gold) 28%, transparent);
  color: var(--bp-ink);
}
.bp-sharedtable .dfob-seg button:hover{
  background: color-mix(in srgb, var(--bp-gold) 22%, transparent);
  border-color: var(--bp-gold);
}
/* currency numbers were ~22px — pin them to a scale step below the time */
.bp-sharedtable .dfx-amt, .bp-sharedtable .dfx-result{ font-size: var(--fs-md); }

/* ── FONT CONVENTION (user 2026-06-26): UI text = platform sans (Inter); mono is kept
   ONLY for the clock digits + numeric readouts. The console chrome is flipped above;
   the embedded world-clock widget ships its OWN mono labels, so flip those to sans
   HERE — scoped to the console (.bp-* containers) so other widget embeds are untouched.
   The widget's numeric values keep its mono; the FX currency numbers are re-pinned mono. */
.bp-sheet{ font-family: var(--font-sans); }
/* Flip the widget's LABEL classes → platform sans. The .bp-sheet prefix = (0,4,0),
   which beats the widget's own mono rules (loaded later, inline). Everything ELSE keeps
   the widget's mono, so NO numeric readout is ever flipped to sans — numbers stay mono. */
.bp-sheet .bp-citytable .wtd-cband [class*="label"],
.bp-sheet .bp-citytable .wtd-cband [class*="lbl"],
.bp-sheet .bp-citytable .wtd-cband [class*="name"],
.bp-sheet .bp-citytable .wtd-cband .wtd-biz-badge,
.bp-sheet .bp-citytable .wtd-cband .wtd-offset,
.bp-sheet .bp-citytable .wtd-cband .wtd-legend,
.bp-sheet .bp-citytable .wtd-cband .wtd-legend *,
.bp-sheet .bp-sharedtable .console-band [class*="label"],
.bp-sheet .bp-sharedtable .console-band [class*="lbl"],
.bp-sheet .bp-sharedtable .console-band [class*="name"],
.bp-sheet .bp-sharedtable .console-band [class*="title"],
.bp-sheet .bp-sharedtable .console-band [class*="sub"],
.bp-sheet .bp-sharedtable .console-band .dwo-ro-time{ font-family: var(--font-sans) !important; }
/* axis tick NUMBERS match [class*=label] above but ARE numbers — keep them mono */
.bp-sheet .bp-citytable .wtd-cband .wtd-band-label{ font-family: var(--font-mono) !important; }
.bp-sharedtable .dfx-amt, .bp-sharedtable .dfx-result{ font-family: var(--font-mono); }

/* ── Narrow-screen rail retract + handle ─────────────────────────────── */
.bp-handle{
  display: none; position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: 40;
  width: 26px; height: 56px; align-items: center; justify-content: center; cursor: pointer;
  color: var(--bp-ink); background: var(--bp-surface);
  border: 1px solid color-mix(in srgb, var(--bp-gold) 40%, transparent); border-left: none;
  border-radius: 0 9px 9px 0; font-family: var(--font-sans); font-size: var(--fs-md); line-height: 1;
}

@media (max-width: 860px){
  .bp-layout{ grid-template-columns: 1fr; gap: 0; }
  .bp-rail{
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 50; width: 250px; max-width: 84vw;
    border-radius: 0; border: none; border-right: 1px solid color-mix(in srgb, var(--bp-gold) 30%, transparent);
    background: var(--bp-paper); overflow-y: auto;
    transform: translateX(-100%); transition: transform .25s ease; box-shadow: 6px 0 30px rgba(0, 0, 0, 0.5);
  }
  .bp-console.rail-open .bp-rail{ transform: translateX(0); }
  .bp-console.rail-open::before{ content: ""; position: fixed; inset: 0; z-index: 45; background: rgba(0, 0, 0, 0.5); }
  .bp-handle{ display: flex; }
}
@media (max-width: 620px){
  .bp-wrap{ padding: 24px 12px; }
  /* KEEP the two cities side-by-side at every width — a world clock is a comparison
     view, so each city stays its OWN column with its detail panels directly under its
     clock. (was: the table stacked to one column, dumping both city headers first then
     both detail stacks, so you couldn't tell which detail belonged to which. user 2026-06-26)
     Just tighten the gap + drop the clock a step so two columns fit. */
  .bp-citytable{ border-spacing: 8px 0; }
  .bp-citytable tbody td{ padding-top: 10px; }
  .bp-face-time{ font-size: var(--fs-md); }
  .bp-face{ padding: 10px 8px; }
}