/* ============================================================
   STACKERFOX - the three layer panels
   Drawn as the software itself: a browser with tabs and an Android in
   front of it, a desktop with a menu bar and a dock, a full dashboard.
   Apps wear the system font on neutral greys, the way real ones do; the
   coat still reaches in as every app's accent and as the wallpaper.
   Behaviour is js/widgets.js. The other takes live in widget-lab.html.
   ============================================================ */

/* ---------------- the kit ---------------- */

/* The widget is the measuring stick. Everything inside a system widget is
   set in em off one font-size keyed to the widget's width, so a window
   scales like a picture from a phone card to a tablet one, and never
   drops under a size you can read. */
.widget.is-sys { container: widget / inline-size; }
.widget.is-sys .widget-body { display: block; min-height: 0; }
/* the tour's rubber stamp (styles/sections.css) was drawn for a dark, flat
   card. On a system widget it may land on a white window, a phone or a
   pointer, so it gets a plate behind it and sits above all of them. */
.widget.is-sys > .stamp, .widget.is-sys > .stamp.on-dark {
  z-index: 30;
  background: rgb(255 255 255 / 0.94);
  box-shadow: 0 0.5em 1.2em -0.4em rgb(0 0 0 / 0.45);
  color: var(--signal-deep);
}

.sys {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  font-size: clamp(9px, 2.05cqw, 16px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  text-align: left;
}
.sys p, .sys ul, .sys ol, .sys h4, .sys h5, .sys figure { margin: 0; }
.sys em, .sys i { font-style: normal; }

.ico {
  width: 1.15em; height: 1.15em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- window ---- */
.win {
  position: relative;
  min-width: 0; min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: var(--w-bg);
  color: var(--w-fg);
  border-radius: 1em;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--w-line), 0 1.6em 2.8em -1.5em rgb(0 0 0 / 0.65);
}
/* preview / live, flipped by the widget's own synthetic-live toggle */
.win-chip {
  flex: none;
  padding: 0.22em 0.7em;
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 0.8em;
  letter-spacing: 0.05em;
  background: var(--w-fill);
  color: var(--w-soft);
  transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.win-chip::before { content: attr(data-off); }
.is-live .win-chip { background: var(--w-ok-fill); color: var(--w-ok); }
.is-live .win-chip::before { content: attr(data-on); }

/* a finger on the glass */
.tap {
  position: absolute;
  z-index: 4;
  left: 0; top: 0;
  width: 2.4em; height: 2.4em;
  margin: -1.2em 0 0 -1.2em;
  border-radius: 50%;
  background: var(--w-fg);
  opacity: 0;
  pointer-events: none;
}
.tap.is-on { animation: sys-tap 0.6s var(--ease-out); }
@keyframes sys-tap {
  0% { opacity: 0.32; transform: scale(0.3); }
  100% { opacity: 0; transform: scale(1.25); }
}

/* a mouse on the desk */
.ptr {
  position: absolute;
  z-index: 6;
  left: 0; top: 0;
  width: 1.5em; height: 1.5em;
  pointer-events: none;
  transition: transform calc(0.75s / var(--pace, 1)) var(--ease-inout), opacity 0.3s;
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.4));
}
.ptr svg { display: block; width: 100%; height: 100%; }
.ptr.is-down svg { transform: scale(0.82); transform-origin: 20% 15%; }

/* a value that just changed */
.is-flash { animation: sys-flash 1.1s var(--ease-out); border-radius: 0.3em; }
@keyframes sys-flash {
  0% { background: var(--w-accent-soft); box-shadow: 0 0 0 0.25em var(--w-accent-soft); }
  100% { background: transparent; box-shadow: 0 0 0 0.25em transparent; }
}

@keyframes sys-row-in {
  0% { opacity: 0; max-height: 0; padding-block: 0; transform: translateY(-0.6em); }
  100% { opacity: 1; max-height: 5em; transform: none; }
}

/* On a phone the card is a little taller than its usual shape (sections.css),
   so a whole window fits at a size you can read. */
@media (max-width: 640px) {
  .widget.is-sys { aspect-ratio: 0.92; }
}

/* a made-up business: its mark and its button */
.site-logo { display: flex; align-items: center; gap: 0.45em; font-weight: 800; letter-spacing: -0.01em; }
.site-logo::before { content: ""; width: 1.05em; height: 1.05em; border-radius: 0.34em; background: var(--w-accent); }
.site-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.5em 1.1em;
  border-radius: 100px;
  background: var(--w-accent);
  color: var(--w-on-accent);
  font-size: 0.9em;
  font-weight: 700;
  white-space: nowrap;
}

@keyframes sys-blink { 50% { opacity: 0.25; } }

/* ---------------- the real skin ---------------- */

.sys[data-tone="real-light"] {
  --w-bg: #ffffff;
  --w-fg: #1d1d1f;
  --w-soft: #6a6a70;
  --w-faint: #b2b2b9;
  --w-line: rgb(0 0 0 / 0.1);
  --w-fill: #f4f4f6;
  --w-bar: #e9e9ec;
  --w-accent: var(--signal);
  --w-accent-soft: rgb(var(--signal-rgb) / 0.12);
  --w-on-accent: #fff;
  --w-accent-text: var(--signal-deep);
  --w-mark: var(--signal);
  --w-mark-dim: #d6d6dc;
  --w-ok: #15803d;
  --w-ok-fill: #e6f5eb;
  --w-warn: #b45309;
  --w-warn-fill: #fcefdb;
  --c-strip: #dcdee3;
  --c-omni: #eff0f3;
}
.sys[data-tone="real-dark"] {
  --w-bg: #1f1f22;
  --w-fg: #f5f5f7;
  --w-soft: #a3a3aa;
  --w-faint: #64646b;
  --w-line: rgb(255 255 255 / 0.11);
  --w-fill: #2a2a2e;
  --w-bar: #313135;
  --w-accent: var(--signal-lift);
  --w-accent-soft: rgb(var(--signal-rgb) / 0.24);
  --w-on-accent: #141416;
  --w-accent-text: var(--signal-lift);
  --w-mark: var(--signal-lift);
  --w-mark-dim: #4a4a51;
  --w-ok: #4ade80;
  --w-ok-fill: rgb(74 222 128 / 0.15);
  --w-warn: #fbbf24;
  --w-warn-fill: rgb(251 191 36 / 0.15);
  --c-strip: #18181a;
  --c-omni: #18181a;
}
.sys[data-tone^="real"] {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
}
.sys[data-tone^="real"] b, .sys[data-tone^="real"] h4, .sys[data-tone^="real"] h5 { font-weight: 600; }

/* real lights, real shadow; a window that is not in front goes grey */
.sys[data-tone^="real"] .win {
  border-radius: 0.8em;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.22), 0 2.2em 4em -1.4em rgb(0 0 0 / 0.6), 0 0.7em 1.4em -0.7em rgb(0 0 0 / 0.4);
}
.sys[data-tone^="real"] .win-bar { background: var(--w-bar); }
.sys[data-tone^="real"] .win-dots i { opacity: 1; }
.sys[data-tone^="real"] .win-dots i:nth-child(1) { background: #ff5f57; }
.sys[data-tone^="real"] .win-dots i:nth-child(2) { background: #febc2e; }
.sys[data-tone^="real"] .win-dots i:nth-child(3) { background: #28c840; }
.desk .win:not(.is-front) .win-dots i { background: var(--w-faint); }

.mac-bar {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 2.3em;
  padding: 0.45em 0.8em;
  background: var(--w-bar);
  border-bottom: 1px solid var(--w-line);
  font-size: 0.84em;
}
.mac-bar > b { position: absolute; left: 50%; max-width: 70%; overflow: hidden; color: var(--w-fg); white-space: nowrap; text-overflow: ellipsis; transform: translateX(-50%); }
.desk .win:not(.is-front) .mac-bar > b { color: var(--w-soft); }

/* ---- a browser, tabs and all ---- */
.browser { grid-template-rows: auto auto minmax(0, 1fr); }
.tabs { display: flex; align-items: flex-end; gap: 0.15em; min-width: 0; padding: 0.45em 0.7em 0; background: var(--c-strip); }
.tabs .win-dots { align-self: center; margin: 0 0.8em 0.4em 0.15em; }
.tab {
  display: flex;
  align-items: center;
  gap: 0.45em;
  min-width: 0;
  max-width: 13em;
  padding: 0.42em 0.7em 0.5em;
  border-radius: 0.6em 0.6em 0 0;
  font-size: 0.8em;
  color: var(--w-soft);
  white-space: nowrap;
}
.tab.is-on { background: var(--w-bg); color: var(--w-fg); }
.tab > span { overflow: hidden; text-overflow: ellipsis; }
.tab > em { margin-left: 0.5em; opacity: 0.55; }
.fav { width: 1em; height: 1em; flex: none; border-radius: 0.28em; background: var(--w-accent); }
.fav.is-grey { background: var(--w-faint); }
.tab-new { align-self: center; padding: 0 0.6em 0.35em; color: var(--w-soft); font-weight: 400 !important; }
.tools { display: flex; align-items: center; gap: 0.6em; padding: 0.4em 0.8em; border-bottom: 1px solid var(--w-line); background: var(--w-bg); color: var(--w-soft); }
.tools > .ico { width: 1.1em; height: 1.1em; }
.omni {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.34em 0.9em;
  border-radius: 100px;
  background: var(--c-omni);
  overflow: hidden;
  font-size: 0.82em;
  color: var(--w-fg);
  white-space: nowrap;
}
.omni .ico { width: 0.95em; height: 0.95em; color: var(--w-soft); }
.omni span { color: var(--w-soft); }
.avatar { width: 1.55em; height: 1.55em; flex: none; border-radius: 50%; background: linear-gradient(135deg, var(--signal-lift), var(--signal-deep)); }
.page { position: relative; min-height: 0; overflow: hidden; background: var(--w-bg); }

/* a pointing hand, for links and buttons */
.ptr.is-hand svg:first-child { display: none; }
.ptr svg + svg { display: none; }
.ptr.is-hand svg + svg { display: block; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.12em 0.6em;
  border-radius: 100px;
  background: var(--w-fill);
  font-size: 0.78em;
  font-weight: 500;
  color: var(--w-soft);
  white-space: nowrap;
}
.badge::before { content: ""; width: 0.45em; height: 0.45em; border-radius: 50%; background: currentColor; }
.badge.is-ok { background: var(--w-ok-fill); color: var(--w-ok); }
.badge.is-warn { background: var(--w-warn-fill); color: var(--w-warn); }
.badge.is-accent { background: var(--w-accent-soft); color: var(--w-accent-text); }

/* ---- a desktop: wallpaper in the coat, menu bar, dock, banners ---- */
.sys.desk {
  grid-template-rows: auto minmax(0, 1fr);
  border-radius: 0.9em;
  overflow: hidden;
  background:
    radial-gradient(110% 85% at 12% 0%, var(--signal-lift) 0%, transparent 58%),
    radial-gradient(90% 90% at 100% 100%, var(--signal) 0%, transparent 52%),
    linear-gradient(160deg, var(--signal-deep), var(--cloud-a));
  box-shadow: 0 0 0 0.26em #0b0b0c, 0 0 0 calc(0.26em + 1px) rgb(255 255 255 / 0.16);
}
.desk-bar {
  position: relative;
  z-index: 7;
  display: flex;
  align-items: center;
  gap: 1.15em;
  padding: 0.32em 0.9em;
  background: rgb(0 0 0 / 0.2);
  backdrop-filter: blur(12px);
  font-size: 0.78em;
  color: #fff;
  white-space: nowrap;
}
.desk-bar > i:first-child { width: 0.95em; height: 0.95em; border-radius: 0.3em; background: #fff; }
.desk-bar span { opacity: 0.92; }
.desk-bar .desk-r { display: flex; align-items: center; gap: 0.8em; margin-left: auto; }
.desk-bar .ico { width: 1.15em; height: 1.15em; }
.desk-area { position: relative; min-height: 0; }
.desk .win { position: absolute; z-index: 1; transition: box-shadow var(--dur-2) var(--ease-out), transform var(--dur-3) var(--ease-out), opacity var(--dur-2) var(--ease-out); }
.desk .win.is-front { z-index: 3; }
/* where each window sits on the desk */
.w-mail { left: 2%; top: 4%; width: 57%; height: 54%; }
.w-sheet { left: 7%; top: 49%; width: 60%; height: 38%; }
.w-cal { right: 2%; top: 9%; width: 39%; height: 74%; }
/* a phone-sized desk gives each window most of the screen and lets them overlap */
@container widget (max-width: 420px) {
  .w-mail { width: 84%; height: 50%; }
  .w-sheet { left: 3%; top: 45%; width: 88%; height: 41%; }
  .w-cal { top: 7%; width: 58%; height: 74%; }
}
.desk .win:not(.is-front) { box-shadow: 0 0 0 1px rgb(0 0 0 / 0.2), 0 1em 2em -1em rgb(0 0 0 / 0.45); }
.desk-dock {
  position: absolute;
  z-index: 5;
  left: 50%; bottom: 0.45em;
  display: flex;
  gap: 0.42em;
  padding: 0.36em 0.45em;
  border-radius: 1.05em;
  background: rgb(255 255 255 / 0.2);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.22), 0 0.8em 1.6em -0.8em rgb(0 0 0 / 0.5);
  backdrop-filter: blur(14px);
  transform: translateX(-50%);
}
.dock-i {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.15em; height: 2.15em;
  border-radius: 0.58em;
  background: linear-gradient(180deg, #fdfdfd, #d9d9de);
  color: #3a3a40;
  box-shadow: 0 0.15em 0.4em rgb(0 0 0 / 0.3);
}
.dock-i .ico { width: 1.25em; height: 1.25em; }
.dock-i.is-mail { background: linear-gradient(180deg, #5ab2ff, #1a6ef5); color: #fff; }
.dock-i.is-sheet { background: linear-gradient(180deg, #4cd37a, #159947); color: #fff; }
.dock-i.is-pay { background: linear-gradient(180deg, #8b7bff, #5b3fe0); color: #fff; }
.dock-i.is-dash { background: linear-gradient(180deg, #46464c, #1d1d20); color: #fff; }
.dock-i.is-cal { background: linear-gradient(180deg, #fff 0 32%, #fff 32%); color: #e0382f; }
.dock-i.is-cal::before { content: ""; position: absolute; inset: 0 0 auto; height: 30%; border-radius: 0.58em 0.58em 0 0; background: #e0382f; }
.dock-i.is-open::after { content: ""; position: absolute; bottom: -0.3em; width: 0.26em; height: 0.26em; border-radius: 50%; background: rgb(255 255 255 / 0.9); }
.dock-i.is-bounce { animation: dock-bounce 0.9s var(--ease-out); }
@keyframes dock-bounce { 0%, 100% { transform: none; } 25% { transform: translateY(-0.9em); } 50% { transform: none; } 70% { transform: translateY(-0.4em); } }

.desk-note {
  position: absolute;
  z-index: 8;
  top: 0.6em; right: 0.6em;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0 0.65em;
  align-items: center;
  width: 19em;
  max-width: 62%;
  padding: 0.6em 0.75em;
  border-radius: 1em;
  background: rgb(248 248 250 / 0.9);
  box-shadow: 0 1em 2.2em -0.8em rgb(0 0 0 / 0.55), 0 0 0 1px rgb(0 0 0 / 0.08);
  backdrop-filter: blur(16px);
  font-size: 0.82em;
  line-height: 1.25;
  color: #1d1d1f;
  transform: translateX(125%);
  transition: transform 0.65s var(--ease-back);
}
.desk-note.is-in { transform: none; }
.desk-note .dock-i { grid-row: span 2; width: 2.3em; height: 2.3em; box-shadow: none; }
.desk-note span { grid-column: 2; color: #55555b; }
.desk-note time { grid-row: 1; grid-column: 3; align-self: start; font-size: 0.86em; color: #8a8a90; }

/* ---- an android, as it comes ---- */
.droid {
  position: relative;
  height: 100%;
  min-height: 0;
  aspect-ratio: 9 / 19.4;
  padding: 0.3em;
  border-radius: 1.9em;
  background: linear-gradient(145deg, #2a2a2d, #0d0d0e);
  box-shadow: 0 0 0 1px #000, 0 1.8em 3em -1.3em rgb(0 0 0 / 0.85);
}
.droid::after { content: ""; position: absolute; right: -0.13em; top: 24%; width: 0.13em; height: 8%; border-radius: 0.1em; background: #333; box-shadow: 0 3.2em 0 #333; }
.droid-screen { position: relative; height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; border-radius: 1.65em; overflow: hidden; background: var(--w-bg); color: var(--w-fg); }
.punch { position: absolute; z-index: 9; top: 0.55em; left: 50%; width: 0.72em; height: 0.72em; border-radius: 50%; background: #000; transform: translateX(-50%); }
.droid-status { display: flex; align-items: center; justify-content: space-between; padding: 0.6em 1.1em 0.4em; font-size: 0.72em; font-weight: 500; }
.droid-status > span { display: flex; align-items: center; gap: 0.3em; }
.droid-status .ico { width: 1.2em; height: 1.2em; }
.gesture { justify-self: center; width: 28%; height: 0.26em; margin: 0.4em 0 0.5em; border-radius: 1em; background: currentColor; opacity: 0.6; }


/* the app's tab bar, the material way: a pill behind the live tab */
.app-tabs { display: flex; justify-content: space-around; padding: 0.5em 0 0.2em; background: var(--w-fill); font-size: 0.6em; color: var(--w-soft); }
.app-tabs span { display: grid; justify-items: center; gap: 0.2em; }
.app-tabs .ico { width: 1.9em; height: 1.9em; }
.app-tabs span.is-on { color: var(--w-accent-text); font-weight: 600; }
.app-tabs span.is-on .ico { box-sizing: border-box; width: 3.7em; padding: 0.2em 0.9em; border-radius: 100px; background: var(--w-accent-soft); }

/* a notification, dropping in under the camera */
.push {
  position: absolute;
  z-index: 8;
  top: 2em; left: 0.45em; right: 0.45em;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 0.5em;
  align-items: center;
  padding: 0.55em 0.65em;
  border-radius: 1.2em;
  background: rgb(245 245 247 / 0.94);
  box-shadow: 0 0.8em 1.6em -0.6em rgb(0 0 0 / 0.5);
  font-size: 0.7em;
  line-height: 1.25;
  color: #1d1d1f;
  transform: translateY(-220%);
  transition: transform 0.6s var(--ease-back);
}
.push.is-in { transform: none; }
.push .fav { grid-row: span 2; width: 2.2em; height: 2.2em; border-radius: 0.55em; }
.push span { color: #4a4a50; }
.droid .push { border-radius: 1.6em; background: #2b2b30; color: #f1f1f4; }
.droid .push span { color: #b9b9c0; }


/* a form field; the caret follows the text while it has focus */
.field {
  display: flex;
  align-items: center;
  min-height: 2.3em;
  padding: 0.35em 0.65em;
  border-radius: 0.5em;
  box-shadow: inset 0 0 0 1px var(--w-line), 0 1px 1px rgb(0 0 0 / 0.04);
  background: var(--w-bg);
  font-size: 1.12em;
  color: var(--w-fg);
  white-space: nowrap;
  overflow: hidden;
  transition: box-shadow var(--dur-1) var(--ease-out);
}
.field.is-focus { box-shadow: inset 0 0 0 1.5px var(--w-accent), 0 0 0 0.22em var(--w-accent-soft); }
.field.is-focus > span:first-child::after { content: ""; display: inline-block; width: 1.5px; height: 1.1em; margin-left: 1px; vertical-align: -0.18em; background: var(--w-fg); animation: sys-blink 1s steps(1) infinite; }
.field .ico { margin-left: auto; color: var(--w-soft); }
/* the green tick a finished form ends on */
.tick-o { display: grid; place-items: center; width: 3em; height: 3em; margin-bottom: 0.3em; border-radius: 50%; background: var(--w-ok-fill); color: var(--w-ok); transform: scale(0); transition: transform 0.55s var(--ease-back) 0.15s; }
.tick-o .ico { width: 1.6em; height: 1.6em; stroke-width: 2; }
.is-in > .tick-o, .is-done .tick-o { transform: none; }

/* ---------------- a website at the back, a phone in front ---------------- */

.sys.pair > .win { position: absolute; left: 0; top: 0; width: 84%; height: 88%; }
.sys.pair > .droid { position: absolute; z-index: 3; right: 0; bottom: 0; height: 100%; }
@container widget (max-width: 420px) {
  .sys.pair > .win { height: 84%; }
  .sys.pair > .droid { height: 84%; }
}

/* a page longer than its window: the head stays, the rest scrolls */
.web { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.web-head { position: relative; z-index: 2; display: flex; align-items: center; gap: 1.2em; padding: 0.65em 19% 0.65em 1.1em; border-bottom: 1px solid var(--w-line); background: var(--w-bg); font-size: 0.84em; color: var(--w-soft); white-space: nowrap; }
.web-head .site-logo { margin-right: auto; font-family: var(--font-display); font-size: 1.12em; color: var(--w-fg); }
.web-head em { padding: 0.32em 0.9em; border-radius: 100px; background: var(--w-fg); color: var(--w-bg); font-weight: 600; }
.web-view { position: relative; min-height: 0; overflow: hidden; }
/* the phone stands over the page's right edge, so the page keeps clear of it */
.scroll { padding-right: 17%; transition: transform 1.3s var(--ease-inout); }
.web-hero { display: grid; gap: 0.5em; justify-items: start; padding: 1.1em 1.1em 0.9em; }
.web-hero h4 { font-family: var(--font-display); font-size: 2em; font-weight: 700 !important; line-height: 0.95; letter-spacing: -0.035em; }
.web-hero p { max-width: 32ch; font-size: 0.95em; color: var(--w-soft); }
.web-kick { font-size: 0.72em !important; letter-spacing: 0.08em; text-transform: uppercase; color: var(--w-accent-text) !important; }
.web-btns { display: flex; gap: 0.45em; margin-top: 0.2em; }
.web-btns .site-btn + b { padding: 0.5em 1.1em; border-radius: 100px; box-shadow: inset 0 0 0 1px var(--w-line); font-size: 0.9em; }
.web-sec { padding: 0.3em 1.1em 1.2em; }
.web-sec > h5 { margin-bottom: 0.5em; font-family: var(--font-display); font-size: 1.3em; font-weight: 700 !important; letter-spacing: -0.02em; }
@container widget (max-width: 420px) {
  .scroll { padding-right: 30%; }
  .web-head { padding-right: 32%; }
  .web-head span { display: none; }
  .web-hero h4 { font-size: 1.6em; }
}

/* a native app: title, body, tab bar */
.nat { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; }
.nat-top { display: flex; align-items: center; justify-content: space-between; padding: 0.3em 0.85em 0.5em; }
.nat-top p { font-size: 0.7em; color: var(--w-soft); }
.nat-top h5 { font-size: 1.2em; font-weight: 700 !important; letter-spacing: -0.02em; line-height: 1.1; }
.nat-body { display: grid; gap: 0.55em; align-content: start; min-height: 0; padding: 0 0.8em; overflow: hidden; }
.nat-h { font-size: 0.68em; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--w-soft); }
.nat-btn { padding: 0.55em; border-radius: 100px; background: var(--w-accent); color: var(--w-on-accent); font-size: 0.78em; font-weight: 600; text-align: center; }
.droid .nat-btn { border-radius: 0.7em; }

/* ============================================================
   1H - the website takes the booking, the app runs the job
   ============================================================ */

.bookbar { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45em; margin: 0 1.1em; padding: 0.7em; border-radius: 0.9em; background: var(--w-bg); box-shadow: 0 0 0 1px var(--w-line), 0 1.2em 2em -1.3em rgb(0 0 0 / 0.4); }
.bookbar label { display: grid; gap: 0.2em; font-size: 0.74em; color: var(--w-soft); }
.bookbar .field { min-height: 2.1em; font-size: 1.15em; }
.bookbar .when { grid-column: 1 / -1; display: flex; align-items: center; gap: 0.35em; font-size: 0.78em; }
.bookbar .when em { padding: 0.35em 0.8em; border-radius: 100px; box-shadow: inset 0 0 0 1px var(--w-line); white-space: nowrap; transition: background-color var(--dur-1), color var(--dur-1); }
.bookbar .when em.is-picked { background: var(--w-fg); color: var(--w-bg); box-shadow: none; }
.bookbar .when .site-btn { margin-left: auto; font-size: 1em; }
.book-ok { position: absolute; inset: 0; display: grid; gap: 0.15em; place-content: center; justify-items: center; border-radius: inherit; background: var(--w-bg); text-align: center; opacity: 0; pointer-events: none; transition: opacity var(--dur-3) var(--ease-out); }
.book-ok.is-in { opacity: 1; }
.book-ok span { font-size: 0.86em; color: var(--w-soft); }
.book-ok .tick-o { width: 2.2em; height: 2.2em; margin: 0; }
.trust { display: flex; gap: 1.3em; padding: 0.9em 1.1em; font-size: 0.8em; color: var(--w-soft); white-space: nowrap; }
.trust b { color: var(--w-fg); }

.jobs-list { display: grid; gap: 0.4em; align-content: start; }
.jcard { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0 0.55em; align-items: center; padding: 0.5em 0.6em; border-radius: 0.9em; background: var(--w-fill); font-size: 0.72em; line-height: 1.25; overflow: hidden; }
.jcard time { grid-row: span 2; width: 2.9em; font-size: 1.05em; font-weight: 700; }
.jcard b { grid-column: 2 / span 2; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.jcard span { grid-column: 2; overflow: hidden; font-size: 0.92em; color: var(--w-soft); white-space: nowrap; text-overflow: ellipsis; }
.jcard .badge { grid-row: 2; grid-column: 3; font-size: 0.8em; padding: 0 0.5em; }
.jcard.is-now { background: var(--w-bg); box-shadow: 0 0 0 1px var(--w-line), 0 0.6em 1em -0.7em rgb(0 0 0 / 0.35); }
.jcard.is-new { background: var(--w-accent-soft); box-shadow: inset 0 0 0 1.5px var(--w-accent); animation: sys-row-in 0.55s var(--ease-out) both; }
.pane2 { display: flex; width: 200%; min-height: 0; transition: transform 0.55s var(--ease-inout); }
.pane2 > section { display: grid; gap: 0.45em; align-content: start; width: 50%; min-height: 0; padding: 0 0.75em; overflow: hidden; }
.nat[data-screen="1"] .pane2 { transform: translateX(-50%); }
.job-h { display: flex; align-items: center; gap: 0.4em; font-size: 0.95em; font-weight: 600; }
.job-h .ico { width: 1.1em; height: 1.1em; }
.job-sub { font-size: 0.7em; color: var(--w-soft); }
.minimap { height: 4.4em; border-radius: 0.8em; overflow: hidden; }
.minimap svg { display: block; width: 100%; height: 100%; }
.checks { display: grid; }
.checks div { display: flex; align-items: center; gap: 0.5em; padding: 0.25em 0; font-size: 0.74em; }
.checks i { display: grid; place-items: center; width: 1.2em; height: 1.2em; flex: none; border-radius: 0.32em; box-shadow: inset 0 0 0 1.5px var(--w-faint); color: transparent; transition: background-color var(--dur-1); }
.checks i .ico { width: 80%; height: 80%; stroke-width: 2.4; }
.checks div.is-on i { background: var(--w-ok); box-shadow: none; color: #fff; }
.sign { position: relative; height: 3.4em; border-radius: 0.7em; box-shadow: inset 0 0 0 1px var(--w-line); }
.sign::before { content: "Customer signature"; position: absolute; left: 0.7em; top: 0.4em; font-size: 0.6em; color: var(--w-faint); }
.sign svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sign path { fill: none; stroke: var(--w-fg); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset calc(1.3s / var(--pace, 1)) ease-in-out; vector-effect: non-scaling-stroke; }
.sign.is-in path { stroke-dashoffset: 0; }
.nat-btn.is-done { background: var(--w-ok-fill); color: var(--w-ok); }
@container widget (max-width: 420px) {
  .minimap { display: none; }
}

/* ============================================================
   2F - the desktop: three apps, one enquiry, nobody retyping
   ============================================================ */

.mailx { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); min-height: 0; font-size: 0.8em; }
.mailx ul { margin: 0; padding: 0; overflow: hidden; border-right: 1px solid var(--w-line); list-style: none; }
.mailx li { display: grid; gap: 0.05em; padding: 0.5em 0.7em; border-bottom: 1px solid var(--w-line); white-space: nowrap; overflow: hidden; }
.mailx li span { overflow: hidden; color: var(--w-soft); text-overflow: ellipsis; }
.mailx li.is-new { animation: sys-row-in 0.5s var(--ease-out) both; background: var(--w-accent-soft); }
.mailx li.is-new b::before { content: ""; display: inline-block; width: 0.5em; height: 0.5em; margin-right: 0.4em; border-radius: 50%; background: var(--w-accent); }
.mail-body { display: grid; gap: 0.4em; align-content: start; min-height: 0; padding: 0.6em 0.8em; overflow: hidden; line-height: 1.4; }
.mail-body p:first-child { font-weight: 600; }
.mail-body mark { padding: 0 0.15em; border-radius: 0.25em; background: transparent; color: inherit; transition: background-color var(--dur-3) var(--ease-out); }
.mail-body.is-read mark { background: var(--w-accent-soft); box-shadow: inset 0 -1.5px 0 var(--w-accent); }
.mail-sent { display: inline-flex; align-items: center; gap: 0.35em; color: var(--w-ok); opacity: 0; transition: opacity var(--dur-3) var(--ease-out); }
.mail-sent.is-in { opacity: 1; }

.gridx { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; font-size: 0.76em; }
.fx { display: flex; align-items: center; gap: 0.6em; padding: 0.3em 0.7em; border-bottom: 1px solid var(--w-line); color: var(--w-soft); white-space: nowrap; overflow: hidden; }
.fx i { font-style: italic; font-family: Georgia, serif; }
.fx span { color: var(--w-fg); }
.cells { display: grid; grid-template-columns: 2em minmax(0, 1.3fr) minmax(0, 1.4fr) minmax(0, 0.9fr) minmax(0, 0.9fr); align-content: start; min-height: 0; overflow: hidden; }
.cells > * { min-width: 0; padding: 0.32em 0.5em; border-right: 1px solid var(--w-line); border-bottom: 1px solid var(--w-line); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cells > .is-h { background: var(--w-fill); color: var(--w-soft); text-align: center; font-size: 0.9em; }
.cells > .is-t { font-weight: 600; background: var(--w-fill); }
.cells > .is-sel { box-shadow: inset 0 0 0 1.5px #1a8f4a; }
.cells > .is-num { text-align: right; }

.calx { display: grid; grid-template-columns: 2.4em repeat(3, minmax(0, 1fr)); grid-template-rows: auto repeat(4, minmax(0, 1fr)); min-height: 0; font-size: 0.74em; }
.calx > * { border-right: 1px solid var(--w-line); border-bottom: 1px solid var(--w-line); }
.calx > .is-h { padding: 0.35em 0; color: var(--w-soft); text-align: center; }
.calx > .is-h b { display: block; font-size: 1.35em; color: var(--w-fg); }
.calx > .is-h.is-today b { color: var(--w-accent-text); }
.calx > .is-t { padding: 0.15em 0.35em 0 0; font-size: 0.82em; color: var(--w-soft); text-align: right; }
.calx > div { position: relative; min-height: 0; }
.ev { position: absolute; inset: 0.15em 0.2em; display: grid; align-content: start; padding: 0.25em 0.4em; border-radius: 0.35em; border-left: 0.2em solid var(--w-faint); background: var(--w-fill); overflow: hidden; font-size: 0.9em; line-height: 1.2; white-space: nowrap; }
.ev.is-new { border-left-color: var(--w-accent); background: var(--w-accent-soft); transform: scale(0); transform-origin: 0 0; transition: transform 0.5s var(--ease-back); }
.ev.is-new.is-in { transform: none; }
.ev span { color: var(--w-soft); }

@container widget (max-width: 420px) {
  .mailx { grid-template-columns: minmax(0, 1fr); }
  .mailx ul { display: none; }
}

/* ============================================================
   3D - the full dashboard: nav, date range, a chart you can scrub
   ============================================================ */

.ana { display: grid; grid-template-columns: 9.2em minmax(0, 1fr); min-height: 0; }
.ana-nav { display: grid; gap: 0.12em; align-content: start; padding: 0.7em 0.5em; border-right: 1px solid var(--w-line); background: var(--w-fill); font-size: 0.82em; }
.ana-nav .site-logo { padding: 0.2em 0.5em 0.7em; }
.ana-nav span { display: flex; align-items: center; gap: 0.55em; padding: 0.4em 0.55em; border-radius: 0.5em; color: var(--w-soft); white-space: nowrap; }
.ana-nav span.is-on { background: var(--w-bg); box-shadow: 0 0 0 1px var(--w-line); color: var(--w-fg); font-weight: 600; }
.ana-nav span em { margin-left: auto; padding: 0 0.45em; border-radius: 100px; background: var(--w-warn-fill); color: var(--w-warn); font-size: 0.82em; font-weight: 600; }
.ana-main { display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 0.7em; min-height: 0; padding: 0.7em 0.9em 0.8em; }
.ana-top { position: relative; display: flex; align-items: center; gap: 0.6em; }
.ana-top h5 { margin-right: auto; font-size: 1.2em; font-weight: 700; letter-spacing: -0.02em; }
.pill-btn { display: inline-flex; align-items: center; gap: 0.35em; padding: 0.3em 0.7em; border-radius: 0.5em; box-shadow: inset 0 0 0 1px var(--w-line), 0 1px 1px rgb(0 0 0 / 0.04); font-size: 0.8em; font-weight: 500; white-space: nowrap; }
.pill-btn .ico { width: 1em; height: 1em; color: var(--w-soft); }
.menu {
  position: absolute;
  z-index: 5;
  top: 115%; right: 4.4em;
  display: grid;
  min-width: 9.5em;
  padding: 0.3em;
  border-radius: 0.6em;
  background: var(--w-bg);
  box-shadow: 0 0 0 1px var(--w-line), 0 1em 2em -0.8em rgb(0 0 0 / 0.45);
  font-size: 0.8em;
  opacity: 0;
  transform: translateY(-0.4em) scale(0.97);
  transform-origin: 100% 0;
  pointer-events: none;
  transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.menu.is-in { opacity: 1; transform: none; }
.menu span { display: flex; justify-content: space-between; gap: 1em; padding: 0.4em 0.6em; border-radius: 0.4em; white-space: nowrap; }
.menu span.is-hover { background: var(--w-accent); color: var(--w-on-accent); }
.ana-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.55em; }
.ana-kpis div { display: grid; gap: 0.05em; min-width: 0; padding: 0.5em 0.65em; border-radius: 0.6em; box-shadow: inset 0 0 0 1px var(--w-line); }
.ana-kpis span { font-size: 0.74em; color: var(--w-soft); white-space: nowrap; }
.ana-kpis b { font-size: 1.45em; font-weight: 700 !important; letter-spacing: -0.025em; line-height: 1.1; white-space: nowrap; }
.ana-kpis em { display: inline-flex; align-items: center; gap: 0.25em; font-size: 0.7em; color: var(--w-ok); white-space: nowrap; }
.ana-kpis em.is-warn { color: var(--w-warn); }
.ana-kpis em .ico { width: 1em; height: 1em; }
.ana-body { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 0.7em; min-height: 0; }
.panel { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 0.4em; min-height: 0; padding: 0.6em 0.7em; border-radius: 0.6em; box-shadow: inset 0 0 0 1px var(--w-line); }
.panel-h { display: flex; align-items: center; gap: 0.8em; font-size: 0.78em; white-space: nowrap; }
.panel-h b { margin-right: auto; }
.key { display: inline-flex; align-items: center; gap: 0.35em; color: var(--w-soft); }
.key::before { content: ""; width: 0.9em; height: 2px; border-radius: 2px; background: var(--w-mark); }
.key.is-prev::before { background: var(--w-mark-dim); }
/* one axis, hairline grid, a 2px line over a 10% wash, last period a step quieter */
.trend { position: relative; min-height: 0; margin-left: 2.2em; border-bottom: 1px solid var(--w-line); }
.trend svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.trend .is-line { fill: none; stroke: var(--w-mark); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.trend .is-prev { fill: none; stroke: var(--w-mark-dim); stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.trend .is-area { fill: var(--w-mark); opacity: 0.1; }
.trend-tick { position: absolute; left: 0; right: 0; border-top: 1px solid var(--w-line); }
.trend-tick span { position: absolute; right: 100%; top: -0.7em; padding-right: 0.5em; font-size: 0.66em; color: var(--w-soft); }
.cross { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--w-faint); opacity: 0; transition: opacity var(--dur-1); }
.cross i { position: absolute; left: 50%; width: 0.75em; height: 0.75em; margin: -0.375em; border-radius: 50%; background: var(--w-mark); box-shadow: 0 0 0 2px var(--w-bg); }
.cross em {
  position: absolute;
  top: 0.2em; left: 0.6em;
  display: grid;
  padding: 0.35em 0.6em;
  border-radius: 0.5em;
  background: var(--w-fg);
  color: var(--w-bg);
  font-size: 0.7em;
  line-height: 1.3;
  white-space: nowrap;
}
.cross em small { font-size: 0.92em; opacity: 0.7; }
.cross.is-flip em { left: auto; right: 0.6em; }
.trend.is-scrub .cross { opacity: 1; }
.hbars { display: grid; gap: 0.5em; align-content: center; min-height: 0; font-size: 0.76em; }
.hbars div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.2em 0.5em; }
.hbars span { overflow: hidden; color: var(--w-soft); white-space: nowrap; text-overflow: ellipsis; }
.hbars i { grid-column: 1 / -1; height: 0.55em; border-radius: 0 4px 4px 0; background: var(--w-mark); width: calc(var(--v) * 100%); transition: width 0.8s var(--ease-out); }

@container widget (max-width: 420px) {
  .ana { grid-template-columns: minmax(0, 1fr); }
  .ana-nav { display: none; }
  .ana-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ana-kpis div:nth-child(n + 3) { display: none; }
  .ana-body { grid-template-columns: minmax(0, 1fr); }
  .ana-body .panel + .panel { display: none; }
  .ana-top .pill-btn + .pill-btn { display: none; }
  .menu { right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .sys *, .sys *::before, .sys *::after { animation: none !important; transition: none !important; }
}