/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V5 * macrostructure: Long Document (adapted civic-service register) · theme: custom navy gov-service * nav: N6 masthead (2-band: identity band + utility bar) · footer: Ft2 inline (adapted, stacked) * section-head: S4 inline-no-break (heading sits directly in flow — no hanging numbered eyebrow) * motion primitives (1, well under the 3-cap): colour/border transition on interactive states only — * no page-load reveal/stagger (genre says "reveals off"; brief says serious/flat/no flourish) * * v1 REAL BUILD — ported from mockups/final/ (เจ้าของอนุมัติดีไซน์แล้ว) into web/ ต่อกับข้อมูลจริง * data/scores.json + data/events.json. โครง/สไตล์เหมือน mockups/final/ ทุกจุด (ไม่รีดีไซน์ใหม่) — * เปลี่ยนเฉพาะ: font path (../fonts/ → fonts/ เพราะ web/style.css อยู่คนละระดับ), ตัดคำว่า MOCKUP/ * final merge ออกจาก markup/title (ทำใน .html แต่ละไฟล์), ต่อ JS จริงเข้ากับ data/scores.json (v2 schema) * และ data/events.json (ว่างตอนนี้ → empty state) แทนข้อมูลสมมติในตัว mockup — ไม่แตะสี/โทเค็น/ค่า contrast ใด ๆ * ------------------------------------------------------------------- */ /* tokens.css is linked separately in each page, loaded before this file */ /* --------------------------------------------------------------------- * Reset + base * ------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body { overflow-x: clip; } html { font-size: 100%; } /* 1rem = 16px — compact civic-service scale, per brief */ body { margin: 0; background: var(--color-paper-3); color: var(--color-ink-2); font-family: var(--font-body); font-weight: 400; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { max-width: 100%; display: block; } h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 700; color: var(--color-ink); font-style: normal; } p { margin: 0; } ul { margin: 0; padding: 0; list-style: none; } a { color: inherit; } button { font: inherit; } /* Focus — double-ring, GOV.UK-derived: solid ink ring first (visible on any surface), yellow outline outside it (yellow alone measures 1.51:1 on white — not enough alone). Never animated in; appears instantly. */ :focus { outline: none; } :focus-visible { outline: 3px solid var(--color-focus); outline-offset: 0; box-shadow: 0 0 0 2px var(--color-paper), 0 0 0 4px var(--color-focus-ring); } .tnum { font-variant-numeric: tabular-nums; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .page { max-width: 46rem; margin-inline: auto; padding-inline: var(--page-gutter); padding-bottom: var(--space-3xl); background: var(--color-paper); min-height: 100%; } .page__body { padding-top: var(--space-lg); } @media (min-width: 60rem) { .page { max-width: 56rem; } } /* --------------------------------------------------------------------- * Header — N6 masthead: dark navy identity band (full width, breaks out of * .page) + white utility bar. Utility bar is now TWO flex groups * (.gov-nav__main left, .gov-nav__utility right) via space-between — the * 3 primary links stay left, "แจ้งข้อมูลการจัดอบรม/ออกหน่วย" sits right, * visually and structurally separated (owner fix #4). Sticky utility bar * only (identity band scrolls away — keeps the sticky bar slim on mobile). * ------------------------------------------------------------------- */ .gov-header { background: var(--color-header-band); } .gov-header__inner { max-width: 56rem; margin-inline: auto; padding: var(--space-md) var(--page-gutter); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); } .gov-header__wordmark { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); color: var(--color-paper); overflow-wrap: anywhere; } .gov-header__tag { flex: 0 0 auto; font-size: var(--text-2xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: oklch(86.52% 0.1768 90.4); border: 1px solid oklch(86.52% 0.1768 90.4 / 0.6); padding: var(--space-3xs) var(--space-xs); white-space: nowrap; } .gov-header__accent-bar { height: 4px; background: var(--color-accent-strong); } .gov-nav { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--color-paper); border-bottom: 1px solid var(--color-rule); } .gov-nav__inner { max-width: 56rem; margin-inline: auto; padding-inline: var(--page-gutter); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); } .gov-nav__main, .gov-nav__utility { display: flex; flex-wrap: wrap; gap: var(--space-2xs) 0; } .gov-nav__link { display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--space-sm); font-size: var(--text-sm); font-weight: 600; color: var(--color-ink-2); border-bottom: 3px solid transparent; white-space: nowrap; transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); } @media (hover: hover) and (pointer: fine) { .gov-nav__link:hover:not(.is-active) { background: var(--color-paper-3); color: var(--color-ink); } } .gov-nav__link.is-active { color: var(--color-accent-strong); border-bottom-color: var(--color-accent-strong); } /* Utility link — same tab voice as the primary links so it still reads as navigation, but right-aligned and prefixed with a quiet glyph so it's visually legible as "a different kind of destination" (owner fix #4). */ .gov-nav__utility-link { display: inline-flex; align-items: center; gap: var(--space-2xs); min-height: 44px; padding-inline: var(--space-sm); font-size: var(--text-sm); font-weight: 600; color: var(--color-accent-strong); border-bottom: 3px solid transparent; white-space: nowrap; transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); } @media (hover: hover) and (pointer: fine) { .gov-nav__utility-link:hover:not(.is-active) { background: var(--color-paper-3); color: var(--color-header-band); } } .gov-nav__utility-link.is-active { color: var(--color-header-band); border-bottom-color: var(--color-accent-strong); } .gov-nav__back { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--text-sm); font-weight: 600; color: var(--color-accent-strong); text-decoration: underline; text-underline-offset: 3px; } .gov-nav__back:hover { color: var(--color-ink); } /* --------------------------------------------------------------------- * Phase banner — DRAFT status tag + explanation. GOV.UK "phase banner" * pattern: flat strip, no card border-radius, tag + one line of text. * ------------------------------------------------------------------- */ .phase-banner { background: var(--color-paper-2); border-bottom: 1px solid var(--color-rule); } .phase-banner__inner { max-width: 56rem; margin-inline: auto; padding: var(--space-sm) var(--page-gutter); display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-xs) var(--space-sm); font-size: var(--text-sm); color: var(--color-ink-2); } .phase-banner__tag { flex: 0 0 auto; display: inline-flex; align-items: center; font-size: var(--text-2xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-ink-2); background: var(--color-paper-3); border: 1px solid var(--color-rule-2); border-radius: var(--radius-sm); padding: var(--space-3xs) var(--space-sm); } .phase-banner__tag--warning { color: var(--color-warning); background: var(--color-warning-bg); border-color: var(--color-warning-ring); } /* --------------------------------------------------------------------- * Inset note — GOV.UK inset-text pattern: left border, no fill (neutral) or * a light fill (status variant). Used for scope/coverage + PDPA/legal notes, * and (new in this merge) for the two labelled score-explanation boxes on * index.html that carry over B's explanatory copy ("หน้าต่างนับคะแนน" / * "ยอดไม่ตรงกัน") in A's flat dress instead of B's soft stat-tile. * ------------------------------------------------------------------- */ .inset-note { border-left: 4px solid var(--color-rule-2); padding: var(--space-sm) var(--space-md); font-size: var(--text-sm); color: var(--color-ink-2); line-height: 1.6; margin-block: var(--space-lg); } .inset-note strong { font-weight: 700; color: var(--color-ink); } .inset-note--warning { border-left-color: var(--color-warning-ring); background: var(--color-warning-bg); color: var(--color-warning); } .inset-note--warning strong { color: var(--color-warning); } .inset-note code { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; background: var(--color-paper-3); padding: 1px 6px; border-radius: var(--radius-sm); font-size: 0.9em; } .inset-note--warning code { background: color-mix(in oklch, var(--color-warning-bg) 40%, white); } /* --------------------------------------------------------------------- * Intro — plain document heading, S4 inline-no-break. No floating negative * space, no eyebrow, no huge marketing display size. * ------------------------------------------------------------------- */ .intro { padding-block: var(--space-lg) var(--space-md); } .intro__h1 { font-size: var(--text-xl); line-height: 1.25; overflow-wrap: anywhere; min-width: 0; } .intro__lede { margin-top: var(--space-sm); max-width: 62ch; font-size: var(--text-base); color: var(--color-ink-2); line-height: 1.6; } .intro__coverage { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); } .intro__actions { margin-top: var(--space-md); } .intro__actions .btn { width: auto; } /* --------------------------------------------------------------------- * Panel — flat shared surface for search card / about block / support panel * / submit-form groups. 1px rule border, minimal radius, no shadow. * ------------------------------------------------------------------- */ .panel { background: var(--color-paper); border: 1px solid var(--color-rule); border-radius: var(--radius-sm); padding: var(--space-lg); } .panel + .panel { margin-top: var(--space-lg); } .panel__heading { font-size: var(--text-lg); margin-bottom: var(--space-md); padding-bottom: var(--space-sm); border-bottom: 1px solid var(--color-rule); } /* --------------------------------------------------------------------- * Forms — flat civic-service inputs: 2px solid border, 0 radius, generous * 48px targets, thick focus ring. * ------------------------------------------------------------------- */ form { display: flex; flex-direction: column; gap: var(--space-lg); } .field { display: flex; flex-direction: column; gap: var(--space-2xs); } .field label, .field-label-text { font-family: var(--font-body); font-weight: 700; font-size: var(--text-md); color: var(--color-ink); } .field-hint { font-size: var(--text-sm); color: var(--color-muted); margin-top: calc(-1 * var(--space-3xs)); } .field input, .field select, .date-selects select { height: 48px; padding-inline: var(--space-md); font-size: var(--text-base); font-family: var(--font-body); color: var(--color-ink); background: var(--color-paper); border: 2px solid var(--color-ink-2); border-radius: var(--radius-none); transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); } .field input::placeholder { color: var(--color-muted); } @media (hover: hover) and (pointer: fine) { .field input:hover, .field select:hover, .date-selects select:hover { border-color: var(--color-ink); } } .field input:focus-visible, .field select:focus-visible, .date-selects select:focus-visible { border-color: var(--color-ink); } .field input:disabled, .field select:disabled, .date-selects select:disabled { opacity: 0.5; cursor: not-allowed; } .form-fieldset { border: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-sm); } .form-fieldset legend { padding: 0; margin-bottom: var(--space-2xs); font-family: var(--font-body); font-weight: 700; font-size: var(--text-md); color: var(--color-ink); } .field-row { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-md); } .field-row .field { flex: 1 1 12rem; } /* Extra date ranges (submit.html #12) — repeatable start/end pair + remove button, max 6 (enforced in JS) */ .extra-date-row { align-items: flex-end; } .extra-date-row__remove { flex: 0 0 auto; align-self: flex-end; } /* Radio group — real native radios, large hit target, no pill wrapper (GOV.UK radio pattern) */ .radio-group { display: flex; flex-direction: column; gap: var(--space-xs); } @media (min-width: 32rem) { .radio-group { flex-direction: row; flex-wrap: wrap; gap: var(--space-lg); } } .radio-option { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; font-size: var(--text-base); font-weight: 600; color: var(--color-ink); cursor: pointer; } .radio-option input[type="radio"] { width: 22px; height: 22px; margin: 0; flex: 0 0 auto; accent-color: var(--color-accent-strong); } .field-checkbox { display: flex; align-items: flex-start; gap: var(--space-sm); } .field-checkbox input[type="checkbox"] { width: 22px; height: 22px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--color-accent-strong); } .field-checkbox label { font-size: var(--text-sm); font-weight: 400; color: var(--color-ink-2); line-height: 1.6; } .field.has-error input, .date-selects.has-error select { border-color: var(--color-error); } .field-error { min-height: 1lh; font-size: var(--text-sm); color: var(--color-error); } .field-error:not(:empty)::before { content: "⚠ "; } .date-selects { display: flex; flex-wrap: wrap; gap: var(--space-sm); } .date-selects select { flex: 1 1 7rem; min-width: 6rem; } /* --------------------------------------------------------------------- * Buttons — flat rectangle, 0 radius (GOV.UK button voice). Filled navy * primary, outline ink secondary. No shadow / bevel; state carried by * colour + a 1px translateY on :active only. * ------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding-block: var(--space-2xs); padding-inline: var(--space-lg); border-radius: var(--radius-none); font-weight: 700; font-size: var(--text-base); line-height: 1.3; text-align: center; white-space: normal; cursor: pointer; border: 2px solid transparent; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), transform 80ms var(--ease-out); } .btn:active { transform: translateY(1px); } .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } .btn--primary { background: var(--color-accent-strong); color: var(--color-paper); width: 100%; } .btn--primary:hover:not(:disabled) { background: var(--color-header-band); } .btn--outline { background: var(--color-paper); border-color: var(--color-ink); color: var(--color-ink); } .btn--outline:hover:not(:disabled) { background: var(--color-paper-3); } .btn--sm { min-height: 40px; padding-inline: var(--space-md); font-size: var(--text-sm); width: auto; } .btn--auto { width: auto; } /* --------------------------------------------------------------------- * Result panel — the score. A contained document module, NOT a marquee * hero: number capped at --text-figure (≤2.2rem), left-bordered like a * GOV.UK "notification banner", flat. * ------------------------------------------------------------------- */ .result-panel { border: 1px solid var(--color-rule); border-left: 6px solid var(--color-accent-strong); background: var(--color-paper); padding: var(--space-lg); } .result-panel__label { font-size: var(--text-sm); font-weight: 700; color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.04em; } .result-panel__row { display: flex; align-items: baseline; gap: var(--space-sm); flex-wrap: wrap; margin-top: var(--space-2xs); } .result-panel__figure { font-family: var(--font-display); font-size: var(--text-figure); font-weight: 700; line-height: 1; color: var(--color-ink); overflow-wrap: anywhere; } .result-panel__unit { font-size: var(--text-sm); color: var(--color-muted); } .result-panel__qualifier { margin-top: var(--space-xs); font-size: var(--text-base); font-weight: 600; color: var(--color-ink-2); } .result-panel__qualifier.is-done { color: var(--color-success); } .meter { margin-top: var(--space-md); height: 10px; background: var(--color-rule); border-radius: var(--radius-sm); overflow: hidden; } .meter__fill { height: 100%; background: var(--color-accent); transition: width 500ms var(--ease-out); } /* --------------------------------------------------------------------- * Section heads — S4 inline-no-break: heading emerges directly in flow. * ------------------------------------------------------------------- */ .section-head { margin-block: var(--space-xl) var(--space-xs); font-size: var(--text-lg); } .section-lede { margin-bottom: var(--space-sm); font-size: var(--text-sm); color: var(--color-ink-2); max-width: 62ch; line-height: 1.6; } /* --------------------------------------------------------------------- * Tags — GOV.UK "tag" component: small rectangle, 4px radius, bold * uppercase small text, colour-coded fill. * .tag--none is the new third score-state (owner fix #2): a training that * simply carries no CE-point application. Same neutral dress as * .tag--mock (contrast re-verified for this merge: muted on paper-3 = 4.98:1 AA). * ------------------------------------------------------------------- */ .tag { display: inline-flex; align-items: center; gap: var(--space-3xs); font-size: var(--text-2xs); font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; padding: var(--space-3xs) var(--space-xs); border-radius: var(--radius-sm); border: 1px solid transparent; max-width: 100%; /* status tags are not CTAs — allowed to wrap on very narrow screens rather than overflow */ } .tag--verified { background: var(--color-success-bg); color: var(--color-success); border-color: color-mix(in oklch, var(--color-success) 35%, transparent); } .tag--pending { background: var(--color-warning-bg); color: var(--color-warning); border-color: var(--color-warning-ring); } .tag--none { background: var(--color-paper-3); color: var(--color-muted); border-color: var(--color-rule-2); } .tag--mock { background: var(--color-paper-3); color: var(--color-muted); border-color: var(--color-rule-2); } .tag--hint { background: var(--color-paper-3); color: var(--color-muted); border-color: var(--color-rule-2); text-transform: none; font-weight: 600; } .tag--code { background: var(--color-paper-3); color: var(--color-ink-2); border-color: var(--color-rule-2); font-family: ui-monospace, monospace; } /* --------------------------------------------------------------------- * Activity cards — list of scored items * ------------------------------------------------------------------- */ .card-list { display: flex; flex-direction: column; gap: var(--space-sm); } .activity-card { background: var(--color-paper); border: 1px solid var(--color-rule); border-radius: var(--radius-sm); padding: var(--space-md) var(--space-lg); display: flex; flex-direction: column; gap: var(--space-2xs); } .activity-card__row { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-md); } .activity-card__main { flex: 1 1 auto; min-width: 0; } .activity-card__title { font-size: var(--text-dense); font-weight: 700; color: var(--color-ink); line-height: 1.4; overflow-wrap: anywhere; } .activity-card__tags { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-top: var(--space-2xs); } .activity-card__points { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; text-align: right; } .activity-card__points-num { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); color: var(--color-ink); } .activity-card__points-unit { font-size: var(--text-2xs); color: var(--color-muted); } .activity-card__date { font-size: var(--text-sm); color: var(--color-ink-2); } .activity-card__extra { font-size: var(--text-sm); color: var(--color-muted); } .activity-card__source { font-size: var(--text-xs); color: var(--color-accent-strong); text-decoration: underline; text-underline-offset: 2px; width: fit-content; } .activity-card__source:hover { color: var(--color-header-band); } /* --------------------------------------------------------------------- * Disclosure —
/, flat, no card padding change on open. * ------------------------------------------------------------------- */ .disclosure { border: 1px solid var(--color-rule); border-radius: var(--radius-sm); margin-top: var(--space-lg); overflow: hidden; } .disclosure__summary { list-style: none; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); padding: var(--space-sm) var(--space-md); cursor: pointer; -webkit-tap-highlight-color: transparent; } .disclosure__summary::-webkit-details-marker, .disclosure__summary::marker { display: none; content: ""; } .disclosure__summary-text { display: flex; flex-direction: column; gap: var(--space-3xs); min-width: 0; } .disclosure__summary-text .section-head { margin: 0; font-size: var(--text-md); } .disclosure__summary-text .section-lede { margin: 0; font-size: var(--text-sm); max-width: 46ch; } .disclosure__btn { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 40px; padding-inline: var(--space-md); border: 2px solid var(--color-ink); color: var(--color-ink); font-weight: 700; font-size: var(--text-sm); white-space: nowrap; } @media (hover: hover) and (pointer: fine) { .disclosure__summary:hover .disclosure__btn { background: var(--color-paper-3); } } .disclosure__btn-open { display: none; } .disclosure[open] .disclosure__btn-closed { display: none; } .disclosure[open] .disclosure__btn-open { display: inline; } .disclosure__summary:focus-visible { border-radius: var(--radius-sm); } .disclosure__body { padding: 0 var(--space-md) var(--space-md); border-top: 1px solid var(--color-rule); padding-top: var(--space-md); } .mismatch-path { padding: var(--space-md) 0; border-top: 1px solid var(--color-rule); } .mismatch-path:first-of-type { border-top: none; padding-top: 0; } .mismatch-path__label { font-size: var(--text-sm); font-weight: 700; color: var(--color-ink); } .mismatch-path__body { margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--color-ink-2); line-height: 1.6; } .mismatch-path .btn { width: auto; margin-top: var(--space-sm); height: 44px; padding-inline: var(--space-md); font-size: var(--text-sm); } .pdpa-note { margin-top: var(--space-lg); font-size: var(--text-2xs); color: var(--color-muted); line-height: 1.6; } /* --------------------------------------------------------------------- * Support panel — deliberately quiet. Owner fix round 2 #4: QR is no longer * shown by default — a button reveals it, same button hides it again (label * swaps between "สนับสนุนเว็บ" / "ซ่อน QR สนับสนุน"). Still a QR MOCK block, * no real PromptPay number — that hasn't changed, only the disclosure state. * ------------------------------------------------------------------- */ .support-panel { margin-top: var(--space-xl); text-align: center; } .support-panel__heading { font-size: var(--text-sm); font-weight: 700; color: var(--color-ink-2); } .support-panel__text { margin-top: var(--space-2xs); font-size: var(--text-xs); color: var(--color-muted); } .support-panel__toggle { margin-top: var(--space-md); } .support-panel__qr { margin: var(--space-md) auto 0; width: 140px; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; padding: var(--space-sm); text-align: center; font-size: var(--text-xs); color: var(--color-muted); background: var(--color-paper-3); border: 1px dashed var(--color-rule-2); } .support-panel__qr[hidden] { display: none; } /* --------------------------------------------------------------------- * Footer — Ft2 inline, adapted (stacked lines; content needs more than one * line but keeps the flat, no-columns, no-statement restraint). * ------------------------------------------------------------------- */ .gov-footer { margin-top: var(--space-3xl); border-top: 1px solid var(--color-rule); background: var(--color-paper-2); } .gov-footer__inner { max-width: 56rem; margin-inline: auto; padding: var(--space-lg) var(--page-gutter); } .gov-footer__wordmark { font-family: var(--font-display); font-weight: 700; font-size: var(--text-md); color: var(--color-ink); } .gov-footer__tagline { margin-top: var(--space-xs); max-width: 68ch; font-size: var(--text-sm); color: var(--color-ink-2); line-height: 1.6; } .gov-footer__rule, .gov-footer__meta { margin-top: var(--space-sm); font-size: var(--text-2xs); color: var(--color-muted); } .gov-footer__meta a { color: var(--color-accent-strong); text-decoration: underline; text-underline-offset: 2px; } .gov-footer__meta a:hover { color: var(--color-header-band); } /* ========================================================================= * Page-specific additions * ======================================================================= */ /* --- Filter row (trainings.html) — flat rectangle, not pill. Now also holds the ผู้จัด dropdown (coordinator ask #1) alongside the existing status chip-toggles, in the same wrapping row. --- */ .filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); margin-top: var(--space-sm); } .filter-row__label { flex: 0 0 100%; font-size: var(--text-2xs); font-weight: 700; color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.03em; } .chip-toggle { height: 38px; padding-inline: var(--space-md); border-radius: var(--radius-sm); border: 2px solid var(--color-rule-2); background: var(--color-paper); color: var(--color-ink-2); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); } .chip-toggle:hover:not(:disabled) { background: var(--color-paper-3); } .chip-toggle.is-active { background: var(--color-accent-strong); border-color: var(--color-accent-strong); color: var(--color-paper); } .chip-toggle:disabled { opacity: 0.5; cursor: not-allowed; } .search-field-solo { margin-top: var(--space-md); } /* status chips + format dropdown share one row (owner fix 23 ก.ค. ดึก #8) — chips wrap on the left, format select pinned right via margin-left:auto (falls to its own full-width line on very narrow screens) */ .filter-row__chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); } .filter-row__format { margin-left: auto; min-width: 11rem; } @media (max-width: 26rem) { .filter-row__format { margin-left: 0; width: 100%; } } /* Search suggestions — plain listbox under the combined search field (title/organizer/speaker), owner fix 23 ก.ค. ดึก #7. Pure client-side, no network. */ .search-field--suggest { position: relative; } .search-suggest { position: absolute; top: 100%; left: 0; right: 0; z-index: 20; margin-top: 2px; max-height: 14rem; overflow-y: auto; background: var(--color-paper); border: 2px solid var(--color-ink-2); border-top: none; box-shadow: 0 4px 10px rgba(16, 24, 40, 0.12); } .search-suggest[hidden] { display: none; } .search-suggest__item { display: flex; align-items: baseline; gap: var(--space-xs); width: 100%; text-align: left; padding: var(--space-sm) var(--space-md); font-size: var(--text-sm); color: var(--color-ink); background: none; border: none; cursor: pointer; } .search-suggest__item:hover, .search-suggest__item:focus-visible { background: var(--color-paper-3); } .search-suggest__type { font-size: var(--text-2xs); color: var(--color-muted); white-space: nowrap; } /* Organizer filter dropdown — same field voice as everywhere else, sized to sit in the chip row */ .filter-select { height: 38px; padding-inline: var(--space-sm) var(--space-xs); font-size: var(--text-sm); font-family: var(--font-body); font-weight: 600; color: var(--color-ink-2); background: var(--color-paper); border: 2px solid var(--color-rule-2); border-radius: var(--radius-sm); max-width: 100%; } @media (hover: hover) and (pointer: fine) { .filter-select:hover { border-color: var(--color-ink-2); } } /* Unified sort control — shown on BOTH desktop and mobile now (coordinator ask #2), sits above the table/card list, complements (not replaces) the header-click sort on desktop. */ .sort-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin-top: var(--space-md); } .sort-row label { font-size: var(--text-sm); font-weight: 700; color: var(--color-ink-2); white-space: nowrap; } .sort-row select { flex: 1 1 14rem; min-width: 0; height: 44px; padding-inline: var(--space-md); font-size: var(--text-sm); font-family: var(--font-body); color: var(--color-ink); background: var(--color-paper); border: 2px solid var(--color-ink-2); } /* --- Training table (≥48rem). Owner fix #1: no separate สถานะ column — the event-status tag now lives in the title cell, under the activity name, alongside the score-state tag and the mock label. Owner fix (round 2, #1): table must fit ~1024–1280px with NO horizontal scroll. table-layout:fixed + a of percentages (sums to 100%) replaces the old min-width:56rem approach — the table is always exactly 100% of .table-wrap's width, so long content wraps instead of forcing overflow. .table-wrap keeps overflow-x:auto as a safety net only (should never actually trigger at ≥48rem with this column plan). --- */ .table-wrap { display: none; margin-top: var(--space-lg); overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--color-rule); } @media (min-width: 48rem) { .table-wrap { display: block; } } .training-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: var(--text-dense); } .training-table caption { text-align: left; padding: var(--space-sm) var(--space-md) 0; font-size: var(--text-xs); color: var(--color-muted); } .training-table th, .training-table td { padding: var(--space-sm) var(--space-md); text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-rule); overflow-wrap: anywhere; } .training-table thead th { background: var(--color-paper-3); font-size: var(--text-2xs); font-weight: 700; color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.3; position: sticky; top: 0; } .training-table tbody tr:last-child td { border-bottom: none; } .training-table__row { cursor: pointer; } @media (hover: hover) and (pointer: fine) { .training-table__row:hover { background: var(--color-paper-3); } } .training-table__detail-row td { background: var(--color-paper-2); padding: 0; border-bottom: 1px solid var(--color-rule); } .training-table__detail-row[hidden] { display: none; } .th-sort { display: inline-flex; align-items: center; gap: var(--space-3xs); min-height: 36px; padding: 0; background: none; border: none; color: inherit; font: inherit; font-weight: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; white-space: nowrap; } .th-sort:hover { color: var(--color-ink); } .th-sort__icon { font-size: 0.75em; opacity: 0.6; } th[aria-sort="ascending"] .th-sort, th[aria-sort="descending"] .th-sort { color: var(--color-accent-strong); } th[aria-sort="ascending"] .th-sort__icon, th[aria-sort="descending"] .th-sort__icon { opacity: 1; } .training-table__title { display: block; font-size: var(--text-dense); font-weight: 700; color: var(--color-ink); line-height: 1.4; overflow-wrap: anywhere; } .training-table__title-cell { display: flex; flex-direction: column; gap: var(--space-2xs); align-items: flex-start; min-width: 0; } .training-table__speaker { font-size: var(--text-xs); color: var(--color-muted); } .training-table__tags { display: flex; flex-wrap: wrap; gap: var(--space-2xs); } .training-table__price--free { color: var(--color-success); font-weight: 700; } .training-table__empty { padding: var(--space-xl); text-align: center; color: var(--color-muted); } .training-table__empty[hidden] { display: none; } .training-table__toggle-cell { text-align: center; } /* Row-expand toggle — shared by table rows and mobile cards (owner fix round 2 #2). A real