/* =============================================================================
   desktopTaskbarStyles.css — styles for the bottom taskbar
   -----------------------------------------------------------------------------
   The bar lives at the bottom of .desktop-screen as a sibling of
   .desktop-surface and .desktop-frame--*. It's NOT inside the surface,
   so the wireframe's clip-path doesn't reveal it as part of the
   assembly — instead the bar uses the .desktop-overlay.is-clear class
   (same gate that re-enables pointer-events on icons + windows) to fade
   itself in once the panel is "ready." This avoids the bar appearing
   from the wireframe dot, which would look strange given its bottom-
   anchored geometry.

   The .desktop-frame--bottom hairline (z-index: 1000) paints on top of
   the bar's bottom edge — that 1px line reads as the bar's own border,
   so we don't draw a separate one.

   CLASSES
     .desktop-taskbar           — outer bar, bottom of screen
     .desktop-taskbar-start     — left-end identity section (static, non-interactive)
     .desktop-taskbar-start-label — the label wrapper (one flex child)
     .desktop-taskbar-start-mark  — CALILEI, the Gridnik Bold wordmark
     .desktop-taskbar-list      — slot row container (flex row)
     .desktop-taskbar-slot      — one slot per open window (a <button>)
     .desktop-taskbar-slot-label
     .desktop-taskbar-slot--focused   — applied to the top-z VISIBLE window's slot
     .desktop-taskbar-slot--minimized — applied to slots whose window is hidden
     .desktop-taskbar-clock     — right-side time/date readout
     .desktop-taskbar-clock-time, .desktop-taskbar-clock-date

   COUPLED WITH desktopTaskbar.js (emits these classes) and desktopStyles.css
   (owns .desktop-screen / .desktop-overlay.is-clear).
   ========================================================================== */

/* =============================================================================
   THE BAR — anchored to bottom of the screen, full width
   ========================================================================== */

.desktop-taskbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40px;

  /* One step down the ink ramp from the surface. The panel already has
     a dark-ink-at-low-alpha ramp (icon hovers at 0.05 / 0.08 in
     desktopStyles.css); the bar sits at 0.04 — visibly a surface of its
     own against the desktop, but still light, still the same family.
     Sits above the surface in DOM order so it's not affected by the
     surface's clip-path. */
  background: rgba(28, 24, 19, 0.04);
  border-top: 1px solid var(--line);

  display: flex;
  align-items: center;
  /* No left padding — the start section is flush with the bar's left
     edge (it has a fill; a gap would read as a floating chip, which is
     exactly what it isn't). It carries its own inner padding. */
  padding: 0 10px 0 0;
  gap: 8px;

  /* Hidden until the panel is ready (mirrors the .is-clear gate that
     re-enables interaction on icons + windows). The transition makes
     the bar fade in alongside the wireframe-settled state instead of
     snapping. pointer-events stays off until visible so the bar can't
     intercept clicks during the assembly animation. */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease);
}

.desktop-overlay.is-clear .desktop-taskbar {
  opacity: 1;
  pointer-events: auto;
}

/* =============================================================================
   THE START SECTION — left-end identity region
   -----------------------------------------------------------------------------
   Where an OS taskbar puts its start button. Not a floating chip — a
   SECTIONED-OFF region of the bar itself, mirroring the clock's
   treatment on the right: full height, flush with the bar's left edge,
   separated from the slot list by a var(--line) divider (border-right
   here, border-left on the clock — same tone, same system). The fill is
   one more step down the ink ramp than the bar (0.05 over the bar's
   0.04), so it reads as a distinct zone that still belongs to the bar.

   The label carries TWO VOICES. The syntax (`//`, `.[ ]`) is ornament in
   the instrument voice (Hornet: uppercase, small, letter-spaced); CALILEI
   is the wordmark and gets Gridnik Bold — Tier 1 display, the one face
   reserved for brand moments. Both in dark ink, on the ink ramp with the
   rest of the bar: the wordmark at full var(--ink), the syntax one step
   back at 0.55 so the name reads as the subject and the punctuation as
   the frame around it. (For a flat, uniform label instead, drop the 0.55
   below to var(--ink) — the mark's font weight alone still separates
   them.)

   Non-interactive BY DESIGN for now: pointer-events off (the bar itself
   is pointer-events: auto under .is-clear, so the section must opt out
   individually, same as the clock) and no hover state — a static region
   shouldn't advertise interactivity it doesn't have. When it gains a
   click behavior, move it to a <button>, re-enable pointer-events under
   .desktop-overlay.is-clear, and add hover/active states one ramp step
   darker (0.08, matching the focused slot).
   ========================================================================== */

.desktop-taskbar-start {
  display: inline-flex;
  align-items: center;       /* centers the ONE label child in the full-height
                                section; the two faces' baselines are aligned
                                by inline layout INSIDE the label, not here.
                                See buildStartSection for why that matters. */
  flex-shrink: 0;

  height: 100%;              /* full-height section, like the clock */
  padding: 0 14px;
  background: rgba(28, 24, 19, 0.05);
  border-right: 1px solid var(--line);

  font-family: "Hornet Display", sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase; /* label is authored uppercase; this enforces
                                the instrument-voice pattern if it ever
                                changes */
  color: rgba(28, 24, 19, 0.55);   /* the syntax — ornament, one step back */

  white-space: nowrap;

  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

/* The label wrapper — inherits the section's instrument face and carries
   the two text runs plus the wordmark span as ordinary inline content. */
.desktop-taskbar-start-label {
  display: inline-block;
}

/* THE WORDMARK — CALILEI in Gridnik Bold.
   Tier 1 display, the face reserved for brand moments; this is the
   desktop's one. Sized at 1em (inherits the section's 0.68rem) but with
   tighter tracking: Gridnik Bold is denser than Hornet, and the 0.08em
   that gives Hornet its instrument-readout spacing makes Gridnik look
   loose. 0.04em is the knob if it reads too tight or too airy next to
   the syntax. Full var(--ink) — the subject of the label. */
.desktop-taskbar-start-mark {
  font-family: "Foundry Gridnik", sans-serif;
  font-weight: bold;
  letter-spacing: 0.04em;
  color: var(--ink);
}

/* =============================================================================
   THE SLOT LIST — flex row of buttons
   ========================================================================== */

.desktop-taskbar-list {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  overflow: hidden;          /* clip overflow if many windows are open;
                                a future iteration can add scrolling. */
}

/* =============================================================================
   A SLOT — one open window
   -----------------------------------------------------------------------------
   Native <button> for click + a11y. Reset the default chrome and style
   it as a small horizontal pill with a soft hover state and a stronger
   focused state for the top-z window.
   ========================================================================== */

.desktop-taskbar-slot {
  /* Reset native button chrome. font-family is inherited via the global
     button rule in infiniteStyles.css; we override font-size + weight
     here for the taskbar context. */
  appearance: none;
  border: 0;
  background: transparent;

  height: 28px;
  padding: 0 12px;
  border-radius: 4px;

  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: rgba(28, 24, 19, 0.72);

  cursor: pointer;
  white-space: nowrap;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;

  transition:
    background 0.18s var(--ease),
    color 0.18s var(--ease);
}

.desktop-taskbar-slot:hover {
  background: rgba(28, 24, 19, 0.05);
  color: var(--ink);
}

/* The currently-focused window's slot. A faint accent stripe at the
   bottom is a stronger affordance than just colour-shift — it reads
   as "this is the active tab" without needing the user to compare
   colours. Combined with a slight brightness lift on the text. */
.desktop-taskbar-slot--focused {
  background: rgba(28, 24, 19, 0.08);
  color: var(--ink);
  box-shadow: inset 0 -2px 0 0 var(--accent);
}

.desktop-taskbar-slot--focused:hover {
  background: rgba(28, 24, 19, 0.10);
}

/* Minimized slot: the window is hidden but still tracked. Dimmer text
   reads as "off-screen but still here." Italic is a second visual
   signal that doesn't compete with the accent-underline used by
   focused — together they make the three states (background / focused
   / minimized) all visually distinct without colour alone. Hover
   brightens to make it feel clickable, since clicking a minimized
   slot is the primary way to bring its window back. */
.desktop-taskbar-slot--minimized {
  color: rgba(28, 24, 19, 0.40);
  font-style: italic;
}

.desktop-taskbar-slot--minimized:hover {
  background: rgba(28, 24, 19, 0.04);
  color: rgba(28, 24, 19, 0.85);
}

.desktop-taskbar-slot-label {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =============================================================================
   THE CLOCK — right-side time + date readout
   -----------------------------------------------------------------------------
   Two stacked lines, right-aligned. Echoes the slots' typography (Glitched,
   same letterspacing family) so the bar reads as one cohesive surface, but
   pointer-events: none — the clock is ambient info, not interactive.

   A subtle vertical border on the left separates it from the slot list —
   var(--line), the same hairline as the bar's top border and the start
   section's divider, so all three belong to one visual system. tabular-nums keeps the digits monospaced even though Glitched is
   proportional, so the minute tick doesn't shift the column horizontally.
   ========================================================================== */

.desktop-taskbar-clock {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  flex-shrink: 0;

  height: 100%;
  padding: 0 4px 0 12px;
  margin-left: 8px;
  border-left: 1px solid var(--line);

  font-family: "Glitched", sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;

  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.desktop-taskbar-clock-time {
  font-size: 0.72rem;
  font-weight: 500;
  color: rgba(28, 24, 19, 0.92);
  line-height: 1.15;
}

.desktop-taskbar-clock-date {
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: rgba(28, 24, 19, 0.55);
  line-height: 1.15;
}