/* Shared inner-workspace rhythm. Tables retain their compact spreadsheet rules. */
html body.dark.ff-logo-shell :is(#ffMainWorkspace,.demo-native-body){--ff-control-size:42px;--ff-inner-gap:14px}
html body.dark.ff-logo-shell :is(#ffMainWorkspace,.demo-native-body) :is(h2,h3){line-height:1.3;overflow-wrap:anywhere}
html body.dark.ff-logo-shell :is(#ffMainWorkspace,.demo-native-body) h2{font-size:22px!important;margin:0 0 12px!important}
html body.dark.ff-logo-shell :is(#ffMainWorkspace,.demo-native-body) h3{font-size:17px!important;margin:0 0 10px!important}
html body.dark.ff-logo-shell :is(#ffMainWorkspace,.demo-native-body) :is(.content-card,.ff21-view,.ff28-tool-panel,.age-category-panel){min-width:0;box-sizing:border-box}
html body.dark.ff-logo-shell :is(#ffMainWorkspace,.demo-native-body) :is(.claims-header-row,.ff28-panel-head,.ff21-view-head,.rma-page-head,.section-heading){display:flex!important;align-items:flex-start!important;justify-content:space-between!important;flex-wrap:wrap!important;gap:var(--ff-inner-gap)!important;margin-bottom:16px!important}
html body.dark.ff-logo-shell :is(#ffMainWorkspace,.demo-native-body) :is(button,input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea){font-size:14px!important;line-height:1.4!important;box-sizing:border-box;max-width:100%}
html body.dark.ff-logo-shell :is(#ffMainWorkspace,.demo-native-body) :is(button,input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select){min-height:var(--ff-control-size)!important}
html body.dark.ff-logo-shell :is(#ffMainWorkspace,.demo-native-body) button{height:auto!important;padding:9px 13px!important;white-space:normal!important}
html body.dark.ff-logo-shell :is(#ffMainWorkspace,.demo-native-body) :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea){padding:9px 11px!important}
html body.dark.ff-logo-shell :is(#ffMainWorkspace,.demo-native-body) label{font-size:13px!important;line-height:1.4!important;text-align:left}
html body.dark.ff-logo-shell :is(#ffMainWorkspace,.demo-native-body) :is(.small,.muted,.ff28-tile-meta,.age-category-meta,.age-status-card-meta){font-size:12px!important;line-height:1.5!important}
html body.dark.ff-logo-shell :is(#ffMainWorkspace,.demo-native-body) :is(.ff21-nav,.ff28-admin-row,.ff28-template-toolbar,.ff28-template-grid,.ff-tool-nav,.rma-supplier-filters,.system-settings-tabs){display:flex!important;flex-wrap:wrap!important;justify-content:center!important;align-items:center!important;gap:8px!important;width:fit-content!important;max-width:100%!important;margin:12px auto 18px!important;padding:0!important;background:transparent!important;border:0!important}
html body.dark.ff-logo-shell :is(#ffMainWorkspace,.demo-native-body) :is(.ff21-nav-card,.ff28-admin-button,.ff28-template-channel,.ff28-template-tile,.ff-tool-nav a,.rma-supplier-chip){display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:42px!important;padding:9px 14px!important;border:1px solid #546071!important;border-radius:9px!important;background:#1a232e!important;color:#f0f4fa!important;font:650 14px/1.3 system-ui!important;text-decoration:none!important;box-sizing:border-box!important;text-align:center;max-width:100%!important}
html body.dark.ff-logo-shell :is(#ffMainWorkspace,.demo-native-body) :is(.ff21-nav-card,.ff28-admin-button,.ff28-template-channel,.ff28-template-tile,.ff-tool-nav a,.rma-supplier-chip).active{border-color:#91bfce!important;background:#233743!important;box-shadow:inset 0 -2px #91bfce!important}
html body.dark.ff-logo-shell :is(#ffMainWorkspace,.demo-native-body) :is(button,a,input,select,textarea):focus-visible{outline:3px solid #d69a64!important;outline-offset:3px!important}
html body.dark.ff-logo-shell[data-ff-season=halloween] :is(#ffMainWorkspace,.demo-native-body) :is(.ff21-nav-card,.ff28-admin-button,.ff28-template-channel,.ff28-template-tile,.ff-tool-nav a,.rma-supplier-chip){border-color:#ad7649!important}
/* Status hues remain owned by the existing semantic styles. */
html body.dark.ff-logo-shell :is(#ffMainWorkspace,.demo-native-body) :is(.claims-status-nav,.ff28-parent-grid,.ff28-status-grid,.ff28-part-grid,.age-status-grid,.age-category-grid,.rma-summary-grid){display:flex!important;flex-wrap:wrap!important;justify-content:center!important;gap:10px!important;width:fit-content!important;max-width:100%!important;margin:14px auto!important}
html body.dark.ff-logo-shell :is(#ffMainWorkspace,.demo-native-body) :is(.claims-status-card,.ff28-parent-tile,.ff28-status-tile,.ff28-part-tile,.age-status-card,.age-category-summary){flex:0 1 172px!important;width:172px!important;min-width:128px!important;max-width:100%!important;min-height:84px!important;box-sizing:border-box!important;padding:12px!important;text-align:center!important}
html body.dark.ff-logo-shell :is(#ffMainWorkspace,.demo-native-body) :is(.claims-status-card .label,.ff28-tile-label,.age-status-card-label){font-size:14px!important;line-height:1.3!important}
html body.dark.ff-logo-shell :is(#ffMainWorkspace,.demo-native-body) :is(.claims-status-card .value,.ff28-tile-count,.age-category-count){font-size:22px!important;line-height:1.25!important}
html body.dark.ff-logo-shell :is(#ffMainWorkspace,.demo-native-body) :is(.ff28-template-layout,.comms-layout){display:grid!important;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)!important;gap:20px!important;align-items:start!important}
html body.dark.ff-logo-shell :is(#ffMainWorkspace,.demo-native-body) :is(.ff28-template-editor,.communication-preview,.form-card,.message-card){min-width:0;box-sizing:border-box;padding:18px!important;border:1px solid #454e5b!important;border-radius:12px!important;background:#171d25!important}
html body.dark.ff-logo-shell :is(#ffMainWorkspace,.demo-native-body) :is(.ff28-template-group-title){font-size:15px!important;font-weight:750!important;margin:20px 0 8px!important;text-align:center}
html body.dark.ff-logo-shell :is(#ffMainWorkspace,.demo-native-body) .ff28-template-grid{width:100%!important}
html body.dark.ff-logo-shell :is(#ffMainWorkspace,.demo-native-body) .ff28-template-tile{flex:0 1 210px!important;width:210px!important;min-height:56px!important}
html body.dark.ff-logo-shell :is(#ffMainWorkspace,.demo-native-body) :is(.communication-placeholder-grid,.communication-template-grid){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important}
html body.dark.ff-logo-shell :is(#ffMainWorkspace,.demo-native-body) :is(.communication-template-grid,.communication-placeholder-grid)>.wide{grid-column:1/-1}
html body.dark.ff-logo-shell :is(#ffMainWorkspace,.demo-native-body) :is(.comm-body,#template-text){min-height:220px!important;width:100%!important;resize:vertical!important}
html body.dark.ff-logo-shell :is(#ffMainWorkspace,.demo-native-body) :is(.communication-preview-box,.message-preview){min-height:220px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px!important;line-height:1.6!important}
html body.dark.ff-logo-shell :is(#ffMainWorkspace,.demo-native-body) .ff-workspace-guidance{padding:14px 16px;border:1px solid #796044;border-radius:10px;background:#25201a;color:#e9d9c5;font-size:14px;line-height:1.5;margin:12px 0}
html body.dark.ff-logo-shell :is(#ffMainWorkspace,.demo-native-body) :is(.sheet-wrap,.sheet-scroll,.comm-table-wrap,.rma-table-wrap){max-width:100%;overflow-x:auto}
/* Dense table actions/fields are intentionally smaller than workspace controls. */
html body.dark.ff-logo-shell :is(#ffMainWorkspace,.demo-native-body) table :is(button,input:not([type=checkbox]):not([type=radio]),select){min-height:30px!important;padding:4px 7px!important;font-size:13px!important}
html body.dark.ff-logo-shell :is(#ffMainWorkspace,.demo-native-body) table .claim-more-btn{min-height:28px!important;padding:3px 8px!important}
@media(max-width:760px){html body.dark.ff-logo-shell :is(#ffMainWorkspace,.demo-native-body) :is(.ff28-template-layout,.comms-layout,.communication-placeholder-grid){grid-template-columns:1fr!important}html body.dark.ff-logo-shell :is(#ffMainWorkspace,.demo-native-body) :is(.claims-status-card,.ff28-parent-tile,.ff28-status-tile,.ff28-part-tile,.age-status-card,.age-category-summary){flex-basis:145px!important;width:145px!important}html body.dark.ff-logo-shell :is(#ffMainWorkspace,.demo-native-body) .ff28-template-tile{flex:1 1 160px!important}}

html body.dark.ff-logo-shell :is(#ffMainWorkspace,.demo-native-body) .ff-workspace-help{margin:12px 0 18px;padding:12px 14px;border:1px solid #424b58;border-radius:9px;font-size:13px;line-height:1.5}html body.dark.ff-logo-shell :is(#ffMainWorkspace,.demo-native-body) .ff-workspace-help>summary{cursor:pointer;font-weight:650}

/* Full-width rows inside one centered workspace; never a narrow card cluster. */
html body.dark.ff-logo-shell :is(#ffMainWorkspace,.demo-native-body){max-width:1800px!important}
html body.dark.ff-logo-shell.tab-website :is(#ffMainWorkspace,.demo-native-body){max-width:1800px!important}
html body.dark.ff-logo-shell :is(#ffMainWorkspace,.demo-native-body) :is(.ff-tool-nav,.ff21-nav,.ff28-admin-row,.claims-status-nav,.ff28-parent-grid,.ff28-status-grid,.ff28-part-grid,.age-status-grid,.age-category-grid,.rma-summary-grid,.zagg-audit-summary){
  display:flex!important;flex-wrap:nowrap!important;align-items:stretch!important;
  width:100%!important;max-width:100%!important;box-sizing:border-box!important;
}
html body.dark.ff-logo-shell :is(#ffMainWorkspace,.demo-native-body) :is(.ff-tool-nav,.ff21-nav,.ff28-admin-row,.claims-status-nav,.ff28-parent-grid,.ff28-status-grid,.ff28-part-grid,.age-status-grid,.age-category-grid,.rma-summary-grid,.zagg-audit-summary)>*{
  flex:1 1 0!important;width:auto!important;min-width:0!important;max-width:none!important;
  box-sizing:border-box!important;overflow-wrap:anywhere;
}
html body.dark.ff-logo-shell :is(#ffMainWorkspace,.demo-native-body) :is(.zagg-record-grid,.zagg-warranty-summary,.zagg-warranty-metrics){width:100%!important;box-sizing:border-box!important}
/* Smaller screens wrap controls rather than making the entire page scroll sideways. */
@media(max-width:900px){
  html body.dark.ff-logo-shell :is(#ffMainWorkspace,.demo-native-body) :is(.ff-tool-nav,.ff21-nav,.ff28-admin-row,.claims-status-nav,.ff28-parent-grid,.ff28-status-grid,.ff28-part-grid,.age-status-grid,.age-category-grid,.rma-summary-grid,.zagg-audit-summary){flex-wrap:wrap!important}
  html body.dark.ff-logo-shell :is(#ffMainWorkspace,.demo-native-body) :is(.claims-status-nav,.ff28-status-grid,.ff28-part-grid,.age-status-grid,.age-category-grid,.rma-summary-grid)>*{flex-basis:145px!important}
}
/* Native and Demo panels appear directly; no intermediate content blur/fade. */
html body.dark.ff-logo-shell :is(#ffMainWorkspace,.demo-native-body) .content-card{animation:none!important}

/* Moved Demo panels use the same rules as native feature documents. Respond to
   their window width even while the browser itself remains desktop-sized. */
.demo-native-body{container:ff-demo-panel / inline-size}
@container ff-demo-panel (max-width:900px){
 html body.dark.ff-logo-shell .demo-native-body :is(.ff-tool-nav,.ff21-nav,.ff28-admin-row,.claims-status-nav,.ff28-parent-grid,.ff28-status-grid,.ff28-part-grid,.age-status-grid,.age-category-grid,.rma-summary-grid,.zagg-audit-summary){flex-wrap:wrap!important}
 html body.dark.ff-logo-shell .demo-native-body :is(.claims-status-nav,.ff28-status-grid,.ff28-part-grid,.age-status-grid,.age-category-grid,.rma-summary-grid)>*{flex-basis:145px!important}
}
@container ff-demo-panel (max-width:760px){
 html body.dark.ff-logo-shell .demo-native-body :is(.ff28-template-layout,.comms-layout,.communication-placeholder-grid,.ticket-detail-layout){grid-template-columns:minmax(0,1fr)!important}
}
/* Image action forms must fit their small card rather than size its grid tracks
   from the longest button. Wrapping changes presentation, never form actions. */
html body.dark.ff-logo-shell :is(#ffMainWorkspace,.demo-native-body) .static-photo-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,145px),1fr))}
html body.dark.ff-logo-shell :is(#ffMainWorkspace,.demo-native-body) .static-photo-card{min-width:0;box-sizing:border-box}
html body.dark.ff-logo-shell :is(#ffMainWorkspace,.demo-native-body) .static-photo-actions{display:flex;flex-wrap:wrap;gap:6px}
html body.dark.ff-logo-shell :is(#ffMainWorkspace,.demo-native-body) .static-photo-actions form{flex:1 1 100px;min-width:0;max-width:100%}
html body.dark.ff-logo-shell :is(#ffMainWorkspace,.demo-native-body) .static-photo-actions button{width:100%;min-width:0;white-space:normal!important;overflow-wrap:anywhere}