/*
 * TaroDict Web: the look every page shares.
 *
 * Colours are the app's Taro theme, light and dark, taken from the asset
 * catalog (TaroDict/Resources/Assets.xcassets/SystemColors) and from
 * screenshots of the iPad app (2026-10-30). The site follows the device's
 * light or dark setting, as the app does.
 */

:root {
  /* The page: white, and in dark mode the app's systemGray6. */
  --page: #FFFFFF;
  /* The list column of an open split (taroListColumnGround). */
  --column: #EEEFF7;
  /* Home's ground (taroLight). */
  --ground: #CFD0E8;
  /* The theme's text and accent shades (taroDark, taroMedium). */
  --dark: #505687;
  --medium: #6A6DAA;
  /* Grey for a second line of text (supportingText). */
  --supporting: #6C6C70;
  /* The floating bars: frosted white, the chosen tab a shade darker. */
  --bar: rgba(247, 247, 247, 0.82);
  --bar-chosen: rgba(0, 0, 0, 0.07);
  --bar-text: #1C1C1E;
  --bar-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
  --text: #1C1C1E;
  /* The line between rows, under a section header, and between a menu's
     groups. */
  --separator: rgba(60, 60, 67, 0.29);
  /* A card of grouped rows, as the app's 版權說明 draws its sections:
     greyCard (systemGray6). Whole, not the app's half: the app's card sits
     on the theme's light ground, and at half on white it hardly showed
     (owner, 2026-11-02). Dark mode keeps the app's half of systemGray5,
     which shows on the dark page. */
  --grey-card: #F2F2F7;

  /* The app's font, 粉圓, as Google Fonts serves it ("Huninn", an older
     build than the app's 2.1). A character it has no glyph for draws in the
     system font, as in the app. */
  --font: "Huninn", -apple-system, "PingFang TC", "Noto Sans TC", sans-serif;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --page: #1C1C1E;
    --column: #08090E;
    --ground: #505687;
    --dark: #CFD0E8;
    --medium: #8D91C7;
    --supporting: #98989D;
    --bar: rgba(28, 28, 30, 0.82);
    --bar-chosen: rgba(255, 255, 255, 0.16);
    --bar-text: #F2F2F7;
    --bar-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
    --text: #F2F2F7;
    --separator: rgba(84, 84, 88, 0.6);
    --grey-card: rgba(44, 44, 46, 0.5);
  }
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--page);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.5;
}

a {
  color: var(--medium);
}

/* ---- The menu ---------------------------------------------------------
 * One round button at the top right, as the app's round bar buttons, that
 * opens a list of the pages below it, lined up on its right edge (owner,
 * 2026-10-30). It is a <details> element:
 * the browser opens and closes it with no script, by mouse, touch or
 * keyboard. The button stays put while the page scrolls. */

.menu {
  position: fixed;
  top: 12px;
  right: 16px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.round-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--bar);
  box-shadow: var(--bar-shadow);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  cursor: pointer;
  /* A <summary> draws a disclosure triangle unless told not to. */
  list-style: none;
}

.round-button::-webkit-details-marker {
  display: none;
}

/* The three lines. */
.round-button svg {
  fill: none;
  stroke: var(--dark);
  stroke-width: 2;
  stroke-linecap: round;
}

.menu-list {
  min-width: 180px;
  padding: 6px;
  margin: 8px 0 0;
  list-style: none;
  border-radius: 16px;
  background: var(--bar);
  box-shadow: var(--bar-shadow);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.menu-list a {
  display: block;
  padding: 10px 14px;
  border-radius: 10px;
  color: var(--bar-text);
  text-decoration: none;
}

.menu-list a:hover {
  background: var(--bar-chosen);
}

.menu-list a[aria-current="page"] {
  background: var(--bar-chosen);
  color: var(--dark);
}

/* A menu's choices, ☰'s 語言 and the search page's 台/客: a group's title,
   then its choices indented under it, the one on marked as a page is. */
.menu-list button {
  display: block;
  width: 100%;
  padding: 10px 14px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--bar-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.menu-list button:hover {
  background: var(--bar-chosen);
}

.menu-list button[aria-pressed="true"] {
  background: var(--bar-chosen);
  color: var(--dark);
}

.menu-group {
  padding: 8px 14px 2px;
  color: var(--supporting);
  font-size: 14px;
}

.menu-list li:not(.menu-group, .menu-separator) button {
  padding-left: 28px;
}

.menu-separator {
  height: 0.5px;
  margin: 6px 8px;
  background: var(--separator);
}

/* ---- The site's language (/language.js) -------------------------------
 * A text the page writes in each language shows in the one on: 華語 until
 * language.js, in the head, marks the page with another. */

.ui-tw,
.ui-en,
:root[data-ui="tw"] .ui-zh,
:root[data-ui="en"] .ui-zh {
  display: none;
}

:root[data-ui="tw"] .ui-tw,
:root[data-ui="en"] .ui-en {
  display: inline;
}

/* ---- The page's own content ------------------------------------------ */

main {
  flex: 1;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  /* Below the menu button: 12 px from the top, 48 px tall, then room. */
  padding: 80px 20px 48px;
}

main h1 {
  margin: 8px 0 16px;
  color: var(--dark);
  font-size: 32px;
  font-weight: normal;
}

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

/* The privacy policy: numbered sections under h2. */
.policy h2 {
  margin: 40px 0 8px;
  color: var(--dark);
  font-size: 24px;
  font-weight: normal;
}

.policy p,
.policy li {
  line-height: 1.7;
}

.policy ul {
  padding-left: 1.5em;
}

.policy .updated {
  color: var(--supporting);
}

/* The credits page: each group a rounded card, its heading inside, as the
   app's 版權說明 groups its credits; each credit a numbered item, a line
   between them, its parts paragraphs. A licence's long address breaks
   anywhere rather than widen the page. */
.credit-group {
  margin: 24px 0;
  padding: 4px 20px 8px;
  border-radius: 16px;
  background: var(--grey-card);
}

.credit-group h2 {
  margin: 16px 0 4px;
}

.credits {
  margin: 0;
  padding-left: 1.5em;
}

.credits li {
  padding: 12px 0;
  overflow-wrap: anywhere;
}

.credits li + li {
  border-top: 1px solid var(--separator);
}

.credits p {
  margin: 0 0 6px;
}

.credits p:last-child {
  margin-bottom: 0;
}

/* The theme's darker shade: --medium on the card is 4.3:1 against
   systemGray6, short of the 4.5:1 text needs; --dark is 6.2:1. */
.credits a {
  color: var(--dark);
}

/* ---- The footer ------------------------------------------------------ */

/* The links and the copyright on one line, wrapping where the screen is
   narrow: two lines took too much of a short window (owner, 2026-11-01). */
.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 4px 20px;
  padding: 16px 20px 20px;
  color: var(--supporting);
  font-size: 14px;
  text-align: center;
}

.site-footer ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 20px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.site-footer a {
  color: var(--supporting);
}

.copyright {
  margin: 0;
}