/* ==========================================================================================================
   Customer Despatch Portal - DINGO HORIZON skin (consolidated 3/11/2026)
   Visual target: assets/approved-reference.png (1915 x 821). Load order: app.css -> tokens.css -> horizon.css ->
   portal-skin.css (this file: portal components) -> continuous-light.css (the one shared sunrise light, dark tone).
   Everything is scoped to html[data-skin="horizon"] (skin.js); classic is untouched. Materials come from tokens.css; panel
   frames are rims/*.png, rebuilt clean from the reference (C:\Putty\dingo-horizon\fidelity-v2\clean\README.md).
   Layout, wording, data and behaviour stay the portal's own.
   ========================================================================================================== */

.hz-only { display: none !important; }
[data-skin="horizon"] .classic-only { display: none !important; }
[data-skin="horizon"] .empty > .hz-only { display: block !important; }

/* ---- portal variables -> Horizon ---- */
[data-skin="horizon"] {
  --accent: var(--hz-accent); --accent-strong: var(--hz-accent); --on-accent: var(--hz-on-accent);
  --accent-soft: color-mix(in srgb, var(--hz-accent) 16%, transparent); --accent-line: var(--hz-line-strong);
  --ink: var(--hz-ink); --ink-soft: var(--hz-ink-2); --muted: var(--hz-muted);
  --bg: var(--hz-bg); --surface: var(--hz-surface-solid); --surface-alt: var(--hz-surface-2);
  --line: var(--hz-line); --line-strong: var(--hz-line-strong);
  --header: #241D1C; --on-header: #F5ECE4; --header-muted: #E3D6CB;
  --ok: var(--hz-ok); --ok-bg: var(--hz-ok-soft); --warn: var(--hz-warn); --warn-bg: var(--hz-warn-soft);
  --bad: var(--hz-bad); --bad-bg: var(--hz-bad-soft); --info: var(--hz-info); --info-bg: var(--hz-info-soft);
  --driver-bubble: rgba(30, 24, 22, .56); --driver-line: rgba(255, 236, 214, .10);
  --me-bubble: rgba(110, 74, 52, .46); --me-line: rgba(226, 164, 116, .30);
  --other-bubble: rgba(95, 62, 42, .36); --priority-bg: rgba(95, 62, 42, .45);
  --shadow-sm: none; --shadow: var(--hz-panel-shadow); --shadow-lg: var(--hz-shadow-3);
  --radius: 20px; --radius-sm: 13px; --bubble-radius: 16px;
  --font: var(--hz-font); --font-display: var(--hz-font-display); --ease: var(--hz-ease-out);
  color-scheme: dark;
}

/* ---- page (dark tone: continuous-light.css supplies the shared sunrise behind everything) ---- */
[data-skin="horizon"] body { font: 400 16px/1.45 var(--hz-font); background-color: #221C1B;
  background-image: var(--hz-atmosphere); background-attachment: fixed; }
[data-skin="horizon"] h1, [data-skin="horizon"] h2 { font-family: var(--hz-font-display); font-weight: 600; letter-spacing: 0; }
[data-skin="horizon"] :focus-visible { outline: 2px solid var(--hz-accent-hi); outline-offset: 2px; }
[data-skin="horizon"] kbd { font: 400 13.5px/1 var(--hz-font); padding: 5px 8px; border-radius: 6px; color: var(--hz-ink);
  background: var(--hz-field-fill); border: 1px solid var(--hz-field-edge); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25); }
[data-skin="horizon"] ::-webkit-scrollbar { width: 10px; height: 10px; }
[data-skin="horizon"] ::-webkit-scrollbar-track { background: transparent; }
[data-skin="horizon"] ::-webkit-scrollbar-thumb { background: rgba(214, 200, 190, .32); border-radius: 5px; border: 2px solid transparent; background-clip: padding-box; }
[data-skin="horizon"] ::-webkit-scrollbar-thumb:hover { background: rgba(214, 200, 190, .5); background-clip: padding-box; }

/* ---- buttons: copper only for the primary action; satin secondary; clear focus; honest disabled ---- */
[data-skin="horizon"] .btn { border-radius: 13px; font-weight: 600;
  transition: transform var(--hz-dur-control) var(--hz-ease-out), filter var(--hz-dur-control) var(--hz-ease-out),
              box-shadow var(--hz-dur-control) var(--hz-ease-out), border-color var(--hz-dur-micro), opacity var(--hz-dur-micro); }
[data-skin="horizon"] .btn:focus-visible { outline: none; box-shadow: var(--hz-focus-ring); }
[data-skin="horizon"] .btn.primary, [data-skin="horizon"] .btn.primary:hover:not(:disabled) { color: var(--hz-on-accent); border: 1px solid var(--hz-copper-edge);
  background: var(--hz-copper-fill); box-shadow: var(--hz-copper-shadow); }
[data-skin="horizon"] .btn.primary:hover:not(:disabled) { filter: brightness(1.07); transform: translateY(-1px); }
[data-skin="horizon"] .btn.primary:active:not(:disabled) { transform: translateY(1px); filter: brightness(.98); box-shadow: inset 0 2px 5px rgba(111, 57, 30, .4); }
[data-skin="horizon"] .btn.primary:focus-visible { box-shadow: var(--hz-copper-shadow), var(--hz-focus-ring); }
[data-skin="horizon"] .btn.primary:disabled { opacity: 1; filter: saturate(.95); cursor: default; }   /* idle Send keeps its copper; still disabled */
[data-skin="horizon"] .btn.secondary, [data-skin="horizon"] .btn.secondary:hover:not(:disabled) { color: var(--hz-ink); border: 1px solid var(--hz-tile-edge);
  background: var(--hz-tile-fill); box-shadow: var(--hz-tile-shadow); }
[data-skin="horizon"] .btn.secondary:hover:not(:disabled) { border-color: rgba(241, 193, 142, .34); filter: brightness(1.06); }
[data-skin="horizon"] .btn.secondary:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .3); }
[data-skin="horizon"] .btn.secondary:focus-visible { box-shadow: var(--hz-tile-shadow), var(--hz-focus-ring); }
[data-skin="horizon"] .btn:disabled { opacity: .5; }
[data-skin="horizon"] .icon-btn { border-radius: 12px; transition: background-color var(--hz-dur-micro), color var(--hz-dur-micro); }
[data-skin="horizon"] .icon-btn.hdr { color: var(--header-muted); }
[data-skin="horizon"] .icon-btn.hdr:hover { background: rgba(255, 240, 225, .07); color: #fff; }

/* ---- header: charcoal left, the approved dawn strip (text- and logo-free) toward the right, behind the content ---- */
[data-skin="horizon"] .topbar { position: relative; z-index: 20; isolation: isolate; min-height: 76px;   /* above the tab bar and glass panels so the account menu is on top */ padding: 0 26px 0 44px; border-bottom: 1px solid rgba(241, 193, 142, .20);
  padding-top: env(safe-area-inset-top); background: linear-gradient(180deg, rgba(35, 27, 26, .40), rgba(32, 24, 23, .58)); box-shadow: none; }
[data-skin="horizon"] .topbar::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; opacity: .92;
  background-image: linear-gradient(90deg, rgba(37, 29, 27, .9) 0%, rgba(37, 29, 27, .55) 26%, rgba(37, 29, 27, .06) 60%, rgba(37, 29, 27, .22) 100%),
                    url("horizon-dawn-1920.jpg");
  background-size: cover; background-position: center 34%;
  filter: brightness(1.42) contrast(1.1) saturate(1.3); }
[data-skin="horizon"] .topbar::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 226, 185, 0), rgba(255, 226, 185, .40) 54%, rgba(255, 226, 185, 0)); }
[data-skin="horizon"] .brand, [data-skin="horizon"] .topbar-right { position: relative; z-index: 1; }
[data-skin="horizon"] .brand { gap: 12px; }
[data-skin="horizon"] .brand > img { width: 42px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5)); }
[data-skin="horizon"] .brand-lockup.hz-only { display: grid !important; gap: 1px; }
[data-skin="horizon"] .brand-word { display: block; height: 37px; width: auto; }
[data-skin="horizon"] .brand-sub { font: 700 12.4px/1 var(--hz-font); letter-spacing: .095em; text-transform: uppercase; color: #F2E9E1; white-space: nowrap; padding-left: 1px; }
[data-skin="horizon"] .brand-co { display: none; }
[data-skin="horizon"] .brand-text { position: relative; padding-left: 36px; margin-left: 42px; }
[data-skin="horizon"] .brand-text::before { content: ""; position: absolute; left: 0; top: -12px; bottom: -12px; width: 1px;
  background: linear-gradient(180deg, rgba(255, 232, 212, 0), rgba(255, 232, 212, .42) 30%, rgba(255, 232, 212, .42) 70%, rgba(255, 232, 212, 0)); }
[data-skin="horizon"] .brand-store { font: 600 27px/1.2 var(--hz-font-display); color: #F7EFE8; }
[data-skin="horizon"] .topbar-right { gap: 12px; }
[data-skin="horizon"] .pill { height: 43px; padding: 0 20px 0 16px; gap: 11px; font: 600 17px var(--hz-font); color: #F7EFE8;
  background: rgba(24, 19, 18, .55); border: 1px solid rgba(255, 232, 212, .22); box-shadow: inset 0 1px 0 rgba(255, 240, 225, .08); margin-right: 10px; }
[data-skin="horizon"] .pill i { width: 12px; height: 12px; transition: background-color var(--hz-dur-panel) var(--hz-ease-out), box-shadow var(--hz-dur-panel); }
[data-skin="horizon"] .pill[data-state="connected"] i { background: #3BD16F; box-shadow: 0 0 6px rgba(59, 209, 111, .65); }
[data-skin="horizon"] #notif-btn { width: 52px; height: 52px; color: #F2E9E1; }
[data-skin="horizon"] #notif-btn svg { width: 30px; height: 30px; stroke-width: 1.7; }
[data-skin="horizon"] .icon-btn .dot { top: 8px; right: 9px; width: 11px; height: 11px; background: #F28A2E; box-shadow: 0 0 0 2px #2A211F; }
/* avatar circle; Theme and Sign out live in its menu (the same buttons and handlers) */
[data-skin="horizon"] .hz-me { border: 0; padding: 0; background: none; cursor: pointer; border-radius: 50%; }
[data-skin="horizon"] .hz-me:focus-visible { outline: none; box-shadow: var(--hz-focus-ring); }
[data-skin="horizon"] .hz-me .user-chip { padding: 0; margin: 0; background: none; box-shadow: none; }
[data-skin="horizon"] .hz-me #me-name { display: none; }
[data-skin="horizon"] .hz-me .avatar-sm { width: 56px; height: 56px; font: 600 22px var(--hz-font); color: #F7EFE8;
  background: radial-gradient(80% 80% at 30% 25%, rgba(104, 88, 80, .95), rgba(40, 32, 30, .95)); border: 1.5px solid rgba(255, 232, 212, .34);
  box-shadow: inset 0 1px 0 rgba(255, 240, 225, .14), 0 4px 10px rgba(0, 0, 0, .35); transition: border-color var(--hz-dur-micro); }
[data-skin="horizon"] .hz-me:hover .avatar-sm, [data-skin="horizon"] .hz-me[aria-expanded="true"] .avatar-sm { border-color: rgba(241, 193, 142, .7); }
[data-skin="horizon"] .hz-menu { position: absolute; right: 0; top: calc(100% + 10px); z-index: 30; min-width: 220px; padding: 8px; display: grid; gap: 2px;
  background: rgba(46, 37, 34, .97); border: 1px solid var(--hz-panel-edge); border-radius: 16px; box-shadow: var(--hz-shadow-3);
  animation: hz-modal-in var(--hz-dur-panel) var(--hz-ease-out); }
[data-skin="horizon"] .hz-menu-who { padding: 8px 12px 10px; font-size: 13px; color: var(--hz-muted); border-bottom: 1px solid var(--hz-line); margin-bottom: 4px; }
[data-skin="horizon"] .hz-menu-who strong { display: block; color: var(--hz-ink); font-size: 15px; }
[data-skin="horizon"] .hz-menu .icon-btn.hdr { width: 100%; height: 42px; display: flex; justify-content: flex-start; gap: 12px; padding: 0 12px; color: var(--hz-ink); }
[data-skin="horizon"] .hz-menu .hz-menu-label { font: 500 15px var(--hz-font); }
[data-skin="horizon"] .banner.warn { background: var(--hz-warn-soft); color: var(--hz-warn); }

/* ---- navigation: understated tabs; one glassy copper pill travels (tabIndicator) inside the reference-derived frame ---- */
[data-skin="horizon"] .subnav { position: relative; gap: 6px; padding: 3px 38px; min-height: 48px; border-bottom: 1px solid rgba(241, 193, 142, .08);
  background: linear-gradient(90deg, rgba(34, 27, 25, .55) 0%, rgba(40, 31, 28, .32) 45%, rgba(58, 42, 34, .22) 75%, rgba(40, 31, 28, .34) 100%); scrollbar-width: none; }
[data-skin="horizon"] .subnav-btn { position: relative; z-index: 1; gap: 12px; min-height: 40px; padding: 0 30px; border-radius: 999px;
  font: 600 17.5px/1 var(--hz-font); color: #F4EAE2;
  transition: color var(--hz-dur-panel) var(--hz-ease-out), background-color var(--hz-dur-micro); }
[data-skin="horizon"] .subnav-btn:hover { background: rgba(255, 240, 225, .04); color: #FFFFFF; }
[data-skin="horizon"] .subnav-btn:focus-visible { outline: none; box-shadow: var(--hz-focus-ring); }
[data-skin="horizon"] .subnav-btn[aria-selected="true"] { background: transparent; box-shadow: none; color: #FFF8F0; text-shadow: 0 1px 2px rgba(80, 36, 12, .55); }
[data-skin="horizon"] .subnav-btn[aria-selected="true"]:focus-visible { box-shadow: var(--hz-focus-ring); }   /* keyboard focus stays visible on the selected tab */
[data-skin="horizon"] .subnav-btn svg { width: 24px; height: 24px; stroke-width: 1.8; opacity: 1; }
[data-skin="horizon"] .subnav-btn[aria-selected="true"] svg { display: none !important; }
[data-skin="horizon"] .subnav-btn .hz-only { display: block !important; }
[data-skin="horizon"] #tab-codes::before, [data-skin="horizon"] #tab-guide::before { content: ""; position: absolute; left: -4px; top: 10px; bottom: 10px; width: 1px;
  background: rgba(241, 193, 142, .14); }
/* selected tab: one illuminated copper pill (white text >= 4.5:1) - light pools at the top and bottom centre and glows
   round the edge; no frame image (a stretched 12px rim banded the 40px pill like timber) */
[data-skin="horizon"] .subnav .hz-tab-ind { top: 4px; bottom: 4px; border-radius: 999px; border: 1px solid rgba(255, 196, 140, .78);
  background:
    radial-gradient(ellipse 30% 24% at 50% 0%, rgba(255, 232, 192, .72), transparent 100%),
    radial-gradient(ellipse 28% 30% at 50% 100%, rgba(255, 226, 178, .9), transparent 100%),
    radial-gradient(ellipse 62% 60% at 50% 52%, rgba(92, 48, 24, .34), transparent 100%),
    linear-gradient(180deg, #BC7A4C 0%, #9E6038 50%, #A9693F 100%);
  box-shadow: inset 0 1px 0 rgba(255, 236, 210, .55), inset 0 -1px 0 rgba(255, 210, 156, .55), inset 0 0 9px rgba(255, 168, 100, .4),
    0 0 20px rgba(240, 150, 80, .42), 0 4px 10px rgba(30, 14, 8, .4);
  transition: transform 220ms var(--hz-ease-spring), width 220ms var(--hz-ease-spring); }
[data-skin="horizon"] .subnav .hz-tab-ind.no-anim { transition: none; }   /* placed on load / resize without sliding in */
[data-skin="horizon"] .subnav .hz-tab-ind::before, [data-skin="horizon"] .subnav .hz-tab-ind::after { display: block; content: ""; position: absolute;
  left: 34%; right: 34%; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, rgba(255, 244, 222, 1), transparent); }
[data-skin="horizon"] .subnav .hz-tab-ind::before { top: -1px; opacity: .8; box-shadow: 0 0 8px 1px rgba(255, 196, 128, .55); }
[data-skin="horizon"] .subnav .hz-tab-ind::after { bottom: -1px; box-shadow: 0 0 12px 3px rgba(255, 180, 106, .7); }

/* ---- the three panels: translucent glass (tokens) + the reference-derived frame on top (never takes pointer events) ---- */
[data-skin="horizon"] .workspace { gap: 24px; padding: 16px 28px clamp(20px, 6vh, 48px) 32px; max-width: none; }
[data-skin="horizon"] .workspace.with-drivers { grid-template-columns: 340px minmax(0, 1fr) 330px; max-width: none; }
@media (min-width: 1700px) { [data-skin="horizon"] .workspace.with-drivers { grid-template-columns: 398px minmax(0, 1fr) 388px; } }
[data-skin="horizon"] .card { position: relative; isolation: isolate; border-radius: 22px; border: 1px solid var(--hz-panel-edge);
  border-top-color: rgba(255, 238, 216, .58); background: var(--hz-panel-fill); box-shadow: var(--hz-panel-shadow);
  -webkit-backdrop-filter: var(--hz-glass-filter); backdrop-filter: var(--hz-glass-filter); }
[data-skin="horizon"] .card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; background: var(--hz-panel-sheen); }
[data-skin="horizon"] .card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3; background: none;
  border: 24px solid transparent; border-image: url("rims/left-panel-rim.png") 24 / 24px stretch; }
[data-skin="horizon"] .chat.card { background: var(--hz-panel-fill-quiet); }
[data-skin="horizon"] .chat.card::after { border-image-source: url("rims/main-panel-rim.png"); }
[data-skin="horizon"] .weather-card::after, [data-skin="horizon"] .side .side-card:last-child::after {
  border-width: 22px; border-image: url("rims/weather-rim.png") 22 / 22px stretch; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { [data-skin="horizon"] .card { background: #3A2D2A; } }

/* left: clock + driver tiles */
[data-skin="horizon"] .drivers-head { position: relative; padding: 14px 32px; border-bottom: 0; }
[data-skin="horizon"] .drivers-head::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 1px;
  background: linear-gradient(90deg, rgba(241, 193, 142, 0) 0%, rgba(241, 193, 142, .3) 25%, rgba(255, 218, 176, .8) 50%, rgba(241, 193, 142, .3) 75%, rgba(241, 193, 142, 0) 100%); }
[data-skin="horizon"] .clock-time { font: 700 40px/1.1 var(--hz-font-display); letter-spacing: .005em; color: #FBF4EE; }
[data-skin="horizon"] .clock-date { font: 400 17px/1.3 var(--hz-font); color: #F0E6DD; }
[data-skin="horizon"] .drivers .drivers-body { padding: 12px 10px 16px 22px; margin-right: 6px; scrollbar-gutter: stable; }
[data-skin="horizon"] .drivers-body { gap: 9px; }
[data-skin="horizon"] .dv-row { position: relative; display: block; padding: 0; border-radius: 15px; animation: none;
  border: 1px solid var(--hz-tile-edge); background: var(--hz-tile-fill); box-shadow: var(--hz-tile-shadow);
  transition: border-color var(--hz-dur-micro), filter var(--hz-dur-micro), box-shadow var(--hz-dur-panel) var(--hz-ease-out); }
[data-skin="horizon"] .dv-row::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border: 17px solid transparent; border-image: url("rims/driver-card-rim.png") 17 / 17px stretch; }
[data-skin="horizon"] .dv-row.at_store, [data-skin="horizon"] .dv-row.returning { border-style: solid; border-color: var(--hz-tile-edge); background: var(--hz-tile-fill); }
[data-skin="horizon"] .dv-row:hover { border-color: rgba(241, 193, 142, .34); background-color: rgba(239, 194, 159, .055); }
[data-skin="horizon"] .dv-row.hz-enter { animation: hz-enter var(--hz-dur-panel) var(--hz-ease-out) both; }
[data-skin="horizon"] .dv-main { display: grid; grid-template-columns: 78px minmax(0, 1fr); column-gap: 8px; row-gap: 2px; align-items: center; width: 100%;
  padding: 12px 46px 12px 20px; border: 0; border-radius: 15px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
[data-skin="horizon"] .dv-main:focus-visible { outline: none; box-shadow: var(--hz-focus-ring); }
[data-skin="horizon"] .dv-main > .dv-time, [data-skin="horizon"] .dv-main > .dv-ic { grid-row: 1 / span 2; align-self: center; }
[data-skin="horizon"] .dv-ic { width: 40px; height: 40px; margin-left: 2px; color: #F0E6DD; stroke-width: 1.5; }
[data-skin="horizon"] .dv-time { font: 700 17px/1.25 var(--hz-font); max-width: 3.3em; white-space: normal; color: #FBF4EE; }
[data-skin="horizon"] .dv-who { grid-column: 2; font: 600 16.5px/1.3 var(--hz-font); color: #FBF4EE; }
[data-skin="horizon"] .dv-sub { grid-column: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
[data-skin="horizon"] .dv-chev { position: absolute; right: 18px; top: 50%; width: 22px; height: 22px; margin-top: -11px; color: #EFE5DC; stroke-width: 2;
  pointer-events: none; transition: transform var(--hz-dur-panel) var(--hz-ease-out), color var(--hz-dur-micro); }
[data-skin="horizon"] .dv-row:has(.dv-main[aria-expanded="true"]) .dv-chev { transform: rotate(90deg); color: var(--hz-champagne); }
[data-skin="horizon"] .dv-row > .dv-docs { padding: 0 46px 11px 106px; margin-top: -9px; }
[data-skin="horizon"] .dv-doc { gap: 7px; font: 600 14.5px var(--hz-font); color: #EDA968; border: 1px solid rgba(237, 169, 104, .3); border-radius: 7px;
  background: rgba(237, 169, 104, .05); min-height: 26px; padding: 1px 13px 1px 9px; transition: background-color var(--hz-dur-micro), border-color var(--hz-dur-micro); }
[data-skin="horizon"] .dv-doc svg { width: 16px; height: 16px; }
[data-skin="horizon"] .dv-doc:hover { background: rgba(237, 169, 104, .12); border-color: rgba(237, 169, 104, .55); }
[data-skin="horizon"] .dv-doc:focus-visible { outline: none; box-shadow: var(--hz-focus-ring); }
[data-skin="horizon"] .dv-more { margin: 0; padding: 0 46px 12px 106px; display: grid; grid-template-columns: auto 1fr; gap: 3px 14px; font-size: 14px; }
[data-skin="horizon"] .dv-more dt { color: var(--hz-muted); }
[data-skin="horizon"] .dv-more dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
/* status tags: distinct, readable, a faint halo only */
[data-skin="horizon"] .dv-tag { font: 700 14.5px/1.3 var(--hz-font); letter-spacing: .02em; padding: 2px 13px; border-radius: 8px; margin: 1px 0;
  transition: background-color var(--hz-dur-panel) var(--hz-ease-out), box-shadow var(--hz-dur-panel) var(--hz-ease-out), color var(--hz-dur-panel); }
[data-skin="horizon"] .dv-tag.here { background: #1FAA4F; color: #FFFFFF; animation: none; box-shadow: inset 0 0 0 1px rgba(130, 250, 170, .35), 0 0 10px rgba(46, 204, 113, .4); text-shadow: 0 1px 1px rgba(0, 60, 20, .35); }
[data-skin="horizon"] .dv-tag.start { background: rgba(18, 128, 58, .32); color: #D4F5E0; box-shadow: inset 0 0 0 1px rgba(90, 230, 140, .4); }
[data-skin="horizon"] .dv-tag.back { background: #1F62C8; color: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(150, 200, 255, .35), 0 0 10px rgba(64, 140, 255, .35); }
[data-skin="horizon"] .dv-note { font: 400 14.5px/1.3 var(--hz-font); color: #F0E6DD; }
[data-skin="horizon"] .dv-row .hz-ack { animation: hz-ack 900ms var(--hz-ease-out) 1; }
[data-skin="horizon"] .drivers .fine { color: var(--hz-muted); padding: 2px 4px; }

/* centre: conversation (dark tone: the chat artwork and shared light come from continuous-light.css) */
[data-skin="horizon"] .chat-head { position: relative; padding: 17px 26px 15px 54px; border-bottom: 0;
  background: linear-gradient(90deg, rgba(241, 193, 142, 0) 0%, rgba(241, 193, 142, .22) 18%, rgba(255, 218, 176, .55) 50%, rgba(241, 193, 142, .22) 82%, rgba(241, 193, 142, 0) 100%) bottom / 100% 1px no-repeat; }
[data-skin="horizon"] .chat-head::before { content: ""; position: absolute; left: 27px; top: 18px; bottom: 16px; width: 5px; border-radius: 3px;
  background: linear-gradient(180deg, #F6BC7C, #E58C38); box-shadow: 0 0 8px rgba(240, 140, 50, .45); }
[data-skin="horizon"] .chat-head h1 { font: 600 28px/1.2 var(--hz-font-display); color: #FBF4EE; }
[data-skin="horizon"] .chat-head h1::before { display: none; }
[data-skin="horizon"] .chat-head p { font-size: 17px; color: #F0E6DD; }
[data-skin="horizon"] .messages { position: relative; padding: 8px 30px 18px; }
[data-skin="horizon"] .older { font-size: 15px; color: #E3D6CB; padding: 18px 0 8px; }
[data-skin="horizon"] .day { margin: 14px 0; color: #F0E6DD; font: 600 15px var(--hz-font); letter-spacing: .1em; }
[data-skin="horizon"] .day::before { background: linear-gradient(90deg, rgba(241, 193, 142, 0), rgba(241, 193, 142, .24)); }
[data-skin="horizon"] .day::after { background: linear-gradient(90deg, rgba(241, 193, 142, .24), rgba(241, 193, 142, 0)); }
[data-skin="horizon"] .unread-line { color: var(--hz-champagne); }
[data-skin="horizon"] .unread-line::before, [data-skin="horizon"] .unread-line::after { background: rgba(241, 193, 142, .6); height: 1px; }
[data-skin="horizon"] .msg { animation: hz-msg-in var(--hz-dur-panel) var(--hz-ease-out) both; }
@keyframes hz-msg-in { from { opacity: 0; transform: translateY(6px); } }
[data-skin="horizon"] .av { box-shadow: 0 0 0 2px rgba(255, 232, 212, .14); font-weight: 600; }
[data-skin="horizon"] .who .name { font-size: 14.5px; font-weight: 600; color: #FBF4EE; }
[data-skin="horizon"] .who time, [data-skin="horizon"] .meta time { font-size: 12.5px; color: var(--hz-muted); }
[data-skin="horizon"] .who .tag { background: rgba(255, 240, 225, .06); border-color: rgba(255, 232, 212, .14); color: #E3D6CB; }
[data-skin="horizon"] .bubble { font-size: 15.5px; line-height: 1.45; padding: 9px 14px; border-radius: 4px 15px 15px 15px; box-shadow: inset 0 1px 0 rgba(255, 240, 225, .05); }
[data-skin="horizon"] .msg.cust .bubble { border-radius: 15px 4px 15px 15px; }
[data-skin="horizon"] .msg.cont .bubble { border-radius: 15px; }
[data-skin="horizon"] .msg.priority .bubble { border-color: rgba(237, 169, 104, .55); border-left: 3px solid #E8A36A; box-shadow: none; }
[data-skin="horizon"] .tag-priority { background: var(--hz-copper-fill); color: var(--hz-on-accent); }
[data-skin="horizon"] .msg.system .bubble { padding: 8px 18px; font-size: 16px; color: #FBF4EE; background: rgba(28, 26, 27, .5);
  border: 1px solid rgba(255, 232, 212, .3); border-radius: 12px; }
[data-skin="horizon"] .mention { background: rgba(232, 163, 106, .2); color: #F4C393; }
[data-skin="horizon"] .actions { background: rgba(46, 37, 34, .97); border-color: var(--hz-panel-edge); border-radius: 12px; box-shadow: var(--hz-shadow-2);
  transition: opacity var(--hz-dur-micro) var(--hz-ease-out), transform var(--hz-dur-micro) var(--hz-ease-out); }
[data-skin="horizon"] .react { background: var(--hz-field-fill); border-color: var(--hz-field-edge); transition: background-color var(--hz-dur-micro), border-color var(--hz-dur-micro), transform var(--hz-dur-micro); }
[data-skin="horizon"] .react:active:not(:disabled) { transform: scale(.96); }
[data-skin="horizon"] .react.mine { background: rgba(232, 163, 106, .18); border-color: rgba(232, 163, 106, .7); color: #F4C393; }
[data-skin="horizon"] .jump { background: rgba(46, 37, 34, .97); border-color: var(--hz-panel-edge); box-shadow: var(--hz-shadow-2); }
[data-skin="horizon"] .jump.has-new { background: var(--hz-copper-fill); color: var(--hz-on-accent); border-color: var(--hz-copper-edge); }
[data-skin="horizon"] .empty { gap: 8px; padding: 36px 20px; }
[data-skin="horizon"] .empty svg { width: 60px; height: 60px; color: #F0E6DD; stroke-width: 1.4; margin-bottom: 8px; }
[data-skin="horizon"] .empty strong { font: 600 21px var(--hz-font-display); color: #FBF4EE; }
[data-skin="horizon"] .empty .muted { font-size: 16.5px; color: #F0E6DD; }
[data-skin="horizon"] .badge { background: var(--hz-copper-fill); color: var(--hz-on-accent); }
[data-skin="horizon"] .badge.alert { background: var(--hz-bad-fill); color: #fff; }
/* composer: glassy field and Send inside reference-derived frames */
[data-skin="horizon"] .composer { background: none; border-top: 0; padding: 10px 22px 12px; }
[data-skin="horizon"] .composer-row { gap: 13px; align-items: center; }
[data-skin="horizon"] .composer textarea { min-height: 56px; padding: 3px 6px; border-radius: 12px; font-size: 17.5px; color: #FBF4EE;
  background: linear-gradient(180deg, rgba(150, 126, 114, .22), rgba(96, 80, 72, .2)); border: 12px solid transparent;
  border-image: url("rims/composer-rim.png") 12 / 12px stretch; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .35);
  transition: border-color var(--hz-dur-micro) var(--hz-ease-out), box-shadow var(--hz-dur-micro) var(--hz-ease-out); }
[data-skin="horizon"] .composer textarea::placeholder { color: #C8B9B1; }
[data-skin="horizon"] .composer textarea:focus { padding: 3px 6px; background: linear-gradient(180deg, rgba(150, 126, 114, .22), rgba(96, 80, 72, .2));
  border: 12px solid transparent; border-image: url("rims/composer-rim.png") 12 / 12px stretch; box-shadow: 0 0 0 3px rgba(210, 154, 112, .22); }
[data-skin="horizon"] .photo-btn { width: 60px; height: 56px; border-radius: 13px; color: #F0E6DD; border: 1px solid rgba(250, 226, 198, .20);
  background: linear-gradient(180deg, rgba(230, 193, 166, .16), rgba(59, 43, 39, .35)); box-shadow: inset 0 1px 0 rgba(255, 248, 234, .19), 0 4px 8px rgba(0, 0, 0, .12);
  transition: border-color var(--hz-dur-micro), filter var(--hz-dur-micro), transform var(--hz-dur-control) var(--hz-ease-out); }
[data-skin="horizon"] .photo-btn svg { width: 26px; height: 26px; stroke-width: 1.7; }
[data-skin="horizon"] .photo-btn:hover { color: #fff; border-color: rgba(241, 193, 142, .4); filter: brightness(1.06); }
[data-skin="horizon"] .photo-btn:active { transform: translateY(1px); }
[data-skin="horizon"] .btn.send { position: relative; min-height: 58px; min-width: 137px; padding: 0 26px; gap: 12px; font: 600 19px var(--hz-font); }
[data-skin="horizon"] .btn.send::after { content: ""; position: absolute; inset: -1px; z-index: 2; pointer-events: none;
  border: 14px solid transparent; border-image: url("rims/send-rim.png") 14 / 14px stretch; }
[data-skin="horizon"] .btn.send svg { width: 25px; height: 25px; stroke-width: 1.8; }
[data-skin="horizon"] .composer-hint { margin-top: 9px; font-size: 14px; color: #E3D6CB; align-items: center; }
[data-skin="horizon"] .composer-hint kbd:first-child { display: inline-grid; place-items: center; width: 26px; height: 26px; padding: 0; border-radius: 50%; }
[data-skin="horizon"] .reply-chip { background: var(--hz-field-fill); border-left-color: #E8A36A; }
[data-skin="horizon"] .emoji-pop { background: rgba(46, 37, 34, .98); border-color: var(--hz-panel-edge); border-radius: 14px; box-shadow: var(--hz-shadow-3); }
[data-skin="horizon"] .emoji-pop .ep-head { font-size: 12.5px; }
[data-skin="horizon"][data-hz-tone="day"] .emoji-pop { background: var(--hz-surface-solid); border-color: var(--hz-line-strong); }
[data-skin="horizon"] .mention-pop { background: rgba(46, 37, 34, .98); border-color: var(--hz-panel-edge); border-radius: 14px; box-shadow: var(--hz-shadow-3); }
[data-skin="horizon"] .mention-opt[aria-selected="true"], [data-skin="horizon"] .mention-opt:hover { background: rgba(232, 163, 106, .14); }
/* "Click here to turn on alert sounds" - copper pill above the composer */
[data-skin="horizon"] .sound-hint { display: inline-flex; align-items: center; gap: 12px; bottom: 160px; padding: 10px 26px 10px 22px;
  border: 1px solid var(--hz-copper-edge); color: var(--hz-on-accent); font: 600 17px/1.3 var(--hz-font); background: var(--hz-copper-fill);
  box-shadow: var(--hz-copper-shadow); animation: hz-hint-in var(--hz-dur-panel) var(--hz-ease-out) both;
  transition: transform var(--hz-dur-control) var(--hz-ease-out), filter var(--hz-dur-control); }
[data-skin="horizon"] .sound-hint::before { content: ""; width: 21px; height: 21px; background: currentColor;
  -webkit-mask: url("icon-bell-off.svg") center / contain no-repeat; mask: url("icon-bell-off.svg") center / contain no-repeat; }
[data-skin="horizon"] .sound-hint:hover { filter: brightness(1.07); transform: translateX(-50%) translateY(-1px); background: var(--hz-copper-fill); }
@keyframes hz-hint-in { from { opacity: 0; translate: 0 6px; } }   /* translate, not transform: the pill is centred with transform */

/* right: forecast, utility rows, how it works */
[data-skin="horizon"] .side { gap: 18px; }
[data-skin="horizon"] .side-card { padding: 12px 24px 16px; }
[data-skin="horizon"] .side-card h2 { font: 600 22px/1.3 var(--hz-font-display); color: #FBF4EE; }
[data-skin="horizon"] .side-card:last-child h2 { font-size: 23px; }
[data-skin="horizon"] .weather-card { gap: 8px; background: var(--hz-panel-fill-raised); }
[data-skin="horizon"] .wx-days { gap: 0; }
[data-skin="horizon"] .wx-day { grid-template-columns: 84px 34px minmax(0, 1fr) auto; gap: 8px; font-size: 16.5px; line-height: 1.3; padding: 2px 0; min-height: 30px; color: #FBF4EE; }
[data-skin="horizon"] .wx-day svg { width: 26px; height: 26px; stroke-width: 1.6; }
[data-skin="horizon"] .wx-label { font-weight: 400; }
[data-skin="horizon"] .wx-temp { font-variant-numeric: tabular-nums; text-align: right; }
[data-skin="horizon"] .wx-day .ic-sun, [data-skin="horizon"] .wx-day .ic-partly { color: #F2B04E; }
[data-skin="horizon"] .wx-day .ic-cloud, [data-skin="horizon"] .wx-day .ic-fog { color: #D9CCC1; }
[data-skin="horizon"] .wx-day .ic-rain, [data-skin="horizon"] .wx-day .ic-showers, [data-skin="horizon"] .wx-day .ic-storm { color: #FF6E5A; filter: none; }
[data-skin="horizon"] .wx-day.wet .wx-text { color: #FF7A66; font-weight: 600; text-shadow: none; }
[data-skin="horizon"] .wx-text { color: #F0E6DD; }
[data-skin="horizon"] .wx-temp .lo { color: #CDBFB3; }
[data-skin="horizon"] .weather-card .fine { font-size: 13.5px; color: #E3D6CB; margin-top: 6px; }
/* utility rows (Online drivers, notifications): lit satin glass in the reference-derived utility frame */
[data-skin="horizon"] .online-btn { position: relative; justify-content: flex-start; min-height: 50px; padding: 0 22px 0 30px; gap: 26px; border-radius: 16px;
  font: 600 19px var(--hz-font); color: #FBF4EE; }
[data-skin="horizon"] .online-btn.btn.secondary, [data-skin="horizon"] .online-btn.btn.secondary:hover:not(:disabled) {
  isolation: isolate; overflow: hidden; background: var(--hz-panel-fill-lit); border: 1px solid var(--hz-panel-edge);
  box-shadow: var(--hz-panel-shadow); -webkit-backdrop-filter: var(--hz-glass-filter); backdrop-filter: var(--hz-glass-filter); }
[data-skin="horizon"] .online-btn.btn.secondary:hover:not(:disabled) { border-color: rgba(252, 220, 190, .36); filter: brightness(1.05); }
[data-skin="horizon"] .online-btn.btn.secondary { border-top-color: rgba(255, 238, 216, .58); }
[data-skin="horizon"] .online-btn.btn.secondary:focus-visible { box-shadow: var(--hz-panel-shadow), var(--hz-focus-ring); }   /* the glass shadow must not hide focus */
[data-skin="horizon"] .online-btn.btn.secondary::before { content: ""; position: absolute; z-index: 2; inset: 0; pointer-events: none; border-radius: inherit; background: none;
  border: 14px solid transparent; border-image: url("rims/utility-rim.png") 14 / 14px stretch; }
[data-skin="horizon"] .online-btn > svg { width: 31px; height: 31px; color: #F0E6DD; stroke-width: 1.5; }
[data-skin="horizon"] #online-btn::after { content: ""; margin-left: auto; width: 10px; height: 10px; border-right: 2px solid #F0E6DD; border-top: 2px solid #F0E6DD;
  transform: rotate(45deg); transition: transform var(--hz-dur-micro) var(--hz-ease-out); }
[data-skin="horizon"] #online-btn:hover::after { transform: translateX(2px) rotate(45deg); }
/* notifications: a tactile switch that shows the real state (on = copper) */
[data-skin="horizon"] .hz-switch.hz-only { display: block !important; position: relative; margin-left: auto; width: 54px; height: 30px; border-radius: 999px; flex: none;
  background: rgba(18, 14, 13, .62); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 232, 212, .16);
  transition: background var(--hz-dur-control) var(--hz-ease-out), box-shadow var(--hz-dur-control); }
[data-skin="horizon"] .hz-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%;
  background: linear-gradient(180deg, #FFFFFF 0%, #EEE6DE 60%, #D9CEC4 100%); box-shadow: 0 1px 3px rgba(0, 0, 0, .45), inset 0 -1px 1px rgba(0, 0, 0, .08);
  transition: transform var(--hz-dur-control) var(--hz-ease-spring); }
[data-skin="horizon"] #side-notif-btn.on .hz-switch { background: var(--hz-copper-fill); box-shadow: inset 0 1px 2px rgba(100, 50, 20, .4), inset 0 0 0 1px var(--hz-copper-edge); }
[data-skin="horizon"] #side-notif-btn.on .hz-switch::after { transform: translateX(24px); }
[data-skin="horizon"] .howto { font-size: 17.5px; line-height: 1.45; color: #F0E6DD; padding-left: 22px; gap: 10px; }
[data-skin="horizon"] .howto strong { color: #FFFFFF; }

/* ---- other tabs ---- */
[data-skin="horizon"] section.page { padding: 26px 32px; max-width: 1280px; gap: 18px; }
[data-skin="horizon"] .page-head h1 { font-size: 28px; }
[data-skin="horizon"] .page-head p { color: var(--hz-ink-2); font-size: 16px; }
[data-skin="horizon"] .field input { border-radius: 12px; background: var(--hz-field-fill); border-color: var(--hz-field-edge); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .3); }
[data-skin="horizon"] .field input:focus { border-color: rgba(241, 193, 142, .55); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .3), 0 0 0 3px rgba(210, 154, 112, .16); }
[data-skin="horizon"] .chip { border-color: var(--hz-tile-edge); background: var(--hz-tile-fill); color: var(--hz-ink-2); min-height: 36px; padding: 5px 16px; font-size: 14.5px;
  transition: background-color var(--hz-dur-control) var(--hz-ease-out), color var(--hz-dur-control), border-color var(--hz-dur-control), box-shadow var(--hz-dur-control); }
[data-skin="horizon"] .chip:hover { border-color: rgba(241, 193, 142, .34); color: var(--hz-ink); }
[data-skin="horizon"] .chip:focus-visible { outline: none; box-shadow: var(--hz-focus-ring); }
[data-skin="horizon"] .chip[aria-pressed="true"] { background: var(--hz-select-fill); border-color: rgba(255, 230, 200, .5); color: #2B1D17;
  box-shadow: inset 0 1px 0 rgba(255, 248, 236, .6), 0 3px 8px rgba(33, 15, 8, .25); }
[data-skin="horizon"] .ev-table, [data-skin="horizon"] #slots-body, [data-skin="horizon"] #codes-live-body { animation: hz-enter var(--hz-dur-panel) var(--hz-ease-out) both; }
[data-skin="horizon"] .runs { font-size: 14.5px; }
[data-skin="horizon"] .runs th { color: var(--hz-muted); letter-spacing: .06em; border-bottom-color: var(--hz-line-strong); padding: 8px; }
[data-skin="horizon"] .runs td { border-bottom-color: var(--hz-line); padding: 10px 8px; }
[data-skin="horizon"] .runs tbody tr { transition: background-color var(--hz-dur-micro); }
[data-skin="horizon"] .runs tbody tr:hover { background: rgba(255, 240, 225, .04); }
[data-skin="horizon"] .runs a { color: #EDA968; }
[data-skin="horizon"] .runs tfoot tr.tot th, [data-skin="horizon"] .runs tfoot tr.tot td { border-top-color: var(--hz-line-strong); }
[data-skin="horizon"] .runs tfoot tr.avg th, [data-skin="horizon"] .runs tfoot tr.avg td { color: var(--hz-muted); }
[data-skin="horizon"] .loader-name { border-bottom-color: rgba(241, 193, 142, .45); }
[data-skin="horizon"] .loader-edit input { border-radius: 10px; background: var(--hz-field-fill); border-color: var(--hz-field-edge); color: var(--hz-ink); }
[data-skin="horizon"] .loader-edit input:focus { border-color: rgba(241, 193, 142, .55); box-shadow: 0 0 0 3px rgba(210, 154, 112, .16); }
[data-skin="horizon"] .rank li { border-bottom-color: var(--hz-line); }
[data-skin="horizon"] .rank .pos { color: var(--hz-muted); }
[data-skin="horizon"] .rank strong { color: #EDA968; }
[data-skin="horizon"] .st { border-radius: 6px; padding: 3px 10px; font-size: 12px; }
[data-skin="horizon"] .st.preparing { background: rgba(18, 128, 58, .32); color: #D4F5E0; box-shadow: inset 0 0 0 1px rgba(90, 230, 140, .4); }
[data-skin="horizon"] .st.on_route { background: #1E5FC7; box-shadow: 0 0 6px rgba(64, 140, 255, .28); }
[data-skin="horizon"] .st.preloaded { background: rgba(237, 169, 104, .2); color: #F6D3AE; box-shadow: inset 0 0 0 1px rgba(237, 169, 104, .45); }
[data-skin="horizon"] .st.attempted { background: var(--hz-warn-fill); color: var(--hz-on-warn); }
[data-skin="horizon"] .eta-win.attempted { color: var(--hz-warn); }
[data-skin="horizon"] .slot, [data-skin="horizon"] .ev-stat, [data-skin="horizon"] .code { border: 1px solid var(--hz-tile-edge); border-radius: 15px; background: var(--hz-tile-fill); box-shadow: var(--hz-tile-shadow); }
[data-skin="horizon"] .ev-bar { background: linear-gradient(90deg, #C98E63, #F1C18E); transition: width var(--hz-dur-layout) var(--hz-ease-out); }
[data-skin="horizon"] .ev-code.on { box-shadow: inset 0 0 0 1px rgba(232, 163, 106, .7); }
[data-skin="horizon"] .guide-card { padding: 24px; }
[data-skin="horizon"] .guide-card h3 { color: var(--hz-muted); }

/* ---- overlays ---- */
[data-skin="horizon"] .dialog, [data-skin="horizon"] .drawer { background: #302725; border: 1px solid var(--hz-panel-edge); box-shadow: inset 0 1px 0 rgba(255, 231, 204, .16), var(--hz-shadow-3); }
[data-skin="horizon"] .dialog { border-radius: 22px; }
[data-skin="horizon"] .dialog[open] { animation: hz-modal-in var(--hz-dur-panel) var(--hz-ease-out); }
[data-skin="horizon"] .drawer { border-radius: 22px 0 0 22px; }
[data-skin="horizon"] .drawer[open] { animation: hz-drawer-in var(--hz-dur-layout) var(--hz-ease-out); }
[data-skin="horizon"] .dialog::backdrop, [data-skin="horizon"] .drawer::backdrop { background: rgba(18, 12, 11, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
[data-skin="horizon"] .ol-row, [data-skin="horizon"] .status-rows { border-color: var(--hz-tile-edge); border-radius: 14px; }
[data-skin="horizon"] .toggle input:checked + .track { background: var(--hz-copper-fill); box-shadow: inset 0 0 0 1px var(--hz-copper-edge); }
[data-skin="horizon"] .toggle .track::after { transition: transform var(--hz-dur-control) var(--hz-ease-spring); }
[data-skin="horizon"] .toast { background: rgba(46, 37, 34, .96); color: #FBF4EE; border: 1px solid var(--hz-panel-edge); border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 231, 204, .14), var(--hz-shadow-3); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  animation: hz-toast-in var(--hz-dur-panel) var(--hz-ease-out); }
/* event code pop-up (4/11/2026): the toast's dark glass with a warning edge, in both tones */
[data-skin="horizon"] .ev-pop { background: rgba(46, 37, 34, .97); color: #FBF4EE; border: 1px solid var(--hz-panel-edge); border-left: 4px solid #E0A042;
  border-radius: 16px; box-shadow: inset 0 1px 0 rgba(255, 231, 204, .14), var(--hz-shadow-3); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  animation: hz-toast-in var(--hz-dur-panel) var(--hz-ease-out); }
[data-skin="horizon"] .ev-pop h2 { font: 600 18px/1.3 var(--hz-font-display); color: #FBF4EE; }
[data-skin="horizon"] .ev-pop li.more { color: #E3D6CB; }
[data-skin="horizon"] .topbar:has(.hz-me[aria-expanded="true"]) { z-index: 70; }   /* an open account menu stays above the pop-up */
[data-skin="horizon"] .ev-pop .btn.secondary { color: #FBF4EE; background: rgba(255, 240, 225, .08); border-color: rgba(255, 220, 190, .28); }
/* time slots: heavy / light blocks and hour-gap rows */
[data-skin="horizon"] .slot-kind + .slot-kind { border-top-color: var(--hz-accent); }
[data-skin="horizon"] .slot-kind h3 { color: var(--hz-ink-2); }
[data-skin="horizon"] .slot-group + .slot-group { border-top-color: var(--hz-line-strong); }
[data-skin="horizon"] .slot-group h4 { color: var(--hz-ink); }

/* ---- sign-in and first-name screens ---- */
[data-skin="horizon"] .auth-brand { background-color: #241D1B;
  background-image: linear-gradient(180deg, rgba(36, 29, 27, .2) 0%, rgba(36, 29, 27, .82) 34%, rgba(36, 29, 27, .95) 100%),
                    linear-gradient(90deg, rgba(37, 29, 27, .7), rgba(37, 29, 27, .1) 70%, rgba(37, 29, 27, .5)), url("horizon-dawn-1920.jpg");
  background-size: auto, auto, auto 46%; background-position: 0 0, 0 0, 78% 0; background-repeat: no-repeat; }
[data-skin="horizon"] .auth-brand::after { display: none; }
[data-skin="horizon"] .auth-rule { height: 2px; width: 72px; background: linear-gradient(90deg, #F6BC7C, rgba(229, 140, 56, 0)); }
[data-skin="horizon"] .auth-company { color: #F0E6DD; }
[data-skin="horizon"] .auth-points svg { color: var(--hz-champagne); }
[data-skin="horizon"] .auth-card { background: var(--hz-panel-fill); border-color: var(--hz-panel-edge); border-radius: 22px; box-shadow: var(--hz-panel-shadow);
  -webkit-backdrop-filter: var(--hz-glass-filter); backdrop-filter: var(--hz-glass-filter); }
[data-skin="horizon"] .preview { background: var(--hz-field-fill); border-color: var(--hz-field-edge); }

/* ---- responsive: same look, smaller type and gutters; frames dropped where they would distort ---- */
@media (max-width: 1500px) {
  [data-skin="horizon"] .subnav-btn { padding: 0 20px; font-size: 16px; }
  [data-skin="horizon"] .brand-store { font-size: 23px; }
  [data-skin="horizon"] .online-btn { font-size: 17px; }
}
@media (max-width: 1320px) { [data-skin="horizon"] .workspace.with-drivers { grid-template-columns: 320px minmax(0, 1fr); } }
@media (max-width: 1080px) { [data-skin="horizon"] .workspace, [data-skin="horizon"] .workspace.with-drivers { padding: 14px; } }
@media (max-width: 860px) {
  [data-skin="horizon"] .brand-lockup.hz-only { display: none !important; }
  [data-skin="horizon"] .brand-text { margin-left: 4px; padding-left: 16px; }
}
@media (max-width: 640px) {
  [data-skin="horizon"] .topbar { min-height: 60px; padding: 0 10px; padding-top: env(safe-area-inset-top); }
  [data-skin="horizon"] .brand { gap: 8px; flex: 1 1 auto; }
  [data-skin="horizon"] .brand > img { width: 32px; }
  [data-skin="horizon"] .brand-text { padding-left: 0; margin-left: 0; grid-template-columns: minmax(0, 1fr); }
  [data-skin="horizon"] .brand-text::before { display: none; }
  [data-skin="horizon"] .brand-store { font-size: 17px; overflow: hidden; text-overflow: ellipsis; }
  [data-skin="horizon"] .topbar-right { flex: none; gap: 2px; }
  [data-skin="horizon"] .pill { height: 30px; padding: 0 9px; margin-right: 2px; }
  [data-skin="horizon"] #notif-btn { width: 40px; height: 40px; }
  [data-skin="horizon"] #notif-btn svg { width: 24px; height: 24px; }
  [data-skin="horizon"] .hz-me .avatar-sm { width: 38px; height: 38px; font-size: 16px; }
  [data-skin="horizon"] .subnav { padding: 4px 10px; min-height: 46px; }
  [data-skin="horizon"] .subnav-btn { padding: 0 14px; font-size: 15px; }
  [data-skin="horizon"] .subnav-btn .hz-only { display: none !important; }
  [data-skin="horizon"] #tab-codes::before, [data-skin="horizon"] #tab-guide::before { display: none; }
  [data-skin="horizon"] .workspace { padding: 0; }
  [data-skin="horizon"] .chat.card { border-radius: 0; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }   /* the glass tint stays (as rendered before) */
  [data-skin="horizon"] .chat.card::before, [data-skin="horizon"] .chat.card::after { display: none; }
  [data-skin="horizon"] .chat.card::after { border-image: none; }
  [data-skin="horizon"] .chat-head { padding: 12px 14px 10px 34px; }
  [data-skin="horizon"] .chat-head::before { left: 14px; top: 14px; bottom: 12px; width: 4px; }
  [data-skin="horizon"] .chat-head h1 { font-size: 22px; }
  [data-skin="horizon"] .chat-head p { font-size: 14px; }
  [data-skin="horizon"] .messages { padding: 4px 12px 12px; }
  [data-skin="horizon"] .composer { padding: 8px 10px; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  [data-skin="horizon"] .composer textarea { font-size: 16px; border: 1px solid var(--hz-field-edge); border-image: none; padding: 14px 16px; }
  [data-skin="horizon"] .photo-btn { width: 48px; height: 52px; } [data-skin="horizon"] .emoji-btn { width: 42px; }
  [data-skin="horizon"] .btn.send { min-width: 0; min-height: 52px; padding: 0 16px; }
  [data-skin="horizon"] .sound-hint { bottom: 96px; font-size: 15px; }
  [data-skin="horizon"] section.page { padding: 18px 14px; }
}

/* ---- day tone: Theme -> Light sets html[data-hz-tone="day"] (skin.js). Warm linen panels, dark ink, deeper copper; the header
        keeps its dawn strip and light lettering. Every Horizon rule above that hard-codes a dark-tone text or surface colour is
        restated here, so the dark look is untouched. Contrast measured on the rendered page (WCAG AA), 4/11/2026. ---- */
[data-skin="horizon"][data-hz-tone="day"] {
  --driver-bubble: #FFFFFF; --driver-line: rgba(105, 80, 72, .16);
  --me-bubble: #F6E3D3; --me-line: rgba(148, 88, 47, .35); --other-bubble: #FBF0E6; --priority-bg: #FBE7D6;
  --hz-panel-fill-quiet: linear-gradient(176deg, rgba(246, 223, 202, .94) 0%, rgba(251, 242, 233, .92) 12%, rgba(255, 252, 248, .9) 100%);
  --hz-panel-fill-lit: linear-gradient(170deg, rgba(255, 255, 255, .92) 0%, rgba(250, 243, 236, .94) 100%);
  --hz-panel-fill-raised: linear-gradient(170deg, rgba(255, 255, 255, .9) 0%, rgba(248, 240, 232, .94) 100%);
  color-scheme: light;
}
[data-skin="horizon"][data-hz-tone="day"] body { background: var(--hz-sunrise); background-color: var(--hz-bg); }
[data-skin="horizon"][data-hz-tone="day"] kbd { box-shadow: inset 0 -1px 0 rgba(60, 40, 30, .16); }
[data-skin="horizon"][data-hz-tone="day"] ::-webkit-scrollbar-thumb { background: rgba(105, 80, 72, .32); background-clip: padding-box; }
[data-skin="horizon"][data-hz-tone="day"] ::-webkit-scrollbar-thumb:hover { background: rgba(105, 80, 72, .5); background-clip: padding-box; }
[data-skin="horizon"][data-hz-tone="day"] .btn.primary { color: #FFF8F1; }
[data-skin="horizon"][data-hz-tone="day"] .btn.primary:hover:not(:disabled), [data-skin="horizon"][data-hz-tone="day"] .sound-hint:hover { filter: none; }   /* brightening the copper would lower white-text contrast */
[data-skin="horizon"][data-hz-tone="day"] .btn.secondary:hover:not(:disabled) { border-color: rgba(148, 88, 47, .4); }
/* header: the same dawn strip, a little less exposed so the store name and Connected stay >= 4.5:1 at every width */
[data-skin="horizon"][data-hz-tone="day"] .topbar::before { filter: brightness(1.12) contrast(1.06) saturate(1.25); }
[data-skin="horizon"][data-hz-tone="day"] .pill { background: rgba(24, 19, 18, .66); }
/* account menu: a light card under the dark header */
[data-skin="horizon"][data-hz-tone="day"] .hz-menu { background: var(--hz-surface-solid); border-color: var(--hz-line-strong); }
[data-skin="horizon"][data-hz-tone="day"] .hz-menu .icon-btn.hdr:hover { background: var(--hz-surface-2); color: var(--hz-ink); }
/* the header stays dark in day tone: two-band rings that hold on both its dark and its sunlit parts */
[data-skin="horizon"][data-hz-tone="day"] .topbar-right > .icon-btn.hdr:focus-visible { outline: none; box-shadow: 0 0 0 2px #241D1C, 0 0 0 4px #F1C18E; }
[data-skin="horizon"][data-hz-tone="day"] .hz-me:focus-visible { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #241D1C; }
/* navigation */
[data-skin="horizon"][data-hz-tone="day"] .subnav { background: linear-gradient(180deg, rgba(105, 80, 72, .08), rgba(105, 80, 72, .03)); border-bottom-color: var(--hz-line); }
[data-skin="horizon"][data-hz-tone="day"] .subnav-btn { color: var(--hz-ink-2); }
[data-skin="horizon"][data-hz-tone="day"] .subnav-btn:hover { background: rgba(105, 80, 72, .07); color: var(--hz-ink); }
[data-skin="horizon"][data-hz-tone="day"] .subnav-btn[aria-selected="true"] { color: #FFF8F1; text-shadow: 0 1px 1px rgba(60, 26, 8, .45); }
[data-skin="horizon"][data-hz-tone="day"] #tab-codes::before, [data-skin="horizon"][data-hz-tone="day"] #tab-guide::before { background: rgba(105, 80, 72, .2); }
[data-skin="horizon"][data-hz-tone="day"] .subnav .hz-tab-ind { border-color: rgba(122, 69, 39, .55);
  background:
    radial-gradient(ellipse 30% 24% at 50% 0%, rgba(255, 226, 186, .3), transparent 100%),
    radial-gradient(ellipse 28% 30% at 50% 100%, rgba(255, 214, 164, .22), transparent 100%),
    linear-gradient(180deg, #9C5F37 0%, #8E542D 50%, #86502D 100%);
  box-shadow: inset 0 1px 0 rgba(255, 236, 210, .45), inset 0 -1px 0 rgba(255, 210, 156, .35), 0 0 12px rgba(200, 120, 60, .25), 0 3px 8px rgba(60, 30, 15, .2); }
[data-skin="horizon"][data-hz-tone="day"] .subnav .hz-tab-ind::before { opacity: .55; box-shadow: 0 0 6px 1px rgba(255, 196, 128, .4); }
[data-skin="horizon"][data-hz-tone="day"] .subnav .hz-tab-ind::after { opacity: .6; box-shadow: 0 0 8px 2px rgba(255, 180, 106, .45); }
/* panels: the copper frames stay, quieter on linen */
[data-skin="horizon"][data-hz-tone="day"] .card::after, [data-skin="horizon"][data-hz-tone="day"] .dv-row::after,
[data-skin="horizon"][data-hz-tone="day"] .online-btn.btn.secondary::before, [data-skin="horizon"][data-hz-tone="day"] .btn.send::after { opacity: .55; }
[data-skin="horizon"][data-hz-tone="day"] .card { border-top-color: rgba(105, 80, 72, .22); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { [data-skin="horizon"][data-hz-tone="day"] .card { background: var(--hz-surface-solid); } }
/* left: clock + driver tiles */
[data-skin="horizon"][data-hz-tone="day"] .drivers-head::after { background: linear-gradient(90deg, rgba(148, 88, 47, 0) 0%, rgba(148, 88, 47, .25) 25%, rgba(148, 88, 47, .55) 50%, rgba(148, 88, 47, .25) 75%, rgba(148, 88, 47, 0) 100%); }
[data-skin="horizon"][data-hz-tone="day"] .clock-time, [data-skin="horizon"][data-hz-tone="day"] .dv-time, [data-skin="horizon"][data-hz-tone="day"] .dv-who { color: var(--hz-ink); }
[data-skin="horizon"][data-hz-tone="day"] .clock-date, [data-skin="horizon"][data-hz-tone="day"] .dv-note, [data-skin="horizon"][data-hz-tone="day"] .dv-ic { color: var(--hz-ink-2); }
[data-skin="horizon"][data-hz-tone="day"] .dv-chev { color: var(--hz-muted); }
[data-skin="horizon"][data-hz-tone="day"] .dv-row:has(.dv-main[aria-expanded="true"]) .dv-chev { color: var(--hz-accent); }
[data-skin="horizon"][data-hz-tone="day"] .dv-row:hover { border-color: rgba(148, 88, 47, .34); }
[data-skin="horizon"][data-hz-tone="day"] .dv-doc { color: #8C5130; border-color: rgba(148, 88, 47, .35); }
[data-skin="horizon"][data-hz-tone="day"] .dv-tag.here { background: #157A44; text-shadow: none; box-shadow: inset 0 0 0 1px rgba(10, 80, 40, .25), 0 0 8px rgba(23, 128, 74, .25); }
[data-skin="horizon"][data-hz-tone="day"] .dv-tag.start { background: #DDF2E5; color: #0F5A31; box-shadow: inset 0 0 0 1px rgba(15, 90, 49, .3); }
[data-skin="horizon"][data-hz-tone="day"] .dv-tag.back { box-shadow: inset 0 0 0 1px rgba(20, 70, 150, .25), 0 0 8px rgba(31, 98, 200, .2); }
/* centre: conversation */
[data-skin="horizon"][data-hz-tone="day"] .chat-head { background: linear-gradient(90deg, rgba(148, 88, 47, 0) 0%, rgba(148, 88, 47, .2) 18%, rgba(148, 88, 47, .45) 50%, rgba(148, 88, 47, .2) 82%, rgba(148, 88, 47, 0) 100%) bottom / 100% 1px no-repeat; }
[data-skin="horizon"][data-hz-tone="day"] .chat-head h1, [data-skin="horizon"][data-hz-tone="day"] .who .name,
[data-skin="horizon"][data-hz-tone="day"] .empty strong, [data-skin="horizon"][data-hz-tone="day"] .side-card h2 { color: var(--hz-ink); }
[data-skin="horizon"][data-hz-tone="day"] .chat-head p, [data-skin="horizon"][data-hz-tone="day"] .day,
[data-skin="horizon"][data-hz-tone="day"] .empty .muted, [data-skin="horizon"][data-hz-tone="day"] .composer-hint { color: var(--hz-ink-2); }
[data-skin="horizon"][data-hz-tone="day"] .older, [data-skin="horizon"][data-hz-tone="day"] .empty svg { color: var(--hz-muted); }
[data-skin="horizon"][data-hz-tone="day"] .day::before { background: linear-gradient(90deg, rgba(148, 88, 47, 0), rgba(148, 88, 47, .3)); }
[data-skin="horizon"][data-hz-tone="day"] .day::after { background: linear-gradient(90deg, rgba(148, 88, 47, .3), rgba(148, 88, 47, 0)); }
[data-skin="horizon"][data-hz-tone="day"] .unread-line { color: var(--hz-accent); }
[data-skin="horizon"][data-hz-tone="day"] .unread-line::before, [data-skin="horizon"][data-hz-tone="day"] .unread-line::after { background: rgba(148, 88, 47, .5); }
/* initials avatars: a quarter-black inset under the white letter keeps every hue >= 4.5:1 (photos are drawn above it) */
[data-skin="horizon"][data-hz-tone="day"] .av { box-shadow: inset 0 0 0 30px rgba(0, 0, 0, .25), 0 0 0 2px rgba(105, 80, 72, .14); }
[data-skin="horizon"][data-hz-tone="day"] .who .tag { background: var(--hz-surface-2); border-color: var(--hz-line); color: var(--hz-ink-2); }
[data-skin="horizon"][data-hz-tone="day"] .bubble { box-shadow: 0 1px 2px rgba(60, 40, 30, .06); }
[data-skin="horizon"][data-hz-tone="day"] .msg.system .bubble { background: #F4EBE3; color: var(--hz-ink); border-color: var(--hz-line-strong); }
[data-skin="horizon"][data-hz-tone="day"] .mention { background: rgba(148, 88, 47, .1); color: #7A4527; }
[data-skin="horizon"][data-hz-tone="day"] .actions, [data-skin="horizon"][data-hz-tone="day"] .jump:not(.has-new),
[data-skin="horizon"][data-hz-tone="day"] .mention-pop { background: var(--hz-surface-solid); border-color: var(--hz-line-strong); }
[data-skin="horizon"][data-hz-tone="day"] .jump:not(.has-new) { color: var(--hz-ink); }
[data-skin="horizon"][data-hz-tone="day"] .mention-opt[aria-selected="true"], [data-skin="horizon"][data-hz-tone="day"] .mention-opt:hover { background: rgba(148, 88, 47, .1); }
[data-skin="horizon"][data-hz-tone="day"] .react.mine { background: rgba(148, 88, 47, .1); border-color: rgba(148, 88, 47, .6); color: var(--hz-accent-hi); }
[data-skin="horizon"][data-hz-tone="day"] .msg.pending .file.doc .doc-size { color: var(--hz-ink-2); }   /* the sending bubble is at 75% opacity */
/* composer */
[data-skin="horizon"][data-hz-tone="day"] .composer textarea, [data-skin="horizon"][data-hz-tone="day"] .composer textarea:focus { color: var(--hz-ink); background: var(--hz-field-fill);
  box-shadow: inset 0 1px 2px rgba(60, 40, 30, .1); }
[data-skin="horizon"][data-hz-tone="day"] .composer textarea:focus { box-shadow: inset 0 1px 2px rgba(60, 40, 30, .1), 0 0 0 2px #94582F; }   /* solid copper ring: >= 3:1 on linen */
[data-skin="horizon"][data-hz-tone="day"] .composer textarea::placeholder { color: var(--hz-muted); }
[data-skin="horizon"][data-hz-tone="day"] .photo-btn { color: var(--hz-ink-2); border-color: var(--hz-tile-edge); background: var(--hz-tile-fill); box-shadow: var(--hz-tile-shadow); }
[data-skin="horizon"][data-hz-tone="day"] .photo-btn:hover { color: var(--hz-ink); border-color: rgba(148, 88, 47, .4); }
/* right: forecast, utility rows, how it works */
[data-skin="horizon"][data-hz-tone="day"] .wx-day, [data-skin="horizon"][data-hz-tone="day"] .wx-text { color: var(--hz-ink); }
[data-skin="horizon"][data-hz-tone="day"] .wx-temp .lo { color: #5C4943; }   /* holds 4.5:1 even under the account menu's shadow */
[data-skin="horizon"][data-hz-tone="day"] .weather-card .fine,
[data-skin="horizon"][data-hz-tone="day"] .wx-day .ic-cloud, [data-skin="horizon"][data-hz-tone="day"] .wx-day .ic-fog { color: var(--hz-muted); }
[data-skin="horizon"][data-hz-tone="day"] .wx-day.wet .wx-text { color: var(--hz-bad); }
[data-skin="horizon"][data-hz-tone="day"] .wx-day .ic-rain, [data-skin="horizon"][data-hz-tone="day"] .wx-day .ic-showers,
[data-skin="horizon"][data-hz-tone="day"] .wx-day .ic-storm { color: var(--hz-bad); }
[data-skin="horizon"][data-hz-tone="day"] .wx-day .ic-sun, [data-skin="horizon"][data-hz-tone="day"] .wx-day .ic-partly { color: #B87316; }
[data-skin="horizon"][data-hz-tone="day"] .howto, [data-skin="horizon"][data-hz-tone="day"] .howto strong,
[data-skin="horizon"][data-hz-tone="day"] .online-btn, [data-skin="horizon"][data-hz-tone="day"] .online-btn > svg { color: var(--hz-ink); }
[data-skin="horizon"][data-hz-tone="day"] .online-btn.btn.secondary:hover:not(:disabled) { border-color: rgba(148, 88, 47, .36); }
[data-skin="horizon"][data-hz-tone="day"] .online-btn.btn.secondary { border-top-color: rgba(105, 80, 72, .22); }
[data-skin="horizon"][data-hz-tone="day"] #online-btn::after { border-color: var(--hz-ink-2); }
[data-skin="horizon"][data-hz-tone="day"] .toggle input:focus-visible + .track { outline: 2px solid var(--hz-accent-hi); outline-offset: 2px; }
[data-skin="horizon"][data-hz-tone="day"] .hz-switch.hz-only { background: rgba(105, 80, 72, .55); box-shadow: inset 0 1px 2px rgba(40, 25, 20, .3), inset 0 0 0 1px rgba(105, 80, 72, .3); }
[data-skin="horizon"][data-hz-tone="day"] #side-notif-btn.on .hz-switch { background: var(--hz-copper-fill); box-shadow: inset 0 1px 2px rgba(60, 30, 15, .35), inset 0 0 0 1px var(--hz-copper-edge); }
/* other tabs */
[data-skin="horizon"][data-hz-tone="day"] .field input { box-shadow: inset 0 1px 2px rgba(60, 40, 30, .08); }
[data-skin="horizon"][data-hz-tone="day"] .field input::placeholder { color: var(--hz-muted); }
[data-skin="horizon"][data-hz-tone="day"] .field input:focus { border-color: #94582F; box-shadow: inset 0 1px 2px rgba(60, 40, 30, .08), 0 0 0 2px #94582F; }
[data-skin="horizon"][data-hz-tone="day"] .chip:hover { border-color: rgba(148, 88, 47, .4); }
[data-skin="horizon"][data-hz-tone="day"] .chip[aria-pressed="true"] { color: #FFF8F1; border-color: rgba(122, 69, 39, .5); }
[data-skin="horizon"][data-hz-tone="day"] .chip[aria-pressed="true"]:focus-visible { box-shadow: var(--hz-focus-ring), 0 3px 8px rgba(33, 15, 8, .2); }   /* the pressed shadow would otherwise hide the ring */
[data-skin="horizon"][data-hz-tone="day"] .runs tbody tr:hover { background: rgba(105, 80, 72, .05); }
[data-skin="horizon"][data-hz-tone="day"] .runs a { color: var(--hz-accent); }
[data-skin="horizon"][data-hz-tone="day"] .runs a.dv-doc { color: #844B2C; }   /* holds 4.5:1 under the link and row hover tints too */
[data-skin="horizon"][data-hz-tone="day"] #history-body .runs a.dv-doc:focus-visible { box-shadow: inset 0 0 0 2px #94582F; }   /* inset: the table scroller clips an outer ring */
[data-skin="horizon"][data-hz-tone="day"] section.page .fine { color: var(--hz-ink-2); }   /* muted would drop below 4.5:1 where the sunrise glow darkens the page foot */
[data-skin="horizon"][data-hz-tone="day"] .st.preloaded { background: #FBE9D6; color: #7A3E10; box-shadow: inset 0 0 0 1px rgba(122, 62, 16, .3); }
[data-skin="horizon"][data-hz-tone="day"] .st.preparing { background: #DDF2E5; color: #0F5A31; box-shadow: inset 0 0 0 1px rgba(15, 90, 49, .3); }
[data-skin="horizon"][data-hz-tone="day"] .ev-code.on { box-shadow: inset 0 0 0 1px rgba(148, 88, 47, .6); }
/* overlays */
[data-skin="horizon"][data-hz-tone="day"] .dialog, [data-skin="horizon"][data-hz-tone="day"] .drawer { background: var(--hz-surface-solid);
  box-shadow: inset 0 1px 0 #FFFFFF, var(--hz-shadow-3); }
[data-skin="horizon"][data-hz-tone="day"] .dialog::backdrop, [data-skin="horizon"][data-hz-tone="day"] .drawer::backdrop { background: rgba(60, 40, 30, .32); }

/* ---- chat text size (Graeme 4/11/2026: "in all chats the font is too small ... in the chat area") ----
   every store chat, both tones: messages and everything around them one step bigger, read like the side panels */
[data-skin="horizon"] .bubble { font-size: 19.5px; line-height: 1.45; padding: 10px 17px; }
[data-skin="horizon"] .msg.system .bubble { font-size: 18px; }
[data-skin="horizon"] .who .name { font-size: 17.5px; }
[data-skin="horizon"] .who time, [data-skin="horizon"] .meta time, [data-skin="horizon"] .meta { font-size: 15px; }
[data-skin="horizon"] .who .tag, [data-skin="horizon"] .tag-priority { font-size: 13.5px; }
[data-skin="horizon"] .quote, [data-skin="horizon"] .reply-chip-text { font-size: 16px; }
[data-skin="horizon"] .bubble .edited { font-size: 14px; }
[data-skin="horizon"] .bubble .translated { font-size: 15.5px; }
[data-skin="horizon"] .file, [data-skin="horizon"] a.file.doc, [data-skin="horizon"] span.file.doc { font-size: 16px; }
[data-skin="horizon"] .photo-thumb.doc .doc-name { font-size: 15px; }
[data-skin="horizon"] .photo-thumb.doc .doc-size { font-size: 14px; }
[data-skin="horizon"] .react { height: 34px; font-size: 16px; }
[data-skin="horizon"] .react-e { font-size: 18px; }
[data-skin="horizon"] .older { font-size: 17px; }
[data-skin="horizon"] .day { font-size: 17px; }
[data-skin="horizon"] .composer-hint { font-size: 16px; }
[data-skin="horizon"] .mention-pop .mp-head { font-size: 13.5px; }
[data-skin="horizon"] .mention-opt .mo-name { font-size: 17px; }
[data-skin="horizon"] .mention-opt .mo-sub { font-size: 14.5px; }
[data-skin="horizon"] .mention-pop .mp-empty { font-size: 16px; }