/* SignalSolid Experience 2026: the last stylesheet in both shells.
 *
 * Holds shared layout, rhythm and touch behaviour. Colours come only from the
 * --ss3-* theme tokens, so light and dark stay correct without per-theme rules.
 * !important appears only where a legacy layer already uses it for the same property.
 * Breakpoints: 980px (app drawer), 640px (phone), 380px (small phone).
 */

:root{
  --ss-card-pad:clamp(16px,2vw,24px);
  --ss-stack-gap:clamp(14px,1.8vw,22px);
  --ss-card-radius:16px;
  --ss-control-radius:10px;
  --ss-tap:44px;
  --ss-topbar-h:68px;
}

/* ---------- Foundation ---------- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--ss-topbar-h) + 16px)}
body{text-rendering:optimizeLegibility;overflow-wrap:break-word}
:where(img,svg,video,canvas){max-width:100%}
:where(a,button,[role=button],label,summary){-webkit-tap-highlight-color:transparent;touch-action:manipulation}
@supports(height:100dvh){
  .ss-app-shell,.ss-app-frame{min-height:100dvh!important}
  .ss-app-content{min-height:calc(100dvh - var(--ss-topbar-h))!important}
  .ss-app-sidebar{height:100dvh!important}
}

/* Skip link stays off-screen until it receives keyboard focus. */
.ss-skip-link,.skip-link{position:fixed!important;top:10px!important;left:10px!important;z-index:2000;transform:translateY(-220%);transition:transform .15s ease}
.ss-skip-link:focus,.skip-link:focus{transform:none}

/* Entrance motion must not hold back the largest contentful paint. */
.ss3-public-hero,.ss-reference-hero{animation:none!important}

/* ---------- Typography ---------- */
.ss3-page-head>div:first-child{flex:1 1 min(100%,460px);min-width:0}
.ss3-head-actions{flex:0 1 auto;min-width:0;flex-wrap:wrap;justify-content:flex-start}
.ss3-workspace .ss3-page-head h1,.ss-commerce__header h1{font-size:clamp(1.65rem,1.2rem + 1.6vw,2.4rem)!important;line-height:1.16!important;letter-spacing:-.025em!important}
.ss3-page-head p{font-size:.95rem;line-height:1.65}
.badge{font-size:.75rem;font-weight:700}
.ss3-auth-point span{font-size:.8rem}
.ss-admin-refresh .admin-portal-header h1{font-size:clamp(1.5rem,1.2rem + 1.3vw,2.15rem);font-weight:800;letter-spacing:-.025em;margin-bottom:4px}
.ss3-page-kicker,.ss3-section-label,.ss-commerce__eyebrow,.ss-app-nav__label{letter-spacing:.08em!important}
:where(.ss3-panel,.ss-commerce__card,.admin-section) :where(p,small){line-height:1.55}

/* ---------- Surfaces ---------- */
.ss3-panel,.ss-commerce__card,.ss-admin-refresh .glass-card-2026:not(.admin-portal-nav),.ss-admin-refresh .card{border-radius:var(--ss-card-radius)!important}
.ss3-panel+.ss3-panel,.admin-section+.admin-section{margin-top:var(--ss-stack-gap)}
.ss-table,.table{font-variant-numeric:tabular-nums}
a.ss3-action-card,.ss-ref-admin-kpis>a,.ss-customer-quicklinks>a{transition:border-color .16s ease,background-color .16s ease}
@media(hover:hover){
  a.ss3-action-card:hover,.ss-ref-admin-kpis>a:hover,.ss-customer-quicklinks>a:hover{border-color:var(--ss3-border-strong)!important}
}

.ss3-health-primary .ss3-health-primary__icon{display:grid;place-items:center;flex:none}
.input-group>.form-select,.input-group>select{flex:1 1 0;min-width:0}

/* Text links styled as actions need a real hit area. */
.ss3-panel-link,.ss-app-profile__row>a,.ss-ref-admin-panel-heading>a,.ss-marketplace-heading>a,.ss-reference-float>a,.ss3-auth-row>a{display:inline-flex;align-items:center;min-height:32px}
.ss-app-profile__row>a{justify-content:center;min-width:36px;min-height:36px}
.ss3-catalog-summary>button{background:transparent!important;border:0!important;color:var(--ss3-primary)!important;padding-inline:8px}

/* ---------- Workspace chrome ---------- */
.ss-app-topbar__title strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.ss-app-topbar__title span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.ss3-mobile-nav>a{min-height:var(--ss-tap)}

/* ---------- Staff portal ---------- */
.ss-admin-refresh{max-width:1680px;padding-block:14px 32px!important}
.ss-admin-refresh .ss-admin-heading{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:12px;min-height:0;height:auto;margin:0 0 14px;padding:0!important;background:none!important;border:0!important;border-radius:0!important}
.ss-admin-crumbs{display:flex;align-items:center;gap:8px;min-width:0;font-size:.85rem;color:var(--ss3-muted)}
.ss-admin-crumbs a{color:var(--ss3-muted);text-decoration:none;white-space:nowrap}
.ss-admin-crumbs a:hover{color:var(--ss3-text)}
.ss-admin-crumbs i{font-size:.75rem;opacity:.6}
.ss-admin-crumbs span{color:var(--ss3-text);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ss-admin-refresh .ss-admin-heading>a.ss-admin-customer-link{flex:none;min-height:36px;padding:6px 12px;font-size:.85rem;border-color:var(--ss3-border);border-radius:var(--ss-control-radius);color:var(--ss3-text-soft)}

.ss-admin-refresh .admin-portal-shell{grid-template-columns:236px minmax(0,1fr);gap:20px}
.ss-admin-refresh .admin-portal-nav{top:calc(var(--ss-topbar-h) + 12px);max-height:calc(100vh - var(--ss-topbar-h) - 24px);overflow-y:auto;overscroll-behavior:contain;padding:10px;border-radius:var(--ss-card-radius)!important;scrollbar-width:thin}
@supports(height:100dvh){.ss-admin-refresh .admin-portal-nav{max-height:calc(100dvh - var(--ss-topbar-h) - 24px)}}
.admin-portal-nav__toggle{display:none}
.ss-admin-refresh .admin-portal-nav__header{padding:4px 8px 10px;margin-bottom:6px;border-color:var(--ss3-border)}
.ss-admin-refresh .admin-portal-nav__meta{font-size:.8rem;margin-top:4px;overflow-wrap:anywhere}
.ss-admin-refresh .admin-portal-nav__links{gap:2px}
.ss-admin-refresh .admin-portal-nav__group-label{margin-top:10px;padding:6px 8px 4px;font-size:.75rem}
.ss-admin-refresh .admin-portal-link{display:flex;align-items:center;gap:10px;min-height:38px;padding:7px 10px;background:transparent!important;border:0!important;box-shadow:none!important;color:var(--ss3-text-soft)!important;text-decoration:none}
.ss-admin-refresh .admin-portal-link>i{flex:none;width:18px;margin:0!important;text-align:center;font-size:.9rem;color:var(--ss3-muted)}
.ss-admin-refresh .admin-portal-link__title{font-size:.875rem;font-weight:600;line-height:1.3}
.ss-admin-refresh .admin-portal-link__meta{display:none}
.ss-admin-refresh .admin-portal-link:hover{background:var(--ss3-surface-hover)!important;transform:none!important}
.ss-admin-refresh .admin-portal-link.is-active{background:var(--ss3-primary-soft)!important;color:var(--ss3-text)!important}
.ss-admin-refresh .admin-portal-link.is-active>i{color:var(--ss3-primary)}
.ss-admin-refresh .admin-portal-nav__divider{display:none}
.ss-admin-refresh .admin-portal-nav__footer{margin-top:10px;padding-top:10px;border-top:1px solid var(--ss3-border)}

.ss-admin-refresh .admin-portal-header{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 20px;margin-bottom:var(--ss-stack-gap)}
.ss-admin-refresh .admin-portal-header>div:first-child{flex:1 1 280px;min-width:0}
.ss-admin-refresh .admin-filter-bar{display:flex;flex:1 1 440px;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end;min-width:0}
.ss-admin-refresh .admin-filter-bar .admin-inline-input{flex:1 1 170px;max-width:100%;width:auto!important}
.ss-admin-refresh .admin-filter-bar .btn-2026{flex:none}
.ss-admin-refresh .admin-section{padding:var(--ss-card-pad)}
.ss-admin-refresh .admin-section__header{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 16px;margin-bottom:14px}
.ss-admin-refresh .admin-summary-grid{gap:12px}

.ss-legacy-chart{position:relative;height:240px}
.ss-legacy-list{list-style:none;margin:10px 0 12px;padding:0;max-height:180px;overflow-y:auto;font-size:.875rem}
.ss-legacy-list li{padding:5px 0}
.ss-legacy-list small{display:block}
.ss-admin-refresh .ss-legacy-stats .admin-summary-card>div{font-size:1.4rem;font-weight:800;font-variant-numeric:tabular-nums}

.ss-reference-admin-intro :is(h1,h2){font-size:clamp(1.5rem,1.2rem + 1.3vw,2.15rem);font-weight:800;letter-spacing:-.025em;color:var(--ss3-text);margin:6px 0}
.ss-admin-refresh .ss-reference-admin-intro>a{color:var(--ss3-primary-ink)!important}
.ss-admin-refresh .ss-reference-admin-intro>a:hover{background:var(--ss3-primary-hover)}

/* Staff surfaces were authored dark-only, so light mode remaps them onto the tokens. */
:root[data-theme="light"] .ss-admin-refresh :is(.glass-card-2026,.admin-portal-nav,.admin-section,.ss-ref-admin-kpis>a,.table-responsive,.card){background:var(--ss3-surface)!important;background-image:none!important;color:var(--ss3-text)!important;border-color:var(--ss3-border)!important;box-shadow:var(--ss3-shadow-sm)!important}
:root[data-theme="light"] .ss-admin-refresh :is(.glass-card-2026,.admin-portal-nav,.admin-section,.ss-admin-live-layout,.admin-portal-nav__toggle){transition:none!important}
:root[data-theme="light"] .ss-admin-refresh .ss-admin-live-layout{background:transparent!important;background-image:none!important;border-color:transparent!important;box-shadow:none!important}
:root[data-theme="light"] .ss-admin-refresh .ss-ref-admin-kpis>a span{color:var(--ss3-muted)!important}
:root[data-theme="light"] .ss-admin-refresh .ss-reference-admin-intro>div>span{color:var(--ss3-primary)!important}
:root[data-theme="light"] .ss-admin-refresh .admin-portal-nav__toggle{color:var(--ss3-text)}
:root[data-theme="light"] .ss-ref-admin-chart-plot text{fill:var(--ss3-muted)}
:root[data-theme="light"] .ss-admin-refresh :is(.admin-section>a:not([class]),.admin-section p a:not([class])){color:var(--ss3-primary)!important}
:root[data-theme="light"] .ss-admin-refresh :is(.ss-admin-focus,.ss-admin-focus__grid>a,.ss-ref-admin-system>a){background:var(--ss3-surface)!important;background-image:none!important;border-color:var(--ss3-border)!important}
:root[data-theme="light"] .ss-admin-refresh .ss-ref-admin-system>a span{color:var(--ss3-muted)!important}
:root[data-theme="light"] .ss-admin-refresh .ss-admin-focus__grid>a small{color:var(--ss3-muted)!important}
:root[data-theme="light"] .ss-admin-refresh :is(.admin-kpi__value,.admin-shortcut__title,.admin-empty__title,.admin-queue-item__header,.admin-summary-card__count,.admin-summary-card>div,.ss-ref-admin-payment span){color:var(--ss3-text)!important}
:root[data-theme="light"] .ss-admin-refresh :is(.admin-kpi__label,.admin-kpi__meta,.admin-shortcut__desc,.admin-empty__desc,.admin-queue-item__meta,.ss-reference-admin-section-label){color:var(--ss3-muted)!important}
:root[data-theme="light"] .ss-admin-refresh .ss-ref-admin-panel-heading>a{color:var(--ss3-primary)!important}
:root[data-theme="light"] .ss-admin-refresh :is(.glass-card-2026,.admin-section,.admin-portal-nav)::before,
:root[data-theme="light"] .ss-admin-refresh :is(.glass-card-2026,.admin-section,.admin-portal-nav)::after{display:none}
:root[data-theme="light"] .ss-admin-refresh :is(.admin-summary-card,.admin-kpi,.admin-queue-item,.admin-shortcut,.admin-empty,.ss-ref-admin-chart,.ss-ref-admin-recent,.ss-ref-admin-system,.ss-ref-admin-payment){background:var(--ss3-surface-2)!important;background-image:none!important;color:var(--ss3-text)!important;border-color:var(--ss3-border)!important}
:root[data-theme="light"] .ss-admin-refresh :is(h1,h2,h3,h4,h5,h6,label,th,td,strong,.admin-portal-link__title,.admin-portal-nav__title){color:var(--ss3-text)!important}
:root[data-theme="light"] .ss-admin-refresh :is(p,small,.text-muted,.admin-portal-nav__meta,.admin-portal-link__meta,td.text-muted){color:var(--ss3-muted)!important}
:root[data-theme="light"] .ss-admin-refresh .admin-portal-nav__group-label{color:var(--ss3-muted)!important}
:root[data-theme="light"] .ss-admin-refresh .admin-portal-link{color:var(--ss3-text-soft)!important}
:root[data-theme="light"] .ss-admin-refresh .admin-portal-badge{color:var(--ss3-primary);background:var(--ss3-primary-soft);border-color:transparent}
:root[data-theme="light"] .ss-admin-refresh :is(table,thead,tbody,tr,th,td){background-color:transparent!important;background-image:none!important;border-color:var(--ss3-border)!important}
:root[data-theme="light"] .ss-admin-refresh :is(input:not([type=checkbox]):not([type=radio]),select,textarea,.admin-inline-input,.form-control,.form-select){background:var(--ss3-surface)!important;color:var(--ss3-text)!important;border-color:var(--ss3-border-strong)!important}
:root[data-theme="light"] .ss-admin-refresh ::placeholder{color:var(--ss3-muted)!important;opacity:1}
:root[data-theme="light"] .ss-admin-refresh .btn-ghost-2026{background:var(--ss3-surface)!important;color:var(--ss3-text)!important;border-color:var(--ss3-border-strong)!important}
:root[data-theme="light"] .ss-admin-refresh .ss-staff-filter:not(.is-current){background:var(--ss3-surface)!important;color:var(--ss3-text)!important;border-color:var(--ss3-border-strong)!important}

/* ---------- Tablet and phone ---------- */
@media(max-width:991.98px){
  .ss-admin-refresh .admin-portal-shell{grid-template-columns:minmax(0,1fr);gap:12px}
  /* The menu button names the current page and its panel links back to the customer view. */
  .ss-admin-refresh .ss-admin-heading{display:none}
  .ss-admin-refresh .admin-portal-nav{position:relative;top:auto;max-height:none;overflow:hidden;padding:0}
  .ss-admin-refresh .admin-portal-nav__header,.ss-admin-refresh .admin-portal-nav__links,.ss-admin-refresh .admin-portal-nav__footer{display:none}
  .ss-admin-refresh .admin-portal-nav.is-open{padding-bottom:10px}
  .ss-admin-refresh .admin-portal-nav.is-open .admin-portal-nav__links{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:2px 8px;padding:0 10px}
  .ss-admin-refresh .admin-portal-nav.is-open .admin-portal-nav__group-label{grid-column:1 / -1}
  .ss-admin-refresh .admin-portal-nav.is-open .admin-portal-nav__footer{display:block;padding:10px 10px 0}
  .ss-admin-refresh .admin-portal-link{min-height:var(--ss-tap)}
  .admin-portal-nav__toggle{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:8px 14px;background:none;border:0;color:var(--ss3-text);text-align:left;border-radius:var(--ss-card-radius)}
  .admin-portal-nav__toggle span{flex:1;min-width:0}
  .admin-portal-nav__toggle small{display:block;font-size:.75rem;color:var(--ss3-muted)}
  .admin-portal-nav__toggle strong{display:block;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .admin-portal-nav__toggle>i:last-child{font-size:.8rem;color:var(--ss3-muted);transition:transform .16s ease}
  .admin-portal-nav.is-open .admin-portal-nav__toggle>i:last-child{transform:rotate(180deg)}
}

@media(max-width:980px){
  /* Blur on a sticky bar repaints on every scroll frame, which is costly on phones. */
  .ss-app-topbar,.ss3-mobile-nav{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .ss-app-topbar{background:var(--ss3-bg-elevated)!important}
  .ss3-mobile-nav{background:var(--ss3-surface)!important}
  .ss-app-topbar__title span{display:none}
  .ss-app-profile__row>a{min-width:var(--ss-tap);min-height:var(--ss-tap)}
}

@media(max-width:768px){
  /* iOS Safari zooms the page when a focused field is under 16px. */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea,.form-control,.form-select{font-size:16px!important}
  input[type=checkbox],input[type=radio]{flex:none;width:24px;height:24px;min-width:24px;min-height:24px}
}

@media(max-width:640px){
  :root{--ss-card-pad:14px;--ss-stack-gap:12px}
  .ss3-page-head p,.ss-commerce__intro{font-size:.95rem!important}
  .btn,.btn-2026,.ss-button,.ss3-button,.ss3-head-actions a,.ss3-head-actions button{min-height:var(--ss-tap)}
  .ss3-panel-link,.ss-ref-admin-panel-heading>a,.ss-marketplace-heading>a,.ss-reference-float>a,.ss3-auth-row>a{min-height:40px}
  .ss3-password-toggle,.ss-range .ss-range__btn{min-height:var(--ss-tap)!important;min-width:var(--ss-tap)}
  .ss-footer-grid a{display:flex;align-items:center;min-height:40px}
  .ss-public-brand,.ss3-auth-brand{min-height:var(--ss-tap)}

  /* Nested cards: padding is paid once on phones so content keeps its width. */
  .ss3-panel,.ss-commerce__card{padding-inline:var(--ss-card-pad)!important}
  .ss3-panel .ss3-panel,.ss3-panel .ss-commerce__card{padding-inline:12px!important}

  .ss-admin-refresh{padding-inline:12px!important}
  .ss-admin-refresh .admin-portal-header{flex-direction:column;align-items:stretch}
  .ss-admin-refresh .admin-portal-header>div:first-child{flex:none}
  .ss-admin-refresh .admin-filter-bar{flex:none;width:100%}
  .ss-admin-refresh .admin-filter-bar .admin-inline-input,.ss-admin-refresh .admin-filter-bar .btn-2026{flex:1 1 100%;width:100%!important}
  .ss-admin-refresh .admin-summary-grid,.ss-admin-refresh .ss-ref-admin-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .ss-admin-refresh .ss-ref-admin-kpis>a{min-width:0;padding:12px!important}
  .ss-admin-refresh .admin-summary-card{min-width:0;padding:12px}

  /* Several page actions read better as a two-up block than as a tall list. */
  .ss3-workspace .ss3-page-head .ss3-head-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;width:100%}
  .ss3-workspace .ss3-page-head .ss3-head-actions>:last-child:nth-child(odd){grid-column:1 / -1}

  /* Tables become labelled cards. Headers stay available to assistive technology. */
  .table-responsive:has(.ss-table-stack){overflow:visible;border:0;background:none!important}
  table.ss-table-stack,table.ss-table-stack tbody,table.ss-table-stack tr,table.ss-table-stack td,table.ss-table-stack tbody th{display:block;width:100%}
  table.ss-table-stack{border:0;background:none;min-width:0!important}
  table.ss-table-stack thead th{position:static!important}
  table.ss-table-stack thead{display:block;position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  table.ss-table-stack tbody tr{margin-bottom:10px;padding:6px 12px;background:var(--ss3-surface-2);border:1px solid var(--ss3-border);border-radius:12px}
  table.ss-table-stack tbody tr:last-child{margin-bottom:0}
  table.ss-table-stack tbody td{display:flex;justify-content:space-between;align-items:center;gap:14px;min-height:38px;padding:7px 0!important;border:0!important;border-bottom:1px solid var(--ss3-border)!important;background:none!important;text-align:right!important;white-space:normal!important;overflow-wrap:anywhere}
  table.ss-table-stack tbody td:last-child{border-bottom:0!important}
  table.ss-table-stack tbody td[data-label]::before{content:attr(data-label);flex:none;max-width:45%;color:var(--ss3-muted);font-size:.8rem;font-weight:600;text-align:left}
  table.ss-table-stack tbody td.ss-table-stack__full{display:block;text-align:center!important}
  table.ss-table-stack tbody td:empty{display:none}
}

@media(max-width:380px){
  .ss3-command-trigger{display:none!important}
  .ss-admin-refresh .admin-summary-grid{grid-template-columns:minmax(0,1fr)!important}
}

@media print{
  .ss-app-sidebar,.ss-app-topbar,.ss3-mobile-nav,.admin-portal-nav,.ss-app-footer{display:none!important}
  .ss-app-frame{margin-left:0!important}
}
