/*
 * TaroDict Web: the search page (Docs/TaroDictWeb/TaroDictWeb.md §3.1, §3.8).
 *
 * Wide screens get the iPad app's split: a rounded list column on the left
 * with the search row at its top, the word page beside it. Phones get the
 * iPhone app's list: the search row along the top, the results below.
 * Measured from screenshots of the apps (2026-10-30).
 */

:root {
  /* The search field's fill (the app's search bar, sampled). */
  --field: #FAFAFF;
  /* A row's background while pressed or open beside the list. */
  --row-chosen: #D4D5E8;
  /* A badge chip above a headword (source, 腔). */
  --chip: rgba(106, 109, 170, 0.14);
}

@media (prefers-color-scheme: dark) {
  :root {
    --field: #1B1C22;
    --row-chosen: #2A2C45;
    --chip: rgba(141, 145, 199, 0.22);
  }
}

/* ---- The page -------------------------------------------------------- */

.search-page {
  /* The shared `main` rule centres a 720 px text column; this page is a
     layout of its own. */
  max-width: none;
  padding: 0;
  display: flex;
}

.word-pane {
  flex: 1;
}

/* ---- The search row: [field] [台], and on phones the fixed ☰ after them -- */

.search-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-field {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 6px 0 14px;
  border-radius: 24px;
  background: var(--field);
  box-shadow: var(--bar-shadow);
}

.search-glass,
.clear-button svg {
  flex: none;
  fill: none;
  stroke: var(--text);
  stroke-width: 2;
  stroke-linecap: round;
}

.search-field input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  outline: none;
}

/* The browser's own clear button; the page draws the app's. */
.search-field input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.search-field input::placeholder {
  color: var(--supporting);
}

.clear-button {
  display: flex;
  padding: 6px;
  border: 0;
  background: none;
  cursor: pointer;
}

.clear-button svg {
  fill: var(--supporting);
  stroke: var(--field);
}

.clear-button[hidden] {
  display: none;
}

/* The 台/客 button: a round bar button like the menu's, with the glyph. */
.language-menu {
  position: relative;
  flex: none;
}

.language-button {
  color: var(--dark);
  font-size: 18px;
}

.language-menu .menu-list {
  position: absolute;
  right: 0;
  z-index: 20;
}

/* Its two groups, 台語 and 客語, are drawn as ☰'s 語言 group (site.css). The
   title of the language that is on takes the accent colour. */
.language-menu .menu-group.active {
  color: var(--medium);
}

/* ---- Results ----------------------------------------------------------- */

.results {
  position: relative;
}

.idle-message,
.status-message {
  margin: 0;
  padding: 0 32px;
  color: var(--supporting);
  text-align: center;
}

.idle-message {
  position: absolute;
  top: 40%;
  right: 0;
  left: 0;
}

.status-message {
  padding-top: 32px;
}

/* A section's header, as the Word Lists hub draws it: a large title on the
   content edge and a line under it, pinned while its rows scroll by. */
.section-header {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 0;
  padding: 16px 16px 6px;
  border-bottom: 0.5px solid var(--separator);
  background: var(--list-ground);
  color: var(--medium);
  font-size: 22px;
  font-weight: normal;
}

.section-rows {
  padding: 0;
  margin: 0;
  list-style: none;
}

.row {
  position: relative;
  /* The fill below draws behind the row's text, not behind the column. */
  isolation: isolate;
  display: block;
  margin: 0 32px 0 16px;
  padding: 10px 0;
  border-bottom: 0.5px solid var(--separator);
  color: var(--dark);
  text-decoration: none;
}

.section-rows li:last-child .row {
  border-bottom: 0;
}

/* A marked row's fill: rounded, 3 px in from the row's top and bottom and
   6 px in from the column's leading edge (10 px past the text), as the app
   draws its selected row (StandardTableViewCell.selectionView, owner
   2026-11-02). Its trailing edge is the row's, which clears the section
   index. */
.row::before {
  content: "";
  position: absolute;
  inset: 3px 0 3px -10px;
  z-index: -1;
  border-radius: 12px;
}

.row:focus-visible {
  outline: none;
}

/* One fill for every mark, the keyboard's highlight (keys.js) included:
   its leading bar went (owner, 2026-11-02: "one color is enough"). */
.row:hover::before,
.row:focus-visible::before,
/* The row whose word is open beside the list, as the iPad app marks it. */
.row[aria-current="page"]::before,
.row.highlighted::before {
  background: var(--row-chosen);
}

.row.highlighted .row-caption {
  color: var(--dark);
}

/* ⌘C's note (keys.js), over the page's foot for a moment. */
.copy-toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  z-index: 30;
  margin: 0;
  padding: 10px 18px;
  border-radius: 999px;
  transform: translateX(-50%);
  background: var(--bar);
  box-shadow: var(--bar-shadow);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--dark);
  font-size: 15px;
}

/* One line: the headword, then its readings; cut with … when too long, as
   in the app. */
.row-title,
.row-caption {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The matched sense in the app's grey (supportingText), and in the row's
   own colour on a marked row, where grey on the fill would fall below 4.5:1
   (StandardTableViewCell.drawTextAsMarked). */
.row-caption {
  color: var(--supporting);
}

.row:hover .row-caption,
.row:focus-visible .row-caption,
.row[aria-current="page"] .row-caption {
  color: var(--dark);
}

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 2px;
}

.badge {
  padding: 0 6px;
  border-radius: 6px;
  background: var(--chip);
  color: var(--medium);
  font-size: 12px;
}

.show-more,
.word-button {
  margin: 8px 16px 12px;
  padding: 6px 14px;
  border: 0;
  border-radius: 16px;
  background: var(--chip);
  color: var(--dark);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}

.show-more:disabled {
  opacity: 0.5;
  cursor: default;
}

/* The report button, centred under 沒有相關的詞, and the line that takes its
   place once sent, about as tall, so the sections under it stay put. */
.report {
  text-align: center;
}

.report-message {
  margin: 0;
  padding: 14px 32px;
  color: var(--supporting);
}

.report .show-more + .report-message {
  padding-top: 0;
}

.breakdown {
  display: flex;
  flex-wrap: wrap;
  padding: 4px 8px 8px;
}

.breakdown .word-button {
  margin: 4px;
}

/* The index of sections at the column's edge, as UIKit's index strip. */
.section-index {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.section-index button {
  padding: 2px 4px;
  border: 0;
  background: none;
  color: var(--dark);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}

/* ---- Wide screens: the iPad app's split -------------------------------- */

@media (min-width: 768px) {
  :root {
    --list-ground: var(--column);
  }

  .search-page {
    /* The window's height exactly, so the list scrolls inside its column.
       Not `flex: 1` like other pages' main: that would let the column
       grow to the length of its results. */
    flex: none;
    height: 100vh;
    height: 100dvh;
    padding: 12px;
  }

  /* The list column floats as a rounded card, as in the iPad app. */
  .list-column {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 340px;
    flex: none;
    border-radius: 28px;
    background: var(--column);
    overflow: hidden;
  }

  .search-row {
    padding: 12px 12px 8px;
  }

  .results {
    flex: 1;
    overflow-y: auto;
  }

  .section-index {
    position: absolute;
    top: 50%;
    right: 2px;
    transform: translateY(-50%);
  }

  /* The footer sits at the foot of the word page's side, so the window
     itself never scrolls and the search row stays in view: 12 px margin +
     340 px column. */
  .search-body .site-footer {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 352px;
  }
}

/* ---- Phones: the iPhone app's list ------------------------------------- */

@media (max-width: 767.98px) {
  :root {
    --list-ground: var(--page);
  }

  .search-page {
    flex-direction: column;
  }

  /* The row sits where the menu button sits, 12 px from the top, and
     leaves room for it on the right: 16 + 48 + 8 px. */
  .search-row {
    position: sticky;
    top: 0;
    z-index: 5;
    padding: 12px 72px 8px 16px;
    background: var(--page);
  }

  .results {
    min-height: 60vh;
  }

  /* Headers pin under the search row, not under the window's top. */
  .section-header {
    top: 68px;
  }

  .section-index {
    position: fixed;
    top: 50%;
    right: 2px;
    transform: translateY(-50%);
  }

  .word-pane {
    display: none;
  }
}