/* ==========================================================================
   sat-ui.css  -  Super Affiliate Tools interface (members area + admin)
   Version 1.0 (2026-10-22). Source of truth: design/DESIGN.md.

   How to use
   - Load Figtree, then this file, on every converted page:
       <link rel="preconnect" href="https://fonts.googleapis.com">
       <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
       <link href="https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&display=swap" rel="stylesheet">
       <link href="/members/css/sat-ui.css?v=1" rel="stylesheet">
   - Put class="sat" on <body>. Every rule below is either a token on :root,
     scoped under .sat, or a .sat-* class, so pages still carrying the old
     lbe-responsive.css or a third-party stylesheet are not disturbed.
   - Colours: navy #000E17, blue #38B6FF, dark blue #1075B9, tints/shades of
     that blue, neutral greys, white. One functional red for errors and
     delete only. No other hues.
   - Icons: Lucide line icons as an inline SVG sprite (<svg class="sat-i">
     <use href="#i-search"/></svg>), see design/assets/icons.svg.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  /* brand */
  --sat-navy:#000E17;
  --sat-blue:#38B6FF;            /* brand blue: accents, rings, focus, progress */
  --sat-blue-dark:#1075B9;       /* brand dark blue: filled buttons, links */

  /* blue scale, derived from #38B6FF only */
  --sat-blue-25:#F5FBFF;
  --sat-blue-50:#EDF8FF;
  --sat-blue-100:#E1F3FF;        /* active nav pill, selected tab */
  --sat-blue-200:#C4E8FF;        /* selected borders */
  --sat-blue-300:#97D6FF;
  --sat-blue-400:#66C6FF;
  --sat-blue-500:#38B6FF;
  --sat-blue-600:#2196E0;
  --sat-blue-700:#1075B9;
  --sat-blue-800:#0C5E95;
  --sat-blue-900:#0A466F;

  /* neutrals (cool, leaning toward the navy) */
  --sat-white:#FFFFFF;
  --sat-grey-25:#F7F9FB;         /* page background */
  --sat-grey-50:#F1F4F7;         /* subtle fills, table header, chips */
  --sat-grey-100:#E7EBF0;        /* hairline borders */
  --sat-grey-200:#D9DFE6;        /* input borders */
  --sat-grey-300:#BCC5CF;
  --sat-grey-400:#8E99A6;        /* icons, placeholders (not for body text) */
  --sat-grey-500:#5E6A78;        /* secondary text, labels */
  --sat-grey-600:#45505E;
  --sat-grey-700:#23303C;        /* body text */
  --sat-ink:#000E17;             /* headings = brand navy */

  /* functional (errors and delete only) */
  --sat-red:#C2362B;
  --sat-red-50:#FDF1F0;
  --sat-red-200:#F2C9C5;

  /* semantic aliases */
  --sat-bg:var(--sat-grey-25);
  --sat-surface:var(--sat-white);
  --sat-border:var(--sat-grey-100);
  --sat-border-strong:var(--sat-grey-200);
  --sat-text:var(--sat-grey-700);
  --sat-text-2:var(--sat-grey-500);
  --sat-text-3:var(--sat-grey-400);
  --sat-link:var(--sat-blue-700);
  --sat-primary:var(--sat-blue-700);
  --sat-primary-hover:var(--sat-blue-800);
  --sat-accent:var(--sat-blue-500);
  --sat-accent-soft:var(--sat-blue-100);

  /* type */
  --sat-font:'Figtree',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --sat-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
  --sat-fs-11:11px;  /* group labels (uppercase) */
  --sat-fs-12:12px;  /* meta, chips, help text */
  --sat-fs-13:13px;  /* small UI, table cells */
  --sat-fs-14:14px;  /* default UI + body */
  --sat-fs-16:16px;  /* lead text, large inputs, result text */
  --sat-fs-18:18px;  /* card titles (large) */
  --sat-fs-20:20px;  /* section titles */
  --sat-fs-24:24px;  /* page titles */
  --sat-fs-30:30px;  /* stat numbers */

  /* spacing (4px base) */
  --sat-s1:4px; --sat-s2:8px; --sat-s3:12px; --sat-s4:16px; --sat-s5:20px;
  --sat-s6:24px; --sat-s7:28px; --sat-s8:32px; --sat-s10:40px; --sat-s12:48px;

  /* radii */
  --sat-r-sm:8px;    /* small controls, chips with corners, kbd */
  --sat-r-md:10px;   /* inputs, buttons, nav items */
  --sat-r-lg:16px;   /* cards */
  --sat-r-xl:20px;   /* modals, command palette */
  --sat-r-pill:999px;

  /* shadows (navy at low alpha) */
  --sat-sh-xs:0 1px 2px rgba(0,14,23,.04);
  --sat-sh-sm:0 1px 2px rgba(0,14,23,.04),0 2px 8px rgba(0,14,23,.04);
  --sat-sh-md:0 1px 3px rgba(0,14,23,.05),0 6px 16px rgba(0,14,23,.07);
  --sat-sh-lg:0 4px 12px rgba(0,14,23,.08),0 24px 48px rgba(0,14,23,.16);
  --sat-focus:0 0 0 3px rgba(56,182,255,.35);

  /* layout */
  --sat-sidebar-w:248px;
  --sat-sidebar-w-collapsed:72px;
  --sat-topbar-h:64px;
  --sat-aside-w:300px;
  --sat-content-max:1240px;
  --sat-ease:cubic-bezier(.2,.7,.2,1);
}

/* ---------- 2. Base (scoped to body.sat) ---------- */
body.sat{
  margin:0;min-height:100vh;
  font-family:var(--sat-font);font-size:var(--sat-fs-14);line-height:1.55;color:var(--sat-text);
  background:
    radial-gradient(900px 520px at 88% -8%,rgba(56,182,255,.10),rgba(56,182,255,0) 62%),
    radial-gradient(700px 420px at 12% 108%,rgba(56,182,255,.06),rgba(56,182,255,0) 60%),
    var(--sat-bg);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
:where(.sat) *,:where(.sat) *::before,:where(.sat) *::after{box-sizing:border-box}
:where(.sat) :where(h1,h2,h3,h4){color:var(--sat-ink);margin:0;font-weight:600;line-height:1.25;letter-spacing:-.01em}
:where(.sat) p{margin:0 0 var(--sat-s3)}
:where(.sat) a{color:var(--sat-link);text-decoration:none}
:where(.sat) a:where(:hover){text-decoration:underline}
:where(.sat) img{max-width:100%;height:auto}
:where(.sat) :where(ul,ol){margin:0;padding:0}
:where(.sat) button{font-family:inherit}
:where(.sat) :where(:focus-visible){outline:none;box-shadow:var(--sat-focus)}
:where(.sat) ::selection{background:var(--sat-blue-200);color:var(--sat-ink)}
.sat-num{font-variant-numeric:tabular-nums}
.sat-mono{font-family:var(--sat-mono);font-size:.92em}

/* ---------- 3. Icons ---------- */
.sat-i{width:18px;height:18px;flex:none;display:inline-block;vertical-align:middle;
  stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.sat-i--sm{width:16px;height:16px}
.sat-i--xs{width:14px;height:14px}
.sat-i--lg{width:22px;height:22px}
.sat-i--fill{fill:currentColor}

/* ---------- 4. App layout ---------- */
.sat-app{display:grid;grid-template-columns:var(--sat-sidebar-w) minmax(0,1fr);min-height:100vh;transition:grid-template-columns .2s var(--sat-ease)}
.sat-main{min-width:0;display:flex;flex-direction:column}
.sat-content{width:100%;max-width:var(--sat-content-max);margin:0 auto;padding:var(--sat-s6) var(--sat-s8) var(--sat-s12)}
.sat-content--wide{max-width:none}
.sat-content--narrow{max-width:880px}
.sat-split{display:grid;grid-template-columns:minmax(0,1fr) var(--sat-aside-w);gap:var(--sat-s6);align-items:start}
.sat-split--wide-aside{grid-template-columns:minmax(0,1fr) 340px}
.sat-aside{display:flex;flex-direction:column;gap:var(--sat-s4);position:sticky;top:calc(var(--sat-topbar-h) + 16px)}
.sat-footer{margin-top:auto;padding:var(--sat-s5) var(--sat-s8);color:var(--sat-text-3);font-size:var(--sat-fs-12);text-align:center}

/* ---------- 5. Sidebar ---------- */
.sat-sidebar{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;
  background:var(--sat-surface);border-right:1px solid var(--sat-border);z-index:40}
.sat-sidebar__head{height:var(--sat-topbar-h);display:flex;align-items:center;gap:var(--sat-s2);padding:0 var(--sat-s4) 0 var(--sat-s5);position:relative;flex:none}
.sat-brand{display:flex;align-items:center;min-width:0}
.sat-brand img{display:block;height:42px;width:auto}
.sat-brand .sat-brand__mark{display:none;height:32px;width:32px}
.sat-drawer-close{margin-left:auto}
.sat-collapse{position:absolute;right:-13px;top:22px;width:26px;height:26px;border-radius:50%;
  border:1px solid var(--sat-border);background:var(--sat-surface);color:var(--sat-text-2);box-shadow:var(--sat-sh-xs);
  display:grid;place-items:center;cursor:pointer;padding:0;transition:color .15s,border-color .15s}
.sat-collapse:hover{color:var(--sat-blue-700);border-color:var(--sat-blue-200)}
.sat-collapse .sat-i{width:14px;height:14px;transition:transform .2s var(--sat-ease)}
.sat-sidebar__body{flex:1;overflow-y:auto;overflow-x:hidden;padding:var(--sat-s2) var(--sat-s3) var(--sat-s4);scrollbar-width:thin}
.sat-sidebar__foot{flex:none;padding:var(--sat-s3);border-top:1px solid var(--sat-border)}

.sat-nav{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.sat-nav + .sat-nav-label{margin-top:var(--sat-s4)}
.sat-nav-label{display:flex;align-items:center;justify-content:space-between;padding:var(--sat-s2) var(--sat-s3) var(--sat-s1);
  font-size:var(--sat-fs-11);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--sat-text-3);white-space:nowrap}
.sat-nav__item{display:flex;align-items:center;gap:var(--sat-s3);min-height:36px;padding:7px var(--sat-s3);
  border-radius:var(--sat-r-md);color:var(--sat-grey-600);font-weight:500;font-size:var(--sat-fs-14);line-height:1.3;
  text-decoration:none;cursor:pointer;background:none;border:0;width:100%;text-align:left;position:relative;white-space:nowrap}
.sat a.sat-nav__item:hover,.sat-nav__item:hover{background:var(--sat-grey-50);color:var(--sat-ink);text-decoration:none}
.sat-nav__item .sat-i{color:var(--sat-text-3)}
.sat-nav__item:hover .sat-i{color:var(--sat-grey-600)}
.sat-nav__item.is-active,.sat a.sat-nav__item.is-active{background:var(--sat-blue-100);color:var(--sat-blue-800);font-weight:600}
.sat-nav__item.is-active .sat-i{color:var(--sat-blue-700)}
.sat-nav__text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.sat-nav__meta{margin-left:auto;font-size:var(--sat-fs-12);color:var(--sat-text-3);font-weight:500}
.sat-nav__chev{margin-left:auto;transition:transform .2s var(--sat-ease)}
.sat-nav__group.is-open > .sat-nav__item .sat-nav__chev{transform:rotate(90deg)}
.sat-nav__group > .sat-nav__item.is-active{background:none}
.sat-nav__group > .sat-nav__item.is-active:hover{background:var(--sat-grey-50)}
.sat-nav__sub{list-style:none;margin:2px 0 4px;padding:0 0 0 22px;display:none;position:relative}
.sat-nav__sub::before{content:"";position:absolute;left:20px;top:4px;bottom:4px;width:1px;background:var(--sat-border)}
.sat-nav__group.is-open > .sat-nav__sub{display:block}
.sat-nav__sub .sat-nav__item{min-height:32px;padding:6px var(--sat-s3) 6px 14px;font-size:var(--sat-fs-13);font-weight:500;color:var(--sat-grey-500)}
.sat-nav__sub .sat-nav__item.is-active{background:var(--sat-blue-50);color:var(--sat-blue-800);font-weight:600}
.sat-nav__sub .sat-nav__item.is-active::before{content:"";position:absolute;left:-2px;top:8px;bottom:8px;width:2px;border-radius:2px;background:var(--sat-accent)}
.sat-nav__star{margin-left:auto;color:var(--sat-text-3);opacity:0;transition:opacity .15s}
.sat-nav__item:hover .sat-nav__star,.sat-nav__star.is-on{opacity:1}
.sat-nav__star.is-on{color:var(--sat-blue-600)}
.sat-nav__star.is-on .sat-i{fill:currentColor}

/* credits block at the sidebar foot */
.sat-credits-mini{padding:var(--sat-s3);border-radius:var(--sat-r-md);background:var(--sat-blue-25);border:1px solid var(--sat-blue-100)}
.sat-credits-mini__row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sat-s2);font-size:var(--sat-fs-12);color:var(--sat-text-2)}
.sat-credits-mini__num{font-size:var(--sat-fs-16);font-weight:700;color:var(--sat-ink);font-variant-numeric:tabular-nums}
.sat-credits-mini .sat-meter{margin:var(--sat-s2) 0 6px}

/* collapsed sidebar (desktop): body.sat-collapsed */
.sat-collapsed .sat-app{grid-template-columns:var(--sat-sidebar-w-collapsed) minmax(0,1fr)}
.sat-collapsed .sat-sidebar__head{padding:0;justify-content:center}
.sat-collapsed .sat-brand .sat-brand__full{display:none}
.sat-collapsed .sat-brand .sat-brand__mark{display:block}
.sat-collapsed .sat-collapse .sat-i{transform:rotate(180deg)}
.sat-collapsed .sat-sidebar__body{padding-left:var(--sat-s2);padding-right:var(--sat-s2)}
.sat-collapsed .sat-nav-label{justify-content:center;font-size:0;padding:var(--sat-s3) 0 var(--sat-s1)}
.sat-collapsed .sat-nav-label::after{content:"";width:18px;height:1px;background:var(--sat-border)}
.sat-collapsed .sat-nav__item{justify-content:center;padding:9px 0;gap:0}
.sat-collapsed .sat-nav__text,.sat-collapsed .sat-nav__meta,.sat-collapsed .sat-nav__chev,
.sat-collapsed .sat-nav__star,.sat-collapsed .sat-nav__sub,.sat-collapsed .sat-credits-mini__row,
.sat-collapsed .sat-credits-mini .sat-meter,.sat-collapsed .sat-credits-mini__hint{display:none}
.sat-collapsed .sat-nav__group.is-open > .sat-nav__sub{display:none}
.sat-collapsed .sat-credits-mini{padding:var(--sat-s2);display:grid;place-items:center;background:none;border:0}
.sat-collapsed .sat-credits-mini__icon{display:grid !important}
.sat-credits-mini__icon{display:none;place-items:center;width:36px;height:36px;border-radius:var(--sat-r-md);background:var(--sat-blue-50);color:var(--sat-blue-700)}

/* ---------- 6. Top bar ---------- */
.sat-topbar{position:sticky;top:0;z-index:30;height:var(--sat-topbar-h);display:flex;align-items:center;gap:var(--sat-s3);
  padding:0 var(--sat-s8);background:rgba(247,249,251,.82);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid transparent}
.sat-topbar.is-scrolled{border-bottom-color:var(--sat-border)}
.sat-topbar .sat-topbar__menu{display:none}
.sat-topbar__brand{display:none}
.sat-topbar__search{flex:1;display:flex;justify-content:center;min-width:0}
.sat-topbar__right{display:flex;align-items:center;gap:var(--sat-s2);margin-left:auto}

.sat-search{display:flex;align-items:center;gap:var(--sat-s2);width:100%;max-width:520px;height:42px;padding:0 6px 0 var(--sat-s4);
  border:1px solid var(--sat-border);border-radius:var(--sat-r-pill);background:var(--sat-surface);box-shadow:var(--sat-sh-xs);
  color:var(--sat-text-3);font:inherit;font-size:var(--sat-fs-14);cursor:text;text-align:left;transition:border-color .15s,box-shadow .15s}
.sat-search:hover{border-color:var(--sat-border-strong)}
.sat-search:focus-visible,.sat-search:focus-within{border-color:var(--sat-blue-300);box-shadow:var(--sat-focus)}
.sat-search__text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sat-search input{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;color:var(--sat-text);padding:0}
.sat-search input::placeholder{color:var(--sat-text-3)}
.sat-kbd{display:inline-flex;align-items:center;gap:2px;height:24px;padding:0 8px;border-radius:var(--sat-r-sm);
  border:1px solid var(--sat-border);background:var(--sat-grey-50);color:var(--sat-text-2);font:600 var(--sat-fs-12)/1 var(--sat-font);white-space:nowrap}

.sat-chip-btn{display:inline-flex;align-items:center;gap:var(--sat-s2);height:40px;padding:0 var(--sat-s3);border-radius:var(--sat-r-pill);
  border:1px solid var(--sat-border);background:var(--sat-surface);color:var(--sat-text);font:500 var(--sat-fs-13)/1 var(--sat-font);
  cursor:pointer;box-shadow:var(--sat-sh-xs);text-decoration:none;white-space:nowrap}
.sat a.sat-chip-btn:hover,.sat-chip-btn:hover{border-color:var(--sat-border-strong);text-decoration:none}
.sat-chip-btn .sat-i{color:var(--sat-blue-700)}
.sat-chip-btn b{color:var(--sat-ink);font-weight:700;font-variant-numeric:tabular-nums}

.sat-account{display:flex;align-items:center;gap:10px;height:48px;padding:4px 10px 4px 5px;border-radius:var(--sat-r-md);
  border:1px solid var(--sat-border);background:var(--sat-surface);box-shadow:var(--sat-sh-xs);cursor:pointer;text-align:left;font:inherit;color:inherit}
.sat-account:hover{border-color:var(--sat-border-strong)}
.sat-account__text{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.sat-account__name{font-weight:600;color:var(--sat-ink);font-size:var(--sat-fs-13)}
.sat-account__mail{font-size:var(--sat-fs-12);color:var(--sat-text-2);max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sat-account .sat-i{color:var(--sat-text-3)}

.sat-avatar{width:36px;height:36px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--sat-blue-100);color:var(--sat-blue-800);font-weight:700;font-size:var(--sat-fs-13);letter-spacing:.02em}
.sat-avatar--sm{width:28px;height:28px;font-size:var(--sat-fs-11)}
.sat-avatar--lg{width:48px;height:48px;font-size:var(--sat-fs-16)}
.sat-avatar--navy{background:var(--sat-navy);color:#fff}

/* trial / announcement banner under the top bar */
.sat-banner{display:flex;align-items:center;gap:var(--sat-s3);flex-wrap:wrap;margin:0 var(--sat-s8);padding:10px var(--sat-s4);
  border-radius:var(--sat-r-md);background:var(--sat-navy);color:#fff;font-size:var(--sat-fs-13)}
.sat-banner .sat-i{color:var(--sat-blue)}
.sat-banner b{font-variant-numeric:tabular-nums}
.sat-banner a{color:var(--sat-blue);font-weight:600}
.sat-banner__end{margin-left:auto}

/* ---------- 7. Page header ---------- */
.sat-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sat-s4);flex-wrap:wrap;margin:var(--sat-s2) 0 var(--sat-s6)}
.sat-page-head__main{min-width:0;display:flex;gap:var(--sat-s4);align-items:center}
.sat-page-title{font-size:var(--sat-fs-24);font-weight:600;color:var(--sat-ink);letter-spacing:-.015em;line-height:1.2}
.sat-page-sub{margin-top:4px;color:var(--sat-text-2);font-size:var(--sat-fs-14)}
.sat-page-actions{display:flex;gap:var(--sat-s2);align-items:center;flex-wrap:wrap}
.sat-page-icon{width:48px;height:48px;border-radius:14px;flex:none;display:grid;place-items:center;background:var(--sat-surface);
  border:1px solid var(--sat-border);color:var(--sat-blue-700);box-shadow:var(--sat-sh-xs)}
.sat-page-icon .sat-i{width:22px;height:22px}
.sat-crumbs{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:var(--sat-fs-13);color:var(--sat-text-2);margin-bottom:6px}
.sat-crumbs a{color:var(--sat-text-2)}
.sat-crumbs a:hover{color:var(--sat-blue-700)}
.sat-crumbs .sat-i{width:14px;height:14px;color:var(--sat-text-3)}

.sat-section-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sat-s3);margin:var(--sat-s8) 0 var(--sat-s3)}
.sat-section-title{font-size:var(--sat-fs-18);font-weight:600;color:var(--sat-ink)}
.sat-link-quiet{display:inline-flex;align-items:center;gap:2px;color:var(--sat-text-2);font-weight:500;font-size:var(--sat-fs-13)}
.sat a.sat-link-quiet:hover{color:var(--sat-blue-700);text-decoration:none}

/* ---------- 8. Cards ---------- */
.sat-card{background:var(--sat-surface);border:1px solid var(--sat-border);border-radius:var(--sat-r-lg);box-shadow:var(--sat-sh-sm)}
.sat-card--pad{padding:var(--sat-s6)}
.sat-card--flat{box-shadow:none}
.sat-card--tint{background:var(--sat-blue-25);border-color:var(--sat-blue-100);box-shadow:none}
.sat-card--navy{background:var(--sat-navy);border-color:var(--sat-navy);color:#C9D3DC}
.sat-card--navy h2,.sat-card--navy h3,.sat-card--navy .sat-card__title{color:#fff}
.sat-card__head{display:flex;align-items:center;justify-content:space-between;gap:var(--sat-s3);padding:var(--sat-s4) var(--sat-s5);border-bottom:1px solid var(--sat-border)}
.sat-card__head--plain{border-bottom:0;padding-bottom:0}
.sat-card__title{font-size:var(--sat-fs-16);font-weight:600;color:var(--sat-ink);display:flex;align-items:center;gap:var(--sat-s2)}
.sat-card__title .sat-i{color:var(--sat-blue-700)}
.sat-card__sub{font-size:var(--sat-fs-13);color:var(--sat-text-2);margin-top:2px}
.sat-card__body{padding:var(--sat-s5)}
.sat-card__foot{display:flex;align-items:center;justify-content:space-between;gap:var(--sat-s3);flex-wrap:wrap;
  padding:var(--sat-s3) var(--sat-s5);border-top:1px solid var(--sat-border);background:var(--sat-grey-25);border-radius:0 0 var(--sat-r-lg) var(--sat-r-lg)}
a.sat-card--link,.sat-card--link{display:block;color:inherit;text-decoration:none;transition:border-color .15s,box-shadow .15s,transform .15s}
.sat a.sat-card--link:hover,.sat-card--link:hover{border-color:var(--sat-blue-200);box-shadow:var(--sat-sh-md);text-decoration:none}

/* tool tile (home quick-launch, section page, search results) */
.sat-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:var(--sat-s3)}
.sat-tile{position:relative;display:flex;flex-direction:column;gap:var(--sat-s2);padding:var(--sat-s4);min-height:112px;
  background:var(--sat-surface);border:1px solid var(--sat-border);border-radius:14px;color:inherit;text-decoration:none;
  transition:border-color .15s,box-shadow .15s}
.sat a.sat-tile:hover,.sat-tile:hover{border-color:var(--sat-blue-200);box-shadow:var(--sat-sh-md);text-decoration:none}
.sat-tile__icon{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--sat-blue-50);color:var(--sat-blue-700)}
.sat-tile__title{font-weight:600;color:var(--sat-ink);font-size:var(--sat-fs-14);line-height:1.3;padding-right:24px}
.sat-tile__meta{margin-top:auto;display:flex;align-items:center;gap:var(--sat-s2);flex-wrap:wrap;font-size:var(--sat-fs-12);color:var(--sat-text-2)}
.sat-tile__star{position:absolute;top:10px;right:10px}
.sat-tile--locked .sat-tile__icon{background:var(--sat-grey-50);color:var(--sat-text-3)}
.sat-tile__thumb{margin:-16px -16px 4px;border-radius:13px 13px 0 0;overflow:hidden;aspect-ratio:16/9;background:var(--sat-grey-50);
  display:grid;place-items:center;color:var(--sat-text-3);border-bottom:1px solid var(--sat-border)}
.sat-tile__thumb img{width:100%;height:100%;object-fit:cover;display:block}

/* recent-work card */
.sat-recent{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sat-s4)}
.sat-recent-card{position:relative;display:flex;flex-direction:column;gap:var(--sat-s2);padding:var(--sat-s5);
  background:var(--sat-surface);border:1px solid var(--sat-border);border-radius:var(--sat-r-lg);box-shadow:var(--sat-sh-xs);color:inherit;text-decoration:none;
  transition:border-color .15s,box-shadow .15s}
.sat a.sat-recent-card:hover,.sat-recent-card:hover{border-color:var(--sat-blue-200);box-shadow:var(--sat-sh-md);text-decoration:none}
.sat-recent-card__title{font-weight:600;color:var(--sat-ink);font-size:var(--sat-fs-16);line-height:1.35;padding-right:32px}
.sat-recent-card__text{color:var(--sat-text-2);font-size:var(--sat-fs-13);line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sat-recent-card__foot{display:flex;align-items:center;justify-content:space-between;gap:var(--sat-s2);margin-top:auto;padding-top:var(--sat-s2)}
.sat-recent-card .sat-more{position:absolute;top:14px;right:12px}

.sat-meta{display:flex;align-items:center;gap:var(--sat-s3);flex-wrap:wrap;font-size:var(--sat-fs-12);color:var(--sat-text-2)}
.sat-meta span{display:inline-flex;align-items:center;gap:5px}
.sat-meta .sat-i{width:14px;height:14px;color:var(--sat-text-3)}

/* stat card */
.sat-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--sat-s3)}
.sat-stat{padding:var(--sat-s4) var(--sat-s5);background:var(--sat-surface);border:1px solid var(--sat-border);border-radius:14px}
.sat-stat__label{font-size:var(--sat-fs-12);color:var(--sat-text-2);display:flex;align-items:center;gap:6px}
.sat-stat__label .sat-i{width:14px;height:14px;color:var(--sat-blue-700)}
.sat-stat__value{font-size:var(--sat-fs-24);font-weight:700;color:var(--sat-ink);margin-top:4px;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.sat-stat__note{font-size:var(--sat-fs-12);color:var(--sat-text-2);margin-top:2px}
.sat-stat--accent{background:var(--sat-blue-25);border-color:var(--sat-blue-100)}

/* simple list rows (side panels, favourites, saved articles) */
.sat-list{list-style:none;margin:0;padding:0}
.sat-list__row{display:flex;align-items:center;gap:var(--sat-s3);padding:10px 0;border-top:1px solid var(--sat-border)}
.sat-list__row:first-child{border-top:0}
.sat-list__main{flex:1;min-width:0}
.sat-list__title{font-weight:600;color:var(--sat-ink);font-size:var(--sat-fs-13);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.sat a.sat-list__title:hover{color:var(--sat-blue-700);text-decoration:none}
.sat-list__sub{font-size:var(--sat-fs-12);color:var(--sat-text-2)}
.sat-list__icon{width:32px;height:32px;border-radius:9px;flex:none;display:grid;place-items:center;background:var(--sat-blue-50);color:var(--sat-blue-700)}
.sat-list__icon .sat-i{width:16px;height:16px}

/* ---------- 9. Buttons ---------- */
.sat-btn{--h:40px;display:inline-flex;align-items:center;justify-content:center;gap:var(--sat-s2);height:var(--h);padding:0 var(--sat-s4);
  border-radius:var(--sat-r-md);border:1px solid transparent;font:600 var(--sat-fs-14)/1 var(--sat-font);letter-spacing:0;
  cursor:pointer;text-decoration:none;white-space:nowrap;user-select:none;transition:background .15s,border-color .15s,color .15s,box-shadow .15s}
.sat a.sat-btn:hover{text-decoration:none}
.sat-btn:disabled,.sat-btn.is-disabled{opacity:.5;cursor:not-allowed}
.sat-btn--primary{background:var(--sat-primary);color:#fff;box-shadow:0 1px 2px rgba(0,14,23,.12),inset 0 1px 0 rgba(255,255,255,.12)}
.sat-btn--primary:hover:not(:disabled){background:var(--sat-primary-hover);color:#fff}
.sat-btn--brand{background:var(--sat-blue);color:var(--sat-navy)}
.sat-btn--brand:hover:not(:disabled){background:var(--sat-blue-400)}
.sat-btn--secondary{background:var(--sat-surface);color:var(--sat-ink);border-color:var(--sat-border-strong);box-shadow:var(--sat-sh-xs)}
.sat-btn--secondary:hover:not(:disabled){background:var(--sat-grey-25);border-color:var(--sat-grey-300)}
.sat-btn--soft{background:var(--sat-blue-100);color:var(--sat-blue-800)}
.sat-btn--soft:hover:not(:disabled){background:var(--sat-blue-200)}
.sat-btn--ghost{background:transparent;color:var(--sat-grey-600)}
.sat-btn--ghost:hover:not(:disabled){background:var(--sat-grey-50);color:var(--sat-ink)}
.sat-btn--danger{background:var(--sat-surface);color:var(--sat-red);border-color:var(--sat-red-200)}
.sat-btn--danger:hover:not(:disabled){background:var(--sat-red-50)}
.sat-btn--danger-solid{background:var(--sat-red);color:#fff}
.sat-btn--sm{--h:32px;padding:0 var(--sat-s3);font-size:var(--sat-fs-13);border-radius:var(--sat-r-sm);gap:6px}
.sat-btn--sm .sat-i{width:16px;height:16px}
.sat-btn--lg{--h:48px;padding:0 var(--sat-s6);font-size:var(--sat-fs-16)}
.sat-btn--block{width:100%}
.sat-btn__cost{display:inline-flex;align-items:center;gap:4px;padding-left:var(--sat-s2);margin-left:2px;border-left:1px solid rgba(255,255,255,.3);font-weight:500;opacity:.92}
.sat-btn--icon{width:var(--h);padding:0}
.sat-btn.is-loading{color:transparent !important;position:relative;pointer-events:none}
.sat-btn.is-loading::after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;animation:sat-spin .7s linear infinite}
.sat-btn--secondary.is-loading::after,.sat-btn--ghost.is-loading::after{border-color:var(--sat-grey-200);border-top-color:var(--sat-blue-700)}

.sat-icon-btn{width:36px;height:36px;border-radius:var(--sat-r-md);display:inline-grid;place-items:center;border:1px solid transparent;
  background:transparent;color:var(--sat-text-2);cursor:pointer;padding:0;transition:background .15s,color .15s}
.sat-icon-btn:hover{background:var(--sat-grey-50);color:var(--sat-ink)}
.sat-icon-btn--outline{border-color:var(--sat-border);background:var(--sat-surface);box-shadow:var(--sat-sh-xs)}
.sat-icon-btn--sm{width:28px;height:28px;border-radius:var(--sat-r-sm)}
.sat-icon-btn--sm .sat-i{width:16px;height:16px}
.sat-icon-btn.is-on{color:var(--sat-blue-600)}
.sat-icon-btn.is-on .sat-i{fill:currentColor}
.sat-btn-row{display:flex;align-items:center;gap:var(--sat-s2);flex-wrap:wrap}

/* ---------- 10. Segmented tabs ---------- */
.sat-tabs{display:inline-flex;align-items:center;gap:4px;padding:4px;border-radius:12px;background:var(--sat-grey-50);border:1px solid var(--sat-border);max-width:100%;overflow-x:auto;scrollbar-width:none}
.sat-tabs::-webkit-scrollbar{display:none}
.sat-tabs--block{display:flex;width:100%}
.sat-tabs--block .sat-tab{flex:1}
.sat-tab{display:inline-flex;align-items:center;justify-content:center;gap:var(--sat-s2);height:34px;padding:0 var(--sat-s4);border-radius:9px;border:1px solid transparent;
  background:transparent;color:var(--sat-text-2);font:500 var(--sat-fs-13)/1 var(--sat-font);cursor:pointer;white-space:nowrap;text-decoration:none}
.sat a.sat-tab:hover,.sat-tab:hover{color:var(--sat-ink);text-decoration:none}
.sat-tab .sat-i{width:16px;height:16px}
.sat-tab.is-active,.sat-tab[aria-selected="true"]{background:var(--sat-surface);color:var(--sat-blue-800);font-weight:600;border-color:var(--sat-border);box-shadow:var(--sat-sh-xs)}
.sat-tab.is-active .sat-i,.sat-tab[aria-selected="true"] .sat-i{color:var(--sat-blue-700)}
.sat-tab__count{min-width:20px;height:18px;padding:0 6px;border-radius:var(--sat-r-pill);background:var(--sat-grey-100);color:var(--sat-text-2);font-size:var(--sat-fs-11);font-weight:600;display:inline-grid;place-items:center}
.sat-tab.is-active .sat-tab__count{background:var(--sat-blue-100);color:var(--sat-blue-800)}
.sat-tab__dot{width:6px;height:6px;border-radius:50%;background:var(--sat-blue)}
.sat-tab-panel[hidden]{display:none}

/* underline tabs (inside dense admin cards) */
.sat-utabs{display:flex;gap:var(--sat-s5);border-bottom:1px solid var(--sat-border);overflow-x:auto;scrollbar-width:none}
.sat-utab{position:relative;padding:10px 0;background:none;border:0;color:var(--sat-text-2);font:500 var(--sat-fs-13)/1.2 var(--sat-font);cursor:pointer;white-space:nowrap;display:inline-flex;gap:6px;align-items:center}
.sat-utab.is-active{color:var(--sat-blue-800);font-weight:600}
.sat-utab.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px;background:var(--sat-blue)}

/* ---------- 11. Forms ---------- */
.sat-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.sat-field + .sat-field{margin-top:var(--sat-s4)}
.sat-grid > .sat-field + .sat-field{margin-top:0}
.sat-label{font-size:var(--sat-fs-13);font-weight:600;color:var(--sat-grey-600);display:flex;align-items:center;gap:6px}
.sat-label small,.sat-label .sat-opt{font-weight:400;color:var(--sat-text-3)}
.sat-help{font-size:var(--sat-fs-12);color:var(--sat-text-2);line-height:1.45}
.sat-help--error{color:var(--sat-red)}
.sat-field-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sat-s3)}

.sat-input,.sat-select,.sat-textarea{width:100%;min-height:42px;padding:9px 12px;border:1px solid var(--sat-border-strong);border-radius:var(--sat-r-md);
  background:var(--sat-surface);color:var(--sat-text);font:400 var(--sat-fs-14)/1.45 var(--sat-font);
  transition:border-color .15s,box-shadow .15s;appearance:none;-webkit-appearance:none}
.sat-input::placeholder,.sat-textarea::placeholder{color:var(--sat-text-3)}
.sat-input:hover,.sat-select:hover,.sat-textarea:hover{border-color:var(--sat-grey-300)}
.sat-input:focus,.sat-select:focus,.sat-textarea:focus{outline:none;border-color:var(--sat-blue-400);box-shadow:var(--sat-focus)}
.sat-input:disabled,.sat-select:disabled,.sat-textarea:disabled{background:var(--sat-grey-50);color:var(--sat-text-2);cursor:not-allowed}
.sat-input.is-error,.sat-textarea.is-error,.sat-select.is-error{border-color:var(--sat-red)}
.sat-input--lg{min-height:52px;font-size:var(--sat-fs-16);padding:12px 16px}
.sat-input--sm{min-height:32px;padding:5px 9px;font-size:var(--sat-fs-13);border-radius:var(--sat-r-sm)}
.sat-input--num{width:84px;text-align:right;font-variant-numeric:tabular-nums}
.sat-textarea{min-height:120px;resize:vertical;line-height:1.6}
.sat-textarea--lg{min-height:220px;font-size:var(--sat-fs-16);padding:14px 16px}
.sat-textarea--code{font-family:var(--sat-mono);font-size:var(--sat-fs-13);line-height:1.55;background:var(--sat-grey-25)}
.sat-select{padding-right:38px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235E6A78' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center}

.sat-input-group{position:relative;display:flex;align-items:center}
.sat-input-group > .sat-i{position:absolute;left:14px;color:var(--sat-text-3);pointer-events:none}
.sat-input-group > .sat-input{padding-left:42px}
.sat-input-group > .sat-input--lg{padding-left:46px}
.sat-input-group__end{position:absolute;right:6px;display:flex;gap:4px}

/* input with a fixed text prefix, e.g. the tool's web address */
.sat-addon{display:flex;align-items:stretch;min-height:42px;border:1px solid var(--sat-border-strong);border-radius:var(--sat-r-md);overflow:hidden;background:var(--sat-surface)}
.sat-addon:focus-within{border-color:var(--sat-blue-400);box-shadow:var(--sat-focus)}
.sat-addon__text{display:flex;align-items:center;flex:none;padding:0 10px 0 12px;max-width:60%;background:var(--sat-grey-50);color:var(--sat-text-2);
  font-family:var(--sat-mono);font-size:var(--sat-fs-12);border-right:1px solid var(--sat-border);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sat-addon .sat-input{border:0;border-radius:0;box-shadow:none;min-height:40px}

.sat-check,.sat-radio{display:inline-flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:var(--sat-fs-14);color:var(--sat-text);line-height:1.4}
.sat-check input,.sat-radio input{appearance:none;-webkit-appearance:none;flex:none;width:18px;height:18px;margin:1px 0 0;border:1.5px solid var(--sat-grey-300);background:var(--sat-surface);cursor:pointer;display:grid;place-items:center;transition:background .15s,border-color .15s}
.sat-check input{border-radius:5px}
.sat-radio input{border-radius:50%}
.sat-check input:checked{background:var(--sat-blue-700);border-color:var(--sat-blue-700);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");background-size:12px;background-position:center;background-repeat:no-repeat}
.sat-radio input:checked{border-color:var(--sat-blue-700);box-shadow:inset 0 0 0 4px var(--sat-surface);background:var(--sat-blue-700)}
.sat-check input:focus-visible,.sat-radio input:focus-visible{box-shadow:var(--sat-focus)}
.sat-check--done span{color:var(--sat-text-3);text-decoration:line-through}

.sat-switch{position:relative;display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:var(--sat-fs-13);color:var(--sat-text)}
.sat-switch input{appearance:none;-webkit-appearance:none;width:36px;height:20px;border-radius:var(--sat-r-pill);background:var(--sat-grey-200);margin:0;cursor:pointer;position:relative;transition:background .2s;flex:none}
.sat-switch input::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,14,23,.2);transition:transform .2s var(--sat-ease)}
.sat-switch input:checked{background:var(--sat-blue-600)}
.sat-switch input:checked::after{transform:translateX(16px)}
.sat-switch input:focus-visible{box-shadow:var(--sat-focus)}

.sat-range{width:100%;accent-color:var(--sat-blue-700)}
.sat-range-row{display:flex;align-items:center;gap:var(--sat-s3)}
.sat-range-row output{min-width:44px;text-align:right;font-variant-numeric:tabular-nums;font-weight:600;color:var(--sat-ink);font-size:var(--sat-fs-13)}

.sat-stepper{display:flex;align-items:stretch;border:1px solid var(--sat-border-strong);border-radius:var(--sat-r-md);overflow:hidden;background:var(--sat-surface)}
.sat-stepper input{flex:1;min-width:0;border:0;padding:0 12px;font:600 var(--sat-fs-16)/1 var(--sat-font);color:var(--sat-ink);text-align:left;background:none;font-variant-numeric:tabular-nums}
.sat-stepper input:focus{outline:none}
.sat-stepper:focus-within{border-color:var(--sat-blue-400);box-shadow:var(--sat-focus)}
.sat-stepper button{width:40px;border:0;border-left:1px solid var(--sat-border);background:var(--sat-grey-25);color:var(--sat-text-2);cursor:pointer;font-size:18px;display:grid;place-items:center}
.sat-stepper button:hover{background:var(--sat-blue-50);color:var(--sat-blue-800)}

.sat-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sat-s2);padding:var(--sat-s6);text-align:center;
  border:1.5px dashed var(--sat-grey-300);border-radius:var(--sat-r-lg);background:var(--sat-grey-25);color:var(--sat-text-2);cursor:pointer;transition:border-color .15s,background .15s}
.sat-drop:hover,.sat-drop.is-over{border-color:var(--sat-blue-400);background:var(--sat-blue-25)}
.sat-drop .sat-i{width:24px;height:24px;color:var(--sat-blue-700)}
.sat-drop input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.sat-drop b{color:var(--sat-ink)}

.sat-counter{font-size:var(--sat-fs-12);color:var(--sat-text-2);font-variant-numeric:tabular-nums}
.sat-counter.is-near{color:var(--sat-blue-800);font-weight:600}
.sat-counter.is-over{color:var(--sat-red);font-weight:600}

fieldset.sat-fieldset{border:0;margin:0;padding:0;min-width:0}
.sat-fieldset legend{font-size:var(--sat-fs-11);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--sat-text-3);margin-bottom:var(--sat-s3);padding:0}

/* ---------- 12. Grids & stacks ---------- */
.sat-grid{display:grid;gap:var(--sat-s4)}
.sat-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.sat-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.sat-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.sat-grid--auto{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.sat-stack{display:flex;flex-direction:column;gap:var(--sat-s4)}
.sat-stack--sm{gap:var(--sat-s2)}
.sat-stack--lg{gap:var(--sat-s6)}
.sat-row{display:flex;align-items:center;gap:var(--sat-s3);flex-wrap:wrap}
.sat-row--between{justify-content:space-between}
.sat-divider{height:1px;background:var(--sat-border);border:0;margin:var(--sat-s5) 0}
.sat-spacer{flex:1}

/* ---------- 13. Chips, badges, tags ---------- */
.sat-chip{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px;border-radius:var(--sat-r-pill);
  background:var(--sat-grey-50);border:1px solid var(--sat-border);color:var(--sat-grey-600);font:500 var(--sat-fs-12)/1 var(--sat-font);white-space:nowrap}
.sat-chip .sat-i{width:13px;height:13px;color:var(--sat-text-3)}
.sat-chip--blue{background:var(--sat-blue-50);border-color:var(--sat-blue-100);color:var(--sat-blue-800)}
.sat-chip--blue .sat-i{color:var(--sat-blue-700)}
.sat-chip--solid{background:var(--sat-blue-700);border-color:var(--sat-blue-700);color:#fff}
.sat-chip--navy{background:var(--sat-navy);border-color:var(--sat-navy);color:#fff}
.sat-chip--outline{background:var(--sat-surface)}
.sat-chip--red{background:var(--sat-red-50);border-color:var(--sat-red-200);color:var(--sat-red)}
.sat-chip--lg{height:30px;padding:0 12px;font-size:var(--sat-fs-13)}
button.sat-chip,a.sat-chip{cursor:pointer;text-decoration:none}
button.sat-chip:hover,.sat a.sat-chip:hover{border-color:var(--sat-blue-200);color:var(--sat-blue-800);text-decoration:none}
.sat-chip.is-active{background:var(--sat-blue-100);border-color:var(--sat-blue-200);color:var(--sat-blue-800);font-weight:600}
.sat-chips{display:flex;gap:var(--sat-s2);flex-wrap:wrap}

.sat-status{display:inline-flex;align-items:center;gap:6px;font-size:var(--sat-fs-12);font-weight:600;color:var(--sat-text-2)}
.sat-status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--sat-grey-300)}
.sat-status--live{color:var(--sat-blue-800)}
.sat-status--live::before{background:var(--sat-blue);box-shadow:0 0 0 3px var(--sat-blue-100)}
.sat-status--busy::before{background:var(--sat-blue);animation:sat-pulse 1.2s ease-in-out infinite}
.sat-status--off{color:var(--sat-red)}
.sat-status--off::before{background:var(--sat-red)}

.sat-count-badge{min-width:18px;height:18px;padding:0 5px;border-radius:var(--sat-r-pill);background:var(--sat-blue-700);color:#fff;font-size:var(--sat-fs-11);font-weight:700;display:inline-grid;place-items:center}

/* ---------- 14. Alerts, banners, empty states ---------- */
.sat-alert{display:flex;gap:var(--sat-s3);align-items:flex-start;padding:var(--sat-s3) var(--sat-s4);border-radius:var(--sat-r-md);
  border:1px solid var(--sat-blue-100);background:var(--sat-blue-25);color:var(--sat-text);font-size:var(--sat-fs-13);line-height:1.5}
.sat-alert > .sat-i{color:var(--sat-blue-700);margin-top:1px}
.sat-alert__title{font-weight:600;color:var(--sat-ink);margin-bottom:2px}
.sat-alert__actions{margin-top:var(--sat-s2);display:flex;gap:var(--sat-s2);flex-wrap:wrap}
.sat-alert--error{border-color:var(--sat-red-200);background:var(--sat-red-50)}
.sat-alert--error > .sat-i{color:var(--sat-red)}
.sat-alert--neutral{border-color:var(--sat-border);background:var(--sat-grey-25)}
.sat-alert--neutral > .sat-i{color:var(--sat-text-2)}

.sat-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--sat-s2);padding:var(--sat-s10) var(--sat-s6);color:var(--sat-text-2)}
.sat-empty__icon{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--sat-blue-50);color:var(--sat-blue-700);margin-bottom:var(--sat-s2)}
.sat-empty__icon .sat-i{width:24px;height:24px}
.sat-empty__title{font-size:var(--sat-fs-16);font-weight:600;color:var(--sat-ink)}
.sat-empty p{max-width:420px;margin:0}
.sat-empty .sat-btn-row{margin-top:var(--sat-s3);justify-content:center}

/* ---------- 15. Progress, meters, spinners, skeleton ---------- */
.sat-meter{height:6px;border-radius:var(--sat-r-pill);background:var(--sat-blue-100);overflow:hidden}
.sat-meter > span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--sat-blue-600),var(--sat-blue))}
.sat-meter--lg{height:8px}
.sat-progress{height:4px;border-radius:var(--sat-r-pill);background:var(--sat-blue-100);overflow:hidden;position:relative}
.sat-progress > span{position:absolute;inset:0 auto 0 0;width:0;background:var(--sat-blue);border-radius:inherit;transition:width .4s var(--sat-ease)}
.sat-progress--indeterminate > span{width:35%;animation:sat-indeterminate 1.4s var(--sat-ease) infinite}
.sat-spinner{width:20px;height:20px;border-radius:50%;border:2px solid var(--sat-blue-100);border-top-color:var(--sat-blue-700);animation:sat-spin .7s linear infinite;flex:none}
.sat-spinner--lg{width:32px;height:32px;border-width:3px}

.sat-steps{display:flex;align-items:center;gap:0;flex-wrap:wrap;row-gap:var(--sat-s2)}
.sat-step{display:flex;align-items:center;gap:8px;font-size:var(--sat-fs-13);color:var(--sat-text-3);font-weight:500}
.sat-step__dot{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--sat-grey-200);background:var(--sat-surface);font-size:var(--sat-fs-11);font-weight:700;color:var(--sat-text-3)}
.sat-step.is-done{color:var(--sat-blue-800)}
.sat-step.is-done .sat-step__dot{background:var(--sat-blue-700);border-color:var(--sat-blue-700);color:#fff}
.sat-step.is-active{color:var(--sat-ink);font-weight:600}
.sat-step.is-active .sat-step__dot{border-color:var(--sat-blue);color:var(--sat-blue-800);box-shadow:0 0 0 4px var(--sat-blue-100)}
.sat-step__bar{flex:1 1 24px;min-width:16px;height:1.5px;background:var(--sat-grey-200);margin:0 10px}
.sat-step.is-done + .sat-step__bar{background:var(--sat-blue-300)}

.sat-skel{border-radius:6px;background:linear-gradient(90deg,var(--sat-grey-50) 0%,var(--sat-grey-100) 50%,var(--sat-grey-50) 100%);background-size:200% 100%;animation:sat-shimmer 1.4s linear infinite}

/* run panel (tool page while a job runs) */
.sat-run{display:flex;flex-direction:column;gap:var(--sat-s3);padding:var(--sat-s6);border-radius:var(--sat-r-lg);background:var(--sat-blue-25);border:1px solid var(--sat-blue-100)}
.sat-run__head{display:flex;align-items:center;gap:var(--sat-s3)}
.sat-run__title{font-weight:600;color:var(--sat-ink)}
.sat-run__time{margin-left:auto;font-size:var(--sat-fs-13);color:var(--sat-text-2);font-variant-numeric:tabular-nums}
.sat-run__tip{font-size:var(--sat-fs-13);color:var(--sat-text-2);min-height:20px;transition:opacity .3s}

/* ---------- 16. Tables ---------- */
.sat-table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.sat-table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--sat-fs-13)}
.sat-table th{position:sticky;top:0;z-index:1;text-align:left;font-weight:600;font-size:var(--sat-fs-12);color:var(--sat-text-2);
  background:var(--sat-grey-25);padding:10px var(--sat-s4);border-bottom:1px solid var(--sat-border);white-space:nowrap}
.sat-table th a{color:inherit;display:inline-flex;align-items:center;gap:4px}
.sat-table th a:hover{color:var(--sat-blue-700);text-decoration:none}
.sat-table td{padding:10px var(--sat-s4);border-bottom:1px solid var(--sat-border);vertical-align:middle;color:var(--sat-text)}
.sat-table tbody tr:last-child td{border-bottom:0}
.sat-table tbody tr:hover td{background:var(--sat-blue-25)}
.sat-table tr.is-selected td{background:var(--sat-blue-50)}
.sat-table tr.is-dirty td:first-child{box-shadow:inset 3px 0 0 var(--sat-blue)}
.sat-table .sat-col-check{width:44px;padding-right:0}
.sat-table tr.is-deleting td{background:var(--sat-red-50);color:var(--sat-text-2)}
.sat-table tr.is-deleting .sat-cell-title{text-decoration:line-through;color:var(--sat-red)}
.sat-table .sat-col-num{text-align:right;font-variant-numeric:tabular-nums}
.sat-table .sat-col-actions{text-align:right;white-space:nowrap;width:1%}
.sat-cell-title{font-weight:600;color:var(--sat-ink);display:block}
.sat-cell-sub{font-size:var(--sat-fs-12);color:var(--sat-text-2);display:block;margin-top:1px}
.sat-cell-person{display:flex;align-items:center;gap:var(--sat-s3);min-width:200px}
.sat-table--compact td{padding:7px var(--sat-s3)}
.sat-table--compact th{padding:8px var(--sat-s3)}

.sat-toolbar{display:flex;align-items:center;gap:var(--sat-s2);flex-wrap:wrap;padding:var(--sat-s3) var(--sat-s4);border-bottom:1px solid var(--sat-border)}
.sat-toolbar .sat-input-group{flex:1 1 240px;max-width:360px}
.sat-toolbar .sat-select{width:auto;min-height:36px;padding-top:6px;padding-bottom:6px;font-size:var(--sat-fs-13)}
.sat-toolbar .sat-input{min-height:36px;padding-top:6px;padding-bottom:6px;font-size:var(--sat-fs-13)}

.sat-pager{display:flex;align-items:center;justify-content:space-between;gap:var(--sat-s3);flex-wrap:wrap;padding:var(--sat-s3) var(--sat-s4);border-top:1px solid var(--sat-border);font-size:var(--sat-fs-13);color:var(--sat-text-2)}
.sat-pager__pages{display:flex;gap:4px}
.sat-pager__pages a,.sat-pager__pages span{min-width:32px;height:32px;padding:0 8px;border-radius:var(--sat-r-sm);display:inline-grid;place-items:center;color:var(--sat-text-2);border:1px solid transparent}
.sat-pager__pages a:hover{background:var(--sat-grey-50);color:var(--sat-ink);text-decoration:none}
.sat-pager__pages .is-current{background:var(--sat-blue-100);color:var(--sat-blue-800);font-weight:600}
.sat-pager__pages .is-disabled{color:var(--sat-grey-300)}

/* sticky save bar (admin bulk edits, long forms) */
.sat-savebar{position:sticky;bottom:16px;z-index:20;display:flex;align-items:center;gap:var(--sat-s3);flex-wrap:wrap;
  margin-top:var(--sat-s4);padding:10px 10px 10px var(--sat-s4);border-radius:14px;background:var(--sat-navy);color:#D7E0E8;box-shadow:var(--sat-sh-lg);font-size:var(--sat-fs-13)}
.sat-savebar[hidden]{display:none}
.sat-savebar b{color:#fff}
.sat-savebar .sat-spacer{min-width:8px}
.sat-savebar .sat-btn--ghost{color:#C9D3DC}
.sat-savebar .sat-btn--ghost:hover{background:rgba(255,255,255,.08);color:#fff}

/* ---------- 17. Menus, popovers, tooltips ---------- */
.sat-menu-wrap{position:relative;display:inline-flex}
.sat-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:60;min-width:220px;padding:6px;border-radius:14px;
  background:var(--sat-surface);border:1px solid var(--sat-border);box-shadow:var(--sat-sh-lg);display:none}
.sat-menu.is-open{display:block;animation:sat-pop .14s var(--sat-ease)}
.sat-menu--left{right:auto;left:0}
.sat-menu__head{padding:10px 10px 8px;border-bottom:1px solid var(--sat-border);margin-bottom:6px}
.sat-menu__item{display:flex;align-items:center;gap:10px;width:100%;min-height:36px;padding:7px 10px;border-radius:9px;border:0;background:none;
  color:var(--sat-text);font:500 var(--sat-fs-13)/1.3 var(--sat-font);text-align:left;cursor:pointer;text-decoration:none}
.sat a.sat-menu__item:hover,.sat-menu__item:hover{background:var(--sat-grey-50);color:var(--sat-ink);text-decoration:none}
.sat-menu__item .sat-i{width:16px;height:16px;color:var(--sat-text-3)}
.sat-menu__item--danger{color:var(--sat-red)}
.sat-menu__item--danger .sat-i{color:var(--sat-red)}
.sat-menu__sep{height:1px;background:var(--sat-border);margin:6px 4px}

[data-tip]{position:relative}
[data-tip]:hover::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);
  padding:5px 9px;border-radius:7px;background:var(--sat-navy);color:#fff;font:500 var(--sat-fs-12)/1.3 var(--sat-font);white-space:nowrap;pointer-events:none;z-index:80}
/* sidebar tooltips only appear when the sidebar is collapsed to icons */
.sat-sidebar [data-tip]:hover::after{display:none}
.sat-collapsed .sat-sidebar [data-tip]:hover::after{display:block;left:calc(100% + 10px);bottom:auto;top:50%;transform:translateY(-50%)}

/* ---------- 18. Modal + command palette ---------- */
.sat-overlay{position:fixed;inset:0;z-index:90;background:rgba(0,14,23,.32);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);display:none}
.sat-overlay.is-open{display:block;animation:sat-fade .15s ease}
.sat-modal{position:fixed;z-index:95;left:50%;top:12vh;transform:translateX(-50%);width:min(560px,calc(100vw - 32px));
  background:var(--sat-surface);border-radius:var(--sat-r-xl);box-shadow:var(--sat-sh-lg);display:none;overflow:hidden}
.sat-modal.is-open{display:block;animation:sat-pop .16s var(--sat-ease)}
.sat-modal__head{display:flex;align-items:center;justify-content:space-between;padding:var(--sat-s4) var(--sat-s5);border-bottom:1px solid var(--sat-border)}
.sat-modal__body{padding:var(--sat-s5)}
.sat-modal__foot{display:flex;justify-content:flex-end;gap:var(--sat-s2);padding:var(--sat-s3) var(--sat-s5);border-top:1px solid var(--sat-border);background:var(--sat-grey-25)}

.sat-palette{width:min(640px,calc(100vw - 24px))}
.sat-palette__search{display:flex;align-items:center;gap:var(--sat-s3);padding:0 var(--sat-s5);height:60px;border-bottom:1px solid var(--sat-border)}
.sat-palette__search .sat-i{color:var(--sat-text-3);width:20px;height:20px}
.sat-palette__search input{flex:1;min-width:0;border:0;outline:0;box-shadow:none;font:500 var(--sat-fs-16)/1 var(--sat-font);color:var(--sat-ink);background:none}
.sat-palette__search input::placeholder{color:var(--sat-text-3);font-weight:400}
.sat-palette__list{max-height:min(420px,60vh);overflow-y:auto;padding:6px 8px 10px}
.sat-palette__group{padding:10px 10px 4px;font-size:var(--sat-fs-11);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--sat-text-3)}
.sat-palette__item{display:flex;align-items:center;gap:var(--sat-s3);width:100%;min-height:44px;padding:8px 10px;border-radius:10px;border:0;background:none;
  color:var(--sat-text);font:500 var(--sat-fs-14)/1.3 var(--sat-font);text-align:left;cursor:pointer;text-decoration:none}
.sat-palette__item .sat-list__icon{width:30px;height:30px;border-radius:8px}
.sat-palette__item small{color:var(--sat-text-2);font-size:var(--sat-fs-12);font-weight:400;display:block}
.sat-palette__item .sat-palette__hint{margin-left:auto;font-size:var(--sat-fs-12);color:var(--sat-text-3);white-space:nowrap}
.sat-palette__item.is-active,.sat a.sat-palette__item:hover{background:var(--sat-blue-50);color:var(--sat-ink);text-decoration:none}
.sat-palette__item.is-active .sat-palette__hint{color:var(--sat-blue-800)}
.sat-palette__item mark{background:none;color:var(--sat-blue-800);font-weight:700}
.sat-palette__foot{display:flex;gap:var(--sat-s4);align-items:center;padding:10px var(--sat-s5);border-top:1px solid var(--sat-border);background:var(--sat-grey-25);font-size:var(--sat-fs-12);color:var(--sat-text-2)}
.sat-palette__foot .sat-kbd{height:20px;padding:0 6px;font-size:var(--sat-fs-11)}
.sat-palette__empty{padding:var(--sat-s8) var(--sat-s5);text-align:center;color:var(--sat-text-2)}

/* ---------- 19. Toasts ---------- */
.sat-toasts{position:fixed;z-index:100;bottom:20px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.sat-toast{display:flex;align-items:center;gap:10px;padding:10px 14px 10px 12px;border-radius:12px;background:var(--sat-navy);color:#fff;
  box-shadow:var(--sat-sh-lg);font-size:var(--sat-fs-13);font-weight:500;pointer-events:auto;animation:sat-toast-in .2s var(--sat-ease)}
.sat-toast .sat-i{color:var(--sat-blue);width:18px;height:18px}
.sat-toast--error .sat-i{color:#FF9B92}
.sat-toast.is-leaving{opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s}

/* ---------- 20. Accordion (details/summary) ---------- */
.sat-acc{border:1px solid var(--sat-border);border-radius:var(--sat-r-lg);background:var(--sat-surface);overflow:hidden}
.sat-acc + .sat-acc{margin-top:var(--sat-s3)}
.sat-acc > summary{list-style:none;display:flex;align-items:center;gap:var(--sat-s3);padding:var(--sat-s4) var(--sat-s5);cursor:pointer;font-weight:600;color:var(--sat-ink)}
.sat-acc > summary::-webkit-details-marker{display:none}
.sat-acc > summary .sat-acc__chev{margin-left:auto;color:var(--sat-text-3);transition:transform .2s var(--sat-ease)}
.sat-acc[open] > summary .sat-acc__chev{transform:rotate(180deg)}
.sat-acc > summary .sat-acc__meta{font-weight:400;font-size:var(--sat-fs-12);color:var(--sat-text-2)}
.sat-acc__body{padding:0 var(--sat-s5) var(--sat-s5);border-top:1px solid var(--sat-border);padding-top:var(--sat-s4)}

/* in-page index (long admin forms) */
.sat-toc{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.sat-toc a{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:9px;color:var(--sat-text-2);font-size:var(--sat-fs-13);font-weight:500}
.sat-toc a:hover{background:var(--sat-grey-50);color:var(--sat-ink);text-decoration:none}
.sat-toc a.is-active{background:var(--sat-blue-50);color:var(--sat-blue-800);font-weight:600}
.sat-toc .sat-toc__n{width:20px;height:20px;border-radius:6px;background:var(--sat-grey-50);display:grid;place-items:center;font-size:var(--sat-fs-11);font-weight:700;color:var(--sat-text-2)}
.sat-toc a.is-active .sat-toc__n{background:var(--sat-blue-100);color:var(--sat-blue-800)}

/* long-form layout (admin tool editor): section index | form cards | settings panel */
.sat-form-layout{display:grid;grid-template-columns:200px minmax(0,1fr) 300px;gap:var(--sat-s6);align-items:start}
.sat-form-layout__toc,.sat-form-layout__side{position:sticky;top:calc(var(--sat-topbar-h) + 16px)}
.sat-form-layout section[id],.sat-form-layout details[id]{scroll-margin-top:calc(var(--sat-topbar-h) + 16px)}
@media (max-width:1279px){ .sat-form-layout{grid-template-columns:180px minmax(0,1fr)} .sat-form-layout__side{position:static;grid-column:2} }
@media (max-width:1023px){ .sat-form-layout{grid-template-columns:minmax(0,1fr)} .sat-form-layout__toc{display:none} .sat-form-layout__side{grid-column:auto} }

/* ---------- 21. Result / prose (AI output, HTML content pages) ---------- */
.sat-result,.sat-run,.sat-card[id]{scroll-margin-top:calc(var(--sat-topbar-h) + 16px)}
.sat-result{border:1px solid var(--sat-border);border-radius:var(--sat-r-lg);background:var(--sat-surface);box-shadow:var(--sat-sh-sm);overflow:hidden}
.sat-result__bar{display:flex;align-items:center;gap:var(--sat-s2);flex-wrap:wrap;padding:10px var(--sat-s4);border-bottom:1px solid var(--sat-border);background:var(--sat-grey-25)}
.sat-result__body{padding:var(--sat-s6) var(--sat-s8);max-height:70vh;overflow:auto}
.sat-result__body--full{max-height:none}
.sat-result iframe{display:block;width:100%;border:0;background:#fff}
.sat-prose.is-editing{outline:2px dashed var(--sat-blue-300);outline-offset:12px;border-radius:4px;cursor:text}
.sat-prose.is-editing:focus{outline-color:var(--sat-blue)}
.sat-btn.is-active{background:var(--sat-blue-100);border-color:var(--sat-blue-200);color:var(--sat-blue-800)}
.sat-prose{font-size:var(--sat-fs-16);line-height:1.7;color:var(--sat-text);max-width:760px}
.sat-prose > :first-child{margin-top:0}
.sat-prose h1{font-size:26px;margin:0 0 .6em}
.sat-prose h2{font-size:21px;margin:1.6em 0 .5em}
.sat-prose h3{font-size:18px;margin:1.4em 0 .4em}
.sat-prose p{margin:0 0 1em}
.sat-prose ul,.sat-prose ol{margin:0 0 1em;padding-left:1.4em}
.sat-prose li{margin:.25em 0}
.sat-prose a{color:var(--sat-blue-700);text-decoration:underline;text-underline-offset:2px}
.sat-prose table{width:100%;border-collapse:collapse;margin:0 0 1.2em;font-size:var(--sat-fs-14)}
.sat-prose th,.sat-prose td{border:1px solid var(--sat-border);padding:8px 10px;text-align:left}
.sat-prose th{background:var(--sat-grey-25);font-weight:600;color:var(--sat-ink)}
.sat-prose blockquote{margin:0 0 1em;padding:.4em 1em;border-left:3px solid var(--sat-blue-300);color:var(--sat-text-2)}
.sat-prose img{border-radius:12px}
.sat-prose .sat-video,.sat-video{position:relative;padding-top:56.25%;border-radius:14px;overflow:hidden;background:var(--sat-navy)}
.sat-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* image results */
.sat-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--sat-s3)}
.sat-gallery__item{position:relative;border-radius:14px;overflow:hidden;background:var(--sat-grey-50);border:1px solid var(--sat-border);aspect-ratio:1/1}
.sat-gallery__item img{width:100%;height:100%;object-fit:cover;display:block}
.sat-gallery__actions{position:absolute;right:8px;bottom:8px;display:flex;gap:6px;opacity:0;transition:opacity .15s}
.sat-gallery__item:hover .sat-gallery__actions,.sat-gallery__item:focus-within .sat-gallery__actions{opacity:1}
.sat-gallery__actions .sat-icon-btn{background:rgba(255,255,255,.92);box-shadow:var(--sat-sh-sm)}

/* ---------- 22. Auth (login / register / reset) ---------- */
.sat-auth{min-height:100vh;display:grid;place-items:center;padding:var(--sat-s8) var(--sat-s4)}
.sat-auth__box{width:min(420px,100%)}
.sat-auth__logo{display:flex;justify-content:center;margin-bottom:var(--sat-s6)}
.sat-auth__logo img{height:46px;width:auto}
.sat-auth .sat-card{padding:var(--sat-s8)}
.sat-auth__title{font-size:var(--sat-fs-20);font-weight:600;color:var(--sat-ink);text-align:center}
.sat-auth__sub{text-align:center;color:var(--sat-text-2);margin:4px 0 var(--sat-s5)}
.sat-auth__foot{text-align:center;margin-top:var(--sat-s5);font-size:var(--sat-fs-13);color:var(--sat-text-2)}

/* ---------- 23. Utilities ---------- */
.sat-muted{color:var(--sat-text-2)}
.sat-faint{color:var(--sat-text-3)}
.sat-ink{color:var(--sat-ink)}
.sat-strong{font-weight:600;color:var(--sat-ink)}
.sat-small{font-size:var(--sat-fs-12)}
.sat-text-13{font-size:var(--sat-fs-13)}
.sat-center{text-align:center}
.sat-right{text-align:right}
.sat-nowrap{white-space:nowrap}
.sat-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sat-mt-0{margin-top:0}.sat-mt-2{margin-top:var(--sat-s2)}.sat-mt-4{margin-top:var(--sat-s4)}.sat-mt-6{margin-top:var(--sat-s6)}.sat-mt-8{margin-top:var(--sat-s8)}
.sat-mb-0{margin-bottom:0}.sat-mb-2{margin-bottom:var(--sat-s2)}.sat-mb-4{margin-bottom:var(--sat-s4)}.sat-mb-6{margin-bottom:var(--sat-s6)}
.sat-p-0{padding:0}
.sat-w-full{width:100%}
.sat-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* "Skip to content": the first stop for the Tab key on every page, shown only while it has focus */
.sat-skip{position:fixed;left:var(--sat-s3);top:-80px;z-index:100;padding:10px var(--sat-s4);border-radius:var(--sat-r-md);background:var(--sat-navy);color:#fff;font-size:var(--sat-fs-14);font-weight:600;box-shadow:var(--sat-sh-lg)}
.sat-skip:focus{top:var(--sat-s3);color:#fff;text-decoration:none}
.sat-content{scroll-margin-top:var(--sat-topbar-h)}
[hidden]{display:none !important}

/* ---------- 24. Responsive ---------- */
@media (max-width:1279px){
  .sat-split,.sat-split--wide-aside{grid-template-columns:minmax(0,1fr)}
  .sat-aside{position:static;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
}
@media (max-width:1023px){
  .sat-app,.sat-collapsed .sat-app{grid-template-columns:minmax(0,1fr)}
  .sat-sidebar{position:fixed;left:0;top:0;bottom:0;width:min(300px,86vw);transform:translateX(-102%);transition:transform .22s var(--sat-ease);box-shadow:var(--sat-sh-lg)}
  .sat-drawer-open .sat-sidebar{transform:none}
  .sat-collapse{display:none}
  /* the drawer always shows the full sidebar, even if the desktop view was collapsed */
  .sat-collapsed .sat-sidebar__head{padding:0 var(--sat-s4) 0 var(--sat-s5);justify-content:flex-start}
  .sat-collapsed .sat-brand .sat-brand__full{display:block}
  .sat-collapsed .sat-brand .sat-brand__mark{display:none}
  .sat-collapsed .sat-nav-label{justify-content:space-between;font-size:var(--sat-fs-11);padding:var(--sat-s2) var(--sat-s3) var(--sat-s1)}
  .sat-collapsed .sat-nav-label::after{display:none}
  .sat-collapsed .sat-nav__item{justify-content:flex-start;padding:7px var(--sat-s3);gap:var(--sat-s3)}
  .sat-collapsed .sat-nav__text,.sat-collapsed .sat-nav__meta,.sat-collapsed .sat-nav__chev,.sat-collapsed .sat-nav__star{display:initial}
  .sat-collapsed .sat-nav__group.is-open > .sat-nav__sub{display:block}
  .sat-collapsed .sat-credits-mini{display:block;padding:var(--sat-s3);background:var(--sat-blue-25);border:1px solid var(--sat-blue-100)}
  .sat-collapsed .sat-credits-mini__row,.sat-collapsed .sat-credits-mini .sat-meter,.sat-collapsed .sat-credits-mini__hint{display:flex}
  .sat-collapsed .sat-credits-mini .sat-meter{display:block}
  .sat-collapsed .sat-credits-mini__icon{display:none !important}
  .sat-collapsed .sat-sidebar [data-tip]:hover::after{display:none}
  .sat-drawer-scrim{position:fixed;inset:0;z-index:35;background:rgba(0,14,23,.32);display:none}
  .sat-drawer-open .sat-drawer-scrim{display:block}
  .sat-topbar{padding:0 var(--sat-s4)}
  .sat-topbar .sat-topbar__menu{display:inline-grid}
  .sat-topbar__brand{display:flex;align-items:center}
  .sat-topbar__brand img{height:30px;width:30px}
  .sat-content{padding:var(--sat-s5) var(--sat-s4) var(--sat-s10)}
  .sat-banner{margin:0 var(--sat-s4)}
  .sat-account__text{display:none}
  .sat-account{height:40px;padding:2px 8px 2px 2px}
  .sat-account .sat-avatar{width:34px;height:34px}
  .sat-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sat-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:719px){
  .sat-topbar__search{justify-content:flex-end;flex:0 0 auto;margin-left:auto}
  .sat-search{width:40px;height:40px;padding:0;justify-content:center;border-radius:50%}
  .sat-search .sat-search__text,.sat-search .sat-kbd{display:none}
  .sat-topbar__right{margin-left:0}
  .sat-chip-btn--credits .sat-chip-btn__label{display:none}
  .sat-page-head{margin-bottom:var(--sat-s5)}
  .sat-page-title{font-size:22px}
  .sat-page-head__main > .sat-page-icon{display:none}
  .sat-grid--2,.sat-grid--3,.sat-grid--4{grid-template-columns:minmax(0,1fr)}
  .sat-recent{grid-template-columns:minmax(0,1fr)}
  .sat-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sat-s2)}
  .sat-tile{min-height:104px;padding:var(--sat-s3)}
  .sat-card--pad{padding:var(--sat-s4)}
  .sat-card__body{padding:var(--sat-s4)}
  .sat-card__head{padding:var(--sat-s3) var(--sat-s4)}
  .sat-result__body{padding:var(--sat-s4);max-height:none}
  .sat-aside{grid-template-columns:minmax(0,1fr)}
  .sat-tabs{display:flex;width:100%}
  .sat-tab{flex:1 0 auto;padding:0 var(--sat-s3)}
  .sat-hide-sm{display:none !important}
  .sat-auth .sat-card{padding:var(--sat-s5)}
  .sat-savebar{bottom:8px}
  .sat-modal{top:8px}
  /* tables become stacked cards on phones when marked .sat-table--stack */
  .sat-table--stack thead{display:none}
  .sat-table--stack,.sat-table--stack tbody,.sat-table--stack tr,.sat-table--stack td{display:block;width:100%}
  .sat-table--stack tr{padding:var(--sat-s3) var(--sat-s4);border-bottom:1px solid var(--sat-border)}
  .sat-table--stack td{border:0;padding:3px 0;display:flex;justify-content:space-between;gap:var(--sat-s3);text-align:right}
  .sat-table--stack td[data-label]::before{content:attr(data-label);font-size:var(--sat-fs-12);color:var(--sat-text-2);text-align:left;font-weight:500}
  .sat-table--stack td.sat-col-main{display:block;text-align:left;padding-bottom:6px}
  .sat-table--stack td.sat-col-check{position:absolute;right:var(--sat-s4);width:auto}
  .sat-table--stack tr{position:relative}
  .sat-table--stack tbody tr:hover td{background:none}
}
@media (min-width:1024px){ .sat-hide-lg{display:none !important} .sat-drawer-scrim{display:none} }

/* ---------- 25. Motion ---------- */
@keyframes sat-spin{to{transform:rotate(360deg)}}
@keyframes sat-pulse{50%{opacity:.35}}
@keyframes sat-fade{from{opacity:0}to{opacity:1}}
@keyframes sat-pop{from{opacity:0;transform:translate(var(--tx,0),-4px) scale(.98)}to{opacity:1;transform:translate(var(--tx,0),0) scale(1)}}
.sat-modal.is-open{--tx:-50%}
@keyframes sat-toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes sat-indeterminate{0%{left:-35%}100%{left:100%}}
@keyframes sat-shimmer{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){
  .sat *,.sat *::before,.sat *::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* ---------- 26. Print (results only) ---------- */
@media print{
  .sat-sidebar,.sat-topbar,.sat-aside,.sat-result__bar,.sat-footer,.sat-banner,.sat-toasts{display:none !important}
  .sat-app{display:block}
  body.sat{background:#fff}
  .sat-result{border:0;box-shadow:none}
  .sat-result__body{max-height:none;overflow:visible;padding:0}
}


/* ==========================================================================
   25. Page extras (merged 2026-10-22 from the work-package files sat-wp2.css ... sat-wp14.css)
   Each block below belongs to the pages named in its heading. Rules that would otherwise also reach
   other pages are scoped with :where(<body class>), which adds no specificity; the body class comes
   from the page (sat_frame_top / sat_admin_top "body_class").
   ========================================================================== */

/* ---------- WP2 tool page (go.php); body.sat-wp2-tool ---------- */
/* run panel: go.php (and blog.php) still show it by setting style.display='block' (as before), so its rows are
   spaced without relying on the panel's flex gap */
:where(.sat-wp2-tool,.sat-wp4-tool) #loading.sat-run > * + *{margin-top:var(--sat-s3)}
:where(.sat-wp2-tool) .sat-run__head .sat-chip{flex:none}
:where(.sat-wp2-tool,.sat-wp4-tool) .sat-run__head{flex-wrap:wrap}

/* input card */
.sat-wp2-input-head{flex-wrap:wrap}
.sat-wp2-input-head .sat-btn-row{gap:var(--sat-s1)}
.sat-wp2-eta{display:inline-flex;align-items:center;gap:6px}
.sat-wp2-tool .sat-counter{white-space:nowrap}
.sat-wp2-eta .sat-i{flex:none}
.sat-wp2-tabs-row{padding-bottom:0}
:where(.sat-wp2-tool) .sat-drop{position:relative}
.sat-wp2-drop-name{font-size:var(--sat-fs-12);color:var(--sat-blue-800);font-weight:600;word-break:break-all}
:where(.sat-wp2-tool) #file-preview{max-width:min(300px,100%) !important;border-radius:12px;border:1px solid var(--sat-border)}
.sat-wp2-hr{margin:var(--sat-s3) 0}

/* the hidden textarea copyashtml() copies from: kept in the page (a hidden element cannot be copied), never seen */
.sat-wp2-copybox{position:absolute;left:0;top:0;padding:0;border:0;margin:0;opacity:0;resize:none;overflow:hidden;pointer-events:none}

/* result card (overflow visible so the "..." menu is never cut off under a short result) */
.sat-wp2-tool .sat-result{overflow:visible}
.sat-wp2-tool .sat-result__bar{border-radius:var(--sat-r-lg) var(--sat-r-lg) 0 0}
:where(.sat-wp2-tool) .sat-result__bar .sat-chip:empty{display:none}
:where(.sat-wp2-tool) .sat-result__bar .sat-strong{margin-right:4px}
.sat-wp2-result-note{font-size:var(--sat-fs-12);color:var(--sat-text-2)}
.sat-result__body--frame{padding:0;max-height:none;overflow:auto}
.sat-result__body--frame iframe{max-width:none}
#respres.sat-prose{overflow-wrap:anywhere}
#respres.sat-prose table{overflow-wrap:normal}
.sat-wp2-media{text-align:center}
.sat-wp2-media img{max-width:100%;height:auto;border-radius:12px}
.sat-wp2-media i{display:block;margin-top:var(--sat-s2);font-size:var(--sat-fs-12);font-style:normal;color:var(--sat-text-2)}
.sat-wp2-media br{display:none}

/* links the server lists under a result (#urlsfromcontent) */
#urlsfromcontent{flex:1;min-width:0}
#urlsfromcontent:empty{display:none}
#urlsfromcontent center{display:block;text-align:left}
#urlsfromcontent h2{font-size:var(--sat-fs-12);font-weight:600;color:var(--sat-ink);margin:0 0 2px;letter-spacing:0}
#urlsfromcontent h2 + br{display:none}
#urlsfromcontent a{color:var(--sat-blue-700);word-break:break-all}

/* frame results (auto.iframe = 1): height and width steppers in the result bar (#iframewh) */
.sat-wp2-size{display:inline-flex;align-items:center;gap:2px;margin-right:var(--sat-s2);font-size:var(--sat-fs-12);color:var(--sat-text-2);vertical-align:middle}
.sat-wp2-size > span{margin-right:2px}
.sat-wp2-size b{min-width:58px;text-align:center;font-weight:600;color:var(--sat-ink);font-variant-numeric:tabular-nums}
.sat-wp2-size .sat-icon-btn{background:var(--sat-surface);border-color:var(--sat-border)}

/* My history (results kept in this browser) */
.sat-wp2-hist .sat-list__row{flex-wrap:wrap}
.sat-wp2-hist .sat-btn-row{flex:none}
.sat-wp2-hist-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--sat-s3);flex-wrap:wrap;margin-top:var(--sat-s3);padding-top:var(--sat-s3);border-top:1px solid var(--sat-border)}

/* How to use, HTML pages and section intros (also blog.php and the WP6 pages): the old pages' responsive video wrapper */
:where(.sat-wp2-tool,.sat-wp4-tool,.sat-wp6) .embed-responsive{position:relative;display:block;height:0;padding:0;overflow:hidden}
:where(.sat-wp2-tool,.sat-wp4-tool,.sat-wp6) .embed-responsive .embed-responsive-item,:where(.sat-wp2-tool,.sat-wp4-tool,.sat-wp6) .embed-responsive iframe,:where(.sat-wp2-tool,.sat-wp4-tool,.sat-wp6) .embed-responsive embed,:where(.sat-wp2-tool,.sat-wp4-tool,.sat-wp6) .embed-responsive object{position:absolute;top:0;bottom:0;left:0;width:100%;height:100%;border:0}
:where(.sat-wp2-tool,.sat-wp4-tool,.sat-wp6) .embed-responsive.embed-responsive-16by9{padding-bottom:56.25%}
:where(.sat-wp2-tool) .embed-responsive.embed-responsive-4by3{padding-bottom:65%}
:where(.sat-wp4-tool,.sat-wp6) .embed-responsive.embed-responsive-4by3{padding-bottom:75%}
.sat-wp2-how iframe{max-width:100%}

/* related tools */
.sat-wp2-related .sat-list__title{white-space:normal}

@media (max-width:719px){
  #sat-tool .sat-card__foot #submit1{width:100%}
  .sat-wp2-eta{width:100%}
  .sat-wp2-hist .sat-btn-row{width:100%}
}
/* small phones: three tabs (Run tool, How to use, My history) fit without the last one being cut off */
@media (max-width:479px){
  .sat-wp2-tabs-row .sat-tabs:has(> .sat-tab:nth-child(3)) .sat-tab{padding:0 var(--sat-s2);gap:6px}
  .sat-wp2-tabs-row .sat-tabs:has(> .sat-tab:nth-child(3)) .sat-tab > .sat-i{display:none}
}

/* print: only the result */
@media print{
  .sat-wp2-tool .sat-page-head,.sat-wp2-tool #sat-tool,.sat-wp2-tool #loading,.sat-wp2-tool #sat-run-alert,
  .sat-wp2-tool .sat-result .sat-card__foot{display:none !important}
}

/* ---------- WP3 image, video and music generators (kei.php, replicate.php); body.sat-wp3 ---------- */
/* pictures to work from: one slot per picture (drop zone, preview, link field) */
.satwp3-slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--sat-s4)}
.satwp3-slot{display:flex;flex-direction:column;gap:var(--sat-s2);min-width:0}
.satwp3-slot .sat-field-row{min-height:32px}
.satwp3-drop{position:relative;min-height:128px;padding:var(--sat-s5) var(--sat-s4)}
.satwp3-drop:focus-within{border-color:var(--sat-blue-400);box-shadow:var(--sat-focus)}
.satwp3-drop.has-file{border-style:solid;border-color:var(--sat-blue-200);background:var(--sat-blue-25)}
.satwp3-drop__name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.satwp3-drop.has-file .satwp3-drop__name{color:var(--sat-blue-800);font-weight:600}
.satwp3-preview{display:block;max-width:100%;max-height:200px;width:auto;height:auto;margin:0 auto;border-radius:var(--sat-r-md);
  border:1px solid var(--sat-border);background:var(--sat-grey-25);object-fit:contain}

/* results: one large picture or video, never cropped; checks behind see-through pictures */
.satwp3-gallery{grid-template-columns:minmax(0,1fr);justify-items:center}
.satwp3-gallery .sat-gallery__item{aspect-ratio:auto;display:block;width:auto;max-width:100%;margin:0;
  background-color:var(--sat-surface);background-image:conic-gradient(var(--sat-grey-50) 25%,transparent 0 50%,var(--sat-grey-50) 0 75%,transparent 0);background-size:24px 24px}
.satwp3-gallery .sat-gallery__item img{display:block;width:auto;max-width:100%;height:auto;max-height:72vh;object-fit:contain}
.satwp3-gallery .satwp3-item--video{width:100%;background:var(--sat-navy)}
.satwp3-gallery video{display:block;width:100%;max-height:72vh;background:var(--sat-navy)}
.satwp3-result__body{padding:var(--sat-s4)}
@media (hover:none){.satwp3-gallery .sat-gallery__actions{opacity:1}}

/* music: two versions, each with its player and a download button */
.satwp3-tracks .sat-list__row:first-child{border-top:0;padding-top:0}
.satwp3-tracks audio{display:block;width:100%;height:40px;margin-top:6px}
.satwp3-tracks .sat-list__main{display:flex;flex-direction:column}

#satwp3-count{white-space:nowrap;flex:none}

/* "How to use" video embeds keep their own sizing */
.satwp3-how iframe{max-width:100%}

@media (max-width:719px){
  .satwp3-result .sat-result__bar .sat-btn{flex:1 1 auto}
  .satwp3-tracks .sat-list__row{flex-wrap:wrap}
  .satwp3-tracks .sat-list__main{flex:1 1 calc(100% - 48px)}
  .satwp3-tracks .sat-list__row .sat-btn{margin-left:44px}
}

/* ---------- WP4 blog tool (blog.php); body.sat-wp4-tool ---------- */
/* steps: Outline, then Article */
.sat-wp4-steps{max-width:440px;margin:0 0 var(--sat-s1);scroll-margin-top:calc(var(--sat-topbar-h) + 16px)}
.sat-wp4-steps .sat-step__dot .sat-i{display:none;width:12px;height:12px;stroke-width:3}
.sat-wp4-steps .sat-step.is-done .sat-step__dot .sat-wp4-num{display:none}
.sat-wp4-steps .sat-step.is-done .sat-step__dot .sat-i{display:block}

/* title card */
.sat-wp4-eta{display:inline-flex;align-items:center;gap:6px}
.sat-wp4-eta .sat-i{flex:none}
#sat-wp4-title.is-outlined .sat-card__foot{display:none}
.sat-wp4-hr{margin:var(--sat-s3) 0}

/* the step the server is running: floats at the bottom right, so it is in view wherever the member is working */
.sat-wp4-status{position:fixed;right:var(--sat-s6);bottom:var(--sat-s6);z-index:50;width:min(440px,calc(100vw - 2 * var(--sat-s4)));
  display:flex;flex-direction:column;gap:var(--sat-s3);pointer-events:none}
.sat-wp4-status > *{pointer-events:auto}
:where(.sat-wp4-tool) #loading.sat-run{box-shadow:var(--sat-sh-lg);background:var(--sat-surface);border-color:var(--sat-blue-200)}
:where(.sat-wp4-tool) #sat-run-alert .sat-alert{box-shadow:var(--sat-sh-lg);position:relative;padding-right:44px}
#sat-run-alert .sat-wp4-dismiss{position:absolute;top:8px;right:8px}
.sat-wp4-busy #editor1{opacity:.75}

/* outline card */
.sat-wp4-tool #editor1{overflow:visible}
.sat-wp4-parts{display:flex;flex-direction:column;gap:var(--sat-s3);counter-reset:wp4}
:where(.sat-wp4-tool) #msubhead{display:flex;flex-direction:column;gap:var(--sat-s3)}
.sat-wp4-part{border:1px solid var(--sat-border);border-radius:14px;background:var(--sat-surface);padding:var(--sat-s3) var(--sat-s4);box-shadow:var(--sat-sh-xs)}
.sat-wp4-part:empty{display:none}
.sat-wp4-part--fixed{background:var(--sat-grey-25)}
.sat-wp4-part--sub{counter-increment:wp4}
.sat-wp4-part__head{display:flex;align-items:center;gap:var(--sat-s2) var(--sat-s3);flex-wrap:wrap}
.sat-wp4-part--sub .sat-wp4-part__head::before{content:counter(wp4);flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:var(--sat-blue-100);color:var(--sat-blue-800);font-size:var(--sat-fs-12);font-weight:700;font-variant-numeric:tabular-nums}
.sat-wp4-part__actions{display:flex;align-items:center;gap:var(--sat-s2);flex-wrap:wrap;margin-left:auto}
.sat-wp4-part__actions:empty{display:none}
.sat-wp4-part a.topright{text-decoration:none}
.sat-wp4-part a.topright.sat-wp4-remove{color:var(--sat-red);border-color:var(--sat-red-200)}
.sat-wp4-part a.topright.sat-wp4-remove:hover{background:var(--sat-red-50)}

/* headings: the introduction and conclusion are labels, the others are text boxes the member can edit */
.sat-wp4-part .sat-wp4-title{flex:1 1 220px;min-width:0;width:auto !important;max-width:none !important;margin:0 !important;border:0 !important;padding:0 !important;
  font-size:var(--sat-fs-16) !important;font-weight:600;color:var(--sat-ink);line-height:1.4;overflow-wrap:anywhere}
.sat-wp4-part .sat-wp4-title[contenteditable]{border:1px solid var(--sat-border-strong) !important;border-radius:var(--sat-r-md);padding:8px 12px !important;background:var(--sat-surface);cursor:text;
  transition:border-color .15s,box-shadow .15s}
.sat-wp4-part .sat-wp4-title[contenteditable]:hover{border-color:var(--sat-grey-300) !important}
.sat-wp4-part .sat-wp4-title[contenteditable]:focus{outline:none;border-color:var(--sat-blue-400) !important;box-shadow:var(--sat-focus)}

/* talking points and written text */
.sat-wp4-part .sat-wp4-points,.sat-wp4-part .sat-wp4-text{width:auto !important;max-width:none !important;margin:var(--sat-s3) 0 0 !important;padding:12px 14px !important;
  border:1px solid var(--sat-border-strong) !important;border-radius:var(--sat-r-md);background:var(--sat-surface);color:var(--sat-text);
  font-size:var(--sat-fs-14) !important;line-height:1.65;overflow-wrap:anywhere}
.sat-wp4-part .sat-wp4-points{background:var(--sat-blue-25);border-color:var(--sat-blue-100) !important}
.sat-wp4-part .sat-wp4-text{font-size:var(--sat-fs-16) !important;line-height:1.7}
.sat-wp4-part .sat-wp4-points::before,.sat-wp4-part .sat-wp4-text::before{display:block;margin-bottom:4px;font-size:var(--sat-fs-12);font-weight:600;color:var(--sat-text-2);
  user-select:none;pointer-events:none}
.sat-wp4-part .sat-wp4-points::before{content:"Talking points"}
.sat-wp4-part .sat-wp4-text::before{content:"Written text"}
.sat-wp4-part .sat-wp4-points:focus,.sat-wp4-part .sat-wp4-text:focus{outline:none;border-color:var(--sat-blue-400) !important;box-shadow:var(--sat-focus)}

/* the buttons ajax-blog.php puts under each part */
.sat-wp4-part .sat-wp4-btns{margin-top:var(--sat-s3)}
.sat-wp4-part center{display:flex;flex-wrap:wrap;gap:var(--sat-s2);margin:0;text-align:left}
.sat-wp4-part input.sat-btn,.sat-wp4-foot input.sat-btn{margin:0;width:auto;max-width:100%;white-space:normal;text-align:center;line-height:1.2;height:auto;min-height:32px;padding-top:6px;padding-bottom:6px}
.sat-wp4-foot{justify-content:flex-start;gap:var(--sat-s2)}
.sat-wp4-foot input.sat-wp4-create{margin-left:auto;min-height:40px;padding-left:var(--sat-s5);padding-right:var(--sat-s5);font-size:var(--sat-fs-14)}

/* the article (Create article) */
.sat-wp4-tool .sat-result{overflow:visible}
.sat-wp4-tool .sat-result__bar{border-radius:var(--sat-r-lg) var(--sat-r-lg) 0 0}
:where(.sat-wp4-tool) .sat-result__bar .sat-chip[hidden]{display:none}
#blogpost{overflow-wrap:anywhere;min-height:240px;max-width:none;outline:none}
#blogpost:focus{outline:2px dashed var(--sat-blue-300);outline-offset:12px;border-radius:4px}
#blogpost > h1{font-size:26px;margin:0 0 .6em}
#blogpost > h2{font-size:21px;margin:1.6em 0 .5em}
#blogpost > div{margin:0 0 1em;max-width:760px}

/* How to use (auto.video, when it holds a video or text rather than a link): the responsive video wrapper is in the WP2 block */
.sat-wp4-how iframe{max-width:100%}
.sat-wp4-related .sat-list__title{white-space:normal}

@media (max-width:719px){
  .sat-wp4-status{right:var(--sat-s4);left:var(--sat-s4);bottom:var(--sat-s3);width:auto}
  .sat-wp4-part{padding:var(--sat-s3)}
  .sat-wp4-part__actions{margin-left:0;width:100%}
  .sat-wp4-foot input.sat-wp4-create{margin-left:0;width:100%}
  #button1{width:100%}
  #sat-wp4-title .sat-card__foot .sat-wp4-eta{width:100%}
}

/* print: only the article */
@media print{
  .sat-wp4-tool .sat-page-head,.sat-wp4-tool .sat-steps,.sat-wp4-tool #sat-wp4-title,.sat-wp4-tool #sat-wp4-how,.sat-wp4-tool #editor1,
  .sat-wp4-tool .sat-wp4-status,.sat-wp4-tool #sat-wp4-article .sat-card__foot{display:none !important}
}

/* ---------- WP5 members home (members/index.php); body.sat-wp5 ---------- */
/* the greeting sits in the left column, level with the top of the "Today" column */
.sat-page-head--flush{margin-bottom:0}
.sat-section-head--tight{margin-top:var(--sat-s2)}

/* "What do you want to make?" */
.sat-find{display:flex;align-items:center;gap:10px;flex-wrap:nowrap}
.sat-find .sat-input-group{flex:1;min-width:0}
.sat-find .sat-btn{flex:none}
.sat-find .sat-input{text-overflow:ellipsis}

/* eight tabs do not fit one row: let them wrap instead of hiding some behind a scroll */
:where(.sat-wp5) #start .sat-tabs{flex-wrap:wrap;overflow:visible;width:100%}

/* tiles in the start card: keep the star easy to hit */
:where(.sat-wp5) .sat-tiles .sat-tile__star{z-index:1}
:where(.sat-wp5) .sat-tab__count[hidden]{display:none}

/* getting started: ticks come from the member's own activity, so they are shown, not clicked */
.sat-todo{cursor:default;align-items:center}
.sat-todo input{cursor:default}
.sat-todo a{color:inherit}
.sat-todo a:hover{color:var(--sat-blue-700);text-decoration:none}
.sat-todo.sat-check--done a{color:var(--sat-text-3);text-decoration:line-through}

/* running now */
:where(.sat-wp5) .sat-list__main .sat-status{margin-top:2px}

/* welcome video: the 4:3 player the page has always had, in a card */
.sat-videocard{overflow:hidden}
.sat-videocard__frame{background:var(--sat-navy)}
.sat-videocard__body{padding-top:var(--sat-s4);padding-bottom:var(--sat-s4)}
.sat-videocard__body .sat-card__title{margin-bottom:2px}
#welcome-video{scroll-margin-top:calc(var(--sat-topbar-h) + 16px)}

/* About Mark Ling: Mark's own photo, small and rounded, with the text wrapping beside it */
.sat-about .sat-card__body{display:flow-root}
.sat-about__photo{float:left;width:76px;height:100px;margin:0 var(--sat-s4) var(--sat-s2) 0;border-radius:var(--sat-r-lg);
  object-fit:cover;object-position:center top;border:1px solid var(--sat-border);box-shadow:var(--sat-sh-xs);background:var(--sat-grey-50)}
.sat-about .sat-card__title{margin-bottom:var(--sat-s2)}

@media (max-width:719px){
  /* on a phone the tabs slide sideways in one row instead of using six rows */
  :where(.sat-wp5) #start .sat-tabs{flex-wrap:nowrap;overflow-x:auto}
  .sat-find{flex-wrap:wrap}
  .sat-find .sat-input-group{flex:1 1 100%}
  .sat-find .sat-btn{width:100%}
}

/* ---------- WP6 section pages, HTML pages and search (menuview.php, htmlview.php, members/search.php); body.sat-wp6 ---------- */
/* the video wrapper the tools' html and the menu intro text have always used is in the WP2 block */

/* page titles built from a search word must wrap, not push the page sideways */
:where(.sat-wp6) .sat-page-title,:where(.sat-wp6) .sat-tile__title,:where(.sat-wp6) .sat-empty__title,:where(.sat-wp6) .sat-empty p{overflow-wrap:anywhere}
:where(.sat-wp6) .sat-empty__title{max-width:100%}

/* section page: filter row (sub-menus) and grid/list switch */
.sat-wp6-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--sat-s3);flex-wrap:wrap;margin-bottom:var(--sat-s4)}
.sat-wp6-bar .sat-chips{flex:1 1 auto;min-width:0}
.sat-wp6-view{width:auto;flex:none;margin-left:auto}
.sat-wp6-intro{margin-bottom:var(--sat-s6)}
.sat-wp6-lead{max-width:760px;margin:calc(-1 * var(--sat-s5)) 0 var(--sat-s6) 64px;color:var(--sat-text-2);font-size:var(--sat-fs-14)}
.sat-wp6-lead p{margin:0 0 .6em}
.sat-wp6-lead > :last-child{margin-bottom:0}
.sat-wp6-lead a{color:var(--sat-blue-700);text-decoration:underline;text-underline-offset:2px}
.sat-wp6-intro .sat-prose{max-width:none}
.sat-wp6-empty{margin-bottom:var(--sat-s4)}

/* tool tiles with a menu picture: the whole picture shows (it may carry text), star stays readable on top of it */
.sat-tile__thumb img{object-fit:contain}
.sat-tile__thumb ~ .sat-tile__star{z-index:1;background:rgba(255,255,255,.94);box-shadow:var(--sat-sh-sm)}
.sat-tile__thumb ~ .sat-tile__title{padding-right:0}
.sat-tile__sec{flex:1 0 100%;font-size:var(--sat-fs-12);color:var(--sat-text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sat-wp6-list{padding-top:6px;padding-bottom:6px}
.sat-list__row--locked .sat-list__icon{background:var(--sat-grey-50);color:var(--sat-text-3)}
.sat-list__meta{display:flex;align-items:center;gap:var(--sat-s2);flex:none}

/* HTML content page */
.sat-wp6-page .sat-prose{max-width:none;overflow-wrap:anywhere}
.sat-wp6-page .sat-prose iframe{max-width:100%}
.sat-wp6-page .sat-prose table{display:block;max-width:100%;overflow-x:auto}
.sat-wp6-page .sat-prose pre{overflow-x:auto}
.sat-wp6-app{display:block;width:100%;height:max(560px,calc(100vh - 170px));border:1px solid var(--sat-border);border-radius:var(--sat-r-lg);background:#fff;box-shadow:var(--sat-sh-sm)}

/* search page */
.sat-wp6-find{display:flex;gap:var(--sat-s2);align-items:stretch;margin-bottom:var(--sat-s5)}
.sat-wp6-find .sat-input-group{flex:1 1 auto;min-width:0}

.sat-wp6-chips{justify-content:center;margin-top:var(--sat-s3)}

@media (max-width:720px){
  .sat-wp6-lead{margin-left:0;margin-top:calc(-1 * var(--sat-s4))}
  .sat-wp6-find{flex-direction:column}
  .sat-wp6-list .sat-list__row{flex-wrap:wrap}
  .sat-wp6-list .sat-list__main{flex:1 1 calc(100% - 60px)}
  .sat-wp6-list .sat-list__meta{flex:1 0 100%;justify-content:flex-end}
}

/* ---------- WP7 History, Account and Support (members/history.php, account.php, support.php); body.sat-wp7 ---------- */
/* ---- History: the list ---- */
.sat-hist-tabs{margin-bottom:var(--sat-s4)}
.sat-hist-card{overflow:hidden}
.sat-hist-filters{display:flex;align-items:flex-end;gap:var(--sat-s3);flex-wrap:wrap;padding:var(--sat-s4) var(--sat-s5);border-bottom:1px solid var(--sat-border);background:var(--sat-grey-25)}
.sat-hist-filters .sat-field{flex:0 1 180px}
.sat-hist-filters .sat-field + .sat-field{margin-top:0}
.sat-hist-filters .sat-select--sm{min-height:36px;border-radius:var(--sat-r-sm);font-size:var(--sat-fs-13)}
.sat-hist-filters .sat-input--sm{min-height:36px}
.sat-hist-filters__go{align-self:flex-end;gap:var(--sat-s3);min-height:36px}
.sat-hist-table .sat-col-main{min-width:200px}
.sat-hist-table .sat-cell-title{overflow-wrap:anywhere}
.sat-hist-table a.sat-cell-title:hover{color:var(--sat-blue-700);text-decoration:none}
.sat-hist-sub{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.sat-hist-where{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
/* a narrower page has no room for a column of tool names: the name moves under the title */
.sat-hist-inline{display:none;align-items:center;gap:5px;margin-top:3px}
.sat-hist-inline .sat-i{color:var(--sat-text-3)}
@media (min-width:720px) and (max-width:1279px){
  .sat-hist-col-where{display:none}
  .sat-hist-inline{display:flex}
}
.sat-hist-chip{display:inline-block;max-width:150px;vertical-align:bottom}
.sat-hist-table .sat-col-actions .sat-btn + .sat-btn{margin-left:var(--sat-s1)}
.sat-hist-table td.sat-col-num{white-space:nowrap}

/* ---- History: one result ---- */
.sat-hist-meta{margin-top:6px}
.sat-hist-input .sat-label{margin-bottom:2px}
.sat-hist-asked{white-space:pre-line;overflow-wrap:anywhere}
.sat-hist-frame{height:72vh;min-height:420px}
.sat-hist-frame--short{height:300px;min-height:0}
.sat-hist-facts{margin:0;display:grid;gap:var(--sat-s3)}
.sat-hist-facts > div{display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:var(--sat-s3);align-items:start}
.sat-hist-facts dt{font-size:var(--sat-fs-13);font-weight:600;color:var(--sat-grey-600);padding-top:5px}
.sat-hist-facts dd{margin:0;overflow-wrap:anywhere;padding-top:4px}

/* ---- Account ---- */
.sat-account-card__head{margin-bottom:var(--sat-s4)}
.sat-account-card__head .sat-card__sub{margin-top:2px}
:where(.sat-wp7) .sat-account-note{margin:0}
:where(.sat-wp7,.sat-wp13) .sat-icon-btn[aria-pressed="true"]{color:var(--sat-blue-700);background:var(--sat-blue-50)}
.sat-plan__meter{margin-top:var(--sat-s4)}
.sat-plan__note{margin:var(--sat-s3) 0 0;color:var(--sat-text-2);font-size:var(--sat-fs-13)}

/* ---- Support ---- */
.sat-support{display:flex;gap:var(--sat-s5);align-items:flex-start}
.sat-support__icon{width:52px;height:52px;border-radius:16px;flex:none;display:grid;place-items:center;background:var(--sat-blue-50);color:var(--sat-blue-700)}
.sat-support__icon .sat-i{width:24px;height:24px}
.sat-support__main{min-width:0}
.sat-support__main p{margin:var(--sat-s2) 0 0}
.sat-support__mail{overflow-wrap:anywhere}
.sat-faq .sat-acc__body p{margin:0 0 var(--sat-s3)}
.sat-faq .sat-acc__body p:last-child{margin-bottom:0}

@media (max-width:719px){
  .sat-hist-filters{padding:var(--sat-s3) var(--sat-s4)}
  .sat-hist-filters .sat-field{flex:1 1 100%}
  .sat-hist-filters .sat-hist-date{flex:1 1 calc(50% - var(--sat-s3))}
  .sat-hist-table .sat-col-main{min-width:0}
  .sat-hist-where{align-items:flex-end}
  .sat-hist-chip{max-width:200px}
  .sat-table--stack.sat-hist-table td.sat-col-actions{justify-content:flex-start;gap:var(--sat-s2);padding-top:var(--sat-s2)}
  .sat-table--stack.sat-hist-table td.sat-col-actions .sat-btn + .sat-btn{margin-left:0}
  .sat-hist-facts > div{grid-template-columns:minmax(0,1fr) auto}
  .sat-hist-facts dt{grid-column:1 / -1;padding-top:0}
  .sat-hist-frame{height:70vh;min-height:360px}
  .sat-support{flex-direction:column;gap:var(--sat-s3)}
}

/* ---------- WP9 calculator, image library and the small members tools (members/calc.php, images.php, imgcat.php, imgv.php, chat.php, analyzer.php, convert.php, sass.php, replicate-add-subtitle-video.php, reviewer.php); body.sat-wp9 ---------- */
/* ---- calculator ---- */
.sat-calc{align-items:start}
.sat-calc .sat-field + .sat-field{margin-top:var(--sat-s5)}
.sat-calc .sat-stepper{min-height:48px}
.sat-calc .sat-stepper input{font-size:var(--sat-fs-16)}
.sat-calc .sat-stepper button{width:48px;font-size:20px;line-height:1}
.sat-calc__results{display:flex;flex-direction:column;gap:var(--sat-s3)}
.sat-calc__results .sat-stat__value{font-size:30px;overflow-wrap:anywhere}
.sat-calc__thousand{display:flex;align-items:baseline;gap:var(--sat-s2);flex-wrap:wrap}
.sat-calc__thousand .sat-stat__value{margin-top:0}

/* ---- image library ---- */
.sat-images-search{display:flex;gap:var(--sat-s2);align-items:center}
.sat-images-search .sat-input-group{flex:1;min-width:0}
:where(.sat-wp9) .sat-gallery{grid-template-columns:repeat(auto-fill,minmax(176px,1fr))}
.sat-gallery--tight{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.sat-gallery__link{display:block;width:100%;height:100%;outline-offset:-2px}
.sat-gallery__link img{transition:transform .25s var(--sat-ease)}
.sat-gallery__item:hover .sat-gallery__link img{transform:scale(1.03)}
:where(.sat-wp9) .sat-gallery__actions .sat-icon-btn{width:30px;height:30px;color:var(--sat-ink)}
:where(.sat-wp9) .sat-gallery__actions .sat-icon-btn:hover{background:#fff;color:var(--sat-blue-800)}
@media (hover:none){:where(.sat-wp9) .sat-gallery__actions{opacity:1}}
.sat-album-block + .sat-album-block{margin-top:var(--sat-s6)}
.sat-album-block__head{display:flex;align-items:center;justify-content:space-between;gap:var(--sat-s3);margin-bottom:var(--sat-s3)}
.sat-album-block__title{font-size:var(--sat-fs-16);font-weight:600;color:var(--sat-ink)}
.sat-album-block__title a{color:inherit}
.sat-album-block__title a:hover{color:var(--sat-blue-700)}
.sat-album-block--sub{margin-top:var(--sat-s5);margin-left:var(--sat-s5);padding-left:var(--sat-s4);border-left:2px solid var(--sat-blue-100)}
.sat-album-block--sub2{margin-left:var(--sat-s4)}
.sat-album-block__title .sat-faint{font-weight:400;font-size:var(--sat-fs-13);margin-left:6px}
.sat-loadmore{display:flex;justify-content:center;margin-top:var(--sat-s4)}

/* album list in the side panel */
.sat-albums{list-style:none;margin:0;padding:0}
.sat-albums li + li{margin-top:1px}
.sat-albums a{display:flex;align-items:center;justify-content:space-between;gap:var(--sat-s2);padding:7px var(--sat-s3);border-radius:var(--sat-r-sm);
  color:var(--sat-grey-600);font-size:var(--sat-fs-13);font-weight:500;line-height:1.35}
.sat-albums a:hover{background:var(--sat-blue-25);color:var(--sat-ink);text-decoration:none}
.sat-albums a.is-active{background:var(--sat-blue-100);color:var(--sat-blue-800);font-weight:600}
.sat-albums .sat-albums__n{flex:none;font-size:var(--sat-fs-12);color:var(--sat-text-2);font-variant-numeric:tabular-nums;font-weight:400}
.sat-albums__top > a{font-weight:600;color:var(--sat-ink)}
.sat-albums__sub{list-style:none;margin:2px 0 6px;padding:0 0 0 var(--sat-s3);border-left:2px solid var(--sat-blue-100);margin-left:var(--sat-s3)}
.sat-albums__sub .sat-albums__sub{margin-bottom:2px}

/* busy overlay used while "Load more" waits (images.php, imgcat.php; the page script sets display:block) */
#loading.sat-loading{display:none;position:fixed;inset:0;z-index:99;background:rgba(0,14,23,.28)}
#loading.sat-loading .sat-loading__card{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:var(--sat-s3);
  padding:var(--sat-s4) var(--sat-s6);background:var(--sat-surface);border-radius:var(--sat-r-lg);box-shadow:var(--sat-sh-lg);font-weight:600;color:var(--sat-ink)}

/* one picture (imgv.php) */
.sat-picture{display:flex;justify-content:center;align-items:center;padding:var(--sat-s5);background:var(--sat-grey-25);border-radius:var(--sat-r-lg) var(--sat-r-lg) 0 0}
.sat-picture img{display:block;max-width:100%;height:auto;max-height:70vh;border-radius:var(--sat-r-md);box-shadow:var(--sat-sh-sm);background:#fff}
.sat-picture-desc{margin:0;color:var(--sat-text);font-size:var(--sat-fs-14);line-height:1.6}
.sat-details{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sat-s2) var(--sat-s4);margin:0;font-size:var(--sat-fs-13)}
.sat-details dt{color:var(--sat-text-2)}
.sat-details dd{margin:0;color:var(--sat-ink);font-weight:500;overflow-wrap:anywhere}

/* ---- one-line forms (analyzer) ---- */
.sat-inline-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,240px) auto;gap:var(--sat-s3);align-items:end}
.sat-inline-form .sat-select{min-height:52px;font-size:var(--sat-fs-16)}
.sat-inline-form .sat-btn,.sat-images-search .sat-btn{--h:52px}

/* ---- text tools: chat, summarizer ---- */
.sat-tooltext .sat-textarea{min-height:340px;font-size:var(--sat-fs-16);line-height:1.65}
.sat-tooltext__bar{display:flex;align-items:center;justify-content:space-between;gap:var(--sat-s3);flex-wrap:wrap;margin-bottom:6px}
.sat-settings-list > .sat-field + .sat-field{margin-top:var(--sat-s5)}

/* the help text in a card footer takes the free room, the button stays on the right */
:where(.sat-wp9) .sat-card__foot > .sat-help{flex:1 1 260px;min-width:0}
:where(.sat-wp9) .sat-card__foot > .sat-help + .sat-btn,:where(.sat-wp9) .sat-card__foot > .sat-help + .sat-btn-row{margin-left:auto}

/* ---- upload drop zone (convert, subtitles) ---- */
:where(.sat-wp9) label.sat-drop{position:relative}
:where(.sat-wp9) label.sat-drop:focus-within{border-color:var(--sat-blue-400);box-shadow:var(--sat-focus)}
.sat-drop__name{font-weight:600;color:var(--sat-blue-800);overflow-wrap:anywhere}
:where(.sat-wp9) .sat-drop.has-file{border-style:solid;border-color:var(--sat-blue-300);background:var(--sat-blue-25)}
.sat-or{display:flex;align-items:center;gap:var(--sat-s3);color:var(--sat-text-3);font-size:var(--sat-fs-12);font-weight:600;text-transform:uppercase;letter-spacing:.08em;margin:var(--sat-s4) 0}
.sat-or::before,.sat-or::after{content:"";flex:1;height:1px;background:var(--sat-border)}

/* ---- results tables (analyzer) ---- */
.sat-results-block + .sat-results-block{margin-top:var(--sat-s5)}
.sat-results-block .sat-table td{overflow-wrap:anywhere;word-break:break-word}
.sat-results-block .sat-table .sat-col-num{white-space:nowrap}

/* ---- video result and progress ring (subtitles) ---- */
.sat-video-result{display:flex;flex-direction:column;align-items:center;gap:var(--sat-s3);text-align:center}
.sat-video-result video{display:block;width:auto;max-width:100%;max-height:640px;border-radius:var(--sat-r-md);background:var(--sat-navy)}
.sat-ring{display:flex;flex-direction:column;align-items:center;gap:var(--sat-s3);text-align:center;padding:var(--sat-s4) 0}
.sat-ring svg#animated{width:132px;height:132px;max-width:40%;font-family:var(--sat-font)}
.sat-ring svg#animated #progress{transition:stroke-dashoffset .1s linear;stroke:var(--sat-blue-700);fill:none}
.sat-ring svg#animated .sat-ring__bg{fill:var(--sat-blue-100)}
.sat-ring svg#animated #count{fill:var(--sat-ink);font-weight:700}

/* ---- launcher card (reviewer) ---- */
.sat-launch{display:flex;align-items:flex-start;gap:var(--sat-s5)}
.sat-launch__icon{width:56px;height:56px;border-radius:16px;flex:none;display:grid;place-items:center;background:var(--sat-blue-50);color:var(--sat-blue-700)}
.sat-launch__icon .sat-i{width:26px;height:26px}
.sat-launch__body{min-width:0}
.sat-launch__body p{color:var(--sat-text-2);max-width:560px}

/* the early-exit notices (suspended account and similar) */
.sat-wp9-notice{max-width:560px;margin:var(--sat-s8) auto}

@media (max-width:719px){
  .sat-inline-form{grid-template-columns:minmax(0,1fr)}
  .sat-images-search{flex-wrap:wrap}
  .sat-images-search .sat-btn{width:100%}
  .sat-album-block--sub{margin-left:var(--sat-s2);padding-left:var(--sat-s3)}
  .sat-launch{flex-direction:column;gap:var(--sat-s3)}
  .sat-calc__results .sat-stat__value{font-size:26px}
  .sat-gallery--tight{grid-template-columns:repeat(2,minmax(0,1fr))}
  :where(.sat-wp9) .sat-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- WP12 admin Tools list and tool editor (auto-gen.php, content.php); body.sat-wp12 ---------- */
/* list toolbar: the search form (POST) and the filter form (GET) sit side by side */
.wp12-toolbar-form{display:flex;align-items:center;gap:var(--sat-s2);flex-wrap:wrap;margin:0;min-width:0}
.wp12-toolbar-form--search{flex:1 1 320px;max-width:520px}
.wp12-toolbar-form--search .sat-input-group{flex:1 1 200px;max-width:none}
.wp12-toolbar-form .sat-chip .sat-i{width:12px;height:12px}

/* list table */
.wp12-table .sat-input--num{width:76px}
.wp12-table .wp12-sort{width:64px}
.wp12-table .wp12-chips{gap:6px;margin-top:6px}
.wp12-table th a.wp12-sorted{color:var(--sat-ink)}
.wp12-lock{display:inline-grid;place-items:center;width:18px;height:18px;color:var(--sat-text-3)}
.wp12-table .sat-col-actions .sat-menu{text-align:left}

/* editor */
.wp12-note > div{white-space:pre-wrap;word-break:break-word}
.wp12-thumb{max-width:220px;max-height:140px;border-radius:var(--sat-r-md);border:1px solid var(--sat-border);display:block;background:var(--sat-grey-25)}
:where(.sat-wp12) .sat-drop:focus-within{border-color:var(--sat-blue-400);box-shadow:var(--sat-focus)}
:where(.sat-wp12) .sat-drop.has-file{border-style:solid;border-color:var(--sat-blue-300);background:var(--sat-blue-25)}
.sat-drop.has-file [data-wp12-drop-name]{color:var(--sat-blue-800);font-weight:600}
.wp12-dd-preview .sat-help{word-break:break-word}
:where(.sat-wp12) .sat-stack > .sat-acc + .sat-acc{margin-top:0}
:where(.sat-wp12) .sat-acc > summary .sat-chip{flex:none}
.sat-form-layout__side .sat-check{font-size:var(--sat-fs-13)}
/* the sticky Model settings card is taller than a laptop screen: let it scroll on its own so Reset stays reachable */
@media (min-width:1280px){
  .sat-form-layout__side{max-height:calc(100vh - var(--sat-topbar-h) - 32px);overflow-y:auto;overscroll-behavior:contain;border-radius:var(--sat-r-lg)}
}

/* laptops and tablets: fit the whole row without sideways scrolling (Access shows as a chip under the name instead) */
.wp12-lite-chip{display:none}
.wp12-table .sat-cell-sub{overflow-wrap:anywhere}
@media (min-width:720px) and (max-width:1279px){
  .wp12-table th,.wp12-table td{padding-left:10px;padding-right:10px}
  .wp12-table .sat-input--num{width:64px}
  .wp12-table .wp12-sort{width:52px}
  .wp12-table .wp12-col-access,.wp12-table .wp12-view{display:none}
  .wp12-lite-chip{display:inline-flex}
}
@media (max-width:719px){
  .wp12-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sat-s2)}
  .wp12-stats .sat-stat{padding:var(--sat-s3)}
  .wp12-stats .sat-stat__note{display:none}
  .wp12-stats .sat-stat__value{font-size:var(--sat-fs-20)}
  .wp12-toolbar-form,.wp12-toolbar-form--search{flex:1 1 100%;max-width:none}
  .wp12-toolbar-form .sat-select{flex:1 1 140px}
  .wp12-table td.sat-col-main{padding-right:36px}
  .wp12-table td.sat-col-actions{justify-content:flex-end;gap:6px;width:100%;padding-top:6px}
  .wp12-table td .sat-input--num{width:96px}
  :where(.sat-wp12) .sat-acc > summary{flex-wrap:wrap}
  [data-wp12-editor] .sat-tabs .sat-tab{padding:0 6px;gap:4px;flex:1 1 0;min-width:26px}
}

/* ---------- WP13 admin Members and Usage (users.php, usage.php, usage-d.php); body.sat-wp13 ---------- */
/* ---- members table ---- */
.sat-cell-person__text{min-width:0}
:where(.sat-wp13) .sat-cell-sub{overflow-wrap:anywhere}
.sat-pw{display:inline-flex;align-items:center;gap:4px;flex-wrap:nowrap}
.sat-pw .sat-input{width:104px;background:var(--sat-grey-25)}
:where(.sat-wp13) .sat-select--sm{min-height:32px;padding-top:4px;padding-bottom:4px;font-size:var(--sat-fs-13);border-radius:var(--sat-r-sm)}
.sat-select--access,.sat-select--status{width:120px}
:where(.sat-wp13) .sat-table .sat-input--num{min-width:84px}
/* the members table is narrower than the default table so all eight columns fit a 1366 px screen without sideways scrolling */
.sat-table--members th,.sat-table--members td{padding-left:12px;padding-right:12px}
.sat-table--members th{white-space:normal;vertical-align:bottom}
.sat-table--members .sat-cell-person{min-width:170px}
:where(.sat-wp13) .sat-toolbar .sat-link-quiet{white-space:nowrap}
:where(.sat-wp13) .sat-toolbar .sat-chips{gap:6px}
:where(.sat-wp13) .sat-savebar[hidden]{display:none}

/* the "..." menu of a table row is placed by sat-wp13.js (fixed), so the scrolling table wrapper never clips it */
.sat-table .sat-menu.is-fixed{position:fixed;right:auto;z-index:70}
:where(.sat-wp13) .sat-table .sat-menu .sat-menu__item{white-space:nowrap}

/* the pop-up's fields are spaced by the stack gap only (the shared sibling margin would double it) */
.sat-modal__body.sat-stack > .sat-field + .sat-field{margin-top:0}

/* four / three stat cards in one row (the default grid wraps 3 + 1 at tablet width) */
.sat-stats--four{grid-template-columns:repeat(4,minmax(0,1fr))}
.sat-stats--three{grid-template-columns:repeat(3,minmax(0,1fr))}

/* ---- usage pages ---- */
.sat-daterange{display:flex;gap:var(--sat-s3);align-items:flex-end;flex-wrap:wrap}
.sat-daterange .sat-field{flex:0 1 190px}
.sat-daterange .sat-field + .sat-field{margin-top:0}
.sat-daterange__note{margin-left:auto;font-size:var(--sat-fs-13);color:var(--sat-text-2);align-self:center}
.sat-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sat-s4);align-items:start}
.sat-share{display:flex;flex-direction:column;gap:5px;min-width:96px}
.sat-share__top{display:flex;align-items:baseline;justify-content:flex-end;gap:8px;font-variant-numeric:tabular-nums}
.sat-share__pct{font-size:var(--sat-fs-12);color:var(--sat-text-3)}
.sat-meter--thin{height:4px}
.sat-table .sat-col-share{text-align:right;width:1%;white-space:nowrap}
.sat-table-note{padding:var(--sat-s5);color:var(--sat-text-2);font-size:var(--sat-fs-13)}

/* long text in a table cell: two lines, then "Show all" */
.sat-clamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
  white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.5;color:var(--sat-text)}
.sat-clamp.is-open{display:block;-webkit-line-clamp:unset;max-height:none}
.sat-clamp-toggle{display:inline-block;margin-top:3px;padding:0;border:0;background:none;cursor:pointer;
  font:600 var(--sat-fs-12)/1.3 var(--sat-font);color:var(--sat-blue-700)}
.sat-clamp-toggle:hover{color:var(--sat-blue-800);text-decoration:underline}
.sat-table td.sat-cell-long{min-width:240px;max-width:420px;vertical-align:top}
.sat-table td.sat-cell-top{vertical-align:top}
.sat-cell-tool{min-width:0}

@media (max-width:1279px){
  .sat-two{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:719px){
  .sat-stats--four,.sat-stats--three{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sat-s2)}
  .sat-stats--three .sat-stat:first-child{grid-column:1 / -1}
  .sat-stats--four .sat-stat,.sat-stats--three .sat-stat{padding:var(--sat-s3) var(--sat-s4)}
  :where(.sat-wp13) .sat-toolbar .sat-input-group{flex:1 1 150px}
  .sat-daterange .sat-field{flex:1 1 140px}
  .sat-daterange .sat-btn{flex:1 1 100%}
  .sat-daterange__note{margin-left:0;flex:1 1 100%}
  :where(.sat-wp13) .sat-toolbar .sat-chip{height:30px}
  :where(.sat-wp13) .sat-toolbar .sat-input-group{max-width:none}
  /* members: the "..." button sits in the top right corner of each card */
  :where(.sat-wp13) .sat-table--stack td.sat-col-main{padding-right:40px}
  :where(.sat-wp13) .sat-table--stack td.sat-col-actions{position:absolute;top:10px;right:var(--sat-s3);width:auto;padding:0}
  .sat-table--stack td.sat-cell-long{display:block;min-width:0;max-width:none;text-align:left}
  .sat-table--stack td.sat-cell-long::before{display:block;margin-bottom:2px}
  .sat-table--stack td.sat-col-share{width:100%}
  .sat-table--stack td .sat-cell-tool{text-align:right}
  .sat-table--stack td .sat-share{min-width:140px}
  .sat-two{gap:var(--sat-s3)}
  .sat-pw .sat-input{width:116px}
  .sat-table--members th,.sat-table--members td{padding-left:0;padding-right:0}
}

/* ---------- WP14 admin media, menus, settings, dropdown builder, migrate (upload.php, cover.php, coverlib.php, album.php, cover-menu.php, ultimate.php, settings.php, immersity.php, dropdown.php, migrate.php); body.sat-wp14 ---------- */
/* ---------- blocks / cards in a stack ---------- */
.sat-wp14-block + .sat-wp14-block{margin-top:var(--sat-s6)}
.sat-wp14-block > form.sat-toolbar + form,
.sat-wp14-block > .sat-toolbar + form{margin:0}
.sat-wp14-toolbar-help{flex:1 0 100%;margin-top:2px}
.sat-wp14-block .sat-savebar{margin:var(--sat-s4)}
.sat-bulk{justify-content:flex-start;gap:var(--sat-s3);background:var(--sat-grey-25)}
.sat-bulk .sat-select{width:auto;min-width:240px;max-width:100%;min-height:36px;padding-top:6px;padding-bottom:6px;font-size:var(--sat-fs-13)}
.sat-bulk .sat-label{white-space:nowrap}

/* ---------- upload drop zone (the page's own drag and drop script adds .drag_over) ---------- */
:where(.sat-wp14) .sat-drop{position:relative}
.sat-drop.drag_over{border-color:var(--sat-blue-400);background:var(--sat-blue-25)}
:where(.sat-wp14) .sat-drop:focus-visible{outline:none;box-shadow:var(--sat-focus);border-color:var(--sat-blue-400)}
#uploaded_file:empty{display:none}
/* result lines sent back by file_upload_cover.php / file_upload_library.php */
#uploaded_file:not(:empty):not(:has(.sat-up-batch)){margin-top:var(--sat-s4);padding:var(--sat-s3) var(--sat-s4);border:1px solid var(--sat-blue-100);
  border-radius:var(--sat-r-md);background:var(--sat-blue-25);font-size:var(--sat-fs-13);line-height:1.6;color:var(--sat-text)}
#uploaded_file b{color:var(--sat-ink)}

/* the block built from file_upload.php's reply (pictures + status / description / tags + buttons) */
.sat-up-batch{margin-top:var(--sat-s5);padding-top:var(--sat-s5);border-top:1px solid var(--sat-border);display:flex;flex-direction:column;gap:var(--sat-s4)}
.sat-up-count{margin:0;font-weight:600;color:var(--sat-ink)}
.sat-up-thumbs{display:flex;flex-wrap:wrap;gap:var(--sat-s2)}
.sat-up-thumbs .thumbnail{float:none;width:96px;height:96px;object-fit:cover;border-radius:12px;border:1px solid var(--sat-border);
  padding:0;margin:0;background:var(--sat-grey-50)}
.sat-up-fields{display:grid;grid-template-columns:200px minmax(0,1fr) minmax(0,1fr);gap:var(--sat-s4)}
.sat-up-fields .sat-field + .sat-field{margin-top:0}

/* "Uploading" panel while the pictures travel */
:where(.sat-wp14) #loading{position:fixed;inset:0;z-index:99;background:rgba(247,249,251,.7);backdrop-filter:blur(1px)}
.sat-wp14-loading{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);flex-direction:row;align-items:center;gap:var(--sat-s4);
  min-width:min(320px,calc(100vw - 32px));background:var(--sat-surface);box-shadow:var(--sat-sh-lg)}

/* ---------- editable picture tables ---------- */
.sat-table--fields td{vertical-align:top}
.sat-table--fields td.sat-col-check{padding-top:18px}
.sat-table--fields th{white-space:nowrap}
.sat-thumb{display:block;width:88px;height:66px;object-fit:cover;border-radius:10px;border:1px solid var(--sat-border);background:var(--sat-grey-50)}
.sat-thumb--fit{object-fit:contain;height:88px}
.sat-textarea--row{min-height:64px;min-width:170px;padding:8px 10px;font-size:var(--sat-fs-13);line-height:1.45;resize:vertical}
.sat-table--fields .sat-select{min-width:150px;min-height:38px;padding-top:6px;padding-bottom:6px;font-size:var(--sat-fs-13)}
.sat-table--fields tr.is-dirty td.sat-col-check{box-shadow:inset 3px 0 0 var(--sat-blue)}
.sat-wp14-block .sat-empty{padding:var(--sat-s8) var(--sat-s6)}

/* ---------- add / edit + tree (ultimate.php, album.php, cover-menu.php) ---------- */
.sat-wp14-menus{display:grid;grid-template-columns:minmax(300px,400px) minmax(0,1fr);gap:var(--sat-s6);align-items:start}
.sat-wp14-menus > .sat-card{min-width:0}
.sat-tree .sat-tree__row{display:flex;align-items:center;gap:var(--sat-s2);min-width:0}
.sat-tree .sat-tree-d1 .sat-tree__row{padding-left:var(--sat-s6)}
.sat-tree .sat-tree-d2 .sat-tree__row{padding-left:calc(var(--sat-s6) * 2)}
.sat-tree .sat-tree-d1 .sat-tree__row::before,.sat-tree .sat-tree-d2 .sat-tree__row::before{content:"";flex:none;width:12px;height:14px;margin-top:-8px;
  border-left:1.5px solid var(--sat-grey-200);border-bottom:1.5px solid var(--sat-grey-200);border-bottom-left-radius:6px}
.sat-tree .sat-tree-d1 .sat-cell-title,.sat-tree .sat-tree-d2 .sat-cell-title{font-weight:500}
.sat-tree .sat-tree__row .sat-cell-title{display:inline;min-width:0;overflow:hidden;text-overflow:ellipsis}
.sat-tree .sat-tree__kind{margin-left:auto}
.sat-tree td.sat-col-main{width:100%}
.sat-tree .sat-col-num,.sat-tree .sat-col-check{width:1%;white-space:nowrap}
.sat-tree .sat-col-check{padding-right:var(--sat-s4);text-align:center}
.sat-tree .sat-input--num{width:64px}
.sat-wp14-menus .sat-textarea{min-height:150px}

/* ---------- settings ---------- */
.sat-wp14-setting .sat-textarea{min-height:220px;font-size:var(--sat-fs-13)}
.sat-wp14-setting + .sat-wp14-setting{margin-top:var(--sat-s4)}

/* ---------- dropdown builder ---------- */
.sat-dd-list{display:flex;flex-direction:column;gap:var(--sat-s4)}
.sat-dd-list:empty::before{content:"No menus yet. Press Add a menu to start.";display:block;padding:var(--sat-s6);text-align:center;color:var(--sat-text-2);
  border:1.5px dashed var(--sat-grey-300);border-radius:var(--sat-r-lg);background:var(--sat-grey-25)}
.sat-dd{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sat-s3);padding:var(--sat-s4);border:1px solid var(--sat-border);border-radius:var(--sat-r-lg);background:var(--sat-grey-25)}
.sat-dd__head{flex:0 0 100%;display:flex;align-items:baseline;gap:var(--sat-s3)}
.sat-dd__title{font-weight:600;color:var(--sat-ink);font-size:var(--sat-fs-16)}
.sat-dd__choices{flex:0 0 100%;display:flex;flex-direction:column;gap:var(--sat-s3)}
.sat-dd__choice{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr) auto;gap:var(--sat-s3);align-items:start;padding:var(--sat-s3);
  background:var(--sat-surface);border:1px solid var(--sat-border);border-radius:var(--sat-r-md)}
.sat-dd__choice .sat-field + .sat-field{margin-top:0}
.sat-dd__choice .sat-textarea{min-height:96px;font-size:var(--sat-fs-13)}
.sat-dd__default{padding-top:26px;white-space:nowrap}
.sat-dd .remove_this{margin-left:auto}
:where(.sat-wp14) .sat-code{display:block}
.sat-wp14-codebox{min-height:160px}

/* ---------- migrate ---------- */
.sat-alert + .sat-wp14-migrate,.sat-alert + .sat-wp14-block{margin-top:var(--sat-s4)}
.sat-wp14-migrate .sat-textarea{min-height:320px}

/* ---------- narrower screens ---------- */
/* below 1280 px the picture tables are too wide for their five editable columns: each row becomes a small card
   (tick | picture | two columns of fields), and the column titles move into the cells */
@media (max-width:1279px){
  .sat-table--fields,.sat-table--fields tbody{display:block}
  .sat-table--fields thead{display:none}
  .sat-table--fields tr{display:grid;grid-template-columns:28px 96px minmax(0,1fr) minmax(0,1fr);gap:var(--sat-s3) var(--sat-s4);align-items:start;
    padding:var(--sat-s4);border-bottom:1px solid var(--sat-border);position:relative}
  .sat-table--fields tbody tr:last-child{border-bottom:0}
  .sat-table--fields td{display:block;width:auto;padding:0;border:0;text-align:left}
  .sat-table--fields td[data-label]::before{content:attr(data-label);display:block;margin-bottom:4px;font-size:var(--sat-fs-12);font-weight:600;color:var(--sat-text-2)}
  .sat-table--fields td.sat-col-check{grid-column:1;grid-row:span 3;padding:2px 0 0}
  .sat-table--fields td.sat-col-pic{grid-column:2;grid-row:span 3}
  .sat-table--fields td[colspan]{grid-column:1 / -1}
  .sat-table--fields tr.is-dirty td.sat-col-check{box-shadow:none}
  .sat-table--fields tr.is-dirty{box-shadow:inset 3px 0 0 var(--sat-blue)}
  .sat-table--fields tbody tr:hover td{background:none}
  .sat-table--fields .sat-select{width:100%;min-width:0}
  .sat-textarea--row{min-width:0;width:100%}
  .sat-table--fields td.sat-col-pic::before{display:none}
  .sat-wp14-menus{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:1023px){
  .sat-up-fields{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:719px){
  .sat-table--fields tr{display:block;padding:var(--sat-s4)}
  .sat-table--fields td{padding:4px 0}
  .sat-table--fields td.sat-col-check{position:absolute;right:var(--sat-s4);top:var(--sat-s3);width:auto;padding:0}
  .sat-table--fields td.sat-col-pic{padding-bottom:var(--sat-s2)}
  .sat-bulk .sat-select{width:100%;min-width:0}
  :where(.sat-wp14) .sat-table--stack .sat-col-actions{white-space:normal;flex-wrap:wrap;justify-content:flex-start;gap:var(--sat-s2);padding-top:var(--sat-s2)}
  .sat-dd__choice{grid-template-columns:minmax(0,1fr)}
  .sat-dd__default{padding-top:0}
  .sat-tree .sat-input--num{width:56px}
  .sat-tree .sat-tree__kind{display:none}
  .sat-tree .sat-tree-d1 .sat-tree__row{padding-left:var(--sat-s4)}
  .sat-tree .sat-tree-d2 .sat-tree__row{padding-left:calc(var(--sat-s4) * 2)}
  .sat-wp14-block .sat-savebar{margin:var(--sat-s2)}
}