/* YAT — device setup: the page list, the picker, the settings form.
   Same print language as the rest of the site: hairline rules, square
   corners, one accent. A page on the device is presented the way a listing
   presents an item — small plate, name, facts, then the actions. */

.next-link { margin-top: 1.4rem; font-size: 0.92rem; }
.next-link a { border-bottom-color: var(--seal); }

.pages-connect {
  display: flex; flex-wrap: wrap; gap: 0.6rem 0.9rem; align-items: center;
  margin-bottom: 0.9rem;
}
.pages-connect .small { max-width: 30rem; }

/* ---------- the pages on the device ---------- */

.pages-list { border-top: 1px solid var(--ink); }

/* Both rules below out-specify tools.css's "dim everything in a locked step".
   In this step the connect button is the one thing that DOES work, and the
   placeholder is the instruction — neither should read as disabled. */
.step[data-state="locked"] .step-body > .pages-connect.always-on { opacity: 1; }

/* Before a device is connected there is no list to rule off — a hairline over
   blank space reads as a broken page, so the space says what it is waiting
   for instead (the same treatment tools.css gives the locked console). */
.pages-list:empty { border-top: 0; }
.step[data-state="locked"] .step-body > .pages-list:empty {
  opacity: 1;
  border: 1px dashed var(--rule); background: var(--paper-2);
  min-height: 6.5rem; padding: 1rem;
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.step[data-state="locked"] .step-body > .pages-list:empty::before {
  content: "連接裝置之後，佢而家放緊嘅頁面會喺呢度出現。The pages on your device appear here once it is connected.";
  font-size: 0.85rem; line-height: 1.5; color: var(--ink-3); max-width: 32rem;
}
.pages-empty {
  border-bottom: 1px solid var(--rule); padding: 1.2rem 0;
  color: var(--ink-3); font-size: 0.95rem;
}
.pages-empty .en { display: block; font-size: 0.86em; }

.pg {
  display: grid; grid-template-columns: 8.5rem 1fr; gap: 0 1.1rem;
  padding: 1rem 0; border-bottom: 1px solid var(--rule);
  position: relative;
}
.pg.is-active { background: #fff; box-shadow: inset 3px 0 0 var(--seal); padding-left: 0.9rem; }

.pg-shot { border: 1px solid var(--rule); background: #fff; padding: 3px; line-height: 0; align-self: start; }
.pg-shot img { display: block; width: 100%; height: auto; }
.pg-shot.placeholder { aspect-ratio: 800 / 480; background: var(--paper-2); border-style: dashed; }

.pg-name { font-family: var(--serif); font-size: 1.12rem; line-height: 1.25; }
.pg-name .en { display: block; font-family: var(--sans); font-size: 0.6em; color: var(--ink-3); margin-top: 0.1rem; }

.pg-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.45rem 0 0.5rem; }
.pg-tag {
  font-family: var(--sans); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-3); border: 1px solid var(--rule);
  padding: 0.1rem 0.4rem;
}
.pg-tag.now { color: #fff; background: var(--seal); border-color: var(--seal); letter-spacing: 0.06em; }
.pg-tag.order { font-variant-numeric: tabular-nums; }

.pg-params { font-size: 0.8rem; color: var(--ink-3); margin: 0 0 0.35rem; word-break: break-word; }
.pg-words { font-size: 0.82rem; color: var(--ink-2); margin: 0 0 0.6rem; }
.pg-words-label { color: var(--ink-3); }

.pg-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pg-btn {
  font-family: var(--sans); font-size: 0.78rem; line-height: 1.2;
  background: #fff; color: var(--ink); border: 1px solid var(--rule);
  padding: 0.4rem 0.7rem; cursor: pointer;
}
.pg-btn:hover:not(:disabled) { border-color: var(--ink); }
.pg-btn.primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pg-btn.primary:hover { background: var(--seal); border-color: var(--seal); }
.pg-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.pg-btn.danger { border-color: var(--seal); color: var(--seal); }
.pg-btn.danger:hover { background: var(--seal); color: #fff; }
.pg-confirm { font-size: 0.85rem; align-self: center; margin-right: 0.3rem; }
.pg-confirm .en { color: var(--ink-3); font-size: 0.86em; margin-left: 0.4rem; }

/* ---------- picker: the gallery, inline ---------- */

.picker, .installer {
  border: 1px solid var(--ink); background: var(--paper-2);
  padding: 1.1rem 1.2rem; margin-top: 1.3rem;
}
.picker-head, .inst-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  border-bottom: 1px solid var(--rule); padding-bottom: 0.55rem; margin-bottom: 0.9rem;
}
.picker-title, .inst-title { font-family: var(--serif); font-size: 1.2rem; }
.picker-title .en, .inst-title .en {
  display: block; font-family: var(--sans); font-size: 0.58em; color: var(--ink-3); margin-top: 0.1rem;
}
.inst-close {
  background: none; border: 0; font-size: 1.5rem; line-height: 1; color: var(--ink-3);
  cursor: pointer; padding: 0 0.2rem; flex: none;
}
.inst-close:hover { color: var(--seal); }

.picker-grid {
  display: grid; gap: 0.9rem;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
}
.pick {
  display: flex; flex-direction: column; gap: 0.4rem; text-align: left;
  background: #fff; border: 1px solid var(--rule); padding: 0.5rem; cursor: pointer;
  font: inherit; color: var(--ink);
}
.pick:hover { border-color: var(--ink); }
.pick:focus-visible { outline: 2px solid var(--seal); outline-offset: 2px; }
.pick-shot { display: block; width: 100%; height: auto; aspect-ratio: 800 / 480; object-fit: cover; background: var(--paper-2); }
.pick-shot.placeholder {
  border: 1px dashed var(--rule); background: var(--paper-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; color: var(--ink-3); line-height: 1;
}
.pick-name { font-family: var(--serif); font-size: 0.95rem; line-height: 1.25; }
.pick-name .en { display: block; font-family: var(--sans); font-size: 0.62em; color: var(--ink-3); }
.pick-flag {
  font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--seal);
}

/* ---------- installer ---------- */

.inst-shot { border: 1px solid var(--rule); background: #fff; padding: 4px; line-height: 0; max-width: 22rem; }
.inst-shot img { display: block; width: 100%; height: auto; }
.inst-desc { font-size: 0.9rem; color: var(--ink-2); margin: 0.8rem 0 0.9rem; }
.inst-desc .en { display: block; color: var(--ink-3); font-size: 0.92em; margin-top: 0.25rem; }
.inst-source {
  font-size: 0.82rem; color: var(--ink-2); margin: 0 0 0.9rem;
  border-left: 3px solid var(--rule); padding-left: 0.7rem;
}
.inst-source .en { display: block; color: var(--ink-3); font-size: 0.92em; margin-top: 0.15rem; }

.inst-flag {
  font-size: 0.85rem; color: var(--ink-2); border-left: 3px solid var(--ink-3);
  background: #fff; padding: 0.5rem 0.75rem; margin: 0 0 0.9rem;
}
.inst-flag .en { display: block; color: var(--ink-3); font-size: 0.9em; }

.inst-sec { border-top: 1px solid var(--rule); padding-top: 0.9rem; margin-top: 1rem; }
.inst-h { font-family: var(--serif); font-size: 1.02rem; margin-bottom: 0.6rem; }
.inst-h .en { display: block; font-family: var(--sans); font-size: 0.62em; color: var(--ink-3); }
.inst-help { font-size: 0.85rem; color: var(--ink-2); margin-bottom: 0.7rem; }
.inst-help .en { display: block; color: var(--ink-3); font-size: 0.9em; }

.inst-actions { margin-top: 1.2rem; align-items: center; }
.inst-errors { margin-top: 1rem; border-left: 3px solid var(--seal); background: var(--seal-wash); padding: 0.7rem 0.9rem; }
.inst-err-head { font-size: 0.85rem; font-weight: 600; margin: 0 0 0.3rem; }
.inst-err { font-size: 0.85rem; color: var(--ink-2); margin: 0 0 0.2rem; }

/* ---------- generated parameter form ---------- */

.pf { display: grid; gap: 1rem; }
.pf-field { max-width: 34rem; }
.pf-field.is-locked { opacity: 0.7; }
.pf-field.has-error input, .pf-field.has-error select, .pf-field.has-error textarea { border-color: var(--seal); }

.pf-label { display: block; font-size: 0.88rem; color: var(--ink); margin-bottom: 0.3rem; }
.pf-title { color: var(--ink-2); }
.pf-req {
  margin-left: 0.45rem; font-family: var(--sans); font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--seal);
}
.pf-help { font-size: 0.78rem; color: var(--ink-3); margin: 0.3rem 0 0; line-height: 1.5; }
.pf-help .en { display: block; opacity: 0.85; }
.pf-locked { font-size: 0.78rem; color: var(--seal); margin: 0.3rem 0 0; }
.pf-none { font-size: 0.95rem; margin-bottom: 0.2rem; }

.pf input[type="text"], .pf input[type="number"], .pf input[type="date"], .pf select, .pf textarea {
  font-family: var(--sans); font-size: 0.95rem; color: var(--ink);
  background: #fff; border: 1px solid var(--rule); border-radius: 0;
  padding: 0.55rem 0.7rem; width: 100%; max-width: 24rem;
}
.pf textarea { font-family: var(--mono); font-size: 0.85rem; line-height: 1.5; resize: vertical; }
.pf input:disabled, .pf select:disabled { background: var(--paper-3); color: var(--ink-3); }

.pf-geo { display: flex; flex-wrap: wrap; gap: 0.4rem 0.7rem; align-items: center; margin-top: 0.5rem; }
.pf-geo .pf-help { margin: 0; }

.pf-check { display: flex; gap: 0.5rem; align-items: center; font-size: 0.9rem; cursor: pointer; }
.pf-check input { accent-color: var(--seal); }
.pf-multi { display: grid; gap: 0.3rem; }

.pf-rows { display: grid; gap: 0.6rem; }
.pf-row {
  display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: flex-end;
  background: #fff; border: 1px solid var(--rule); padding: 0.6rem 0.7rem;
}
.pf-cell { display: flex; flex-direction: column; gap: 0.2rem; flex: 1 1 8rem; }
.pf-cell-label { font-size: 0.7rem; color: var(--ink-3); letter-spacing: 0.04em; }
.pf-cell input, .pf-cell select { max-width: none; }
.pf-rowdel, .pf-rowadd { font-family: var(--sans); font-size: 0.75rem; cursor: pointer; }
.pf-rowdel { background: none; border: 1px solid var(--rule); padding: 0.35rem 0.6rem; color: var(--ink-2); }
.pf-rowdel:hover:not(:disabled) { border-color: var(--seal); color: var(--seal); }
.pf-rowdel:disabled { opacity: 0.3; cursor: not-allowed; }

/* ---------- stop/route pickers (pack-picker.js) ---------- */

.pf-picker-wrap { max-width: 28rem; }
.pk-chosen {
  display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
  border: 1px solid var(--rule); background: #fff; padding: 0.5rem 0.7rem;
}
.pk-chosen-text { font-size: 0.92rem; color: var(--ink); flex: 1 1 auto; min-width: 6rem; }
.pk-chosen-text:empty::before { content: "未揀 — 撳「搵」開始 Not picked yet"; color: var(--ink-3); }
.pk-open { flex: none; }

.pk-panel {
  border: 1px solid var(--ink); background: var(--paper-2); margin-top: 0.6rem;
  padding: 0.8rem 0.9rem; max-height: 22rem; overflow-y: auto;
}
.pk-head {
  display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem;
  padding-bottom: 0.5rem; border-bottom: 1px solid var(--rule);
}
.pk-title { font-family: var(--serif); font-size: 0.98rem; flex: 1 1 auto; }
.pk-title .en { display: block; font-family: var(--sans); font-size: 0.6em; color: var(--ink-3); }
.pk-back {
  font-family: var(--sans); font-size: 0.76rem; background: none; border: 0;
  color: var(--ink-2); cursor: pointer; padding: 0.1rem 0; flex: none;
}
.pk-back:hover { color: var(--seal); }
.pk-close {
  background: none; border: 0; font-size: 1.3rem; line-height: 1; color: var(--ink-3);
  cursor: pointer; padding: 0 0.15rem; flex: none;
}
.pk-close:hover { color: var(--seal); }

.pk-search {
  font-family: var(--sans); font-size: 0.92rem; color: var(--ink);
  background: #fff; border: 1px solid var(--rule); border-radius: 0;
  padding: 0.5rem 0.65rem; width: 100%; margin-bottom: 0.55rem;
}
.pk-msg { margin: 0 0 0.4rem; min-height: 1.1em; }
.pk-note { margin-bottom: 0.6rem; }

.pk-results { display: grid; gap: 0.3rem; }
.pk-row {
  display: block; width: 100%; text-align: left; font: inherit;
  background: #fff; border: 1px solid var(--rule); color: var(--ink);
  padding: 0.45rem 0.65rem; cursor: pointer; font-size: 0.88rem;
}
.pk-row:hover, .pk-row:focus-visible { border-color: var(--seal); outline: none; }
.pk-row .en { display: block; color: var(--ink-3); font-size: 0.84em; margin-top: 0.1rem; }

.pk-regions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pk-regions .pk-row { width: auto; flex: 1 1 8rem; text-align: center; }

/* ---------- keyword chips ---------- */

.kw-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.6rem; min-height: 1.9rem; }
.kw-empty { font-size: 0.82rem; color: var(--ink-3); }
.kw-chip {
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: #fff; border: 1px solid var(--ink); padding: 0.2rem 0.3rem 0.2rem 0.55rem;
  font-size: 0.85rem;
}
.kw-x {
  background: none; border: 0; color: var(--ink-3); cursor: pointer;
  font-size: 1rem; line-height: 1; padding: 0 0.25rem;
}
.kw-x:hover { color: var(--seal); }
.kw-chip.rom { border-style: dashed; color: var(--ink-2); }
.kw-kind {
  font-size: 0.6rem; letter-spacing: 0.08em; color: var(--ink-3);
  border-left: 1px solid var(--rule); padding-left: 0.3rem; margin-left: 0.1rem;
}
.kw-note { font-size: 0.76rem; color: var(--ink-3); margin: 0 0 0.6rem; line-height: 1.5; }
.kw-add { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.kw-add input { max-width: 14rem; }

/* ---------- voice step ---------- */

.voice-panel, .log-panel { margin-top: 1rem; border-top: 1px solid var(--rule); padding-top: 0.9rem; }
.voice-panel summary, .log-panel summary { cursor: pointer; font-size: 0.95rem; font-weight: 600; }
.voice-panel summary::marker, .log-panel summary::marker { color: var(--seal); }
.voice-panel[open] summary, .log-panel[open] summary { margin-bottom: 1rem; }
.log-panel { border-top: 0; margin-top: 0; }
.voice-explain { background: #fff; border: 1px solid var(--rule); padding: 1rem 1.15rem; margin-bottom: 1.2rem; }
.voice-explain .col-head { border-top: 0; padding-top: 0; margin-bottom: 0.7rem; }
.plain-list { list-style: none; margin: 0 0 0.8rem; padding: 0; }
.plain-list li {
  font-size: 0.9rem; color: var(--ink-2); line-height: 1.55;
  padding-left: 1.1rem; margin-bottom: 0.6rem; position: relative;
}
.plain-list li::before { content: "—"; position: absolute; left: 0; color: var(--seal); }
.plain-list .en { display: block; color: var(--ink-3); font-size: 0.86em; margin-top: 0.15rem; }

/* ---------- voice signup walkthrough ---------- */

.voice-guide { margin: 0 0 1.2rem; }
.voice-guide .col-head { margin-bottom: 0.3rem; }

.voice-steps { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 1.1rem; }
.voice-steps { counter-reset: vstep; }
.vstep {
  display: grid; grid-template-columns: 1fr 13rem; gap: 0.9rem 1.1rem; align-items: start;
  border-top: 1px solid var(--rule); padding-top: 1rem;
  counter-increment: vstep;
}
.vstep:first-child { border-top: 0; padding-top: 0; }
/* The number lives on the text paragraph, not the grid item itself — a
   ::before here is an inline box inside <p>, so it cannot become a stray
   third grid cell the way one on .vstep (a 2-column grid) would. */
.vstep-text::before {
  content: counter(vstep); font-family: var(--serif); font-size: 0.78rem; color: #fff;
  background: var(--seal); width: 1.4rem; height: 1.4rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  margin-right: 0.5rem; vertical-align: -0.35rem;
}
.vstep-text { font-size: 0.92rem; color: var(--ink-2); line-height: 1.55; margin: 0; }
.vstep-text .en { display: block; color: var(--ink-3); font-size: 0.88em; margin-top: 0.3rem; margin-left: 1.9rem; }
.vstep-text code { font-family: var(--mono); font-size: 0.9em; background: var(--paper-2); padding: 0.05em 0.3em; }

/* The illustration: a small mock browser frame in the site's own print style
   — hairline rules, no colour beyond the one accent — never a fabricated
   photo of a real product. role="img" + aria-label carries the description
   a real screenshot's alt text would; sighted readers get the same words in
   the step text beside it, so nothing here is only in the image. */
.vshot {
  margin: 0; border: 1px solid var(--ink); background: #fff; width: 13rem;
  font-family: var(--sans);
}
.vshot-chrome {
  display: flex; align-items: center; gap: 0.25rem; padding: 0.35rem 0.5rem;
  border-bottom: 1px solid var(--rule); background: var(--paper-2);
}
.vshot-chrome span {
  width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--rule); display: block;
}
.vshot-url {
  margin-left: 0.35rem; font-size: 0.6rem; color: var(--ink-3); letter-spacing: 0.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vshot-body { position: relative; min-height: 5.2rem; padding: 0.6rem; }
.vshot-center { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem; text-align: center; }
.vshot-btn {
  display: inline-block; font-size: 0.7rem; color: #fff; background: var(--ink);
  border: 1px solid var(--ink); padding: 0.3rem 0.6rem;
}
.vshot-btn.small { font-size: 0.62rem; padding: 0.2rem 0.45rem; }
.vshot-mail { display: grid; gap: 0.35rem; }
.vshot-line { height: 0.35rem; background: var(--paper-3); width: 100%; }
.vshot-line.short { width: 55%; }
.vshot-topright { display: flex; justify-content: flex-end; align-items: flex-start; gap: 0.4rem; }
.vshot-avatar { width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--paper-3); border: 1px solid var(--rule); flex: none; }
.vshot-menu {
  font-size: 0.65rem; border: 1px solid var(--ink); background: #fff; padding: 0.25rem 0.5rem; align-self: flex-start;
}
.vshot-side { display: flex; gap: 0.55rem; align-items: flex-start; }
.vshot-sidebar { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.6rem; color: var(--ink-3); flex: none; }
.vshot-sidebar .on { color: #fff; background: var(--seal); padding: 0.12rem 0.35rem; align-self: flex-start; }
.vshot-dialog { display: grid; gap: 0.4rem; }
.vshot-input {
  font-size: 0.68rem; border: 1px solid var(--rule); padding: 0.25rem 0.4rem; background: var(--paper-2);
}
.vshot-input.wide { width: 100%; box-sizing: border-box; }
.vshot-key {
  font-family: var(--mono); font-size: 0.6rem; color: var(--ink-2); border: 1px dashed var(--rule);
  padding: 0.25rem 0.4rem; word-break: break-all;
}
.vshot-arrow { font-size: 1.1rem; color: var(--seal); line-height: 1; }

@media (max-width: 30rem) {
  .vstep { grid-template-columns: 1fr; }
  .vshot { width: 100%; max-width: 13rem; }
}

/* ---------- gallery: install-to-device ---------- */

.card-install { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 0.75rem; }
.card-install .btn.small { flex: none; }
.card-why { font-size: 0.76rem; color: var(--ink-3); line-height: 1.45; flex: 1 1 10rem; }
.card-why a { border-bottom-color: var(--seal); }

.device-bar {
  border: 1px solid var(--ink); background: #fff; padding: 0.7rem 1rem; margin-top: 1.2rem;
  display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; justify-content: space-between;
  font-size: 0.88rem;
}
.device-bar[data-state="on"] { border-left: 3px solid var(--seal); }
.device-bar .en { display: block; color: var(--ink-3); font-size: 0.86em; }

dialog.inst-dialog {
  border: 1px solid var(--ink); background: var(--paper); color: var(--ink);
  padding: 0; max-width: 42rem; width: calc(100% - 2rem); max-height: 88vh; overflow: auto;
}
dialog.inst-dialog::backdrop { background: rgba(23, 21, 15, 0.55); }
dialog.inst-dialog .installer { border: 0; margin: 0; background: var(--paper); }

/* ---------- narrow ---------- */

@media (max-width: 46rem) {
  .pg { grid-template-columns: 6rem 1fr; gap: 0 0.8rem; }
  .pg-actions { gap: 0.35rem; }
  .pg-btn { font-size: 0.74rem; padding: 0.35rem 0.55rem; }
  .picker, .installer { padding: 0.9rem; }
  .picker-grid { grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: 0.6rem; }
  .pf-field { max-width: none; }
}

@media (max-width: 30rem) {
  .pg { grid-template-columns: 1fr; }
  .pg-shot { max-width: 12rem; margin-bottom: 0.6rem; }
  .pg.is-active { padding-left: 0.7rem; }
}