/* ==========================================================================
   skin.css — shared recolor layer for the /designs/ previews.
   Layered AFTER /static/style116.css + /static/navigation116.css, so these
   rules win on equal specificity (later in the cascade). Colours only —
   all layout, spacing, responsive behaviour and fonts come from the base CSS.
   Every colour is a var(--token) supplied by the per-design palette file.
   ========================================================================== */

/* ---- base surfaces & text -------------------------------------------------*/
body            { background: var(--bg); color: var(--text); }
main, main p, main li, main ul, main ol { color: var(--text); }
em              { color: var(--muted); }
strong          { color: var(--strong) !important; font-weight: 700; }
a strong, strong a { color: var(--accent) !important; }
a               { color: var(--accent); }
a:hover         { color: var(--accent-h); }
hr              { border-top-color: var(--rule); }

/* ---- headings -------------------------------------------------------------*/
h1 { color: var(--heading); border-bottom-color: var(--rule); }
h2 { color: var(--h2); border-left-color: var(--h2); }
h3 { color: var(--h3); }
h4 { color: var(--h4); }

/* ---- tables ---------------------------------------------------------------*/
table          { background: var(--surface); box-shadow: 0 1px 4px var(--glow); }
caption        { color: var(--muted); border-left-color: var(--accent); background: var(--surface2); }
th             { background: var(--accent); color: var(--on-accent); border-bottom-color: var(--rule); }
td             { color: var(--text); border-bottom-color: var(--border); }
tr:nth-child(even) { background: var(--surface2); }
tr:hover       { background: var(--surface3); }
table, th, td  { border-color: var(--border); }

/* ---- connections bar (pill nav under h1) ----------------------------------*/
.connections-bar                  { background: var(--surface); border-left-color: var(--accent); }
.connections-bar .connections-label { color: var(--accent); }
.connections-bar a                { background: var(--pill-bg); border-color: var(--pill-border); color: var(--pill-text) !important; }
.connections-bar a:hover          { background: var(--accent); color: var(--on-accent) !important; border-color: var(--accent); }

/* ---- editorial note callout ----------------------------------------------*/
.editorial-note          { background: var(--note); border-left-color: var(--note-accent); color: var(--note-text); }
.editorial-note p        { color: var(--note-text); }
.editorial-note strong   { color: var(--note-accent) !important; }
.editorial-note a        { color: var(--accent); }

/* ---- video / card grids ---------------------------------------------------*/
.video-item              { background: var(--surface); border-color: var(--border); box-shadow: 0 2px 8px var(--glow); }
.video-item:hover        { box-shadow: 0 6px 20px var(--glow); }
.video-item a            { color: var(--accent); }
.video-item a:hover      { color: var(--accent-h); }
.video-media             { background: var(--surface2); }
.video-description       { color: var(--muted); }

/* ---- category cards (designs demo) ---------------------------------------*/
.cat-grid   { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; margin: 8px 0 28px 0; }
.cat-card   { display: block; background: var(--surface); border: 1px solid var(--border);
              border-radius: 10px; padding: 16px 18px; text-decoration: none; color: var(--text);
              box-shadow: 0 2px 8px var(--glow); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.cat-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 8px 22px var(--glow); }
.cat-card .cat-chip { display:inline-block; font-size: 22px; line-height: 1; margin-bottom: 6px; }
.cat-card h3 { margin: 4px 0 6px 0; color: var(--heading); }
.cat-card p  { margin: 0; font-size: 0.9em; line-height: 1.5; color: var(--muted); }
@media (max-width: 900px) { .cat-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .cat-grid { grid-template-columns: 1fr; } }

/* placeholder "thumbnail" for the demo video tiles (no external images) */
.demo-thumb { display:flex; align-items:center; justify-content:center; width:100%; height:100%;
              background: var(--nav-grad); color: var(--nav-text); font-size: 34px; opacity: 0.92; }

/* ---- footer ---------------------------------------------------------------*/
.footer        { background: var(--nav-grad); color: var(--nav-text); border-top-color: var(--nav-accent); }
.footer p      { color: var(--nav-text) !important; }
.footer a      { color: var(--nav-accent) !important; }
.footer a:hover{ color: var(--accent-h) !important; }

/* ---- code -----------------------------------------------------------------*/
code { background: var(--surface2); color: var(--code); border-color: var(--border); }
pre  { background: var(--surface); color: var(--text); border-left-color: var(--accent); }

/* ==========================================================================
   NAVIGATION — recolor the fetched navbar / mega-menu / breadcrumb.
   Bar = medium tone of the hue (light text); mega-panels = light (dark text).
   ========================================================================== */
.breadcrumb        { background: var(--surface); border-bottom-color: var(--border); color: var(--muted); }
.breadcrumb a      { color: var(--accent); }
.breadcrumb a:hover{ color: var(--accent-h); }

.navbar            { background: var(--nav-grad); border-bottom-color: var(--nav-accent); top: 44px; }
.navbar a          { color: var(--nav-text); }
.navbar > ul > li:hover > a        { background-color: var(--nav-hover); color: var(--nav-text); }
.navbar > ul > li:hover > a::after { background-color: var(--nav-accent); }
.navbar > ul > li + li:not(.nav-search)::before { color: var(--nav-dot); }

.navbar .dropdown        { background: var(--nav-surface); border-color: var(--border); border-top-color: var(--nav-accent); }
.navbar .dropdown li a   { color: var(--nav-menu-text); }
.navbar .dropdown li a:hover { background: var(--nav-hover2); color: var(--accent); }

.mega-menu               { background: var(--nav-surface); border-color: var(--border); border-top-color: var(--nav-accent); }
.mega-col                { border-right-color: var(--border); }
.mega-col-header,
a.mega-col-header        { color: var(--accent) !important; border-bottom-color: var(--border); }
a.mega-col-header:hover  { color: var(--accent-h) !important; }
.mega-col ul li a        { color: var(--nav-menu-text); }
.mega-col ul li a:hover  { background: var(--nav-hover2); color: var(--accent); }
.mega-col-viewall,
a.mega-col-viewall       { color: var(--accent) !important; border-top-color: var(--border); }
a.mega-col-viewall:hover { color: var(--accent-h) !important; }
.mega-col-sublabel       { color: var(--muted); }

.nav-search a            { color: var(--nav-text); }
.nav-search a:hover      { background-color: var(--nav-hover); }

.dropdown::-webkit-scrollbar-track { background: var(--nav-surface); }
.dropdown::-webkit-scrollbar-thumb { background: var(--nav-accent); }

/* mobile bar (shown < 1200px) */
.mobile-nav        { background: var(--nav-grad); border-bottom-color: var(--nav-accent); top: 44px; }
.mobile-nav-brand  { color: var(--nav-text); }
.mobile-nav-brand:hover { color: var(--nav-accent); }
.mobile-nav-link   { color: var(--nav-text); }
.mobile-nav-link:hover { background-color: var(--nav-hover); color: var(--nav-text); }
.hamburger span    { background-color: var(--nav-text); }
.hamburger:hover   { background-color: var(--nav-hover); }

/* ==========================================================================
   DESIGN SWITCHER — the preview-only strip at the very top of each page.
   ========================================================================== */
.ds-bar { position: sticky; top: 0; z-index: 11000;
          height: 44px; box-sizing: border-box;
          margin: 0 -40px; padding: 0 40px;
          background: var(--switch-bg); color: var(--switch-text);
          font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
          display: flex; align-items: center; gap: 10px; flex-wrap: nowrap;
          overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
          box-shadow: 0 2px 10px rgba(0,0,0,0.28); }
.ds-bar::-webkit-scrollbar { display: none; }
.ds-bar .ds-label { font-weight: 700; font-size: 13px; white-space: nowrap;
                    letter-spacing: .03em; opacity: .92; }
.ds-bar a { display: inline-block; white-space: nowrap; text-decoration: none;
            font-size: 13px; font-weight: 600; padding: 5px 12px; border-radius: 999px;
            color: var(--switch-text); border: 1px solid rgba(255,255,255,0.25);
            background: rgba(255,255,255,0.06); transition: background .15s ease, color .15s ease; }
.ds-bar a:hover { background: rgba(255,255,255,0.18); color: #fff; }
.ds-bar a.ds-cur { background: var(--switch-active-bg); color: var(--switch-active-text);
                   border-color: var(--switch-active-bg); }
.ds-bar a .ds-num { opacity: .7; font-weight: 700; margin-right: 5px; }
@media (max-width: 1200px) { .ds-bar { margin: 0; padding: 9px 14px; } }

/* a small "you are viewing" caption under the hero */
.ds-caption { font-size: 0.92em; color: var(--muted); margin: -6px 0 18px 0; }
.ds-caption strong { color: var(--accent) !important; }

/* ==========================================================================
   THEME PICKER — the visitor-facing control (reusable on the live site).
   ========================================================================== */
.theme-picker { display: flex; flex-wrap: wrap; gap: 9px; align-items: center;
                margin: 6px 0 26px 0; padding: 14px 16px;
                background: var(--surface); border: 1px solid var(--border);
                border-radius: 12px; box-shadow: 0 2px 10px var(--glow); }
.theme-picker .tp-label { font-weight: 700; color: var(--accent); margin-right: 4px;
                          white-space: nowrap; }
.tp-swatch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
             padding: 6px 12px 6px 8px; border-radius: 999px;
             border: 1px solid var(--border); background: var(--surface2);
             color: var(--text); font-size: 13px; font-weight: 600;
             font-family: inherit; transition: border-color .15s ease, transform .12s ease; }
.tp-swatch:hover { border-color: var(--accent); transform: translateY(-1px); }
.tp-swatch.tp-active { border-color: var(--accent);
                       box-shadow: 0 0 0 2px var(--accent) inset; }
.tp-dot { width: 18px; height: 18px; border-radius: 50%; flex: 0 0 auto;
          border: 1px solid rgba(127,127,127,0.45); }