/* Presentation-only refresh. Search, library, editing, Copy and Helper are unchanged. */
:root {
  --paper: #f5f2eb;
  --ink: #142233;
  --text: #253649;
  --muted: #536171;
  --line: #d7d5cf;
  --primary: #a8321a;
  --primary-dark: #822511;
  --pale: #f6e8df;
  --accent-soft: #f1ddce;
  --radius: 16px;
  font-family: "Noto Sans Thai", "Leelawadee UI", system-ui, sans-serif;
}
body { background: var(--paper); font-size: 16px; }
.wrap { width: min(1200px, 100%); padding-inline: 40px; }
.site-header { width: 100%; min-height: 88px; padding-inline: max(24px, calc((100% - 1120px) / 2)); background: #07101c; border: 0; color: #f7f3ec; }
.wordmark { color: #f7f3ec; font-size: 30px; }
.brand-dot { color: #ed966f; }
.brand-sub { font-size: 12px; color: #c9d2dd; border-color: #475362; }
.header-right a { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; color: #f7f3ec; font-size: 15px; }
.version-tag { background: #132232; border-color: #475362; font-size: 13px; color: #d2dbe4; }
.small-dot { background: #b6603a; }
.version-tag .small-dot { background: #ed966f; }
.app-modes { margin-top: 30px; padding: 5px; background: #e7e3dc; border-color: #d4cfc6; border-radius: 12px; }
.app-modes button { font-size: 17px; padding: 12px 32px; min-height: 72px; color: #4c5967; border-radius: 8px; }
.app-modes button span { font-size: 14px; margin-top: 4px; }
.app-modes button[aria-pressed=true] { background: #17283b; color: #fff; border-color: #17283b; box-shadow: 0 3px 9px #07101c18; }
.app-modes button[aria-pressed=false]:hover { background: #f8f5ef; color: #142233; }
.search-intro { padding: 42px 0 28px; }
.intro-eyebrow { font-size: 14px; color: #8b321c; border-color: #d9bba6; background: #f7e9dd; padding: 7px 13px; }
.search-intro h1 { font-size: clamp(32px, 4.5vw, 54px); line-height: 1.4; font-weight: 700; letter-spacing: -.035em; margin-block: 20px 16px; }
.accent { color: #a8321a; }
.accent::after { background: #e8cbb7; height: 6px; }
.search-intro > p:last-child, .intro-text { font-size: 18px; color: #536171; line-height: 1.85; }
#search-form { max-width: none; }
.search-input-row { border: 1px solid #788591; border-radius: 12px; padding: 9px 10px 9px 22px; box-shadow: 0 4px 16px #17283b07; gap: 16px; }
.search-input-row > .icon { color: #526171; width: 24px; height: 24px; }
#library-query { font-size: 18px; line-height: 1.8; }
#library-query::placeholder, textarea::placeholder, input::placeholder { color: #5e6875; }
.search-input-row:focus-within { border-color: #a8321a; box-shadow: 0 0 0 3px #a8321a18; }
.search-input-row .button { min-height: 52px; padding-inline: 30px; font-size: 16px; }
.button { font-size: 16px; min-height: 48px; border-radius: 9px; }
.primary { background: #a8321a; box-shadow: none; }
.primary:hover { background: #822511; box-shadow: none; }
.secondary { color: #253649; background: #f1eee8; border-color: #c4c8cc; }
.secondary:hover { background: #e6e5e1; }
.search-filters { max-width: none; margin-top: 20px; background: #ece8df; border: 1px solid #d6d0c5; border-radius: 12px; padding: 20px; gap: 18px 24px; align-items: flex-end; }
.search-filters > label { font-size: 16px; color: #253649; font-weight: 700; min-width: 240px; flex: 0 1 420px; }
#library-category { font-size: 17px; font-weight: 600; min-height: 52px; background: #fff; color: #253649; border: 1px solid #788591; border-radius: 8px; padding: 10px 12px; margin-top: 8px; }
.category-shortcuts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; flex: 1 0 100%; }
.category-shortcuts button { display: flex; align-items: center; text-align: left; font-size: 16px; line-height: 1.65; font-weight: 600; min-height: 56px; padding: 12px 16px; color: #344457; border-color: #788591; background: #fffcf8; border-radius: 8px; overflow-wrap: anywhere; }
.category-shortcuts button:hover { background: #f5dfce; border-color: #bd8c6f; }
.category-shortcuts button[aria-pressed=true] { color: #fff; background: #17283b; border-color: #17283b; box-shadow: inset 0 -3px #ed966f; font-weight: 750; }
.search-results-heading { margin: 36px 0 20px; align-items: center; }
.search-results-heading h2 { font-size: 25px; font-weight: 700; }
.search-results-heading p { font-size: 15px; }
.search-results { gap: 16px; }
.search-results li { border: 0; }
.search-result { position: relative; height: 100%; min-height: 182px; gap: 12px; padding: 24px; border: 1px solid #d7d5cf; border-radius: 12px; background: #fff; transition: background .16s, border-color .16s, box-shadow .16s; }
.search-result:hover { background: #fffdfa; border-color: #b76a48; box-shadow: inset 3px 0 #a8321a, 0 4px 18px #17283b08; }
.search-result-meta { font-size: 14px; line-height: 1.65; color: #785038; font-weight: 650; }
.search-result-title { font-size: 20px; line-height: 1.6; font-weight: 700; color: #142233; }
.search-result-arrow { color: #a8321a; font-size: 22px; }
.search-result-description { font-size: 16px; line-height: 1.8; color: #536171; }
.load-more { min-width: 200px; margin-block: 28px; }
.search-help, .search-privacy { font-size: 15px; line-height: 1.85; }
.search-help .text-button { font-weight: 650; }
.library-detail { margin-top: 32px; }
.library-heading h2 { font-size: 32px; }
.library-heading > p:last-child { font-size: 17px; line-height: 1.8; }
.library-heading .eyebrow { font-size: 15px; }
.library-preview { border-color: #cbd0d5; border-radius: 14px; padding: 28px; box-shadow: none; }
.library-preview label { font-size: 17px; }
#library-output, #output { background: #fbfaf6; border-color: #788591; font-size: 17px; line-height: 1.95; }
.clear-library, #library-manual-backup summary, #library-backup, #helper-handoff .text-button { font-size: 15px; }
#helper-handoff { background: #f8ecdf; border-color: #d5b89e; }
.intro { padding-block: 40px 32px; }
.intro-note p { font-size: 16px; }
.intro-note p + p { font-size: 14px; }
.intro-note strong { font-size: 19px; }
.note-line { background: #b88c6d; }
.note-line:nth-child(2) { background: #cfaf95; }
.note-line:nth-child(3) { background: #dec9b7; }
.eyebrow, .small, .panel-top .quiet { font-size: 14px; }
.steps { gap: 20px; }
.steps li { font-size: 15px; line-height: 1.7; }
.steps li span { font-size: 13px; background: #e7e2d9; border-color: #c3bdb3; }
.steps li.active span { background: #17283b; border-color: #17283b; }
.steps li.active { color: #17283b; }
.panel { border-color: #cbd0d5; box-shadow: 0 6px 24px #17283b06; }
.mode-picker { background: #ece9e3; border-color: #d6d0c5; }
.mode-picker label > span { font-size: 16px; min-height: 48px; }
.mode-picker input:checked + span { background: #17283b; border-color: #17283b; color: #fff; }
.type-picker legend, label, .field-label { font-size: 16px; }
.type-options label > span { font-size: 16px; min-height: 48px; padding-inline: 14px; }
.type-options input:checked + span, .question-choice:has(input:checked) { background: #f7e9dd; border-color: #b56841; color: #762a16; box-shadow: inset 0 0 0 .5px #b56841; }
.main-label { font-size: 18px; }
.field-hint, .submit-note, .result-summary, .result-notes, .follow-panel > p.muted { font-size: 14px; color: #536171; }
.extra-details summary, .question-choice, .result-actions button, .shop-link { font-size: 15px; }
.question legend { font-size: 17px; }
.result-heading .eyebrow { font-size: 14px; background: #f7e9dd; border-color: #d9bba6; }
.result-panel { background: #fff; border-color: #cbd0d5; }
.result-actions button { background: #f1eee8; border-color: #cbd0d5; }
.result-actions button:hover { background: #f7e9dd; border-color: #b56841; }
.side-note > .eyebrow, .tips p, .privacy-note { font-size: 14px; color: #536171; }
.tips strong { font-size: 16px; }
.tips li > span { font-size: 12px; background: #eae0d5; border-color: #d0c1b3; color: #76503a; }
.notice, .error, .edit-fields label, .research summary, .research > p, .research ul, footer p, .provenance-item pre, .provenance-item strong { font-size: 14px; }
.notice h2 { font-size: 19px; }
.footer-brand span { font-size: 13px; }
.research summary { color: #344457; min-height: 48px; }
.search-empty h2 { font-size: 24px; }
.search-empty p { font-size: 16px; }
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, input[type=radio]:focus-visible + span, .question-choice:has(input:focus-visible) { outline: 3px solid #176bba; outline-offset: 4px; }
@media (max-width: 900px) {
  .wrap { padding-inline: 24px; }
  .site-header { padding-inline: 24px; }
  .search-filters > label { flex-basis: 100%; }
  .category-shortcuts { flex-basis: 100%; }
  .steps { gap: 12px; }
  .steps li:not(:last-child)::after { width: 18px; margin-left: 4px; }
}
@media (max-width: 600px) {
  .wrap { padding-inline: 16px; }
  .site-header { padding-inline: 16px; min-height: 76px; }
  .brand { gap: 10px; }
  .wordmark { font-size: 26px; }
  .brand-sub { font-size: 10px; padding-left: 10px; letter-spacing: 1px; }
  .header-right a { font-size: 14px; }
  .app-modes { margin-top: 22px; }
  .app-modes button { font-size: 16px; min-height: 72px; padding-inline: 8px; }
  .app-modes button span { font-size: 14px; }
  .search-intro { padding-block: 30px 24px; }
  .search-intro h1 { font-size: 36px; margin-block: 18px 14px; }
  .search-intro > p:last-child, .intro-text { font-size: 16px; }
  .intro-eyebrow { font-size: 13px; }
  .search-input-row { flex-wrap: wrap; padding: 12px; gap: 8px; }
  .search-input-row > .icon { width: 22px; margin-left: 0; }
  #library-query { font-size: 16px; padding-block: 8px; }
  #library-query::placeholder { font-size: 16px; }
  .search-input-row .button { width: 100%; min-height: 48px; font-size: 16px; }
  .search-filters { padding: 16px; gap: 14px; }
  .search-filters > label { min-width: 0; }
  .category-shortcuts { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .category-shortcuts button { font-size: 16px; min-height: 64px; padding: 12px; }
  .search-results-heading { align-items: flex-start; flex-wrap: wrap; gap: 6px; margin-block: 28px 16px; }
  .search-results-heading h2 { font-size: 22px; }
  .search-results-heading p { font-size: 14px; }
  .search-result { padding: 21px; min-height: 0; gap: 10px; }
  .search-result-title { font-size: 19px; }
  .search-result-meta { font-size: 14px; }
  .search-result-description { font-size: 16px; }
  .library-preview { padding: 20px 16px; }
  .library-heading h2 { font-size: 27px; }
  .library-heading > p:last-child { font-size: 16px; }
  .library-preview label { font-size: 16px; }
  #library-output, #output { font-size: 16px; }
  .panel-top { align-items: flex-start; }
  .panel-top .quiet { display: none; }
  .steps { gap: 8px; align-items: flex-start; }
  .steps li { flex: 1; flex-direction: column; align-items: flex-start; font-size: 13px; gap: 7px; }
  .steps li span { width: 26px; height: 26px; font-size: 13px; }
  .mode-picker label > span { font-size: 15px; }
  .type-options { grid-template-columns: 1fr 1fr; gap: 8px; }
  .type-options label:first-child { grid-column: 1 / -1; }
  .type-options label > span { font-size: 15px; }
  .main-label { font-size: 17px; }
  .field-hint, .submit-note { font-size: 14px; text-align: left; }
  .extra-details summary, .result-actions button, .question-choice { font-size: 15px; }
  .edit-fields label { font-size: 16px; }
}
@media (max-width: 350px) {
  .wordmark { font-size: 23px; }
  .brand-sub { font-size: 9px; padding-left: 7px; }
  .brand { gap: 7px; }
  .header-right a { font-size: 13px; }
  .search-intro h1 { font-size: 32px; }
  .search-result { padding: 18px; }
}