/* =========================================================
   WAIPHRA UI CORE v2 — 2026-08-28 brand refresh
   This file is the final visual layer and MUST load after style.css.
   Feature work belongs in style.css; do not edit this file unless the
   user explicitly requests a global redesign.
   Changed this pass: typeface → Bai Jamjuree, tighter radius scale,
   flatter card/shadow language, home secondary actions de-boxed.
   See BRAND-GUIDELINE.md for the full rationale and token reference.
   ========================================================= */
:root {
  --wp-font: "Bai Jamjuree", "Noto Sans Thai", "Sarabun", "Leelawadee UI", Tahoma, sans-serif;
  --wp-bg: #f7f1ea;
  --wp-surface: #ffffff;
  --wp-text: #28231f;
  --wp-muted: #8d8177;
  --wp-line: #eadfd5;
  --wp-accent: #cf7655;
  --wp-accent-dark: #b95f43;
  --wp-gold: #d8a46e;
  --wp-shadow: 0 8px 26px rgba(79, 49, 34, .09);
  --wp-shadow-soft: 0 2px 7px rgba(79, 49, 34, .06);
  /* Radius scale — one system, used everywhere. Smaller & more restrained
     than the previous 22–30px "soft blob" scale; pills are reserved for
     true pill controls (chips, badges), not cards. */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-pill: 999px;
}

html, body, button, input, select, textarea, a {
  font-family: var(--wp-font) !important;
}
body {
  margin: 0;
  background: var(--wp-bg) !important;
  color: var(--wp-text) !important;
}
button, input, select, textarea { font: inherit; }
button { -webkit-appearance: none; appearance: none; }
.screen { width: 100% !important; max-width: none !important; margin: 0 !important; border: 0 !important; }

/* Permanent full-width site navigation. */
.app-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 112px;
  padding: 0 5vw !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(230px, 1fr) minmax(0, 1fr) minmax(72px, 1fr) !important;
  align-items: center !important;
  gap: 22px !important;
  background:
    radial-gradient(circle, rgba(255,255,255,.22) 2px, transparent 2.4px) 0 0 / 30px 30px,
    linear-gradient(105deg, #c86f52 0%, #d88f6d 55%, #dfad78 100%) !important;
  border: 0 !important;
  box-shadow: 0 8px 28px rgba(102, 58, 39, .14) !important;
}
.brand-button {
  justify-self: start !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
  min-height: 62px !important;
  padding: 8px 10px !important;
  border: 0 !important;
  border-radius: var(--radius-sm) !important;
  background: transparent !important;
  color: #fff !important;
  font-size: clamp(25px, 2.5vw, 35px) !important;
  font-weight: 800 !important;
  letter-spacing: -.025em !important;
  text-shadow: 0 2px 8px rgba(71,31,18,.17) !important;
  cursor: pointer !important;
}
.brand-mark { font-size: 34px !important; filter: drop-shadow(0 3px 6px rgba(65,27,15,.22)); }
.primary-tabs {
  position: static !important;
  align-self: stretch !important;
  justify-self: center !important;
  display: flex !important;
  align-items: stretch !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: clamp(10px, 3vw, 48px) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.primary-tab,
.primary-tab:hover,
.primary-tab:focus,
.primary-tab.active {
  flex: 0 1 128px !important;
  min-width: 0 !important;
  min-height: 78px !important;
  padding: 0 clamp(8px, 1.6vw, 25px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-bottom: 5px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(255,255,255,.82) !important;
  font-size: clamp(14px, 1.3vw, 19px) !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}
.primary-tab:hover { color: #fff !important; background: rgba(255,255,255,.06) !important; }
.primary-tab.active { color: #fff !important; border-bottom-color: #fff !important; }
.app-header .icon-btn {
  justify-self: end !important;
  width: 72px !important;
  height: 64px !important;
  min-width: 72px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(255,255,255,.34) !important;
  border-radius: var(--radius-sm) !important;
  background: rgba(255,255,255,.16) !important;
  color: #fff !important;
  font-size: 24px !important;
  box-shadow: inset 0 1px rgba(255,255,255,.18) !important;
}

/* Main content width and typography. */
main { width: 100%; }
.tab-panel > :not(.home-hero):not(.page-intro),
.setup-body, .complete-body, .pray-body { max-width: 1320px; margin-left: auto !important; margin-right: auto !important; }
.home-hero-new, .page-intro {
  padding: 54px max(24px, 5vw) 38px !important;
  background: radial-gradient(circle at 50% 8%, rgba(216,151,110,.14), transparent 45%) !important;
}
.home-hero-new h1, .page-intro h1 { font-size: clamp(34px, 4vw, 54px) !important; line-height: 1.16 !important; letter-spacing: -.025em !important; }
.home-greeting { font-size: clamp(22px, 2.1vw, 30px) !important; font-weight: 800 !important; }
.home-hero-new p, .page-intro p { font-size: clamp(17px, 1.5vw, 21px) !important; line-height: 1.7 !important; }

/* Home — preserve the approved hierarchy. */
#home-featured-slot, #home-continue-slot, .home-simple-actions { max-width: 1320px !important; margin-left: auto !important; margin-right: auto !important; }
.home-featured {
  margin: 18px 24px 0 !important;
  min-height: 214px !important;
  border-radius: var(--radius-lg) !important;
  background: linear-gradient(135deg, var(--wp-accent) 0%, #be694b 100%) !important;
  box-shadow: 0 10px 24px rgba(174, 86, 55, .16) !important;
}
.home-featured-eyebrow { padding: 26px 30px 0 !important; font-size: 15px !important; }
.home-featured-body { padding: 10px 30px 30px !important; gap: 22px !important; }
.home-featured-icon { font-size: 56px !important; }
.home-featured-name { font-size: 27px !important; }
.home-featured-meta { font-size: 17px !important; }
.home-featured-cta { font-size: 16px !important; padding: 11px 20px !important; border-radius: var(--radius-pill) !important; }
.home-continue-card {
  margin: 20px 24px 0 !important;
  min-height: 118px !important;
  padding: 22px 30px !important;
  border-radius: var(--radius-md) !important;
  background: var(--wp-surface) !important;
  border: 1px solid var(--wp-line) !important;
  box-shadow: none !important;
}
.home-continue-icon { font-size: 36px !important; }
.home-continue-title { font-size: 20px !important; }
.home-continue-sub { font-size: 16px !important; line-height: 1.5 !important; }
.home-simple-actions { padding: 30px 24px 56px !important; }
.home-main-action {
  width: 100% !important;
  min-height: 122px !important;
  padding: 24px 30px !important;
  display: grid !important;
  grid-template-columns: 64px 1fr 28px !important;
  align-items: center !important;
  gap: 20px !important;
  text-align: left !important;
  color: var(--wp-text) !important;
  background: var(--wp-surface) !important;
  border: 1px solid var(--wp-line) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--wp-shadow) !important;
  cursor: pointer !important;
}
.home-main-action > span { font-size: 43px !important; }
.home-main-action b { display: block !important; font-size: 24px !important; }
.home-main-action small { display: block !important; margin-top: 5px !important; color: var(--wp-muted) !important; font-size: 17px !important; }
.home-main-action i { color: var(--wp-gold) !important; font-size: 38px !important; }

/* Secondary home actions — a slim borderless link row, not two more boxes
   stacked under the ones above (those destinations already live in the
   top nav; this is a quiet shortcut, not a peer decision). */
.home-links-row {
  display: flex !important;
  gap: 8px !important;
  margin-top: 18px !important;
  padding: 0 !important;
  border-top: 1px solid var(--wp-line) !important;
}
.home-links-row button {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 56px !important;
  padding: 14px 10px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--wp-muted) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: none !important;
}
.home-links-row button:active { color: var(--wp-accent) !important; }
@media (hover: hover) {
  .home-links-row button:hover { color: var(--wp-accent) !important; }
}

/* Global button language: no native browser controls. */
button, .td-maps-btn {
  transition: transform .12s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease, color .16s ease !important;
}
button:active, .td-maps-btn:active { transform: scale(.985) !important; }
.tray-btn, .setup-big-start-btn, .td-pray-all-btn, .complete-home-btn {
  border: 0 !important;
  border-radius: var(--radius-sm) !important;
  background: linear-gradient(135deg, var(--wp-accent), var(--wp-accent-dark)) !important;
  color: #fff !important;
  font-weight: 800 !important;
  box-shadow: 0 6px 16px rgba(185,95,67,.20) !important;
}
.workflow-back, .pray-act-btn, .repeat-toggle-btn, .print-btn, .order-btn,
.mr-btn, .setup-font-btn, .speed-choice, .tp-side, .tp-skip, .tp-center {
  border: 1px solid var(--wp-line) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--wp-surface) !important;
  color: var(--wp-text) !important;
  font-weight: 700 !important;
}
@media (hover: hover) {
  .workflow-back:hover, .pray-act-btn:hover, .repeat-toggle-btn:hover, .print-btn:hover,
  .order-btn:hover, .mr-btn:hover, .setup-font-btn:hover, .speed-choice:hover,
  .tp-side:hover, .tp-skip:hover {
    border-color: var(--wp-accent) !important;
    color: var(--wp-accent-dark) !important;
  }
}
/* .tp-center (play/pause) is the one primary action on the pray screen —
   give it the accent treatment so it reads as the main CTA, not a peer
   of the ±10s/skip buttons around it. */
.tp-center {
  border: 2px solid var(--wp-accent) !important;
  background: rgba(200,111,82,.08) !important;
  color: var(--wp-accent-dark) !important;
}
@media (hover: hover) {
  .tp-center:hover { background: rgba(200,111,82,.14) !important; }
}
/* .pray-act-btn ("← ปรับรอบ" / "จบ") sits on the pray-nav bar, which is
   the same white as .wp-surface — the shared rule above made it nearly
   invisible there (white-on-white with a barely-there border). Give it
   the warm page background instead so it reads clearly as a button. */
.pray-act-btn {
  background: var(--wp-bg) !important;
  flex-shrink: 0 !important;
}

/* Setup, prayer, list cards. mantra-card is de-boxed on purpose in
   style.css (flat divided rows) — it is intentionally left out here. */
.workflow-bar { top: 112px !important; }
.pray-nav { top: 112px !important; }
.msc, .coll-card, .temple-card, .merit-card {
  border-radius: var(--radius-md) !important;
  border-color: var(--wp-line) !important;
  box-shadow: none !important;
}
.msc-name, .coll-name, .card-name, .temple-name, .merit-card-title { font-weight: 800 !important; }
.speed-choice-grid { display: grid !important; grid-template-columns: repeat(5, 1fr) !important; gap: 12px !important; }
.speed-choice { min-height: 74px !important; font-size: 18px !important; }
.speed-choice.active { background: linear-gradient(135deg, var(--wp-accent), var(--wp-accent-dark)) !important; color: #fff !important; border-color: transparent !important; }

/* Dark mode keeps hierarchy and warmth. */
body.night { --wp-bg:#17110b; --wp-surface:#241a11; --wp-text:#ead2ad; --wp-muted:#bba27d; --wp-line:rgba(234,210,173,.15); background:var(--wp-bg) !important; }
body.night .home-main-action, body.night .home-continue-card { background:var(--wp-surface) !important; color:var(--wp-text) !important; }

@media (max-width: 820px) {
  .app-header {
    min-height: 0 !important;
    padding: 10px 14px 0 !important;
    grid-template-columns: 1fr 58px !important;
    grid-template-rows: 58px 60px !important;
    gap: 8px 10px !important;
  }
  .brand-button { font-size: 24px !important; gap: 9px !important; }
  .brand-mark { font-size: 28px !important; }
  .app-header .icon-btn { grid-column: 2 !important; grid-row: 1 !important; width: 54px !important; min-width: 54px !important; height: 50px !important; border-radius: var(--radius-sm) !important; }
  .primary-tabs {
    grid-column: 1 / -1 !important; grid-row: 2 !important;
    width: calc(100% + 28px) !important; margin-left: -14px !important;
    display: grid !important; grid-template-columns: repeat(4,1fr) !important;
    gap: 4px !important;
  }
  .primary-tab, .primary-tab:hover, .primary-tab:focus, .primary-tab.active {
    min-width: 0 !important; min-height: 60px !important; padding: 0 5px !important; font-size: 15px !important;
  }
  .workflow-bar, .pray-nav { top: 128px !important; }
  .home-hero-new, .page-intro { padding: 34px 20px 24px !important; }
  .home-featured { margin: 14px 14px 0 !important; min-height: 190px !important; border-radius: var(--radius-lg) !important; }
  .home-featured-eyebrow { padding: 22px 22px 0 !important; font-size: 13px !important; }
  .home-featured-body { padding: 8px 22px 24px !important; gap: 16px !important; }
  .home-featured-icon { font-size: 46px !important; }
  .home-featured-name { font-size: 23px !important; }
  .home-featured-meta { font-size: 15px !important; }
  .home-continue-card { margin: 16px 14px 0 !important; padding: 18px 20px !important; }
  .home-simple-actions { padding: 24px 14px 40px !important; }
  .home-main-action { min-height: 104px !important; padding: 19px 20px !important; grid-template-columns: 50px 1fr 22px !important; }
  .home-main-action > span { font-size: 35px !important; }
  .home-main-action b { font-size: 21px !important; }
  .home-main-action small { font-size: 15px !important; }
  .home-links-row { margin-top: 14px !important; }
  .home-links-row button { min-height: 50px !important; font-size: 14px !important; }
  .speed-choice-grid { grid-template-columns: repeat(3,1fr) !important; }
}
@media (max-width: 420px) {
  .primary-tab, .primary-tab:hover, .primary-tab:focus, .primary-tab.active { font-size: 13px !important; }
  .speed-choice-grid { grid-template-columns: repeat(2,1fr) !important; }
  .speed-choice:last-child { grid-column: 1 / -1 !important; }
}

/* Prayer workflow controls */
.workflow-bar-minimal {
  position: sticky !important;
  top: 112px !important;
  z-index: 900 !important;
  min-height: 64px !important;
  padding: 10px 24px !important;
  display: flex !important;
  align-items: center !important;
  background: color-mix(in srgb, var(--surface) 94%, transparent) !important;
  border-bottom: 1px solid var(--border) !important;
  backdrop-filter: blur(10px);
}
.workflow-back-icon {
  width: 46px !important;
  min-width: 46px !important;
  height: 46px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-xs) !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
  font-size: 25px !important;
  box-shadow: var(--shadow-sm) !important;
}
.setup-repeat-btn {
  width: 84px;
  min-width: 84px;
  min-height: 64px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  box-shadow: none;
  font-weight: 700;
}
.setup-repeat-btn span { font-size: 21px; }
.setup-repeat-btn small { font-size: 12px; color: var(--sage); white-space: nowrap; }
.setup-repeat-btn.active {
  background: rgba(206,122,83,.10);
  border-color: var(--saffron);
  color: var(--saffron);
}
.setup-repeat-btn.active small { color: var(--saffron); }
.speed-preview-box { display: none !important; }
.msc-deity:empty { display: none !important; }
@media (max-width:760px) {
  .workflow-bar-minimal { top: 128px !important; padding: 8px 14px !important; }
  .setup-repeat-btn { width: 76px; min-width: 76px; }
}
.msc-audio-meta { margin-top: 5px; color: var(--saffron); font-size: 13px; font-weight: 700; }

/* Round-count row — lives inside the .msc card, so it should read as one
   row in that card, not a second nested box. */
.round-input-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-top: 14px;
  margin-top: 4px;
  border: 0;
  border-top: 1px solid var(--wp-line);
  border-radius: 0;
  background: transparent;
}
.round-input-row > span:first-child { min-width: 0; }
.round-input-row strong { display: block; font-size: 17px; color: var(--wp-text); }
.round-input-row small { display: block; margin-top: 4px; font-size: 13px; line-height: 1.45; color: var(--wp-muted); }
.round-input-wrap { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }
.round-input-wrap em { font-style: normal; font-size: 16px; font-weight: 700; color: var(--wp-muted); }
.mr-custom.round-number-input {
  display: block !important;
  width: 104px;
  min-height: 52px;
  margin: 0 !important;
  padding: 9px 12px;
  border: 1.5px solid var(--wp-accent) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--wp-surface) !important;
  color: var(--wp-text) !important;
  text-align: center;
  font-size: 20px !important;
  font-weight: 800 !important;
  outline: none;
}
.mr-custom.round-number-input:focus { box-shadow: 0 0 0 3px rgba(206,122,83,.18); }
.msc-audio-meta, .msc-default-rounds { margin-top: 5px; color: var(--wp-muted); font-size: 14px; line-height: 1.45; }
@media (max-width: 520px) {
  .round-input-row { align-items: flex-start; flex-direction: column; gap: 10px; }
  .round-input-wrap { width: 100%; }
  .mr-custom.round-number-input { flex: 1; width: auto; }
}