/* Public pages (/kata, /belajar-bahasa-thailand, ...) on the Duo-Play design
   system. style.css owns the tokens, the fonts and the confetti canvas; this
   file only arranges them, so nothing here redefines a token and a brand change
   in style.css still reaches these pages. See webapp/README.md.

   Same system as the app, different density: these are read-once reference
   pages, so the article stays one readable column on a white card. What is
   shared is the chrome (sticky bar, navy footer), the type roles (display
   headings, green romanization, Thai on Sarabun) and the pressable buttons.
   No JS is required to read or search any of it. */

/* The page background comes from style.css's body rule on purpose: overriding
   it here is what flattened these pages to a plain cream sheet. */
.p-body { color: var(--ink); }
.p-body img { max-width: 100%; }
.p-body [lang="th"] { font-family: var(--font-thai); }

/* Every reading (cara baca) is its own type role, like in the app. */
.p-body .rom { font-family: var(--font-roman); color: var(--green-deep); font-weight: 800; }

/* ---------- 3D press buttons (the house signature) ---------- */

.p-btn {
  font-family: var(--font-display); font-weight: 800; font-size: 1rem;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 24px; border: 0; border-radius: var(--r-md); cursor: pointer;
  text-decoration: none !important; white-space: nowrap; user-select: none;
  --lift: 5px; --edge: var(--line);
  box-shadow: 0 var(--lift) 0 0 var(--edge);
  transition: transform .08s ease, box-shadow .08s ease, filter .15s ease;
}
.p-btn:hover { filter: brightness(1.04); transform: translateY(-1px); box-shadow: 0 calc(var(--lift) + 1px) 0 0 var(--edge); }
.p-btn:active { transform: translateY(var(--lift)); box-shadow: 0 0 0 0 var(--edge); filter: none; }
.p-btn-yellow { background: var(--yellow); color: var(--navy) !important; --edge: var(--yellow-deep); }
.p-btn-white { background: #fff; color: var(--navy) !important; border: 2px solid var(--navy-soft); }
.p-btn-sky { background: var(--sky); color: var(--navy-deep) !important; --edge: var(--sky-deep); }
.p-btn-sm { padding: 10px 18px; font-size: .93rem; --lift: 4px; }

/* Playing state: the clip runs in place, so the button is the only thing that
   can say so. It presses down for the duration, the way a held key would. */
.p-play.is-playing {
  transform: translateY(var(--lift));
  box-shadow: 0 0 0 0 var(--edge);
  filter: none;
}
.p-play.is-playing .p-play-i { animation: p-pulse 1.1s ease-in-out infinite; }
@keyframes p-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  .p-play.is-playing .p-play-i { animation: none; opacity: .55; }
}

/* ---------- top bar ---------- */

.p-top { position: sticky; top: 0; z-index: 50; background: #fff; box-shadow: 0 1px 0 var(--line); }

.p-top-in {
  max-width: 1120px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; gap: 24px; height: 68px;
}

.p-brand img { height: 34px; width: auto; display: block; }

.p-nav { display: flex; gap: 24px; margin: 0 auto; }

.p-nav a {
  font-family: var(--font-display); font-weight: 700; font-size: .98rem;
  color: var(--ink-2); text-decoration: none; position: relative; padding: 6px 2px;
}
.p-nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 4px;
  border-radius: 4px; background: var(--yellow); transition: right .22s ease;
}
.p-nav a:hover { color: var(--navy); }
.p-nav a:hover::after { right: 0; }

.p-top-cta { display: flex; gap: 10px; margin-left: auto; }

@media (max-width: 780px) {
  .p-nav { display: none; }
  .p-top-in { gap: 12px; padding: 0 16px; }
  .p-brand img { height: 28px; }
}
@media (max-width: 460px) {
  /* Two buttons wrap the bar onto a second line on a small phone; the register
     CTA is the one that has to survive. */
  .p-top-cta a:first-child { display: none; }
}

/* ---------- the article card ---------- */

.p-main {
  /* ~65 characters of body copy, which is the readable measure. */
  width: min(48rem, calc(100% - 28px));
  margin: 26px auto 60px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--lift-md);
  padding: 34px clamp(20px, 4vw, 42px) 42px;
}

/* The hub carries a card grid rather than prose, so it gets the wider frame. */
.p-wide { width: min(70rem, calc(100% - 28px)); }

.p-main h1 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 5vw, 2.6rem);
  line-height: 1.12; letter-spacing: -.01em; text-wrap: balance;
  margin: 0 0 12px;
}

.p-main h2 {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3.4vw, 1.7rem);
  line-height: 1.25; text-wrap: balance;
  margin: 38px 0 12px;
}

.p-main h3 { font-family: var(--font-display); font-size: 1.15rem; margin: 26px 0 8px; }

.p-main p, .p-main li { font-size: 1.04rem; line-height: 1.72; color: var(--ink-2); }
.p-main p { margin: 0 0 16px; }

.p-main a { color: var(--navy); font-weight: 700; text-underline-offset: 3px; text-decoration-color: var(--sky); }

.p-meta {
  display: flex; gap: 8px 14px; flex-wrap: wrap;
  font-size: .84rem; font-weight: 700; color: var(--ink-soft);
  margin: 0 0 22px !important;
}

.p-lede { font-size: 1.14rem !important; color: var(--ink-2); font-weight: 600; }

.p-hero img, .p-main figure img { height: auto; border-radius: var(--r-lg); }
.p-main figure { margin: 0 0 20px; }
.p-main figcaption { font-size: .85rem; color: var(--ink-soft); margin-top: 8px; }

/* ---------- table of contents ---------- */

.p-toc {
  background: var(--navy-soft);
  border-radius: var(--r-lg);
  padding: 16px 22px;
  margin: 0 0 28px;
}
.p-toc ol { margin: 0; padding-left: 20px; }
.p-toc li { font-size: .96rem; margin: 5px 0; }
.p-toc-sub { margin-left: 16px !important; list-style: circle; }

/* ---------- authored blocks ---------- */

/* Wide tables scroll in their own box so the page body never scrolls sideways. */
.p-tablewrap {
  overflow-x: auto; margin: 0 0 22px;
  border: 1px solid var(--line); border-radius: var(--r-md);
}
.p-tablewrap table { border-collapse: collapse; width: 100%; font-size: .96rem; }
.p-tablewrap th, .p-tablewrap td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.p-tablewrap tr:last-child td { border-bottom: 0; }
.p-tablewrap th { font-family: var(--font-display); font-weight: 800; color: var(--ink); background: var(--surface-2); }

.p-main blockquote {
  margin: 0 0 22px;
  padding: 16px 22px;
  border-left: 6px solid var(--yellow);
  background: var(--canvas-2);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.p-main blockquote cite { display: block; font-size: .85rem; color: var(--ink-soft); font-style: normal; margin-top: 6px; }

/* The homograph line on a word page. Lighter than .p-note on purpose: it is a
   one-line clarification under a heading, not a callout competing with it. */
.p-sense-note {
  margin: -6px 0 14px;
  font-size: .95rem;
  color: var(--ink-soft);
}

.p-note {
  display: block;
  background: var(--navy-soft);
  border-radius: var(--r-lg);
  padding: 16px 22px;
  margin: 0 0 22px;
  font-size: 1rem;
  color: var(--ink-2);
}

/* Penjelasan: the usage note is the one thing a dictionary competitor does not
   have, so it is a labelled card rather than a sentence in an aside. */
.p-expl { background: var(--canvas-2); border: 1px solid var(--yellow); }
.p-expl-h {
  font-family: var(--font-display); font-weight: 800; font-size: .74rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft);
  margin: 0 0 6px;
}
.p-expl p { margin: 0 !important; color: var(--ink); }

/* <details> keeps the Q&A collapsible with zero JS, and the answer text is in
   the initial HTML either way, so crawlers and answer engines still read it. */
.p-faq details {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
  padding: 14px 20px;
  margin: 0 0 10px;
}
.p-faq summary { font-family: var(--font-display); font-weight: 800; color: var(--ink); cursor: pointer; }
.p-faq summary::marker { color: var(--navy); }
.p-faq details > div { padding-top: 8px; color: var(--ink-2); line-height: 1.7; }

.p-cta { margin: 30px 0 !important; }

/* Authored cta blocks carry no class of their own, so the button styling is
   attached to the link inside .p-cta rather than to a .p-btn markup change. */
.p-cta a {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 800; font-size: 1.08rem;
  background: var(--yellow); color: var(--navy) !important;
  text-decoration: none !important;
  border-radius: var(--r-lg); padding: 16px 32px;
  box-shadow: 0 6px 0 0 var(--yellow-deep);
  transition: transform .08s ease, box-shadow .08s ease, filter .15s ease;
}
.p-cta a:hover { filter: brightness(1.04); transform: translateY(-1px); box-shadow: 0 7px 0 0 var(--yellow-deep); }
.p-cta a:active { transform: translateY(6px); box-shadow: 0 0 0 0 var(--yellow-deep); filter: none; }

.p-related { border-top: 1px solid var(--line); margin-top: 38px; padding-top: 20px; }
.p-related ul { margin: 0; padding-left: 20px; }

.p-main code { background: var(--surface-2); border-radius: 6px; padding: 1px 6px; font-size: .9em; }

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

.p-foot { background: #1C1B4B; color: rgba(255,255,255,.82); padding: 52px 0 32px; }

.p-foot-in {
  max-width: 1120px; margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; align-items: start;
}

.p-foot-brand img { height: 38px; width: auto; }
.p-foot-tag { font-family: var(--font-thai); color: rgba(255,255,255,.6); font-size: .92rem; margin: 12px 0 8px; }
.p-foot-desc { font-size: .95rem; line-height: 1.6; color: rgba(255,255,255,.66); margin: 0; max-width: 22rem; }

.p-foot h4 {
  font-family: var(--font-display); font-size: .95rem; color: #fff;
  margin: 0 0 14px; letter-spacing: .02em;
}
.p-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.p-foot a { color: rgba(255,255,255,.85); text-decoration: none; font-weight: 700; }
.p-foot a:hover { color: var(--yellow); }

.p-foot-base {
  max-width: 1120px; margin: 34px auto 0; padding: 18px 24px 0;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: .86rem; color: rgba(255,255,255,.5);
}

@media (max-width: 760px) {
  .p-foot-in { grid-template-columns: 1fr 1fr; }
  .p-foot-brand { grid-column: 1 / -1; }
}

/* Focus must stay visible: these pages are keyboard-navigated like any doc. */
.p-body a:focus-visible, .p-faq summary:focus-visible, .p-body :focus-visible {
  outline: 3px solid var(--sky); outline-offset: 3px; border-radius: 6px;
}

/* ---------- dictionary entry pages ---------- */

.p-crumb { font-size: .9rem; font-weight: 700; margin-bottom: 16px; }
.p-crumb a { color: var(--ink-soft) !important; text-decoration: none; }
.p-crumb a:hover { color: var(--navy) !important; }

/* The headword sits on a tinted panel so the page opens the way a card in the
   app does: glyph, reading, meaning, one pressable audio button. */
.p-entry-hero {
  background: linear-gradient(180deg, var(--navy-soft), var(--surface) 130%);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 26px clamp(18px, 3vw, 30px);
  margin: 0 0 26px;
}

.p-entry-hero h1 { margin: 0 0 8px; }
.p-thai { font-family: var(--font-thai); font-size: clamp(2.4rem, 8vw, 3.4rem); line-height: 1.25; }
.p-glyph { font-family: var(--font-thai); font-size: clamp(4rem, 16vw, 6.5rem); line-height: 1.15; }
.p-thai-sm { font-family: var(--font-thai); font-size: 1.4rem; }

.p-rom { font-size: 1.2rem; margin: 0 0 4px !important; }
.p-mean { font-size: 1.2rem; font-weight: 800; color: var(--ink) !important; margin: 0 0 18px !important; }

.p-facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; }
.p-facts div {
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 16px; font-size: .92rem;
}
.p-facts dt { display: inline; font-weight: 800; color: var(--ink-soft); font-size: .84rem; text-transform: uppercase; letter-spacing: .06em; }
.p-facts dd { display: inline; margin: 0 0 0 6px; font-weight: 700; color: var(--ink); }

.p-spell { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 10px; }
.p-spell li > span {
  display: inline-flex; align-items: baseline; gap: 8px;
  background: var(--surface); border: 2px solid var(--navy-soft);
  border-radius: var(--r-md); padding: 8px 16px;
  box-shadow: 0 4px 0 0 var(--line);
  font-family: var(--font-thai); font-size: 1.4rem;
}
.p-spell-name { font-family: var(--font-body); font-size: .8rem; font-weight: 700; color: var(--ink-soft); }

.p-example {
  border-left: 6px solid var(--sky) !important;
  background: var(--surface-2) !important;
}
.p-example p { margin: 0 0 6px !important; }
.p-example .p-thai-sm { font-weight: 600; }

/* ---------- hub: search + word cards ---------- */

/* The field is self-evident to a sighted user but still needs a name. */
.p-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* align-items + a matching --lift so the field and the button share one baseline
   and press to the same depth. */
.p-search { display: flex; align-items: stretch; gap: 10px; margin: 22px 0 10px; flex-wrap: wrap; }
.p-search .p-btn { --lift: 4px; padding-inline: 30px; }

.p-search input {
  flex: 1 1 16rem; min-width: 0;
  font-family: var(--font-body); font-size: 1.05rem; font-weight: 600; color: var(--ink);
  background: var(--surface);
  border: 2px solid var(--navy-soft); border-radius: var(--r-md);
  padding: 14px 18px;
  box-shadow: 0 4px 0 0 var(--line);
}
.p-search input::placeholder { color: var(--ink-faint); font-weight: 600; }
.p-search input:focus { border-color: var(--sky); outline: none; }

.p-count { font-size: .92rem !important; font-weight: 700; color: var(--ink-soft); margin: 0 0 20px !important; }
.p-count a { font-weight: 800; }

.p-list {
  list-style: none; padding: 0; margin: 0 0 8px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 14px;
}

.p-list a {
  display: block; height: 100%;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 16px 18px;
  text-decoration: none !important; color: inherit; font-weight: inherit;
  box-shadow: 0 4px 0 0 var(--line);
  transition: transform .08s ease, box-shadow .08s ease, border-color .15s ease;
}
.p-list a:hover { transform: translateY(-2px); box-shadow: 0 6px 0 0 var(--navy-soft); border-color: var(--navy-soft); }

.p-list-thai { display: block; font-family: var(--font-thai); font-size: 1.7rem; font-weight: 600; line-height: 1.3; }
.p-list-rom { display: block; font-size: .95rem; margin-top: 2px; }
.p-list-mean { display: block; color: var(--ink); font-weight: 700; margin-top: 6px; }

.p-empty { background: var(--surface-2); border-radius: var(--r-lg); padding: 26px; text-align: center; }

/* Related words reuse the card grid, so a word page and the hub teach the same
   shape rather than two different ones. */
.p-related .p-list { margin-top: 14px; }
.p-related ul.p-list { padding-left: 0; }

.p-pager {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin: 26px 0 0;
  font-weight: 700; color: var(--ink-soft);
}
.p-pager a { text-decoration: none !important; }