/* Security updates (UR1.2): the banner and the "Latest update" card wear a drawn shield and the word, so the kind is never
   told by colour alone (everyone-can-use-it.md). Kept apart from css/dew.css; loaded after it, and these rules name the id
   AND the class, so they outrank it. js/update.js toggles .is-security (showUpdateFlag and updateLatest).

   UPDATE-BANNER-BLUE-1 (2026-10-31). William: "it is supposed to be blue" and "one should be able to have the colour that
   just happened", "also for the one in the burger menu", "changeable for updates and security updates". So, per kind:
     blue (the default, no attribute needed)   the blue flag in EVERY look, a security one too (its shield and title tell it)
     look                                      the colour that just happened: the look's accent, or the warning colour
     dot                                       quiet: no banner (js/update.js); the ball's dot, the badge's mark and the card stay
   html[data-update-style] is the ordinary kind's choice, html[data-security-style] the security kind's (Settings > About,
   js/update-style.js). The burger menu's own update indicator is the dot on the Dew ball (#assistant[data-update-dot]) and the
   mark in the Settings badge (.rb-mark); both read the same two choices. Blue on white is 5.6 : 1 (AA), in light and dark. */
:root { --upd-blue: #0066cc; --upd-blue-hover: #0a74e0; --upd-blue-ink: #fff; --upd-mark: #0a74e0; }

/* the default: blue, in every look, for both kinds */
#update-flag, #update-flag.is-security, #last-update, #last-update.is-security { background: var(--upd-blue); color: var(--upd-blue-ink); }
#last-update:hover, #last-update.is-security:hover { background: var(--upd-blue-hover); }
#last-update.is-security.queued { box-shadow: inset 0 0 0 2px rgba(255,255,255,.7); }

/* follow the look: the accent for an update, the warning colour for a security one */
html[data-update-style="look"] #update-flag:not(.is-security), html[data-update-style="look"] #last-update:not(.is-security) { background: var(--accent); color: var(--on-accent); }
html[data-update-style="look"] #last-update:not(.is-security):hover { background: color-mix(in srgb, var(--accent) 88%, white); }
html[data-security-style="look"] #update-flag.is-security, html[data-security-style="look"] #last-update.is-security { background: var(--warn); color: var(--warn-ink); }
html[data-security-style="look"] #last-update.is-security:hover { background: color-mix(in srgb, var(--warn) 88%, white); }
html[data-security-style="look"] #last-update.is-security.queued { box-shadow: inset 0 0 0 2px var(--warn-ink); }

/* the mark: shield and word, shown only on a security update */
.uk-mark { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; }
.uk-mark[hidden] { display: none; }
.uk-shield {
  width: 1.25em; height: 1.25em; flex: none; background: currentColor;
  -webkit-mask: url("../img/shield.svg") center / contain no-repeat; mask: url("../img/shield.svg") center / contain no-repeat;
}
#update-flag .uk-mark { margin-bottom: 2px; }
#last-update .uk-mark { margin-top: 2px; }


/* the "Update settings" button: on the banner it is one of its .uf-back buttons (css/dew.css); on the card it is
   the same small outlined button, the ids here outrank "#last-update button" in css/dew.css */
#last-update .uk-settings { margin-top: 6px; font: inherit; font-weight: 700; color: inherit; background: transparent;
  border: 1px solid currentColor; border-radius: 5px; padding: 4px 9px; min-height: 32px; cursor: pointer; }
#last-update .uk-settings[hidden] { display: none; }
#last-update .uk-settings:hover { background: color-mix(in srgb, currentColor 14%, transparent); }
#last-update .uk-settings:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

@media (forced-colors: active) {
  #update-flag, #last-update, #update-flag.is-security, #last-update.is-security { background: Canvas; color: CanvasText; border: 2px solid CanvasText; }
  .uk-shield { background: CanvasText; }
}

/* the dot on the Dew ball (the burger menu's own indicator) until the menu is opened: a blue dot with a white ring, or on a
   security update a blue shield (a shape, never colour alone); the look's colours when that kind follows the look */
#assistant[data-update-dot]::after { background: var(--upd-mark); box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(0,0,0,.45); }
#assistant[data-update-dot][data-update-kind="security"]::after {
  top: 6%; right: 6%; width: 17px; height: 17px; border-radius: 0; box-shadow: none; background: var(--upd-mark);
  -webkit-mask: url("../img/shield.svg") center / contain no-repeat; mask: url("../img/shield.svg") center / contain no-repeat;
  filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff);
}
html[data-update-style="look"] #assistant[data-update-dot]:not([data-update-kind="security"])::after { background: var(--on-accent); box-shadow: 0 0 0 2px var(--accent), 0 0 0 3px var(--on-accent); }
html[data-security-style="look"] #assistant[data-update-dot][data-update-kind="security"]::after { background: var(--warn); }

/* the mark in the Settings badge (css/release.css draws it in the brand's colour / the warning colour; these outrank it) */
.rb-mark.rb-mark-dot { background: var(--upd-mark); }
.rb-mark.rb-mark-security { background: var(--upd-mark); }
html[data-update-style="look"] .rb-mark.rb-mark-dot { background: var(--rb-accent); }
html[data-security-style="look"] .rb-mark.rb-mark-security { background: var(--warn); }
@media (forced-colors: active) {
  #assistant[data-update-dot]::after, .rb-mark.rb-mark-dot { background: Highlight; }
  #assistant[data-update-dot][data-update-kind="security"]::after, .rb-mark.rb-mark-security { background: CanvasText; }
}

/* the card flashed when "Update settings" lands on it (openSettings finds it by id; shell.css flashes setting rows only) */
#last-update.flash { animation: uk-flash 1.6s ease-out; }
@keyframes uk-flash { 0%, 55% { outline: 3px solid currentColor; outline-offset: 2px; } }
@media (prefers-reduced-motion: reduce) { #last-update.flash { animation: none; outline: 3px solid currentColor; outline-offset: 2px; } }


/* Version history (UR1.3w, web only): the sets this device has run, newest first, and a way to go to any of them.
   Lives here with the update looks, not in css/dew.css. js/update.js fills #version-history; the yellow list on top
   holds security sets (the same --warn colours, shield and word as above). Plain neutral card in the look's own
   colours (--line, --text), so every look wears it. */
#version-history { margin: 12px 0; padding: 10px 11px; border: 1px solid var(--line); border-radius: 6px; text-align: left;
  font-size: calc(12px * var(--ts, 1)); line-height: 1.4; display: flex; flex-direction: column; gap: 8px; }
#version-history[hidden], .vh-list[hidden], .vh-size[hidden] { display: none; }
.vh-title { font-weight: 700; }
.vh-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.vh-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; padding: 6px 8px; border-radius: 5px; border: 1px solid var(--line); }
.vh-row.is-running { border-width: 2px; }
.vh-head { grid-column: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-weight: 600; }
.vh-ver { opacity: .75; font-weight: 400; }
.vh-line { grid-column: 1; overflow-wrap: anywhere; }
.vh-act { grid-column: 2; grid-row: 1 / span 2; justify-self: end; }
.vh-now { font-weight: 700; }
.vh-go { font: inherit; font-weight: 700; color: inherit; background: transparent; border: 1px solid currentColor; border-radius: 5px;
  padding: 4px 9px; min-height: 44px; min-width: 44px; cursor: pointer; }
.vh-go:hover:not(:disabled) { background: color-mix(in srgb, currentColor 14%, transparent); }
.vh-go:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.vh-go:disabled { opacity: .5; cursor: not-allowed; }
.vh-row.is-security { background: var(--warn); color: var(--warn-ink); border-color: var(--warn-ink); }
.vh-size { opacity: .75; font-size: calc(11px * var(--ts, 1)); }
@media (forced-colors: active) {
  .vh-row.is-security { background: Canvas; color: CanvasText; border-color: CanvasText; }
  .vh-go:disabled { opacity: 1; color: GrayText; }
}

/* LIVE-UPDATE-1 test marker (harmless; read by the live-update stopwatch tests): docs/live-update-diagnosis-2026-10-31.md */
:root { --lu-marker: "base-d1"; }

/* UPDATE-BANNER-2 (2026-10-31, William's phone shot): on the banner the two buttons are drawn symbols (the refresh arrows for
   "Refresh the Earth", the gear for "Update settings"), their words are the hover name and the screen-reader name
   (symbols-before-words.md). Round, 44 px, the same outline as the other banner buttons. */
#update-flag .uf-sym { display: inline-flex; align-items: center; justify-content: center; padding: 0; width: 44px; height: 44px; border-radius: 50%; }
#update-flag .uf-sym svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: block; }
#update-flag .uf-sym[hidden] { display: none; }
/* on a phone the banner sits low, above the dock, so the top bar (the menu, the title) is never hidden by it; it clears itself
   after about 30 s (js/update.js) and tapping it puts it away at once */
@media (max-width: 600px) {
  #update-flag, #update-flag.is-security { top: auto; right: 12px; left: 12px; max-width: none; bottom: calc(var(--dock-h, 72px) + 16px + env(safe-area-inset-bottom, 0px)); }
  body:has(.gl-panel:not([hidden])) :is(#update-flag) { right: 12px; left: 12px; }
  #update-flag:not([hidden]) ~ #invite-flag { top: 16px; }
}