/* 研究問卷平台 · 設計檢視外框（依 wiscrop-app 設計檢視的版型）；只用語意 token。 */
[hidden]{ display:none !important; }
body{ margin:0; background:var(--color-bg); }
.review-bar{ display:flex; align-items:center; gap:var(--sp-4); padding:var(--sp-4) var(--sp-6);
  background:var(--color-surface); border-bottom:1px solid var(--color-border-subtle); }
.review-bar > div:first-child{ flex:1; }
.review-bar h1{ font-size:var(--fs-xl); margin:0; }
.review-eyebrow{ font-size:var(--fs-xs); color:var(--color-text-muted); margin:0 0 var(--sp-1); }
.review-bar .btn{ text-decoration:none; }
/* 外觀小選單 */
.look{ position:relative; }
.look > summary{ list-style:none; cursor:pointer; }
.look > summary::-webkit-details-marker{ display:none; }
.look-pop{ position:absolute; right:0; top:calc(100% + 6px); z-index:20; width:220px; padding:var(--sp-3);
  background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--r-md); box-shadow:var(--shadow-md); }
.look-pop label{ display:block; font-size:var(--fs-xs); font-weight:700; margin:var(--sp-2) 0 var(--sp-1); }
.look-pop label:first-child{ margin-top:0; }
.look-pop select{ width:100%; }
/* 三欄 */
.review-layout{ max-width:1600px; margin:auto; padding:var(--sp-6); display:grid;
  grid-template-columns:260px minmax(0, 1fr) 340px; gap:var(--sp-6); align-items:start; }
.review-panel{ background:var(--color-surface); border:1px solid var(--color-border-subtle); border-radius:var(--r-lg);
  overflow:hidden; position:sticky; top:var(--sp-4); max-height:calc(100dvh - 32px); overflow-y:auto; }
.review-panel > summary{ padding:var(--sp-4); font-weight:700; cursor:pointer; border-bottom:1px solid var(--color-border-subtle); }
.review-panel > summary span{ float:right; color:var(--color-text-muted); font-size:var(--fs-xs); }
.panel-body{ padding:var(--sp-4); }
.review-label{ display:block; font-size:var(--fs-xs); font-weight:700; margin-bottom:var(--sp-2); }
.review-panel select.input{ width:100%; }
.review-note{ font-size:var(--fs-xs); line-height:var(--lh-normal); color:var(--color-text-muted); margin:var(--sp-3) 0; white-space:pre-line; }
.review-panel progress{ width:100%; height:6px; accent-color:var(--color-primary); margin-bottom:var(--sp-4); }
.nav-group{ margin-bottom:var(--sp-2); }
.nav-group > summary{ padding:var(--sp-2) 0; font-size:var(--fs-sm); font-weight:700; cursor:pointer; }
.nav-group > summary span{ font-size:var(--fs-xs); color:var(--color-text-muted); margin-left:var(--sp-2); }
.page-link{ display:grid; grid-template-columns:32px 1fr; gap:var(--sp-2); padding:var(--sp-3) var(--sp-2); border-radius:var(--r-md);
  text-decoration:none; color:var(--color-text); font-size:var(--fs-sm); margin:var(--sp-1) 0; }
.page-link:hover{ background:var(--color-bg); }
.page-link[aria-current="page"]{ background:var(--color-primary-subtle); color:var(--color-primary); }
.page-num{ color:var(--color-text-muted); font-family:var(--font-mono); font-size:var(--fs-xs); padding-top:2px; }
.page-link small{ display:block; font-size:var(--fs-2xs); font-weight:400; color:var(--color-text-muted); margin-top:var(--sp-1); }
.page-link[data-status="confirmed"] small{ color:var(--color-success); }
.page-link[data-status="review"] small{ color:var(--color-warning); }
.page-link[data-status="changes"] small{ color:var(--color-danger); }
/* 中間 */
.review-stage{ min-width:0; }
.stage-title{ text-align:center; margin-bottom:var(--sp-4); }
.stage-title h2{ font-size:var(--fs-xl); margin:0 0 var(--sp-2); }
.review-status{ display:inline-block; font-size:var(--fs-xs); color:var(--color-text-muted); }
.review-device{ width:100%; max-width:392px; margin:auto; border:1px solid var(--color-border-subtle); border-radius:var(--r-lg);
  overflow:hidden; background:var(--color-surface); box-shadow:var(--shadow-sm); }
.review-device[data-device="desktop"]{ max-width:none; }
.device-label{ padding:var(--sp-2) var(--sp-3); font-size:var(--fs-2xs); color:var(--color-text-muted); display:flex;
  justify-content:space-between; border-bottom:1px solid var(--color-border-subtle); }
.review-port{ overflow:hidden; position:relative; }
.review-port iframe{ border:0; display:block; transform-origin:top left; }
.stage-note{ text-align:center; }
.review-planned{ background:var(--color-surface); border:1px dashed var(--color-border); border-radius:var(--r-lg);
  padding:var(--sp-6); max-width:392px; margin:auto; min-height:360px; }
.review-planned h3{ font-size:var(--fs-lg); margin:var(--sp-5) 0 var(--sp-3); }
.review-planned p{ font-size:var(--fs-sm); line-height:var(--lh-normal); }
/* 右側說明 */
.spec-section{ margin-bottom:var(--sp-5); }
.spec-section h3, .spec-section summary{ font-size:var(--fs-sm); font-weight:700; margin:0 0 var(--sp-2); }
.spec-section summary{ cursor:pointer; }
.spec-section p, .spec-section li{ font-size:var(--fs-sm); line-height:var(--lh-normal); }
.spec-section ul{ padding-left:var(--sp-4); margin:0; }
.spec-section li{ margin:var(--sp-2) 0; }
.spec-section code{ overflow-wrap:anywhere; font-size:var(--fs-xs); }
.state-tags{ display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.state-tag{ background:var(--color-bg); border-radius:var(--r-sm); padding:var(--sp-1) var(--sp-2); font-size:var(--fs-xs); }
.state-tags .btn{ text-decoration:none; }
.state-tags .btn[aria-current="true"]{ background:var(--color-primary); border-color:var(--color-primary); color:var(--color-text-on-primary); }
@media (max-width:1150px){ .review-layout{ grid-template-columns:190px minmax(0, 1fr) 250px; gap:var(--sp-4); padding:var(--sp-4); } }
@media (max-width:820px){
  .review-layout{ grid-template-columns:minmax(0, 1fr); max-width:600px; }
  .review-panel{ position:static; max-height:none; }
  .review-nav .panel-body{ max-height:60dvh; overflow-y:auto; }
  .review-bar{ flex-wrap:wrap; padding:var(--sp-3) var(--sp-4); }
  .review-bar .badge{ display:none; }
  .review-nav{ order:0; } .review-spec{ order:1; } .review-stage{ order:2; }
  .stage-title{ margin-top:var(--sp-3); }
}