*{box-sizing:border-box}
html,body{margin:0}
body{font:var(--weight-regular) var(--text-body)/1.55 var(--font);color:var(--c-text);background:var(--c-canvas);font-variant-numeric:tabular-nums}
button,input,select{font:inherit;color:inherit}
button,a,input,select,summary{touch-action:manipulation}
button,select,input{min-height:var(--control);border:1px solid var(--c-border-strong);border-radius:var(--r-control);background:var(--c-surface);padding:var(--gallery-space-n4) var(--gallery-space-n10)}
button{cursor:pointer;transition:background-color var(--motion-fast) var(--motion-smooth),border-color var(--motion-fast) var(--motion-smooth)}
button:hover,a.card-link:hover{border-color:var(--c-accent-ink)}
a{color:var(--c-accent-ink);text-underline-offset:3px;overflow-wrap:anywhere;min-height:24px}
button:disabled{cursor:default}
button[aria-pressed=true],button[aria-selected=true]{background:var(--c-accent-soft);color:var(--c-accent-ink);border-color:var(--c-accent-ink)}
.primary{background:var(--c-button);color:var(--c-button-text);border-color:var(--c-button)}
:focus-visible{outline:3px solid var(--c-accent-ink);outline-offset:3px}
.side :focus-visible{outline-color:var(--c-accent-ink)}
.i{width:16px;height:16px;stroke:currentColor;stroke-width:1.75;fill:none;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle;flex:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;top:var(--gallery-space-minus80);left:var(--gallery-space-n12);z-index:40;background:var(--c-surface);padding:var(--gallery-space-n12)}
.skip:focus{top:var(--gallery-space-n8)}
[hidden]{display:none!important}
.app{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:100vh}
.side{position:sticky;top:0;height:100vh;overflow:auto;background:var(--c-nav);color:var(--c-nav-ink);padding:var(--gallery-space-n12) var(--gallery-space-n8);display:flex;flex-direction:column}
.brand{display:flex;align-items:center;gap:var(--gallery-space-n8);padding:var(--gallery-space-n4) var(--gallery-space-n8) var(--gallery-space-n16)}
.brand b{display:block;color:var(--c-nav-strong);font-size:var(--text-body)}
.logo{background:var(--c-button);color:var(--c-button-text);border-radius:var(--r-tag);width:26px;height:26px;display:grid;place-items:center;flex:none}
.new{font-size:var(--text-small);color:var(--c-nav-dim)}
.cap{margin:var(--gallery-space-n12) var(--gallery-space-n8) var(--gallery-space-n4);color:var(--c-nav-dim);font-size:var(--text-small)}
.nav-row,.nav-sub a{display:flex;align-items:center;gap:var(--gallery-space-n6);min-height:var(--row);padding:var(--gallery-space-n6) var(--gallery-space-n8);text-decoration:none;border-radius:var(--r-tag);color:var(--c-nav-ink);font-size:var(--text-small)}
.nav-row .n,.nav-sub .n{margin-left:auto;flex-shrink:0}
.nav-row[aria-current=page],.nav-sub a[aria-current=page]{background:var(--c-nav-active);color:var(--c-nav-active-ink);box-shadow:inset 3px 0 var(--c-nav-marker)}
.nav-row:hover,.nav-sub a:hover{background:var(--c-nav-hover)}
.nav-sub{border-left:1px solid var(--c-nav-line);margin-left:var(--gallery-space-n16);padding-left:var(--gallery-space-n8)}
.nav-sub a{min-height:var(--row)}
.side-foot{display:grid;gap:var(--gallery-space-n8);margin-top:auto;padding:var(--gallery-space-n20) var(--gallery-space-n8) var(--gallery-space-n4);font-size:var(--text-small);color:var(--c-nav-dim)}
.side-foot a{color:var(--c-nav-strong)}
.workspace{min-width:0}
.top{height:48px;background:var(--c-surface);border-bottom:1px solid var(--c-border);display:flex;align-items:center;gap:var(--gap);padding:0 var(--gallery-space-n24);min-width:0}
.breadcrumb{font-size:var(--text-small);white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
#health{display:flex;gap:var(--gallery-space-n8);overflow:auto;white-space:nowrap;font-size:var(--text-small);margin-left:auto;scrollbar-width:thin}
#health span{padding:var(--gallery-space-n2) var(--gallery-space-n6);border-radius:var(--r-tag);background:var(--c-panel)}
main{padding:var(--gallery-space-n24);min-width:0}
h1{font-size:var(--text-title);line-height:1.4;margin:0;font-weight:var(--weight-semibold)}
h2{font-size:18px;line-height:1.5}
h3{font-size:var(--text-body);margin:var(--gallery-space-n20) 0 var(--gallery-space-n8)}
h4{font-size:var(--text-body)}
p{margin:var(--gallery-space-n6) 0 var(--gallery-space-n12)}
.heading{display:flex;justify-content:space-between;gap:var(--gap);margin-bottom:var(--gallery-space-n20)}
.eyebrow{color:var(--c-muted);font-size:var(--text-small);letter-spacing:.07em;margin:0 0 var(--gallery-space-n4)}
.muted{color:var(--c-muted);font-size:var(--text-small)}
.count{font-size:var(--text-small);align-self:center;white-space:nowrap;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-tag);padding:var(--gallery-space-n4) var(--gallery-space-n10)}
.finder-controls{border:1px solid var(--c-border);border-radius:var(--r-panel);background:var(--c-surface);padding:var(--gallery-space-n12) var(--gallery-space-n16);margin-bottom:var(--gallery-space-n12)}
.finder-controls summary{cursor:pointer;min-height:24px;font-weight:var(--weight-semibold)}
.finder-controls summary span{margin-left:var(--gallery-space-n12);font-weight:var(--weight-regular)}
#finder-form{display:flex;align-items:end;gap:var(--gap);padding-top:var(--gallery-space-n12);flex-wrap:wrap}
#finder-form label{display:grid;gap:var(--gallery-space-n4);flex:1;font-size:var(--text-small);min-width:160px}
#finder-form select{width:100%;max-width:100%}
.toolbar{display:flex;align-items:center;gap:var(--gallery-space-n8);overflow-x:auto;padding:var(--gallery-space-n12) var(--gallery-space-n1);white-space:nowrap}
.toolbar button,.toolbar select{font-size:var(--text-small);flex:none}
.search{display:flex;align-items:center;flex:1 0 180px;min-width:160px;position:relative}
.search input{width:100%;padding-right:var(--gallery-space-n26);background:var(--c-surface)}
.search kbd{position:absolute;right:var(--gallery-space-n10);color:var(--c-muted);font-size:var(--text-small)}
.seg{display:flex;gap:var(--gallery-space-n4)}
.seg button{padding:var(--gallery-space-n4) var(--gallery-space-n8)}
.chips{display:flex;gap:var(--gallery-space-n6);overflow-x:auto;white-space:nowrap;padding:var(--gallery-space-n6) var(--gallery-space-n1) var(--gallery-space-n12);scrollbar-width:thin}
.chips:empty{display:none}
.chip{font-size:var(--text-small);border-radius:var(--r-control);flex:none}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:var(--gap)}
.card{position:relative;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-panel);min-width:0;overflow:hidden;display:flex;flex-direction:column}
.card-link{color:inherit;text-decoration:none;display:flex;flex-direction:column;flex:1;min-width:0}
.card-link:focus-visible{outline-offset:-3px}
.thumb{aspect-ratio:16/10;width:100%;background:var(--c-panel);position:relative;display:grid;place-items:center;color:var(--c-muted);overflow:hidden}
.thumb .initials{font-size:28px;letter-spacing:.12em}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.card-body{padding:var(--gallery-space-n12);min-width:0;display:grid;gap:var(--gallery-space-n6)}
.card h2{font-size:var(--text-body);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.meta{display:flex;gap:var(--gallery-space-n8);font-size:var(--text-small);color:var(--c-muted);min-width:0}
.meta .domain{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
.tags{display:flex;gap:var(--gallery-space-n4);flex-wrap:wrap;min-width:0}
.badge{font-size:var(--text-small);max-width:100%;overflow-wrap:anywhere;border-radius:var(--r-tag);background:var(--c-panel);color:var(--c-muted);padding:var(--gallery-space-n2) var(--gallery-space-n6);display:inline-block}
.badge.ok{background:var(--c-ok-bg);color:var(--c-ok)}
.badge.warn{background:var(--c-warn-bg);color:var(--c-warn)}
.badge.info{background:var(--c-info-bg);color:var(--c-info)}
.fav{position:absolute;right:var(--gallery-space-n8);top:var(--gallery-space-n8);z-index:2;width:32px;height:32px;padding:var(--gallery-space-n4);background:var(--c-surface);border-color:var(--c-border-strong)}
.fav[aria-pressed=true] svg{fill:currentColor}
.provenance{font-size:var(--text-small);color:var(--c-muted);margin-top:var(--gallery-space-n2)}
.summary{font-size:var(--text-small);color:var(--c-muted);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.preview{height:128px;background:var(--c-panel);padding:var(--gallery-space-n20) var(--gallery-space-n34);display:grid;align-items:center;border-bottom:1px solid var(--c-border)}
.wire{display:grid;gap:var(--gallery-space-n6);width:100%;height:86px;background:var(--c-surface);border:1px solid var(--c-border-strong);border-radius:var(--r-tag);padding:var(--gallery-space-n8)}
.wire i{display:block;background:var(--c-panel);border:1px solid var(--c-border-strong);border-radius:2px}
.wire.hero{grid-template-columns:1fr 1fr}
.wire.hero i:first-child{grid-row:span 3;background:var(--c-accent-soft)}
.wire.tiles{grid-template-columns:repeat(3,1fr)}
.wire.calendar{grid-template-columns:repeat(7,1fr)}
.wire.accordion i{height:12px}
.wire.form{grid-template-columns:1fr 1fr}
.wire.form i:last-child{background:var(--c-accent-soft)}
.list{grid-template-columns:1fr}
.list .card-link{display:grid;grid-template-columns:160px minmax(0,1fr)}
.list .thumb,.list .preview{height:100%;min-height:130px;aspect-ratio:auto}
.list .card-body{padding-right:var(--gallery-space-n50)}
.list .fav{top:var(--gallery-space-n12)}
.section-heading{display:flex;justify-content:space-between;margin-top:var(--gallery-space-n24);gap:var(--gap)}
.empty{padding:var(--gallery-space-n32) var(--gallery-space-n16);border:1px dashed var(--c-border-strong);border-radius:var(--r-panel);background:var(--c-surface)}
.panel{padding:var(--panel-padding);border:1px solid var(--c-border);border-radius:var(--r-panel);background:var(--c-surface);margin:var(--gallery-space-n12) 0;min-width:0}
.flow{display:flex;gap:var(--gallery-space-n8);flex-wrap:wrap;align-items:center}
.flow label{display:grid;gap:var(--gallery-space-n4)}
.flow input{max-width:100%}
dialog{position:fixed;inset:0 0 0 auto;margin:0;height:100dvh;max-height:100dvh;width:560px;max-width:100%;border:0;border-left:1px solid var(--c-border);background:var(--c-surface);color:var(--c-text);padding:0;overflow:auto}
dialog::backdrop{background:var(--c-overlay)}
.drawer-head{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;background:var(--c-surface);border-bottom:1px solid var(--c-border);padding:var(--gallery-space-n12) var(--gallery-space-n16)}
.drawer-head .eyebrow{margin:0}
#drawer-body{padding:var(--panel-padding);overflow-wrap:anywhere}
#drawer-title{font-size:var(--text-title);margin:0 0 var(--gallery-space-n8)}
#drawer-body h3{border-top:1px solid var(--c-border);padding-top:var(--gallery-space-n16)}
#drawer-body .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
#drawer-body .card-body{padding:var(--gallery-space-n10)}
#drawer-body .thumb{aspect-ratio:16/10}
#drawer-body .panel{background:var(--c-panel)}
.data-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:var(--text-small)}
.data-table th,.data-table td{border:1px solid var(--c-border);padding:var(--gallery-space-n8) var(--gallery-space-n6);text-align:left;vertical-align:top;overflow-wrap:anywhere}
.data-table th{background:var(--c-panel);font-weight:var(--weight-semibold)}
.data-table td p{margin:0}
.data-table a{display:inline-block}
.key-value{display:grid;grid-template-columns:120px minmax(0,1fr);gap:var(--gallery-space-n8);font-size:var(--text-small)}
.key-value dt{color:var(--c-muted)}
.key-value dd{margin:0}
.key-value ul{padding-left:var(--gallery-space-n18)}
.detail-section p{white-space:pre-line}
.detail-section li{margin-bottom:var(--gallery-space-n6)}
pre{background:var(--c-code-bg);color:var(--c-code-ink);font:var(--text-small)/1.7 var(--mono);padding:var(--panel-padding);border-radius:var(--r-panel);white-space:pre-wrap;overflow-wrap:anywhere}
code{font:var(--text-small) var(--mono)}
.tabbar{display:flex;gap:var(--gallery-space-n6);margin:var(--gallery-space-n12) 0}
.faq-demo{border:1px solid var(--c-border);border-radius:var(--r-panel);overflow:hidden}
.faq-demo h4{margin:0}
.faq-demo button{width:100%;min-height:44px;text-align:left;border:0;border-radius:0;display:flex;justify-content:space-between;border-top:1px solid var(--c-border);padding:var(--gallery-space-n10) var(--gallery-space-n16)}
.faq-demo button::after{content:'+';color:var(--c-accent-ink)}
.faq-demo button[aria-expanded=true]::after{content:'−'}
.faq-demo [role=region]{padding:0 var(--gallery-space-n16) var(--gallery-space-n14);color:var(--c-muted)}
.car{border:1px solid var(--c-border);border-radius:var(--r-panel);overflow:hidden}
.slide{background:var(--c-panel);padding:var(--gallery-space-n24);min-height:200px}
.slide h4{font-size:var(--text-title);margin:var(--gallery-space-n12) 0}
.ctl{display:flex;align-items:center;gap:var(--gallery-space-n8);padding:var(--gallery-space-n12)}
.ctl span{margin-right:auto}
.mobile-only{display:none}
#toast{position:fixed;bottom:var(--gallery-space-n16);left:50%;transform:translateX(-50%);background:var(--c-text);color:var(--c-surface);padding:var(--gallery-space-n8) var(--gallery-space-n16);border-radius:var(--r-control);z-index:50;pointer-events:none;max-width:90vw}
#toast:empty{display:none}
.source-list{padding-left:var(--gallery-space-n20)}
.collection-row{display:flex;align-items:center;gap:var(--gallery-space-n8);margin:var(--gallery-space-n8) 0}
.collection-row a{flex:1}

@media(max-width:1000px){.grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.top{padding:0 var(--gallery-space-n16)}
.breadcrumb{display:none}
main{padding:var(--gallery-space-n20) var(--gallery-space-n16)}
}

@media(max-width:700px){.app{display:block}
.side{position:fixed;left:0;top:0;width:280px;max-width:90vw;z-index:30;visibility:hidden;height:100dvh;box-shadow:6px 0 30px var(--c-shadow)}
.side.open{visibility:visible}
.mobile-only{display:inline-flex;align-items:center;justify-content:center}
#menu-close{margin-left:auto}
.top{padding:0 var(--gallery-space-n12)}
.top #health{margin-left:0}
main{padding:var(--gallery-space-n16) var(--gallery-space-n12)}
.heading{margin-bottom:var(--gallery-space-n16)}
.heading .count{padding:var(--gallery-space-n4) var(--gallery-space-n6)}
.grid{grid-template-columns:minmax(0,1fr)}
.finder-controls summary span{display:block;margin:0}
.finder-controls{padding:var(--gallery-space-n12)}
#finder-form{display:grid;grid-template-columns:minmax(0,1fr)}
.toolbar{padding-bottom:var(--gallery-space-n12)}
.toolbar .search{flex-basis:190px}
.list .card-link{grid-template-columns:100px minmax(0,1fr)}
.list .thumb{min-height:150px}
.list .preview{padding:var(--gallery-space-n10)}
.list .card-body{padding-right:var(--gallery-space-n38)}
dialog{width:100vw}
#drawer-body .grid{grid-template-columns:minmax(0,1fr)}
.key-value{grid-template-columns:100px minmax(0,1fr)}
.data-table td,.data-table th{padding:var(--gallery-space-n6) var(--gallery-space-n4)}
.flow{align-items:start}
.heading p{max-width:270px}
}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}
}


a{display:inline-block}
summary{min-height:24px;cursor:pointer}

a{min-width:24px}
#health{min-height:24px}


.drawer-actions .open-site{display:inline-flex;align-items:center;justify-content:center;height:var(--control);min-height:var(--control);padding:var(--gallery-space-n4) var(--gallery-space-n10);border:1px solid var(--c-accent-ink);border-radius:var(--r-control);text-decoration:none;flex:none}


/* เดโมอยู่ถัดจากแถวปุ่ม ไม่มีกรอบว่างหรือเส้นคั่นซ้อนเหนือหัว */
.demo-section{min-width:0;margin:var(--gallery-space-n16) 0;padding:0;border:0}

#drawer-body .demo-section>h3{margin:0 0 var(--gallery-space-n8);padding:0;border:0}

.demo-root{max-width:100%;min-width:0}
.demo-note{font-size:var(--text-small);color:var(--c-muted)}

#tab-code pre{max-height:500px;overflow:auto;white-space:pre-wrap;margin:0}
#tab-demo{min-width:0}


/* วงจรคะแนนและใบเงื่อนไข ใช้ token ของหน้าคลังเดิม */
textarea{font:inherit;color:inherit;border:1px solid var(--c-border-strong);border-radius:var(--r-control);padding:var(--gallery-space-n8);resize:vertical;min-width:0;max-width:100%;width:100%;background:var(--c-surface)}

.rating-panel{border:1px solid var(--c-border);border-radius:var(--r-panel);padding:var(--panel-padding);margin:var(--gallery-space-n16) 0;background:var(--c-panel)}

#drawer-body .rating-panel h3{border:0;padding:0;margin:0 0 var(--gallery-space-n8)}
.rating-panel p{font-size:var(--text-small)}
.rating-why{line-height:1.7}
.rating-membership a{min-height:24px}
.rating-panel form{display:grid;gap:var(--gallery-space-n8)}
.rating-panel label{font-size:var(--text-small)}
.rating-options{display:flex;gap:var(--gallery-space-n8);flex-wrap:wrap}
.rating-options button{flex:1;white-space:nowrap}
.rating-options [aria-checked=true]{background:var(--c-accent-soft);color:var(--c-accent-ink);border-color:var(--c-accent-ink)}

.quick-reasons{border:0;margin:0;padding:0;min-width:0}
.quick-reasons legend{font-size:var(--text-small);margin:var(--gallery-space-n4) 0}
.quick-reasons>div{display:flex;flex-wrap:wrap;gap:var(--gallery-space-n6)}
.quick-reasons button{white-space:normal;text-align:left;max-width:100%}
.rating-panel button[type=submit]{justify-self:start}
.rating-badge{margin:0 var(--gallery-space-n12) var(--gallery-space-n12);align-self:start;color:var(--c-ok);background:var(--c-ok-bg)}

#pdca-status:not(:empty){padding:var(--gallery-space-n12);border:1px solid var(--c-border);border-radius:var(--r-panel);background:var(--c-warn-bg);margin:var(--gallery-space-n8) 0}
.conditions-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:var(--gallery-space-n16);align-items:start}
.condition-nav{position:sticky;top:var(--gallery-space-n16);background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-panel);padding:var(--gallery-space-n12);max-height:calc(100vh - 32px);overflow:auto;min-width:0}
.condition-nav h2{font-size:var(--text-small);color:var(--c-muted);margin:var(--gallery-space-n12) var(--gallery-space-n8) var(--gallery-space-n4)}
.condition-nav a{display:block;text-decoration:none;color:var(--c-text);border-radius:var(--r-control);padding:var(--gallery-space-n8);margin:var(--gallery-space-n2) 0;overflow-wrap:anywhere}
.condition-nav a[aria-current=page]{background:var(--c-accent-soft);color:var(--c-accent-ink)}
.condition-nav b{font-size:var(--text-small);font-weight:var(--weight-semibold)}
.condition-nav small{display:block;font-size:var(--text-small)}
.pending-dot{color:var(--c-accent-ink);margin-left:var(--gallery-space-n6)}
.conditions-main{min-width:0}
.conditions-main>h2{margin:0;font-size:18px}
.conditions-main .panel>h2{font-size:16px;margin:0 0 var(--gallery-space-n12)}
.conditions-main .panel{margin-top:0;margin-bottom:var(--gallery-space-n16)}
.conditions-main>.panel:first-of-type{margin-top:var(--gallery-space-n12)}
.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gallery-space-n8);margin:0 0 var(--gallery-space-n16)}
.metric-grid div{background:var(--c-panel);padding:var(--gallery-space-n8);border-radius:var(--r-control)}
.metric-grid dt{font-size:var(--text-small);color:var(--c-muted)}
.metric-grid dd{margin:var(--gallery-space-n4) 0 0;font-weight:var(--weight-semibold);font-size:18px}
.recent-comments{padding-left:var(--gallery-space-n20)}
.recent-comments li{margin-bottom:var(--gallery-space-n12);font-size:var(--text-small)}
.recent-comments p{margin:var(--gallery-space-n4) 0;white-space:pre-wrap;overflow-wrap:anywhere}
.proposal-item{padding:var(--gallery-space-n12) 0;border-top:1px solid var(--c-border);font-size:var(--text-small)}
.proposal-item>p{margin:var(--gallery-space-n8) 0}
.evidence-links{overflow-wrap:anywhere}
.evidence-links a{min-height:24px}
.diff-add,.diff-remove{padding:var(--gallery-space-n8);border-radius:var(--r-tag);overflow-wrap:anywhere;white-space:pre-wrap}
.diff-add{background:var(--c-ok-bg);color:var(--c-ok)}
.diff-remove{background:var(--c-accent-soft);color:var(--c-accent-ink)}
.check-label{display:flex;align-items:center;gap:var(--gallery-space-n8);min-height:var(--row);font-size:var(--text-small);margin:var(--gallery-space-n6) 0}
.check-label input{width:24px;height:24px;min-height:24px;flex:none;accent-color:var(--c-accent-ink)}
.field-label{display:grid;gap:var(--gallery-space-n6);margin:var(--gallery-space-n12) 0;font-size:var(--text-small)}
.field-label input{width:100%;min-width:0}
.line-editor{border:1px solid var(--c-border);border-radius:var(--r-control);padding:var(--gallery-space-n12);margin:var(--gallery-space-n16) 0;min-width:0}
.line-editor legend,.machine-group legend{font-size:var(--text-small);font-weight:var(--weight-semibold);padding:0 var(--gallery-space-n6)}
.condition-line{display:flex;gap:var(--gallery-space-n6);margin:0 0 var(--gallery-space-n8);min-width:0}
.condition-line input{min-width:0;flex:1;width:0;font-size:var(--text-small)}
.line-actions{display:flex;gap:var(--gallery-space-n4);flex:none}
.line-actions button{padding:var(--gallery-space-n4) var(--gallery-space-n8);font-size:var(--text-small)}
.line-editor>button{font-size:var(--text-small);white-space:normal}
.machine-group{min-width:0;border:1px solid var(--c-border);border-radius:var(--r-control);margin-top:var(--gallery-space-n12)}
.history-entry{border-top:1px solid var(--c-border);padding:var(--gallery-space-n12) 0}
.history-entry h3{margin:0 0 var(--gallery-space-n8)}
.history-entry details{margin:var(--gallery-space-n12) 0}
.diff-list{list-style:none;padding:0;display:grid;gap:var(--gallery-space-n8);font-size:var(--text-small)}
.diff-list span{font-weight:var(--weight-semibold)}
.history-entry p{font-size:var(--text-small);overflow-wrap:anywhere}
#pdca-confirm{inset:0;margin:auto;width:680px;max-width:calc(100vw - 24px);height:auto;max-height:85dvh;border:1px solid var(--c-border);border-radius:var(--r-panel);padding:var(--gallery-space-n20)}
#pdca-confirm h2{font-size:18px;margin:0 0 var(--gallery-space-n12)}
#pdca-confirm .flow{position:sticky;bottom:var(--gallery-space-minus20);background:var(--c-surface);padding:var(--gallery-space-n12) 0}
#pdca-confirm-status{white-space:pre-wrap;color:var(--c-accent-ink)}

@media(max-width:1100px){.conditions-layout{grid-template-columns:190px minmax(0,1fr)}
.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:850px){.conditions-layout{grid-template-columns:minmax(0,1fr)}
.condition-nav{position:static;max-height:240px}
.condition-nav a{display:block}
.condition-line{flex-wrap:wrap}
.condition-line input{width:100%;flex-basis:100%}
.conditions-main .panel{padding:var(--gallery-space-n12)}
.rating-panel{padding:var(--gallery-space-n12)}
.line-editor{padding:var(--gallery-space-n8)}
.machine-group{padding:var(--gallery-space-n8)}
.conditions-main{overflow-wrap:anywhere}
}

/* P2-A: พฤติกรรมหน้ารายการใช้ token ชุดเดียวกับ drawer / ฟอร์ม / ตั้งค่า */
body{line-height:var(--line-body)}
button,input,select,textarea{line-height:1.4;min-width:24px}
.toolbar button,.toolbar input,.toolbar select,.preferences button{height:var(--control);padding-block:0}
button:active,a.primary:active{background:var(--c-panel);color:var(--c-text);border-color:var(--c-accent-ink)}
button:disabled,input:disabled,select:disabled,textarea:disabled{background:var(--c-panel);color:var(--c-muted);border-style:dashed;cursor:not-allowed}
input:hover,select:hover,textarea:hover,summary:hover{border-color:var(--c-accent-ink)}
input:invalid:not(:placeholder-shown),[aria-invalid=true]{border-color:var(--c-danger)}
.preferences{display:flex;flex-wrap:wrap;gap:var(--gap);padding:var(--gallery-space-n8) var(--gallery-space-n24);background:var(--c-surface);border-bottom:1px solid var(--c-border)}
.preferences button{font-size:var(--text-small)}
.heading{margin-bottom:var(--gallery-space-n4);min-height:64px;align-items:center}
.heading p{margin-bottom:0}.heading h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.heading>div{min-width:0}
.finder-controls{margin-top:var(--gap)}
#facet-tools{display:flex;flex-wrap:wrap;align-items:start;gap:var(--gap);margin-bottom:var(--gap)}
#facet-home{min-width:0;flex:1}
#facet-panel{display:flex;gap:var(--gallery-space-n8);align-items:start;flex-wrap:nowrap}
.facet,.more-facets{position:relative;min-width:0;font-size:var(--text-small)}
.facet summary,.more-facets>summary,#saved-views>summary{cursor:pointer;min-height:var(--control);border:1px solid var(--c-border-strong);background:var(--c-surface);border-radius:var(--r-control);padding:var(--gallery-space-n4) var(--gallery-space-n8);white-space:nowrap}
.facet[open]>summary{border-color:var(--c-accent-ink);color:var(--c-accent-ink)}
.facet-options{position:absolute;top:100%;left:0;width:260px;max-width:calc(100vw - 48px);padding:var(--panel-padding);z-index:6;background:var(--c-surface);border:1px solid var(--c-border-strong);border-radius:var(--r-panel);box-shadow:0 2px 8px var(--c-shadow)}
.facet-options>label{display:grid;gap:var(--gallery-space-n4)}.facet-options input[type=search]{width:100%}
.facet-choices{max-height:280px;overflow:auto;margin-top:var(--gallery-space-n8)}
.facet-choice{display:flex;align-items:center;gap:var(--gallery-space-n8);min-height:var(--row);cursor:pointer;white-space:normal}
.facet-choice input{min-height:24px;width:24px;flex:none;accent-color:var(--c-accent-ink)}
.facet-choice .n{margin-left:auto;color:var(--c-muted)}
.more-facets>div{position:absolute;right:0;top:100%;z-index:5;background:var(--c-surface);border:1px solid var(--c-border);padding:var(--gap);display:grid;gap:var(--gallery-space-n8);min-width:220px}
.more-facets .facet-options{position:static;width:100%;box-shadow:none}
.view-tools{display:flex;gap:var(--gallery-space-n8);align-items:start;flex-wrap:wrap;font-size:var(--text-small)}
#saved-views{position:relative}.saved-view-list{position:absolute;right:0;min-width:360px;max-width:calc(100vw - 48px);padding:var(--panel-padding);background:var(--c-surface);border:1px solid var(--c-border);z-index:6}
.saved-view{display:flex;gap:var(--gallery-space-n4);flex-wrap:wrap;margin-bottom:var(--gallery-space-n8)}.saved-view input{width:100%}
#active-filters{white-space:normal;flex-wrap:wrap;align-items:center}#active-filters button{font-size:var(--text-small)}
.legacy-filters{margin-bottom:var(--gallery-space-n8);font-size:var(--text-small)}
.legacy-filters>summary{cursor:pointer;min-height:24px}
.mobile-filter-button{display:none}
#filter-dialog{margin:0;max-width:none;max-height:none;width:100vw;height:100dvh;padding:var(--panel-padding);background:var(--c-surface);color:var(--c-text);border:0}
#filter-dialog header{justify-content:space-between}#filter-dialog footer{position:sticky;bottom:0;padding-block:var(--gap);background:var(--c-surface)}
#filter-dialog #facet-panel{display:grid;gap:var(--gap)}
#filter-dialog .facet-options,#filter-dialog .more-facets>div{position:static;width:100%;max-width:none;box-shadow:none}
#filter-dialog-body{min-height:70vh}
.results-table{overflow:auto;max-height:70vh;border:1px solid var(--c-border);border-radius:var(--r-panel)}
.results-table table{margin:0;width:100%;background:var(--c-surface)}
.results-table thead{position:sticky;top:0;z-index:2;background:var(--c-panel)}
.results-table th{padding:var(--gallery-space-n4);text-align:left}.results-table th button{border-color:transparent;background:transparent}
.results-table td{min-height:var(--row);padding:var(--gap)}
.results-table td a{display:inline-block}
.load-controls{display:grid;justify-items:center;padding:var(--panel-padding);gap:var(--gap)}
.motion-contract{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);margin-block:var(--gap);font-size:var(--text-small)}
.motion-contract dt{font-weight:var(--weight-semibold)}.motion-contract dd{margin:0;color:var(--c-muted)}
.panel,.finder-controls{padding:var(--panel-padding)}
.nav-row,.nav-sub a{height:var(--row)}
.skeleton-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.skeleton{height:260px;background:var(--c-panel);border:1px solid var(--c-border);border-radius:var(--r-panel)}
.card[data-featured=true]{grid-column:span 2}
.nav-row[aria-current=page]{box-shadow:inset 2px 0 var(--c-nav-marker)}
@media(max-width:1100px){#facet-tools{display:block}.view-tools{margin-top:var(--gallery-space-n8)}#facet-panel{flex-wrap:wrap}}
@media(max-width:767px){.mobile-filter-button{display:inline-block}#facet-home{display:none}.preferences{padding:var(--gallery-space-n8) var(--gallery-space-n12);gap:var(--gallery-space-n8)}.preferences button{padding-inline:var(--gallery-space-n6);font-size:var(--text-small)}.heading{align-items:start}.heading h1{white-space:normal}.heading .count{display:none}.saved-view-list{left:0;right:auto;min-width:280px}.view-tools{display:inline-flex;margin:0 0 0 var(--gallery-space-n8)}.results-table{max-height:none;overflow:visible;border:0}.results-table table,.results-table tbody,.results-table tr,.results-table td{display:block}.results-table thead{position:static;display:block}.results-table thead tr{display:flex;flex-wrap:wrap}.results-table th{display:block}.results-table tbody tr{border:1px solid var(--c-border);margin-bottom:var(--gap);border-radius:var(--r-panel);padding:var(--gap)}.results-table td{border:0;padding:var(--gallery-space-n4);min-height:24px}.results-table td:before{content:attr(data-label) ' · ';color:var(--c-muted);font-size:var(--text-small)}.card[data-featured=true]{grid-column:auto}.motion-contract{grid-template-columns:1fr}.skeleton-grid{grid-template-columns:1fr}.toolbar{flex-wrap:wrap;white-space:normal}.search{flex-basis:100%}}
@media(pointer:coarse){button,select,input:not([type=checkbox]),summary,.nav-row,.nav-sub a,.drawer-actions a,.primary{min-height:var(--gallery-size-touch)!important}.fav{min-width:var(--gallery-size-touch)}.facet-choice{min-height:var(--gallery-size-touch)}.preferences button{height:var(--gallery-size-touch)}.nav-row,.nav-sub a{height:auto}}
@media(forced-colors:active){body,.side,.top,.preferences,.card,.panel,dialog,.facet-options,.saved-view-list,.badge,button,input,select,textarea{background:Canvas;color:CanvasText;border-color:CanvasText}a{color:LinkText}button[aria-pressed=true],button[aria-selected=true],.primary{background:Highlight;color:HighlightText;border-color:Highlight}.nav-row[aria-current=page]{outline:2px solid Highlight}:focus-visible{outline:3px solid Highlight!important;outline-offset:3px}button:disabled{color:GrayText}.wire i,.skeleton{border:1px solid CanvasText}}

.heading{position:relative}.heading:before{content:"";position:absolute;inset:0;background-image:var(--gallery-effect-grain);opacity:var(--gallery-effect-grain-opacity);pointer-events:none}
[data-theme=contrast] .heading:before{display:none}
@media(forced-colors:active){.heading:before{display:none}}

/* P2-B: สมุดบันทึกหลักฐาน — ลำดับผิวและสถานะจาก Design System */
button,input,select,textarea,h1,code{line-height:var(--line-body)}
:focus-visible{outline:3px solid var(--gallery-state-focus);outline-offset:3px;scroll-margin-block:80px}
.side :focus-visible{outline-color:var(--c-nav-strong)}
.grid{grid-auto-flow:row dense}
.card{box-shadow:var(--gallery-elevation-card)}
.card[data-featured=true]{grid-column:auto;border-radius:var(--gallery-radius-hero);box-shadow:var(--gallery-elevation-hero)}
.card[data-featured=true] .badge.ok{border:1px solid var(--c-ok);font-weight:var(--weight-semibold)}
.card[data-featured=true] h2{font-size:var(--text-title)}
.card:hover,.card:focus-within{border-color:var(--gallery-state-active)}
.chip{border-radius:var(--r-tag);box-shadow:none}
.evidence-date{font-size:var(--text-small);font-variant-numeric:tabular-nums;color:var(--c-muted);margin:0 var(--gap) var(--gallery-space-n8)}
.card-visit{margin:0 var(--gap) var(--gap);align-self:start}
.image-placeholder{display:grid;place-items:center;gap:var(--gallery-space-n4);padding:var(--gap);max-width:100%;text-align:center;overflow-wrap:anywhere;font-size:var(--text-small)}
.fallback-label{display:none}
[data-image-fallback=true] .fallback-label{display:block}
.meta .domain{white-space:normal;overflow:visible}
.card .summary{display:block;overflow:visible}
.module-group{margin-bottom:var(--gallery-space-n24)}
.module-group>h2{font-size:var(--text-title);border-bottom:1px solid var(--c-border);padding-block:var(--gallery-space-n8);position:relative}
.module-group>h2:before,.heading:before{background-image:var(--ds-grain)}
.module-group>h2:before{content:'';position:absolute;inset:0;opacity:var(--gallery-effect-grain-opacity);pointer-events:none}
.header-exit{font-size:var(--text-small);white-space:nowrap}
.page-error{padding:var(--panel-padding);border:1px solid var(--c-danger);border-radius:var(--r-panel)}
.page-error .primary{padding:var(--gallery-space-n8)}
[data-ui-state=hover],button:hover:not(:disabled),.chip:hover:not(:disabled){background:var(--gallery-state-hover)}
[data-ui-state=focus]{outline:3px solid var(--gallery-state-focus);outline-offset:-3px}
[data-ui-state=active],button:active:not(:disabled),[aria-checked=true]{border-color:var(--gallery-state-active);box-shadow:inset 2px 0 var(--gallery-state-active)}
[data-ui-state=loading],[aria-busy=true]:is(button,.chip,.card){background:var(--gallery-state-loading);color:var(--gallery-state-loading-ink);border-style:dashed}
[data-ui-state=empty]{background:var(--gallery-state-empty);color:var(--gallery-state-empty-ink);border-style:dotted}
[data-ui-state=error]{background:var(--gallery-state-error);color:var(--gallery-state-error-ink);border-color:var(--gallery-state-error-ink)}
[data-ui-state=success]{background:var(--gallery-state-success);color:var(--gallery-state-success-ink);border-color:var(--gallery-state-success-ink)}
[data-ui-state=disabled],button:disabled,[aria-disabled=true]{background:var(--gallery-state-disabled);color:var(--gallery-state-disabled-ink);border-style:dashed;cursor:not-allowed}
.primary:hover:not(:disabled){background:var(--gallery-state-hover);color:var(--gallery-state-active)}
.card[data-ui-state=success] .card-link{color:var(--c-text)}
.rating-stamp{animation:rating-stamp var(--motion-fast) var(--motion-smooth)}
@keyframes rating-stamp{from{transform:scale(.9)}to{transform:scale(1)}}
#rating-save-reason{font-size:var(--text-small)}
.condition-nav a[aria-current=page]{box-shadow:inset 2px 0 var(--c-nav-marker)}
@media(min-width:1024px){#results>.grid>.card[data-featured=true]{grid-column:span 2}.card[data-featured=true] .thumb{aspect-ratio:2.6}.card[data-featured=true] .card-body{gap:var(--gallery-space-n8)}}
@media(max-width:1000px){.breadcrumb{display:block;white-space:normal}.top{height:auto;min-height:48px;flex-wrap:wrap;padding-block:var(--gallery-space-n4)}#health{max-width:100%;margin-left:0}.heading h1{white-space:normal;overflow:visible}}
@media(max-width:767px){.top #health{display:none}.top{gap:var(--gallery-space-n8)}.header-exit{margin-left:auto}.heading{min-height:0}.heading p{display:none}.preferences{gap:var(--gallery-space-n4)}.toolbar{gap:var(--gallery-space-n6);margin-bottom:var(--gallery-space-n8);padding-bottom:0}.toolbar .search{flex-basis:100%}.view-tools{gap:var(--gallery-space-n4);margin:0}#facet-tools{display:flex;gap:var(--gallery-space-n4);align-items:center}.thumb{aspect-ratio:3}.card[data-featured=true] .thumb{aspect-ratio:2.8}.card-body{gap:var(--gallery-space-n4)}.card[data-featured=true] h2{font-size:var(--text-body)}.chips{flex-wrap:wrap;white-space:normal;padding-bottom:var(--gallery-space-n6)}.chip{white-space:normal}#saved-views .saved-view-list{position:fixed;left:var(--gap);right:var(--gap);min-width:0}.data-table{table-layout:fixed}.data-table td,.data-table th{overflow-wrap:anywhere}.key-value{grid-template-columns:1fr}.heading{margin-bottom:var(--gallery-space-n8)}}
@media(pointer:coarse){a,button,summary,[role=radio],input[type=checkbox]{min-height:44px;min-width:44px}.card-visit{display:inline-flex;align-items:center}.facet-choice input{width:44px;height:44px}.chip{min-width:44px}}
@media(prefers-reduced-motion:reduce){.rating-stamp{animation:none}}
@media(forced-colors:active){[data-ui-state]{border-color:CanvasText}.module-group>h2:before{display:none}}
@media(max-width:767px){#results .card .summary,#results .card[data-kind=site] .card-body>.tags:last-child,#results .card[data-kind=ref] .card-body>.tags:last-child{display:none}#rating-filters .chip{padding-inline:var(--gallery-space-n6)}}
@media(pointer:coarse){a{min-height:44px!important}}
@media(forced-colors:active){pre,pre *{color:CanvasText!important;background:Canvas!important}}

/* รอบแก้ B1/D1/D4: ใช้ token ที่มีอยู่ใน Design System */
#list-controls{display:contents}
#display-toggle{display:inline-flex;align-items:center;white-space:nowrap}
#preferences-home:empty{display:none}
#display-dialog{inset:0;margin:auto;width:min(480px,100%);height:fit-content;max-height:100dvh;padding:var(--panel-padding);border:1px solid var(--c-border);border-radius:var(--r-panel)}
#display-dialog header{justify-content:space-between;align-items:center}
#display-dialog .preferences{padding:var(--gallery-space-n12) 0;border:0;gap:var(--gap)}
#display-dialog .seg{flex-wrap:wrap}
.preview{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:var(--gallery-space-n8);height:auto;min-height:190px;padding:var(--gallery-space-n12) var(--gallery-space-n12) calc(var(--gallery-space-n32) + var(--gallery-space-n24))}
.sketch-meta{display:flex;flex-wrap:wrap;gap:var(--gallery-space-n4);padding-right:var(--gallery-space-n38);font-size:var(--text-small);line-height:var(--line-body)}
.sketch-count{margin-left:auto;white-space:nowrap}
.sketch-label{position:absolute;left:var(--gallery-space-n8);bottom:var(--gallery-space-n8);max-width:calc(100% - var(--gallery-space-n16));white-space:normal;text-align:left;line-height:var(--line-body)}
.hero-award{display:none}
.card[data-featured=true] [data-image-fallback=true]{aspect-ratio:auto;min-height:190px;padding-top:calc(var(--gallery-space-n32) + var(--gallery-space-n12))}
.card[data-featured=true] [data-image-fallback=true]:before{content:"";position:absolute;inset:0;background-image:var(--ds-grain);opacity:var(--gallery-effect-grain-opacity);pointer-events:none}
.card[data-featured=true] [data-image-fallback=true] .image-placeholder{position:relative}
.card[data-featured=true] [data-image-fallback=true] .hero-award{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--gallery-space-n8)}
.card[data-featured=true] .hero-award .badge{font-size:var(--text-title);line-height:var(--line-body);white-space:normal}
.card[data-featured=true] [data-image-fallback=true] .initials{font-size:var(--text-small)}
@media(max-width:1024px){
 .app{display:block}
 .side{position:fixed;left:0;top:0;width:280px;max-width:90vw;z-index:30;visibility:hidden;height:100dvh;box-shadow:6px 0 30px var(--c-shadow)}
 .side.open{visibility:visible}
 .mobile-only{display:inline-flex;align-items:center;justify-content:center}
 #menu-close{margin-left:auto}
 #display-toggle{display:inline-flex;align-items:center;font-size:var(--text-small);white-space:nowrap;padding-inline:var(--gallery-space-n6)}
 .top{flex-wrap:nowrap;gap:var(--gallery-space-n6);padding:var(--gallery-space-n4) var(--gallery-space-n12);min-height:52px}
 .top #health{display:none}
 .breadcrumb{font-size:var(--text-small);white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
 .header-exit{margin-left:auto}
 #preferences-home:empty{display:none}
 .mobile-filter-button{display:inline-block;white-space:nowrap}
 #facet-home{display:none}
 #facet-tools{margin:0}
 .toolbar{flex-wrap:nowrap;overflow:visible;margin-bottom:var(--gallery-space-n8);gap:var(--gallery-space-n8);padding-block:var(--gallery-space-n4)}
 .toolbar .search{flex:1;min-width:0}
 .search input{min-width:0;width:100%}
 #filter-secondary-controls{display:grid;gap:var(--gap)}
 #filter-secondary-controls #list-controls{display:flex;flex-wrap:wrap;gap:var(--gallery-space-n8)}
 #filter-dialog-body{min-height:0}
 #filter-dialog footer{position:static;margin-top:var(--gap)}
 .heading{min-height:0;margin-bottom:var(--gallery-space-n8)}
 .heading p{display:none}
 .heading h1{white-space:normal}
}

@media(forced-colors:active){.card[data-featured=true] [data-image-fallback=true]:before{display:none}}

/* เปลี่ยนธีมทันทีเพื่อไม่ให้สีตัวอักษรใหม่ทับพื้นหลังเก่าระหว่าง transition */
.preferences button{transition:none}

@media(max-width:767px){#results .grid{grid-template-columns:minmax(0,1fr)}}

/* P3: ข้อเท็จจริงและตารางใช้สี/ฟอนต์จาก Design System ชุดเดิม */
.evidence-facts{display:flex;flex-wrap:wrap;gap:var(--gallery-space-n4) var(--gallery-space-n8);font-size:var(--text-small);color:var(--c-muted);line-height:var(--line-body)}
.card .evidence-facts{margin:0 var(--gap) var(--gallery-space-n8)}
.evidence-facts time,[data-award-evidence] time,.script-metadata time,.numeric{font-variant-numeric:tabular-nums}
.card-ai-source{display:inline-flex;margin:0 var(--gap) var(--gallery-space-n8);padding:var(--gallery-space-n4);min-height:44px;align-items:center}
.candidate-panel{border:1px solid var(--c-border);border-radius:var(--r-panel);padding:var(--gap);margin-block:var(--gap);overflow-wrap:anywhere}
.candidate-rate{display:inline-flex;min-height:44px;align-items:center;padding:var(--gallery-space-n6)}
.schedule-table select{width:100%;min-width:0;max-width:100%;white-space:normal}
.schedule-table th:first-child{width:20%}
.schedule-table caption{padding-block:var(--gallery-space-n8);text-align:left}
.status-history{margin-top:var(--gallery-space-n8)}

/* P2-C: เก็บชื่อหน้าปัจจุบันและพื้นที่ให้ปุ่มสัมผัสบนจอแคบ */
@media(max-width:1024px){.crumb-root{display:none}.breadcrumb{flex:1}.top>button,.header-exit{flex-shrink:0}}

@media(min-width:1025px){main{padding-top:var(--gallery-space-n8)}.toolbar{padding-top:var(--gallery-space-n4)}}
@media(forced-colors:active){.badge{border:1px solid CanvasText}}

/* ใช้คู่สีระบบโดยตรง ป้องกันแผ่นหลังตัวอักษรของ forced-colors ทับข้อความที่เลือก */
@media(forced-colors:active){button{transition:none!important}button[aria-pressed=true],button[aria-selected=true],.primary{forced-color-adjust:none;background:Highlight!important;color:HighlightText!important;border-color:Highlight}}

/* P4: กราฟใช้ token A18 และมีตารางตัวเลขคู่กันทุกชุด */
/* D10: รวมสถานะไว้ในแถบบน ไม่สร้างแถวเหนือรายการ */
#bot-status { display: contents; }
#backup-status:empty, [data-read-only="true"] #backup-status { display: none; }
.metrics-page { display: grid; gap: var(--gallery-space-n16); min-width: 0; }
.metrics-section { min-width: 0; }
.metrics-bars { display: grid; gap: var(--gallery-space-n12); margin-block: var(--gallery-space-n16); }
.metrics-bar-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) 5em; align-items: center; gap: var(--gallery-space-n8); }
.metrics-track { border: 1px solid var(--c-border); min-width: 0; }
.metrics-bar { height: 1.4em; background: var(--c-chart-purple); border: 1px solid var(--c-text); }
.metrics-line { width: 100%; max-height: 15rem; overflow: visible; }
.metrics-line polyline { stroke: var(--c-chart-purple); stroke-width: 3; fill: none; }
.metrics-line circle { fill: var(--c-chart-mint); stroke: var(--c-text); stroke-width: 2; }
.metrics-line text { fill: var(--c-text); font-size: 13px; }
.metrics-axis { stroke: var(--c-border); fill: none; }
.metrics-table-wrap { overflow: auto; max-width: 100%; margin-block: var(--gallery-space-n16); }
.metrics-table { width: 100%; font-variant-numeric: tabular-nums; }
.metrics-table caption { text-align: start; padding-block: var(--gallery-space-n8); }
.metrics-table th, .metrics-table td { white-space: normal; overflow-wrap: anywhere; }
.metrics-bar-row b { font-variant-numeric: tabular-nums; }
@media (forced-colors: active) {
 .metrics-bar { background: Highlight; border-color: CanvasText; forced-color-adjust: none; }
 .metrics-line polyline, .metrics-line circle { stroke: CanvasText; }
 .metrics-line circle, .metrics-line text { fill: CanvasText; }
}
/* WO-G: ใช้ระยะ สี และตัวอักษรจาก token ของระบบเดิม */
.card-rate { margin: var(--gap); align-self: start; }
.weekly-card-preview { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; }
.learning-table td, .learning-table th { overflow-wrap: anywhere; vertical-align: top; }
#learning-holdout-result code, #editor-holdout-result code { overflow-wrap: anywhere; }
#learning-chip { white-space: normal; }

.learning-table { inline-size: 100%; table-layout: auto; }
.learning-table .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 767px) {
 .learning-table, .learning-table tbody, .learning-table tr, .learning-table td, .learning-table th { display: block; }
 .learning-table thead { display: none; }
 .learning-table caption { display: block; text-align: start; }
 .learning-table tr { margin-block: var(--gallery-space-n12); }
 .learning-table [data-label]::before { content: attr(data-label) ' · '; color: var(--c-muted); font-weight: var(--weight-semibold); }
}
.top:has(#learning-chip) { flex-wrap: wrap; }
#learning-chip { flex-shrink: 0; }

/* WO-D: ค้นประโยคใช้ token และขนาดเป้ากดเดิม */
.query-search { margin-block: var(--gallery-space-n8); }
.query-search p:empty, .query-search div:empty { display: none; }
.query-search p { margin-block: var(--gallery-space-n4); }
.query-search .flow { flex-wrap: wrap; }
.query-search button { white-space: normal; text-align: start; overflow-wrap: anywhere; }
.query-reasons { padding: var(--gallery-space-n8); margin: 0; color: var(--c-text); background: var(--c-surface); overflow-wrap: anywhere; }
/* WO-C: ใช้ token เดิมและให้รายการต้นทางตัดบรรทัดได้ */
.bridge-technique small,#module-bridge-details small{display:block;overflow-wrap:anywhere;color:var(--c-muted)}
.bridge-technique li{margin-block:var(--gallery-space-n10)}
.bridge-technique li a{display:block}
@media(max-width:767px){.bridge-technique li a,.bridge-technique summary{min-height:var(--gallery-size-touch)}}
.demo-parameters{display:flex;flex-wrap:wrap;gap:var(--gallery-space-n12);border:1px solid var(--c-border);padding:var(--gallery-space-n12);margin-block:var(--gallery-space-n12)}
.demo-parameters label{display:flex;align-items:center;gap:var(--gallery-space-n8)}
#engine-dialog{max-width:min(90vw,48rem);max-height:90vh;overflow:auto;padding:var(--panel-padding);background:var(--c-surface);color:var(--c-text);border:1px solid var(--c-border);border-radius:var(--r-panel)}
#engine-dialog pre{white-space:pre-wrap;overflow-wrap:anywhere}
.site-bridge .tabbar,.team-evidence .tabbar{flex-wrap:wrap}