/* Round 9: Thai text in Sarabun (self-hosted, SIL OFL, static/fonts/OFL.txt).
   unicode-range limits it to Thai characters, so Latin keeps the system font;
   size-adjust lifts Thai glyphs to the visual size of the Latin text. */
@font-face { font-family: "Sarabun Thai"; font-style: normal; font-weight: 400; font-display: swap; size-adjust: 112%;
  src: url("fonts/Sarabun-Regular.woff2") format("woff2"); unicode-range: U+0E00-0E7F, U+200B-200D, U+25CC; }
@font-face { font-family: "Sarabun Thai"; font-style: normal; font-weight: 500; font-display: swap; size-adjust: 112%;
  src: url("fonts/Sarabun-Medium.woff2") format("woff2"); unicode-range: U+0E00-0E7F, U+200B-200D, U+25CC; }
@font-face { font-family: "Sarabun Thai"; font-style: normal; font-weight: 600; font-display: swap; size-adjust: 112%;
  src: url("fonts/Sarabun-SemiBold.woff2") format("woff2"); unicode-range: U+0E00-0E7F, U+200B-200D, U+25CC; }
@font-face { font-family: "Sarabun Thai"; font-style: normal; font-weight: 700; font-display: swap; size-adjust: 112%;
  src: url("fonts/Sarabun-Bold.woff2") format("woff2"); unicode-range: U+0E00-0E7F, U+200B-200D, U+25CC; }
@font-face { font-family: "Sarabun Thai"; font-style: normal; font-weight: 701 900; font-display: swap; size-adjust: 112%;
  src: url("fonts/Sarabun-Bold.woff2") format("woff2"); unicode-range: U+0E00-0E7F, U+200B-200D, U+25CC; }

:root {
  --ink: #152838;
  --muted: #566777;
  --eyebrow: #0e6e83;
  --line: #d7e0e7;
  --surface: #ffffff;
  --surface-soft: #f4f7f9;
  --navy: #17324d;
  --navy-dark: #10263b;
  --cyan: #1c9bb4;
  --orange: #ef9b3b;
  --success: #26735a;
  --danger: #ae3641;
  --shadow: 0 12px 34px rgb(28 47 62 / 12%);
  --site-header-height: 64px;
  font-family: "Sarabun Thai", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: #edf2f5;
}

* { box-sizing: border-box; }
/* Author display rules (e.g. display: grid) must not defeat the hidden attribute used by the filters. */
[hidden] { display: none !important; }
body { margin: 0; min-width: 320px; }
a { color: inherit; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }

.site-header {
  position: sticky;
  z-index: 60;
  top: 0;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 clamp(16px, 1.7vw, 32px);
  color: #fff;
  background: var(--navy-dark);
  box-shadow: 0 2px 8px rgb(0 0 0 / 18%);
}
.brand { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 750; letter-spacing: .01em; white-space: nowrap; }
.brand-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--navy-dark); background: var(--orange); font-size: 13px; font-weight: 900; }
/* Round 9: nav + account sit in one panel; site_nav.js switches the header
   to compact mode (Menu button + drop-down panel) when they would wrap. */
.site-nav-panel { display: flex; flex: 1 1 auto; align-items: center; justify-content: flex-end; gap: 12px; min-width: 0; }
.site-header nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0; }
.site-header nav a { position: relative; color: #e8f2f7; text-decoration: none; padding: 8px 8px; border-radius: 6px; font-size: 13.5px; white-space: nowrap; }
.site-header nav a:hover { background: rgb(255 255 255 / 12%); }
.site-header nav > a.active, .nav-menu.active > summary { color: #fff; background: rgb(255 255 255 / 10%); }
.site-header nav > a.active::after, .nav-menu.active > summary::before { content: ""; position: absolute; right: 8px; bottom: 2px; left: 8px; height: 2px; border-radius: 2px; background: var(--orange); }
.nav-menu-items a.active { color: #fff; background: rgb(255 255 255 / 10%); box-shadow: inset 3px 0 0 var(--orange); }
.nav-toggle { display: none; align-items: center; gap: 8px; margin-left: auto; border: 1px solid rgb(255 255 255 / 30%); border-radius: 7px; padding: 7px 11px; color: #fff; background: transparent; font-size: 13px; font-weight: 750; }
.nav-toggle:hover { background: rgb(255 255 255 / 12%); }
.nav-toggle-icon, .nav-toggle-icon::before, .nav-toggle-icon::after { display: block; width: 16px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .18s ease, opacity .18s ease; }
.nav-toggle-icon { position: relative; }
.nav-toggle-icon::before, .nav-toggle-icon::after { content: ""; position: absolute; left: 0; }
.nav-toggle-icon::before { top: -5px; }
.nav-toggle-icon::after { top: 5px; }
.is-menu-open .nav-toggle-icon { background: transparent; }
.is-menu-open .nav-toggle-icon::before { transform: translateY(5px) rotate(45deg); }
.is-menu-open .nav-toggle-icon::after { transform: translateY(-5px) rotate(-45deg); }
.js .site-header.is-compact { gap: 12px; }
.js .site-header.is-compact .nav-toggle { display: inline-flex; }
.js .site-header.is-compact .site-nav-panel { position: absolute; top: 100%; right: 0; left: 0; display: none; flex-direction: column; align-items: stretch; gap: 10px; max-height: calc(100vh - var(--site-header-height)); overflow-y: auto; padding: 10px 16px 16px; background: var(--navy-dark); box-shadow: 0 14px 28px rgb(0 0 0 / 28%); border-top: 1px solid rgb(255 255 255 / 10%); }
.js .site-header.is-compact.is-menu-open .site-nav-panel { display: flex; }
.js .site-header.is-compact nav { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2px 8px; }
.js .site-header.is-compact nav a, .js .site-header.is-compact .nav-menu summary { padding: 10px 12px; font-size: 15px; }
.js .site-header.is-compact nav > a.active::after, .js .site-header.is-compact .nav-menu.active > summary::before { top: 8px; right: auto; bottom: 8px; left: 0; width: 3px; height: auto; }
.js .site-header.is-compact .nav-menu { position: relative; grid-column: 1 / -1; }
.js .site-header.is-compact .nav-menu-items { position: static; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2px 8px; min-width: 0; margin: 2px 0 0 12px; border-left: 1px solid rgb(255 255 255 / 14%); border-radius: 0; padding: 0 0 0 8px; background: transparent; box-shadow: none; }
.js .site-header.is-compact .account-menu { justify-content: space-between; border-top: 1px solid rgb(255 255 255 / 10%); padding-top: 12px; }
.js .site-header.is-compact .account-text { max-width: none; }
.language-switcher { display: inline-flex; flex: 0 0 auto; gap: 2px; padding: 3px; border: 1px solid rgb(255 255 255 / 24%); border-radius: 7px; }
.language-switcher a { border-radius: 4px; padding: 4px 7px; color: #d9e9f0; font-size: 11px; font-weight: 800; text-decoration: none; }
.language-switcher a.active { color: var(--navy-dark); background: #fff; }
.site-main { width: 100%; max-width: none; margin: 0 auto; padding: clamp(20px, 2vw, 34px); }

h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 9px; font-size: clamp(25px, 3vw, 36px); letter-spacing: -.03em; }
h2 { margin-bottom: 8px; font-size: 20px; letter-spacing: -.015em; }
h3 { font-size: 17px; margin-bottom: 8px; }
p { line-height: 1.55; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.eyebrow { margin-bottom: 5px; color: var(--eyebrow); font-size: 11px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }

.page-intro { max-width: 800px; margin-bottom: 26px; }
.page-intro.compact { margin-bottom: 20px; }
.page-intro p:last-child { margin-bottom: 0; color: var(--muted); }
.panel, .empty-state, .product-card, .source-record { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 4px 13px rgb(35 55 67 / 5%); }
.panel { padding: 22px; }
.empty-state { padding: 45px 24px; text-align: center; color: var(--muted); }
.flash { margin-bottom: 18px; border-radius: 8px; padding: 12px 14px; font-size: 14px; }
.flash-success { color: #155d45; background: #e5f5ed; border: 1px solid #b9e6cf; }
.flash-error { color: #8b2530; background: #fff0f1; border: 1px solid #f2c8cd; }

.create-product-panel { display: grid; grid-template-columns: minmax(250px, .9fr) minmax(360px, 1.1fr); gap: 28px; align-items: end; margin-bottom: 34px; }
.create-product-panel h2 { margin-bottom: 3px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin: 30px 0 14px; }
.section-heading h2 { margin-bottom: 0; }
.count-badge, .file-badge { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 5px 10px; color: #466071; background: #e6edf1; font-size: 12px; font-weight: 700; white-space: nowrap; }

.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 16px; }
.product-card { display: flex; min-height: 246px; flex-direction: column; padding: 18px; }
.product-card-topline { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.product-card h3 { margin-top: 18px; overflow-wrap: anywhere; }
.product-card > p:nth-of-type(1) { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; min-height: 66px; color: var(--muted); font-size: 14px; }
.product-card .card-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: auto; }
.product-card .card-actions .button { min-width: 0; padding: 8px 6px; justify-content: center; text-align: center; white-space: normal; line-height: 1.2; overflow-wrap: anywhere; }
.product-card .language-badge { align-self: flex-start; margin: -2px 0 10px; }
.delete-form { margin-top: 14px; }
.company-dashboard-grid { display: grid; grid-template-columns: minmax(280px, .75fr) minmax(390px, 1.25fr); gap: 18px; align-items: start; }
.company-card-list { display: grid; gap: 9px; }
.company-card { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; border: 1px solid #d7e1e6; border-radius: 8px; padding: 12px; background: #fbfdfe; }
.company-card.selected { border-color: #5ea9bd; background: #eef9fb; }
.company-card h3 { margin: 0 0 4px; color: var(--navy); font-size: 14px; }
.company-card p { margin: 0; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.company-card .card-actions { display: flex; flex: 0 0 auto; flex-direction: column; align-items: flex-end; gap: 8px; }
.status-pill { border-radius: 999px; padding: 4px 8px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.status-draft { color: #705016; background: #fff4d9; }
.status-review { color: #1f5d7d; background: #e3f4fb; }
.status-released { color: #195e47; background: #e4f5ed; }
.status-superseded { color: #5e566d; background: #eeecf4; }
.status-withdrawn { color: #8a3341; background: #fff0f1; }

.button { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; border: 1px solid transparent; border-radius: 7px; padding: 8px 12px; text-decoration: none; font-size: 13px; font-weight: 750; transition: background .15s ease, border-color .15s ease, transform .15s ease; }
.button:hover { transform: translateY(-1px); }
.button.primary { color: #fff; background: var(--navy); }
.button.primary:hover { background: #244866; }
.button.secondary { color: var(--navy); border-color: #adbdc8; background: #fff; }
.button.secondary:hover { border-color: var(--navy); background: #f6fafc; }
.button.danger { color: #fff; background: var(--danger); }
.button.danger:hover { background: #8e2630; }
.compact-button { min-height: 31px; padding: 5px 8px; font-size: 11px; }
.link-danger { border: 0; padding: 0; color: var(--danger); background: transparent; font-size: 12px; font-weight: 700; }
.link-danger:hover { text-decoration: underline; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.inline-form { display: flex; align-items: end; gap: 12px; }
.inline-form .grow { flex: 1; }
label { display: grid; gap: 6px; color: #435865; font-size: 12px; font-weight: 700; }
input, textarea, select { width: 100%; border: 1px solid #bdcad2; border-radius: 7px; padding: 9px 10px; color: var(--ink); background: #fff; font-weight: 450; }
textarea { min-height: 80px; resize: vertical; line-height: 1.45; }
input:focus, textarea:focus, select:focus { outline: 3px solid rgb(28 155 180 / 18%); border-color: var(--cyan); }
.full-width { grid-column: 1 / -1; }
.form-actions { display: flex; align-items: center; gap: 10px; }

.source-list { display: grid; gap: 10px; }
.source-record { overflow: hidden; }
.source-record summary { display: grid; grid-template-columns: 82px minmax(150px, 1fr) minmax(120px, .7fr) auto; align-items: center; gap: 12px; padding: 15px 17px; cursor: pointer; list-style: none; }
.source-record summary::-webkit-details-marker { display: none; }
.source-record summary:hover { background: #f7fafb; }
.source-record-body { border-top: 1px solid var(--line); padding: 17px; }
.source-type { color: #1e5e7a; font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.file-link { align-self: center; color: #186b89; overflow-wrap: anywhere; }

.workspace-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 15px; }
.workspace-header h1 { margin-bottom: 6px; overflow-wrap: anywhere; }
.workspace-header p:last-child { margin-bottom: 0; }
.document-tabs { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.tab { border-radius: 6px; padding: 8px 11px; color: #526a78; text-decoration: none; font-size: 13px; font-weight: 750; }
.tab.active { color: #fff; background: var(--navy); }
.language-badge { display: inline-flex; align-items: center; width: fit-content; border-radius: 999px; padding: 4px 8px; color: #176077; background: #e0f2f6; font-size: 10px; font-weight: 800; letter-spacing: .03em; }
.product-meta-panel { margin-bottom: 18px; padding: 0; }
.product-meta-panel summary, .editor-utility summary { padding: 15px 18px; cursor: pointer; color: var(--navy); font-size: 14px; font-weight: 800; }
.product-meta-panel details[open] summary { border-bottom: 1px solid var(--line); }
.product-meta-panel .form-grid { padding: 18px; }

.document-workspace { display: grid; grid-template-columns: minmax(230px, .5fr) minmax(0, 1.12fr) minmax(350px, .9fr); gap: 20px; align-items: start; }
.layout-panel, .preview-panel, .editor-panel { min-width: 0; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: var(--shadow); }
/* Sticky panels stop below the sticky site header (round 9). */
.layout-panel, .preview-panel { position: sticky; top: calc(var(--site-header-height) + 12px); overflow: hidden; }
.layout-toolbar, .preview-toolbar, .editor-toolbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 13px; border-bottom: 1px solid var(--line); padding: 16px 18px; }
.layout-toolbar h2, .preview-toolbar h2, .editor-toolbar h2 { margin-bottom: 0; font-size: 17px; }
.preview-toolbar-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: end; gap: 6px; }
.preview-zoom-controls { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.preview-zoom-controls .mini-button { min-width: 43px; }
.preview-zoom-controls .mini-button.active { border-color: #1d788f; color: #fff; background: #1d788f; }
.layout-mode-badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 5px 9px; color: #1e5e7a; background: #e2f4f8; font-size: 11px; font-weight: 800; letter-spacing: .06em; }
.layout-content { max-height: calc(100vh - var(--site-header-height) - 172px); overflow: auto; padding: 14px; }
.layout-intro { margin-bottom: 12px; border: 1px solid #d6e6eb; border-radius: 8px; padding: 10px; background: #f4fafb; }
.layout-intro p { margin: 0; color: #43606e; font-size: 12px; line-height: 1.45; }
.layout-intro .layout-save-note { margin-top: 7px; color: #1d7088; font-size: 11px; font-weight: 700; }
.layout-list { display: grid; gap: 8px; }
.layout-card { border: 1px solid #d2dee4; border-radius: 8px; padding: 9px; background: #fff; transition: border-color .15s ease, box-shadow .15s ease, opacity .15s ease; }
.layout-card.is-draggable { cursor: grab; }
.layout-card.is-draggable:active { cursor: grabbing; }
.layout-card.is-locked { background: #fafcfd; }
.layout-card.is-hidden { opacity: .56; background: #f4f7f8; }
.layout-card.is-dragging { opacity: .35; }
.layout-card.is-drop-target { border-color: var(--cyan); box-shadow: 0 0 0 3px rgb(28 155 180 / 15%); }
.layout-card-heading { display: flex; align-items: flex-start; gap: 8px; }
.layout-card-heading > div { min-width: 0; }
.layout-card-heading strong, .layout-card-heading span { display: block; overflow-wrap: anywhere; }
.layout-card-heading strong { color: var(--navy); font-size: 12px; line-height: 1.3; }
.layout-card-heading span { margin-top: 2px; color: #6a7d89; font-size: 10px; line-height: 1.3; }
.drag-handle { display: grid; flex: 0 0 auto; place-items: center; width: 20px; height: 22px; border-radius: 4px; color: #39758a; background: #e8f4f7; font-size: 15px; font-weight: 900; line-height: 1; }
.drag-handle.locked { color: #7b8d97; background: #edf1f3; font-size: 13px; }
.layout-card-actions { display: flex; flex-wrap: wrap; gap: 5px; margin: 9px 0 0 28px; }
.layout-action { min-height: 25px; border: 1px solid #b7c7d0; border-radius: 5px; padding: 3px 6px; color: #38586a; background: #fff; font-size: 10px; font-weight: 750; }
.layout-action:hover:not(:disabled), .layout-action.active { border-color: #23819a; color: #12637b; background: #e8f6f9; }
.layout-action:disabled { cursor: not-allowed; opacity: .42; }
.layout-locked-note { align-self: center; color: #768791; font-size: 10px; font-weight: 700; }
.tds-layout-list { display: grid; gap: 12px; }
.tds-layout-row { overflow: visible; border: 1px solid #d2dee4; border-radius: 8px; padding: 8px; background: #f9fcfd; }
.tds-layout-row-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 7px; margin-bottom: 8px; }
.tds-layout-row-heading > div:first-child { min-width: 0; }
.tds-layout-row-heading strong, .tds-layout-row-heading span { display: block; }
.tds-layout-row-heading strong { color: var(--navy); font-size: 11px; }
.tds-layout-row-heading span { margin-top: 2px; color: #687d88; font-size: 9px; line-height: 1.25; }
.tds-row-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: end; gap: 4px; }
.tds-layout-slots { display: grid; min-width: 0; gap: 7px; align-items: stretch; }
.tds-layout-card { position: relative; min-width: 0; min-height: 104px; overflow: visible; padding: 8px; }
.tds-layout-card .layout-card-heading { gap: 5px; }
.tds-layout-card .drag-handle { width: 17px; height: 19px; font-size: 12px; }
.tds-layout-card .layout-card-heading strong { font-size: 10px; }
.tds-layout-card .layout-card-heading span { font-size: 9px; }
.tds-layout-card .layout-card-actions { margin: 8px 0 0 22px; }
.layout-width-value { align-self: center; color: #1f6c84; font-size: 10px; font-weight: 800; }
.layout-width-warning { align-self: center; color: #8c5a16; font-size: 9px; font-weight: 800; }
.tds-row-resizer { position: absolute; z-index: 2; top: 7px; right: -7px; bottom: 7px; width: 13px; border: 0; border-radius: 7px; padding: 0; cursor: col-resize; background: linear-gradient(90deg, transparent 43%, #7cb7c8 43%, #7cb7c8 57%, transparent 57%); touch-action: none; }
.tds-row-resizer:hover, .tds-row-resizer:focus-visible { outline: 2px solid #3190aa; outline-offset: 1px; background: linear-gradient(90deg, transparent 35%, #25819a 35%, #25819a 65%, transparent 65%); }
.tds-new-row-drop { margin-top: 8px; border: 1px dashed #a9c2cc; border-radius: 5px; padding: 5px; color: #527583; background: #fff; font-size: 9px; font-weight: 700; text-align: center; }
.tds-new-row-drop.is-drop-target { border-color: var(--cyan); color: #12637b; background: #e8f6f9; box-shadow: 0 0 0 2px rgb(28 155 180 / 15%); }
.save-status { border-radius: 999px; padding: 5px 9px; color: #526a78; background: #e9eff2; font-size: 11px; font-weight: 750; white-space: nowrap; }
.save-status.saving { color: #84590e; background: #fff1d2; }
.save-status.saved { color: #176249; background: #ddf3e8; }
.save-status.error { color: #992d39; background: #ffe3e6; }
.preview-canvas { max-height: calc(100vh - var(--site-header-height) - 174px); overflow: auto; padding: 22px; background: #d9e3e9; }
.page-sheet { position: relative; width: min(210mm, 100%); min-height: 297mm; margin: 0 auto; overflow: hidden; background: var(--document-page, #fff); box-shadow: 0 2px 12px rgb(24 43 56 / 24%); color: var(--document-text, #102a43); font-family: Arial, "Tahoma", sans-serif; font-size: 10px; line-height: 1.48; zoom: var(--preview-zoom, 1); }
.preview-panel.is-expanded { position: fixed; z-index: 80; inset: 14px; display: flex; flex-direction: column; max-height: none; }
.preview-panel.is-expanded .preview-toolbar { flex: 0 0 auto; }
.preview-panel.is-expanded .preview-canvas { flex: 1 1 auto; max-height: none; min-height: 0; }
.preview-panel.is-expanded .page-sheet { margin-bottom: 24px; }
body.preview-expanded-open { overflow: hidden; }
.document-page-header { position: relative; z-index: 1; display: grid; gap: 5px; min-height: 68px; padding: 14px 20px 12px; color: var(--document-on-primary, #fff); background: var(--document-primary, var(--navy)); }
.document-header-row { display: grid; gap: 10px; min-width: 0; }
.header-field { min-width: 0; overflow-wrap: anywhere; color: var(--document-on-primary, #fff); font-size: 8.6px; line-height: 1.25; }
.header-field strong { display: block; color: inherit; font-size: 10px; }
.header-field-product_name strong { font-size: 17px; }
.header-field-document_title, .header-field-revision, .header-field-revision_date { text-align: right; }
.header-field-product_description, .header-field-revision, .header-field-revision_date { color: var(--document-accent, #c9dfe8); }
.document-body { position: relative; z-index: 1; padding: 17px 20px 72px; }
.document-section { margin-top: 12px; break-inside: avoid; }
.tds-preview-row { display: grid; gap: 10px; align-items: stretch; margin-top: 12px; }
.tds-preview-row > .document-layout-block { display: flex; min-width: 0; }
.tds-preview-row > .document-layout-block > .document-section { width: 100%; margin-top: 0; }
.tds-preview-row .property-table { font-size: 7.6px; }
.document-section h4 { margin: 0 0 5px; padding-bottom: 4px; border-bottom: 1px solid var(--document-accent, #9eb4bf); color: var(--document-text, var(--navy)); font-size: 11px; }
.document-section h4 small { display: block; margin-top: 2px; color: var(--document-text, #657683); font-size: 8px; font-weight: 600; opacity: .75; }
.document-section p { margin: 0; white-space: pre-wrap; font-size: 9.4px; }
.rich-document-content { overflow-wrap: anywhere; color: var(--document-text, #192b38); font-size: 9.4px; line-height: 1.48; }
.rich-document-content p { margin: 0 0 5px; white-space: pre-wrap; }
.rich-document-content h2 { margin: 0 0 6px; color: var(--document-text, var(--navy)); font-size: 11.5px; line-height: 1.3; }
.rich-document-content h3 { margin: 0 0 5px; color: var(--document-text, var(--navy)); font-size: 10px; line-height: 1.3; }
.rich-document-content ul, .rich-document-content ol { margin: 2px 0 5px 16px; padding: 0; }
.rich-document-content li { margin: 1px 0; }
.rich-document-content blockquote { margin: 4px 0; border-left: 2px solid var(--document-accent, #9eb9c5); padding-left: 7px; color: var(--document-text, #4f6571); }
.rich-document-content hr { border: 0; border-top: 1px solid var(--document-accent, #9eb4bf); margin: 6px 0; }
.rich-document-content a { color: var(--document-primary, #176d87); text-decoration: underline; }
.rich-document-content [data-size="small"] { font-size: .84em; }
.rich-document-content [data-size="large"] { font-size: 1.18em; }
.rich-document-content [data-size="xlarge"] { font-size: 1.36em; }
.rich-document-content [data-align="center"] { text-align: center; }
.rich-document-content [data-align="right"] { text-align: right; }
.rich-document-content [data-align="justify"] { text-align: justify; }
.preview-page-break { margin: 12px 0 8px; border-top: 1px dashed var(--document-accent, #4d9db4); color: var(--document-primary, #27748b); font-size: 7.5px; font-weight: 800; letter-spacing: .08em; text-align: center; text-transform: uppercase; }
.draft-placeholder { color: var(--document-text, #7b8b96); font-style: italic; opacity: .68; }
.property-table { width: 100%; border-collapse: collapse; font-size: 8.5px; }
.property-table th { color: var(--document-on-primary, #fff); background: var(--document-primary, var(--navy)); font-weight: 700; text-align: left; }
.property-table th, .property-table td { padding: 5px 6px; border: 1px solid var(--document-accent, #bbcad2); vertical-align: top; overflow-wrap: anywhere; }
.property-table td { min-height: 24px; }
.property-table th.table-align-center, .property-table td.table-align-center { text-align: center; }
.property-table th.table-align-right, .property-table td.table-align-right { text-align: right; }
.preview-image-grid { display: grid; gap: 8px; margin-top: 7px; }
.preview-image-row { display: grid; grid-template-columns: repeat(var(--image-count, 1), minmax(0, 1fr)); gap: 8px; }
.preview-image-row-1 { grid-template-columns: minmax(0, 1fr); }
.preview-image-row-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.preview-image-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.preview-image-card { display: flex; min-width: 0; flex-direction: column; border: 1px solid var(--document-accent, #c8d5dc); padding: 5px; }
.preview-image-media { display: flex; min-width: 0; width: 100%; }
.preview-image-card img { display: block; width: var(--preview-image-size, 100%); max-width: 100%; height: auto; max-height: none; object-fit: contain; background: color-mix(in srgb, var(--document-page, #f5f8fa) 90%, var(--document-accent, #f5f8fa)); }
.preview-image-align-left .preview-image-media { justify-content: flex-start; }
.preview-image-align-center .preview-image-media { justify-content: center; }
.preview-image-align-right .preview-image-media { justify-content: flex-end; }
.preview-image-card span { display: block; margin-top: 4px; color: var(--document-text, #607482); font-size: 8px; overflow-wrap: anywhere; opacity: .78; }
.document-page-footer { position: absolute; z-index: 1; right: 20px; bottom: 13px; left: 20px; display: grid; gap: 3px; border-top: 1px solid var(--document-accent, #aec0ca); padding-top: 5px; color: var(--document-text, #637582); font-size: 7.5px; }
.document-footer-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 6px; min-width: 0; }
.footer-cell { min-width: 0; overflow-wrap: anywhere; }
.footer-cell-center { text-align: center; }
.footer-cell-right { text-align: right; }
.empty-footer { display: block; }
.penguin-watermark { position: absolute; z-index: 0; top: var(--watermark-y, 76%); left: var(--watermark-x, 83%); width: var(--watermark-scale, 20%); max-width: 60%; opacity: var(--watermark-opacity, .1); transform: translate(-50%, -50%) rotate(var(--watermark-rotation, 0deg)); transform-origin: center; cursor: grab; touch-action: none; }
.penguin-watermark:active { cursor: grabbing; }
.penguin-watermark img { display: block; width: 100%; height: auto; }

.editor-panel { overflow: hidden; }
.export-actions { display: flex; flex-wrap: wrap; justify-content: end; gap: 6px; }
#editor-content { padding: 18px; }
.editor-section { margin-bottom: 17px; border: 1px solid #d7e0e6; border-radius: 8px; padding: 13px; background: #fcfdfe; }
.editor-section h3 { margin: 0 0 10px; color: var(--navy); font-size: 14px; }
.editor-section-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 9px; }
.editor-section-title-row h3 { margin-bottom: 3px; }
.editor-form-grid { gap: 10px; }
.header-toggle-group { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 13px 0 0; border: 1px solid #dbe5ea; border-radius: 7px; padding: 10px; }
.header-toggle-group legend { padding: 0 4px; color: #5b7280; font-size: 10px; font-weight: 800; }
.document-theme-group { margin: 13px 0 0; border: 1px solid #dbe5ea; border-radius: 7px; padding: 10px; }
.document-theme-group legend { padding: 0 4px; color: #5b7280; font-size: 10px; font-weight: 800; }
.document-theme-group .section-label { margin-top: 0; }
.document-theme-controls { display: flex; flex-wrap: wrap; gap: 10px; }
.document-theme-controls label { grid-template-columns: auto auto; align-items: center; }
.document-theme-controls input[type="color"] { width: 44px; height: 30px; padding: 2px; }
.header-layout-planner { margin-top: 13px; }
.header-layout-planner h4 { margin: 0 0 4px; color: var(--navy); font-size: 12px; }
.compact-planner { display: grid; gap: 8px; }
.compact-planner-row { border: 1px solid #d6e4e9; border-radius: 7px; padding: 8px; background: #fff; }
.compact-planner-row-heading { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 6px; color: #315b6e; font-size: 10px; }
.compact-planner-row-heading span { color: var(--muted); font-weight: 700; }
.compact-planner-items { display: grid; gap: 6px; }
.compact-planner-item { display: flex; align-items: center; justify-content: space-between; gap: 7px; border: 1px solid #dde8ed; border-radius: 6px; padding: 6px 7px; color: var(--navy); font-size: 11px; }
.compact-planner-controls { display: flex; flex-wrap: wrap; justify-content: end; gap: 4px; }
.compact-planner-controls select { width: auto; min-width: 66px; padding: 4px 5px; font-size: 10px; }
.toggle-option { display: inline-flex; align-items: center; grid-template-columns: auto 1fr; gap: 6px; color: #385768; font-size: 11px; }
.toggle-option input { width: auto; margin: 0; }
.admin-metadata { padding: 0; }
.admin-metadata summary { cursor: pointer; padding: 13px; color: #536d7c; font-size: 12px; font-weight: 800; }
.admin-metadata[open] summary { border-bottom: 1px solid #d7e0e6; }
.admin-metadata .editor-form-grid { padding: 13px; }
.editor-section .section-label { margin-bottom: 8px; color: #637582; font-size: 11px; font-weight: 700; }
.editor-section textarea { min-height: 113px; }
.rich-text-field { overflow: hidden; border: 1px solid #bdcad2; border-radius: 7px; background: #fff; }
.rich-text-field:focus-within { border-color: var(--cyan); box-shadow: 0 0 0 3px rgb(28 155 180 / 18%); }
.rich-text-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; border-bottom: 1px solid #d8e2e7; padding: 6px; background: #f5f8fa; }
.rich-tool, .rich-block-select, .rich-font-select { min-height: 27px; border: 1px solid #c7d4da; border-radius: 4px; padding: 3px 7px; color: var(--navy); background: #fff; font-size: 11px; line-height: 1; }
.rich-tool:hover { border-color: #27829b; background: #e9f7fa; }
.rich-tool-divider { width: 1px; align-self: stretch; margin: 1px 2px; background: #cfdce2; }
.rich-block-select, .rich-font-select { width: auto; min-width: 106px; }
.rich-font-select { min-width: 74px; }
.rich-text-editor { min-height: 122px; padding: 10px; color: var(--ink); font-size: 13px; font-weight: 450; line-height: 1.5; outline: 0; overflow-wrap: anywhere; }
.rich-text-editor:empty::before { color: #83919a; content: attr(data-placeholder); pointer-events: none; }
.rich-text-editor p { margin: 0 0 8px; }
.rich-text-editor h2 { margin: 0 0 8px; color: var(--navy); font-size: 16px; }
.rich-text-editor h3 { margin: 0 0 8px; font-size: 14px; }
.rich-text-editor ul, .rich-text-editor ol { margin: 3px 0 8px 20px; padding: 0; }
.rich-text-editor li { margin: 2px 0; }
.rich-text-editor blockquote { margin: 5px 0; border-left: 3px solid #9cbec9; padding-left: 9px; color: #536a76; }
.rich-text-editor hr { border: 0; border-top: 1px solid #9eb4bf; margin: 9px 0; }
.rich-text-editor a { color: #176d87; text-decoration: underline; }
.rich-text-editor [data-size="small"] { font-size: .84em; }
.rich-text-editor [data-size="large"] { font-size: 1.18em; }
.rich-text-editor [data-size="xlarge"] { font-size: 1.36em; }
.rich-text-editor [data-align="center"] { text-align: center; }
.rich-text-editor [data-align="right"] { text-align: right; }
.rich-text-editor [data-align="justify"] { text-align: justify; }
.rich-text-hint { margin: 0; border-top: 1px solid #e1e8ec; padding: 6px 9px; color: var(--muted); background: #fbfcfd; font-size: 10px; line-height: 1.35; }
.editor-table-wrap { overflow-x: auto; }
.editor-table { width: 100%; min-width: 530px; border-collapse: collapse; }
.editor-table th { padding: 0 4px 7px; color: #607482; text-align: left; font-size: 10px; }
.editor-table td { padding: 3px 4px; vertical-align: top; }
.editor-table input { min-width: 80px; padding: 7px; font-size: 12px; }
.table-cell-editor { display: grid; gap: 4px; min-width: 132px; }
.table-cell-editor input { width: 100%; }
.table-align-control { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: 9px; font-weight: 750; }
.table-align-control select { width: 100%; min-width: 0; padding: 4px 5px; font-size: 10px; }
.comparison-header-editor { display: grid; gap: 5px; min-width: 142px; }
.comparison-header-editor > input { width: 100%; min-width: 0; padding: 6px; color: var(--navy); font-size: 11px; font-weight: 800; }
.comparison-header-actions { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.comparison-header-actions .mini-button { min-height: 24px; padding: 3px 5px; font-size: 9px; }
.table-action { flex-wrap: wrap; }
.table-action { display: flex; gap: 7px; align-items: center; margin-top: 9px; }
.mini-button { min-height: 28px; border: 1px solid #abc0cb; border-radius: 5px; padding: 5px 8px; color: var(--navy); background: #fff; font-size: 11px; font-weight: 750; }
.footer-editor { background: #f7fbfc; }
.footer-add-control { display: grid; gap: 7px; margin: 12px 0 10px; color: #315b6e; font-size: 11px; }
.available-field-buttons { display: flex; flex-wrap: wrap; gap: 5px; }
.footer-planner { display: grid; gap: 8px; }
.footer-planner-row { border: 1px solid #d6e4e9; border-radius: 7px; padding: 8px; background: #fff; }
.footer-planner-row-heading { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 6px; color: #315b6e; font-size: 10px; }
.footer-planner-row-heading span { color: var(--muted); font-weight: 700; }
.footer-planner-items { display: grid; gap: 6px; }
.footer-planner-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; border: 1px solid #dde8ed; border-radius: 6px; padding: 7px; background: #fbfdfe; }
.footer-planner-item strong, .footer-planner-item span { display: block; overflow-wrap: anywhere; }
.footer-planner-item strong { color: var(--navy); font-size: 11px; }
.footer-planner-item span { margin-top: 2px; color: var(--muted); font-size: 9px; }
.footer-item-controls { display: flex; flex-wrap: wrap; justify-content: end; gap: 4px; }
.footer-item-controls select { width: auto; min-width: 68px; padding: 4px 5px; font-size: 10px; }
.image-layout-editor { background: #f8fbfc; }
.image-planner-item { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 8px; align-items: start; border: 1px solid #dde8ed; border-radius: 6px; padding: 7px; background: #fbfdfe; }
.image-planner-item > img { width: 62px; height: 55px; object-fit: contain; background: #edf4f6; }
.image-planner-details { min-width: 0; }
.image-planner-details > strong { display: block; overflow-wrap: anywhere; color: var(--navy); font-size: 11px; }
.image-size-control { margin-top: 6px; gap: 3px; font-size: 10px; }
.image-size-control input { padding: 0; }
.watermark-editor { background: #f8fbfc; }
.watermark-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 10px; }
.watermark-controls label { gap: 3px; font-size: 10px; }
.watermark-controls input { padding: 0; }
.watermark-upload-form { align-items: end; margin-top: 13px; padding-top: 12px; border-top: 1px solid #dbe5ea; }
.watermark-asset-grid { margin-top: 12px; }
.watermark-asset-card > div, .watermark-asset-card > form { margin: 8px 10px; }
.editor-utility { border-top: 1px solid var(--line); }
.editor-utility[open] summary { border-bottom: 1px solid var(--line); }
.editor-utility > p, .editor-utility > form, .editor-utility > .asset-grid { margin-right: 18px; margin-left: 18px; }
.editor-utility > p { margin-top: 0; }
.editor-utility .inline-form { padding: 14px 0 18px; }
.asset-upload-form { padding: 0 0 16px; }
.asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 9px; padding-bottom: 18px; }
.asset-card { min-width: 0; overflow: hidden; border: 1px solid #d2dfe5; border-radius: 7px; background: #fff; }
.asset-card img { display: block; width: 100%; height: 106px; object-fit: contain; background: #f2f6f8; }
.asset-card > div { display: grid; gap: 2px; padding: 7px; }
.asset-card strong { color: #315264; font-size: 10px; text-transform: capitalize; }
.asset-card span { overflow-wrap: anywhere; color: #657783; font-size: 10px; }
.asset-card form { padding: 0 7px 7px; }
.asset-edit-form { display: grid; gap: 6px; }
.asset-edit-form label { gap: 3px; font-size: 9px; }
.asset-edit-form input, .asset-edit-form select { padding: 5px 6px; font-size: 10px; }

.account-menu { display: flex; flex: 0 0 auto; align-items: center; gap: 9px; color: #dbeaf0; font-size: 11px; font-weight: 700; }
.account-menu form { margin: 0; }
.account-menu button { border: 1px solid rgb(255 255 255 / 30%); border-radius: 5px; padding: 5px 9px; color: #fff; background: transparent; font-size: 11px; font-weight: 750; white-space: nowrap; }
.account-link { display: inline-flex; align-items: center; gap: 8px; border-radius: 7px; padding: 3px 6px 3px 3px; }
.account-link.active { background: rgb(255 255 255 / 10%); }
.account-avatar { display: grid; flex: 0 0 auto; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; background: #2a5677; font-size: 12px; font-weight: 800; }
.account-text { display: grid; min-width: 0; max-width: 120px; line-height: 1.2; }
.account-name, .account-role { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-name { color: #fff; font-size: 12px; }
.account-role { color: #9fb9c8; font-size: 10px; font-weight: 600; }
.account-menu button:hover { background: rgb(255 255 255 / 12%); }
.auth-shell { display: grid; min-height: calc(100vh - 150px); place-items: center; }
.auth-card { width: min(100%, 510px); }
.user-list { display: grid; gap: 11px; }
.user-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.backup-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.backup-card > :last-child { margin-bottom: 0; }
.backup-readiness { display: grid; gap: 13px; margin-bottom: 18px; border-color: #b9d9e4; }
.backup-readiness-warning { border-color: #e7c5c9; background: #fffafb; }
.backup-readiness-status { margin: 0; border-radius: 7px; padding: 10px 11px; color: #7f2631; background: #fff0f1; font-size: 12px; font-weight: 750; }
.backup-readiness-status.is-ready { color: #155d45; background: #e5f5ed; }
.backup-diagnostics { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 9px; margin: 0; }
.backup-diagnostics div { display: grid; gap: 3px; min-width: 0; border: 1px solid #d9e5ea; border-radius: 7px; padding: 9px; background: #fff; }
.backup-diagnostics dt { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.backup-diagnostics dd { margin: 0; overflow-wrap: anywhere; color: var(--navy); font-size: 12px; font-weight: 750; }
.backup-diagnostics small { overflow-wrap: anywhere; color: var(--muted); font-size: 10px; }
.restore-card { border-color: #e7c5c9; }
.restore-warning { margin: 16px 0; border: 1px solid #efc8cc; border-radius: 7px; padding: 10px 11px; color: #7f2631; background: #fff2f3; font-size: 12px; font-weight: 700; line-height: 1.45; }
.user-card { padding: 18px; }
.user-card.is-inactive { opacity: .72; }
.user-card h3 { margin-bottom: 3px; }
.user-card .form-grid { margin: 14px 0 12px; }
.reset-password-form { align-items: end; border-top: 1px solid var(--line); padding-top: 12px; }
.release-filter-grid { position: sticky; top: calc(var(--site-header-height) + 12px); z-index: 8; display: grid; grid-template-columns: minmax(220px, 1.5fr) minmax(170px, .7fr) minmax(150px, .55fr) auto; gap: 11px; align-items: end; margin-bottom: 18px; padding: 15px; box-shadow: 0 8px 22px rgb(35 55 67 / 12%); }
.release-filter-count { align-self: center; margin: 0; color: var(--muted); font-size: 12px; font-weight: 700; white-space: nowrap; }
.release-filter-count strong { color: var(--navy); font-size: 17px; }
.release-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; }
.release-card { display: grid; align-content: start; gap: 14px; min-width: 0; scroll-margin-top: calc(var(--site-header-height) + 132px); }
.release-card h3 { margin: 8px 0 3px; color: var(--navy); }
.release-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.release-download-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: end; gap: 8px; }
.release-download-actions code { max-width: 330px; overflow-wrap: anywhere; color: #30566d; font-size: 11px; }
.release-revision-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; margin: 0; }
.release-revision-grid div { min-width: 0; display: grid; gap: 3px; border-radius: 7px; padding: 8px; background: #f4f8fa; }
.release-revision-grid dt { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.release-revision-grid dd { margin: 0; overflow-wrap: anywhere; color: var(--navy); font-size: 12px; font-weight: 750; }
.release-access-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.release-link { display: grid; gap: 4px; margin: 0; color: var(--muted); font-size: 11px; }
.release-link-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 7px; }
.release-link-controls input { min-width: 0; color: #315b70; font-size: 11px; }
.release-link code { overflow-wrap: anywhere; color: #315b70; }
.copy-feedback { min-height: 16px; color: #195e47; font-weight: 700; }
.release-filter-empty { margin: 12px 0 18px; padding: 20px 24px; }
.release-filter-empty h2 { margin-bottom: 0; }
.release-note { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.release-admin-editor { border-top: 1px solid var(--line); padding-top: 12px; }
.release-admin-editor summary { cursor: pointer; color: var(--navy); font-size: 12px; font-weight: 800; }
.release-admin-editor .form-grid, .release-admin-editor .inline-form { margin-top: 12px; }
.release-admin-actions { display: grid; gap: 12px; margin-top: 12px; }
.access-control { display: grid; gap: 10px; margin: 0; border: 1px solid #cbd9e0; border-radius: 8px; padding: 12px; }
.access-control legend { padding: 0 5px; color: var(--navy); font-size: 12px; font-weight: 800; }
.checkbox-line { display: flex; grid-template-columns: none; align-items: flex-start; gap: 8px; color: var(--ink); font-weight: 500; }
.checkbox-line input { width: auto; flex: 0 0 auto; margin: 3px 0 0; padding: 0; }
.checkbox-line span { display: grid; gap: 2px; }
.checkbox-line small, .access-user-picker > small { color: var(--muted); font-size: 11px; font-weight: 450; line-height: 1.35; }
.checkbox-line.compact { align-items: center; font-size: 12px; }
.checkbox-line.compact input { margin-top: 0; }
.access-user-picker { display: grid; gap: 5px; padding-top: 9px; border-top: 1px solid #dfe8ed; color: var(--navy); font-size: 12px; }
.access-user-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 6px; max-height: 180px; overflow: auto; padding: 6px; border: 1px solid #e0e8ec; border-radius: 6px; background: #fbfdfe; }
.api-token-once { display: grid; gap: 12px; margin-bottom: 18px; border-color: #c6ddec; background: #f6fbfe; }
.api-token-once h2 { margin-bottom: 3px; }
.api-token-once p { margin-bottom: 0; }

/* ---------- Released library: company snapshot ---------- */
.release-company { margin: 0; color: #385768; font-size: 12px; font-weight: 700; overflow-wrap: anywhere; }

/* ---------- Shared GHS editor (SDS Section 2 and GHS label) ---------- */
.ghs-editor { display: grid; gap: 12px; }
.ghs-editor .section-label { margin: 0; }
.ghs-fieldset { display: grid; gap: 8px; min-width: 0; margin: 0; border: 1px solid #dbe5ea; border-radius: 7px; padding: 10px; }
.ghs-fieldset legend { padding: 0 4px; color: #5b7280; font-size: 10px; font-weight: 800; }
.ghs-pictogram-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.ghs-pictogram-option { display: flex; align-items: center; gap: 6px; border: 1px solid #d3dee5; border-radius: 6px; padding: 5px; color: #385768; background: #fff; cursor: pointer; font-size: 11px; font-weight: 600; }
.ghs-pictogram-option.selected { border-color: #23819a; background: #e8f6f9; }
.ghs-pictogram-option input { width: auto; flex: 0 0 auto; margin: 0; }
.ghs-pictogram-option img { width: 34px; height: 34px; flex: 0 0 auto; }
.ghs-pictogram-option span { display: grid; gap: 1px; min-width: 0; line-height: 1.2; }
.ghs-pictogram-option strong { color: var(--navy); font-size: 10px; }
.ghs-signal { max-width: 260px; }
.ghs-statement-row { display: grid; gap: 5px; border: 1px solid #e0e8ec; border-radius: 6px; padding: 7px; background: #fff; }
.ghs-statement-row + .ghs-statement-row { margin-top: 6px; }
.ghs-statement-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--navy); font-size: 12px; }
.ghs-statement-meta select { width: auto; padding: 3px 6px; font-size: 11px; }
.ghs-row-actions { display: inline-flex; gap: 4px; margin-left: auto; }
.editor-section .ghs-statement-row textarea { min-height: 46px; }
.ghs-review-flag { border-radius: 999px; padding: 2px 7px; color: #84590e; background: #fff1d2; font-size: 10px; font-weight: 750; }
.ghs-library-picker { display: grid; gap: 6px; border-top: 1px dashed #d3dee5; padding-top: 8px; }
.ghs-library-picker select[size] { min-height: 124px; padding: 4px; font-size: 11px; }
.ghs-library-picker .table-action { margin-top: 0; }
.ghs-disclaimer { margin: 0; }
.ghs-warnings { border: 1px solid #f0d49b; border-radius: 8px; padding: 9px 11px; color: #6b4a0f; background: #fff8e8; font-size: 11px; line-height: 1.4; }
.ghs-warnings ul { margin: 5px 0 0 16px; padding: 0; }
.ghs-warnings li { margin: 2px 0; }
.label-option-group { display: grid; gap: 8px; margin: 0 0 12px; }
.label-warnings { margin-bottom: 12px; }
.label-warnings:empty { display: none; }
.label-supplier-summary { margin: 8px 0 0; overflow-wrap: anywhere; }
.sds-ghs-editor { display: grid; gap: 8px; margin-bottom: 12px; border-bottom: 1px dashed #d3dee5; padding-bottom: 12px; }
.sds-ghs-editor > p { margin: 0; }

/* SDS Section 2 preview block (the PDF prints the same elements). */
.sds-ghs-block { margin-bottom: 6px; color: var(--document-text, #192b38); font-size: 9.4px; line-height: 1.42; }
.document-section .sds-ghs-block p { margin: 3px 0 2px; white-space: normal; font-size: 9.4px; }
.sds-ghs-block ul { margin: 1px 0 3px 14px; padding: 0; }
.sds-ghs-block li { margin: 1px 0; }
.sds-ghs-pictograms { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.sds-ghs-pictograms img { width: 15mm; height: 15mm; object-fit: contain; }

/* ---------- GHS label preview: one 148.5 × 105 mm label ---------- */
.label-sheet { position: relative; width: min(148.5mm, 100%); aspect-ratio: 148.5 / 105; margin: 0 auto; overflow: hidden; background: #fff; box-shadow: 0 2px 12px rgb(24 43 56 / 24%); color: #111; font-family: Arial, "Tahoma", sans-serif; container-type: inline-size; zoom: var(--preview-zoom, 1); }
.preview-panel.is-expanded .label-sheet { margin-bottom: 24px; }
.ghs-label { --mm: calc(100cqw / 148.5); --pt: calc(var(--mm) * .35278); position: absolute; inset: 0; }
.ghs-label p { margin: 0; white-space: normal; overflow-wrap: anywhere; }
.ghs-label-border { position: absolute; inset: calc(4.5 * var(--mm)); border: calc(.7 * var(--pt)) solid #222; pointer-events: none; }
.ghs-label-body { --fit: 1; position: absolute; inset: calc(7 * var(--mm)); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.lbl-row { display: grid; column-gap: calc(2 * var(--mm)); align-items: start; padding: calc(1.1 * var(--mm)) 0; }
.lbl-row:first-child { padding-top: 0; }
.ghs-label.row-lines .lbl-row:not(:last-child) { border-bottom: calc(.35 * var(--pt)) solid #555; }
.lbl-cell { display: flex; flex-direction: column; min-width: 0; }
.lbl-block { --size: 1; --base: 6.5; }
.lbl-block p, .lbl-block .lbl-caption { font-size: calc(var(--base) * var(--pt) * var(--fit) * var(--size)); line-height: 1.2; }
.lbl-block p { margin-bottom: calc(var(--base) * .15 * var(--pt) * var(--fit) * var(--size)); }
.lbl-block.align-center { text-align: center; }
.lbl-block.align-right { text-align: right; }
.lbl-product_name { --base: 11.5; font-weight: 700; }
.lbl-common_name, .lbl-description { --base: 7; }
.lbl-contents { --base: 11.5; }
.lbl-contents p { font-weight: 700; }
.lbl-contents .lbl-caption { --base: 6; display: block; font-size: calc(6 * var(--pt) * var(--fit)); }
.lbl-signal_word { --base: 12; font-weight: 700; }
.lbl-hazard_statements { --base: 7.4; }
.lbl-precautionary_statements { --base: 6.5; }
.lbl-hazardous_components { --base: 6.8; }
.lbl-supplier, .lbl-emergency_phone, .lbl-un_info { --base: 6.2; }
.lbl-additional_info, .lbl-lot_dates { --base: 6.4; }
.lbl-print_id { --base: 6; }
.lbl-placeholder { color: #8a99a6; font-style: italic; }
.lbl-pictograms { display: flex; flex-wrap: wrap; gap: calc(1.2 * var(--mm)); margin-bottom: calc(1.2 * var(--mm)); }
.lbl-block.align-center .lbl-pictograms { justify-content: center; }
.lbl-block.align-right .lbl-pictograms { justify-content: flex-end; }
.lbl-pictograms img { display: block; width: min(calc(18 * var(--mm) * var(--picto, 1) * min(var(--fit), 1.4)), calc((100% - (var(--per-row) - 1) * 1.2 * var(--mm)) / var(--per-row) - .6 * var(--mm))); height: auto; aspect-ratio: 1; object-fit: contain; }
.lbl-empty { font-size: calc(7 * var(--pt)); }

/* Label layout planner (left panel) */
.label-planner { display: grid; gap: 10px; margin: 12px 0; }
.lp-row { border: 1px solid #d7e0e6; border-radius: 8px; padding: 8px; background: #fbfdfe; }
.lp-row-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 6px; color: var(--navy); font-size: 12px; }
.lp-cells { display: grid; gap: 6px; }
.lp-cell { display: grid; gap: 5px; border: 1px dashed #c9d6de; border-radius: 6px; padding: 6px; }
.lp-width { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 10px; }
.lp-width input { width: 70px; padding: 3px 6px; font-size: 11px; }
.lp-block { display: grid; gap: 4px; border-radius: 6px; padding: 5px 6px; background: #fff; box-shadow: 0 1px 2px rgb(24 43 56 / 8%); }
.lp-block.mandatory { border-left: 3px solid #1d788f; }
.lp-block-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 11px; color: var(--navy); }
.lp-required { border-radius: 999px; padding: 0 6px; color: #1d788f; background: #e3f4fb; font-size: 9px; font-weight: 800; }
.lp-block-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.lp-block-controls select { width: auto; max-width: 100%; padding: 2px 4px; font-size: 10px; }
.lp-hidden { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 11px; }
.lp-fit { display: grid; gap: 4px; width: 100%; font-size: 11px; }

/* SDS Sections 1-2 boxes */
.sds-grid-row { display: grid; gap: 10px; align-items: start; margin-bottom: 4px; }
.sds-grid-cell { min-width: 0; }
.sds-grid-cell.align-center { text-align: center; }
.sds-grid-cell.align-right { text-align: right; }
.sds-grid-cell.align-center .sds-ghs-pictograms { justify-content: center; }
.sds-grid-cell.align-right .sds-ghs-pictograms { justify-content: flex-end; }
.sds-ghs-heading { margin: 0 0 3px; font-size: 9.4px; }
.section-grid-editor { display: grid; gap: 8px; margin: 0 0 12px; border: 1px solid #dbe5ea; border-radius: 7px; padding: 8px 10px; }
.section-grid-editor summary { color: var(--navy); font-size: 12px; font-weight: 800; cursor: pointer; }
.grid-rows { display: grid; gap: 6px; }
.grid-row-editor { display: grid; gap: 4px; }
.grid-row-label { color: #5b7280; font-size: 10px; font-weight: 800; }
.grid-row-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; }
.grid-block-card { display: grid; gap: 4px; border: 1px solid #d3dee5; border-radius: 6px; padding: 6px; background: #fff; font-size: 11px; }
.grid-block-controls { display: flex; flex-wrap: wrap; gap: 4px; align-items: end; }
.grid-block-controls label { gap: 2px; font-size: 9px; }
.grid-block-controls input, .grid-block-controls select { width: auto; max-width: 92px; padding: 2px 4px; font-size: 10px; }
.grid-block-buttons { display: inline-flex; flex-wrap: wrap; gap: 3px; }
.grid-text-editor { display: grid; gap: 4px; border-top: 1px dashed #d3dee5; padding-top: 6px; }

/* ---------- Admin: GHS statement library ---------- */
.ghs-library-toolbar { position: sticky; top: calc(var(--site-header-height) + 12px); z-index: 8; display: grid; grid-template-columns: minmax(220px, 1.5fr) minmax(140px, .5fr) minmax(160px, .6fr) auto; gap: 11px; align-items: end; margin-bottom: 18px; padding: 15px; box-shadow: 0 8px 22px rgb(35 55 67 / 12%); }
.ghs-library-toolbar .release-filter-count { white-space: normal; }
.ghs-library-list { display: grid; gap: 10px; }
.ghs-library-item { display: grid; gap: 6px; padding: 14px 16px; scroll-margin-top: calc(var(--site-header-height) + 110px); }
.ghs-library-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ghs-code { color: var(--navy); font-size: 15px; }
.ghs-english { margin: 0; font-size: 13px; }
.ghs-library-item > p { margin: 0; }
.ghs-library-form { display: grid; grid-template-columns: minmax(0, 1fr) 170px auto; gap: 10px; align-items: end; }
.ghs-library-form textarea { min-height: 52px; }

/* ---------- Bilingual (EN + TH) editing ---------- */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bi-field { display: grid; gap: 4px; min-width: 0; }
.bi-label { color: #435865; font-size: 12px; font-weight: 700; }
.bi-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.bi-pair-rich { grid-template-columns: 1fr; }
.bi-control { display: grid; gap: 3px; min-width: 0; align-content: start; }
.bi-lang { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: #5b7280; font-size: 10px; font-weight: 800; letter-spacing: .06em; }
.bi-badge { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 1px 7px; font-size: 10px; font-weight: 750; letter-spacing: 0; }
.bi-badge:empty { display: none; }
.bi-missing { color: #7a5b00; background: #fff4d9; }
.bi-stale { color: #992d39; background: #ffe3e6; }
.bi-auto { color: #1f5d7d; background: #e3f4fb; }
.bi-accept { border: 0; padding: 0 2px; color: inherit; background: transparent; font-size: 10px; font-weight: 800; text-decoration: underline; cursor: pointer; }
.bi-reference { color: #627383; font-size: 11px; font-style: italic; overflow-wrap: anywhere; }
.bi-reference-rich { font-size: 11px; }
.bi-reference-rich summary { color: #627383; cursor: pointer; }
.bi-reference-rich .rich-document-content { margin: 4px 0; border-left: 2px solid #d7e0e7; padding-left: 8px; font-size: 11px; }
.cell-lang { display: flex; align-items: center; gap: 4px; min-width: 0; }
.cell-lang + .cell-lang { margin-top: 3px; }
.cell-lang input { min-width: 0; }
.cell-lang-tag { flex: 0 0 auto; color: var(--muted); font-size: 9px; font-weight: 800; }
.cell-lang .bi-badge { flex: 0 0 auto; }
.comparison-header-editor input + input { margin-top: 3px; }
[data-export-language-tag] { margin-left: 4px; }
.editor-language-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); padding: 8px 18px; background: #f8fbfc; }
.edit-language-controls, .preview-language-controls { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.edit-language-controls .mini-button.active, .preview-language-controls .mini-button.active { border-color: #1d788f; color: #fff; background: #1d788f; }
.thai-review-badge { border-radius: 999px; padding: 3px 9px; color: #7a5b00; background: #fff4d9; font-size: 11px; font-weight: 750; }
.thai-review-badge.ok { color: #176249; background: #ddf3e8; }
.language-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.product-name-th, .company-name-th { margin: -4px 0 6px; color: #385768; font-weight: 700; }
.product-merge { font-size: 12px; }
.product-merge summary { color: var(--navy); font-weight: 700; cursor: pointer; }
.product-merge form { display: grid; gap: 8px; margin-top: 8px; }

/* Navigation: admin pages grouped in one menu */
.nav-menu { position: relative; }
.nav-menu summary { padding: 8px 8px; border-radius: 6px; color: #e8f2f7; font-size: 13.5px; list-style: none; cursor: pointer; }
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu summary::after { content: " ▾"; font-size: 11px; }
.nav-menu[open] summary, .nav-menu summary:hover { background: rgb(255 255 255 / 12%); }
.nav-menu-items { position: absolute; z-index: 70; top: calc(100% + 4px); right: 0; display: grid; min-width: 210px; border-radius: 8px; padding: 6px; background: var(--navy-dark); box-shadow: 0 10px 24px rgb(0 0 0 / 28%); }
.site-header .nav-menu-items a { white-space: nowrap; }

/* Translation page */
.translation-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; margin-bottom: 18px; }
.translation-grid .panel { display: grid; gap: 10px; }
.translation-grid h2 { font-size: 17px; margin: 0; }
.translation-product-list { display: grid; gap: 6px; max-height: 300px; overflow: auto; margin: 0; border: 1px solid #dbe5ea; border-radius: 7px; padding: 8px; }
.translation-product-list legend { padding: 0 4px; color: #5b7280; font-size: 10px; font-weight: 800; }
.translation-steps { margin: 0; padding-left: 20px; font-size: 13px; line-height: 1.5; }
.translation-api-status { margin: 0; border-radius: 7px; padding: 8px 10px; color: #435865; background: #f4f7f9; font-size: 12px; }
.translation-api-status.ok { color: #176249; background: #ddf3e8; }
.glossary-panel { display: grid; gap: 12px; }
.glossary-form { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(150px, 1fr) auto minmax(120px, 1fr) auto auto; gap: 8px; align-items: end; }
.glossary-list { display: grid; gap: 6px; }
.glossary-row { border-top: 1px solid #edf2f5; padding-top: 6px; }

@media (max-width: 1450px) {
  .document-workspace { grid-template-columns: minmax(390px, 1.05fr) minmax(360px, .95fr); }
  .layout-panel { position: static; grid-column: 1 / -1; }
  .layout-content { max-height: none; }
  .layout-list { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}
@media (max-width: 1050px) {
  .document-workspace, .company-dashboard-grid { grid-template-columns: 1fr; }
  .layout-panel, .preview-panel { position: static; }
  .preview-panel.is-expanded { position: fixed; }
  .layout-list { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .preview-canvas { max-height: none; }
}
@media (max-width: 760px) {
  .site-header, .site-main { padding-right: 16px; padding-left: 16px; }
  html:not(.js) .site-header { min-height: auto; flex-direction: column; align-items: flex-start; gap: 8px; padding-top: 13px; padding-bottom: 13px; }
  html:not(.js) .site-nav-panel { flex-direction: column; align-items: flex-start; }
  html.js { --site-header-height: 56px; }
  .js .site-header { min-height: var(--site-header-height); }
  .create-product-panel, .form-grid { grid-template-columns: 1fr; }
  .inline-form, .workspace-header, .layout-toolbar, .preview-toolbar, .editor-toolbar { align-items: stretch; flex-direction: column; }
  .preview-toolbar-actions { justify-content: start; }
  .workspace-header { align-items: flex-start; }
  .document-tabs { width: 100%; }
  .tab { flex: 1; text-align: center; }
  .source-record summary { grid-template-columns: 1fr; gap: 5px; }
  .layout-list { grid-template-columns: 1fr; }
  .layout-content { padding: 12px; }
  .tds-layout-slots { grid-template-columns: 1fr !important; }
  .tds-layout-card { min-height: auto; }
  .tds-row-resizer { display: none; }
  .tds-layout-row-heading { flex-direction: column; }
  .tds-row-actions { justify-content: start; }
  .page-sheet { width: 100%; min-width: 0; min-height: 0; font-size: 9px; }
  .preview-canvas { padding: 10px; }
  .preview-panel.is-expanded { inset: 7px; }
  .preview-panel.is-expanded .preview-canvas { padding: 10px; }
  .document-page-header { min-height: 58px; padding: 13px 14px 10px; }
  .header-field-product_name strong { font-size: 15px; }
  .document-body { padding: 13px 14px 20px; }
  .tds-preview-row { grid-template-columns: 1fr !important; gap: 0; }
  .tds-preview-row > .document-layout-block + .document-layout-block { margin-top: 12px; }
  .document-page-footer { position: static; margin: 16px 14px 12px; }
  .document-footer-row { grid-template-columns: 1fr; gap: 2px; }
  .footer-cell-center, .footer-cell-right { text-align: left; }
  .footer-planner-item { grid-template-columns: 1fr; }
  .footer-item-controls { justify-content: start; }
  .compact-planner-item, .company-card { align-items: stretch; flex-direction: column; }
  .compact-planner-controls, .company-card .card-actions { justify-content: start; align-items: flex-start; }
  .preview-image-row-2, .preview-image-row-3, .watermark-controls { grid-template-columns: 1fr; }
  .rich-tool-divider { display: none; }
  .rich-block-select { min-width: 96px; }
  .export-actions { justify-content: start; }
  .release-card-heading { align-items: stretch; flex-direction: column; }
  .admin-grid, .backup-grid, .release-filter-grid, .release-link-controls, .ghs-library-toolbar, .ghs-library-form, .translation-grid, .glossary-form { grid-template-columns: 1fr; }
  .ghs-library-toolbar { position: static; }
  .release-filter-grid { position: static; }
  .release-card { scroll-margin-top: 16px; }
  .release-filter-grid .filter-search { grid-column: auto; }
  .release-download-actions { justify-content: start; }
  .release-grid, .release-revision-grid { grid-template-columns: 1fr; }
}

/* Released library: one card per product (TDS / SDS / label × EN / TH) */
.flash-warning { color: #6b4a0c; background: #fff7e0; border: 1px solid #f0d58c; }
.error-list { margin: 6px 0 0; padding-left: 20px; }
.choice-row { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
.choice-row legend { width: 100%; }
.release-advanced summary { cursor: pointer; color: var(--navy); font-size: 12px; font-weight: 800; }
.release-advanced .form-grid { margin-top: 10px; }
.api-token-entry { display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.product-release-list { display: grid; gap: 16px; }
.product-release-card { display: grid; gap: 12px; padding: 18px; min-width: 0; scroll-margin-top: calc(var(--site-header-height) + 132px); }
.product-release-heading { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; }
.product-release-heading h3 { margin: 0 0 2px; color: var(--navy); }
.release-matrix-wrap { overflow-x: auto; }
.release-matrix { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 12px; }
.release-matrix th, .release-matrix td { border: 1px solid var(--line); padding: 8px; text-align: left; vertical-align: top; }
.release-matrix thead th { color: var(--muted); background: #f4f8fa; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.release-matrix tbody th { width: 110px; color: var(--navy); background: #fbfdfe; }
.matrix-cell { display: grid; gap: 4px; justify-items: start; }
.matrix-revision { color: var(--navy); overflow-wrap: anywhere; }
.matrix-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.release-history summary { cursor: pointer; color: var(--navy); font-size: 12px; font-weight: 800; }
.release-history-list { display: grid; gap: 8px; margin-top: 10px; }
.release-history-item { border: 1px solid #e3eaef; border-radius: 8px; padding: 9px 10px; background: #fbfdfe; }
.release-history-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 12px; }
.release-history-row .button { margin-left: auto; }
/* Custom label printing and print log */
.print-form { display: grid; gap: 14px; padding: 18px; }
.print-group { margin: 0; border: 1px solid #cbd9e0; border-radius: 8px; padding: 12px; }
.print-group legend { padding: 0 5px; color: var(--navy); font-size: 12px; font-weight: 800; }
.print-shelf-life { margin: 0; color: var(--navy); }
.print-confirm { padding: 10px; border-radius: 8px; background: #f4f8fa; }
.print-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .02em; }
.print-record { display: grid; gap: 12px; padding: 18px; }
.print-record-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.print-record-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin: 0; }
.print-record-grid div { display: grid; gap: 3px; border-radius: 7px; padding: 8px 10px; background: #f4f8fa; }
.print-record-grid .full-width { grid-column: 1 / -1; }
.print-record-grid dt { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.print-record-grid dd { margin: 0; color: var(--navy); font-weight: 700; overflow-wrap: anywhere; }
.pre-wrap { white-space: pre-wrap; }
.print-related-list { margin: 0; padding-left: 18px; display: grid; gap: 5px; }
.stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat-tile { display: grid; gap: 4px; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; color: inherit; background: #fff; text-decoration: none; }
.stat-tile span { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.stat-tile strong { color: var(--navy); font-size: 22px; }
.stat-tile.stat-warning { border-color: #f0d58c; background: #fff7e0; }
.print-filter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; align-items: end; margin-bottom: 16px; padding: 14px; }
.print-filter-grid .filter-search { grid-column: span 2; }
.print-filter-grid .form-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.table-scroll { overflow-x: auto; padding: 0; }
.data-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.data-table th, .data-table td { border-bottom: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.data-table thead th { color: var(--muted); background: #f4f8fa; font-size: 11px; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.print-table td { white-space: nowrap; }
.print-table td:nth-child(3), .print-table td:nth-child(10) { white-space: normal; min-width: 160px; }
.row-flagged { background: #fffaf0; }
.badge-warning { color: #6b4a0c; background: #ffe9b0; }
.badge-info { color: #1f5d7d; background: #e3f4fb; }
.table-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.my-documents-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.my-document-card { padding: 16px; }
.my-document-card h3 { margin: 0 0 2px; color: var(--navy); }
.my-document-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.my-document-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; font-size: 12px; border-top: 1px solid #e8eef2; padding-top: 8px; }
.my-month-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.my-month-grid .panel { padding: 14px; }
.my-flagged { padding: 14px 16px; border-color: #f0d58c; background: #fffaf0; }
@media (max-width: 760px) {
  .stat-row, .my-month-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .print-filter-grid .filter-search { grid-column: 1 / -1; }
  .release-matrix tbody th { width: 70px; }
  .release-history-row .button { margin-left: 0; }
}

/* Document versions (REV-MM-NNN) */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.badge-ok { color: #195e47; background: #e4f5ed; }
.revision-panel { display: grid; gap: 8px; margin-bottom: 16px; padding: 14px 18px; }
.revision-summary { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.revision-current { display: grid; gap: 4px; justify-items: start; }
.revision-current .eyebrow { margin: 0; }
.revision-code { color: var(--navy); font-size: 22px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .02em; }
.revision-form { flex: 1 1 420px; max-width: 720px; margin: 0; }
.revision-panel > .muted.small { margin: 0; }
.revision-major summary, .revision-history summary { cursor: pointer; color: var(--navy); font-size: 12px; font-weight: 800; }
.revision-major .form-grid { margin-top: 10px; }
.release-major-heading { margin: 10px 0 4px; color: var(--navy); font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.version-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.version-list li { border: 1px solid #e3eaef; border-radius: 8px; padding: 8px 10px; background: #fbfdfe; }
.version-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12px; }
.version-row strong { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--navy); }
.version-row .table-actions { margin-left: auto; align-items: center; }
.version-row form { margin: 0; }
.version-note { margin: 4px 0 0; font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.release-version-picker { display: grid; gap: 8px; }
.release-version-row { display: grid; grid-template-columns: 130px minmax(0, 1fr); align-items: center; gap: 10px; }
.release-version-row select { width: 100%; }
.doc-revision-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 3px; font-size: 12px; }
.doc-revision-list li { display: flex; align-items: center; gap: 8px; }
.doc-revision-list li span:first-child { width: 72px; color: var(--muted); font-weight: 700; }
.doc-revision-list strong { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--navy); }
@media (max-width: 760px) {
  .release-version-row { grid-template-columns: 1fr; }
  .version-row .table-actions { margin-left: 0; }
}

/* Page themes: workspace preview */
.page-sheet.themed-page { width: 210mm; max-width: none; background: var(--document-page, #fff); }
.theme-background { position: absolute; z-index: 0; left: 0; top: 0; width: 210mm; height: 297mm; pointer-events: none; user-select: none; }
.theme-box { position: absolute; z-index: 2; overflow: hidden; line-height: 1.25; white-space: pre-wrap; overflow-wrap: anywhere; pointer-events: none; }
.theme-logo { display: flex; align-items: center; }
.theme-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.document-body.themed-body { padding-left: 0; padding-right: 0; padding-bottom: 20mm; }
.theme-page-end { position: absolute; z-index: 3; left: 0; right: 0; border-top: 1px dashed #c2410c; pointer-events: none; }
.theme-pin { outline: 1px dashed #7c3aed; background: rgb(255 255 255 / 70%); font-size: 8px; }
.theme-pin-note { margin: 4px 0; color: #6d28d9; font-size: 9px; }
.ghs-label.themed-label .theme-background { width: 100%; height: 100%; }
.ghs-label.themed-label .theme-box { position: absolute; }
.theme-choice-form { flex-wrap: wrap; align-items: end; gap: 8px 12px; margin: 0; }
.theme-choice-form label { min-width: 220px; }
/* Themes pages */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
.theme-card { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 14px; }
.theme-card h3 { margin: 0 0 4px; color: var(--navy); }
.theme-thumb { display: grid; place-items: center; min-height: 120px; border: 1px solid var(--line); border-radius: 6px; background: #f4f8fa; overflow: hidden; }
.theme-thumb img { width: 100%; height: auto; display: block; }
.theme-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 14px; margin-bottom: 14px; }
.theme-image-field { display: grid; gap: 6px; align-content: start; border: 1px solid var(--line); border-radius: 8px; padding: 10px; }
.theme-image-field img { max-width: 100%; max-height: 180px; object-fit: contain; border: 1px solid #e3eaef; background: repeating-conic-gradient(#f1f5f9 0% 25%, #fff 0% 50%) 50% / 12px 12px; }
.theme-image-label { color: var(--navy); font-size: 12px; font-weight: 800; }
/* Page designer */
.designer-toolbar { position: sticky; top: calc(var(--site-header-height) + 8px); z-index: 8; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 14px; margin-bottom: 12px; }
.designer-tool-group { display: inline-flex; gap: 4px; }
.designer-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.designer-inline input[type="range"] { width: 110px; }
.designer-spacer { flex: 1 1 auto; }
.designer-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 14px; align-items: start; }
.designer-canvas-wrap { overflow: auto; max-height: calc(100vh - 180px); padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #dfe7ec; }
.designer-page { position: relative; margin: 0 auto; background: #fff; box-shadow: 0 2px 12px rgb(24 43 56 / 24%); overflow: hidden; touch-action: none; }
.designer-page.show-grid::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: linear-gradient(to right, rgb(31 111 178 / 10%) 1px, transparent 1px), linear-gradient(to bottom, rgb(31 111 178 / 10%) 1px, transparent 1px),
    linear-gradient(to right, rgb(31 111 178 / 22%) 1px, transparent 1px), linear-gradient(to bottom, rgb(31 111 178 / 22%) 1px, transparent 1px);
  background-size: 5mm 5mm, 5mm 5mm, 10mm 10mm, 10mm 10mm; }
.pd-background { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; user-select: none; }
.pd-no-background { position: absolute; inset: 0; display: grid; place-items: center; color: #94a3b8; font-size: 14px; }
.pd-item { position: absolute; z-index: 2; box-sizing: border-box; border: 1px solid #c2410c; background: rgb(255 247 237 / 55%); cursor: move; overflow: hidden; outline: none; }
.pd-item.pd-body { z-index: 1; border: 1.5px dashed #1f6fb2; background: rgb(219 234 254 / 30%); }
.pd-item.pd-pin { z-index: 3; border: 1.5px solid #7c3aed; background: rgb(237 233 254 / 60%); }
.pd-item.is-hidden { opacity: .35; border-style: dotted; }
.pd-item.is-locked { cursor: default; }
.pd-item.is-selected { box-shadow: 0 0 0 2px #0ea5e9; z-index: 4; }
.pd-label { position: absolute; left: 2px; top: 1px; color: #7c2d12; font-size: 7px; font-weight: 700; line-height: 1.1; pointer-events: none; }
.pd-body .pd-label { color: #1e3a8a; font-size: 9px; }
.pd-pin .pd-label { color: #4c1d95; }
.pd-sample { display: block; width: 100%; height: 100%; box-sizing: border-box; padding: 1px 2px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.pd-item img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.pd-handle { position: absolute; right: 0; bottom: 0; width: 9px; height: 9px; background: #0ea5e9; cursor: nwse-resize; }
.pd-lock { position: absolute; right: 2px; top: 1px; font-size: 8px; }
.designer-inspector { position: sticky; top: calc(var(--site-header-height) + 72px); display: grid; gap: 10px; padding: 14px; max-height: calc(100vh - 180px); overflow: auto; }
.designer-inspector h2 { margin: 0; font-size: 15px; color: var(--navy); }
.designer-inspector h3 { margin: 6px 0 0; font-size: 12px; color: var(--navy); }
.pd-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pd-fields label { display: grid; gap: 3px; font-size: 11px; }
.pd-fields label.checkbox-line { display: flex; align-items: center; gap: 6px; align-self: end; }
.pd-fields input[type="color"] { height: 32px; padding: 2px; }
.pd-element-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pd-element-list li { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.pd-select { flex: 1 1 auto; border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; background: #fff; color: var(--navy); font-size: 12px; text-align: left; cursor: pointer; }
.pd-select.active { border-color: #0ea5e9; background: #e0f2fe; }
.designer-footer-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 14px; margin-top: 14px; }
@media (max-width: 1050px) {
  .designer-layout { grid-template-columns: 1fr; }
  .designer-inspector { position: static; max-height: none; }
}

/* Round 4C: exact classic header preview (same sizes and rows as the PDF) */
.document-page-header.exact { display: block; position: relative; min-height: 0; padding: 0; }
.document-header-row.exact { position: absolute; left: 16mm; right: 16mm; display: grid; align-items: baseline; gap: 0; }
.document-page-header.exact .header-field { line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 1.5mm; }
.document-page-header.exact .header-field[style*="text-align:right"] { padding-right: 0; padding-left: 1.5mm; }

/* Round 4C: page theme preview additions */
.theme-body-panel { position: absolute; z-index: 0; pointer-events: none; }
.mm-probe { position: absolute; left: 0; top: 0; width: 100mm; height: 0; visibility: hidden; pointer-events: none; }
.theme-page-label { position: absolute; z-index: 4; top: 2mm; right: 2mm; padding: 2px 6px; border-radius: 3px; color: #fff; background: #1d788f; font-size: 9px; font-weight: 700; }
.theme-box.is-arrangeable { z-index: 5; pointer-events: auto; cursor: move; outline: 1px dashed rgb(29 120 143 / 85%); touch-action: none; overflow: visible; }
.theme-box.is-arrangeable:hover { outline-style: solid; }
.theme-box.is-arrangeable.is-selected { outline: 2px solid #1d788f; box-shadow: 0 0 0 3px rgb(29 120 143 / 18%); }
.theme-box.is-arrangeable.is-locked { cursor: not-allowed; outline-color: #94a3b8; }
.theme-box.is-arrangeable:focus-visible { outline: 2px solid #c2410c; }
.arrange-handle { position: absolute; right: -5px; bottom: -5px; width: 10px; height: 10px; border: 2px solid #fff; border-radius: 2px; background: #1d788f; cursor: nwse-resize; }
.arrange-label { color: #1d788f; font-size: 7pt; font-style: italic; text-shadow: none; }

/* Round 4C: header editor in the workspace */
.header-box-editor { display: grid; gap: 8px; margin-top: 10px; }
.hbe-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; }
.hbe-heading h4 { margin: 0; color: var(--navy); }
.hbe-heading .status-pill { color: #1d5f73; background: #e3f1f5; text-transform: none; letter-spacing: 0; }
.hbe-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.segmented { display: inline-flex; gap: 4px; }
.segmented .mini-button.active { border-color: #1d788f; color: #fff; background: #1d788f; }
.hbe-list { display: grid; gap: 6px; }
.hbe-item { border: 1px solid #dde8ed; border-radius: 6px; background: #fff; }
.hbe-item.is-selected { border-color: #1d788f; box-shadow: 0 0 0 2px rgb(29 120 143 / 14%); }
.hbe-item > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 7px 9px; cursor: pointer; color: var(--navy); font-size: 12px; }
.hbe-name { font-weight: 700; }
.hbe-pos { margin-left: auto; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.hbe-tag { padding: 1px 6px; border-radius: 999px; color: #7c5e10; background: #fdf3d7; font-size: 10px; }
.hbe-body { display: grid; gap: 8px; padding: 4px 9px 10px; border-top: 1px solid #eef3f6; }
.hbe-row { display: flex; flex-wrap: wrap; align-items: end; gap: 8px 10px; }
.hbe-row label:not(.checkbox-line) { display: grid; gap: 2px; min-width: 0; font-size: 11px; color: var(--muted); }
.hbe-row input[type="number"] { width: 86px; }
.hbe-row input[type="color"] { width: 48px; height: 30px; padding: 2px; }
.hbe-range input[type="range"] { width: 140px; }
.hbe-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); }
.hbe-body-panel { margin: 0; border: 1px solid #dde8ed; border-radius: 6px; padding: 6px 9px 8px; }
.hbe-body-panel legend { padding: 0 4px; color: var(--navy); font-size: 12px; font-weight: 700; }
.hbe-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.readability-badge { padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.readability-badge:empty { display: none; }
.readability-badge.is-ok { color: #166534; background: #dcfce7; }
.readability-badge.is-low { color: #9a3412; background: #ffedd5; }
.hfs-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 6px 10px; flex-basis: 100%; padding-top: 4px; border-top: 1px dashed #e3ecf0; }
.hfs-controls label:not(.checkbox-line) { display: grid; gap: 2px; font-size: 10.5px; color: var(--muted); }
.hfs-controls input[type="number"] { width: 70px; }
.hfs-controls input[type="color"] { width: 42px; height: 28px; padding: 2px; }
.compact-planner-item.has-style { flex-wrap: wrap; }
.document-theme-controls .mini-button { align-self: end; }
.contrast-warning { margin: 8px 0 0; padding: 6px 9px; border-radius: 6px; color: #9a3412; background: #fff7ed; font-size: 11.5px; }
@media (max-width: 760px) {
  .hbe-pos { margin-left: 0; flex-basis: 100%; }
  .hbe-row input[type="number"] { width: 72px; }
}
.pd-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0; color: var(--muted); font-size: 11px; }
.pd-readability { margin: 4px 0 8px; font-size: 12px; }
.pd-body-panel { position: absolute; inset: 0; pointer-events: none; }
.pd-fields button[disabled] { opacity: .45; cursor: default; }

/* Round 4D: working sign (busy.js) */
.busy-bar { position: fixed; z-index: 1000; top: 0; left: 0; right: 0; height: 3px; overflow: hidden; background: rgb(29 120 143 / 20%); }
.busy-bar::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; background: #1d788f; animation: busy-slide 1.1s ease-in-out infinite; }
@keyframes busy-slide { from { left: -40%; } to { left: 100%; } }
.busy-box { position: fixed; z-index: 1001; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px); padding: 11px 16px; border-radius: 10px; color: #fff; background: #17324d; box-shadow: 0 8px 28px rgb(15 23 42 / 35%); font-size: 14px; font-weight: 600; }
.busy-box.is-slow { background: #7c2d12; }
.busy-time { min-width: 34px; color: #c9dfe8; font-variant-numeric: tabular-nums; font-weight: 400; }
.busy-spinner { flex: 0 0 auto; width: 18px; height: 18px; border: 3px solid rgb(255 255 255 / 30%); border-top-color: #fff; border-radius: 50%; animation: busy-spin .8s linear infinite; }
@keyframes busy-spin { to { transform: rotate(360deg); } }
.busy-bar[hidden], .busy-box[hidden] { display: none; }
body.is-busy { cursor: progress; }
.is-busy-button { position: relative; opacity: .75; cursor: progress; }
@media (prefers-reduced-motion: reduce) {
  .busy-bar::after, .busy-spinner { animation-duration: 3s; }
}

/* Round 4D: released library cards */
.cell-menu { position: relative; }
.cell-menu > summary { list-style: none; min-width: 34px; text-align: center; cursor: pointer; }
.cell-menu > summary::-webkit-details-marker { display: none; }
.cell-menu-items { position: absolute; z-index: 20; top: calc(100% + 4px); right: 0; display: grid; gap: 2px; min-width: 190px; padding: 6px; border: 1px solid #d6e3ea; border-radius: 8px; background: #fff; box-shadow: 0 10px 24px rgb(15 23 42 / 16%); }
.cell-menu-items form { margin: 0; }
.cell-menu-items button { width: 100%; padding: 7px 9px; border: 0; border-radius: 5px; color: var(--navy); background: transparent; font-size: 12.5px; font-weight: 600; text-align: left; cursor: pointer; }
.cell-menu-items button:hover { background: #eef5f8; }
.cell-menu-items .danger-text { color: var(--danger); }
.cell-menu-items p { margin: 4px 9px; }
.release-delete-panel > summary { color: var(--danger); }
.release-delete-form { display: grid; gap: 10px; justify-items: start; }
.release-delete-list { display: grid; gap: 4px; width: 100%; max-height: 280px; overflow: auto; padding: 6px 8px; border: 1px solid #eadfe0; border-radius: 6px; }
.release-delete-list .is-disabled { opacity: .6; }
.release-delete-confirm { display: grid; gap: 3px; font-size: 12px; color: var(--muted); }
.release-delete-confirm input { width: 180px; }
.unreleased-products > summary { cursor: pointer; color: var(--navy); font-weight: 700; }
.unreleased-list { display: grid; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.unreleased-list li { padding: 8px 10px; border: 1px solid #e3ecf0; border-radius: 6px; }

/* Round 4E */
.pd-page-settings { display: grid; gap: 4px; margin-bottom: 12px; padding: 8px 10px; border: 1px solid #dde8ed; border-radius: 6px; background: #f7fbfc; }
.pd-page-settings label { display: grid; gap: 4px; font-size: 12px; font-weight: 700; color: var(--navy); }
.keep-notice { position: fixed; z-index: 1001; left: 50%; bottom: 22px; transform: translateX(-50%); max-width: calc(100vw - 32px); padding: 10px 16px; border-radius: 10px; color: #7c2d12; background: #fff7ed; box-shadow: 0 8px 28px rgb(15 23 42 / 22%); font-size: 13.5px; font-weight: 600; }

/* Phase A: sign-in time limit */
.session-banner { position: fixed; z-index: 1002; top: 64px; left: 50%; transform: translateX(-50%); max-width: calc(100vw - 32px); padding: 9px 16px; border-radius: 8px; color: #7c2d12; background: #fff7ed; border: 1px solid #fdba74; box-shadow: 0 8px 24px rgb(15 23 42 / 18%); font-size: 13.5px; font-weight: 700; }

/* ---------------------------------------------------------------- Specification and COA */
.product-code { color: var(--muted); font-size: .6em; font-weight: 600; }
.spec-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.spec-toolbar h2 { margin: 0 auto 0 0; }
.spec-table-wrap, .table-scroll { overflow-x: auto; }
.spec-table, .coa-results-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.spec-table th, .coa-results-table th { padding: 6px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; text-align: left; white-space: nowrap; }
.spec-table td, .coa-results-table td { padding: 6px; border-bottom: 1px solid #eef3f6; vertical-align: top; }
.spec-table input, .spec-table select, .coa-results-table input, .coa-results-table select { width: 100%; min-width: 70px; }
.spec-table td:nth-child(2) input { min-width: 170px; margin-bottom: 4px; }
.spec-table .narrow { min-width: 56px; width: 70px; }
.spec-limits { display: grid; gap: 4px; min-width: 150px; }
.spec-move { white-space: nowrap; }
.spec-table td.center { text-align: center; }
.spec-version { padding: 8px 0; border-bottom: 1px solid #eef3f6; }
.spec-version summary { cursor: pointer; }
.compact-table { margin-top: 8px; font-size: 12px; }
.badge-auto { padding: 0 5px; border-radius: 4px; color: #6d28d9; background: #ede9fe; font-size: 10px; font-weight: 700; }
.spec-problems, .coa-problems { margin-top: 10px; }
.coa-create-panel h2 { margin-top: 0; }
.coa-filter-grid { grid-template-columns: minmax(200px, 2fr) repeat(4, minmax(130px, 1fr)) auto; }
.coa-table td { vertical-align: top; }
.coa-status-draft { color: #7c5e10; background: #fdf3d7; }
.coa-status-checked { color: #1d4ed8; background: #dbeafe; }
.coa-status-approved { color: #166534; background: #dcfce7; }
.coa-status-superseded { color: #475569; background: #e2e8f0; }
.coa-status-withdrawn { color: #9a3412; background: #ffedd5; }
.coa-status-panel { display: grid; gap: 10px; }
.coa-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.coa-steps li { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 5px 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); font-size: 13px; }
.coa-steps li strong { flex: 0 0 auto; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: #fff; background: #94a3b8; font-size: 12px; }
.coa-steps li small { overflow: hidden; margin-left: auto; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.coa-steps li.is-current { border-color: #1d788f; color: var(--navy); box-shadow: 0 0 0 2px rgb(29 120 143 / 14%); }
.coa-steps li.is-current strong { background: #1d788f; }
.coa-steps li.is-done strong { background: #16a34a; }
.coa-status-row, .coa-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.coa-actions form { margin: 0; }
.coa-withdraw > summary { list-style: none; cursor: pointer; }
.coa-withdraw[open] form { margin-top: 8px; }
.coa-workspace { margin-top: 16px; }
.coa-editor { padding: 0 16px 16px; }
.coa-editor .editor-section { margin-top: 14px; }
.coa-editor h3 { margin: 0 0 8px; color: var(--navy); font-size: 15px; }
.coa-bi { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.coa-bi label { display: grid; gap: 2px; }
.coa-bi label span { color: var(--muted); font-size: 11px; font-weight: 700; }
.field-title { display: block; margin: 6px 0 2px; color: var(--muted); font-size: 12px; font-weight: 700; }
.coa-fill { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; margin-bottom: 8px; padding: 8px; border: 1px dashed #c9dfe8; border-radius: 8px; }
.coa-choices { display: grid; gap: 6px; }
.coa-choices small { display: block; }
.coa-summary { margin: 8px 0 0; }
.coa-chip { display: inline-block; padding: 1px 8px; border-radius: 999px; color: #475569; background: #e2e8f0; font-size: 11px; font-weight: 700; white-space: nowrap; }
.coa-chip-pass { color: #166534; background: #dcfce7; }
.coa-chip-fail { color: #b42318; background: #fee4e2; }
.coa-chip-manual, .coa-chip-pending { color: #7c5e10; background: #fdf3d7; }
.coa-chip-reported { color: #1d4ed8; background: #dbeafe; }
.coa-row-fail td { background: #fff5f4; }
.coa-audit { margin: 8px 0 0; padding-left: 18px; font-size: 13px; }
.coa-audit span { color: var(--muted); }
.coa-sheet { width: min(210mm, 100%); max-width: none; font-size: 8.2pt; }
.coa-band { position: relative; box-sizing: border-box; height: 30mm; color: #fff; background: #17324d; }
.coa-band-text { position: absolute; width: 40.48%; overflow: hidden; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
.coa-body { position: relative; z-index: 1; box-sizing: border-box; line-height: 1.27; }
.coa-body-classic { padding: 8mm 16mm 26mm; }
.coa-body-frame { position: relative; z-index: 1; }
.coa-body h4 { margin: 3mm 0 1.5mm; color: #17324d; font-size: 1.22em; }
.coa-kv { width: 100%; border-collapse: collapse; table-layout: fixed; }
.coa-kv th, .coa-kv td { padding: .8mm 1mm; border-bottom: 1px solid #d6e3ea; text-align: left; vertical-align: top; }
.coa-kv th { width: 18%; color: #3f5566; font-size: .88em; font-weight: 400; }
.coa-kv td { width: 32%; font-size: .975em; }
.coa-results { width: 100%; border-collapse: collapse; table-layout: fixed; }
.coa-results th { padding: .8mm 1mm; color: #fff; background: #17324d; font-size: .93em; text-align: left; overflow-wrap: anywhere; }
.coa-results td { padding: .8mm 1mm; border: 1px solid #c9dfe8; font-size: .975em; overflow-wrap: anywhere; }
.coa-results tr.is-fail td { background: #fdecea; }
.coa-results tr.is-fail td strong { color: #b42318; }
.coa-results td[data-cell] { cursor: pointer; }
.coa-results td.is-selected { outline: 2px solid #1d788f; outline-offset: -2px; }
.coa-results td.has-own-align { box-shadow: inset 3px 0 0 #f2b84b; }
.coa-approval.with-signature td { height: 12mm; }
.coa-statement { margin: 0; padding: 2mm 2.5mm; border: 1px solid #17324d; color: #17324d; background: #eef5f8; line-height: 1.3; }
.coa-small { margin: 1mm 0 0; color: #3f5566; font-size: .88em; }
.coa-notes { margin: 0; padding-left: 4mm; }
.coa-rich-view p { margin: 0 0 1mm; }
.coa-rich-view ul, .coa-rich-view ol { margin: 0 0 1mm; padding-left: 5mm; }
.coa-rich-view [data-align="center"], .coa-rich-pair [data-align="center"] { text-align: center; }
.coa-rich-view [data-align="right"], .coa-rich-pair [data-align="right"] { text-align: right; }
.coa-rich-view [data-align="justify"], .coa-rich-pair [data-align="justify"] { text-align: justify; }
.theme-box.is-movable { z-index: 5; cursor: move; pointer-events: auto; touch-action: none; }
.theme-box.is-movable:hover, .theme-box.is-dragging { outline: 1px dashed #1d788f; }
.coa-footer { position: absolute; left: 16mm; right: 16mm; bottom: 6mm; display: flex; justify-content: space-between; gap: 8px; padding-top: 1.5mm; border-top: 1px solid #c9dfe8; font-size: 6.6pt; }
.coa-footer div { display: grid; }
.coa-draft-mark { position: absolute; z-index: 6; top: 45%; left: 50%; color: rgb(180 35 24 / 14%); font-size: 24pt; font-weight: 800; white-space: nowrap; transform: translate(-50%, -50%) rotate(-35deg); pointer-events: none; }
@media (max-width: 1450px) {
  .coa-workspace #coa-layout { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 8px; align-items: start; }
  .coa-workspace #coa-layout .layout-intro { grid-column: 1 / -1; margin-bottom: 0; }
  .coa-workspace #coa-layout .coa-plan-group { margin-bottom: 0; }
}
@media (max-width: 760px) {
  .coa-steps { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .coa-bi { grid-template-columns: 1fr; }
  .coa-filter-grid { grid-template-columns: 1fr; }
}

/* ---------------- Round 6: COA specification in TDS typical properties ---------------- */
.spec-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: -2px 0 10px; }
.spec-tools p { flex: 1 1 100%; margin: 0; }
.editor-table tr.is-coa-only td { background: #fbf7ec; }
.spec-editor-row td { padding-top: 0 !important; border-bottom: 1px solid #e3ebef; }
.spec-editor-row.is-off td { padding-bottom: 6px !important; }
.spec-editor { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 10px; margin: 0 0 8px; border-left: 3px solid #1d788f; border-radius: 0 6px 6px 0; padding: 7px 9px; background: #f2f8fa; }
.spec-editor label { display: grid; gap: 2px; color: #4b6472; font-size: 10px; font-weight: 700; }
.spec-editor label.toggle-option { display: inline-flex; align-self: center; }
.spec-editor input:not([type="checkbox"]), .spec-editor select { width: 96px; min-width: 0; padding: 5px 6px; font-size: 12px; }
.spec-editor input.narrow { width: 64px; }
.spec-editor .spec-text-field { display: flex; flex-wrap: wrap; gap: 6px; }
.spec-editor .spec-text-field input { width: 150px; }
.spec-editor .spec-problems { flex: 1 1 100%; margin: 2px 0 0; color: #b42318; font-size: 11px; font-weight: 700; }
.spec-enable { color: #1d5e73 !important; font-weight: 800 !important; }

/* ---------------- Round 6: COA workspace in three panels ---------------- */
.coa-status-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.coa-status-top .coa-steps { flex: 1 1 520px; }
.coa-status-row:empty { display: none; }
.coa-steps li span { white-space: nowrap; }
.coa-plan-actions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.coa-plan-group { margin-bottom: 8px; border: 1px solid #d2dee4; border-radius: 8px; background: #fff; }
.coa-plan-group > summary { cursor: pointer; padding: 9px 10px; color: var(--navy); font-size: 12px; font-weight: 800; }
.coa-plan-group[open] > summary { border-bottom: 1px solid #e3ebef; }
.coa-plan-body { display: grid; gap: 7px; padding: 9px 10px; }
.coa-plan-body .section-label { margin: 4px 0 0; }
.coa-plan-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; border: 1px solid #e1e9ed; border-radius: 6px; padding: 5px 7px; background: #fbfdfe; }
.coa-plan-row.is-hidden { opacity: .6; }
.coa-plan-column { flex-wrap: wrap; }
.coa-plan-column > .toggle-option { flex: 1 1 100%; }
.coa-plan-mini { display: inline-flex !important; align-items: center; gap: 3px; font-size: 10px; }
.coa-plan-mini input { width: 58px; padding: 4px 5px; font-size: 11px; }
.coa-plan-row select, .coa-plan-inline select { width: auto; min-width: 74px; padding: 4px 5px; font-size: 11px; }
.coa-plan-move { display: inline-flex; gap: 3px; }
.coa-plan-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 8px; }
.coa-plan-inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 10px; }
.coa-plan-inline label, .coa-plan-line, .coa-plan-field label { display: grid; gap: 2px; color: #4b6472; font-size: 10px; font-weight: 700; }
.coa-plan-inline label.toggle-option, .coa-plan-field label.toggle-option { display: inline-flex; align-self: center; }
.coa-plan-inline input[type="number"], .coa-plan-line input[type="number"], .coa-plan-field input[type="number"] { width: 64px; padding: 4px 5px; font-size: 11px; }
.coa-plan-line select { width: 100%; padding: 5px; font-size: 12px; }
.coa-plan-field { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 5px 8px; border: 1px solid #e1e9ed; border-radius: 6px; padding: 7px; background: #fbfdfe; }
.coa-plan-field > strong { flex: 1 1 100%; color: var(--navy); font-size: 11px; }
.coa-plan-field input[type="color"], .coa-plan-inline input[type="color"] { width: 38px; height: 26px; padding: 1px; }
.coa-plan-field select { width: auto; min-width: 70px; padding: 4px 5px; font-size: 11px; }
.coa-plan-selected { margin: 0; font-size: 12px; }
.coa-plan-inline .mini-button.active { border-color: #1d788f; color: #fff; background: #1d788f; }
.coa-rich-pair { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 8px 0; }
.coa-rich .rich-text-editor { min-height: 72px; }
.coa-workspace .preview-panel { min-width: 0; }
@media (max-width: 1180px) {
  .coa-status-top .coa-steps { flex-basis: 100%; }
}
.coa-sheet .theme-box { z-index: 3; }
.coa-sheet .coa-body-frame { pointer-events: none; }
.coa-sheet .coa-body-frame .coa-body { pointer-events: auto; }

/* ---------------------------------------------------------------- round 7: account, signatures, approval rows, texts, sharing */
.account-link { color: #dbeaf0; text-decoration: none; }
.account-link:hover { color: #fff; background: rgb(255 255 255 / 12%); }
.account-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.account-facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 0 0 12px; font-size: 13px; }
.account-facts dt { color: #4b6472; font-weight: 700; }
.account-facts dd { margin: 0; }
.account-password-link { margin: 12px 0 0; }
.signature-box { display: flex; align-items: center; justify-content: center; min-height: 90px; margin: 8px 0 12px; padding: 8px; border: 1px solid #d2dee4; border-radius: 8px;
  background-color: #fff; background-image: linear-gradient(45deg, #eef3f6 25%, transparent 25%), linear-gradient(-45deg, #eef3f6 25%, transparent 25%),
  linear-gradient(45deg, transparent 75%, #eef3f6 75%), linear-gradient(-45deg, transparent 75%, #eef3f6 75%);
  background-size: 14px 14px; background-position: 0 0, 0 7px, 7px -7px, -7px 0; }
.signature-box img { display: block; max-width: 100%; max-height: 120px; }
.signature-box.small { min-height: 46px; margin: 0; padding: 4px; }
.signature-box.small img { max-height: 44px; }
.signature-box.is-empty { background-image: none; color: var(--muted); font-size: 12px; }
.user-signature { margin: 8px 0; }
.user-signature > summary { cursor: pointer; font-size: 12px; font-weight: 700; }
.user-signature .signature-box { max-width: 280px; margin: 6px 0; }
.user-signature .inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.coa-sign-rows { display: grid; gap: 8px; }
.coa-sign-row { display: grid; gap: 6px; padding: 8px; border: 1px solid #d6e3ea; border-radius: 8px; background: #fbfdfe; }
.coa-sign-head { display: flex; align-items: center; gap: 6px; }
.coa-sign-head .coa-plan-move { margin-left: auto; }
.coa-sign-auto { font-size: 12px; }
.coa-sign-image { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; align-items: center; gap: 8px; }
.coa-sign-image > div:last-child { display: grid; gap: 4px; justify-items: start; }
.mini-upload { position: relative; display: inline-flex; align-items: center; border: 1px solid #b9cdd6; border-radius: 5px; padding: 3px 8px; background: #fff; color: var(--navy); font-size: 11px; font-weight: 700; cursor: pointer; }
.mini-upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.mini-upload:focus-within { outline: 2px solid #1d788f; outline-offset: 1px; }
.coa-approval.with-signature td { height: 13mm; }
.coa-approval td[data-sign-cell] { padding: .3mm 1mm; }
.coa-approval td[data-sign-cell] img { display: inline-block; max-width: 100%; max-height: 11mm; vertical-align: middle; }
#coa-preview [data-cell] { cursor: pointer; }
#coa-preview [data-cell].is-selected { outline: 2px solid #1d788f; outline-offset: -2px; }
#coa-preview [data-cell].has-own-align { box-shadow: inset 3px 0 0 #f2b84b; }
.coa-plan-sub { display: flex; flex: 1 1 100%; flex-wrap: wrap; gap: 4px; }
.coa-plan-sub select { flex: 1 1 90px; }
.toggle-option.is-fixed { font-size: 11px; color: var(--navy); }
.coa-footer-note { margin-top: 3mm; }
.coa-text-group { border: 1px solid #e1e9ed; border-radius: 6px; background: #fbfdfe; }
.coa-text-group > summary { cursor: pointer; padding: 6px 8px; color: var(--navy); font-size: 11px; font-weight: 800; }
.coa-text-row { display: grid; grid-template-columns: 1fr; gap: 3px; padding: 6px 8px; border-top: 1px solid #e8eff2; }
.coa-text-row label { display: grid; grid-template-columns: 24px 1fr; align-items: start; gap: 4px; color: #4b6472; font-size: 10px; font-weight: 700; }
.coa-text-row input, .coa-text-row textarea { width: 100%; padding: 4px 6px; font-size: 11px; }
.coa-text-row textarea { resize: vertical; min-height: 40px; }
.coa-text-key { color: #17324d; font-size: 11px; font-weight: 700; }
.coa-share-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; align-items: start; }
.coa-share-grid h3 { margin: 0 0 4px; font-size: 14px; }
.coa-share-form { display: grid; gap: 8px; }
.coa-share-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.coa-share-list .file-badge { margin-left: 4px; }
.my-coa-search { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; margin-bottom: 10px; }
.my-coa-search .grow { flex: 1 1 260px; display: grid; gap: 3px; }
@media (max-width: 640px) { .coa-sign-image { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- round 8: product tiles, product pages */
.product-search { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin-bottom: 14px; padding: 12px 14px; }
.product-search label { display: grid; gap: 3px; }
.product-search .grow { flex: 1 1 260px; }
.tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-bottom: 18px; }
.product-tile { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); box-shadow: 0 3px 10px rgb(35 55 67 / 5%); color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
a.product-tile:hover, a.product-tile:focus-visible, .product-tile:focus-within { border-color: #1d788f; box-shadow: 0 5px 16px rgb(29 120 143 / 16%); }
.product-tile[hidden] { display: none; }
.product-tile .tile-main { display: grid; gap: 2px; color: inherit; text-decoration: none; }
.product-tile .tile-main:hover strong { text-decoration: underline; }
.product-tile-name { overflow-wrap: anywhere; font-size: 15px; line-height: 1.3; }
.product-tile .product-name-th { margin: 0; color: var(--muted); font-size: 12.5px; }
.product-code { color: #4b6472; font-size: 11px; font-weight: 700; }
.tile-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.doc-chip { display: inline-flex; align-items: center; gap: 3px; border: 1px solid #c9dfe8; border-radius: 999px; padding: 2px 8px; background: #f3f8fa;
  color: var(--navy); font-size: 11px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.doc-chip small { color: #4b6472; font-weight: 600; }
a.doc-chip:hover { border-color: #1d788f; background: #e6f2f6; }
.doc-chip.is-empty { opacity: .6; }
.doc-chip.chip-coa { background: #fdf6e8; border-color: #f0dcae; }
.doc-chip .file-badge { margin-left: 3px; padding: 0 5px; font-size: 10px; }
.chip-dot { display: inline-block; width: 7px; height: 7px; margin-left: 2px; border-radius: 50%; background: #e2a521; }
.tile-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; color: var(--muted); font-size: 11.5px; }
.tile-foot .tile-open { margin-left: auto; color: #1d788f; font-size: 16px; font-weight: 800; text-decoration: none; }
.fold-section { margin-bottom: 12px; padding: 0; }
.fold-section > summary { cursor: pointer; padding: 12px 16px; }
.fold-section[open] > summary { border-bottom: 1px solid var(--line); }
.fold-section > :not(summary) { margin: 12px 16px; }
.fold-actions { display: flex; justify-content: flex-end; }
.breadcrumb { margin: 2px 0 6px; color: var(--muted); font-size: 12.5px; }
.breadcrumb a { color: #1d788f; }
.product-page-head h1 { margin-bottom: 2px; }
.product-quick { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; }
.page-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 10px 0 14px; border-bottom: 1px solid var(--line); }
.page-tab { display: inline-flex; align-items: center; gap: 6px; margin-bottom: -1px; border: 1px solid transparent; border-radius: 8px 8px 0 0; padding: 8px 14px;
  color: #3f5566; font-weight: 750; text-decoration: none; }
.page-tab:hover { background: #f1f6f8; }
.page-tab.active { border-color: var(--line); border-bottom-color: var(--surface, #fff); background: var(--surface, #fff); color: var(--navy); }
.page-tab.is-empty { opacity: .55; }
.release-rows { display: grid; gap: 8px; }
.release-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; }
.release-row p { margin: 3px 0 0; }
.overview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; align-items: start; margin-bottom: 14px; }
.overview-doc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.overview-doc-head h2, .overview-doc h2 { margin: 0; font-size: 17px; }
.ov-list { display: grid; gap: 0; margin: 8px 0 0; padding: 0; list-style: none; }
.ov-list li { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 7px 0; border-top: 1px solid #e8eff2; font-size: 13px; }
.ov-list li > span:first-child { min-width: 0; }
.ov-list li small { overflow-wrap: anywhere; }
.ov-list .table-actions { flex-wrap: nowrap; gap: 4px; }
.older-versions > summary { cursor: pointer; margin-top: 6px; color: #1d788f; font-size: 12.5px; font-weight: 700; }
.overview-access { margin-bottom: 12px; }
.overview-coa-new form { align-items: center; }
.pager { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 10px 0; }
.danger-zone { border-color: #f1c4bf; }
@media (max-width: 640px) { .tile-grid { grid-template-columns: 1fr; } .page-tab { padding: 7px 10px; } }
.dashboard-head h1 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.dashboard-head h1 .count-badge { font-size: 12px; }
.create-product .inline-form { flex-wrap: wrap; }
.ov-list .mini-button { white-space: nowrap; }

/* ---------------------------------------------------------------- round 9: header, keyboard focus, skip link */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid #1d8fab; outline-offset: 2px; }
.site-header :where(a, button, summary):focus-visible { outline-color: var(--orange); }
.site-main:focus { outline: none; }
.skip-link { position: fixed; z-index: 1100; top: 8px; left: 8px; transform: translateY(-160%); border-radius: 7px; padding: 9px 14px; color: #fff; background: var(--navy); font-size: 13px; font-weight: 750; text-decoration: none; box-shadow: var(--shadow); }
.skip-link:focus { transform: none; }
.site-main { scroll-margin-top: var(--site-header-height); }
@media (max-width: 520px) {
  .js .brand-name { display: none; }
}
.layout-collapse-toggle { display: none; flex: 0 0 auto; }
@media (max-width: 1450px) {
  .layout-toolbar { align-items: center; }
  .layout-toolbar > div:first-child { margin-right: auto; }
  .layout-collapse-toggle { display: inline-flex; }
  .layout-panel.is-collapsed .layout-toolbar { border-bottom: 0; }
  /* Stacked above the editor: cap its height so the editor stays near. */
  .layout-content { max-height: min(70vh, 720px); }
}

/* ---------------------------------------------------------------- round 9: readability and touch targets (UX audit)
   Interface text only: printed previews (#document-preview, page/label sheets,
   COA sheet) keep their own sizes, so the :not() excludes them. */
.site-main :is(small, legend, dt, .bi-lang, .cell-lang-tag, .rich-text-hint, .layout-action, .readability-badge, .ghs-review-flag,
  .table-align-control span, .spec-editor label span, .spec-text-field label span, .hfs-controls label span, .watermark-controls label span,
  .comparison-header-actions span, .comparison-header-actions .mini-button, .footer-planner-item span,
  .footer-planner-row-heading :is(strong, span), .compact-planner-row-heading :is(strong, span), .editor-panel th,
  .grid-row-label, .grid-block-controls :is(span, input, select), .ghs-pictogram-option strong):not(#document-preview *, .page-sheet *, .label-sheet *, .coa-sheet *) {
  font-size: 11px;
}
.account-role { font-size: 11px; }
/* Touch targets: at least 24x24 px (WCAG 2.2 AA 2.5.8). */
.language-switcher a { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; min-height: 26px; padding: 4px 8px; font-size: 12px; }
.site-main input:is([type=checkbox], [type=radio]):not(#document-preview *, .page-sheet *, .label-sheet *) { width: 18px; height: 18px; accent-color: #1d788f; }
.layout-action { min-width: 28px; min-height: 28px; }
.site-main .rich-tool { min-width: 28px; min-height: 28px; }
.link-danger { min-height: 26px; padding: 4px 6px; border-radius: 5px; }
.link-danger:hover { background: #fff0f1; }
:where(.site-main) summary { padding-block: 5px; }
.doc-chip { min-height: 26px; padding: 3px 9px; }
.grid-block-controls :is(input, select) { min-height: 26px; }
/* The header alignment select in a narrow comparison column kept only 14px. */
.comparison-header-actions .table-align-control select { min-width: 72px; }
.tile-open { display: inline-grid; place-items: center; min-width: 28px; min-height: 28px; border-radius: 6px; }
.tile-open:hover { background: #e8f6f9; }

/* ---------------------------------------------------------------- round 9: user guide (/guide) */
.guide-link { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; border: 1px solid rgb(255 255 255 / 30%); border-radius: 999px; padding: 3px 10px 3px 4px; color: #fff; font-size: 11px; font-weight: 750; text-decoration: none; white-space: nowrap; }
.guide-link > span[aria-hidden] { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: var(--navy-dark); background: var(--orange); font-weight: 900; }
.guide-link:hover, .guide-link.active { background: rgb(255 255 255 / 12%); }
.site-header:not(.is-compact) .guide-link-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.site-header:not(.is-compact) .guide-link { padding: 3px; border-radius: 50%; }
.guide-my-role { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-weight: 700; }
.guide-layout { display: grid; grid-template-columns: minmax(200px, 260px) minmax(0, 1fr); gap: 20px; align-items: start; }
.guide-toc { position: sticky; top: calc(var(--site-header-height) + 12px); padding: 16px; }
.guide-toc ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; }
.guide-toc a { color: var(--navy); }
.guide-body { display: grid; gap: 16px; min-width: 0; }
.guide-section { padding: 20px 22px; scroll-margin-top: calc(var(--site-header-height) + 12px); }
.guide-section.is-mine { box-shadow: inset 4px 0 0 var(--orange), var(--shadow); }
.guide-section h2 { margin: 0 0 6px; font-size: 19px; }
.guide-steps { display: grid; gap: 9px; margin: 14px 0 0; padding-left: 22px; line-height: 1.55; }
.guide-steps li::marker { color: var(--eyebrow); font-weight: 800; }
.guide-go { margin-left: 4px; color: #12637b; font-size: 13px; font-weight: 750; white-space: nowrap; }
.guide-tips { margin-top: 16px; border: 1px solid #f0dcae; border-radius: 9px; padding: 12px 14px; background: #fdf8ec; }
.guide-tips ul { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 5px; line-height: 1.5; }
.guide-roles { width: 100%; border-collapse: collapse; }
.guide-roles th, .guide-roles td { border-bottom: 1px solid var(--line); padding: 9px 10px; text-align: left; vertical-align: top; }
.guide-roles tbody th { white-space: nowrap; }
.guide-roles tr.is-mine { background: #fdf8ec; }
@media (max-width: 860px) {
  .guide-layout { grid-template-columns: 1fr; }
  .guide-toc { position: static; }
  .guide-section { padding: 16px; }
}

/* ---------------------------------------------------------------- round 9: "Manage" menu (master data + administration) */
.nav-menu-heading { margin: 6px 10px 2px; color: #9fb9c8; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.nav-menu-heading:first-child { margin-top: 2px; }
.nav-menu-heading + a { margin-top: 0; }
.nav-menu-items .nav-menu-heading:not(:first-child) { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgb(255 255 255 / 12%); }
.nav-manage .nav-menu-items { min-width: 230px; }
.js .site-header.is-compact .nav-menu-heading { margin-left: 0; }
.js .site-header.is-compact .nav-menu > summary { position: relative; }

/* ---------------------------------------------------------------- round 9: Thai readability */
/* Thai stacks vowels and tone marks above and below the line: give it more room. */
html[lang="th"] body { line-height: 1.6; }
html[lang="th"] :is(p, li, dd, td, .muted, .flash) { line-height: 1.65; }
/* Document previews keep the font family of the generated PDF. */
.page-sheet, .label-sheet { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans Thai", "Leelawadee UI", sans-serif; line-height: normal; }

/* ---------------------------------------------------------------- round 9: dashboard filter chips (replace the native select) */
.tile-filter { display: grid; gap: 10px; }
.tile-filter .grow { min-width: 0; }
.filter-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; border: 0; padding: 0; }
.filter-chips legend { float: left; margin-right: 6px; padding: 0; color: var(--muted); font-size: 12px; font-weight: 750; }
.filter-chip { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; border: 1px solid #c9dbe3; border-radius: 999px; padding: 4px 12px; color: var(--navy); background: #fff; font-size: 13px; font-weight: 650; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.filter-chip:hover { border-color: #1d788f; background: #eef8fa; }
.filter-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.filter-chip:has(input:focus-visible) { outline: 2px solid #1d8fab; outline-offset: 2px; }
.filter-chip:has(input:checked) { border-color: var(--navy); color: #fff; background: var(--navy); }
.filter-chip .filter-count { min-width: 22px; border-radius: 999px; padding: 1px 7px; color: var(--navy); background: #e3eef3; font-size: 11px; font-weight: 800; text-align: center; }
.filter-chip:has(input:checked) .filter-count { color: var(--navy); background: #fff; }
.filter-chip.is-zero:not(:has(input:checked)) { color: var(--muted); }
.filter-chip.is-zero:not(:has(input:checked)) .filter-count { background: #eef2f4; color: var(--muted); }
@media (max-width: 640px) { .filter-chips legend { float: none; width: 100%; margin-bottom: 2px; } }
.product-search .filter-chip { display: inline-flex; }

/* ---------------------------------------------------------------- round 9: themed dropdowns (every <select>)
   Closed box: custom chevron, hover/disabled states (all browsers).
   Open list: themed panel and options where the customizable select is
   supported (appearance: base-select, Chrome/Edge); elsewhere the native list. */
select:not([multiple]):not([size]) {
  -webkit-appearance: none;
  appearance: none;
  --select-bg: #fff;
  padding-right: 28px;
  background-color: var(--select-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2317324d' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 12px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
select:not([multiple]):not([size]):hover:not(:disabled) { --select-bg: #fbfdfe; border-color: #7fa7b8; }
select:not([multiple]):not([size]):focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgb(28 155 180 / 16%); outline: none; }
select:disabled { --select-bg: #f2f5f7; color: var(--muted); background-color: var(--select-bg); cursor: not-allowed; opacity: 1; }
select[multiple], select[size] { border-radius: 9px; padding: 4px; }
select[multiple] option, select[size] option { border-radius: 5px; padding: 5px 8px; }
select[multiple] option:checked, select[size] option:checked { color: #fff; background: var(--navy) linear-gradient(var(--navy), var(--navy)); }

@supports (appearance: base-select) {
  select:not([multiple]):not([size]) { appearance: base-select; position: relative; display: inline-flex; align-items: center; overflow: hidden; background-image: none; }
  /* The inner value cannot end in an ellipsis, so it fades out under the arrow. */
  select:not([multiple]):not([size])::picker-icon { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 30px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2317324d' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 9px center / 12px no-repeat, linear-gradient(to right, transparent, var(--select-bg) 10px); }
  select:not([multiple]):not([size])::picker(select) {
    appearance: base-select;
    margin-top: 4px;
    border: 1px solid #c9dbe3;
    border-radius: 10px;
    padding: 5px;
    background: #fff;
    box-shadow: 0 14px 32px rgb(16 38 59 / 18%), 0 2px 6px rgb(16 38 59 / 8%);
    max-height: min(60vh, 380px);
    min-width: anchor-size(width);
  }
  select:not([multiple]):not([size]) option {
    display: flex; align-items: center; gap: 8px;
    min-height: 34px; border-radius: 7px; padding: 6px 10px;
    color: var(--ink); font-size: 14px; font-weight: 500; line-height: 1.4; white-space: normal;
  }
  select:not([multiple]):not([size]) option:hover,
  select:not([multiple]):not([size]) option:focus-visible { outline: none; color: var(--navy); background: #e9f5f8; }
  select:not([multiple]):not([size]) option:checked { color: #fff; background: var(--navy); font-weight: 650; }
  select:not([multiple]):not([size]) option::checkmark { order: 1; margin-left: auto; color: var(--orange); font-weight: 900; }
  select:not([multiple]):not([size]) option:disabled { color: var(--muted); }
  select:not([multiple]):not([size]) optgroup { padding: 2px 0; color: var(--muted); font-size: 12px; font-weight: 800; }
}
/* Long values stay on one line in the closed box (full text in the list). */
select:not([multiple]):not([size]) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Phones: the planner card is a column; wrapping pushed the style controls into a second column outside the card. */
@media (max-width: 760px) { .compact-planner-item { flex-wrap: nowrap; } .compact-planner-item .hfs-controls { flex-basis: auto; } }