/* The release badge and the splash (js/release-badge.js, js/release-splash.js): "Dew OS 2026 · Baboon Lake".
   Contrast, worked out for both brands (text on the panel's solid colour, 4.5:1 needed):
     dark  #0e131f:  OS in the accent  Dew #6fd3ff 10.99, Meridian #ffb020 10.15 (with the glow at its edge 4.7 or more)
                     name gradient #e0745a 6.02 -> #8a7dff 5.71, lowest along the way 5.50
     light #f4f7fb:  OS = accent mixed 50% with black  Dew #386a80 5.52, Meridian #805810 5.88
                     name gradient #985a16 5.13 -> #4a5f86 5.97, lowest along the way 5.13 (4.64 on the bare #e6ecf5 desktop)
   The gradient colours come from the picture (img/baboon-lake.svg: #e0745a/#8a7dff at dusk; its light pair #f6c48c/#4a5f86,
   the warm end darkened to #985a16 so the words stay readable). Where background-clip:text is missing, and in forced-colors
   mode, the words are one plain colour. Nothing moves: the glow is still, and the splash fades only when motion is allowed. */

/* ---- the badge ---- */
.rb {
  --rb-logo: 28px;
  --rb-accent: #6fd3ff;                       /* set by script from the brand */
  --rb-os: var(--rb-accent);
  --rb-glow: 0 0 6px color-mix(in srgb, var(--rb-accent) 50%, transparent), 0 0 14px color-mix(in srgb, var(--rb-accent) 30%, transparent);
  --rb-name-plain: #e0745a;
  --rb-name-grad: linear-gradient(90deg, #e0745a, #8a7dff);
  display: inline-flex; align-items: center; gap: 10px; max-width: 100%;
  font: 600 calc(15px * var(--ts, 1))/1.25 var(--font, system-ui, sans-serif); color: var(--text); text-align: left;
}
html[data-theme="light"] .rb {
  --rb-os: color-mix(in srgb, var(--rb-accent) 50%, #000);
  --rb-glow: 0 0 5px color-mix(in srgb, var(--rb-accent) 28%, transparent), 0 0 12px color-mix(in srgb, var(--rb-accent) 16%, transparent);
  --rb-name-plain: #985a16;
  --rb-name-grad: linear-gradient(90deg, #985a16, #4a5f86);
}
.rb-text { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; min-width: 0; }   /* the words wrap beside the logo, never under it */
.rb-logo { width: var(--rb-logo); height: var(--rb-logo); flex: none; object-fit: contain; }
.rb-os-line { white-space: nowrap; letter-spacing: .12em; font-weight: 700; }
.rb-caps { text-transform: uppercase; }
/* BRAND-2: the name in the orb's lettering (js/wordmark.js badgeLettersSVG): shapes on the text's baseline, cap-high, "DI" lit like OS */
.rb-lettered { position: relative; display: inline-block; line-height: 0; }
.rb-lettered .wordmark { display: block; height: .74em; width: auto; }
.rb-lettered .wm-hi { color: var(--rb-os); }
.rb-say { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rb-os { color: var(--rb-os); text-shadow: var(--rb-glow); }                 /* a still glow: two layers, no flicker, no pulse */
.rb-rel { white-space: nowrap; font-weight: 600; letter-spacing: .02em; }
.rb-year { color: var(--text); }
.rb-dot { color: var(--muted); }
.rb-name { color: var(--rb-name-plain); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .rb-name {
    background-image: var(--rb-name-grad); -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
}
@media (forced-colors: active) {
  .rb, .rb-year, .rb-dot, .rb-os, .rb-name { color: CanvasText; }
  .rb-os { text-shadow: none; }
  .rb-name { background: none; -webkit-text-fill-color: currentColor; }
}

/* the update mark (UR1.4, js/release-badge.js setBadgeMark): while a newer set waits, a dot in the brand's colour, or on a
   security update the yellow shield of UR1.2 (the same mask, img/shield.svg), so the kind is told by shape, never colour
   alone. Still: no pulse. In Settings it sits before the chevron; on the splash it follows the name. */
.rb-mark { flex: none; display: inline-block; }
.rb-mark[hidden] { display: none; }
.rb-mark-dot {
  width: 10px; height: 10px; border-radius: 50%; background: var(--rb-accent);
  box-shadow: 0 0 0 2px var(--solid, transparent);   /* a ring in the panel's colour keeps the dot apart from what it sits beside */
}
.rb-mark-security {
  width: 1.4em; height: 1.4em; background: var(--warn);
  -webkit-mask: url("../img/shield.svg") center / contain no-repeat; mask: url("../img/shield.svg") center / contain no-repeat;
}
.set-release .rb-mark { margin-left: 2px; }
@media (forced-colors: active) {
  .rb-mark-dot { background: Highlight; box-shadow: none; }
  .rb-mark-security { background: CanvasText; }
}

/* the big one, under the splash picture */
.rb-large { --rb-logo: 44px; flex-direction: column; justify-content: center; gap: 6px; text-align: center; font-size: calc(22px * var(--ts, 1)); }
.rb-large .rb-text { flex-direction: column; justify-content: center; gap: 6px; }
.rb-large .rb-rel { font-size: .9em; }

/* the top of the Settings panel: one line, a tap opens About */
.set-release {
  display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; min-height: 44px;
  padding: 8px 16px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent;
  color: var(--text); text-align: left; cursor: pointer; flex: none;
}
.set-release:hover { background: rgba(var(--tint), .06); }
.set-release::after { content: "›"; color: var(--muted); font-size: 1.4em; line-height: 1; flex: none; margin-left: auto; }
.set-draw { display: block; margin-top: 4px; }
/* the chooser under the badge: Dew OS, Meridian OS (ticked), About this release (OB1) */
.rb-choose {
  position: absolute; left: 12px; z-index: 5; width: min(280px, calc(100% - 24px)); padding: 6px; display: flex; flex-direction: column; gap: 2px;
  background: var(--solid); border: 1px solid var(--rim); border-radius: calc(var(--radius) * .6); box-shadow: 0 12px 32px var(--shadow);
}
.rb-row {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 6px 10px; border: 0; border-radius: 10px;
  background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.rb-row:hover, .rb-row:focus-visible { background: color-mix(in srgb, var(--accent) 28%, transparent); outline: none; }
.rb-row img { width: 24px; height: 24px; flex: none; object-fit: contain; }
.rb-row .rb-tick { margin-left: auto; color: var(--accent); font-weight: 700; }
.rb-row.rb-on { font-weight: 650; }
.rb-row.rb-update { margin-top: 2px; border-top: 1px solid var(--line); border-radius: 0; }
.rb-row.rb-about { border-radius: 0 0 10px 10px; color: var(--muted); }
.rb-i { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font: italic 600 13px/1 serif; }


/* ---- the splash: once per release, never in the way ---- */
.rs {
  position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 16px;
  background: rgba(5, 7, 13, .62); opacity: 0; transition: opacity .3s ease;
  pointer-events: none;                     /* a tap goes through to what is beneath it (nothing-covers-what-you-press.md) */
}
html[data-theme="light"] .rs { background: rgba(230, 236, 245, .72); }
.rs * { pointer-events: none; }
.rs.in { opacity: 1; }
.rs[data-still] { transition: none; }       /* reduced motion: no fades, shown plain */
html[data-motion="reduce"] .rs { transition: none; }
@media (prefers-reduced-motion: reduce) { html:not([data-motion="full"]) .rs { transition: none; } }
.rs-card {
  width: min(92vw, 420px); overflow: hidden; border: 1px solid var(--rim); border-radius: var(--radius);
  background: var(--solid); box-shadow: 0 18px 60px var(--shadow), var(--sheen);
}
.rs-pic { display: block; line-height: 0; }
.rs-pic svg { display: block; width: 100%; height: auto; }
.rs-badge { padding: 18px 16px 20px; display: flex; justify-content: center; }

/* the picture follows the look (it follows the device when it stands alone): the same custom properties as its own file */
html:not([data-theme="light"]) .bl { --bl-sky-top: #1b2347; --bl-sky-low: #e0745a; --bl-hill: #141b33; --bl-water: #2a3764; --bl-baboon: #0b0f20; }
html[data-theme="light"] .bl { --bl-sky-top: #7f9fd6; --bl-sky-low: #f6c48c; --bl-hill: #4a5f86; --bl-water: #9db4dc; --bl-baboon: #1d2540; }

/* M mutes everything (DM1): the pill of the shared part (kit/mute) sits top centre in Dew. The corners are taken: bottom by the dock,
   top left by the swipe-out corner (.ez-do), top right by the volume and the padlock. It shrinks to the speaker after a few seconds. */
.dew-mute-pill[data-corner="top-center"] { left: 50%; top: calc(env(safe-area-inset-top, 0px) + 12px); transform: translateX(-50%); }
/* a phone on its side: the Settings title row gives back some height to the list below it (it showed one row at 375 px) */
@media (max-height: 500px) and (max-width: 1000px) { #panel-settings > header { padding-top: 6px; padding-bottom: 4px; } }