/* Dimension lookup: readable values, room filters, and device-local bookmarks. */
#dimensions { --size-ink:#30352e; --size-muted:#655f54; --size-green:#344f40; --size-line:#d6d2c7; --size-paper:#fbf9f5; color:var(--size-ink) }
#dimensions [hidden] { display:none!important }
#dimensions :is(.size-section,.size-lookup,.size-inside,.size-mentor,.size-sources) { max-width:900px; margin:56px auto; min-width:0; scroll-margin-top:120px }
#dimensions .size-kicker { display:block; font-size:.75rem; font-weight:600; line-height:1.5; letter-spacing:.09em; color:#786c55 }
#dimensions .size-hero { padding:38px 0 30px; border:0; border-bottom:1px solid var(--size-line); background:none }
#dimensions .size-hero h1 { font-family:'Noto Serif TC','Songti TC',serif; font-size:clamp(32px,4vw,48px); font-weight:500; line-height:1.4; letter-spacing:.02em; margin:14px 0 22px }
#dimensions .size-hero > p { font-size:1rem; line-height:1.8; max-width:42em; margin:0 0 13px; color:var(--size-muted) }
#dimensions .size-hero > .size-hero-point { color:var(--size-ink); font-weight:500 }
#dimensions .size-hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:25px }
#dimensions .size-hero-actions a,#dimensions .size-search button { min-height:46px; display:inline-flex; align-items:center; justify-content:center; text-align:center; padding:11px 18px; border:1px solid var(--size-green); border-radius:8px; background:var(--size-green); color:white; line-height:1.5; font-size:.9375rem; text-decoration:none; box-sizing:border-box }
#dimensions .size-hero-actions a + a { background:transparent; color:var(--size-green) }
#dimensions :is(.size-section,.size-lookup,.size-inside,.size-mentor) > h2 { font-family:'Noto Serif TC','Songti TC',serif; font-size:clamp(25px,3vw,34px); font-weight:500; line-height:1.45; margin:10px 0 13px; overflow-wrap:anywhere }
#dimensions .size-section-lead { font-size:1rem; line-height:1.8; color:var(--size-muted); margin:0 0 22px; max-width:46em }
#dimensions .size-search { margin:22px 0; padding:0; border:0; background:none }
#dimensions .size-search label { display:block; font-size:.875rem; font-weight:600; margin:0 0 7px }
#dimensions .size-search > div { display:flex; gap:9px; min-width:0 }
#dimensions .size-search input { min-width:0; width:100%; flex:1; min-height:48px; border:1px solid #aca794; border-radius:7px; background:#fff; color:var(--size-ink); font:inherit; font-size:1rem; padding:12px 14px; box-sizing:border-box }
#dimensions .size-search button { flex:none; font:inherit; font-size:.9375rem; cursor:pointer }
#dimensions .size-search-results { border:1px solid #c2cdbf; background:#f5f7f2; padding:16px; margin:0 0 24px; min-width:0 }
#dimensions .size-search-results p { margin:0 0 9px; font-size:.875rem; color:#4e6250; line-height:1.6 }
#dimensions .size-search-results ul,#dimensions #size-saved-list { list-style:none; padding:0; margin:0 }
#dimensions .size-search-results li + li { border-top:1px solid var(--size-line) }
#dimensions .size-result-link { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:5px 14px; padding:12px 0; color:var(--size-ink); text-decoration:none; min-width:0 }
#dimensions .size-result-link strong { font-size:1rem; font-weight:600; overflow-wrap:anywhere }
#dimensions .size-result-link span { font-size:.9375rem; color:#514a3a; font-variant-numeric:tabular-nums; align-self:center; text-align:right }
#dimensions .size-result-link small { grid-column:1 / -1; font-size:.75rem; color:var(--size-muted) }
#dimensions .size-quick-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:24px 0 }
#dimensions .size-quick-links a { display:grid; grid-template-columns:26px minmax(0,1fr); gap:6px 10px; background:#ebe9e0; border:1px solid var(--size-line); padding:19px 18px; color:var(--size-ink); text-decoration:none; min-width:0 }
#dimensions .size-quick-links a > span { grid-row:1 / 3; font:17px/1.7 Georgia,serif; color:#8a775b }
#dimensions .size-quick-links strong { font-size:1.0625rem; font-weight:600; line-height:1.5; overflow-wrap:anywhere }
#dimensions .size-quick-links small { font-size:.875rem; line-height:1.6; color:var(--size-muted) }
#dimensions .size-quick-links a:hover { border-color:#899781; background:#e4e9df }
#dimensions .size-reference-note { font-size:.875rem; color:var(--size-muted); line-height:1.75; margin:0 0 14px }
#dimensions .size-copy-tools { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin:18px 0 8px }
#dimensions .size-copy-tools > button { min-height:46px; padding:11px 18px; border:1px solid var(--size-green); border-radius:8px; background:var(--size-green); color:#fff; font:inherit; font-size:.9375rem; cursor:pointer }
#dimensions .size-copy-tools > button:disabled { opacity:.65; cursor:wait }
#dimensions #dimensions-copy-status { margin:0; color:#4e6250; font-size:.875rem; line-height:1.65 }
#dimensions #dimensions-copy-fallback:not([hidden]) { flex-basis:100%; width:100%; min-height:180px; padding:12px; border:1px solid var(--size-line); background:#fffefa; color:var(--size-ink); font:inherit; white-space:pre; overflow:auto; box-sizing:border-box }
#dimensions .size-notes-shortcut { display:inline-flex; align-items:center; gap:10px; min-height:44px; color:var(--size-green); font-size:.9375rem; font-weight:500 }
#dimensions [data-size-count] { border:1px solid #a4b29e; border-radius:20px; min-width:22px; text-align:center; font-size:.75rem; line-height:1.6 }
#dimensions .size-card-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px }
#dimensions .size-card { min-width:0; border:1px solid var(--size-line); border-radius:3px; background:#fffefa; padding:21px 20px 16px; scroll-margin-top:120px; box-sizing:border-box }
#dimensions .size-card:focus { outline:2px solid #66816a; outline-offset:4px }
#dimensions .size-card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; min-width:0 }
#dimensions .size-card h3 { font-size:1.0625rem; font-weight:600; line-height:1.55; margin:0; overflow-wrap:anywhere }
#dimensions .size-save { flex:none; display:inline-flex; align-items:center; justify-content:center; gap:5px; font:inherit; font-size:.875rem; line-height:1.4; color:#6b6558; border:1px solid #c5c1b5; border-radius:6px; background:transparent; cursor:pointer; min-height:42px; padding:8px 10px; margin:-4px 0 0 }
#dimensions .size-save > span:first-child { font-size:1.125rem; line-height:1 }
#dimensions .size-save[aria-pressed=true] { background:#e8eee3; border-color:#819676; color:#314e35 }
#dimensions .size-value { display:flex; flex-wrap:wrap; align-items:baseline; gap:7px; margin:18px 0 12px; color:#635035; font-variant-numeric:tabular-nums; line-height:1.3 }
#dimensions .size-value strong { font:500 clamp(28px,3vw,36px)/1.3 Georgia,'Noto Serif TC',serif; overflow-wrap:anywhere }
#dimensions .size-value > span { font-size:.875rem; color:#726957 }
#dimensions .size-life { margin:0 0 14px; font-size:1rem; line-height:1.75; color:#4f5047 }
#dimensions .size-detail { border-top:1px solid #e0ddd4; margin:0; padding:0; background:transparent }
#dimensions .size-detail summary { min-height:44px; box-sizing:border-box; padding:12px 0 3px; color:#656756; font-size:.875rem; line-height:1.55; cursor:pointer; overflow-wrap:anywhere }
#dimensions .size-detail p { font-size:.9375rem; line-height:1.8; margin:12px 0 4px; color:var(--size-muted) }
#dimensions .size-life-note { border-left:3px solid #8f9c83; margin:24px 0 0; padding:19px 22px; background:#eaf0e5 }
#dimensions .size-life-note h3 { font-size:1.125rem; margin:0 0 9px }
#dimensions .size-life-note p { font-size:.9375rem; line-height:1.8; color:#56604f; margin:0 0 12px }
#dimensions .size-life-note strong { font-size:1rem; font-weight:600 }
#dimensions .size-choice-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; margin:22px 0 }
#dimensions .size-choice-grid button { min-width:0; min-height:48px; padding:9px 8px; border:1px solid #b8b3a4; border-radius:7px; background:var(--size-paper); color:#514b40; cursor:pointer; font:inherit; font-size:.9375rem; line-height:1.5 }
#dimensions .size-choice-grid button[aria-pressed=true] { background:var(--size-green); color:#fff; border-color:var(--size-green) }
#dimensions .size-room-title { display:flex; align-items:baseline; gap:14px; font-size:1.25rem; line-height:1.5; margin:22px 0 14px }
#dimensions .size-room-title small { font-size:.8125rem; color:var(--size-muted); font-weight:400 }
#dimensions .size-more { margin:16px 0 0; border:0; padding:0 }
#dimensions .size-more > summary { cursor:pointer; padding:12px 0; min-height:44px; font-size:.9375rem; font-weight:500; color:var(--size-green) }
#dimensions .size-more[open] > summary { margin-bottom:10px }
#dimensions .size-inside { background:#ebe8de; border-top:1px solid #9a8b6e; border-bottom:1px solid #9a8b6e; padding:30px; box-sizing:border-box }
#dimensions .size-inside > p { font-size:1rem; line-height:1.8; margin:20px 0 0 }
#dimensions .size-section-diagram { margin:25px 0 0; min-width:0 }
#dimensions .size-outside-label { border-top:1px solid #8d7e64; border-inline:1px solid #8d7e64; height:25px; text-align:center; font-size:.875rem; line-height:1.4; padding-top:5px; margin-bottom:8px }
#dimensions .size-cutaway { display:grid; grid-template-columns:minmax(40px,1fr) minmax(0,6fr) minmax(40px,1fr); border:1px solid #b7a992; min-height:114px }
#dimensions .size-cutaway > span { display:flex; align-items:center; justify-content:center; text-align:center; background:#c4b8a3; color:#453f35; padding:8px 3px; font-size:.8125rem; line-height:1.5 }
#dimensions .size-cutaway > strong { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; background:#fbf9f2; text-align:center; font-size:1.0625rem; padding:12px; line-height:1.5; font-weight:600 }
#dimensions .size-cutaway small { font-size:.8125rem; font-weight:400; color:#6a6456 }
#dimensions .size-operating { border:1px dashed #aca18b; padding:12px; margin-top:12px; font-size:.875rem; text-align:center; line-height:1.6 }
#dimensions .size-section-diagram figcaption { font-size:.75rem; margin-top:9px; color:#746c5c }
#dimensions .size-original-diagram { margin:22px 0 0; border-top:1px solid var(--size-line); padding:0; min-width:0 }
#dimensions .size-original-diagram > summary { min-height:48px; padding:14px 0; box-sizing:border-box; font-size:.9375rem; color:var(--size-green); cursor:pointer }
#dimensions .size-original-diagram :is(.dimension-detail,.dimension-diagram) { max-width:100%; min-width:0; margin:0; box-sizing:border-box; overflow-x:auto }
#dimensions .size-original-diagram svg { display:block; width:100%; min-width:540px; height:auto }
#dimensions .size-original-diagram :is(p,figcaption) { min-width:0; font-size:.875rem; line-height:1.75 }
#dimensions .size-height-choices { grid-template-columns:repeat(4,minmax(0,1fr)) }
#dimensions .size-trial { border-left:3px solid #9a8868; margin:20px 0 0; padding:16px 20px; background:#f0ece1 }
#dimensions .size-trial strong { font-size:1rem }
#dimensions .size-trial p { font-size:.9375rem; line-height:1.8; margin:8px 0 0; color:var(--size-muted) }
#dimensions .size-measure-steps { padding:0; list-style:none; margin:25px 0 }
#dimensions .size-measure-steps li { display:grid; grid-template-columns:32px minmax(0,1fr); gap:17px; border-top:1px solid var(--size-line); padding:19px 0; margin:0 }
#dimensions .size-measure-steps li > span { font:23px/1.55 Georgia,serif; color:#8b785b }
#dimensions .size-measure-steps h3 { font-size:1.125rem; font-weight:600; margin:0 0 7px; line-height:1.5 }
#dimensions .size-measure-steps p { font-size:1rem; line-height:1.8; margin:0; color:var(--size-muted) }
#dimensions .size-pullquote { font-size:1.125rem; line-height:1.8; color:var(--size-green); border-top:1px solid #a6ad9c; padding-top:20px }
#dimensions .size-pitfall { background:#f2f0e9 }
#dimensions .size-pitfall h3 > span { font:18px/1.5 Georgia,serif; color:#8b795b; margin-right:12px }
#dimensions .size-pitfall .size-life { margin-top:15px }
#dimensions .size-notes { border-block:1px solid #a6b39d; padding:30px 0 }
#dimensions #size-save-status { font-size:.875rem; color:#4e674e; line-height:1.6 }
#dimensions #size-save-status:empty { display:none }
#dimensions #size-saved-list li { display:flex; gap:14px; justify-content:space-between; align-items:center; border-top:1px solid var(--size-line); padding:4px 0; min-width:0 }
#dimensions #size-saved-list .size-result-link { flex:1; min-width:0 }
#dimensions #size-saved-list button { min-height:44px; padding:8px 10px; flex:none; font:inherit; font-size:.875rem; color:#625c4f; background:transparent; border:1px solid #bbb4a4; border-radius:5px; cursor:pointer }
#dimensions #size-saved-empty { font-size:.9375rem; line-height:1.8; color:var(--size-muted); margin:0 }
#dimensions .size-mentor { padding:20px 0; max-width:680px }
#dimensions .size-mentor > p { font-size:1.0625rem; line-height:1.9; color:#595b50; margin:20px 0 0 }
#dimensions .size-back { display:inline-flex; color:var(--size-green); margin-top:15px; text-decoration:underline; text-underline-offset:4px }
#dimensions .size-sources { margin:30px auto; border-top:1px solid var(--size-line); padding:15px 0; color:var(--size-muted) }
#dimensions .size-sources summary { font-size:.875rem; min-height:44px; cursor:pointer }
#dimensions .size-sources p,#dimensions .size-sources a { font-size:.875rem; line-height:1.8 }
#dimensions :is(a,button,input,summary):focus-visible { outline:2px solid #526f50; outline-offset:3px }
#dimensions .size-personal { max-width:900px; margin:48px auto 62px; padding:clamp(24px,4vw,42px); border:1px solid var(--size-line); border-radius:18px; background:#fff; box-shadow:0 20px 55px rgba(47,58,48,.07); box-sizing:border-box; scroll-margin-top:120px }
#dimensions .size-personal-heading { max-width:650px; margin-bottom:28px }
#dimensions .size-personal-heading h2 { font-family:'Noto Serif TC','Songti TC',serif; font-size:clamp(25px,3vw,34px); font-weight:500; line-height:1.45; margin:9px 0 10px }
#dimensions .size-personal-heading p { color:var(--size-muted); line-height:1.8; margin:0 }
#dimensions .size-profile { display:grid; grid-template-columns:minmax(220px,.8fr) minmax(0,1.4fr); gap:26px 34px; align-items:start; padding:22px; border-radius:14px; background:#f5f6f1 }
#dimensions .size-profile > label > span:first-child,#dimensions .size-profile legend { display:block; margin:0 0 8px; color:var(--size-ink); font-size:.875rem; font-weight:600 }
#dimensions .size-input { position:relative; display:block }
#dimensions .size-input input { width:100%; min-height:52px; padding:11px 52px 11px 14px; border:1px solid #aaa897; border-radius:9px; background:#fff; color:var(--size-ink); font:inherit; font-size:1.0625rem; box-sizing:border-box }
#dimensions .size-input b { position:absolute; inset:0 14px 0 auto; display:flex; align-items:center; color:var(--size-muted); font-size:.8125rem; font-weight:500; pointer-events:none }
#dimensions #size-height-help { grid-column:1; margin:-19px 0 0; color:var(--size-muted); font-size:.75rem; line-height:1.6 }
#dimensions .size-profile fieldset { grid-column:2; grid-row:1 / 3; min-width:0; margin:0; padding:0; border:0 }
#dimensions .size-family-tags { display:flex; flex-wrap:wrap; gap:9px }
#dimensions .size-family-tags input { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
#dimensions .size-family-tags span { display:inline-flex; align-items:center; min-height:46px; padding:8px 16px; border:1px solid #aaa897; border-radius:999px; background:#fff; color:#514b40; font-size:.875rem; font-weight:500; cursor:pointer; box-sizing:border-box; transition:.16s ease }
#dimensions .size-family-tags input:checked + span { border-color:var(--size-green); background:var(--size-green); color:#fff }
#dimensions .size-family-tags input:focus-visible + span { outline:2px solid #526f50; outline-offset:3px }
#dimensions .size-dynamic-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:18px }
#dimensions .size-dynamic-card { display:flex; flex-direction:column; min-width:0; min-height:300px; padding:24px; border:1px solid var(--size-line); border-radius:14px; background:#fffefa; box-sizing:border-box }
#dimensions .size-dynamic-top { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:28px }
#dimensions .size-dynamic-top span { display:block; margin-bottom:5px; color:#66765e; font-size:.6875rem; font-weight:700; letter-spacing:.16em }
#dimensions .size-dynamic-top h3 { margin:0; font-size:1.25rem; line-height:1.5 }
#dimensions .size-dynamic-top em { flex:none; padding:5px 9px; border-radius:999px; background:#edf1e9; color:#48604b; font-size:.6875rem; font-style:normal; font-weight:600 }
#dimensions .size-dynamic-label { margin:0; color:var(--size-muted); font-size:.8125rem }
#dimensions .size-dynamic-value { display:flex; align-items:baseline; gap:7px; margin:7px 0 14px; color:var(--size-green) }
#dimensions .size-dynamic-value strong { font:500 clamp(34px,4vw,44px)/1.2 Georgia,'Noto Serif TC',serif }
#dimensions .size-dynamic-value span { font-size:1rem }
#dimensions .size-dynamic-card .size-life { min-height:56px }
#dimensions .size-dynamic-card .size-life.is-emphasis { color:#315d39; font-weight:700 }
#dimensions .size-dynamic-save { display:flex; justify-content:flex-end; margin-top:auto; padding-top:18px }
#dimensions .size-summary { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:22px; align-items:center; margin-top:18px; padding:25px; border-radius:14px; background:#2f4335; color:#fff }
#dimensions .size-summary h3 { margin:6px 0; font-size:1.25rem; line-height:1.5 }
#dimensions .size-summary > div > p { margin:0; color:#dce4dc; font-size:.875rem; line-height:1.7 }
#dimensions .size-summary > button,#dimensions .size-summary-result button { min-height:48px; padding:10px 18px; border:1px solid #fff; border-radius:999px; background:#fff; color:#2f4335; font:inherit; font-size:.875rem; font-weight:600; cursor:pointer }
#dimensions #size-summary-result { grid-column:1 / -1; padding-top:22px; border-top:1px solid rgba(255,255,255,.22) }
#dimensions #size-summary-result label { display:block; margin-bottom:8px; font-size:.875rem; font-weight:600 }
#dimensions #size-consult-summary { width:100%; min-height:180px; padding:14px; border:1px solid rgba(255,255,255,.35); border-radius:10px; background:rgba(255,255,255,.1); color:#fff; font:inherit; font-size:.875rem; line-height:1.75; box-sizing:border-box; resize:vertical }
#dimensions #size-summary-result > div { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:12px }
#dimensions #size-summary-result a { display:inline-flex; align-items:center; min-height:48px; padding:10px 18px; border:1px solid rgba(255,255,255,.65); border-radius:999px; color:#fff; font-size:.875rem; font-weight:600; text-decoration:none; box-sizing:border-box }
#dimensions #size-summary-status { margin:10px 0 0; color:#d7e5d6; font-size:.8125rem }
#dimensions #size-summary-result small { display:block; margin-top:8px; color:#c5d0c5; line-height:1.6 }
@media(max-width:700px) {
 #dimensions :is(.size-section,.size-lookup,.size-inside,.size-mentor,.size-sources) { margin:42px 0; scroll-margin-top:95px }
 #dimensions .size-hero { padding:29px 0 24px }
 #dimensions .size-hero h1 { font-size:34px; margin-bottom:19px }
 #dimensions .size-hero-actions { display:grid; gap:9px }
 #dimensions .size-hero-actions a { width:100% }
 #dimensions .size-card-grid { grid-template-columns:minmax(0,1fr); gap:12px }
 #dimensions .size-card { padding:19px 17px 14px; scroll-margin-top:95px }
 #dimensions .size-quick-links { gap:9px }
 #dimensions .size-quick-links a { padding:16px 12px; grid-template-columns:20px minmax(0,1fr); gap:4px 6px }
 #dimensions .size-quick-links strong { font-size:1rem }
 #dimensions .size-choice-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px }
 #dimensions .size-height-choices { grid-template-columns:repeat(2,minmax(0,1fr)) }
 #dimensions .size-choice-grid button { font-size:.875rem }
 #dimensions .size-inside { padding:24px 18px }
 #dimensions .size-value strong { font-size:32px }
 #dimensions .size-notes { padding:25px 0 }
 #dimensions .size-personal { margin:36px 0 46px; padding:23px 16px; border-radius:13px }
 #dimensions .size-profile { grid-template-columns:minmax(0,1fr); gap:18px; padding:18px 14px }
 #dimensions #size-height-help { grid-column:auto; margin:-11px 0 0 }
 #dimensions .size-profile fieldset { grid-column:auto; grid-row:auto }
 #dimensions .size-family-tags { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)) }
 #dimensions .size-family-tags span { justify-content:center; width:100%; padding-inline:10px }
 #dimensions .size-dynamic-grid { grid-template-columns:minmax(0,1fr) }
 #dimensions .size-dynamic-card { min-height:280px; padding:20px 17px }
 #dimensions .size-summary { grid-template-columns:minmax(0,1fr); padding:22px 17px }
 #dimensions .size-summary > button { width:100% }
 #dimensions #size-summary-result > div { display:grid }
 #dimensions #size-summary-result :is(button,a) { justify-content:center; width:100% }
}
@media(max-width:380px) {
 #dimensions .size-quick-links a { grid-template-columns:minmax(0,1fr) }
 #dimensions .size-quick-links a > span { grid-row:auto }
 #dimensions .size-card-top { gap:8px }
 #dimensions .size-save { padding:8px 7px; font-size:.875rem }
 #dimensions .size-result-link { grid-template-columns:minmax(0,1fr) }
 #dimensions .size-result-link span { text-align:left }
 #dimensions .size-inside { padding-inline:14px }
}
@media(prefers-reduced-motion:reduce) { #dimensions * { scroll-behavior:auto!important; animation:none!important; transition:none!important } }