/* Styles added on top of the reference stylesheet (css/style.css stays a byte copy). */

/* Handwriting pad: one unpainted path per stroke over the canvas, so each vector
   stroke is addressable without changing what the pad looks like. */
.inkpad .ink-strokes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  fill: none;
  stroke: none;
  pointer-events: none;
}

/* Card fan: the backs are listed from the top card down, so the explicit
   stacking keeps the reference look (each back over its left neighbour). */
.fan .card-back:not(.chosen) {
  z-index: calc(var(--i) + 1);
}

/* The row under the fan only catches clicks on its own buttons; the outer backs
   of the fan reach over its empty space. */
.fan ~ .center {
  pointer-events: none;
}

.fan ~ .center > * {
  pointer-events: auto;
}

/* Dialog: a <dialog> holding one .leaf, with the ink veil behind it. */
.dialog {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: min(92vw, 420px);
  width: 100%;
  color: inherit;
}

.dialog::backdrop {
  background: color-mix(in srgb, var(--ink) 45%, transparent);
}

.dialog .leaf {
  margin: 0;
}

/* City search on the birth form (frontend.md 出生資料, visual change for FR-021). */
.city-results {
  list-style: none;
  padding: 0;
  margin: 6px 0 10px;
  display: grid;
  gap: 6px;
}

.city-results .mini {
  width: 100%;
  text-align: left;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.city-results .mini small {
  flex: none;
}

/* Me page 「我的口味」: the feedback list under the taste note (FR-033; the
   reference has no such list, its rows reuse .source, .feedback and .chip). */
.feedback-list {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
}

.feedback-list li + li {
  margin-top: 14px;
}

.feedback-list p {
  margin: 0;
}

/* Account page sign-in card: the 「或」 line between OAuth and the email link
   (frontend.md 帳號頁, prototype/assets/additions.css). */
.or-line {
  text-align: center;
  color: var(--ink-2);
  font-size: 0.88rem;
  margin: 10px 0;
}

/* Account page: the sync state line and the email field error (frontend.md 帳號頁,
   「同步狀態的呈現」, prototype/assets/additions.css). */
.sync-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--ink-2);
  font-size: 0.9rem;
  margin: 6px 0 10px;
}

.sync-line::before {
  content: '';
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  transform: translateY(-2px);
}

.sync-line.waiting::before {
  background: var(--ink-2);
}

.sync-line.alert::before {
  background: var(--cinnabar);
}

.sync-line.alert,
.sync-line.alert a {
  color: var(--cinnabar);
}

.field-error {
  color: var(--cinnabar);
  font-size: 0.88rem;
  margin: 4px 0 8px;
}

/* Sync conflicts (#/me/conflicts, prototype/conflicts.html): two versions side
   by side, stacked on narrow screens. */
.versions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 10px;
}

.versions > .leaf {
  margin: 0;
}

.versions .version-text {
  white-space: pre-wrap;
}

@media (max-width: 600px) {
  .versions {
    grid-template-columns: 1fr;
  }
}

/* A one-line notice at the top of a page (grace period; frontend.md 扣款失敗通知). */
.notice-line {
  display: block;
  margin: 0 4px 14px;
}

/* Annual report printing (research R20, frontend.md 年度蒸餾報告): A4 pages, and
   no card split across a page break. Print only; the screen is unchanged. */
@media print {
  @page {
    size: A4;
    margin: 16mm 14mm;
  }
  .report .leaf,
  .report .report-wheel {
    break-inside: avoid;
  }
}

/* ─── Accessibility (NFR-017, US2-3) ─────────────────────────────────────── */

/* Reduced motion, opening: the reference's reduced rule only stills the overlay's
   descendants, so the overlay's own fade is switched off too. Its 0.01ms transition
   rule still starts transitions on every element when the night theme switches in
   just after the opening mounts; none at all here. */
.opening.reduced {
  animation: none !important;
}

.opening.reduced,
.opening.reduced * {
  transition: none !important;
}

/* Reduced motion: the reference's 0.01ms rule leaves the playing ambient
   button's infinite 「breathe」 running; it stays still instead. */
@media (prefers-reduced-motion: reduce) {
  .ambient-toggle.playing svg {
    animation: none;
  }
}

/* 200% text: the placements' glyph column is 1.8em of the body's fixed
   16.5px while the glyph is 1.15rem, so larger text overflowed it. The column now
   grows with its glyph; at 100% the glyph is narrower and the column stays 1.8em. */
.placements li {
  /* A narrow row squeezes the column to its least width, so that least width
     also follows the root size (1.2rem covers the 1.15rem glyph); at 100% it
     is still 1.8em. */
  grid-template-columns: minmax(max(1.8em, 1.2rem), max-content) 1fr auto;
}