/* 快速查答（answers.mjs）：深色漆面上一列列象牙色問題牌，預設靜止；展開只換內容，不做進場動畫。 */
.ans-view {
  position: fixed; inset: var(--mast, 52px) 0 0 0; z-index: 5; overflow-y: auto; display: none;
  background: radial-gradient(ellipse at 50% -10%, #23262f, #0e1016 70%);
  color: var(--ivory-hi, #FADEBF);
}
body[data-view="answers"] .ans-view { display: block; }
body[data-view="answers"] #stage { visibility: hidden; pointer-events: none; }
.ans-wrap { max-width: 860px; margin: 0 auto; padding: 28px 20px 64px; }
.ans-head { margin-bottom: 18px; }
.ans-title { margin: 0; font: 600 26px/1.25 var(--serif, Georgia, serif); color: var(--ivory-hi, #FADEBF); }
.ans-sub { margin: 6px 0 0; font-size: 15px; line-height: 1.45; color: rgba(240, 214, 188, .75); }
.ans-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ans-item { border-radius: 10px; background: linear-gradient(180deg, #FFF3E2, #F6E2C8); color: #261C16; border: 1px solid rgba(235, 172, 98, .55); box-shadow: 0 6px 16px rgba(0, 0, 0, .35); overflow: hidden; }
.ans-row { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; padding: 14px 16px; }
.ans-q { all: unset; box-sizing: border-box; width: 100%; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; cursor: pointer; }
.ans-q:focus-visible { outline: 3px solid var(--gold-dark, #C97D3D); outline-offset: 3px; border-radius: 4px; }
.ans-n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #FADEBF, #C97D3D); color: #261C16; font-weight: 800; font-size: 15px; margin-top: 1px; }
.ans-qtxt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ans-question { font: 800 18px/1.3 ui-sans-serif, system-ui, -apple-system, "PingFang TC", sans-serif; }
.ans-short { margin: 0; font-size: 15.5px; line-height: 1.5; color: #3d2e24; }
.ans-short .ev, .ans-line .ev, .ans-compare .ev, .ans-checks .ev, .ans-rank .ev { font-size: inherit; color: #261C16; }
.ans-chev { font-size: 16px; color: #8a6a50; margin-top: 4px; transition: transform .15s; }
.ans-item.open .ans-chev { transform: rotate(180deg); }
body[data-motion="off"] .ans-chev { transition: none; }
.ans-body { padding: 0 16px 16px 56px; display: grid; gap: 8px; }
.ans-body[hidden] { display: none; }
.ans-line { margin: 0; font-size: 15px; line-height: 1.5; }
.ans-line strong { font-weight: 800; }
.ans-note { color: #5A4636; font-size: 14px; }
.ans-dim { color: #5A4636; font-size: 13.5px; }
.ans-chip { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 13px; font-weight: 800; background: rgba(90, 70, 54, .1); color: #5A4636; border: 1px solid rgba(107, 67, 34, .3); white-space: nowrap; }
.ans-chip.ok { background: rgba(31, 90, 58, .12); color: #1f5a3a; border-color: rgba(31, 90, 58, .35); }
.ans-chip.warn { background: rgba(201, 125, 61, .16); color: #7a4210; border-color: rgba(201, 125, 61, .5); }
.ans-chip.bad { background: rgba(217, 37, 76, .1); color: #801A3A; border-color: rgba(128, 26, 58, .35); }
.ans-actions { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 4px; }
.ans-link { padding: 0; min-height: 30px; border: 0; background: none; color: #3b1f8f; font: 700 15px/1.3 ui-sans-serif, system-ui, sans-serif; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-align: left; }
.ans-rank { margin: 0; padding-left: 22px; display: grid; gap: 2px; font-size: 15px; }
.ans-rank .ans-link { min-height: 26px; }
.ans-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 15px; }
.ans-compare { border-collapse: collapse; width: 100%; font-size: 14.5px; background: rgba(255, 250, 243, .6); border-radius: 8px; overflow: hidden; }
.ans-compare th, .ans-compare td { padding: 7px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(107, 67, 34, .16); }
/* 德文這類長複合字（Entwicklungsobergrenze）會把欄撐寬：允許斷字；手機上三欄等寬。 */
.ans-compare th, .ans-compare td { overflow-wrap: anywhere; hyphens: auto; }
.ans-compare tr:first-child th { background: rgba(244, 223, 200, .9); font-size: 13.5px; }
.ans-compare tbody th, .ans-compare tr th:first-child { font-weight: 800; }
.ans-runway td { line-height: 1.35; }
.ans-bar { display: flex; gap: 2px; height: 26px; border-radius: 6px; overflow: hidden; }
.ans-seg { display: grid; place-items: center; min-width: 26px; font-size: 13px; font-weight: 800; color: #261C16; }
.ans-seg.linked { background: #2b7a4b; color: #fff; }
.ans-seg.possible { background: #d08a1e; }
.ans-seg.unclassified { background: repeating-linear-gradient(135deg, #e3d3bf 0 3px, #f3e3d0 3px 7px); border: 1px solid rgba(107, 67, 34, .35); }
.ans-legend { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
body[data-mode="phone"] .ans-wrap { padding: 18px 12px 48px; }
body[data-mode="phone"] .ans-title { font-size: 22px; }
body[data-mode="phone"] .ans-row { padding: 12px; gap: 10px; }
body[data-mode="phone"] .ans-question { font-size: 16.5px; }
body[data-mode="phone"] .ans-body { padding: 0 12px 14px 12px; }
body[data-mode="phone"] .ans-compare { table-layout: fixed; font-size: 13.5px; }
body[data-mode="phone"] .ans-compare th, body[data-mode="phone"] .ans-compare td { padding: 6px 7px; }