/* =========================================================
   mbrd - ghost cards: the hints a brand-new board opens with.
   After items.css (same-weight selectors win by order). Pairs with
   onboarding.ts (text/placement) and canvas/ghosts.ts (construction).
   ========================================================= */

/* Two looks along the whimsy axis: Middle/Harsh use a dashed border on an
   ordinary card; Softish uses a torn-page silhouette with tape. The whimsy
   dial card is excluded — a control is not provisional.
   Font sizes in this file are off the type scale on purpose: world-space type
   zooms with the board, while --t-* is fixed chrome type. */
.ghost-card {
  /* Carries its own shadow since items.ts builds no #item-shadows twin. */
  box-shadow: var(--item-shadow);
  /* Screen units, like --board-hairline. */
  --board-ghost-weight: calc(var(--ghost-weight) * var(--iz));
  border: var(--board-ghost-weight) dashed var(--ghost-edge);
  border-radius: inherit;
  justify-content: center;
  gap: 4px;
  --card-pad-x: 18px;
  --card-pad-y: 16px;
}
/* Inner rule steps in by the border width to avoid overlap. */
.ghost-card::after { inset: calc(var(--card-rule-gap) - var(--board-ghost-weight)); }
/* Softish candidates carry their own edge, so the rule goes unseen there. Unseen
   rather than `content: none`: a pseudo-element that stops existing cannot
   travel, and between Softish and Middle this rule appeared at its end radius
   while the dashed edge around it was still easing (tokens.css, 1c). */
:root[data-whimsy="0"] .ghost-card:not([data-hint="whimsy"])::after {
  border-color: transparent;
  /* The torn shape, so the rule leaves Softish square on the left with the
     edge it sits inside, not round inside a square corner. */
  border-radius: 0 max(0px, calc(var(--own-radius) - var(--card-rule-gap)))
    max(0px, calc(var(--own-radius) - var(--card-rule-gap))) 0;
}
/* The item takes the torn shape too. .item-body clips to it everywhere but
   Softish, and leaving Softish a round clip easing over the square-cornered
   edge cut its dashes away at the left. */
:root[data-whimsy="0"] .item[data-type="ghost"]:not(:has([data-hint="whimsy"])) {
  border-radius: 0 var(--own-radius) var(--own-radius) 0;
}
/* Unclip so tape can hang outside. Not the dial — it has no tape. */
:root[data-whimsy="0"] .item[data-type="ghost"]:not(:has([data-hint="whimsy"])) .item-body {
  overflow: visible;
}

/* Transparent so the torn polygon's chips don't show a square undercard. */
.item[data-type="ghost"] { background: transparent; }
/* No caption strip — a hint has no filename. */
.item[data-type="ghost"] .item-bar { display: none; }

.ghost-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-style: var(--display-italic);
  letter-spacing: calc(0.01em * var(--ls-scale));
  color: var(--ghost-ink);
}
/* text-wrap: pretty kept despite Firefox's console warning — it prevents
   orphaned words in centred two-line text, and nothing else fixes it. */
.ghost-line {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.42;
  color: var(--ghost-ink-2);
  text-wrap: pretty;
}

/* The legend: shortcut rows. Same family/size/ink as .ghost-line.
   .ico's fixed 16px box aligns the words without a grid. */
.ghost-keys {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.2;
  color: var(--ghost-ink-2);
}
.ghost-key {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ghost-key .ico {
  flex: none;
  /* Quieter than the text — a mark beside it, not a second thing to read. */
  color: var(--ghost-ink);
  opacity: 0.68;
}

/* The not-found number: upright (a number is not being said), terracotta
   accent, 64px world pixels. */
.ghost-card[data-hint="gone"] .ghost-title {
  margin-bottom: 6px;
  font-size: 64px;
  font-style: normal;
  font-weight: var(--display-weight);
  line-height: 0.95;
  letter-spacing: calc(0.04em * var(--ls-scale));
  color: var(--accent-text);
}

/* The "go back" button on a dead-address card. Styled as the app's filled
   control (terracotta + --leaf), not as a text link. */
.ghost-go {
  /* Takes pointer back from .item-body — must be pressed, not dragged. */
  pointer-events: auto;
  align-self: flex-start;
  margin-top: 4px;
  padding: 6px 12px;
  border-radius: var(--leaf);
  background: var(--accent);
  color: var(--accent-fg);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: calc(0.03em * var(--ls-scale));
  text-decoration: none;
  box-shadow: var(--shadow-1);
  transition: background var(--dur-fast) var(--ease);
}
@media (hover: hover) {
  .ghost-go:hover { background: color-mix(in srgb, var(--accent) 88%, var(--ink)); }
}
.ghost-go:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---- Softish: a page torn out, taped down ------------------------------
   Perforation stubs (repeating mask), faint rules, margin. The mask applies
   to descendants too, which is why tape is a sibling of the card. The dial
   is excluded — a torn scrap is a poor thing to mount a control in. */
:root[data-whimsy="0"] .ghost-card:not([data-hint="whimsy"]) {
  border: 0;
  box-shadow: none;
  background:
    repeating-linear-gradient(180deg,
      transparent 0 21px,
      color-mix(in srgb, #6f86a8 17%, transparent) 21px 22px),
    linear-gradient(90deg,
      transparent 0 26px,
      color-mix(in srgb, #b4544a 42%, transparent) 26px 27px,
      transparent 27px),
    var(--paper-card);
  /* Square where torn, rounded where not. --radius where no .item sets
     --own-radius (the Feed). */
  border-radius: 0 var(--own-radius, var(--radius)) var(--own-radius, var(--radius)) 0;
  --card-pad-x: 34px;
  -webkit-mask-image: radial-gradient(circle 6px at 0 11px, transparent 6px, #000 6.5px);
  mask-image: radial-gradient(circle 6px at 0 11px, transparent 6px, #000 6.5px);
  -webkit-mask-size: 100% 22px;
  mask-size: 100% 22px;
  -webkit-mask-repeat: repeat-y;
  mask-repeat: repeat-y;
}

/* ---- The dial ----------------------------------------------------------
   The whimsy slider card: borrows the sidebar's .field whole. Spacing is
   tight — 64 world px tall, three lines — so gaps are removed, the slider
   shrinks to 18px, and line-heights are pinned (the axis changes the face
   under all three). */
.ghost-card[data-hint="whimsy"] {
  /* Ordinary card edge, not dashed — this is a control, not a hint. */
  border: 0;
  box-shadow: inset 0 0 0 var(--board-hairline) var(--item-border), var(--item-shadow);
  justify-content: center;
  --card-pad-x: 20px;
  --card-pad-y: 9px;
}
.ghost-card[data-hint="whimsy"]::after { content: none; }
/* Softish corners turn hard enough to crowd outer stop names. */
:root[data-whimsy="0"] .ghost-card[data-hint="whimsy"] { --card-pad-x: 28px; }
/* A pill at Softish, not a card with round corners: --own-radius (items.css)
   caps the shape at half the shorter side, so asking for that half is exact. */
:root[data-whimsy="0"] .item[data-type="ghost"]:has([data-hint="whimsy"]) {
  --shape-radius: var(--half-min, var(--radius));
}
/* .ghost-mount scopes to both surfaces that mount a ghost card:
   the canvas .item and the Feed .feed-hint. */
.ghost-mount .ghost-dial {
  min-width: 0;
  margin: 0;
  /* Must be operated, not dragged. */
  pointer-events: auto;
}
/* Axis name: letter-spaced like a plate caption. */
.ghost-mount .ghost-dial > span:first-child {
  margin: 0;
  font-size: var(--t-small);
  line-height: 1.15;
  letter-spacing: calc(0.04em * var(--ls-scale));
  color: var(--ink-2);
}
/* Stops inset by half a thumb so names align with rest positions. */
.ghost-mount .ghost-dial .field-stops {
  margin: 0;
  padding: 0 5px;
  font-size: var(--t-tiny);
  line-height: 1.15;
  color: var(--ink-3);
}
/* 18px: dead air removed from a form-sized hit box (track 3px, thumb 15). */
.ghost-mount .ghost-dial input[type="range"] { height: 18px; }

/* ---- Mobile ------------------------------------------------------------
   ~20% smaller on glass than written (512wu across ~400px), so type and
   padding are stepped up. Keyed on data-board-mode, not a width query. */
:root[data-board-mode="mobile"] .ghost-card {
  --card-pad-x: 16px;
  --card-pad-y: 13px;
  gap: 4px;
}
:root[data-board-mode="mobile"] .ghost-title { font-size: 17px; }
/* Restated to outrank the 17px above at equal specificity. */
:root[data-board-mode="mobile"] .ghost-card[data-hint="gone"] .ghost-title {
  font-size: 72px;
}
:root[data-board-mode="mobile"] .ghost-line {
  font-size: 14px;
  line-height: 1.38;
}
:root[data-board-mode="mobile"] .ghost-keys {
  font-size: 14px;
  gap: 8px;
}
:root[data-board-mode="mobile"] .ghost-key .ico {
  width: 18px;
  height: 18px;
}
/* Desktop-only rows (marquee, Arrange) hidden on phone. */
:root[data-board-mode="mobile"] .ghost-key[data-only="desktop"] { display: none; }
/* Perforation pad narrowed — a third of a phone card is too much dead space. */
:root[data-board-mode="mobile"][data-whimsy="0"] .ghost-card:not([data-hint="whimsy"]) {
  --card-pad-x: 26px;
}

/* The dial on Mobile: two rows tall, thumb-operated, full 22px hit box. */
:root[data-board-mode="mobile"] .ghost-mount .ghost-dial > span:first-child {
  font-size: 17px;
  margin-bottom: 3px;
}
:root[data-board-mode="mobile"] .ghost-mount .ghost-dial .field-stops {
  font-size: 14px;
  margin-top: 3px;
}
:root[data-board-mode="mobile"] .ghost-mount .ghost-dial input[type="range"] {
  height: 22px;
}

/* Softish shadow via filter on .item-body (not the card — a mask strips
   box-shadow). Traces the perforated silhouette and tape together. */
:root[data-whimsy="0"] .item[data-type="ghost"]:not(:has([data-hint="whimsy"])) .item-body {
  filter:
    drop-shadow(0 1px 1px color-mix(in srgb, var(--ink) 12%, transparent))
    drop-shadow(0 7px 10px color-mix(in srgb, var(--ink) 20%, transparent));
}
/* Off with every other shadow when the quality dial asks. */
:root[data-quality="light"]:not([data-q-shadows]) .item[data-type="ghost"] .item-body,
:root[data-q-shadows="off"] .item[data-type="ghost"] .item-body {
  filter: none;
}

.ghost-tape { display: none; }
:root[data-whimsy="0"] .ghost-tape {
  display: block;
  position: absolute;
  width: var(--t-len);
  height: 26px;
  left: var(--t-x);
  top: var(--t-y);
  transform: translate(-50%, -50%) rotate(var(--t-rot));
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg,
      color-mix(in srgb, #a8814a 7%, transparent) 0 2px, transparent 2px 6px),
    linear-gradient(180deg,
      color-mix(in srgb, #e8cf9c 78%, transparent),
      color-mix(in srgb, #dcc08a 72%, transparent));
  /* Torn across, straight along. */
  clip-path: polygon(
    3% 0, 97% 4%, 100% 22%, 96% 41%, 100% 62%, 97% 82%, 99% 100%,
    2% 96%, 0 78%, 4% 58%, 0 38%, 3% 19%
  );
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 18%, transparent);
}

/* color-mix() fallback for WebKit < 16.2 — see tokens.css section 7. */
@supports not (color: color-mix(in srgb, red, blue)) {
  @media (hover: hover) {
    .ghost-go:hover { background: var(--lc-accent-88-ink, var(--accent)); }
  }

  :root[data-whimsy="0"] .ghost-card:not([data-hint="whimsy"]) {
    background:
      repeating-linear-gradient(180deg,
        transparent 0 21px,
        rgb(111 134 168 / 17%) 21px 22px),
      linear-gradient(90deg,
        transparent 0 26px,
        rgb(180 84 74 / 42%) 26px 27px,
        transparent 27px),
      var(--paper-card);
  }

  :root[data-whimsy="0"] .item[data-type="ghost"]:not(:has([data-hint="whimsy"])) .item-body {
    filter:
      drop-shadow(0 1px 1px rgb(var(--ink-c) / 12%))
      drop-shadow(0 7px 10px rgb(var(--ink-c) / 20%));
  }

  :root[data-whimsy="0"] .ghost-tape {
    background:
      repeating-linear-gradient(90deg,
        rgb(168 129 74 / 7%) 0 2px, transparent 2px 6px),
      linear-gradient(180deg,
        rgb(232 207 156 / 78%),
        rgb(220 192 138 / 72%));
    box-shadow: 0 1px 2px rgb(var(--ink-c) / 18%);
  }
}