/* Create: the options popover, the word sheet and the mode indicators. Loaded
   after tiles.css. Controls here reuse the tile classes (.btn, .setting-row,
   .flow-link, .choice-option), so they take its material and press as they are;
   this file only arranges them and adds the wells and states tiles.css has no
   selector for. */

/* ------------------------------------------------------------ Create screen */
/* Fixed rows, so a pool arriving after first paint can't move the page. */
:root .generate.create-flow .suggestion-rail { grid-auto-rows: 44px; }
:root .generate.create-flow .sugg {
  height: 100%; min-height: 0; padding: 4px 10px; line-height: 18px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.quota-free { align-items: center; gap: 6px; color: var(--ink); font-weight: 600; }
.quota-free > svg { flex: none; color: var(--accent); stroke-width: 2.4; }

/* The Puzzle options row: its label, then what will run. */
.generate.create-flow .options-copy { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 1px; text-align: left; }
.generate.create-flow .options-copy .options-summary { margin: 0; line-height: 18px; overflow-wrap: anywhere; }
.options-name { font-size: 15px; line-height: 20px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
:root .generate.create-flow .flow-link { min-height: 60px; padding-block: 8px; }

.words-status {
  display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 12px; min-height: 60px;
  background: var(--tile); border-radius: var(--radius);
  box-shadow: var(--hi), 0 3px 0 var(--accent-lip), 0 4px 2px var(--contact);
}
.words-status-copy { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 1px; }
.words-status-copy strong { font-size: 14px; line-height: 20px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); overflow-wrap: anywhere; }
.words-status-copy small { font-size: 13px; line-height: 18px; color: var(--ink-soft); }
:root .words-status .btn { --tile-bg: var(--tile-2); flex: none; min-height: 44px; min-width: 44px; padding: 8px 10px; }
:root .words-status .words-remove { display: grid; place-items: center; padding: 0; width: 44px; }

/* ------------------------------------------------------------------ popover */
.options-scrim {
  position: fixed; inset: 0; z-index: 200; background: var(--scrim);
  opacity: 0; transition: opacity 120ms ease;
}
.options-scrim.in { opacity: 1; }
:root .options-pop.generate.create-flow {
  position: fixed; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px;
  width: min(380px, calc(100vw - 24px)); min-height: 0; margin: 0; padding: 14px 12px 12px;
  background: var(--floor); color: var(--ink); border-radius: 18px;
  box-shadow: inset 0 2px 0 var(--wall), 0 3px 0 var(--wall), var(--shadow);
  outline: 0; animation: menu-rise 120ms ease-out;
}
/* The notch that ties the panel to its row. */
.options-pop[data-side="above"]::after, .options-pop[data-side="below"]::after {
  content: ''; position: absolute; left: var(--caret-x, 50%); width: 14px; height: 14px;
  margin-left: -7px; background: var(--floor); transform: rotate(45deg); border-radius: 3px;
}
.options-pop[data-side="above"]::after { bottom: -6px; box-shadow: 3px 3px 0 var(--wall); }
.options-pop[data-side="below"]::after { top: -6px; }
.options-scroll {
  display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; min-height: 0; overflow-y: auto;
  overscroll-behavior: contain; padding: 2px 2px 5px; margin: -2px -2px -5px;
}
.options-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.options-title { font-family: var(--ui-headline); font-size: 21px; line-height: 1.2; font-weight: 900; letter-spacing: -.045em; }
:root .generate.create-flow .options-head .flow-guide-link { flex: none; display: grid; place-items: center; width: 44px; height: 44px; min-height: 44px; padding: 0; }
:root .options-foot.view { flex: none; display: block; width: auto; max-width: none; margin: 0; padding: 2px 2px 3px; min-height: 0; }
:root .options-pop .options-done { width: 100%; min-height: 48px; padding: 10px; font-size: 15px; }
.options-pop .setting-value { display: inline-flex; align-items: center; gap: 6px; }

/* ----------------------------------------------------------- choice sheets */
.choice-icon {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 10px;
  background: var(--well); color: var(--ink); box-shadow: inset 0 1px 0 var(--well-shade);
}
.choice-option .choice-copy { flex: 1; }
.option-guide-entry { display: flex; flex-direction: column; gap: 4px; }
.option-guide-entry h3 { font-size: 16px; line-height: 22px; color: var(--ink); }
.option-guide-entry p { font-size: 14px; line-height: 21px; color: var(--ink-soft); }

/* -------------------------------------------------------------- word sheet */
:root .sheet.words-sheet.generate.create-flow {
  --room: var(--sheet-room, 100dvh);
  box-sizing: border-box; min-height: 0; height: calc(var(--room) - 8px); max-height: calc(var(--room) - 8px);
  max-width: 640px; gap: 12px; overflow: hidden; outline: 0;
}
.words-sheet .sheet-title { flex: none; font-size: 22px; gap: 12px; }
.words-sheet .sheet-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  gap: 12px; padding: 4px 4px 8px; margin: -4px; color: var(--ink);
}
.words-sheet .sheet-actions { flex: none; padding-bottom: 3px; }
:root .words-sheet .word-save { flex: 2; }

.style-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
:root .style-choices .choice-option { align-items: flex-start; gap: 8px; min-height: 76px; padding: 12px; }
.style-choices .choice-copy strong { font-size: 15px; }
.style-choices .choice-mark { width: 22px; height: 22px; }

/* A row that doesn't apply sits out of the material, like a disabled button. */
:root .generate.create-flow .setting-row:disabled {
  --tile-bg: var(--well); --tile-ink: var(--well-ink); --tile-l: 0px; --tile-cs: transparent; cursor: default;
}
:root .generate.create-flow .setting-row:disabled :is(.setting-label, .setting-value) { color: var(--well-ink); font-weight: 500; }
:root .generate.create-flow .setting-row:disabled > svg { display: none; }
.setting-reason { margin-top: 6px; font-size: 13px; line-height: 18px; color: var(--ink-soft); }
.words-sheet .setting-field { padding-bottom: 3px; flex: none; }

:root .sheet .word-list-label { margin-top: 2px; color: var(--ink-soft); font-size: 12px; letter-spacing: .06em; }
.word-rows { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.word-row { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 6px 8px; align-items: start; }
.word-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; min-width: 0; }
.word-error { grid-column: 1 / -1; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--bad-ink); }
.word-field {
  box-sizing: border-box; width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px;
  font-size: 16px; line-height: 22px; color: var(--ink); background: var(--well); border: 0;
  border-radius: 12px; outline: 0;
  box-shadow: inset 0 1px 0 var(--well-shade), inset 0 3px 3px -1px color-mix(in srgb, var(--well-shade) 45%, transparent), 0 1px 0 var(--well-rim);
}
.word-field::placeholder { color: var(--well-ink); opacity: 1; }
.word-field:focus { box-shadow: inset 0 1px 0 var(--well-shade), inset 0 0 0 2px var(--accent), 0 1px 0 var(--well-rim); }
:root .sheet .word-field:focus-visible { outline: 0; }
.word-field[aria-invalid] { box-shadow: inset 0 0 0 2px var(--bad-ink), 0 1px 0 var(--well-rim); }
:root .sheet .word-remove { display: grid; place-items: center; width: 44px; min-height: 44px; height: 44px; padding: 0; color: var(--ink); }

.word-add-row { display: flex; align-items: center; gap: 12px; padding-bottom: 3px; }
:root .sheet .word-add { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 14px; flex: none; font-size: 15px; }
.word-add > svg { flex: none; stroke-width: 2.4; }
.word-count { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.word-disclaimer {
  display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px;
  font-size: 13px; line-height: 19px; color: var(--ink-soft);
}
.word-disclaimer > svg { margin-top: 2px; color: var(--accent); }
.word-notice { font-size: 13px; line-height: 19px; color: var(--ink); }
.word-problem { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--bad-ink); }

/* Room for the two fields side by side, so the list reads as a table. */
@media (min-width: 560px) {
  .word-fields { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 8px; }
}
@media (min-width: 560px) and (min-height: 561px) {
  :root .sheet.words-sheet.generate.create-flow { height: min(calc(var(--room) - 48px), 760px); max-height: calc(var(--room) - 48px); }
}
/* A phone on its side: the header and actions give the list what they can. */
@media (orientation: landscape) and (max-height: 500px) {
  :root .sheet.words-sheet.generate.create-flow { padding: 8px 16px; gap: 8px; }
  .words-sheet .sheet-title { font-size: 18px; }
  :root .words-sheet .sheet-x { margin-block: -2px; }
  :root .words-sheet .sheet-actions .btn { min-height: 44px; }
  :root .style-choices .choice-option { min-height: 64px; padding: 8px 10px; }
  :root .generate.create-flow .suggestion-rail { grid-template-columns: repeat(3, 1fr); }
}
@media (max-height: 700px) {
  :root .options-pop.generate.create-flow { padding-top: 10px; }
}

/* tiles.css stills presses inside .view and .sheet; the popover is neither. */
@media (prefers-reduced-motion: reduce) {
  :root .options-pop :is(:active, .down):not(:disabled) { transform: none !important; }
}