/* FrameShort on the dashboard — the SECTION around the feature.
   Hand-written. The feature's own rules are site/fs/frameshort.css, which is
   GENERATED from the app's stylesheet (re-coloured for a light page) and
   scoped under .fs-root; nothing in here may name an fs- class except to
   re-arrange the engine's fixed hooks (#fsTabs, #fsBody, #fsFoot) into the
   web layout. Every class of our own is prefixed fsw- — the dashboard owns
   `.card`, `.grid`, `.soon`, `.btn` and a hundred others, and a bare generic
   class quietly inheriting one of them is the most-repeated defect in this
   project.

   THE LAYOUT (owner-asked 2026-09-08: "fix the ui so it looks nice on the
   website / is easy to use, doesn't have to be a copy/paste from the mobile
   version"): a header strip in the dashboard's own language (mark, name,
   profile picker, last read, Analyse), then a two-column workspace — a
   vertical section rail on the left (the engine's own #fsTabs, restyled) and
   the engine's page on the right. The app pins its page to 760 CSS px; the
   dashboard column is widened to 1320 for this page only (`.fpd-wide` on
   .main, set by page.js on entry and removed on exit). */

/* ── the page is wider than the rest of the dashboard ─────────────────── */
.main.fpd-wide{max-width:1320px}

/* ── the header strip ─────────────────────────────────────────────────── */
.fsw-head{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin:-6px 7px 14px}
.fsw-sync{font-size:12px;color:var(--muted);font-weight:600;line-height:1.5;display:flex;gap:8px;align-items:flex-start;max-width:560px;min-width:0}
.fsw-sync b{color:var(--deep);font-weight:800}
.fsw-sync .fsw-dot{width:8px;height:8px;border-radius:50%;background:var(--g1);margin-top:5px;flex-shrink:0;box-shadow:0 0 0 3px var(--gtint)}
.fsw-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fsw-stamp{font-size:11px;font-weight:600;color:var(--faint);font-family:ui-monospace,Menlo,monospace;white-space:nowrap}
.fsw-stamp b{color:var(--muted);font-weight:700}

/* the profile chooser — the same picture the Channel-profiles page draws */
.fsw-prof{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border:1px solid var(--line2);border-radius:999px;
  background:var(--card);color:var(--ink);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;transition:border-color .15s,box-shadow .15s;max-width:260px}
.fsw-prof:hover{border-color:#A9CFD9;box-shadow:var(--sh-sm)}
.fsw-prof.on{border-color:var(--deep);box-shadow:0 0 0 2px rgba(2,121,137,.14)}
.fsw-prof span.fsw-pn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fsw-prof svg{width:12px;height:12px;flex-shrink:0;color:var(--muted)}
.fsw-av{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;color:#fff;overflow:hidden;flex-shrink:0}
.fsw-av img{width:100%;height:100%;object-fit:cover;display:block}
.fsw-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:220px;padding:6px;background:var(--card);border:1px solid var(--line2);border-radius:12px;box-shadow:var(--sh-md)}
.fsw-menu[hidden]{display:none}
.fsw-menu button{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;border:0;border-radius:9px;background:transparent;color:var(--ink);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;text-align:left}
.fsw-menu button:hover{background:var(--paper)}
.fsw-menu button.on{color:var(--deep);background:#EAFBFF}
.fsw-profwrap{position:relative}

.fsw-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 15px;border-radius:10px;border:1px solid var(--line2);background:var(--card);
  color:var(--muted);font:inherit;font-size:13px;font-weight:700;cursor:pointer;text-decoration:none;transition:transform .12s,box-shadow .15s,border-color .15s;white-space:nowrap;box-shadow:var(--sh-xs)}
.fsw-btn:hover{border-color:#A9CFD9;color:var(--ink);box-shadow:var(--sh-sm);transform:translateY(-1px)}
.fsw-btn.primary{background:var(--brand);color:#fff;border-color:transparent;box-shadow:var(--sh-brand)}
.fsw-btn.primary:hover{background:var(--brand-hi);color:#fff}
.fsw-btn[disabled],.fsw-btn.off{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.fsw-btn.busy .fsw-spin{display:inline-block}
.fsw-spin{width:13px;height:13px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:fswSpin .8s linear infinite;display:none}
.fsw-btn:not(.primary) .fsw-spin{border-color:rgba(2,121,137,.25);border-top-color:var(--deep)}
@keyframes fswSpin{to{transform:rotate(360deg)}}

/* ── the gate: what stands in for the feature when it cannot run ──────── */
.fsw-gate{margin:7px;width:calc(100% - 14px);border:1px solid var(--line);border-radius:16px;background:var(--card);padding:26px 28px;
  display:flex;gap:18px;align-items:flex-start;box-shadow:var(--sh-xs)}
.fsw-gate .fsw-gi{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  background:#FFF0F2;color:#C9102D}
.fsw-gate.busy .fsw-gi{background:var(--btint);color:var(--b2)}
.fsw-gate.off .fsw-gi{background:var(--warnbg);color:var(--warn)}
.fsw-gate.app .fsw-gi{background:#EAFBFF;color:var(--deep)}
.fsw-gate h3{font-size:15px;font-weight:800;letter-spacing:-.2px;margin:0 0 4px}
.fsw-gate p{font-size:13px;color:var(--muted);font-weight:600;line-height:1.55;margin:0}
.fsw-gate .fsw-cta{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}
.fsw-gate .fsw-spin{display:inline-block;width:16px;height:16px;border-color:rgba(2,121,137,.25);border-top-color:var(--deep)}

/* a licence refusal that arrives MID-RUN sits above the panel, not over it */
.fsw-warn{margin:7px;width:calc(100% - 14px);border:1px solid var(--warnedge);background:var(--warnbg);color:#7A5222;border-radius:12px;
  padding:10px 14px;font-size:12.5px;font-weight:700;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.fsw-warn a{color:var(--deep);text-decoration:underline}

/* ── the workspace: rail + content ────────────────────────────────────── */
/* the app's body owns the FrameShort tokens; the section's own frame is
   transparent on the dashboard's ground and the cards carry the surfaces */
.fs-root{
  display:block;position:relative;margin:0 7px;width:calc(100% - 14px);
  color:var(--ink);
  font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px;line-height:normal;-webkit-font-smoothing:antialiased;
  -webkit-user-select:text;user-select:text;
}
.fs-root *{box-sizing:border-box}
.fs-root .view{display:block}
/* the engine's own header (mark + name + pill tabs) is not drawn on the web —
   the page has a header, and the tabs are the rail */
.fs-root .fs-head{display:none}
.fs-root #fsView{display:grid;grid-template-columns:212px minmax(0,1fr);gap:18px;align-items:start;position:relative}

/* the rail */
.fsw-rail{position:sticky;top:18px;display:flex;flex-direction:column;gap:14px;min-width:0}
.fs-root .fsw-rail .fs-tabs{display:flex;flex-direction:column;gap:2px;padding:8px;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh-xs)}
.fs-root .fsw-rail .fs-tab{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:10px;font-size:13px;font-weight:700;color:var(--muted);cursor:pointer;
  background:transparent;border:0;transition:background .12s,color .12s;line-height:1.2;text-align:left;white-space:nowrap}
.fs-root .fsw-rail .fs-tab:hover{color:var(--ink);background:var(--paper)}
.fs-root .fsw-rail .fs-tab.on{color:var(--deep);background:#EAFBFF}
.fs-root .fsw-rail .fs-tab.lock{color:var(--faint);cursor:default}
.fs-root .fsw-rail .fs-tab.lock:hover{background:transparent;color:var(--faint)}
/* an icon per section, drawn as a mask so it takes the row's colour */
.fs-root .fsw-rail .fs-tab::before{content:"";width:16px;height:16px;flex-shrink:0;background:currentColor;
  -webkit-mask:var(--fsw-ic) center/contain no-repeat;mask:var(--fsw-ic) center/contain no-repeat}
.fs-root .fsw-rail .fs-tab.lock::after{content:"";width:11px;height:11px;margin-left:auto;background:currentColor;opacity:.7;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center/contain no-repeat}
.fs-root .fsw-rail .fs-tab[data-fstab="overview"]{--fsw-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E")}
.fs-root .fsw-rail .fs-tab[data-fstab="juicers"]{--fsw-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l6-6 4 4 8-8'/%3E%3Cpath d='M14 7h7v7'/%3E%3C/svg%3E")}
.fs-root .fsw-rail .fs-tab[data-fstab="testers"]{--fsw-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6v5l4 9a2 2 0 0 1-1.8 3H6.8A2 2 0 0 1 5 17l4-9z'/%3E%3C/svg%3E")}
.fs-root .fsw-rail .fs-tab[data-fstab="breakdown"]{--fsw-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E")}
.fs-root .fsw-rail .fs-tab[data-fstab="review"]{--fsw-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E")}
.fs-root .fsw-rail .fs-tab[data-fstab="audience"]{--fsw-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='4'/%3E%3Cpath d='M2 21a7 7 0 0 1 14 0'/%3E%3Cpath d='M17 4a4 4 0 0 1 0 8M22 21a7 7 0 0 0-5-6.7'/%3E%3C/svg%3E")}
.fs-root .fsw-rail .fs-tab[data-fstab="ask"]{--fsw-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.5 7.2L4 21l1.8-5.3A8 8 0 1 1 21 12z'/%3E%3C/svg%3E")}
.fs-root .fsw-rail .fs-tab[data-fstab="publish"]{--fsw-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4M6 10l6-6 6 6'/%3E%3Cpath d='M4 20h16'/%3E%3C/svg%3E")}
.fs-root .fsw-rail .fs-tab[data-fstab="sales"]{--fsw-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v20'/%3E%3Cpath d='M17 6.5A4 4 0 0 0 13 4H10.5a3.5 3.5 0 0 0 0 7h3a3.5 3.5 0 0 1 0 7H10a4 4 0 0 1-4-2.5'/%3E%3C/svg%3E")}
.fs-root .fsw-rail .fs-tab[data-fstab="channels"]{--fsw-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-1 1'/%3E%3Cpath d='M14 11a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l1-1'/%3E%3C/svg%3E")}

/* linked accounts, at a glance, under the rail (drawn by page.js) */
.fsw-accounts{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:13px 14px;display:flex;flex-direction:column;gap:9px;box-shadow:var(--sh-xs)}
.fsw-accounts:empty{display:none}
.fsw-acl{font-size:9.5px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--faint)}
.fsw-acr{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:700;min-width:0;color:var(--ink)}
.fsw-acr i{width:8px;height:8px;border-radius:50%;background:var(--line2);flex-shrink:0}
.fsw-acr i.on{background:var(--g1);box-shadow:0 0 0 3px var(--gtint)}
.fsw-acr i.warn{background:var(--warn);box-shadow:0 0 0 3px var(--warnbg)}
.fsw-acr .fsw-ach{margin-left:auto;color:var(--faint);font-weight:600;font-family:ui-monospace,Menlo,monospace;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:110px}
.fsw-acr .fsw-aclink{margin-left:auto;color:var(--deep);font-weight:700;cursor:pointer;font-size:11.5px}
.fsw-acr .fsw-aclink:hover{text-decoration:underline}
.fsw-acn{font-size:11px;color:var(--faint);font-weight:600;line-height:1.45;border-top:1px solid var(--line);padding-top:9px}

/* the content column: the engine's page, given room */
.fsw-content{min-width:0}
.fs-root #fsBody{min-height:420px}
/* the engine's footer carries the Analyse button on Channels; on the web it
   is the header's, and the bar would be furniture. Off. */
.fs-root .fs-foot,.fs-root .fs-foot.on{display:none}
.fs-root #fsView:has(.fs-foot.on) .fs-page{padding-bottom:26px}
/* the engine's full-page loader covers #fsView (position:absolute; inset:0)
   — on the web that is the whole workspace, rail included, which is right */
.fs-root .fs-over{border-radius:16px}

/* ── the log drawer ───────────────────────────────────────────────────── */
.fsw-log{margin:10px 7px 0;width:calc(100% - 14px)}
.fsw-log summary{cursor:pointer;font-size:11px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--faint);padding:6px 2px;list-style:none;display:flex;align-items:center;gap:8px}
.fsw-log summary::-webkit-details-marker{display:none}
.fsw-log summary::before{content:"▸";font-size:10px;transition:transform .15s}
.fsw-log[open] summary::before{transform:rotate(90deg)}
.fsw-log summary em{font-style:normal;font-weight:700;letter-spacing:0;text-transform:none;color:var(--muted)}
.fsw-logb{margin:4px 0 0;max-height:260px;overflow:auto;background:#0F1214;color:#C7D3D8;border-radius:10px;padding:10px 12px;
  font:11px/1.5 ui-monospace,Menlo,monospace;white-space:pre-wrap;word-break:break-word}
.fsw-logb .err{color:#FF8A9A}

/* ── narrow: the rail becomes a strip above the page ──────────────────── */
@media (max-width:980px){
  .fs-root #fsView{grid-template-columns:minmax(0,1fr)}
  .fsw-rail{position:static;flex-direction:column}
  .fs-root .fsw-rail .fs-tabs{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;gap:4px;padding:6px;scrollbar-width:none}
  .fs-root .fsw-rail .fs-tabs::-webkit-scrollbar{display:none}
  .fs-root .fsw-rail .fs-tab{padding:8px 11px;font-size:12.5px}
  .fs-root .fsw-rail .fs-tab.lock::after{display:none}
  .fsw-accounts{display:none}
}
@media (max-width:640px){
  .fsw-head{margin:-4px 7px 12px}
  .fsw-h{font-size:19px}
  .fsw-actions{width:100%;justify-content:flex-start}
}
@media (prefers-reduced-motion:reduce){ .fsw-spin{animation:none} }