/* One responsive layer for the existing seven-topic reading experience. */
:root{--topic-bar-height:108px}
html{scroll-padding-top:0;scroll-padding-bottom:90px}
.tab-panel,.tab-panel [id],.panel-heading{scroll-margin-top:calc(var(--topic-bar-height) + 14px)}
main,.tab-panel,.table-wrap,.chart,.estimate,.calc-items,.calc-item,.habits-intro,.habit-heading,.policy-grid,.completion-section{min-width:0}
.table-wrap,.power-table-scroll,.height-figure,.dimension-diagram,.dimension-detail,.chart{max-width:100%}
.height-figure,.dimension-diagram,.dimension-detail,.chart,.power-table-scroll{overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.mobile-scroll-hint{display:none}
.source,.policy-card,.habit-selected-row>span,.calc-check span,.calc-item output{overflow-wrap:anywhere}
textarea{resize:vertical;max-width:100%}

@media(max-width:900px){
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  body{font-size:1rem;line-height:1.8}
  header{flex-wrap:wrap;align-items:center;gap:8px 18px;min-height:0;padding:16px max(5%,env(safe-area-inset-right)) 12px max(5%,env(safe-area-inset-left))}
  .brand{min-width:0;max-width:100%;gap:14px}
  .brand .brand-mark{font-size:25px;flex-shrink:0;letter-spacing:.22em}
  .brand-mark small{font-size:12px;letter-spacing:.05em}
  .brand .brand-descriptor{font-size:14px;line-height:1.6;padding-left:14px;letter-spacing:0}
  .header-actions{width:100%;font-size:14px;justify-content:flex-end;gap:12px}
  .header-actions a{display:inline-flex;align-items:center;min-height:44px;padding:6px 0}
  .header-actions .friend-label{display:none}
  main{padding-inline:max(5%,env(safe-area-inset-left)) max(5%,env(safe-area-inset-right))}
  .friend-welcome{grid-template-columns:minmax(0,1fr);gap:22px;padding:24px 5% 32px}
  .welcome-copy{min-width:0;padding:0}
  .welcome-copy h1{font-size:clamp(28px,6.8vw,36px);line-height:1.6;letter-spacing:.02em}
  .welcome-overline{font-size:16px;letter-spacing:.1em;margin-top:14px}
  .welcome-photo{min-height:290px;grid-row:auto}
  .welcome-photo figcaption{left:22px;right:22px;bottom:22px}
  .welcome-photo figcaption p{font-size:24px}
  .welcome-photo figcaption>span{font-size:12px;letter-spacing:.04em}
  .welcome-photo figcaption a{display:inline-flex;align-items:center;min-height:44px;font-size:14px}
  .line-primary,.enter-platform{padding:14px 16px;gap:10px;min-height:52px;font-size:16px}
  .line-primary>span,.enter-platform>span{font-size:14px}
  .invite .access-note,.ai-note{font-size:14px}
  .friend-confirm{min-height:48px;padding:8px 0;font-size:16px}
  .friend-confirm input{width:22px;height:22px}
  .tab-shell{overflow:visible;padding:8px max(5%,env(safe-area-inset-right)) 8px max(5%,env(safe-area-inset-left));padding-top:max(8px,env(safe-area-inset-top));background:#f4f1eafa}
  .tabs{display:none!important}
  .mobile-topic{display:flex;align-items:center;gap:10px;width:100%;max-width:100%;min-width:0}
  .mobile-topic>span{font-size:14px;white-space:nowrap;color:#76634b;flex-shrink:0}
  .mobile-topic select{display:block;min-width:0;width:100%;margin:0;font-size:16px;min-height:48px;padding:10px 30px 10px 10px;border:1px solid #b9ad9b;background:#faf8f3}
  .platform-banner{padding:16px 0;gap:12px}
  .platform-banner p{font-size:21px;line-height:1.65}
  .platform-banner>div:last-child{display:none}
  .panel-heading{padding:24px 0 14px}
  .panel-heading h1{font-size:clamp(25px,5.4vw,30px);letter-spacing:.015em;line-height:1.65}
  .inline-consult{display:block;margin-bottom:16px;padding-bottom:12px}
  .inline-consult a{display:inline-flex;align-items:center;min-height:44px;margin-top:4px}
  .topic-intent{padding:18px 0 14px}
  .topic-intent p{font-size:21px;line-height:1.7}
  .topic-jumps{gap:4px 18px;padding:8px 0 16px;margin:0}
  .topic-jumps a,.habits-nav a,.ebook-toc a{min-height:44px;align-items:center;font-size:14px}
  .habits-nav a{display:inline-flex}
  button,.primary,.consult-button,.calc-actions a,.habits-actions a{min-height:48px;touch-action:manipulation}
  input:not([type=checkbox]),select,textarea{font-size:16px}
  .estimate{grid-template-columns:minmax(0,1fr)}
  .estimate form,.estimate-result{padding:22px}
  .fields{grid-template-columns:minmax(0,1fr);gap:18px}
  .fields label:first-child{grid-column:auto}
  .estimate-result>strong{font-size:clamp(34px,8vw,46px)}
  .calc-items{grid-template-columns:minmax(0,1fr)}
  .calc-item{min-width:0;padding:18px;grid-template-columns:minmax(0,1fr) 100px;gap:14px}
  .calc-check{min-width:0;font-size:18px;line-height:1.7}
  .calc-check input,.selected-filter input,.check-row input,.habit-option input{width:22px;height:22px}
  .calc-check span{min-width:0}
  .calc-quantity input{margin:0;min-height:48px;font-size:18px}
  .calc-quantity{font-size:14px;line-height:1.8}
  .calc-switch button{min-width:0;flex:1;padding:13px 10px;font-size:16px}
  .calc-fields{grid-template-columns:minmax(0,1fr)}
  .calc-extras{padding:22px}
  .item-controls{grid-template-columns:minmax(0,1fr);gap:8px}
  .selected-filter{min-height:48px;padding:10px 0}
  .selection-summary{display:block;padding:18px}
  .selection-summary strong{font-size:21px;overflow-wrap:anywhere}
  .selection-summary a{display:inline-flex;align-items:center;min-height:44px;margin-top:4px}
  .measurement-help summary{min-height:48px;padding:10px 0;line-height:1.8}
  .calc-actions button,.calc-actions a{width:100%;text-align:center}
  .calc-total strong{font-size:23px;overflow-wrap:anywhere}
  .facts,.notes,.check-grid{grid-template-columns:minmax(0,1fr)}
  .facts{padding:22px;gap:16px}
  .facts div+div{border-left:0;border-top:1px solid #c8c0b3;padding:16px 0 0}
  .check-row{min-height:44px}
  .section{padding-top:36px}
  .section-head{display:block}
  .section-head>p{text-align:left;margin-top:12px}
  .section-head>p span{display:inline;margin-left:8px}
  .overview,.details,.guide-table,.electrical-table,.completion-table{display:block;min-width:0;width:100%!important}
  :is(.overview,.details,.guide-table,.electrical-table,.completion-table) thead{display:none}
  :is(.overview,.details,.guide-table,.electrical-table,.completion-table) :is(tbody,tr,th,td){display:block;min-width:0;width:100%!important}
  :is(.overview,.details,.guide-table,.electrical-table,.completion-table) tbody tr{padding:18px 16px;border-bottom:1px solid var(--line)}
  :is(.overview,.details,.guide-table,.electrical-table,.completion-table) tbody th{padding:0 0 8px!important;border:0;font-size:18px}
  :is(.overview,.details,.guide-table,.electrical-table,.completion-table) td{padding:7px 0!important;border:0;font-size:16px;line-height:1.85}
  .guide-table td:before,.electrical-table td:before,.completion-table td:before{content:attr(data-label);display:block;font-size:14px;color:#786249;font-weight:400;margin-bottom:3px}
  .overview td:nth-child(2):before{content:'每坪預算　';font-size:14px;color:var(--muted)}
  .overview td:nth-child(3):before{content:'20 坪粗估　';font-size:14px;color:var(--muted)}
  .details td:nth-child(2):before{content:'計價單位　';font-size:14px;color:#786249}
  .details td:last-child:before{content:'報價確認｜';font-size:14px;color:#786249}
  .power-table-scroll{min-width:0;width:100%;max-width:100%}
  .power-reference-footnote,.power-origin{font-size:14px}
  .dimension-highlights{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .dimension-highlights article{min-width:0;padding:18px}
  .dimension-highlights article:last-child{grid-column:1/-1}
  .dimension-highlights strong{font-size:28px;line-height:1.5;overflow-wrap:anywhere}
  .dimension-highlights strong span{display:block;margin-left:0;font-size:16px}
  .dimension-highlights .words{font-size:21px}
  .height-figure,.dimension-diagram,.dimension-detail{padding:18px;overflow-x:auto}
  .height-figure svg{min-width:560px}
  .dimension-diagram svg{min-width:550px}
  .dimension-detail svg{min-width:540px}
  .chart-panel{grid-template-columns:minmax(0,1fr);padding:24px 18px;gap:18px}
  .chart{overflow-x:auto}
  .chart svg{min-width:520px}
  .mobile-scroll-hint{display:block;font-size:14px;color:#78654a;margin:12px 0 8px}
  .electrical-facts{grid-template-columns:minmax(0,1fr)}
  .electrical-facts article{padding:22px}
  .ebook-intro{display:block;padding:22px}
  .ebook-intro h2{font-size:25px}
  .ebook-numbers{margin-top:18px;gap:32px}
  .ebook-numbers b{font-size:34px}
  .ebook-toc{gap:8px;padding:0;width:auto}
  .stage-heading{display:grid;grid-template-columns:28px minmax(0,1fr);gap:4px 12px;align-items:start}
  .stage-heading>span{font-size:23px;grid-row:1/3}
  .stage-heading>small{grid-column:2;margin:0;font-size:14px}
  .stage-heading h3{font-size:22px}
  .ebook-question summary{min-height:52px;gap:14px;font-size:16px;padding:16px 4px}
  .question-content{padding:0 16px 20px}
  .policy-grid,.policy-local-grid,.oldbook-question-grid{grid-template-columns:minmax(0,1fr)}
  .policy-card,.policy-local,.oldbook-reserve{padding:22px}
  .policy-dateline{display:block;font-size:14px}
  .policy-dateline span{display:block;margin-top:4px}
  .policy-top{flex-wrap:wrap;gap:8px}
  .policy-sources .source{min-height:44px;padding:8px 0;margin:0}
  .policy-local-grid{gap:22px}
  .policy-local-grid article+article{border-top:1px solid #c9c1b4;padding-top:22px}
  .reserve-example{grid-template-columns:minmax(0,1fr);gap:15px}
  .reserve-example>div+div{border-left:0;border-top:1px solid #c8bfb0;padding:15px 0 0}
  .habits-intro{grid-template-columns:minmax(0,1fr);padding:22px;gap:18px}
  .habits-summary{border-left:0;border-top:1px solid #b8a990;padding:16px 0 0}
  .habits-summary strong{font-size:23px;line-height:1.6}
  .habits-summary a{display:inline-flex;align-items:center;min-height:44px}
  .habit-group>summary{display:grid;grid-template-columns:24px minmax(0,1fr) 24px;gap:4px 12px;padding:18px 14px;align-items:start}
  .habit-number{grid-column:1;grid-row:1;font-size:19px;padding-top:3px}
  .habit-heading{grid-column:2;grid-row:1;min-width:0;font-size:21px;line-height:1.65}
  .habit-heading small{font-size:14px}
  .habit-progress{grid-column:2;grid-row:2;font-size:14px;margin-top:4px}
  .habit-group>summary:after{grid-column:3;grid-row:1;font-size:22px;text-align:center}
  .habit-option{padding:14px 4px;min-height:48px}
  .habits-review{padding:22px}
  .habit-priority-box{padding:18px}
  .habit-selected-row{display:block}
  .habit-priority-toggle{display:inline-block;margin-top:10px;min-height:44px}
  .habits-actions>*{width:100%;text-align:center}
  .completion-section{margin:36px 0}
  .completion-section>h2{font-size:25px}
  .sources,.callout,.disclaimer{padding:22px}
  .consultation{grid-template-columns:minmax(0,1fr);gap:14px;margin-top:32px;padding:26px 0}
  .consult-number br{display:none}
  .consult-number span{display:inline;font-size:16px;margin-left:12px}
  .consult-copy h2{font-size:25px}
  .consult-button{width:100%;justify-content:space-between;gap:16px;font-size:16px}
  footer{flex-wrap:wrap;gap:16px;padding:24px 5% calc(96px + env(safe-area-inset-bottom))}
  .footer-links{flex-wrap:wrap;gap:8px 20px}
  .footer-links a{display:inline-flex;align-items:center;min-height:44px;font-size:14px}
  .floating-line{font-size:14px;min-height:48px;padding:11px 16px;right:max(14px,env(safe-area-inset-right));bottom:calc(12px + env(safe-area-inset-bottom));max-width:calc(100% - 28px)}
  .is-editing .floating-line{display:none!important}
  .friend-entry footer{padding-bottom:calc(30px + env(safe-area-inset-bottom))}
}
@media(max-width:600px){.habit-options{grid-template-columns:minmax(0,1fr);padding:0 14px}.habit-direction{margin:12px 14px 18px;padding:16px}}
@media(max-width:380px){
  .calc-item{grid-template-columns:minmax(0,1fr)}
  .calc-quantity{display:grid;grid-template-columns:minmax(0,1fr) 104px;align-items:center;gap:12px}
  .calc-quantity input{width:104px}
  .dimension-highlights{grid-template-columns:minmax(0,1fr)}
  .dimension-highlights strong span{display:inline;margin-left:8px}
  .estimate form,.estimate-result,.calc-extras,.habits-intro,.habits-review{padding:18px}
  .brand .brand-descriptor{font-size:14px;padding-left:10px}
  .brand{gap:10px}
  .line-primary>span,.enter-platform>span{font-size:12px}
  .mobile-topic{display:block}
  .mobile-topic>span{display:block;font-size:14px;margin-bottom:4px}
}
@media(max-width:900px) and (max-height:500px){.welcome-photo{min-height:240px}.floating-line{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media print{.mobile-scroll-hint{display:none}.floating-line{display:none!important}}