/* Pinhole Day / Night: Night stylesheet, toggle styles and Theme Options picker styles.
   Written 04-11-2026 for the Pinhole theme (Feature-Addition/91). Printed after pinhole-main, before Additional CSS.
   Every Night rule is gated by html[data-theme] and sits inside @media screen, so print is always Day. */


:root {
  --dm-bg: #0e0d0b;               /* Night page background */
  --dm-surface: #161411;          /* section surface */
  --dm-surface-elev: #1d1a16;     /* card / drawer */
  --dm-elevated: #25211c;         /* lightest surface */
  --dm-shop-outer: #090807;       /* Shop screen outer background */
  --dm-ink: #f3ede2;              /* text primary */
  --dm-ink-soft: #ddd5c7;         /* text secondary */
  --dm-muted: #aca393;            /* text muted */
  --dm-gold: #c9a86a;             /* Night accent (decision 4) */
  --dm-on-gold: #16120d;          /* text on a gold fill in Night */
  --dm-border: #2e2922;           /* card outlines: subtle (decision 6) */
  --dm-border-strong: #3e3830;    /* dividers only */
  --dm-control-border: #8a806f;   /* text boxes, dropdowns, buttons, toggle edge (decision 6) */
  --dm-ok: #b8e6bb;               /* success text */
  --dm-bad: #ffb4a9;              /* error text */
  /* aliases (no second store): */
  --dm-body: var(--dm-ink-soft);
  --dm-form-text: var(--dm-muted);
  --dm-gold-hi: var(--dm-gold);
  --dm-link: var(--dm-gold);
  --dm-link-hover: var(--dm-gold);
  --as-dm-toggle-ink: #8a5220;    /* toggle text and its Day edge: 6.3:1 on white */
}
@media screen {

/* ============================================================================
   10 ANIMATED DAY & NIGHT ICON VARIATIONS — MASTER CSS
   Controlled by:
     - Theme state: html[data-theme="dark"] 
     - Active variation on live site: html[data-icon-var="v1".."v10"]
     - Speed multiplier: --as-icon-speed (default 1)
   ============================================================================ */
:root {
  --as-icon-speed: 1;
  --as-gold-1: #d9b45f;
  --as-gold-2: #c08a3c;
  --as-gold-3: #a85f2b;
  --as-day-bg1: #fcf0d8;
  --as-day-bg2: #f1d8b0;
  --as-night-bg1: #1c1711;
  --as-night-bg2: #2c2318;
}

.as-dm-btn {
  position: relative;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 28px;
  min-width: 28px;
  padding: 0 7px;
  border-radius: 999px;
  border: 1px solid rgba(184, 151, 74, 0.68) !important;
  background: linear-gradient(135deg, #fcf0d8 0%, #f1d8b0 55%, #eac6a4 100%) !important;
  color: var(--as-dm-toggle-ink) !important;
  cursor: pointer !important;
  user-select: none;
  overflow: hidden;
  transition:
    background calc(0.45s * var(--as-icon-speed)) cubic-bezier(0.22, 1, 0.36, 1),
    border-color calc(0.45s * var(--as-icon-speed)) ease,
    color calc(0.45s * var(--as-icon-speed)) ease,
    box-shadow calc(0.35s * var(--as-icon-speed)) ease,
    transform 0.2s ease !important;
  box-shadow: 0 2px 8px rgba(168, 95, 43, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.65) !important;
}

html[data-theme="dark"] .as-dm-btn{
  background: linear-gradient(135deg, #1b1610 0%, #2b2217 60%, #382b1c 100%) !important;
  border-color: #c9a86a !important;
  color: #e5c687 !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.55), 0 0 12px rgba(201, 168, 106, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.as-dm-btn:hover {
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 4px 14px rgba(184, 151, 74, 0.32) !important;
}
.as-dm-btn:active {
  transform: scale(0.95);
}

/* Click ripple burst on toggle */
.as-dm-btn::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(217, 180, 95, 0.55) 0%, transparent 70%);
  opacity: 0;
  transform: scale(0.4);
  pointer-events: none;
  transition: transform calc(0.5s * var(--as-icon-speed)) ease-out, opacity calc(0.5s * var(--as-icon-speed)) ease-out;
}
.as-dm-btn.as-anim-burst::after {
  opacity: 1;
  transform: scale(1.65);
}

/* Each variation lives in .as-ivar[data-var="vX"] inside the button */
.as-ivar {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  height: 100%;
  position: relative;
}

.as-ivar svg {
  width: 18px !important;
  height: 18px !important;
  overflow: visible;
  display: block;
  flex-shrink: 0;
}

/* ============================================================================
   VARIATION 05: SOFT BRONZE SLIDING PILL (MATCHES SHOP BUTTON)
   ============================================================================ */
.as-ivar-v5 {
  width: 48px !important;
  height: 22px !important;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2px;
}
.as-ivar-v5 .v5-stars {
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%) scale(0.4);
  opacity: 0;
  font-size: 9px;
  line-height: 1;
  color: #e5c687;
  letter-spacing: 1px;
  transition: all calc(0.48s * var(--as-icon-speed)) cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}
.as-ivar-v5 .v5-clouds {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.75;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--as-dm-toggle-ink);
  transition: all calc(0.45s * var(--as-icon-speed)) ease;
  pointer-events: none;
}
.as-ivar-v5 .v5-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #d9b45f 0%, #c08a3c 55%, #a85f2b 100%);
  color: #fff8ec !important;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transform: translateX(0px) rotate(0deg);
  transition: transform calc(0.54s * var(--as-icon-speed)) cubic-bezier(0.34, 1.56, 0.64, 1), background calc(0.45s * var(--as-icon-speed)) ease;
  z-index: 2;
}
.as-ivar-v5 .v5-thumb svg {
  width: 13px !important;
  height: 13px !important;
  stroke: #fff8ec !important;
  fill: #fff8ec !important;
}
.as-ivar-v5 .v5-moon-ic { display: none; }
html[data-theme="dark"] .as-ivar-v5 .v5-thumb{
  transform: translateX(24px) rotate(360deg);
  background: linear-gradient(135deg, #e5c687 0%, #b8974a 100%);
  color: #16120d !important;
}
html[data-theme="dark"] .as-ivar-v5 .v5-thumb svg{
  stroke: #16120d !important;
  fill: #16120d !important;
}
html[data-theme="dark"] .as-ivar-v5 .v5-sun-ic{ display: none; }
html[data-theme="dark"] .as-ivar-v5 .v5-moon-ic{ display: block; }
html[data-theme="dark"] .as-ivar-v5 .v5-stars{
  opacity: 1;
  transform: translateY(-50%) scale(1);
}
html[data-theme="dark"] .as-ivar-v5 .v5-clouds{
  opacity: 0;
  transform: translateY(-50%) translateX(6px);
}


.as-dm-btn .as-ivar-v5 { display: inline-flex !important; }
.as-dm-btn { width: 54px !important; padding: 0 3px !important; }
/* Day edge (finding 24): the toggle only, not the SHOP pill. 1px in the toggle ink, 6.3:1 on white. */
.as-dm-btn { border: 1px solid var(--as-dm-toggle-ink) !important; }

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

  /* ---------- toggle placement (only while the feature is on: with data-dm-on="0" the header keeps its Day layout) ---------- */
  .as-dm-btn .as-ivar svg { pointer-events: none; }
  .as-dm-nav-item { display: none; }
  html .as-dm-btn.as-dm-mobile-bar-toggle { display: none !important; }
  /* Shop routes (exception rule, section 12): the header toggle is not shown; the screens carry their own. */
  html[data-as-shop-route] .as-dm-btn { display: none !important; }
  /* Shop routes: the outer page is painted in the decided mode before the Shop shell draws its frame (finding 8). */
  html[data-as-shop-route][data-as-shop-mode="dark"], html[data-as-shop-route][data-as-shop-mode="dark"] body { background-color: var(--dm-shop-outer) !important; }
  @media (min-width: 751px) {
    /* Desktop: list item straight after SHOP; the cart circle is drawn in SHOP's own right margin. */
    .pinhole-main-nav > li.as-dm-nav-item { display: inline-block !important; margin-left: 12px !important; margin-right: 0 !important; vertical-align: top; position: relative; top: 6px; }
    .pinhole-main-nav > li.as-dm-nav-item .as-dm-btn { position: relative; vertical-align: top; }
    /* Search above Menu in the right slot */
    html:not([data-dm-on="0"]) .pinhole-header .slot-r, html:not([data-dm-on="0"]) .pinhole-header-sticky .slot-r { display: grid !important; grid-template-columns: auto !important; grid-template-rows: auto auto !important; align-items: center !important; justify-items: center !important; row-gap: 2px !important; white-space: nowrap !important; width: auto !important; }
    html:not([data-dm-on="0"]) .pinhole-header .slot-r .pinhole-search, html:not([data-dm-on="0"]) .pinhole-header-sticky .slot-r .pinhole-search { display: inline-flex !important; align-items: center !important; justify-content: center !important; grid-column: 1 !important; grid-row: 1 !important; margin: 0 !important; }
    html:not([data-dm-on="0"]) .pinhole-header .slot-r > ul:not(.pinhole-search), html:not([data-dm-on="0"]) .pinhole-header-sticky .slot-r > ul:not(.pinhole-search) { grid-column: 1 !important; grid-row: 2 !important; justify-self: center !important; }
  }
  /* Size steps follow SHOP (decision 8; owner-changeable default for 751-800px, finding 12). */
  /* 1000px and wider: the list item takes no width, so the menu stays exactly where it is in Day today (centred menu,
     social icons untouched); the button starts where SHOP's own item ends (its cart circle plus SHOP's spacing), in the free space before Search
     (free space on the live CSS: 166px at 1280, 76px at 1100, 98px at 1000). */
  @media (min-width: 1000px) {
    ul.pinhole-main-nav > li.as-dm-nav-item.menu-item { width: 0 !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; }
    ul.pinhole-main-nav > li.as-dm-nav-item .as-dm-btn { position: absolute !important; left: 0; top: 0; }
  }
  /* 751px to 999px: the free space after SHOP is too small (31 to 48px at its narrowest), so the toggle is an ordinary
     list item there and the centred menu moves left by half its width. */
  @media (min-width: 751px) and (max-width: 999px) {
    .pinhole-main-nav > li.as-dm-nav-item { margin-left: 8px !important; }
  }
  @media (min-width: 751px) and (max-width: 900px) {
    .pinhole-main-nav > li.as-dm-nav-item { margin-left: 4px !important; }
    .pinhole-main-nav > li.as-dm-nav-item .as-dm-btn { width: 40px !important; min-width: 40px !important; padding: 0 2px !important; }
    .pinhole-main-nav > li.as-dm-nav-item .as-ivar-v5 { width: 36px !important; }
    .pinhole-main-nav > li.as-dm-nav-item .as-ivar-v5 .v5-clouds { right: 2px; font-size: 7px; }
    .pinhole-main-nav > li.as-dm-nav-item .as-ivar-v5 .v5-stars { left: 3px; letter-spacing: 0; }
    html[data-theme="dark"] .pinhole-main-nav > li.as-dm-nav-item .as-ivar-v5 .v5-thumb { transform: translateX(12px) rotate(360deg); }
  }
  @media (min-width: 751px) and (max-width: 800px) {
    /* icon only: the thumb with the sun or the moon, no DAY text, no stars */
    .pinhole-main-nav > li.as-dm-nav-item { margin-left: 2px !important; }
    .pinhole-main-nav > li.as-dm-nav-item .as-dm-btn { width: 34px !important; min-width: 34px !important; padding: 0 1px !important; }
    .pinhole-main-nav > li.as-dm-nav-item .as-ivar-v5 { width: 30px !important; }
    .pinhole-main-nav > li.as-dm-nav-item .as-ivar-v5 .v5-clouds, .pinhole-main-nav > li.as-dm-nav-item .as-ivar-v5 .v5-stars { display: none !important; }
    html[data-theme="dark"] .pinhole-main-nav > li.as-dm-nav-item .as-ivar-v5 .v5-thumb { transform: translateX(6px) rotate(360deg); }
  }
  @media (max-width: 750px) {
    /* Mobile: Search and the toggle on the upper row, Menu below (decision 9). The crest is not resized (finding 26). */
    .as-dm-nav-item { display: none !important; }
    html .as-dm-btn.as-dm-mobile-bar-toggle { display: inline-flex !important; grid-column: 2 !important; grid-row: 1 !important; justify-self: start !important; align-self: center !important; height: 28px !important; margin: 0 0 0 6px !important; z-index: 1002 !important; }
    /* the slot keeps the theme's own position, so Menu stays where it is today and the crest is not touched */
    html:not([data-dm-on="0"]) .pinhole-header .slot-r, html:not([data-dm-on="0"]) .pinhole-header-sticky .slot-r { display: grid !important; grid-template-columns: auto auto !important; grid-template-rows: auto auto !important; align-items: center !important; justify-items: center !important; column-gap: 6px !important; row-gap: 3px !important; z-index: 1001 !important; }
    html:not([data-dm-on="0"]) .pinhole-header .slot-r .pinhole-search, html:not([data-dm-on="0"]) .pinhole-header-sticky .slot-r .pinhole-search { grid-column: 1 !important; grid-row: 1 !important; }
    html:not([data-dm-on="0"]) .pinhole-header .slot-r > ul:not(.pinhole-search), html:not([data-dm-on="0"]) .pinhole-header-sticky .slot-r > ul:not(.pinhole-search) { grid-column: 2 !important; grid-row: 2 !important; justify-self: end !important; }
  }
  /* SEARCH FOR SIGNED-IN USERS ONLY (decision 18, spec T8 additions 5 to 7 and this T1 rule). In the build the server
     prints no search form for a visitor and every search address answers 404; this rule hides the leftover magnifier
     and the layout rules below close the gap Search leaves in the right-hand slot. The preview panel's "Visitor" view
     stands in for a visitor here. Independent of the Day/Night switch. */
  body:not(.logged-in) .pinhole-header .slot-r .pinhole-search, body:not(.logged-in) .pinhole-header-sticky .slot-r .pinhole-search,
  body:not(.logged-in) form.search-form, body:not(.logged-in) .widget_search { display: none !important; }
  @media (min-width: 751px) {
    html:not([data-dm-on="0"]) body:not(.logged-in) .pinhole-header .slot-r > ul:not(.pinhole-search), html:not([data-dm-on="0"]) body:not(.logged-in) .pinhole-header-sticky .slot-r > ul:not(.pinhole-search) { grid-row: 1 !important; }
  }
  @media (max-width: 750px) {
    html body:not(.logged-in) .as-dm-btn.as-dm-mobile-bar-toggle { grid-column: 2 !important; justify-self: end !important; margin: 0 !important; }
  }
  /* Admin bar (section 11): Pinhole's own sticky-header script already sets the sticky header's top to the toolbar
     height when the toolbar is fixed, so no second rule is added here. */

  /* Homepage Milestones (decision 13 and spec item T9): border copied from the review cards; heading colour moved
     from the inline style into a class (Day value unchanged). */
  .as-impact-card { border: 0.5px solid #ddd !important; }
  .as-milestone-title { color: #1c1c1c !important; }
  /* Homepage service tiles: same thin border as the review cards. */
  body.home .pinhole-gallery.pinhole-grid .pinhole-item .item-link img { border: 0.5px solid #ddd !important; box-sizing: border-box; }

  /* ---------- Night: page surfaces ---------- */
  html[data-theme="dark"], html[data-theme="dark"] body { background-color: var(--dm-bg) !important; color: var(--dm-ink-soft) !important; }
  html[data-theme="dark"] .pinhole-header, html[data-theme="dark"] .pinhole-header-sticky, html[data-theme="dark"] .pinhole-sidebar,
  html[data-theme="dark"] .pinhole-section-full-content, html[data-theme="dark"] .pswp-bottom-container, html[data-theme="dark"] .pswp-bottom-container-action,
  html[data-theme="dark"] .pinhole-sticky-bottom, html[data-theme="dark"] .pinhole-footer { background-color: var(--dm-bg) !important; border-color: var(--dm-border) !important; }
  html[data-theme="dark"] .pinhole-sidebar { background-color: var(--dm-surface) !important; border-left: 1px solid var(--dm-border) !important; }

  /* headings (Additional CSS forces #111 !important) */
  html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6,
  html[data-theme="dark"] .h1, html[data-theme="dark"] .h2, html[data-theme="dark"] .h3, html[data-theme="dark"] .h4, html[data-theme="dark"] .h5, html[data-theme="dark"] .h6,
  html[data-theme="dark"] .entry-title, html[data-theme="dark"] .site-title, html[data-theme="dark"] .widget-title, html[data-theme="dark"] .as-milestone-title { color: var(--dm-ink) !important; }
  /* white headings kept on photo overlays and on the dark cards */
  html[data-theme="dark"] .items-overlay .entry-title, html[data-theme="dark"] .items-overlay .entry-title a, html[data-theme="dark"] .items-overlay .entry-meta,
  html[data-theme="dark"] .as-impact-card h3, html[data-theme="dark"] .as-conversion-card h2, html[data-theme="dark"] .as-conversion-card h3,
  html[data-theme="dark"] .as-conv-title, html[data-theme="dark"] .as-conv-title-cta, html[data-theme="dark"] .as-statue-line, html[data-theme="dark"] .vibe .roombreak h3 { color: #ffffff !important; }

  /* ---------- Night: links (finding 1). Only plain text links take the link colour (the accent, one gold).
     Links that are drawn as buttons keep their own colours; SHOP is excluded everywhere (decision 12). ---------- */
  html[data-theme="dark"] :where(:not(.as-shop-nav)) > a:where(:not([class])) { color: var(--dm-link) !important; }
  html[data-theme="dark"] .site-title a, html[data-theme="dark"] .pinhole-nav li:not(.as-shop-nav) > a, html[data-theme="dark"] .pinhole-nav-responsive li:not(.as-shop-nav) > a,
  html[data-theme="dark"] .section-filter a, html[data-theme="dark"] .entry-title a, html[data-theme="dark"] .entry-category a, html[data-theme="dark"] .pinhole-soc-menu a,
  html[data-theme="dark"] .pinhole-soc-menu, html[data-theme="dark"] .pinhole-sidebar-close, html[data-theme="dark"] .pswp-bottom-container-action, html[data-theme="dark"] .pswp-arrow { color: var(--dm-ink-soft) !important; }
  html[data-theme="dark"] .pinhole-nav li:not(.as-shop-nav) > a:hover, html[data-theme="dark"] .pinhole-nav-responsive li:not(.as-shop-nav) > a:hover,
  html[data-theme="dark"] .section-filter a:hover, html[data-theme="dark"] .pinhole-soc-menu a:hover, html[data-theme="dark"] :where(:not(.as-shop-nav)) > a:where(:not([class])):hover { color: var(--dm-link-hover) !important; }
  html[data-theme="dark"] .pinhole-nav .sub-menu, html[data-theme="dark"] .pinhole-search .sub-menu { background: var(--dm-surface-elev) !important; border: 1px solid var(--dm-border) !important; box-shadow: 0 14px 34px rgba(0,0,0,0.65) !important; }
  html[data-theme="dark"] .entry-meta, html[data-theme="dark"] .entry-meta a, html[data-theme="dark"] .entry-tags a, html[data-theme="dark"] .pinhole-sticky-bottom span,
  html[data-theme="dark"] .site-description, html[data-theme="dark"] .pinhole-footer p { color: var(--dm-muted) !important; }
  html[data-theme="dark"] .section-header:before, html[data-theme="dark"] .widget-title:after, html[data-theme="dark"] .pinhole-footer:before,
  html[data-theme="dark"] .widget_rss ul li:after, html[data-theme="dark"] .pinhole-vertical-separator { background: var(--dm-border-strong) !important; }

  /* ---------- Night: gold-filled buttons get dark text (white on brand gold is 2.78:1) ---------- */
  html[data-theme="dark"] .hvs-cta, html[data-theme="dark"] .a-bc-readall a, html[data-theme="dark"] .asw .a-cta1, html[data-theme="dark"] .fp .cta-primary,
  html[data-theme="dark"] .fp .ct-btn1, html[data-theme="dark"] .csp .s-cta1, html[data-theme="dark"] .cvp .v-cta1, html[data-theme="dark"] .btn-primary,
  html[data-theme="dark"] .acrm-gate-btn, html[data-theme="dark"] .anniv7yr-tag, html[data-theme="dark"] .anniv7yr-tag strong, html[data-theme="dark"] .vibe .btn-dark,
  html[data-theme="dark"] .vibe .tag[aria-pressed="true"], html[data-theme="dark"] .vibe .tag[aria-pressed="true"] .n, html[data-theme="dark"] .vibe .tag[aria-pressed="true"] .fnum,
  html[data-theme="dark"] .vibe .pick[aria-pressed="true"], html[data-theme="dark"] .vibe .pgn[aria-current="page"], html[data-theme="dark"] .cta25-btn { color: var(--dm-on-gold) !important; }
  html[data-theme="dark"] .vibe .btn-dark, html[data-theme="dark"] .vibe .tag[aria-pressed="true"], html[data-theme="dark"] .vibe .pick[aria-pressed="true"],
  html[data-theme="dark"] .vibe .pgn[aria-current="page"], html[data-theme="dark"] .acrm-gate-btn { background: var(--dm-gold) !important; border-color: var(--dm-gold) !important; }
  html[data-theme="dark"] .anniv7yr-copybtn { border: 1px solid var(--dm-on-gold) !important; color: var(--dm-on-gold) !important; }

  /* Brand crest (finding 17 table): black lettering with a gold swoosh; Night lightens it with invert + hue-rotate. */
  html[data-theme="dark"] img.pinhole-logo { filter: invert(1) hue-rotate(180deg) brightness(1.08) contrast(1.04) !important; }

  /* ---------- Night: home page (template-galleries.php, page 3070, blog carousel) ---------- */
  html[data-theme="dark"] .as-logos-wrap { background: var(--dm-bg) !important; }
  html[data-theme="dark"] .as-logos-viewport::before { background: linear-gradient(to right, var(--dm-bg), transparent) !important; }
  html[data-theme="dark"] .as-logos-viewport::after { background: linear-gradient(to left, var(--dm-bg), transparent) !important; }
  /* client logos (finding 17 table): only the monochrome black marks are inverted; coloured and white marks unchanged */
  /* The logo images carry no Night class on the live page: they are matched by their data-client name (Luco Kids has none, so by file name). Table: spec section 6 (logos). */
  html[data-theme="dark"] .as-logos-track img.as-dm-logo-black,
  html[data-theme="dark"] .as-logos-track img[data-client="dior"], html[data-theme="dark"] .as-logos-track img[data-client="myra-veda"],
  html[data-theme="dark"] .as-logos-track img[data-client="vedistry"], html[data-theme="dark"] .as-logos-track img[data-client="auravedic"] { filter: invert(1) brightness(1.18) !important; }
  html[data-theme="dark"] .as-logos-track img.as-dm-logo-chip,
  html[data-theme="dark"] .as-logos-track img[data-client="bajaj-mukand"], html[data-theme="dark"] .as-logos-track img[data-client="nautica"],
  html[data-theme="dark"] .as-logos-track img[data-client="jakob-steiner"], html[data-theme="dark"] .as-logos-track img[data-client="prenas-jewellery"],
  html[data-theme="dark"] .as-logos-track img[src*="Luco-Kids-logo"] { background: var(--dm-ink); border-radius: 6px; padding: 4px 6px; }
  /* Previous / next gallery bar at the foot of every gallery page: the theme prints its text in the Day colour (#1c1c1c), which vanished on the Night page (found 04-11-2026 on 81 portfolio pages). */
  html[data-theme="dark"] .pinhole-sticky-bottom a, html[data-theme="dark"] .pinhole-sticky-bottom a span, html[data-theme="dark"] .pinhole-sticky-bottom a i { color: var(--dm-ink-soft) !important; }
  html[data-theme="dark"] .pinhole-sticky-bottom a:hover, html[data-theme="dark"] .pinhole-sticky-bottom a:hover span, html[data-theme="dark"] .pinhole-sticky-bottom a:focus-visible, html[data-theme="dark"] .pinhole-sticky-bottom a:focus-visible span { color: var(--dm-gold) !important; }
  html[data-theme="dark"] .sticky-bottom-slot { border-color: var(--dm-border) !important; }
  /* The sticky header copy waits above the screen. With Search present its right slot is a taller two-row stack, so its lower part (a second menu icon) showed under the WordPress toolbar for signed-in users (found 04-11-2026). Keep it fully invisible until Pinhole adds pinhole-header-sticky-on; the theme's own "transition: all .2s" lets the slide-out finish before it hides. */
  body:not(.pinhole-header-sticky-on) .pinhole-header-sticky { visibility: hidden; }
  body.pinhole-header-sticky-on .pinhole-header-sticky { visibility: visible; }
  html[data-theme="dark"] .as-logo-dlg .panel { background: var(--dm-surface-elev) !important; border-color: var(--dm-border) !important; color: var(--dm-ink) !important; }
  html[data-theme="dark"] .as-logo-dlg p { color: var(--dm-body) !important; }
  html[data-theme="dark"] .as-logo-dlg .close, html[data-theme="dark"] .as-logo-dlg .go { background: var(--dm-surface) !important; color: var(--dm-ink) !important; border-color: var(--dm-control-border) !important; }
  html[data-theme="dark"] .hvs, html[data-theme="dark"] .hvs-title, html[data-theme="dark"] .hvs-item-text, html[data-theme="dark"] .homepage-title { color: var(--dm-ink) !important; }
  html[data-theme="dark"] .hvs-subtitle, html[data-theme="dark"] .hvs-cta-note, html[data-theme="dark"] .anniv7yr-note, html[data-theme="dark"] .as-split-ig .as-split-sub { color: var(--dm-body) !important; }
  html[data-theme="dark"] .hvs-three { border-color: var(--dm-border-strong) !important; background: var(--dm-surface) !important; }
  html[data-theme="dark"] .hvs-line, html[data-theme="dark"] .hvs-sep { background: var(--dm-border-strong) !important; }
  html[data-theme="dark"] .a-bc-scope { border-top-color: var(--dm-border) !important; }
  html[data-theme="dark"] .a-bc-heading { color: var(--dm-muted) !important; }
  html[data-theme="dark"] .a-bc-card-title { color: var(--dm-ink) !important; }
  html[data-theme="dark"] .a-bc-btn { background: var(--dm-surface-elev) !important; border-color: var(--dm-control-border) !important; color: var(--dm-ink) !important; }
  html[data-theme="dark"] .a-bc-loading { background: var(--dm-surface) !important; color: var(--dm-muted) !important; }

  /* ---------- Night: service pages. Page colour names are remapped on each page's own wrapper, never on html
     (finding 1). Single articles use body.single-post as their wrapper. ---------- */
  html[data-theme="dark"] .asw, html[data-theme="dark"] .fp, html[data-theme="dark"] .csp, html[data-theme="dark"] .pp,
  html[data-theme="dark"] .cvp, html[data-theme="dark"] .pss, html[data-theme="dark"] body.single-post {
    --cream: var(--dm-surface); --border: var(--dm-border); --muted: var(--dm-body); --ink: var(--dm-ink); --mid: var(--dm-body);
    --pale: var(--dm-muted); --faint: var(--dm-muted); --line: var(--dm-border); --line2: var(--dm-border-strong); --white: var(--dm-surface-elev);
    --rule: var(--dm-border); --bg-warm: var(--dm-surface); --gold: var(--dm-gold); --gold-light: var(--dm-gold);
  }
  html[data-theme="dark"] .asw, html[data-theme="dark"] .fp, html[data-theme="dark"] .csp, html[data-theme="dark"] .pp, html[data-theme="dark"] .cvp, html[data-theme="dark"] .pss { color: var(--dm-ink) !important; background: var(--dm-bg) !important; }
  /* Food page logo band: a dark band in Day (it uses the page's ink colour as its background), kept dark in Night */
  html[data-theme="dark"] .fp .marquee-section { background: var(--dm-surface) !important; }
  html[data-theme="dark"] .fp .marquee-outer::before { background: linear-gradient(to right, var(--dm-surface), transparent) !important; }
  html[data-theme="dark"] .fp .marquee-outer::after { background: linear-gradient(to left, var(--dm-surface), transparent) !important; }
  html[data-theme="dark"] .fp .marquee-label { color: var(--dm-muted) !important; }
  html[data-theme="dark"] .asw .a-intro, html[data-theme="dark"] .asw .a-tabs, html[data-theme="dark"] .asw .a-cstrip, html[data-theme="dark"] .asw .a-testi,
  html[data-theme="dark"] .fp .intro, html[data-theme="dark"] .csp .i-intro, html[data-theme="dark"] .cvp .v-intro, html[data-theme="dark"] .pss .v-intro,
  html[data-theme="dark"] .pp .pp-hero, html[data-theme="dark"] .pp .pp-pkg-head, html[data-theme="dark"] .pp .pp-pkgs, html[data-theme="dark"] .pp .pp-pkg, html[data-theme="dark"] .pp .pp-service { border-color: var(--dm-border) !important; background: var(--dm-bg) !important; }
  html[data-theme="dark"] .asw .a-h1, html[data-theme="dark"] .asw .a-title, html[data-theme="dark"] .asw .a-tto, html[data-theme="dark"] .asw .a-tn, html[data-theme="dark"] .asw .a-ch2,
  html[data-theme="dark"] .asw .a-pt strong, html[data-theme="dark"] .asw .a-tres strong, html[data-theme="dark"] .asw .a-lead strong, html[data-theme="dark"] .asw .a-body strong,
  html[data-theme="dark"] .asw .a-pull, html[data-theme="dark"] .asw .a-became-h, html[data-theme="dark"] .asw .a-became-word, html[data-theme="dark"] .asw .a-learnmore,
  html[data-theme="dark"] .fp .intro-h1, html[data-theme="dark"] .fp .s-title, html[data-theme="dark"] .fp .s-tto, html[data-theme="dark"] .fp .p-h, html[data-theme="dark"] .fp .p-stitle,
  html[data-theme="dark"] .fp .gap-h, html[data-theme="dark"] .fp .gap-chead, html[data-theme="dark"] .fp .platform-h, html[data-theme="dark"] .fp .p-pname, html[data-theme="dark"] .fp .t-name, html[data-theme="dark"] .fp .ct-h,
  html[data-theme="dark"] .csp .i-h1, html[data-theme="dark"] .csp .s-title, html[data-theme="dark"] .csp .s-tto, html[data-theme="dark"] .cvp .v-h1, html[data-theme="dark"] .cvp .v-title, html[data-theme="dark"] .cvp .v-tto,
  html[data-theme="dark"] .pss .v-h1, html[data-theme="dark"] .pss .v-title, html[data-theme="dark"] .pss .v-tto, html[data-theme="dark"] .pp .pp-h1, html[data-theme="dark"] .pp .pp-stitle,
  html[data-theme="dark"] .pp .pp-pkg-h2, html[data-theme="dark"] .pp .pp-pkg-name { color: var(--dm-ink) !important; }
  html[data-theme="dark"] .asw .a-sub, html[data-theme="dark"] .asw .a-prob, html[data-theme="dark"] .asw .a-dt, html[data-theme="dark"] .asw .a-tfrom, html[data-theme="dark"] .asw .a-pt,
  html[data-theme="dark"] .asw .a-tq, html[data-theme="dark"] .asw .a-tres, html[data-theme="dark"] .asw .a-cp, html[data-theme="dark"] .asw .a-lead, html[data-theme="dark"] .asw .a-body, html[data-theme="dark"] .asw .a-cred-item,
  html[data-theme="dark"] .fp .intro-sub, html[data-theme="dark"] .fp .s-prob, html[data-theme="dark"] .fp .s-dt, html[data-theme="dark"] .fp .s-tfrom, html[data-theme="dark"] .fp .p-sdesc,
  html[data-theme="dark"] .fp .gap-body, html[data-theme="dark"] .fp .gap-cdesc, html[data-theme="dark"] .fp .s-pt, html[data-theme="dark"] .fp .gap-sub, html[data-theme="dark"] .fp .platform-sub,
  html[data-theme="dark"] .fp .p-pdesc, html[data-theme="dark"] .fp .p-pbody, html[data-theme="dark"] .fp .t-quote, html[data-theme="dark"] .fp .ct-p,
  html[data-theme="dark"] .pp .pp-sub, html[data-theme="dark"] .pp .pp-sdesc, html[data-theme="dark"] .pp .pp-pkg-sub, html[data-theme="dark"] .pp .pp-pkg-items li { color: var(--dm-body) !important; border-color: var(--dm-border) !important; }
  html[data-theme="dark"] .asw .a-tab, html[data-theme="dark"] .asw .a-dhead, html[data-theme="dark"] .asw .a-tfl, html[data-theme="dark"] .asw .a-hn span, html[data-theme="dark"] .asw .a-tco,
  html[data-theme="dark"] .asw .a-became-eyebrow, html[data-theme="dark"] .fp .s-dhead, html[data-theme="dark"] .fp .s-tfl, html[data-theme="dark"] .fp .p-snum, html[data-theme="dark"] .fp .t-co { color: var(--dm-muted) !important; }
  html[data-theme="dark"] .asw .a-tab:hover, html[data-theme="dark"] .asw .a-tab.a-on { color: var(--dm-ink) !important; }
  html[data-theme="dark"] .asw .a-box, html[data-theme="dark"] .asw .a-story, html[data-theme="dark"] .asw .a-qcard, html[data-theme="dark"] .asw .a-gtile,
  html[data-theme="dark"] .fp .s-box, html[data-theme="dark"] .fp .p-wrap, html[data-theme="dark"] .fp .platform-section, html[data-theme="dark"] .csp .s-box,
  html[data-theme="dark"] .cvp .v-box, html[data-theme="dark"] .pss .v-box, html[data-theme="dark"] .pp .pp-service.pp-alt .pp-text-col, html[data-theme="dark"] .pp .pp-pkg.pp-pkg-featured { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; }
  html[data-theme="dark"] .asw .a-tf, html[data-theme="dark"] .asw .a-hn, html[data-theme="dark"] .asw .a-tc, html[data-theme="dark"] .asw .a-became, html[data-theme="dark"] .asw .a-quotes,
  html[data-theme="dark"] .asw .a-gtilewrap, html[data-theme="dark"] .asw .a-pmenu, html[data-theme="dark"] .fp .s-tf, html[data-theme="dark"] .fp .p-step, html[data-theme="dark"] .fp .gap-card,
  html[data-theme="dark"] .fp .p-platform, html[data-theme="dark"] .fp .t-card, html[data-theme="dark"] .csp .s-tf, html[data-theme="dark"] .cvp .v-tf, html[data-theme="dark"] .pss .v-tf, html[data-theme="dark"] .pp .pp-text-col { background: var(--dm-surface-elev) !important; border-color: var(--dm-border) !important; }
  /* secondary buttons: dark fill, light text, the Night control outline (finding 1: they read 1.09:1 before) */
  html[data-theme="dark"] .asw .a-cta2, html[data-theme="dark"] .asw .a-pi:not(.a-on), html[data-theme="dark"] .asw .a-tmore, html[data-theme="dark"] .fp .cta-secondary,
  html[data-theme="dark"] .fp .ct-btn2, html[data-theme="dark"] .csp .s-cta2, html[data-theme="dark"] .cvp .v-cta2, html[data-theme="dark"] .btn-secondary { background: var(--dm-surface-elev) !important; color: var(--dm-ink) !important; border: 1.5px solid var(--dm-control-border) !important; }
  html[data-theme="dark"] .asw .a-cta3 { background: var(--dm-elevated) !important; color: var(--dm-ink) !important; border: 1px solid var(--dm-gold) !important; }
  html[data-theme="dark"] .asw .a-pick { background: var(--dm-surface-elev) !important; border-top: 1px solid var(--dm-border) !important; border-bottom: 1px solid var(--dm-border) !important; }

  /* hover and focus in Night: the flat Night rules above use !important, so each control gets its own Night hover */
  html[data-theme="dark"] .asw .a-cta2:hover, html[data-theme="dark"] .asw .a-cta3:hover, html[data-theme="dark"] .fp .cta-secondary:hover, html[data-theme="dark"] .fp .ct-btn2:hover,
  html[data-theme="dark"] .btn-secondary:hover, html[data-theme="dark"] .asw .a-tmore:hover, html[data-theme="dark"] .vibe .pgn:not(:disabled):not([aria-current="page"]):hover, html[data-theme="dark"] .related-item:hover, html[data-theme="dark"] .related-item:focus-visible { border-color: var(--dm-gold) !important; color: var(--dm-gold) !important; }
  html[data-theme="dark"] .asw .a-learnmore:hover, html[data-theme="dark"] .pinhole-sidebar-close:hover { color: var(--dm-gold) !important; }
  html[data-theme="dark"] .fp .cta-primary:hover, html[data-theme="dark"] .fp .ct-btn1:hover, html[data-theme="dark"] .btn-primary:hover, html[data-theme="dark"] .asw .a-cta1:hover,
  html[data-theme="dark"] .vibe .btn-dark:hover, html[data-theme="dark"] .acrm-gate-btn:hover, html[data-theme="dark"] .hvs-cta:hover, html[data-theme="dark"] .vibe .pgn[aria-current="page"]:hover { filter: brightness(1.15) !important; }
  html[data-theme="dark"] .as-conv-btn:hover { color: var(--dm-on-gold) !important; }
  /* ---------- Night: Vibe (blog) and the CRM forms ---------- */
  html[data-theme="dark"] .vibe {
    --paper-0: var(--dm-surface-elev) !important; --paper-1: var(--dm-bg) !important; --paper-2: var(--dm-surface) !important;
    --ink-0: var(--dm-ink) !important; --ink-1: var(--dm-ink) !important; --ink-2: var(--dm-ink-soft) !important; --ink-3: var(--dm-body) !important; --ink-4: var(--dm-muted) !important;
    --line-1: var(--dm-border) !important; --line-2: var(--dm-border-strong) !important;
    background: var(--dm-bg) !important; color: var(--dm-ink-soft) !important;
  }
  html[data-theme="dark"] .vibe .loaderr button { background: var(--dm-surface-elev) !important; color: var(--dm-ink) !important; border-color: var(--dm-control-border) !important; }
  html[data-theme="dark"] .vibe .head, html[data-theme="dark"] .vibe .askstrip, html[data-theme="dark"] .vibe .endask, html[data-theme="dark"] .vibe .entry:hover { background: var(--dm-surface) !important; }
  html[data-theme="dark"] .vibe .pgn:not([aria-current="page"]) { color: var(--dm-ink-soft) !important; }
  html[data-theme="dark"] .vibe .tag, html[data-theme="dark"] .vibe .pgn, html[data-theme="dark"] .vibe .eside { border-color: var(--dm-control-border) !important; }
  html[data-theme="dark"] .vibe .eside[aria-pressed="true"] { border: 2px solid var(--dm-gold) !important; }
  html[data-theme="dark"] .vibe .eside .lab { color: var(--dm-ink) !important; }
  html[data-theme="dark"] .vibe .roombreak .fine { color: var(--dm-muted) !important; }
  html[data-theme="dark"] .vibe .pick:not([aria-pressed="true"]) { color: var(--dm-ink) !important; border-color: var(--dm-control-border) !important; }
  html[data-theme="dark"] [id^="acrm-pf-wiz-"], html[data-theme="dark"] .acrm-pf--wizard, html[data-theme="dark"] .acrm-gate-overlay-inner {
    --acrm-pf-bg: var(--dm-surface) !important; --acrm-pf-ink: var(--dm-ink) !important; --acrm-pf-muted: var(--dm-body) !important; --acrm-pf-faint: var(--dm-muted) !important;
    --acrm-pf-border: var(--dm-border) !important; --acrm-pf-wash: var(--dm-surface-elev) !important; --acrm-pf-input-bg: var(--dm-surface-elev) !important;
    --acrm-pf-cta-bg: var(--dm-gold) !important; --acrm-pf-surface-2: var(--dm-surface-elev) !important; --acrm-pf-surround: var(--dm-bg) !important;
    background: var(--dm-surface) !important; color: var(--dm-ink) !important;
  }

  /* ---------- Night: single article (charts, shelf-life matrix, calculator, FAQ) ---------- */
  html[data-theme="dark"] .chart-frame, html[data-theme="dark"] .stat-card, html[data-theme="dark"] .shelf-toggle-btn, html[data-theme="dark"] .matrix-detail-inner,
  html[data-theme="dark"] .calc-field input, html[data-theme="dark"] .highlight-box, html[data-theme="dark"] .related-item, html[data-theme="dark"] .author-bio,
  html[data-theme="dark"] .cta25-block, html[data-theme="dark"] .cta-block { background: var(--dm-surface-elev) !important; border-color: var(--dm-border) !important; }
  html[data-theme="dark"] .faq-q, html[data-theme="dark"] .author-name, html[data-theme="dark"] .related-title, html[data-theme="dark"] .bar-n, html[data-theme="dark"] .highlight-box p,
  html[data-theme="dark"] .pullquote cite, html[data-theme="dark"] table.data-table th, html[data-theme="dark"] ol.copy-list li strong, html[data-theme="dark"] .article-list strong,
  html[data-theme="dark"] .shelf-toggle-btn, html[data-theme="dark"] .shelf-row-value, html[data-theme="dark"] .plat-tab, html[data-theme="dark"] .matrix-axis strong,
  html[data-theme="dark"] .matrix-detail-inner, html[data-theme="dark"] .calc-field input, html[data-theme="dark"] .cta25-body h2, html[data-theme="dark"] p strong { color: var(--dm-ink) !important; }
  /* chosen article tabs: a gold fill with dark text (they read 1.1 to 1.2:1 before) */
  html[data-theme="dark"] .shelf-toggle-btn.active, html[data-theme="dark"] .plat-tab.active { background: var(--dm-gold) !important; color: var(--dm-on-gold) !important; border-color: var(--dm-gold) !important; }
  html[data-theme="dark"] .author-avatar { background: var(--dm-gold) !important; color: var(--dm-on-gold) !important; }
  html[data-theme="dark"] .matrix-safe { background: #17301c !important; color: var(--dm-ok) !important; border-color: #47764a !important; }
  html[data-theme="dark"] .matrix-contested { background: #30260f !important; color: #f0d279 !important; border-color: #806832 !important; }
  html[data-theme="dark"] .matrix-watch { background: #2b2819 !important; color: #f3df9a !important; border-color: #74663a !important; }
  html[data-theme="dark"] .matrix-danger { background: #321b19 !important; color: var(--dm-bad) !important; border-color: #9c4a43 !important; }
  /* the open matrix cell keeps a clear edge in Night (Day: border in the text colour); stronger than the flat rules above */
  html[data-theme="dark"] .matrix-cell[aria-expanded="true"] { border-color: currentColor !important; box-shadow: inset 0 0 0 1px currentColor !important; }
  html[data-theme="dark"] .cta25-nameplate-title { color: var(--dm-gold) !important; }
  /* the subscribe button turns maroon on hover (as in Day), so its text turns white there */
  html[data-theme="dark"] .cta25-btn:hover, html[data-theme="dark"] .cta25-btn:hover .cta25-arrow { color: #fff !important; }
  html[data-theme="dark"] .shelf-toggle-btn:not(.active) { color: var(--dm-ink) !important; background: var(--dm-surface-elev) !important; border-color: var(--dm-control-border) !important; }
  html[data-theme="dark"] .calc-output-n { color: var(--dm-bad) !important; }
  html[data-theme="dark"] .calc-result.is-negative, html[data-theme="dark"] .calc-result.is-positive { color: var(--dm-ink) !important; }

  /* ---------- Night: shared Pinhole utility text ---------- */
  html[data-theme="dark"] .wp-block-image figcaption, html[data-theme="dark"] .wp-block-gallery figcaption, html[data-theme="dark"] .pinhole-image-counter,
  html[data-theme="dark"] .pinhole-item .pinhole-download, html[data-theme="dark"] .pswp__zoom-wrap .pinhole-download,
  html[data-theme="dark"] .post-password-protected:before, html[data-theme="dark"] .post-password-required:before { color: var(--dm-ink-soft) !important; }
  html[data-theme="dark"] .pinhole-image-counter, html[data-theme="dark"] .pinhole-item .pinhole-download, html[data-theme="dark"] .pswp__zoom-wrap .pinhole-download,
  html[data-theme="dark"] .post-password-protected:before, html[data-theme="dark"] .post-password-required:before { background: var(--dm-surface-elev) !important; border-color: var(--dm-border) !important; }
  html[data-theme="dark"] .has-pinhole-txt-color, html[data-theme="dark"] .has-very-dark-gray-color, html[data-theme="dark"] .has-black-color,
  html[data-theme="dark"] .has-foreground-color, html[data-theme="dark"] .has-contrast-color { color: var(--dm-ink) !important; }
  html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: var(--dm-form-text) !important; opacity: 1; }
  html[data-theme="dark"] [style*="color:#1c1c1c"], html[data-theme="dark"] [style*="color: #1c1c1c"], html[data-theme="dark"] [style*="color:#111"],
  html[data-theme="dark"] [style*="color: #111"], html[data-theme="dark"] [style*="color:#333"] { color: var(--dm-ink) !important; }

  /* ---------- Night control outlines (decision 6) ---------- */
  html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="color"]):not([type="submit"]),
  html[data-theme="dark"] select, html[data-theme="dark"] textarea { border: 1.5px solid var(--dm-control-border) !important; background-color: var(--dm-surface-elev) !important; color: var(--dm-ink) !important; }
  html[data-theme="dark"] .vibe input, html[data-theme="dark"] .vibe select { border: 1.5px solid var(--dm-control-border) !important; }
  html[data-theme="dark"] .as-dm-btn { border: 1.5px solid var(--dm-control-border) !important; }

}

/* Motion (decision 7): html[data-motion] = follow (default) | always | never. */
html[data-motion="never"] .as-dm-btn, html[data-motion="never"] .as-dm-btn *, html[data-motion="never"] .as-dm-btn::after { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="always"]) .as-dm-btn, html:not([data-motion="always"]) .as-dm-btn *, html:not([data-motion="always"]) .as-dm-btn::after { transition: none !important; animation: none !important; }
}
/* Windows high contrast (finding 24): keep the toggle and its thumb visible. */
@media (forced-colors: active) {
  /* doubled class and the body step make these stronger than the Day and Night toggle rules */
  html body .as-dm-btn.as-dm-btn { forced-color-adjust: none; background: Canvas !important; border: 1px solid ButtonText !important; color: ButtonText !important; box-shadow: none !important; }
  html body .as-dm-btn.as-dm-btn .v5-thumb { background: Highlight !important; }
  html body .as-dm-btn.as-dm-btn .v5-thumb svg { stroke: HighlightText !important; fill: HighlightText !important; }
  .as-dm-btn:focus-visible { outline: 2px solid Highlight !important; }
}
.as-dm-btn:focus-visible { outline: 2px solid var(--as-dm-toggle-ink) !important; outline-offset: 2px; }
html[data-theme="dark"] .as-dm-btn:focus-visible { outline-color: var(--dm-gold) !important; }
/* Kill switch (finding 10): with the feature off the server prints no toggle; this rule is the safety net (and [hidden] wins, ERR-007). */
html[data-dm-on="0"] body .as-dm-btn, html[data-dm-on="0"] body li.as-dm-nav-item, html body .as-dm-btn[hidden] { display: none !important; }
/* Print is always Day (finding 25): every Night rule above is inside @media screen; the toggle is not printed. */
@media print { .as-dm-btn, .as-dm-nav-item { display: none !important; } .as-impact-card { border: 0.5px solid #ddd !important; } .as-milestone-title { color: #1c1c1c !important; } }

/* ---- Theme Options > Styling & Colors > Day / Night: colour-ring picker (only on the options screen) ---- */
.as-ring-field { max-width: 560px; }
.as-ring-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid #e3e3e3; }
.as-ring-swatch { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #8c8f94; padding: 0; cursor: pointer; flex: 0 0 auto; }
.as-ring-swatch:focus-visible, .as-ring-wheel:focus-visible { outline: 2px solid #2271b1; outline-offset: 2px; }
.as-ring-label { flex: 1 1 auto; }
.as-ring-code { flex: 0 0 auto; font-size: 12px; }
.as-ring-presets { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 8px; }
.as-ring-guard { margin-top: 8px; padding: 8px 10px; border-left: 4px solid #8c8f94; background: #f6f7f7; font-size: 13px; }
.as-ring-guard.as-ring-ok { border-left-color: #00a32a; }
.as-ring-guard.as-ring-bad { border-left-color: #d63638; background: #fcf0f1; }
.as-ring-dialog { border: 1px solid #8c8f94; border-radius: 6px; padding: 16px; width: 280px; max-width: calc(100vw - 32px); }
.as-ring-dialog::backdrop { background: rgba(0, 0, 0, 0.5); }
.as-ring-title { margin: 0 0 10px; font-size: 15px; }
.as-ring-wheel { position: relative; width: 220px; height: 220px; margin: 0 auto 12px; border-radius: 50%; cursor: crosshair; touch-action: none;
  background: radial-gradient(circle, #808080 0, rgba(128, 128, 128, 0) 72%), conic-gradient(#f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
.as-ring-handle { position: absolute; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1.5px #000; transform: translate(-50%, -50%); pointer-events: none; }
.as-ring-lrow, .as-ring-hrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 0; }
.as-ring-light { flex: 1 1 auto; }
.as-ring-hex { width: 110px; font-family: monospace; }
.as-ring-hexerr { min-height: 18px; color: #b32d2e; font-size: 12px; }
.as-ring-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }