@media(max-width:1080px){.app{grid-template-columns:205px minmax(0,1fr)}.workspace-grid{grid-template-columns:1fr}.story-fields{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:700px){.top{flex-wrap:wrap}.top nav{width:100%;margin-left:0}.header-note{display:none}.app{display:flex;flex-direction:column}.left{border-right:0;border-bottom:1px solid var(--line);padding:13px}.main{padding:13px}.editor-header{flex-direction:column;align-items:flex-start}.actions{justify-content:flex-start}.story-fields{grid-template-columns:1fr}.workspace-grid{gap:12px}.outline,.inspector,.below{padding:13px}.left .library{grid-template-columns:repeat(2,minmax(0,1fr))}#node-tree{max-height:42vh}}#preview-content header{background:#255b50;color:#fff;margin:-18px -18px 18px;padding:12px}#preview-content section{margin:18px 0;padding:13px;border-bottom:1px solid #cbd9d1}#preview-content details{border:1px solid #cbd9d1;padding:10px;margin:8px 0}#preview-content nav{display:flex;flex-wrap:wrap;gap:8px}#preview-content nav button{background:white}@media print{.top,.left,.inspector,.actions,.add-actions,.below{display:none!important}.app,.workspace-grid{display:block}.main{padding:0}}
/* F1628: keep the page outline prominent on tablet and mobile. */
@media(max-width:700px){
 .main{padding:8px}
 .studio-columns{display:flex;flex-direction:column;gap:9px}
 .palette-actions{position:static;width:100%;height:auto;min-height:0;max-height:none;overflow:visible;padding:9px}
 .palette-actions h2{font-size:13px;margin-bottom:6px}
 .palette-actions .add-actions{display:flex;flex-direction:row;flex-wrap:wrap;overflow:visible;gap:5px;padding:0}
 .palette-actions .add-actions button{width:auto;flex:1 1 29%;min-width:95px;min-height:34px;text-align:center}
 .studio-columns>.outline{position:static;width:100%;height:65dvh;min-height:360px;max-height:680px;padding:8px}
 #node-tree{max-height:none;min-height:0}
 .detail-column{width:100%;gap:9px}
 .detail-column>.editor-header{gap:6px}
 .story-fields{grid-template-columns:1fr;gap:7px}
 .story-fields .county-field{grid-column:auto}
 .action-stack .actions button{flex:1 1 30%}
 .action-stack .secondary-actions button{flex:1 1 45%}
 .detail-column>.inspector{padding:12px}
}
@media(max-width:420px){
 .palette-actions .add-actions button{flex-basis:30%;min-width:85px}
 .story-identification h1{font-size:21px}
 #node-tree .tree-item .type{min-width:56px}
}

/* Keep the full-width header sticky and editor panels legible on small screens. */
@media(max-width:1220px){
 .header-toggle{display:none}
 .top{position:sticky;top:0;z-index:40}
 html.header-condensed .top{position:sticky;left:auto;right:auto;border-radius:0}
}
@media(max-width:700px){
 .left{position:static;height:auto;overflow:visible}
 .detail-column{display:flex;flex-direction:column;gap:10px;padding-top:0}
 .detail-edit-panel,.detail-settings-panel{width:100%}
 .detail-edit-panel .inspector{min-height:160px}
 .detail-settings-panel .story-identification h1{font-size:21px}
 .detail-settings-panel .action-stack .actions,
 .detail-settings-panel .action-stack .secondary-actions{flex-direction:row;flex-wrap:wrap}
 .detail-settings-panel .action-stack button{width:auto;flex:1 1 135px}
 .detail-settings-panel .story-fields{grid-template-columns:1fr}
 .detail-settings-panel .story-fields .county-field{grid-column:1}
 #node-tree .tree-item:not(.structural){min-height:20px;padding-top:0;padding-bottom:1px}
 #node-tree .tree-item.structural{padding-top:7px;padding-bottom:3px}
}

@media(max-width:700px){.spec-fields{grid-template-columns:1fr}.spec-field{grid-column:1}.readiness-tools{align-items:flex-start;flex-direction:column}.spec-field[data-spec-field=build_instructions] textarea{min-height:170px}}
@media(max-width:700px){.brand-logo{width:40px;height:40px}}