/**
 * 📖 THE STORYFORGE — this island's own ink.
 *
 * The Realm's parchment comes from /assets/realm.css; only what a forge needs is here.
 * Built for an iPad and an iPhone held in one hand: nothing below the thumb line that
 * matters, tap targets never under 44px, and the typing box never buried under the
 * keyboard when it opens.
 */

/**
 * `hidden` must actually hide. This app switches screens and question types by setting the
 * hidden attribute, and the browser's own rule for it (display: none) LOSES to any display
 * this file sets — so `.sf-typing { display: flex }` put a text box on screen underneath the
 * four multiple-choice options, on the very first question. Found in a real browser, not in
 * a test, which is why this line is at the top of the file where it cannot be missed.
 */
[hidden] { display: none !important; }

.sf-app {
  padding: clamp(0.5rem, 2vw, 1.25rem);
}

.sf-sheet {
  /* A shelf wants width. The reading and writing screens do not — a 60-character measure is
     what makes prose readable — so the page widens only where a grid of books lives. */
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(0.9rem, 3vw, 1.6rem) clamp(0.9rem, 4vw, 2rem) 3rem;
  background: var(--parchment-lit);
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
  min-height: calc(100dvh - 2.5rem);
}

.sf-loading { font-style: italic; color: var(--ink-soft); }

.sf-top {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.1rem;
}

.sf-top > :last-child { margin-left: auto; }

.sf-back {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  color: var(--ink);
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
}

.sf-title {
  font-size: clamp(1.15rem, 4.5vw, 1.6rem);
  letter-spacing: 0.02em;
}

.sf-who {
  font-size: 0.85rem;
  color: var(--ink-soft);
  text-transform: capitalize;
}

/* ── Home: THE SHELF ──────────────────────────────────────────────────────────
   Books first. The old home was a single enormous practice button with three small
   tiles under it, and Leyan named exactly what was wrong with it: a new player was
   never invited to READ anything. So the shelf IS the home screen, Read is the
   heaviest control on every card, and the practice lives on the card it belongs to. */

.sf-standing {
  margin: 0 0 1.1rem;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.sf-shelf {
  display: grid;
  gap: 0.9rem;
}

.sf-card {
  padding: 1rem 1.05rem 0.9rem;
  border: 2px solid var(--parchment-dark);
  border-radius: 16px;
  background: var(--parchment);
  box-shadow: 0 2px 0 rgba(120, 96, 54, 0.35);
}

.sf-card__title {
  font-size: clamp(1.15rem, 4.6vw, 1.4rem);
  line-height: 1.25;
}

.sf-card__by {
  margin: 0.25rem 0 0.15rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.sf-card__by b { font-weight: inherit; text-transform: capitalize; }

.sf-card__state {
  margin-bottom: 0.85rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

/* A book with work waiting says so in ink, not in grey. */
.sf-card__state--ready { color: #8f3d10; font-weight: 700; }

.sf-card__main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

/* The two things you came for. Read is warmer and heavier than Forge on purpose. */
.sf-do {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.6rem 0.7rem;
  border: 0;
  border-radius: 12px;
  font-family: inherit;
  font-size: 1.02rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}

.sf-do--read {
  color: #fff4dd;
  background: linear-gradient(180deg, #b8531f, #7d3210);
  box-shadow: 0 3px 0 #4d1e08;
}

.sf-do--forge {
  color: var(--ink);
  background: var(--parchment-lit);
  box-shadow: 0 3px 0 var(--parchment-dark);
}

.sf-do:active { transform: translateY(3px); box-shadow: none; }
.sf-do:focus-visible { outline: 3px solid var(--gold-deep); outline-offset: 2px; }

.sf-do[disabled] {
  opacity: 0.55;
  cursor: default;
  box-shadow: none;
  transform: none;
}

.sf-ico { width: 20px; height: 20px; flex: 0 0 auto; }

/* Everything else. Folded on a phone, open on a desktop — one set of markup, two layouts. */
.sf-more {
  min-height: 44px;
  width: 100%;
  margin-top: 0.5rem;
  border: 0;
  background: none;
  color: var(--ink-soft);
  font-family: inherit;
  font-size: 0.88rem;
  cursor: pointer;
}

.sf-more::after { content: ' ⌄'; }
.sf-more[aria-expanded='true']::after { content: ' ⌃'; }

.sf-card__rest {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--parchment-dark);
}

.sf-mini {
  min-height: 44px;
  padding: 0.45rem 0.8rem;
  border: 2px solid var(--parchment-dark);
  border-radius: 10px;
  background: var(--parchment-lit);
  color: var(--ink);
  font-family: inherit;
  font-size: 0.88rem;
  cursor: pointer;
  overflow-wrap: anywhere;
}

.sf-mini:active { transform: translateY(2px); }
.sf-mini:focus-visible { outline: 3px solid var(--gold-deep); outline-offset: 2px; }
.sf-mini--quiet { background: transparent; color: var(--ink-soft); }

.sf-shelf-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.4rem;
}

.sf-note {
  margin: 1.2rem 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.sf-error { color: var(--wax-dark); font-weight: 700; margin-top: 1rem; }

/* ── Desktop: nothing folded ────────────────────────────────────────────────
   Leyan's own split — "mobile can be a folded options, and desktop can be expanded
   buttons". There is room on a laptop, so the toggle goes and every action is out. */
@media (min-width: 46rem) {
  .sf-app:has(#screen-home:not([hidden])) .sf-sheet { max-width: 70rem; }
  .sf-shelf { grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); }
  .sf-more { display: none; }
  .sf-card__rest { display: flex !important; }   /* beats the hidden attribute, on purpose */
}

/* :has() is young enough to be worth a fallback — without it the shelf simply stays one
   column on a laptop, which is a smaller loss than a broken page. */
@supports not selector(:has(*)) {
  @media (min-width: 62rem) {
    .sf-sheet { max-width: 70rem; }
  }
}

/* ── The forge ─────────────────────────────────────────────────────────────── */

.sf-dots { display: flex; gap: 5px; flex: 1 1 auto; justify-content: center; flex-wrap: wrap; }

.sf-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--parchment-dark);
}

.sf-dot--now { background: var(--ink); transform: scale(1.25); }
.sf-dot--hit { background: #b8531f; }
.sf-dot--miss { background: var(--ink-faint); }

.sf-count { font-size: 0.85rem; color: var(--ink-soft); }

.sf-item, .sf-verdict { margin-top: clamp(1rem, 5vh, 2.5rem); }

.sf-meaning {
  font-size: clamp(1.1rem, 4.6vw, 1.4rem);
  font-style: italic;
  line-height: 1.5;
  text-align: center;
  color: var(--ink-soft);
  margin-bottom: 1rem;
}

.sf-scene {
  font-size: clamp(1.15rem, 5vw, 1.5rem);
  line-height: 1.65;
  margin-bottom: 1.4rem;
}

/* The four multiple-choice buttons used to live here. They are gone: Leyan asked for typing
   from the first day, on the grounds that picking the right words out of four is recognition
   and recognition is not the skill a composition needs. */

.sf-typing { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.sf-typing input {
  flex: 1 1 14rem;
  min-height: 52px;
  padding: 0.6rem 0.85rem;
  font-family: inherit;
  font-size: 1.05rem; /* never below 1rem: iOS zooms the whole page on a smaller input */
  color: var(--ink);
  background: #fffdf6;
  border: 2px solid var(--parchment-dark);
  border-radius: 12px;
}

.sf-typing input:focus-visible { outline: 3px solid var(--gold-deep); outline-offset: 1px; }

.sf-copy-label { flex: 1 0 100%; font-size: 0.95rem; color: var(--ink-soft); }

/* ── The help ladder ───────────────────────────────────────────────────────────
   Leyan's four rungs. The first two show here as a half-written phrase; the third
   opens the story; the fourth takes it away again.
   ──────────────────────────────────────────────────────────────────────────── */

/* Monospace, so every blank is the same width and the gaps line up like a puzzle
   rather than like a sentence with holes punched in it. */
.sf-hint {
  margin: 0 0 1.2rem;
  padding: 0.7rem 0.9rem;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: clamp(1.05rem, 4.4vw, 1.3rem);
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--ink);
  background: #fff8e3;
  border: 2px dashed var(--gold-deep);
  border-radius: 12px;
}

/* Findable, not tempting — the same reasoning as the skip button, but one step louder,
   because asking for a hint is a good thing to do and giving up is not. */
.sf-help {
  display: block;
  width: 100%;
  min-height: 48px;
  margin-top: 1.4rem;
  padding: 0.6rem;
  font-family: inherit;
  font-size: 0.98rem;
  color: var(--ink);
  background: #fff8e3;
  border: 2px solid var(--parchment-dark);
  border-radius: 12px;
  cursor: pointer;
}
.sf-help:active { background: var(--parchment-dark); }
.sf-help:disabled { opacity: 0.6; cursor: default; }

/* A phone held sideways is 320px tall, and the ladder adds a whole line to a screen that
   already had a meaning, a scene and a box on it. Without this the hint pushes the writing
   box off the bottom — which a layout test caught, and no unit test ever would have. */
/* ── THE CHIPS (levels 0–1) ───────────────────────────────────────────────────
   The answer line on top, the pool underneath, and the two look DIFFERENT on purpose: a
   child glancing at the screen has to see at once which words are already spent. Chips are
   finger-sized rather than text-sized — this rung exists to be easy on an iPad, and a 12px
   target is not easy on anything. */
.sf-tap { margin: 0 0 1rem; }

.sf-tap__line {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  min-height: 3.6rem;
  margin: 0 0 0.9rem;
  padding: 0.45rem 0.5rem;
  background: #fff8e3;
  border: 2px dashed var(--gold-deep);
  border-radius: 12px;
}

.sf-tap__pool {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: center;
}

/* 44px in BOTH directions, floor. "to" is a two-letter word and still has to be as easy to
   hit as "tremble" — a chip you miss is a wrong answer you never meant to give. */
.sf-chip {
  min-height: 2.9rem;
  min-width: 2.9rem;
  padding: 0.45rem 0.85rem;
  font: inherit;
  font-size: clamp(1rem, 4vw, 1.15rem);
  color: var(--ink);
  background: #fff;
  border: 2px solid var(--gold-deep);
  border-radius: 999px;
  cursor: pointer;
  touch-action: manipulation;
}

.sf-chip:active { transform: translateY(1px); }

/* A placed word is filled in, so the line reads as the answer taking shape rather than as a
   second pile of the same thing. */
.sf-chip--placed {
  background: var(--gold-deep);
  color: #fff8e3;
  border-color: var(--gold-deep);
}

.sf-chip__ghost {
  padding: 0.45rem 0.6rem;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

@media (max-height: 440px) {
  .sf-item, .sf-verdict, .sf-reveal { margin-top: 0.5rem; }
  .sf-meaning { margin-bottom: 0.45rem; }
  .sf-scene { margin-bottom: 0.55rem; }
  .sf-hint { margin-bottom: 0.55rem; padding: 0.4rem 0.7rem; }
  .sf-help { margin-top: 0.7rem; }
  .sf-tap { margin-bottom: 0.4rem; }
  .sf-tap__line { min-height: 2.6rem; margin-bottom: 0.4rem; padding: 0.3rem 0.4rem; }
}

.sf-reveal { margin-top: clamp(1rem, 5vh, 2.5rem); text-align: center; }
.sf-reveal__label { font-size: 0.95rem; color: var(--ink-soft); }

.sf-reveal__answer {
  margin: 0.5rem 0 0.3rem;
  font-size: clamp(1.2rem, 5.2vw, 1.6rem);
  font-weight: 700;
  line-height: 1.4;
  color: #8f3d10;
}

.sf-reveal__meaning { color: var(--ink-soft); font-style: italic; margin-bottom: 1.1rem; }

/* His own book's paragraph, set like a page rather than like a UI panel: this is the one
   place in the app where the job is READING, so it is left-aligned and given room. */
.sf-para {
  margin: 0 0 1.2rem;
  padding: 1rem 1.1rem;
  text-align: left;
  font-size: clamp(1.02rem, 4.3vw, 1.2rem);
  line-height: 1.7;
  background: #fffdf6;
  border-left: 4px solid var(--gold-deep);
  border-radius: 0 12px 12px 0;
}
.sf-para p + p { margin-top: 0.8rem; }
.sf-para__gold { color: #8f3d10; background: #fff2c9; padding: 0 0.15em; border-radius: 4px; }

/* Quiet on purpose: a way out should be findable, never inviting. It sits below the answer
   so a thumb reaching for an option cannot hit it by accident. */
.sf-skip {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: 1.6rem;
  padding: 0.6rem;
  border: 0;
  background: none;
  color: var(--ink-soft);
  font-family: inherit;
  font-size: 0.88rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.sf-skip:active { color: var(--ink); }

.sf-verdict { text-align: center; }
.sf-verdict__line { font-size: clamp(1.4rem, 6vw, 1.9rem); font-weight: 700; }
.sf-verdict--hit .sf-verdict__line { color: #8f3d10; }
.sf-verdict--miss .sf-verdict__line { color: var(--ink-soft); }

.sf-verdict__answer {
  margin: 0.7rem 0 0.3rem;
  font-size: clamp(1.15rem, 5vw, 1.5rem);
  font-weight: 700;
  line-height: 1.4;
}

.sf-verdict__meaning { color: var(--ink-soft); font-style: italic; margin-bottom: 1.2rem; }
.sf-verdict .sf-typing { text-align: left; }
.sf-next { margin-top: 0.6rem; }

/* ── The end of a session ──────────────────────────────────────────────────── */

.sf-done-title { font-size: clamp(1.5rem, 7vw, 2.1rem); margin-bottom: 0.6rem; }
.sf-done-line { line-height: 1.55; margin-bottom: 1.2rem; }
.sf-done-list { list-style: none; margin-bottom: 1.4rem; }
.sf-done-list li { padding: 0.4rem 0; border-bottom: 1px solid var(--parchment-dark); line-height: 1.4; }
.sf-done-list small { color: var(--ink-soft); }

/* ── Adding a story ────────────────────────────────────────────────────────── */

.sf-note--lead { margin-top: 0; font-size: 1.02rem; color: var(--ink); }

/* Two numbered steps: get a story, then add it. The numbers are the whole navigation. */
.sf-step { margin-bottom: 1.8rem; }

.sf-step__title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.sf-step__no {
  flex: 0 0 auto;
  width: 1.7rem;
  height: 1.7rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #7d3210;
  color: #fff4dd;
  font-size: 0.95rem;
}

.sf-step__lead { line-height: 1.55; margin-bottom: 0.8rem; font-size: 0.98rem; }

/* The prompt itself. Monospace and scrollable, because it is text to be copied rather than
   read for pleasure — and capped in height so it never buries the button under it. */
.sf-prompt {
  max-height: 14rem;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0.8rem 0.9rem;
  margin-bottom: 0.7rem;
  background: #fffdf6;
  border: 2px solid var(--parchment-dark);
  border-radius: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.82rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--ink);
  user-select: all;               /* one tap selects the lot, if the button ever fails */
}

.sf-prompt:focus-visible { outline: 3px solid var(--gold-deep); outline-offset: 2px; }

.sf-tip {
  margin-top: 0.7rem;
  padding: 0.6rem 0.8rem;
  border-left: 4px solid var(--gold);
  background: var(--parchment);
  border-radius: 0 10px 10px 0;
  font-size: 0.9rem;
  line-height: 1.5;
}

/* The file picker IS the button. A bare <input type="file"> paints a tiny system control
   no thumb can hit, so the input is visually hidden and this label carries the tap. */
.sf-pick {
  display: block;
  padding: clamp(1.2rem, 5vw, 1.8rem) 1rem;
  border: 3px dashed var(--parchment-dark);
  border-radius: 18px;
  background: var(--parchment);
  text-align: center;
  cursor: pointer;
}

.sf-pick:active { transform: translateY(2px); }
.sf-pick:hover { background: var(--parchment-lit); }
.sf-pick__icon { display: block; font-size: clamp(2rem, 8vw, 2.6rem); line-height: 1; }
.sf-pick__lead { display: block; font-size: clamp(1.15rem, 5vw, 1.4rem); font-weight: 700; margin-top: 0.4rem; }
.sf-pick__sub { display: block; font-size: 0.9rem; color: var(--ink-soft); margin-top: 0.3rem; }

/* Focus lives on the hidden input, so the ring has to be drawn on the label it belongs to. */
#add-file:focus-visible + .sf-pick { outline: 3px solid var(--gold-deep); outline-offset: 3px; }

.sf-fallback { margin-top: 1.4rem; }
.sf-fallback summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.95rem;
  color: var(--ink-soft);
  cursor: pointer;
  list-style: none;               /* the default marker is lost to display:flex anyway */
}
.sf-fallback summary::-webkit-details-marker { display: none; }

/* Drawn back by hand: without a triangle the line reads as a sentence rather than
   something you can tap, and nobody finds the paste box. */
.sf-fallback summary::before {
  content: '▸';
  display: inline-block;
  transition: transform 120ms ease;
}
.sf-fallback[open] summary::before { transform: rotate(90deg); }
.sf-fallback[open] summary { margin-bottom: 0.6rem; }

#add-html {
  width: 100%;
  min-height: 9rem;
  padding: 0.7rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1rem;
  color: var(--ink);
  background: #fffdf6;
  border: 2px solid var(--parchment-dark);
  border-radius: 12px;
  margin-bottom: 0.8rem;
}

/* ── The board ─────────────────────────────────────────────────────────────── */

.sf-board { list-style: none; margin-bottom: 1.6rem; }

.sf-board__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.8rem;
  justify-content: space-between;
  padding: 0.6rem 0.4rem;
  border-bottom: 1px solid var(--parchment-dark);
}

.sf-board__row b { text-transform: capitalize; }
.sf-board__row span { color: var(--ink-soft); font-size: 0.9rem; }
.sf-board__row--me { background: var(--parchment); border-radius: 8px; }

.sf-rules {
  padding: 1rem 1.1rem;
  border: 2px dashed var(--parchment-dark);
  border-radius: 14px;
  background: var(--parchment);
}

.sf-rules h3 { margin-bottom: 0.5rem; }
.sf-rules p { line-height: 1.55; margin-bottom: 0.6rem; font-size: 0.95rem; }
.sf-rules p:last-child { margin-bottom: 0; }

/* ── The panel used only by the signed-out screen ──────────────────────────── */

.sf-panel {
  padding: 1.2rem;
  border: 2px solid var(--parchment-dark);
  border-radius: 14px;
  background: var(--parchment);
}

.sf-panel h2 { margin-bottom: 0.5rem; }
.sf-panel p { line-height: 1.55; margin-bottom: 0.8rem; }

/* The forge screen's own title, between the back arrow and the counter. */
.sf-forge-book {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--ink-soft);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── CHOOSE YOUR CHALLENGE ────────────────────────────────────────────────────
   Three prices, one chosen. It sits above the question because tapping it CHANGES the
   question — a switcher below the thing it switches reads as an afterthought. */
.sf-pick-challenge {
  display: flex;
  gap: 0.4rem;
  margin: 0 0 1rem;
}

.sf-chal {
  flex: 1 1 0;
  min-height: 3rem;
  padding: 0.4rem 0.3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  font: inherit;
  font-size: 0.8rem;
  line-height: 1.15;
  text-align: center;
  color: var(--ink-soft);
  background: #fff;
  border: 2px solid #e6dcc4;
  border-radius: 12px;
  cursor: pointer;
  touch-action: manipulation;
}

/* The chosen one is filled, not merely outlined: on a small screen a 2px border difference
   is not an answer to "which one am I doing?". */
.sf-chal--on {
  color: var(--ink);
  background: #fff8e3;
  border-color: var(--gold-deep);
  font-weight: 700;
}

.sf-chal__name { display: block; }
.sf-chal__price { display: block; font-size: 0.72rem; opacity: 0.85; }

.sf-purse {
  margin: 0 0 0.6rem;
  font-size: 0.85rem;
  text-align: center;
  color: var(--ink-soft);
}

.sf-done-coins {
  margin: 0.2rem 0 1rem;
  font-size: 1.05rem;
  font-weight: 700;
  text-align: center;
  color: var(--gold-deep);
}

@media (max-height: 440px) {
  .sf-pick-challenge { margin-bottom: 0.5rem; }
  .sf-purse { margin-bottom: 0.3rem; }
}

/* The chapter gate on a book card. Quiet when everything is open, loud when there is a door
   with a price on it. */
.sf-card__chapters {
  margin: 0.15rem 0 0.6rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* "You have seen the answer; this one is for you." Marked out from the question so it never
   reads as the app having ignored him and asked again. */
.sf-practice-note {
  margin: 0 0 0.7rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.6rem;
  background: rgba(242, 182, 50, 0.16);
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--ink);
}

/* A story he is already inside. Warm rather than grey: this is an invitation back, not a
   status line — the bookmark's whole job is to be a reason to tap Read. */
.sf-card__mark {
  margin: 0.15rem 0 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #8f3d10;
}

/* The same purse as the forge's, but on the shelf, where the prices are. Given a little more
   presence here because it is answering a question he asked out loud. */
.sf-purse--home {
  margin: -0.35rem 0 0.9rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
}

.sf-unlock {
  width: 100%;
  min-height: 48px;
  margin-top: 0.5rem;
  padding: 0.5rem 0.8rem;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  background: #fff8e3;
  border: 2px solid var(--gold-deep);
  border-radius: 12px;
  cursor: pointer;
}

.sf-unlock:active { transform: translateY(2px); }
.sf-unlock[disabled] { opacity: 0.55; cursor: default; transform: none; }