/* Sign generator. Inherits the site palette from style.css. */

/* Desktop: controls stack in a fixed left column, preview fills the right.
   The preview is far taller than the three control blocks combined, so it
   spans a fourth, empty 1fr row -- that row soaks up the surplus height.
   Without it the slack is shared across the three content rows instead and
   the controls drift apart down the column. */
.sign-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  grid-template-rows: auto auto auto 1fr;
  grid-template-areas:
    "design  preview"
    "text    preview"
    "actions preview"
    ".       preview";
  gap: 1.2rem 2rem;
  align-items: start;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.8rem;
}
.sign-design  { grid-area: design; }
.sign-preview { grid-area: preview; }
.sign-text    { grid-area: text; }
.sign-actions { grid-area: actions; }

/* Spacing between blocks is the grid gap's job -- a margin here would add to it. */
.sign-layout fieldset { border: 2px solid var(--ink); padding: 0.9rem; margin: 0; min-width: 0; }
.sign-layout legend { padding: 0 0.4rem; font-weight: 700; text-transform: uppercase; font-size: 0.7rem; }
.sign-layout label { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; cursor: pointer; }
.sign-layout label:last-child { margin-bottom: 0; }
.sign-layout textarea {
  display: block; /* inline-block leaves a baseline gap under the box */
  width: 100%; min-height: 5.5rem; padding: 0.5rem; resize: vertical;
  font-family: inherit; font-size: 0.85rem; border: 2px solid var(--ink);
  background: var(--paper); color: var(--ink);
}

/* Script buttons (#script-buttons, filled in by sign.js) are <button>s, not
   the <a>s the site-wide .lang-bar styling in /style.css targets -- buttons
   carry different browser defaults (background, border, font), so those need
   restating here to keep the look identical. Selection is aria-pressed, not
   aria-current (they don't navigate to a page). */
/* #script-buttons borrows class="lang-bar", which is the site's page-level nav
   styling -- including a 2.25rem bottom margin meant to separate a nav from an
   article. Inside a fieldset that is just dead air; reset it to component
   spacing. Same for .font-status, which sets margin-top but inherits the
   browser's default <p> margin-bottom. */
#script-buttons { margin-bottom: 0.75rem; }

#script-buttons button {
  appearance: none;
  display: inline-block;
  border: 2px solid var(--ink);
  padding: 0.25rem 0.4rem;
  background: none;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
#script-buttons button:hover { background: var(--ink); color: var(--paper); }
#script-buttons button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

.sign-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.sign-actions button {
  flex: 1 1 auto; padding: 0.6rem 0.9rem; border: none; cursor: pointer;
  background: var(--ink); color: var(--paper);
  font-family: 'IBM Plex Mono', monospace; font-size: 0.78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.sign-actions button:hover { background: var(--red); }
.sign-actions button:disabled { opacity: 0.5; cursor: default; }

.sign-preview { border: 1px solid var(--grey); background: #fff; }
.sign-preview svg { display: block; width: 100%; height: auto; }

.font-status { font-family: 'IBM Plex Mono', monospace; font-size: 0.7rem; color: var(--grey); min-height: 1.2em; margin: 0.5rem 0 0; }

.sign-load-error {
  margin: 0; padding: 2.5rem 1.5rem; text-align: center;
  font-family: 'IBM Plex Mono', monospace; font-size: 0.85rem; color: var(--red);
}

/* Gallery invitation, after the AI note. border-inline-start rather than
   border-left so it mirrors itself on the ar/fa pages with no [dir="rtl"]
   companion rule. Link colours follow the site pattern used by
   ".update-content a": ink at rest, red on hover. */
.sign-gallery-note {
  margin: 1.5rem 0 0;
  padding: 0.8rem 1rem;
  border-inline-start: 4px solid var(--red);
  background: rgba(0, 0, 0, 0.035);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.78rem;
  line-height: 1.5;
}
.sign-gallery-note a { color: var(--ink); text-decoration: underline; }
.sign-gallery-note a:hover { color: var(--red); }

/* Mobile: Design and the preview share the first row, then the text block and
   the actions go full-width beneath. Reading and tab order already match this
   (the preview isn't focusable), so nothing is reordered away from the DOM. */
@media (max-width: 700px) {
  .sign-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "design  preview"
      "text    text"
      "actions actions";
    gap: 1rem;
  }

  /* At this width the Design options present as toggle buttons, matching the
     script row. They remain real <input type="checkbox">es -- only the
     painting changes -- so sign.js, the keyboard behaviour and the
     accessibility tree are all untouched by the switch.

     State is carried by "input:checked + span" rather than ":has()" on the
     label. Both work; the sibling combinator is preferred here because it
     needs no @supports fallback branch, which matters with 15 more language
     pages to copy this to.

     Measuring note for anyone re-testing this: the transition below means
     getComputedStyle() reports the *start* colour in a headless browser,
     which never advances the transition -- it reads exactly like a toggle
     that lags one click behind. Inject "transition: none" before asserting
     on the background, or assert on input.checked instead. */
  .sign-design label {
    display: block;
    position: relative; /* anchors the visually-hidden input below */
    margin: 0 0 0.4rem;
  }
  .sign-design label:last-child { margin-bottom: 0; }

  /* Hidden to the eye, still focusable and still the accessible control. */
  .sign-design label input {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip-path: inset(50%);
    overflow: hidden;
  }

  .sign-design label span {
    display: block;
    text-align: center;
    padding: 0.25rem 0.4rem;
    border: 2px solid var(--ink);
    transition: background 0.15s, color 0.15s;
  }
  .sign-design input:checked + span { background: var(--ink); color: var(--paper); }
  /* Focus lands on the hidden input, so lift its ring onto the visible box. */
  .sign-design input:focus-visible + span { outline: 3px solid var(--red); outline-offset: 2px; }
}

/* --- Print: the preview is the artifact --- */
@page { size: A4; margin: 0; }

@media print {
  body { background: #fff; padding: 0; }
  .wrap { max-width: none; margin: 0; }
  /* .sign-design/.sign-text replace the old .sign-controls wrapper: the form is
     now the grid itself, so hiding it would take the preview with it. */
  .lang-bar, .sign-design, .sign-text, .sign-actions, footer, h1, .sign-intro,
  .translation-note, .skip-link, .font-status,
  .sign-gallery-note { display: none !important; }
  .sign-layout { display: block; }
  .sign-preview { border: none; }
  .sign-preview svg { width: 210mm; height: 297mm; }
}