/*
 * TaroDict Web: a word page (Docs/TaroDictWeb/TaroDictWeb.md §3.2), laid out
 * as the app's word page and measured from screenshots of it (2026-10-31).
 * The page is the search page with the word in its right pane; on a phone it
 * is a page of its own, the list one step back.
 */

:root {
  /* The app's word page, sampled. */
  --chip-ground: #72748E;
  --row-a: #F9F9FB;
  --row-b: #EFEFF2;
  --box: #F9F9FB;
  --divider: #C7C7CC;
  /* The footer's height on one line, from site.css: 16 px above, the line
     (14 px × 1.5), 20 px below. Where it wraps, on a narrower wide screen,
     search.js sets the height it measures. */
  --footer-height: 57px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --chip-ground: #5A5C78;
    --row-a: #232328;
    --row-b: #2C2C32;
    --box: #232328;
    --divider: #48484A;
  }
}

/* ---- 台羅 or 白話字 ------------------------------------------------------
 * Examples and 其他唸法 carry both; the reader's choice in the 台/客 menu
 * shows one (reading.js sets data-reading before the page draws). */

.poj-text,
:root[data-reading="poj"] .kip-text {
  display: none;
}

:root[data-reading="poj"] .poj-text {
  display: inline;
}

/* ---- The word ------------------------------------------------------------ */

.word-pane {
  position: relative;
}

.word {
  max-width: 680px;
  margin: 0 auto;
  padding: 72px 24px 140px;
  color: var(--dark);
}

.headword {
  margin: 0;
  font-size: 44px;
  font-weight: normal;
  line-height: 1.25;
}

.headword .tag {
  margin-left: 2px;
  font-size: 22px;
}

.readings {
  margin: 6px 0 0;
}

.readings div {
  display: flex;
  align-items: baseline;
  font-size: 19px;
  line-height: 1.75;
}

.readings dt::after {
  content: "：";
}

.readings dd {
  margin: 0;
}

/* "（芋圓字典轉寫）": the POJ is our conversion, not the dictionary's
   (decision 6). The full-width bracket brings its own space before it. */
.readings .note {
  margin-left: 4px;
  color: var(--supporting);
  font-size: 12px;
}

.chips {
  display: flex;
  gap: 8px;
  margin: 16px 0 12px;
  padding: 0;
  list-style: none;
}

.chips li {
  flex: 1;
  padding: 6px 12px;
  border-radius: 10px;
  background: var(--chip-ground);
  color: #FFFFFF;
  font-size: 18px;
  text-align: center;
}

/* A Hakka page's 腔, as the app's chips: the one on show ringed, one the
   word is written in but can't be shown in faded. */
.dialect-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 8px 0 4px;
  padding: 0;
  list-style: none;
}

.dialect-chips button {
  padding: 4px 16px;
  border: 1px solid var(--divider);
  border-radius: 999px;
  background: transparent;
  color: var(--dark);
  font: inherit;
  font-size: 18px;
  cursor: pointer;
}

/* 1 px more ring, 1 px less padding: the chip keeps its size. */
.dialect-chips button[aria-pressed="true"] {
  padding: 3px 15px;
  border: 2px solid var(--medium);
}

.dialect-chips button:disabled {
  color: var(--supporting);
  opacity: 0.5;
  cursor: default;
}

/* The app's tabbed card: 語言對照 and 相關詞, and a Hakka page's 腔調對照,
   as tabs to choose from; a card of one has its title. */
.card {
  border: 1px solid var(--ground);
  border-radius: 14px;
  overflow: hidden;
}

.card-tabs {
  display: flex;
}

/* The tab's title where the card has one tab; not a title's own words, which
   may be one span per language. */
.card-tabs > span {
  flex: 1;
  padding: 6px;
  background: var(--medium);
  color: #FFFFFF;
  font-size: 19px;
  text-align: center;
}

.card-tabs button {
  flex: 1;
  padding: 6px;
  border: 0;
  background: var(--box);
  color: var(--dark);
  font: inherit;
  font-size: 19px;
  cursor: pointer;
}

.card-tabs button + button {
  border-left: 1px solid var(--ground);
}

.card-tabs button[aria-pressed="true"] {
  background: var(--medium);
  color: #FFFFFF;
}

/* 腔調對照's towns and other readings, under their 腔. */
.card .sublabel {
  font-size: 14px;
}

.card table {
  width: 100%;
  border-collapse: collapse;
  font-size: 18px;
}

.card th,
.card td {
  padding: 8px 14px;
  font-weight: normal;
  text-align: left;
}

.card thead th {
  background: var(--row-b);
  color: var(--supporting);
}

.card tbody tr:nth-child(odd) {
  background: var(--row-a);
}

.card tbody tr:nth-child(even) {
  background: var(--row-b);
}

.card tbody th {
  width: 1%;
  color: var(--supporting);
  white-space: nowrap;
}

/* Dotted, as the app underlines a word that opens another. */
.card a {
  color: var(--dark);
  text-decoration: underline dotted;
  text-underline-offset: 5px;
}

/* A row's words break between words, after 、, never inside one, as the
   app holds each word together. */
.card td > a,
.card td > span {
  white-space: nowrap;
}

/* 語言對照's own headword opens nothing, the reader being on its page, so it
   is gray, as in the app. */
.card .self {
  color: var(--supporting);
}

/* 語言對照's 出處 line, its table's last row, as the app's: the stripes
   above shade it, the next one after the rows. */
.card .credit td {
  padding: 6px 14px 8px;
  color: var(--supporting);
  font-size: 14px;
  text-align: right;
}

/* A credit is a line, not words to hold together: it wraps. */
.card .credit td > span {
  white-space: normal;
}

/* A 台語 page's 語言對照 is a table per 客語 row, each naming the reader 腔
   it is for (data-reader-dialects). The reader's 腔, which reading.js names
   on <html> before the page draws, shows its table; with none named, 四縣,
   the apps' default. */
.card table[data-reader-dialects] {
  display: none;
}

html:not([data-reader-dialect]) .card table[data-reader-dialects~="1"]:not([hidden]),
html[data-reader-dialect="1"] .card table[data-reader-dialects~="1"]:not([hidden]),
html[data-reader-dialect="2"] .card table[data-reader-dialects~="2"]:not([hidden]),
html[data-reader-dialect="3"] .card table[data-reader-dialects~="3"]:not([hidden]),
html[data-reader-dialect="4"] .card table[data-reader-dialects~="4"]:not([hidden]),
html[data-reader-dialect="5"] .card table[data-reader-dialects~="5"]:not([hidden]),
html[data-reader-dialect="6"] .card table[data-reader-dialects~="6"]:not([hidden]) {
  display: table;
}

.divider {
  margin: 16px 0;
  border: 0;
  border-top: 1px solid var(--divider);
}

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

.sense {
  display: flex;
  margin: 14px 0 8px;
  border-radius: 10px;
  background: var(--box);
  font-size: 19px;
}

/* As tall as its meaning, with the label in the middle, as the app's badge. */
.pos {
  display: flex;
  flex: none;
  align-items: center;
  padding: 4px 10px;
  border-radius: 10px;
  background: var(--medium);
  color: #FFFFFF;
}

.sense-text {
  padding: 4px 12px;
}

.example {
  margin: 8px 0;
  padding: 10px 18px;
  border-radius: 12px;
  background: var(--box);
  font-size: 18px;
  line-height: 1.6;
}

/* The example a sentence result pointed at. */
.example:target,
.example.target {
  background: var(--row-chosen);
}

.example p {
  margin: 0;
}

.example .reading {
  color: var(--medium);
}

/* An example's words (§3.2): each a link, as the app's are. The 漢字 are
   drawn plain, as in the app; the reading shows they are words with the
   app's light dotted underline. An example with no linked reading, every
   Hakka one, draws it under its 漢字 instead, each word its own, a hair
   apart, since 漢字 have no spaces to show where a word ends. */
.example a.w {
  color: inherit;
  text-decoration: none;
}

.example .reading a.w {
  text-decoration: underline dotted;
  text-decoration-color: color-mix(in srgb, var(--medium) 55%, transparent);
  text-underline-offset: 5px;
}

.example.hanji-links > p:first-child a.w {
  margin: 0 0.08em;
  border-bottom: 2px dotted color-mix(in srgb, var(--medium) 55%, transparent);
}

.example .mandarin {
  color: var(--supporting);
}

.source {
  margin: 10px 0 0;
  color: var(--supporting);
  font-size: 13px;
  text-align: right;
}

.word-missing {
  color: var(--supporting);
  text-align: center;
}

/* ---- The actions, at the top beside ☰ -----------------------------------
 * The app keeps them in a bar at its foot; floating there on the web, they
 * covered the text under them, so they sit in the top band ☰ already keeps
 * clear (owner, 2026-11-01). Each is a capsule of its own, as the round
 * buttons are (owner, 2026-11-02): 48 px tall, 8 px apart, the pair 8 px
 * left of ☰ (16 px from the edge, 48 px wide). */

.word-actions {
  position: fixed;
  top: 12px;
  right: 72px;
  z-index: 10;
  display: flex;
  gap: 8px;
}

.word-actions a {
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 12px;
  border-radius: 24px;
  background: var(--bar);
  box-shadow: var(--bar-shadow);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  color: var(--dark);
  font-size: 15px;
  text-decoration: none;
  white-space: nowrap;
}

/* On hover, the chosen tint over the capsule's own frosted ground. */
.word-actions a:hover {
  box-shadow: var(--bar-shadow), inset 0 0 0 48px var(--bar-chosen);
}

.word-actions a[hidden] {
  display: none;
}

/* ---- Wide screens: the right pane of the split --------------------------- */

@media (min-width: 768px) {
  /* The word scrolls in its pane, which ends above the footer, so the window
     never scrolls (the footer is fixed there, search.css): its height less
     the frame's 12 px. */
  .word-pane {
    margin-bottom: calc(var(--footer-height) - 12px);
    overflow-y: auto;
  }

  .word {
    padding-bottom: 32px;
  }

  /* The list column beside is the way back to the list. A word opened from
     another word has ‹ back to that word, at the pane's top left across from
     ☰, as the iPad app pushes one word over another (owner, 2026-11-01). */
  .back-button {
    display: none;
  }

  .word-pane.from-word .back-button {
    display: flex;
    position: fixed;
    top: 12px;
    left: calc(352px + 16px);
    z-index: 10;
    text-decoration: none;
  }
}

/* ---- Phones: a page of its own ------------------------------------------- */

@media (max-width: 767.98px) {
  .word-body .list-column {
    display: none;
  }

  .word-body .word-pane {
    display: block;
  }

  .word {
    padding: 76px 16px 32px;
  }

  /* ‹ at the top left, across from ☰. */
  .back-button {
    position: fixed;
    top: 12px;
    left: 16px;
    z-index: 10;
    text-decoration: none;
  }
}