/*
 * The How-to guide (/how-to and its six pages). Loaded after site.css, which holds the site's
 * chrome, the document layout and the widget, calendar, sheet and notification mocks the guide
 * reuses. Here: the guide's own navigation, its figures (a mock with numbered taps and a legend),
 * the clickable demos (assets/howto.js), and the mocks only the guide draws: a widget's action
 * row, the app's screens, and the calendar's Week and Month.
 */

.guide-page {
  --max: 1180px;
}

/* An icon from assets/guide-icons.svg. */
.ic {
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* A label as the app prints it. */
/* It wraps as the words around it do: kept whole, a long label broke its line early. */
.ui {
  font-weight: 600;
  color: var(--ink);
}
/* The article's running text is justified, with words hyphenated so the lines fill without wide
   gaps. Not what sits in a narrow column, where justified lines open up: a legend beside its mock,
   a caption, a table, a recipe, a demo's sentence, and anything inside a mock. Not on a phone,
   for the same reason. A label of the app's and a link are never broken across lines. */
@media (min-width: 641px) {
  .guide :is(p, li):not(:is(.fig, .demo, .flow, .recipes, .legend, table, .fig-stage, .app, .app-sheet) *) {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
  }
  .guide :is(.ui, a, strong) {
    hyphens: manual;
    -webkit-hyphens: manual;
  }
}
/* An icon named in a sentence, a list or a table sits on the middle of the letters beside it, not
   on their baseline, where its 18px rode high: its centre a third of an em over the baseline. */
.doc :is(p, li, td, th, figcaption) > .ic {
  vertical-align: calc(0.32em - 9px);
}
/* A badge is centred on the capitals of the text it follows: lifted from the baseline by what the
   text's size asks (its own letters are 9.5px, so the lift is per place, not in em). */
.guide .pro-badge,
.guide .free-badge,
.guide-page .section-head :is(.pro-badge, .free-badge) {
  display: inline-block;
  vertical-align: 2px;
  line-height: 1.5;
}
.guide h2 :is(.pro-badge, .free-badge) {
  vertical-align: 5px;
}
.guide h3 :is(.pro-badge, .free-badge) {
  vertical-align: 3px;
}

/* ── The guide's navigation ───────────────────────────────────────── */

.guide-hero {
  padding: 48px 0 20px;
}
.guide-hero h1 {
  font-size: clamp(34px, 5vw, 50px);
}
.guide-hero .lede {
  margin: 16px 0 0;
  max-width: 46em;
  text-wrap: balance;
}
.kicker a {
  color: inherit;
  text-decoration: none;
}
.kicker a:hover {
  color: var(--ink);
}

/* The six pages, on every page: a bordered bar as wide as the contents and the article under it,
   pinned under the header (its top edge on the header's own bottom line), on a phone too, where
   the page's own contents are not. Square: rounded, it read as a card adrift under the header. */
.guide-tabs {
  position: sticky;
  top: 64px;
  z-index: 4;
  margin: 0 0 28px;
  padding: 8px 10px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  background: rgba(22, 9, 42, 0.62);
  border: 1px solid var(--hairline);
}
.guide-tabs::-webkit-scrollbar {
  display: none;
}
.guide-tabs a {
  flex: none;
  padding: 6px 13px;
  border-radius: 9px;
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.05);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-muted);
  text-decoration: none;
}
.guide-tabs a:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.1);
}
.guide-tabs a[aria-current='page'] {
  color: var(--ground);
  background: #fff;
  border-color: #fff;
  font-weight: 700;
}
.guide-page .toc {
  top: 134px;
  max-height: calc(100vh - 152px);
  overflow-y: auto;
}
/* The section being read (assets/howto.js): the link's own hover look, kept. */
.guide-page .toc a {
  transition: color 0.15s ease, border-color 0.15s ease;
}
.guide-page .toc a[aria-current] {
  color: var(--ink);
  border-left-color: var(--accent);
}
.guide-page .doc h2,
.guide-page .doc h3 {
  scroll-margin-top: 138px;
}

.guide-next {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 44px;
}
.guide-next a {
  display: grid;
  gap: 2px;
  padding: 14px 18px;
  border-radius: var(--radius-card);
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.04);
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
}
.guide-next a:hover {
  background: rgba(255, 255, 255, 0.08);
}
.guide-next small {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-subtle);
}
.guide-next .next {
  grid-column: 2;
  text-align: right;
}

/* ── The hub ──────────────────────────────────────────────────────── */

.hub-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.hub-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  text-decoration: none;
  color: inherit;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.hub-card:hover {
  color: inherit;
  transform: translateY(-2px);
  border-color: rgba(199, 125, 255, 0.5);
}
.hub-card .step-label {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hub-card h2 {
  font-family: var(--display);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.02em;
}
.hub-card p {
  margin: 0;
  font-size: 15px;
  color: var(--ink-muted);
}
.hub-card ul {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 5px;
  font-size: 14px;
  color: var(--ink-body);
}
.hub-card li {
  position: relative;
  padding-left: 16px;
}
.hub-card li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.68em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-gradient);
}
.hub-card .go {
  margin-top: auto;
  padding-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
}
.hub-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--accent);
}
.hub-icon .ic {
  width: 21px;
  height: 21px;
}

/* How the app is laid out: two places, and what each leads to. */
.map {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.map-col {
  padding: 22px;
  border-radius: var(--radius-panel);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}
.map-col h3 {
  font-family: var(--display);
  font-weight: 800;
  font-size: 20px;
}
.map-col > p {
  margin: 6px 0 16px;
  font-size: 15px;
  color: var(--ink-muted);
}
.map-tree {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
/* A row's words are one run of text (as a flex row each piece around a bold label was an item of
   its own, a gap apart, and the row could not narrow to a phone): the icon and the link are
   pinned to its two ends, on its middle, and the text wraps between them. */
.map-tree li {
  position: relative;
  padding: 9px 76px 9px 40px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 14.5px;
  color: var(--ink-body);
}
.map-tree li.sub {
  margin-left: 26px;
}
.map-tree .ic {
  position: absolute;
  left: 12px;
  top: 50%;
  margin-top: -9px;
  color: var(--accent);
}
.map-tree a {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}

/* ── Figures: a mock, its numbered taps, the legend ───────────────── */

.fig {
  margin: 22px 0 26px;
}
.fig-stage {
  position: relative;
  display: grid;
  gap: 14px;
  justify-items: center;
  align-content: center;
  padding: 26px 22px;
  border-radius: 18px;
  /* The onboarding wallpaper, scrimmed, as the landing page's stages. */
  background:
    linear-gradient(180deg, rgba(20, 8, 38, 0.35), rgba(13, 5, 26, 0.6)),
    #1a1030 url('/assets/wallpaper.svg') center / cover no-repeat;
}
.fig-stage.plain {
  background: rgba(8, 2, 20, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.fig-stage.row {
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  align-items: start;
}
/* The mock beside its legend, where there is room. */
.fig.side {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 22px;
  align-items: center;
}
.fig.side figcaption {
  margin-top: 0;
}
/* Side by side only where the article has the room: beside the page's contents it is narrower
   than the window says, so the rule follows the article's own width (`@container guide`, with
   the other responsive rules at the end of the file, after everything it has to override). */
.guide {
  container: guide / inline-size;
}
.fig figcaption > :last-child {
  margin-bottom: 0;
}
.fig figcaption {
  margin-top: 12px;
  font-size: 14.5px;
  color: var(--ink-muted);
}
.fig-title {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-subtle);
}

/* A numbered tap. In a mock it sits on the corner of what is tapped (.has-pin); in a legend it
   is the item's number. */
.pin,
.legend > li::before {
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--amber);
  color: #2a1503;
  font-family: var(--body);
  font-size: 11px;
  font-weight: 800;
  font-style: normal;
  line-height: 1;
  letter-spacing: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.has-pin {
  position: relative;
}
.pin {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  transform: translate(40%, -40%);
  pointer-events: none;
}
.pin.in {
  transform: translate(-3px, 3px);
}
.pin.left {
  right: auto;
  left: 0;
  transform: translate(-40%, -40%);
}
.pin.mid {
  top: 50%;
  transform: translate(-6px, -50%);
}
/* Beside what is tapped, in the mock's own padding, where it covers no text. */
.pin.gutter {
  top: 50%;
  right: auto;
  left: -17px;
  width: 17px;
  height: 17px;
  transform: translateY(-50%);
}
.pin.gutter.r {
  left: auto;
  right: -17px;
}
/* In a widget or the calendar the gutter is the panel's own padding (16px, 12px on a phone),
   narrower than the pin: it touched the first letter of what it numbers and lost its edge to the
   panel's. The side that carries one is widened, and the pin stands a hair clear of both. */
:is(.agenda, .nu, .cal):has(> .has-pin > .pin.gutter:not(.r)) {
  padding-left: 24px;
}
:is(.agenda, .nu, .cal):has(> .has-pin > .pin.gutter.r) {
  padding-right: 24px;
}
:is(.agenda, .nu, .cal) > .has-pin > .pin.gutter:not(.r) {
  left: -21px;
}
:is(.agenda, .nu, .cal) > .has-pin > .pin.gutter.r {
  right: -21px;
}
/* A NextUp's list rows end at the panel's padding: a pin there keeps inside the panel's edge. */
.nu-rows .pin.gutter.r {
  right: -16px;
}
.pin.static {
  position: static;
  transform: none;
  flex: none;
}
.cal-switch .is-on {
  color: var(--ink);
  font-weight: 700;
  background: rgba(255, 255, 255, 0.16);
}
/* The switch as the app draws it: an icon a view (a single day, a run of days, the grid). */
.cal-switch .ic {
  display: block;
  width: 15px;
  height: 15px;
}
.cal-switch > span:has(.ic) {
  padding: 4px 7px;
}
.guide ol.legend {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  gap: 9px;
  counter-reset: pin;
}
.guide ol.legend > li {
  position: relative;
  margin: 0;
  padding-left: 30px;
  font-size: 14.5px;
  color: var(--ink-body);
  counter-increment: pin;
}
.legend > li::before {
  content: counter(pin);
  position: absolute;
  left: 0;
  top: 2px;
}
ol.legend[start='4'] {
  counter-reset: pin 3;
}

/* Steps in a row: what the first tap does, then the second. Stacked on a phone. */
.flow {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 30px;
  align-items: start;
  margin: 22px 0 26px;
}
.flow-step {
  position: relative;
  display: grid;
  gap: 10px;
}
.flow-step + .flow-step::before {
  content: '›';
  position: absolute;
  left: -22px;
  top: 76px;
  font-size: 26px;
  line-height: 1;
  color: var(--amber);
}
.flow-step .fig-stage {
  padding: 16px 12px;
}
.flow-step p {
  margin: 0;
  font-size: 14px;
  color: var(--ink-muted);
}
.flow-step p b {
  color: var(--ink);
}

/* "Set it up": a recipe, start to finish. */
.recipe {
  margin: 20px 0 24px;
  padding: 18px 20px;
  border-radius: 16px;
  border: 1px solid rgba(199, 125, 255, 0.35);
  background: rgba(199, 125, 255, 0.07);
}
.recipe h4 {
  margin: 0 0 8px;
  font-size: 15.5px;
  color: var(--ink);
}
.recipe h4::before {
  content: 'Set it up';
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.recipe ol,
.recipe ul,
.recipe p:last-child {
  margin-bottom: 0;
}
.recipes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 20px 0 24px;
}
.recipes .recipe {
  margin: 0;
}

/* A highlighted idea: the gradient edge of the landing page's CTA. */
.feature-box {
  position: relative;
  margin: 26px 0;
  padding: 24px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid transparent;
  background-image:
    linear-gradient(rgba(34, 15, 62, 0.94), rgba(34, 15, 62, 0.94)),
    var(--cta-gradient);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
.feature-box > h3 {
  margin-top: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.015em;
}

.guide td .pro-badge,
.guide td .free-badge {
  margin-left: 4px;
}
/* A table's first column names what the row is about: a label there is never broken, and takes
   its badge along on its line, so the column is as wide as its longest name and the wrapping is
   left to the description beside it. (A long message quoted as a label, `.says`, still wraps.) */
.guide td:not(:last-child) .ui:not(.says),
.guide td:first-child > strong,
.guide td:first-child:has(> .pro-badge, > .free-badge),
.guide td:first-child:has(> .ui:first-child + .ui:last-child),
.guide th {
  white-space: nowrap;
}
.guide table.matrix {
  min-width: 560px;
}
/* The ticks' columns are one width each, on a phone too, where the table scrolls sideways. */
.guide table.matrix td:not(:first-child),
.guide table.matrix th:not(:first-child) {
  text-align: center;
  width: 82px;
  min-width: 82px;
}
.guide table.matrix tr.group td {
  background: rgba(255, 255, 255, 0.04);
  font-weight: 600;
  color: var(--ink);
}
.yes {
  color: #4ade80;
  font-weight: 700;
}
.no {
  color: var(--ink-subtle);
}

/* ── Clickable demos (assets/howto.js) ────────────────────────────── */

.demo {
  margin: 22px 0 26px;
}
.demo-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  margin-top: 10px;
  padding: 8px 12px 8px 14px;
  border-radius: 14px;
  border: 1px solid rgba(251, 191, 36, 0.35);
  background: rgba(251, 191, 36, 0.08);
  font-size: 14.5px;
  color: var(--ink);
}
.demo-bar::before {
  content: 'Try it';
  flex: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber);
}
.demo-say {
  flex: 1;
  min-width: 0;
}
.demo-say p {
  margin: 0;
  color: var(--ink);
}
/* Every sentence a demo can say sits in the bar's one cell, the unsaid ones kept in the layout
   but unseen (and unread: visibility takes them from a screen reader too). The bar is then as
   tall as its longest sentence in every state, and a tap moves nothing under it. The script
   hides them with `hidden`, which `.demo [hidden]` below takes out of the layout: this beats it. */
.demo-say {
  display: grid;
  align-items: center;
}
.demo-say > p {
  grid-area: 1 / 1;
}
.demo .demo-say > p[hidden] {
  display: block !important;
  visibility: hidden;
}
.demo-reset {
  flex: none;
  padding: 5px 11px;
  border-radius: 8px;
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.06);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-muted);
  cursor: pointer;
}
.demo-reset:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.12);
}
/* What a demo lets you tap: a dashed amber edge under the pointer or the keyboard. */
.demo [data-set] {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.demo [data-set]:hover,
.demo [data-set]:focus-visible {
  outline: 1.5px dashed var(--amber);
  outline-offset: 2px;
  border-radius: 7px;
}
/* In an app screen or a sheet the edge is drawn inside what is tapped: a card, a sheet and the
   screen itself clip what crosses their edge, so an edge outside a full-width row lost its sides,
   and its top or bottom on a card's first or last row. Those two follow the card's own corners. */
.demo :is(.app, .app-sheet) [data-set]:hover,
.demo :is(.app, .app-sheet) [data-set]:focus-visible {
  outline-offset: -3px;
}
.demo .app-card > [data-set]:first-child:is(:hover, :focus-visible) {
  border-radius: 15px 15px 7px 7px;
}
.demo .app-card > [data-set]:last-child:is(:hover, :focus-visible),
.demo .app-card > .unfold:last-child > [data-set]:last-child:is(:hover, :focus-visible) {
  border-radius: 7px 7px 15px 15px;
}
.demo .app-card > [data-set]:only-child:is(:hover, :focus-visible) {
  border-radius: 15px;
}
.demo [hidden] {
  display: none !important;
}
/* A choice above a demo: which state, style or size to show. */
.demo-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.demo-chips [data-set] {
  padding: 6px 13px;
  border-radius: 9px;
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.05);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-muted);
}
/* A labelled row: the label in a column of its own and its chips (`.chips`) in theirs, so chips
   that wrap line up under the chips, never under the label. The label is as tall as a chip, to sit
   on the middle of the first line of them. Two such rows of one demo (`.pair`) give their labels
   one width, so both start their chips at the same place. */
.demo-chips:has(> .chips) {
  flex-wrap: nowrap;
  align-items: flex-start;
}
.demo-chips > .chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}
.demo-chips:has(> .chips) > .size-tag {
  flex: none;
  display: flex;
  align-items: center;
  min-height: 36px;
}
.demo-chips.pair > .size-tag {
  width: 70px;
}
.demo-chips .is-on {
  color: var(--ground);
  background: #fff;
  border-color: #fff;
}
/* Room for the tallest thing a demo shows, so the page does not jump at a tap. */
/* A widget beside the rows that change it gains and loses lines: its place on the stage is kept
   at its tallest (--slot, set on the demo in the page), the widget its own height at the top of it. Beside the
   rows that place is the stage's one row; under them, on a phone, its second. */
.demo .fig-stage.row {
  grid-template-rows: minmax(var(--slot, 0px), auto);
}
/* Two states of one thing (a card in either order, what a rule answers) take one cell, the other
   kept in the layout unseen, as a demo's sentences are. */
.demo .rule-node > span {
  grid-area: 4 / 1;
}
.demo .rule-node > span[hidden],
.demo-order .app-card[hidden] {
  display: block !important;
  visibility: hidden;
}
.demo-order .app-body > .app-card {
  grid-area: 2 / 1;
}
/* A screen whose groups unfold is a phone's height and scrolls inside, as the app does: its head,
   tabs and preview stay put, the rows scroll under them, and a group opened never moves the page. */
.app.scrolls {
  display: flex;
  flex-direction: column;
  height: 720px;
}
.app.scrolls > * {
  flex: none;
}
.app.scrolls > .app-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  /* Each card its full height: a card clips (its corners), so an auto row would squeeze it to
     fit the screen instead of letting the screen scroll. */
  grid-auto-rows: max-content;
  align-content: start;
  padding-top: 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}
.app.scrolls .app-tabs {
  margin-bottom: 0;
}
/* A demo whose screen unfolds beside its legend: the legend holds its place at the top (centred,
   it slid down with every group opened), while the screen grows under the tap as the app's does. */
.demo > .fig.side {
  align-items: start;
}
.stage-nextup {
  min-height: 300px;
}
.stage-week,
.stage-month {
  align-content: start;
}
.stage-week {
  min-height: 480px;
}
.stage-month {
  min-height: 590px;
}
/* The screen a demo's tap opens, in the widget's place, with the way back over it. */
.demo-back {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 11px 5px 7px;
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--hairline);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
}
.demo-back .ic {
  width: 15px;
  height: 15px;
}

/* ── A widget's action row and what Move mode adds ────────────────── */

.chrome {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin: 8px -4px -4px;
  color: var(--ink-muted);
}
.chrome.top {
  margin: -4px -4px 8px;
}
.chrome > span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
}
.chrome .ic {
  width: 17px;
  height: 17px;
}
.chrome .first {
  margin-right: auto;
}
.chrome .is-on,
.chrome .tint {
  color: var(--amber);
}
.chrome .hint {
  width: auto;
  margin-right: auto;
  padding: 0 4px;
  font-size: 11.5px;
  color: var(--ink-subtle);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agenda > .chrome,
.nu > .chrome {
  margin-top: 6px;
}
.move-pill {
  flex: none;
  padding: 3px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
}
.join.c2 {
  background: var(--rose);
}
/* A locked Pro widget, and one that can't read the calendar. */
.face {
  display: grid;
  gap: 8px;
  padding: 18px;
}
.face strong {
  font-size: 16px;
  color: var(--ink);
}
.face span {
  font-size: 13px;
  color: var(--ink-muted);
}
.face .ic {
  width: 22px;
  height: 22px;
  color: var(--amber);
}
.face i {
  display: block;
  height: 8px;
  width: 70%;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.12);
}
.face i + i {
  width: 45%;
}
/* The Month's picked day: the ring is where the list is. Under Heat today keeps a faint one while
   another day is picked (MonthRenderer.heatCell); under Dots today keeps its fill. */
.mo-grid .d.is-on {
  box-shadow: inset 0 0 0 2px var(--ink);
}
.demo[data-v-picked='other'] .heat .today {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.18);
}
.wk-day.is-on .wk-date {
  box-shadow: inset 0 0 0 2px var(--ink);
}
.wk-day.is-on .wk-load {
  background: rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 0 0 2px var(--ink);
}
.cal-mgrid .d.is-on {
  box-shadow: inset 0 0 0 1.5px var(--ink);
}
.w-wide {
  max-width: 440px;
}
.w-small {
  max-width: 250px;
}
/* A size named under a mock. */
.size-tag {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ── The calendar's Week and Month (the Day is site.css's .cal) ───── */

.cal-x {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-right: 8px;
  color: var(--ink-muted);
}
.cal-top .cal-month {
  margin-right: auto;
}
.cal-pill {
  margin-right: 6px;
  padding: 4px 9px;
  border-radius: 8px;
  border: 1px solid var(--hairline);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-muted);
}
.cal-pill.on {
  background: rgba(255, 255, 255, 0.16);
  color: var(--ink);
}
.cal-card-wrap {
  padding: 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
}
.cal-card-wrap + .cal-card-wrap {
  margin-top: 8px;
}
.cal .mo-head {
  margin-bottom: 8px;
}
/* Month: each day its number over title chips, then "+n". */
.cal-mgrid {
  display: grid;
  gap: 2px;
}
.cal-mgrid .mo-wk {
  gap: 2px;
}
.cal-mgrid .d {
  display: grid;
  align-content: start;
  gap: 2px;
  height: 44px;
  padding: 2px 1px 0;
  border-radius: 6px;
  font-size: 11px;
  text-align: center;
  overflow: hidden;
}
.cal-mgrid .d b {
  justify-self: center;
  min-width: 18px;
  border-radius: 5px;
  font-weight: 400;
  line-height: 15px;
}
.cal-mgrid .d.today b {
  background: #fff;
  color: var(--ground);
  font-weight: 700;
}
.cal-mgrid .d.picked {
  box-shadow: inset 0 0 0 1.5px var(--ink);
}
.cal-mgrid .d i {
  display: block;
  height: 7px;
  border-radius: 2px;
  opacity: 0.85;
}
.cal-mgrid .d em {
  font-style: normal;
  font-size: 9px;
  line-height: 9px;
  color: var(--ink-subtle);
}
.cal-daylist-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}
.cal-daylist-head small {
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-subtle);
}
.cal-empty {
  padding: 10px 0 4px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-subtle);
}
/* The floating buttons, and the + menu open over the dimmed calendar. */
.cal-fabs {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: grid;
  justify-items: end;
  gap: 8px;
}
.cal-fabs .cal-fab {
  position: static;
}
.cal-fab.small {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.16);
  color: var(--ink);
  box-shadow: none;
}
.cal-menu {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  border-radius: 11px;
  background: #fff;
  font-size: 13px;
  font-weight: 700;
  color: var(--ground);
}
.cal-dim::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(8, 2, 20, 0.55);
}
.cal-dim .cal-fabs {
  z-index: 1;
}

/* ── The app's screens: the dashboard, a widget's Settings and Style,
      Notifications and a rule. Drawn in the app's dark scheme. ────── */

.app {
  width: 100%;
  max-width: 360px;
  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #150a26;
  box-shadow: 0 24px 60px rgba(8, 2, 20, 0.55);
  overflow: hidden;
  font-size: 13px;
  color: var(--ink-body);
}
.app-body {
  display: grid;
  gap: 12px;
  padding: 0 14px 16px;
}
.app-head {
  padding: 16px 16px 0;
}
.app-head .wordmark {
  font-size: 19px;
}
.app-tagline {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--ink-subtle);
}
.app-tabs {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 12px 0;
  padding: 0 16px;
  border-bottom: 1px solid var(--hairline);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-subtle);
}
.app-tabs > span {
  position: relative;
  padding: 8px 0 9px;
}
.app-tabs .on {
  color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--accent);
}
.app-tabs .dot::after {
  content: '';
  position: absolute;
  top: 7px;
  right: -9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rose);
}
.app-tabs .tools {
  display: flex;
  gap: 12px;
  margin-left: auto;
  color: var(--ink-muted);
}
.app-section {
  margin: 4px 2px -4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-subtle);
}
.app-card {
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
/* A hairline between rows: after a row that shows, so the first row a demo leaves in a card is
   not ruled (and a pixel taller) for the hidden ones before it. */
.app-card > :where(:not([hidden])) ~ * {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.app-note {
  margin: 0 2px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ink-subtle);
}
/* Inside the guide's article a mock keeps its own look: the article's rules for lists and
   paragraphs (`.doc ul`, `.doc li`, `.doc p`) would otherwise indent and space them. */
.doc :is(.mock-widget, .app, .app-sheet, .notif) :is(ul, ol) {
  margin: 0;
  padding: 0;
}
.doc :is(.mock-widget, .app, .app-sheet, .notif) li {
  margin: 0;
}
.doc .sheet-rows {
  margin-top: 14px;
}
.doc .nu-label {
  margin: 0 0 6px;
  color: var(--ink-muted);
}
.doc .sheet-when {
  margin: 0;
  color: var(--ink-muted);
}
.doc .cal-empty {
  margin: 0;
  color: var(--ink-subtle);
}
/* The same for a mock's paragraphs and pins: `.doc p` and `.set-row b` would restyle them. */
.doc .app p.app-section {
  margin: 4px 2px -4px;
  color: var(--ink-subtle);
}
.doc .app p.app-note {
  margin: 0 2px;
  color: var(--ink-subtle);
}
.doc .app-sheet > p {
  margin: 0 0 12px;
  color: var(--ink-muted);
}
.doc .notif p {
  margin: 1px 0 0;
  color: var(--ink-muted);
}
.set-row b.pin {
  font-size: 11px;
  font-weight: 800;
  color: #2a1503;
}
/* A row: an icon, its label over a summary, and what ends it (a value, a chevron, a switch). */
.set-row {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 46px;
  padding: 8px 12px;
}
.set-row > .ic {
  color: var(--accent);
}
.set-row .lines {
  display: grid;
}
.set-row b {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.set-row small {
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--ink-subtle);
}
.set-row .val {
  flex: none;
  font-size: 12px;
  color: var(--ink-muted);
}
.set-row .end {
  flex: none;
  width: 15px;
  height: 15px;
  color: var(--ink-subtle);
}
.set-row.off {
  opacity: 0.4;
}
.set-row.sub {
  padding-left: 22px;
  background: rgba(0, 0, 0, 0.16);
}
.set-row .link {
  flex: none;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--accent);
}
/* A switch: the thumb in the wordmark's purple when on, as the app's. */
.toggle {
  flex: none;
  position: relative;
  width: 34px;
  height: 20px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.18);
}
.toggle::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.75);
  transition: transform 0.15s ease;
}
.toggle.on,
.is-on > .toggle {
  background: rgba(199, 125, 255, 0.35);
}
.toggle.on::after,
.is-on > .toggle::after {
  transform: translateX(14px);
  background: var(--accent);
}
/* Choice pills and a stepper, as the app's ChipRow and stepper: rounded rectangles. */
.pills {
  flex: none;
  display: flex;
  gap: 5px;
}
.pills > span {
  padding: 4px 9px;
  border-radius: 8px;
  border: 1px solid var(--hairline);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-muted);
}
.pills > .on,
.pills > .is-on {
  border-color: transparent;
  background: var(--cta-gradient);
  color: #fff;
}
.stepper {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
}
.stepper i {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  font-style: normal;
  color: var(--ink-muted);
}
.slider {
  flex: 1;
  position: relative;
  min-width: 70px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.16);
}
.slider::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--at, 50%);
  border-radius: 2px;
  background: var(--accent);
}
.slider::after {
  content: '';
  position: absolute;
  top: 50%;
  left: var(--at, 50%);
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: #fff;
}
.swatch {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: var(--c, #fff);
}
.swatches {
  display: flex;
  gap: 5px;
}
/* The dashboard's band: a widget on the wallpaper, its neighbours peeking in at the edges. */
.app-band {
  position: relative;
  display: grid;
  justify-items: center;
  padding: 16px 30px 12px;
  background:
    linear-gradient(180deg, rgba(20, 8, 38, 0.35), rgba(13, 5, 26, 0.6)),
    #1a1030 url('/assets/wallpaper.svg') center / cover no-repeat;
}
.app-band .peek {
  position: absolute;
  top: 26px;
  bottom: 30px;
  width: 16px;
  border-radius: 12px;
  background: rgba(28, 11, 52, 0.6);
  opacity: 0.7;
}
.app-band .peek.l {
  left: 0;
  border-radius: 0 12px 12px 0;
}
.app-band .peek.r {
  right: 0;
  border-radius: 12px 0 0 12px;
}
.app-dots {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
}
.app-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
}
.app-dots .on {
  background: #fff;
}
.app-dots b {
  font-size: 11px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.6);
}
.app .mock-widget,
.app-sheet .mock-widget {
  font-size: 16px;
}
.app-cta {
  display: grid;
  place-items: center;
  height: 40px;
  border-radius: 13px;
  background: var(--cta-gradient);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}
.app-cta.danger {
  background: #c62f4a;
}
/* A sheet over a screen or the home screen: the add-widget list, a picker, quick add. */
.app-sheet {
  width: 100%;
  max-width: 340px;
  padding: 16px;
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(28, 11, 52, 0.92), rgba(18, 7, 36, 0.94));
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 13px;
}
.app-sheet h4 {
  margin: 0 0 4px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 19px;
  color: var(--ink);
}
.app-sheet > p {
  margin: 0 0 12px;
  font-size: 12.5px;
  color: var(--ink-muted);
}
.tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.tiles > span {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 16px 8px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
.tiles .ic {
  width: 22px;
  height: 22px;
}

/* ── Page: Dashboard ──────────────────────────────────────────────── */

/* The four kinds as columns: the names one width, the badges one width, so badges and sizes line up. */
.dash-kinds strong {
  display: inline-block;
  min-width: 4.4em;
}
.dash-kinds :is(.pro-badge, .free-badge) {
  min-width: 40px;
  margin-right: 6px;
  text-align: center;
}

/* A screen that starts at its rows, or goes on under the band. */
.dash-top {
  padding-top: 14px;
}
/* The whole Widgets tab, numbered: a wider left edge, where the numbers sit. */
.dash-map .app-head,
.dash-map .app-tabs {
  padding-left: 20px;
}
.dash-map .app-body {
  padding-left: 20px;
}
.dash-map .wordmark .pin.gutter.r {
  right: -22px;
}
.dash-map .app-tabs .pin.gutter,
.dash-map .app-body .pin.gutter {
  left: -19px;
}
/* The invitation to Pro: the one banner a free user sees. */
.dash-pro {
  background: var(--cta-gradient);
}
.dash-pro small {
  color: rgba(255, 255, 255, 0.82);
}
.dash-pro .end {
  color: rgba(255, 255, 255, 0.8);
}
.dash-pro-tile {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(20, 8, 38, 0.45);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--amber);
}
/* An account's address, cut short as the app cuts it. */
.dash-mail {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.dash-top > .dash-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 16px;
  margin: 6px 0 0;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-muted);
}
.dash-top > .dash-ver {
  margin: -6px 0 0;
  text-align: center;
  font-size: 11px;
  color: var(--ink-subtle);
}
.dash-pencil {
  display: inline-grid;
  place-items: center;
  margin-left: 5px;
  vertical-align: -2px;
  color: var(--ink-subtle);
}
.dash-pencil .ic {
  width: 13px;
  height: 13px;
}
.set-row .end.dash-up {
  transform: rotate(180deg);
}
.dash-danger {
  flex: none;
  font-size: 12.5px;
  font-weight: 700;
  color: #ff8fa3;
}
/* The carousel: room for its tallest page, the edges that turn it, the last page's round +. */
.dash-carousel .app-band {
  min-height: 324px;
  align-content: center;
}
.dash-carousel .peek {
  width: 20px;
}
/* The card under it holds one row a page: the three share its one cell, so the card is as tall
   as the tallest of them at any width and a swipe moves nothing. */
.dash-carousel .app-card {
  display: grid;
}
.dash-carousel .app-card > .set-row {
  grid-area: 1 / 1;
  border-top: 0;
}
.demo .dash-carousel .app-card > .set-row[hidden] {
  display: flex !important;
  visibility: hidden;
}
.dash-carousel .app-dots i.is-on {
  background: #fff;
}
.dash-carousel .app-dots b.is-on {
  color: #fff;
}
.dash-add {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 34px 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.dash-add i {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.1);
}
.dash-add .ic {
  width: 26px;
  height: 26px;
}
.flow-step .dash-add {
  padding: 8px 0;
}
/* A widget that is not on the home screen: its page dimmed. */
.dash-parked .mock-widget {
  opacity: 0.45;
}
/* The add-widget sheet's rows say their blurb whole. */
.dash-pick .pick-row small {
  white-space: normal;
}
.dash-pick .pick-row > .ic {
  width: 15px;
  height: 15px;
  color: var(--ink-subtle);
}
.dash-pick .mock-widget {
  margin-bottom: 14px;
}
.dash-pick .pick {
  margin-bottom: 12px;
}
.app-cta.dash-quiet {
  margin-top: 8px;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.4);
}
.dash-flow .fig-stage {
  min-height: 186px;
}
/* A launcher's own pin dialog, drawn without its words: they are the launcher's. */
.dash-pin {
  display: grid;
  gap: 10px;
  width: 100%;
  max-width: 180px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
}
.dash-pin .thumb {
  display: grid;
  align-content: center;
  gap: 6px;
  height: 62px;
  padding: 0 12px;
  border-radius: 10px;
  background: linear-gradient(160deg, #3a1a68, #1a0b33);
}
.dash-pin .thumb i {
  height: 5px;
  width: 70%;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.55);
}
.dash-pin .thumb i + i {
  width: 45%;
  background: rgba(255, 255, 255, 0.3);
}
.dash-pin .btns {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.dash-pin .btns i {
  width: 46px;
  height: 14px;
  border-radius: 7px;
  background: rgba(36, 16, 65, 0.22);
}
.dash-pin .btns i + i {
  background: rgba(36, 16, 65, 0.8);
}
/* Calendars, unfolded: its rows, the phone's calendars, and a setting's sheet over the screen. */
.stage-dash-cal {
  min-height: 560px;
  align-content: start;
}
.dash-cal {
  position: relative;
}
.dash-cal .set-row .end {
  transition: transform 0.15s ease;
}
.dash-cal .is-on > .end {
  transform: rotate(180deg);
}
.dash-cal .dash-listhead {
  margin: 0;
  padding: 10px 12px 6px 22px;
  background: rgba(0, 0, 0, 0.16);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-subtle);
}
.dash-cal .set-row.sub .swatch {
  width: 12px;
  height: 12px;
  border: 0;
}
.dash-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(8, 2, 20, 0.6);
}
.demo .dash-scrim[data-set]:hover,
.demo .dash-scrim[data-set]:focus-visible {
  outline: 0;
}
.dash-cal .app-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  max-width: none;
  border-radius: 22px 22px 0 0;
  border-width: 1px 0 0;
  background: #1d0d36;
}
.dash-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 2px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-weight: 600;
  color: var(--ink);
}
.dash-opt .ic {
  width: 16px;
  height: 16px;
  color: var(--accent);
  opacity: 0;
}
.dash-opt.is-on .ic {
  opacity: 1;
}
/* One-handed reach: a phone, a sheet at its bottom edge, and the lift that floats it. */
.reach-phone {
  position: relative;
  width: 190px;
  aspect-ratio: 9 / 18;
  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(20, 8, 38, 0.2), rgba(13, 5, 26, 0.5)),
    #1a1030 url('/assets/wallpaper.svg') center / cover no-repeat;
  box-shadow: 0 24px 60px rgba(8, 2, 20, 0.55);
}
.reach-phone > i {
  position: absolute;
  top: 12%;
  left: 12%;
  right: 12%;
  height: 20%;
  border-radius: 12px;
  background: rgba(28, 11, 52, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.reach-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  align-content: start;
  gap: 5px;
  height: 36%;
  padding: 8px 12px;
  border-radius: 16px 16px 0 0;
  background: linear-gradient(160deg, rgba(40, 18, 72, 0.96), rgba(24, 10, 46, 0.97));
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 10.5px;
  color: var(--ink-muted);
  transition: bottom 0.25s ease, left 0.25s ease, right 0.25s ease, border-radius 0.25s ease;
}
.reach-sheet::before {
  content: '';
  justify-self: center;
  width: 26px;
  height: 3px;
  margin-bottom: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.35);
}
.reach-sheet b {
  font-size: 12.5px;
  color: var(--ink);
}
.reach-sheet .btns {
  display: flex;
  gap: 5px;
  margin-top: 4px;
}
.reach-sheet .btns span {
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 9.5px;
  font-weight: 600;
  color: var(--ink);
}
.demo[data-v-lift='2'] .reach-sheet,
.demo[data-v-lift='4'] .reach-sheet,
.demo[data-v-lift='6'] .reach-sheet,
.demo[data-v-lift='8'] .reach-sheet {
  left: 5px;
  right: 5px;
  border-radius: 16px;
}
/* Each step is 5% of the screen's height, over the navigation bar's own room. */
.demo[data-v-lift='2'] .reach-sheet {
  bottom: calc(10% + 6px);
}
.demo[data-v-lift='4'] .reach-sheet {
  bottom: calc(20% + 6px);
}
.demo[data-v-lift='6'] .reach-sheet {
  bottom: calc(30% + 6px);
}
.demo[data-v-lift='8'] .reach-sheet {
  bottom: calc(40% + 6px);
}
.reach-rows .set-row {
  min-height: 38px;
  padding: 6px 2px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.reach-rows .set-row.lit b,
.reach-rows .set-row.lit .val {
  color: var(--accent);
}
@media (max-width: 640px) {
  .dash-map .app-tabs {
    gap: 12px;
    font-size: 10.5px;
    letter-spacing: 0.06em;
  }
  .dash-map .app-tabs .tools {
    gap: 8px;
  }
  .dash-flow .fig-stage {
    min-height: 0;
  }
  .stage-dash-cal {
    min-height: 600px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .reach-sheet,
  .dash-cal .set-row .end {
    transition: none;
  }
}

/* ── Page: Notifications ──────────────────────────────────────────── */

/* A long message quoted as the app prints it: a label's weight, free to wrap. */
.ui.says {
  white-space: normal;
}
/* An event handed from one rule to the next: the one that takes it is lit. */
.rule-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  width: 100%;
}
.rule-node {
  position: relative;
  display: grid;
  align-content: start;
  gap: 3px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.05);
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink-muted);
}
.rule-node > em {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-subtle);
}
.rule-node > b {
  font-size: 14px;
  color: var(--ink);
}
.rule-node > small {
  font-size: 11.5px;
  color: var(--ink-subtle);
}
.rule-node > span {
  margin-top: 6px;
  font-weight: 600;
  color: var(--ink-body);
}
.rule-node + .rule-node::before {
  content: '›';
  position: absolute;
  left: -20px;
  top: 50%;
  margin-top: -14px;
  font-size: 26px;
  line-height: 1;
  color: var(--amber);
}
.rule-node.is-on {
  border-color: var(--amber);
  background: rgba(251, 191, 36, 0.1);
}
/* A rule's screen has no tabs under its wordmark. */
.app.rule-screen .app-body {
  padding-top: 14px;
}
/* A small icon in a row's label: a rule's pencil, a setting's ⓘ. */
.set-row b .ic.mini {
  width: 12px;
  height: 12px;
  margin-left: 5px;
  vertical-align: -1px;
  color: var(--ink-subtle);
}
.set-row b .ic.mini.tap {
  color: var(--accent);
}
.set-row b.rule-title {
  font-size: 15px;
}
.rule-title > span {
  color: var(--ink-subtle);
}
.set-row.add b {
  font-weight: 500;
  color: var(--accent);
}
/* A group's row: its chevron turns when it is unfolded, and the rows a switch turns off are greyed. */
.set-row.grp.is-on > .end {
  transform: rotate(90deg);
}
.set-row.dim-if.is-on,
.set-row.dim-unless:not(.is-on) {
  opacity: 0.4;
}
/* A keyword field: its label, the box, the hint, then where to look. */
.set-row.kw {
  display: grid;
  gap: 6px;
}
.kw .field {
  padding: 7px 10px;
  border-radius: 10px;
  border: 1px solid var(--hairline);
  font-size: 12.5px;
  color: var(--ink-subtle);
}
.kw .pills {
  justify-self: start;
}
.time-pill {
  flex: none;
  padding: 4px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
}
/* A rule's two arrows, one over the other, beside its switch. */
.order {
  flex: none;
  display: grid;
  gap: 2px;
  color: var(--ink-muted);
}
.order > span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 18px;
  border-radius: 6px;
}
.order .ic {
  width: 15px;
  height: 15px;
}
.order .up .ic {
  transform: rotate(180deg);
}
.order .dead {
  opacity: 0.34;
}
/* Room for a numbered tap beside each of a notification's buttons. */
.guide .notif-actions {
  gap: 40px;
}
.guide .notif-actions .pin.gutter.r {
  right: -23px;
}
/* The card that says what is stopping the reminders. */
.alert-glyph {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--accent);
  font-style: normal;
  font-size: 16px;
  font-weight: 800;
  color: #150a26;
}
/* The lead-time sheet: the result, the common times, three steppers, Cancel and Done. */
.app-sheet .lead-result {
  margin: 2px 0 10px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}
.app-sheet .pills {
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.app-sheet .pills > span {
  padding: 6px 12px;
  font-size: 12.5px;
}
.app-sheet .set-row {
  padding-left: 0;
  padding-right: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.lead-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}
.app-cta.quiet {
  background: none;
  border: 1px solid var(--hairline);
  color: var(--ink);
}
@media (max-width: 640px) {
  .rule-flow {
    grid-template-columns: 1fr;
  }
  .rule-node + .rule-node::before {
    content: '⌄';
    left: 50%;
    top: -31px;
    margin: 0 0 0 -8px;
  }
}

/* ── Page: Widget settings ────────────────────────────────────────── */

/* A demo whose mock carries a legend: the figure's own margins go. */
.demo > .fig {
  margin: 0;
}
/* A piece of the settings screen, beside the widget it changes. */
/* Style's pieces (.st-mini) are the same thing, and take the same corner. */
.app.part,
.app.st-mini {
  border-radius: 18px;
}
.app.part .app-body,
.app-body.pad {
  padding-top: 14px;
}
/* An unfolded group's rows, shown and hidden as one; its row's chevron turns. */
.unfold > * + * {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.set-row.is-on > .end {
  transform: rotate(180deg);
}
/* A row of pills under its label, as the app's Timing and Update every. */
.set-row.wrap {
  flex-wrap: wrap;
  row-gap: 7px;
}
.set-row.wrap .pills {
  width: 100%;
}
.set-row.wrap .pills > span {
  flex: 1;
  padding-inline: 2px;
  text-align: center;
  white-space: nowrap;
}
.pills > .dim,
.stepper .dim {
  opacity: 0.4;
}
/* An event's row with every detail on its own line, as the widget draws it. */
.row.tall {
  align-items: stretch;
  padding: 6px 0;
}
.row.tall .bar {
  height: auto;
}
.row.tall .join {
  align-self: center;
}
.guide .meta .ic {
  width: 12px;
  height: 12px;
  margin-right: 5px;
  vertical-align: -2px;
}
.demo[data-v-icons='off'] .meta .ic {
  display: none;
}
/* The Month's two strongest heat levels (site.css draws the first four), and a level's swatch. */
.heat .h5 {
  background: rgba(59, 130, 246, 0.8);
}
.heat .h6 {
  background: rgba(59, 130, 246, 1);
}
.heat-key {
  display: inline-block;
  width: 24px;
  height: 16px;
  border-radius: 5px;
  vertical-align: -3px;
  background: rgba(59, 130, 246, var(--a, 0.14));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.guide table.matrix td small {
  margin-left: 6px;
  font-size: 12px;
  color: var(--ink-subtle);
  white-space: nowrap;
}
/* When a widget redraws: a morning, and a mark for every redraw under it. */
.tl {
  display: grid;
  gap: 8px;
  padding: 16px 22px 14px 18px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(8, 2, 20, 0.3);
}
.tl-row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  font-size: 12.5px;
  color: var(--ink-muted);
}
.tl-track {
  position: relative;
  height: 24px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
}
.tl-track > * {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--at, 0%);
}
.tl-track .ev {
  width: var(--w, 10%);
  display: flex;
  align-items: center;
  padding: 0 7px;
  border-radius: 6px;
  background: var(--blue);
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
}
.tl-track .ev.c2 {
  background: var(--rose);
}
.tl-track b {
  width: 3px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.38);
}
.tl-track b.edge {
  background: var(--amber);
}
.tl-track.hours {
  height: 14px;
  background: none;
  font-size: 10.5px;
  color: var(--ink-subtle);
}
.tl-track.hours > span {
  transform: translateX(-50%);
}
@media (max-width: 640px) {
  .tl {
    padding: 14px 18px 12px 12px;
  }
  .tl-row {
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 12px;
    font-size: 11.5px;
  }
  .tl-track .ev {
    padding: 0;
    font-size: 0;
  }
}

/* ── Page: Style settings ─────────────────────────────────────────── */

/* The nine textures: the widget's own tiles (website/scripts/textures.js), each the relief as one
   grey image, drawn over the panel with hard-light (`.st-w::before`). A tile is as wide as on a
   phone, where its pixel is a device pixel: 341px for a 1024px tile, 512px for Leather's 1536. */
.guide {
  --tx-linen: url('/assets/textures/linen.webp') 0 0 / 341px;
  --tx-canvas: url('/assets/textures/canvas.webp') 0 0 / 341px;
  --tx-leather: url('/assets/textures/leather.webp') 0 0 / 512px;
  --tx-leather2: url('/assets/textures/leather2.webp') 0 0 / 341px;
  --tx-leather3: url('/assets/textures/leather3.webp') 0 0 / 341px;
  --tx-glitch: url('/assets/textures/glitch.webp') 0 0 / 341px;
  --tx-weathered: url('/assets/textures/weathered.webp') 0 0 / 341px;
  --tx-wood: url('/assets/textures/wood.webp') 0 0 / 341px;
  --tx-plaster: url('/assets/textures/plaster.webp') 0 0 / 341px;
}

/* A preset's dress, from src/theme/presets.ts: its panel (--st-bg; --st-sw where the swatch
   differs, as Ink's, whose panel is see-through), its two text colours, the bars' two colours
   and its texture. The same values dress a swatch, a widget mock and the demo's widget. */
.st-ink,
.demo[data-v-preset='ink'] .st-w {
  --st-bg: rgba(10, 10, 10, 0.4);
  --st-sw: #0a0a0a;
  --st-text: #ffffff;
  --st-sec: #c4c4c4;
  --st-ev: #5ec8e8;
  --st-task: #f5b942;
  --st-tex: none;
}
.st-frost {
  --st-bg: #1c1c1e;
  --st-text: #f5f5f7;
  --st-sec: #a1a8b0;
  --st-ev: #64d2ff;
  --st-task: #ff9f0a;
}
.st-charcoal {
  --st-bg: #2e3039;
  --st-text: #dae1fc;
  --st-sec: #b7bed5;
  --st-ev: #dae1fc;
  --st-task: #949aae;
}
.st-amethyst {
  --st-bg: #1c1c1e;
  --st-text: #f5f5f7;
  --st-sec: #a1a8b0;
  --st-ev: #bf5af2;
  --st-task: #ff9f0a;
}
.st-gold,
.demo[data-v-preset='gold'] .st-w {
  --st-bg: #1e1e1e;
  --st-text: #dcddde;
  --st-sec: #9a9a9a;
  --st-ev: #e0a83e;
  --st-task: #f2ddb0;
  --st-tex: var(--tx-leather);
}
.st-cognac {
  --st-bg: linear-gradient(to top, #865126, 54%, #2a150b);
  --st-text: #f9f2e6;
  --st-sec: #ebd6be;
  --st-ev: #f0ca85;
  --st-task: #f2dfbf;
  --st-tex: var(--tx-plaster);
}
.st-nextup,
.demo[data-v-preset='nextup'] .st-w {
  --st-bg: linear-gradient(to bottom, #241041, 75%, #896224);
  --st-text: #ffffff;
  --st-sec: #cfabe4;
  --st-ev: #ce5950;
  --st-task: #f472d0;
  --st-tex: none;
}
.st-cyber,
.demo[data-v-preset='cyber'] .st-w {
  --st-bg: linear-gradient(to bottom left, #5b12c4, #0b0b1e);
  --st-text: #fcee0c;
  --st-sec: #4ee1e6;
  --st-ev: #00f0ff;
  --st-task: #ff4d8d;
  --st-tex: var(--tx-glitch);
}
.st-ocean,
.demo[data-v-preset='ocean'] .st-w {
  --st-bg: linear-gradient(to top, #0e7c8c, 25%, #083040);
  --st-text: #f3fbfc;
  --st-sec: #b5d6dd;
  --st-ev: #ffb4a2;
  --st-task: #f4e27c;
  --st-tex: var(--tx-weathered);
}
.st-forest {
  --st-bg: linear-gradient(to top, #2f6b45, 35%, #14261a);
  --st-text: #f2f7f0;
  --st-sec: #c5d9c8;
  --st-ev: #e8c872;
  --st-task: #8fcbe8;
}
.st-midnight {
  --st-bg: linear-gradient(to top, #48597d, 18%, #161922);
  --st-text: #f4f6f8;
  --st-sec: #b4bdc9;
  --st-ev: #e07a5f;
  --st-task: #7ec8b3;
}
.st-light {
  --st-bg: #ffffff;
  --st-text: #14171c;
  --st-sec: #5c6570;
  --st-ev: #2b6cb0;
  --st-task: #c2410c;
}
.st-mono,
.demo[data-v-preset='mono'] .st-w {
  --st-bg: #ffffff;
  --st-text: #111111;
  --st-sec: #4a4a4a;
  --st-ev: #111111;
  --st-task: #6b6b6b;
  --st-tex: var(--tx-linen);
}
.st-sand {
  --st-bg: linear-gradient(to bottom, #f4f1ea, #d1c9b8);
  --st-text: #2b2520;
  --st-sec: #5b524b;
  --st-ev: #a45133;
  --st-task: #43684d;
  --st-tex: var(--tx-leather3);
}
.st-lotus {
  --st-bg: #ffffff;
  --st-text: #2a1b2e;
  --st-sec: #7b6a80;
  --st-ev: #a34fe8;
  --st-task: #e8488a;
}
.st-blossom {
  --st-bg: linear-gradient(to bottom right, #ffffff, #fce4ef);
  --st-text: #16131a;
  --st-sec: #6e6873;
  --st-ev: #8b3fd9;
  --st-task: #e0457b;
}

/* A preset card, as the Presets row's: its swatch over its name, the chosen one outlined. */
.st-card {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 7px;
  border-radius: 11px;
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.06);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  color: var(--ink-muted);
}
.st-card.on,
.st-card.is-on {
  border-color: #fff;
  font-weight: 600;
  color: var(--ink);
}
.st-card small {
  display: block;
  font-size: 10.5px;
  font-weight: 400;
  color: var(--ink-subtle);
}
.demo .st-card[data-set]:hover,
.demo .st-card[data-set]:focus-visible {
  border-radius: 11px;
}
.st-sw {
  display: block;
  height: 40px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: var(--st-sw, var(--st-bg));
}
.st-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 18px;
}
.st-strip {
  display: flex;
  gap: 8px;
  padding: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.st-strip::-webkit-scrollbar {
  display: none;
}
.st-strip .st-card {
  flex: none;
  width: 92px;
}
.demo > .st-strip {
  margin-bottom: 8px;
}
/* In the screen's mock the row runs off the edge, as a row that scrolls does. */
.st-strip.st-clip {
  padding: 0;
  overflow: hidden;
}

/* A widget, or a sheet, in a preset's dress. The site's mocks read these custom properties. */
.st-w {
  --ink: var(--st-text);
  --ink-body: var(--st-text);
  --ink-muted: var(--st-sec);
  --ink-subtle: var(--st-sec);
  --hairline: color-mix(in srgb, var(--st-sec) 40%, transparent);
  border-radius: 22px;
  background: var(--st-bg);
  color: var(--st-text);
  /* A widget does not blur what is behind it: a see-through panel shows the wallpaper sharp. */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.st-w > * {
  position: relative;
  z-index: 1;
}
.st-w p {
  margin: 0;
}
/* Its texture, then (over the fill, under the content) its depth: a light edge, a sheen, a shade.
   The texture's strength is its layer's alpha, 0.15 a step (panelTextureAlpha): 3 unless the preset
   says otherwise. Hard-light lifts and shades what is under it as the widget's white and black tile
   does, the wallpaper through a see-through panel too: the panel must not become a stacking
   context of its own (no filter, opacity or z-index on `.st-w`), or the grey would veil it. */
.st-w::before {
  inset: 0;
  height: auto;
  background: var(--st-tex, none);
  mix-blend-mode: hard-light;
  opacity: var(--st-tex-o, 0.45);
}
.st-gold,
.st-ocean,
.demo[data-v-preset='gold'] .st-w,
.demo[data-v-preset='ocean'] .st-w {
  --st-tex-o: 0.3;
}
.st-sand {
  --st-tex-o: 0.75;
}
.st-w::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0) 40%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.18));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.st-w .bar {
  --b: var(--st-ev);
  background: linear-gradient(180deg, var(--b), color-mix(in srgb, var(--b) 55%, var(--st-text)));
}
.st-w .bar.tk {
  --b: var(--st-task);
}
.st-w .box {
  border-color: var(--st-sec);
}
.st-w .sheet-cal i {
  background: var(--st-ev);
}
.st-w .sheet-rows li {
  border-top-color: var(--hairline);
}
.st-w .sheet-actions span {
  background: color-mix(in srgb, var(--st-text) 12%, transparent);
}

/* Two things side by side on a stage: the rows of a group and the widget they change. */
.st-duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  justify-items: center;
  width: 100%;
}
.st-pair {
  display: grid;
  gap: 10px;
  justify-items: center;
  width: 100%;
}
.st-mini .app-body,
.app-body.st-screen {
  padding-top: 14px;
}
.st-lab > .pin.gutter.r {
  right: -24px;
}
.st-l {
  display: block;
}
.st-pins .agenda {
  padding-left: 24px;
  padding-right: 24px;
}
/* A pin in a mock's own padding, a hair clear of the text it numbers. */
.st-pins .pin.gutter,
.st-picker .link > .pin.gutter {
  left: -21px;
}
.st-pins .pin.gutter.r {
  left: auto;
  right: -21px;
}
.set-row.sub .lines > .pin.gutter {
  left: -20px;
}
/* The same widget at the same size, with and without Compact view. */
.st-same .st-w {
  height: 268px;
}
.st-swrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

/* Background: the fill is a layer of its own, so its opacity leaves the text alone. */
.st-w.st-layered {
  background: none;
}
/* The texture goes over that layer, with the content (which follows it in the page). */
.st-w.st-layered::before {
  z-index: 1;
}
.st-w > .st-fill {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(to top, #865126, 54%, #2a150b);
  transition: opacity 0.15s ease;
}
.demo[data-v-fill='solid'] .st-fill {
  background: #2a150b;
}
.demo[data-v-op='70'] .st-fill,
.demo[data-v-op='70'] .st-w::after {
  opacity: 0.7;
}
.demo[data-v-op='40'] .st-fill,
.demo[data-v-op='40'] .st-w::after {
  opacity: 0.4;
}
.demo[data-v-op='0'] .st-fill,
.demo[data-v-op='0'] .st-w::after {
  opacity: 0;
}

/* Shape: the corners, the depth and the texture. */
.demo[data-v-corner='none'] .st-w {
  border-radius: 0;
}
.demo[data-v-corner='s'] .st-w {
  border-radius: 10px;
}
.demo[data-v-corner='l'] .st-w {
  border-radius: 34px;
}
.demo[data-v-depth='off'] .st-w::after {
  content: none;
}
.demo[data-v-tex='linen'] .st-w {
  --st-tex: var(--tx-linen);
}
.demo[data-v-tex='canvas'] .st-w {
  --st-tex: var(--tx-canvas);
}
.demo[data-v-tex='leather'] .st-w {
  --st-tex: var(--tx-leather);
}
.demo[data-v-tex='leather2'] .st-w {
  --st-tex: var(--tx-leather2);
}
.demo[data-v-tex='leather3'] .st-w {
  --st-tex: var(--tx-leather3);
}
.demo[data-v-tex='glitch'] .st-w {
  --st-tex: var(--tx-glitch);
}
.demo[data-v-tex='weathered'] .st-w {
  --st-tex: var(--tx-weathered);
}
.demo[data-v-tex='wood'] .st-w {
  --st-tex: var(--tx-wood);
}
.demo[data-v-tex='plaster'] .st-w {
  --st-tex: var(--tx-plaster);
}

/* Compact view: a step off every size, and the rows closer. */
.st-w.compact .agenda {
  padding: 11px 12px 10px;
}
.st-w.compact .agenda-head {
  margin-bottom: 6px;
}
.st-w.compact .agenda-head.day2 {
  margin-top: 8px;
}
.st-w.compact .agenda-kicker,
.st-w.compact .agenda-date {
  font-size: 11px;
}
.st-w.compact .agenda-rows {
  gap: 0;
}
.st-w.compact .row {
  gap: 9px;
  min-height: 33px;
}
.st-w.compact .bar {
  height: 26px;
}
.st-w.compact .title {
  font-size: 13px;
  line-height: 16px;
}
.st-w.compact .meta {
  font-size: 10.5px;
  line-height: 13px;
}

/* Color bars: off, and plain. */
.demo[data-v-bars='off'] .st-w .bar {
  display: none;
}
.demo[data-v-grad='off'] .st-w .bar {
  background: var(--b);
}
.demo[data-v-bars='off'] .st-needs-bars {
  opacity: 0.4;
  pointer-events: none;
}

/* The colour picker: the swatches, + for a custom colour, the two tools, and the palette + opens. */
.st-picker {
  display: grid;
  gap: 12px;
}
.st-picker .set-row {
  min-height: 0;
  padding: 0;
}
.st-picker .swatch {
  width: 26px;
  height: 26px;
}
/* The picker's pins sit over what they number, not on it: the row's marks are small. */
.st-picker .st-swrow:not(.st-neutrals) {
  margin-top: 12px;
}
.st-picker .st-swrow .pin {
  top: -15px;
  right: 50%;
  transform: translateX(50%);
}
.st-picker .swatch.on,
.st-mini .swatch.on {
  box-shadow: 0 0 0 2px #1a0b30, 0 0 0 3.5px #fff;
}
.st-plus {
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.45);
}
.st-tool {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.1);
  color: var(--ink);
}
.st-tool .ic {
  width: 15px;
  height: 15px;
}
.st-sv {
  position: relative;
  height: 96px;
  border-radius: 8px;
  background:
    linear-gradient(180deg, transparent, #000),
    linear-gradient(90deg, #fff, transparent),
    hsl(208, 100%, 50%);
}
.st-sv::after,
.st-hue::after {
  content: '';
  position: absolute;
  border-radius: 50%;
}
.st-sv::after {
  left: 68%;
  top: 56%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 3px solid #fff;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}
.st-hue {
  position: relative;
  height: 8px;
  margin: 4px 6px;
  border-radius: 4px;
  background: linear-gradient(90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
}
.st-hue::after {
  left: 58%;
  top: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.st-picker .st-neutrals .swatch {
  width: 20px;
  height: 20px;
}
.st-hex {
  margin-left: auto;
  padding: 4px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--ink);
}

@media (max-width: 640px) {
  .st-duo {
    grid-template-columns: 1fr;
  }
  .st-grid {
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 8px;
  }
  .st-picker .st-swrow {
    gap: 6px;
    row-gap: 18px;
  }
  .st-picker .swatch {
    width: 22px;
    height: 22px;
  }
  .st-tool {
    width: 24px;
    height: 24px;
  }
}

/* ── Page: Calendar ───────────────────────────────────────────────── */

/* This page's calendar mocks (.cal.cg): a column whose last card (.cg-list) takes the rest of the
   screen, as the sheet does on a phone, with the floating buttons over that card's corner. */
.stage-cal {
  align-content: start;
  min-height: 720px;
}
.cg {
  display: flex;
  flex-direction: column;
}
/* One height for the three views, so a switch moves nothing: a list too long for its card runs
   out under the card's foot, as it scrolls on the phone. */
.cg.screen {
  height: 620px;
}
.cg.screen .cg-list {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.cg-scroll {
  flex: 1;
  min-height: 0;
  margin: -4px;
  padding: 4px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 30px), transparent);
  mask-image: linear-gradient(#000 calc(100% - 30px), transparent);
}
.cg .cal-mgrid .d {
  height: 41px;
}
.cal-strip .pin {
  font-size: 11px;
  font-weight: 800;
  color: #2a1503;
}
/* A pin beside a row keeps clear of the row's first letters. */
.cg .cal-list .pin.gutter {
  left: -21px;
}
.cg-sheet .pin.gutter {
  width: 15px;
  height: 15px;
  font-size: 10px;
}
.cg.short {
  min-height: 400px;
}
.cg .cal-top {
  flex-wrap: wrap;
  row-gap: 6px;
}
.cg .cal-month {
  font-size: 17px;
}
.cal-month small {
  display: block;
  font-family: var(--body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--rose);
}
.cg-view {
  margin-bottom: 8px;
}
.cg-list {
  flex: 1;
}
.cg .cal-fabs {
  right: 26px;
  bottom: 26px;
}
.cal-fab.small.is-on {
  background: #fff;
  color: var(--ground);
}
.cal-menu .ic {
  width: 15px;
  height: 15px;
}
/* The + menu's dimming, as a layer a demo shows and hides (.cal-dim draws it). */
.cg-dim {
  position: absolute;
  inset: 0;
}
/* The header's Tasks toggle (an icon), and the view Move does not have. */
.cal-pill.icon {
  display: grid;
  place-items: center;
  padding: 4px 8px;
}
.cal-pill .ic {
  width: 15px;
  height: 15px;
}
.cal-pill.is-on {
  background: rgba(255, 255, 255, 0.16);
  color: var(--ink);
}
.cal-switch .off {
  opacity: 0.35;
}
/* The day shown, ringed in the strip (as site.css's .origin). */
.cal-strip .is-on {
  border: 2px solid #fff;
  padding: 4px 0 5px;
}
/* A row's start over its end, and the red of a clash. */
.cg .cal-list .t {
  line-height: 1.4;
}
.clash,
.meta.clash {
  font-style: normal;
  color: #ff8098;
}
/* The Week, one set of columns for every week: each date is its column's tap, today's is filled,
   and the days gone by are dimmed by the week shown. */
.cg-week .wk-day {
  position: relative;
}
.cg-week .wk-date.today {
  background: #fff;
  font-weight: 700;
  color: var(--ground);
}
.cg-week .wk-date[data-set]::after {
  content: '';
  position: absolute;
  inset: 0;
}
.demo[data-v-wk='1'] .cg-week .wk-day > *,
.demo[data-v-wk='2'] .cg-week .wk-day > *,
.demo[data-v-wk='3'] .cg-week .wk-day > *,
.demo[data-v-wk='4'] .cg-week .wk-day:nth-child(-n + 4) > * {
  opacity: 0.4;
}
/* A pin under what it names, for a row of small controls. */
.pin.below {
  top: auto;
  right: 50%;
  bottom: 0;
  transform: translate(50%, 125%);
}
.cg-heads .cal.cg {
  padding-bottom: 40px;
}
.cg-heads .cal-top {
  margin-bottom: 0;
}
/* The search: its field, the pills that say where it looks, a day's name over its results. */
.cg-search {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.cg-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 38px;
  margin-bottom: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.06);
  font-size: 13.5px;
  color: var(--ink);
}
.cg-field .ic {
  width: 15px;
  height: 15px;
  color: var(--ink-subtle);
}
.cg-search .cg-field {
  flex: 1;
  justify-content: flex-start;
  margin-bottom: 0;
}
.cg .pills {
  margin-bottom: 12px;
}
.cg .cg-dayname {
  margin: 10px 0 5px;
  font-size: 11.5px;
  color: var(--ink-muted);
}
.cg-list .app-note,
.cg .cg-note {
  margin: 10px 0 0;
  font-size: 11.5px;
  color: var(--ink-subtle);
}
.cal-list + .cal-daylist-head {
  margin-top: 14px;
}
/* A sheet's own bits: a full-width action, the red of a delete asked again, a form's quiet row,
   a list's header with its buttons. */
.sheet-actions.two {
  grid-template-columns: repeat(2, 1fr);
}
.sheet-actions .wide {
  grid-column: 1 / -1;
}
.sheet-actions .danger {
  background: #c62f4a;
  color: #fff;
}
.flow .sheet {
  padding: 14px;
}
.flow .sheet-actions {
  margin-top: 0;
}
.cg-more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 2px 2px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-muted);
}
.cg-more .ic {
  width: 15px;
  height: 15px;
}
.cg-sheet-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
  color: var(--ink-muted);
}
.cg-sheet-head h4 {
  margin: 0 auto 0 0;
}
.cg-sheet-head > span {
  display: grid;
}
.doc .cg-tasks > p.app-section {
  margin: 10px 2px 0;
  color: var(--ink-subtle);
}
.cg-tasks .agenda-rows {
  margin: 0 2px;
}
.cg-tasks .row {
  min-height: 34px;
}
.move-chips .ic {
  width: 14px;
  height: 14px;
  vertical-align: -2px;
}

@media (max-width: 640px) {
  .cal.cg {
    padding: 12px;
  }
  .cg .cal-month {
    font-size: 15px;
  }
  .cg .cal-x {
    margin-right: 4px;
  }
  .cg .cal-switch span {
    padding: 3px 6px;
  }
  .cg .cal-fabs {
    right: 20px;
    bottom: 20px;
  }
}
/* A phone's width: the header keeps its one row. */
@media (max-width: 420px) {
  .cg .cal-switch {
    font-size: 10.5px;
  }
  .cg .cal-switch span {
    padding: 3px 4px;
  }
  .cg .cal-pill {
    margin-right: 4px;
  }
  .cg .cal-pill.icon {
    padding: 4px 6px;
  }
}

/* ── Responsive ───────────────────────────────────────────────────── */

/* The article's own width (see `.guide`): a mock and its legend, two recipes, and a group's rows
   beside the widget they change, each pair stacked once the article is too narrow for two. */
@container guide (max-width: 680px) {
  .fig.side,
  .recipes,
  .st-duo {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* A table scrolls sideways only on a phone (site.css's 620px floor). In an article wider than
   that but narrower than the floor, beside the contents in a small window, it fits and its
   descriptions wrap instead. */
@container guide (min-width: 460px) {
  .guide table:not(.matrix) {
    min-width: 0;
  }
}

@media (max-width: 900px) {
  .hub-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* minmax(0, …): a bare 1fr is as wide as its widest unbreakable content, past a phone's edge. */
  .map,
  .fig.side,
  .recipes {
    grid-template-columns: minmax(0, 1fr);
  }
  .guide-page .toc {
    max-height: none;
  }
  .guide-page .doc {
    padding: 28px 20px;
  }
}

@media (max-width: 640px) {
  .hub-grid {
    grid-template-columns: 1fr;
  }
  .flow,
  .fig-stage.row {
    grid-auto-flow: row;
    grid-auto-columns: auto;
  }
  .flow-step + .flow-step::before {
    content: '⌄';
    left: 50%;
    top: -27px;
    margin-left: -8px;
  }
  .fig-stage {
    padding: 18px 12px;
  }
  .guide-page .doc {
    padding: 24px 16px;
    border-radius: 18px;
  }
  .guide-next {
    grid-template-columns: 1fr;
  }
  .guide-next .next {
    grid-column: 1;
    text-align: left;
  }
  .demo .fig-stage.row {
    grid-template-rows: auto minmax(var(--slot, 0px), auto);
  }
  /* A pinned panel's gutter, kept as slim as the pin allows: the mock has little width to give. */
  :is(.agenda, .nu, .cal):has(> .has-pin > .pin.gutter:not(.r)) {
    padding-left: 20px;
  }
  :is(.agenda, .nu, .cal):has(> .has-pin > .pin.gutter.r) {
    padding-right: 20px;
  }
  :is(.agenda, .nu, .cal) > .has-pin > .pin.gutter:not(.r) {
    left: -19px;
  }
  :is(.agenda, .nu, .cal) > .has-pin > .pin.gutter.r {
    right: -19px;
  }
  /* The line a demo says takes the bar's whole width, under "Try it" and Start over. */
  /* On a phone the label goes over its chips, not beside them: the chips need the width. */
  .demo-chips:has(> .chips) {
    flex-wrap: wrap;
    gap: 4px 8px;
  }
  .demo-chips:has(> .chips) > .size-tag {
    width: 100%;
    min-height: 0;
  }
  .demo-bar {
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .demo-say {
    order: 1;
    flex-basis: 100%;
  }
  .nav {
    gap: 16px;
  }
}

/* A phone's width: the app's screens get a little more of it, so a row's label keeps to one line
   beside its stepper or its pills. */
@media (max-width: 420px) {
  .fig-stage {
    padding-inline: 8px;
  }
  .set-row {
    gap: 8px;
  }
  .stepper {
    gap: 5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hub-card,
  .toggle::after {
    transition: none;
  }
}

@media print {
  .guide-tabs,
  .guide-next,
  .demo-bar {
    display: none;
  }
}