/* The tour: Kaman's parts, and the theme showcase (SPEC.md, Look: "The
   theme showcase"). Colours by role only. Inside the drawing and the story
   the roles are the picked theme's (theme.css, [data-themed]); what must
   stay in the page's own theme (the swatches' edges and rings) is set on
   .showcase, where the roles are still the page's, and inherited. */

.intro { max-inline-size: var(--measure); color: var(--on-surface-variant); }
.intro em, .part em { font-style: normal; color: var(--primary); }

/* ── Kaman's parts ──────────────────────────────────────────────────── */

.parts {
  display: grid; gap: var(--space-xxxl) var(--space-xxl); margin-block-start: var(--space-xxl);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
}
.part h3 { margin-block: var(--space-xl) var(--space-s); }
.part p { color: var(--on-surface-variant); margin: 0; }

/* ── The showcase ───────────────────────────────────────────────────── */

.showcase-frame { container-type: inline-size; margin-block: var(--space-xxl) var(--space-l); }
.showcase {
  /* The page's own roles, before a picked theme takes over below. */
  --page-edge: color-mix(in oklab, var(--outline) 70%, transparent);
  --page-ring: var(--gold);
  --page-focus: var(--secondary);
  --page-shadow: light-dark(color-mix(in oklab, var(--pigment-morakkab) 35%, transparent), var(--shadow));
  /* The drawing's proportions, in widths of the showcase (cqi): Kaman's
     bar and frame, and the Settings window, which floats in the middle of
     the screen. */
  --bar: 5cqi; --frame: 0.8cqi; --window: 56cqi;
  --round: max(3px, 0.6cqi);

  position: relative; margin: 0; padding: 0; border: 0; min-inline-size: 0;
  display: grid; gap: var(--space-l) var(--space-s);
  /* The swatches flow into the first rows, so they never move when a
     story's length changes; the drawing takes the row after them (13 in 5
     columns is 3 rows, in 7 is 2, in 13 is 1), the story the row after
     that, or the drawing's own once there's room for it inside. */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  --desk-row: 4;
}
@container (min-width: 30rem) { .showcase { grid-template-columns: repeat(7, minmax(0, 1fr)); --desk-row: 3; } }
@container (min-width: 60rem) { .showcase { grid-template-columns: repeat(13, minmax(0, 1fr)); --desk-row: 2; } }

/* The radio buttons stay in the page for the keyboard and screen readers;
   their swatches are what's seen. */
.pick { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; margin: 0; pointer-events: none; }

.desk { grid-row: var(--desk-row); grid-column: 1 / -1; align-self: start; margin-block-start: var(--space-s); }

/* ── A swatch: the theme's background and its three accents ─────────── */

.swatch {
  display: grid; justify-items: center; gap: var(--space-s); cursor: pointer;
  font-size: 12px; line-height: 1.2; color: var(--on-surface-variant); text-align: center;
  padding-block-end: var(--space-m); position: relative;
}
.swatch-colours {
  inline-size: 100%; max-inline-size: 56px; aspect-ratio: 1; border-radius: var(--radius-card);
  border: var(--rule) solid var(--page-edge);
  background: linear-gradient(135deg, var(--background) 0 52%, var(--primary) 52% 70%,
    var(--secondary) 70% 85%, var(--tertiary) 85%);
  transition: scale var(--duration-control) var(--ease-arrow);
}
.swatch:hover .swatch-colours { scale: 1.06; }
.swatch:hover { color: var(--on-surface); }
/* Narrow, the names wait for the story under the drawing. */
.swatch-name { overflow-wrap: anywhere; }
@container (max-width: 30rem) {
  .swatch-name { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* The picked one: a gold ring, its name in full colour, and the khatam
   lozenge under it that marks "you are here" in Kaman. */
.pick:checked + .swatch { color: var(--on-surface); font-weight: 600; }
.pick:checked + .swatch .swatch-colours {
  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--page-ring);
}
.pick:checked + .swatch::after {
  content: ""; position: absolute; inset-block-end: 0; inset-inline-start: 50%;
  inline-size: 6px; block-size: 6px; translate: -50% 0; rotate: 45deg; background: var(--page-ring);
}
.pick:focus-visible + .swatch .swatch-colours { outline: 2px solid var(--page-focus); outline-offset: 6px; }

/* ── The story: the picked theme's window ───────────────────────────── */

/* Only the story after the checked button shows. Narrow, it sits under the
   drawing; wide, it's the Settings window floating in the drawing. */
.story { display: none; grid-column: 1 / -1; grid-row: calc(var(--desk-row) + 1); }
.pick:checked + .swatch + .story { display: grid; }
.story {
  grid-template-columns: minmax(48px, 22%) 1fr;
  border-radius: var(--round); overflow: hidden;
  /* Hyprland's active border: the theme's two accents, at 45 degrees. */
  border: 2px solid transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box,
              linear-gradient(45deg, var(--primary), var(--secondary)) border-box;
  color: var(--on-surface);
}
@container (min-width: 44rem) {
  .story {
    grid-row: var(--desk-row); justify-self: start; align-self: center; z-index: 1;
    inline-size: var(--window); margin-block-start: var(--space-s);
    margin-inline-start: calc(var(--bar) + (100cqi - var(--bar) - var(--frame) - var(--window)) / 2);
    box-shadow: 0 1.6cqi 4cqi -1cqi color-mix(in oklab, var(--shadow) 50%, transparent);
  }
}
.story-rail {
  background: var(--surface-container-low); border-inline-end: var(--rule) solid var(--outline-variant);
  padding: var(--space-l) var(--space-m); display: flex; flex-direction: column; gap: var(--space-m);
}
.story-rail svg { inline-size: 24px; block-size: 24px; color: var(--primary); margin-block-end: var(--space-s); }
.story-rail i { display: block; block-size: 6px; border-radius: var(--radius-control); background: var(--outline-variant); inline-size: 80%; }
.story-rail i:nth-of-type(2) { inline-size: 60%; }
.story-rail i:nth-of-type(3) { inline-size: 70%; background: var(--primary); }
.story-rail i:nth-of-type(4) { inline-size: 50%; }
.story-page { padding: var(--space-xl); align-self: center; min-inline-size: 0; }
.story-look {
  font: 600 12px/1.2 var(--font-ui); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--primary); margin: 0 0 var(--space-m);
}
.story h3 { margin: 0; font-size: clamp(26px, 3.4cqi, 40px); color: var(--on-surface); }
/* The Persian name under it, at the line's start like the English one. */
.story h3 span { display: block; text-align: match-parent; font: 400 0.55em/1.8 var(--font-persian); color: var(--primary); }
/* The page head's rule in Kaman: a line, and the lozenge on it. */
.story-rule {
  display: block; block-size: var(--rule); margin-block: var(--space-m) var(--space-l);
  background: var(--outline-variant); position: relative;
}
.story-rule::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: -3px;
  inline-size: 7px; block-size: 7px; rotate: 45deg; background: var(--primary);
}
.story p:not(.story-look) { color: var(--on-surface-variant); font-size: 15px; margin: 0 0 var(--space-l); }
.story-inks { display: flex; gap: var(--space-s); }
.story-inks i { inline-size: 20px; block-size: 20px; border-radius: 50%; background: var(--primary); }
.story-inks i:nth-child(2) { background: var(--secondary); }
.story-inks i:nth-child(3) { background: var(--tertiary); }

/* ── The drawing: Kaman's bar and frame around a tiled screen ────────── */

.desk {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  border-radius: var(--radius-card); border: var(--rule) solid var(--page-edge);
  background: var(--surface-container-low);
  box-shadow: 0 24px 64px -24px var(--page-shadow);
  transition: background var(--duration-popup) var(--ease-arrow);
}
.desk-bar {
  position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: var(--bar);
  display: flex; flex-direction: column; align-items: center; gap: 0.5cqi; padding-block: 1.2cqi;
  font: 500 max(7px, 1cqi)/1 var(--font-ui); color: var(--on-surface-variant);
}
.desk-bow svg { inline-size: 2.4cqi; block-size: 2.4cqi; color: var(--primary); display: block; margin-block-end: 0.6cqi; }
.desk-ws { inline-size: 3.2cqi; block-size: 2.6cqi; display: grid; place-items: center; border-radius: var(--round); }
.desk-ws.used { color: var(--on-surface); }
.desk-ws.on { background: var(--primary); color: var(--on-primary); }
.desk-gap { flex: 1; }
.desk-icon { inline-size: 1.6cqi; block-size: 1.6cqi; border-radius: 50%; border: max(1px, 0.2cqi) solid var(--on-surface-variant); }
.desk-clock { text-align: center; color: var(--on-surface); font-variant-numeric: tabular-nums; margin-block: 0.4cqi; }
.desk-power { inline-size: 1.8cqi; block-size: 1.8cqi; border-radius: 50%; border: max(1.5px, 0.3cqi) solid var(--error); border-block-start-color: transparent; }

/* The screen: the wallpaper drawn in the theme's own roles, inside the
   frame's rounded corners. */
.desk-screen {
  position: absolute; inset: var(--frame) var(--frame) var(--frame) var(--bar);
  border-radius: max(4px, 0.8cqi); overflow: hidden;
  background:
    radial-gradient(50% 50% at 88% 44%, color-mix(in oklab, var(--primary) 22%, transparent), transparent 70%),
    linear-gradient(to bottom, color-mix(in oklab, var(--tertiary-container) 70%, var(--background)), var(--background) 75%);
}
.desk-sun {
  position: absolute; inset-inline-start: 88%; inset-block-start: 44%; translate: -50% -50%;
  inline-size: 5cqi; aspect-ratio: 1; border-radius: 50%;
  background: color-mix(in oklab, var(--primary) 70%, transparent);
}
.desk-hills { position: absolute; inset-inline: 0; inset-block-end: 0; inline-size: 100%; block-size: 46%; }
.hill-far { fill: color-mix(in oklab, var(--primary-container) 70%, var(--background)); }
.hill-near { fill: color-mix(in oklab, var(--secondary-container) 60%, var(--surface-container-lowest)); stroke: var(--primary); stroke-width: 1; stroke-opacity: 0.6; vector-effect: non-scaling-stroke; }

/* A notification, grown out of the frame in the top corner away from the
   bar, one shape with it. */
.desk-note {
  position: absolute; inset-block-start: 0; inset-inline-end: 0; inline-size: 26cqi;
  display: flex; gap: 1cqi; align-items: center; padding: 1.4cqi;
  background: var(--surface-container-low); border-end-start-radius: max(4px, 0.8cqi);
}
.note-icon { flex: none; inline-size: 2.4cqi; block-size: 2.4cqi; border-radius: 50%; background: var(--primary); }
.note-lines { flex: 1; display: grid; gap: 0.8cqi; }
.note-lines i { display: block; block-size: 0.9cqi; border-radius: 0.45cqi; background: var(--on-surface); inline-size: 80%; }
.note-lines i + i { background: var(--on-surface-variant); inline-size: 100%; }

/* A new pick fades the drawing and the story in, briefly. */
@media (prefers-reduced-motion: no-preference) {
  .pick:checked + .swatch + .story { animation: show var(--duration-popup) var(--ease-arrow); }
  @keyframes show { from { opacity: 0; } }
}