/* FTN Platform Website — Workspace Shell */
#workspace-root:empty{display:block;min-height:100vh;background:var(--color-black)}
.workspace{--workspace-accent:var(--color-red-on-dark);position:relative;background:var(--color-black);color:var(--color-white);overflow:hidden;isolation:isolate}.workspace:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 78% 8%,color-mix(in srgb,var(--workspace-accent) 14%,transparent),transparent 29%),radial-gradient(circle at 8% 48%,rgba(255,255,255,.025),transparent 24%);pointer-events:none;z-index:0}.workspace__atmosphere{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;opacity:var(--heritage-opacity-on-dark);color:var(--color-white)}.workspace__atmosphere svg{display:block;width:100%;height:100%}.workspace[data-workspace-bg^="dark-"]{background:radial-gradient(ellipse at 80% 0%,rgba(255,255,255,.055),transparent 58%),var(--color-black)}.workspace[data-workspace-bg="warm"]{background:radial-gradient(ellipse at 80% 0%,color-mix(in srgb,var(--workspace-accent) 18%,transparent),transparent 60%),var(--color-black)}
.workspace__header{position:relative;z-index:1;padding:var(--space-20) 0;border-bottom:1px solid rgba(255,255,255,.075)}.workspace__header-top{display:flex;align-items:center;justify-content:space-between;width:min(var(--container-max),calc(100% - 48px));margin:0 auto var(--space-20)}.workspace__back{display:inline-flex;align-items:center;gap:var(--space-8);color:#c0c3c9;text-decoration:none;font-size:var(--text-small-size);font-weight:750}.workspace__back:hover{color:var(--color-white)}.workspace__hero{width:min(var(--container-max),calc(100% - 48px));margin:auto;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(240px,.6fr);gap:clamp(24px,4vw,56px);align-items:center}.workspace__identity{max-width:760px}.workspace__eyebrow{display:inline-flex;align-items:center;gap:var(--space-8);font-size:var(--text-small-size);font-weight:850;letter-spacing:.12em;text-transform:uppercase;color:var(--workspace-accent-small,var(--workspace-accent))}.workspace__title{font-family:var(--font-heading);font-weight:800;letter-spacing:-.035em;font-size:clamp(2.25rem,1.55rem + 2.25vw,4rem);line-height:1;margin:var(--space-8) 0 var(--space-12);text-wrap:balance}.workspace__tagline{font-size:clamp(1rem,.94rem + .28vw,1.15rem);line-height:1.55;color:#c0c2c8;margin:0;max-width:58ch}.workspace__status{display:inline-flex;align-items:center;gap:var(--space-8);margin-top:var(--space-16);padding:var(--space-8) var(--space-16);border-radius:var(--radius-full);border:1px solid var(--workspace-accent);color:var(--workspace-accent-small,var(--workspace-accent));font-size:var(--text-caption-size);font-weight:750;letter-spacing:.04em;text-transform:uppercase}.workspace__hero-art{margin:0;position:relative;justify-self:end;width:fit-content;max-width:100%;overflow:hidden;border-radius:clamp(14px,1.5vw,20px);background:#09090a;border:1px solid rgba(255,255,255,.14);box-shadow:0 24px 64px rgba(0,0,0,.4),0 0 38px color-mix(in srgb,var(--workspace-accent) 8%,transparent);transition:border-color .3s ease,box-shadow .3s ease}.workspace__hero-art:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.018),transparent 54%);pointer-events:none}.workspace__hero-art img{display:block;width:auto;max-width:100%;height:auto;max-height:420px;object-fit:contain}.workspace__hero:hover .workspace__hero-art{border-color:color-mix(in srgb,var(--workspace-accent) 52%,#fff);box-shadow:0 28px 72px rgba(0,0,0,.46),0 0 48px color-mix(in srgb,var(--workspace-accent) 12%,transparent)}.workspace__hero-glow{position:absolute;inset:auto 12% -20% 12%;height:30%;background:var(--workspace-accent);filter:blur(46px);opacity:.18;pointer-events:none}
.workspace[data-surface-mode="interface"] .workspace__header{padding:var(--space-20) 0 var(--space-32)}.workspace__hero--interface{grid-template-columns:minmax(0,800px);align-items:start}.workspace__hero--interface .workspace__title{font-size:clamp(2.2rem,1.65rem + 2vw,3.65rem)}
.workspace[data-surface-mode="approved-image"] .workspace__header{display:flex;min-height:480px;flex-direction:column;justify-content:space-between;padding:var(--space-20) 0 clamp(58px,7vw,84px);isolation:isolate}.workspace[data-surface-mode="approved-image"] .workspace__header:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.78) 34%,rgba(0,0,0,.24) 69%,rgba(0,0,0,.1) 100%),linear-gradient(0deg,rgba(0,0,0,.78) 0%,transparent 44%,rgba(0,0,0,.18) 100%);pointer-events:none}.workspace[data-surface-mode="approved-image"] .workspace__header-top{position:relative;z-index:2}.workspace[data-surface-mode="approved-image"] .workspace__hero{display:block;position:static}.workspace[data-surface-mode="approved-image"] .workspace__identity{position:relative;z-index:2;max-width:640px;text-shadow:0 2px 22px rgba(0,0,0,.72)}.workspace[data-surface-mode="approved-image"] .workspace__title{max-width:13ch}.workspace[data-surface-mode="approved-image"] .workspace__tagline{max-width:56ch;color:#e2e3e6}.workspace[data-surface-mode="approved-image"] .workspace__hero-art{position:absolute;inset:0;z-index:-2;width:100%;max-width:none;height:100%;border:0;border-radius:0;background:#050505;box-shadow:none}.workspace[data-surface-mode="approved-image"] .workspace__hero-art:after{background:linear-gradient(180deg,rgba(0,0,0,.06),transparent 62%)}.workspace[data-surface-mode="approved-image"] .workspace__hero-art img{width:100%;max-width:none;height:100%;max-height:none;object-fit:cover;object-position:var(--workspace-hero-focal-desktop,50% 50%)}.workspace[data-surface-mode="approved-image"] .workspace__hero-glow{display:none}.workspace[data-surface-mode="approved-image"] .workspace__hero:hover .workspace__hero-art{border:0;box-shadow:none}
.workspace__notification{position:fixed;left:50%;bottom:var(--space-24);transform:translateX(-50%);z-index:1080;margin:0;padding:var(--space-12) var(--space-16);border-radius:var(--radius-12);border:1px solid rgba(255,255,255,.15);background:rgba(26,26,26,.96);color:#c3c6cc;font-size:var(--text-small-size);max-width:min(90vw,520px);box-shadow:0 12px 38px rgba(0,0,0,.5);backdrop-filter:blur(12px)}.workspace__notification[data-tone="success"]{border-color:color-mix(in srgb,var(--workspace-accent) 60%,#fff);color:var(--color-white)}
.workspace__toolbar{position:relative;z-index:1;display:flex;gap:var(--space-8);width:min(var(--container-max),calc(100% - 48px));margin:auto;padding:var(--space-16) 0;border-bottom:1px solid rgba(255,255,255,.1);overflow-x:auto;scrollbar-width:none}.workspace__toolbar::-webkit-scrollbar{display:none}.workspace__toolbar-item{min-height:40px;padding:var(--space-8) var(--space-16);border-radius:var(--radius-full);border:1px solid transparent;background:none;color:#b9bdc5;font-size:var(--text-small-size);font-weight:750;cursor:pointer;white-space:nowrap}.workspace__toolbar-item:hover{color:#fff;background:rgba(255,255,255,.035)}.workspace__toolbar-item[aria-current="true"]{border-color:var(--workspace-accent);color:var(--color-white);background:color-mix(in srgb,var(--workspace-accent) 10%,transparent)}
.workspace__content{position:relative;z-index:1;padding:clamp(36px,5vw,64px) 0 clamp(58px,7vw,88px);width:min(1000px,calc(100% - 48px));margin:auto}.workspace__content>section+section{margin-top:clamp(26px,4vw,44px)}.workspace__footer{position:relative;z-index:1;padding:var(--space-24);border-top:1px solid rgba(255,255,255,.1);color:#aeb2ba;font-size:var(--text-small-size);text-align:center}.workspace__footer a{color:var(--color-white);font-weight:750}.workspace-field{margin-bottom:var(--space-20)}.workspace-field label:not(.workspace-checkbox-label){display:block;font-size:var(--text-small-size);font-weight:750;color:var(--color-white);margin-bottom:var(--space-8)}.workspace-field input:not([type="checkbox"]):not([type="radio"]),.workspace-field select,.workspace-field textarea{width:100%;padding:var(--space-12) var(--space-16);border-radius:var(--radius-12);border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.05);color:var(--color-white);font-family:var(--font-body);font-size:var(--text-body-size);transition:border-color .2s ease,background .2s ease,box-shadow .2s ease}
/* Sitewide dropdown-contrast fix: the select element itself renders fine (white text over the
   dark page showing through its near-transparent background), but the native <option> popup
   does NOT inherit that transparency -- browsers fall back to a system-default (typically white)
   popup background, leaving the inherited white option text unreadable against it. Confirmed by
   direct measurement (getComputedStyle on a live <option>: color:white, background:transparent),
   not assumed. Every workspace-shell consumer (Opportunities, Events, Riddim, Screen, ibis.ai,
   Kaiso, Radio, Love, Display Network) shares this one rule, so the fix is here once, not per page.*/
.workspace-field select option{background:#141519;color:#fff}.workspace-field input:hover,.workspace-field select:hover,.workspace-field textarea:hover{border-color:rgba(255,255,255,.34)}.workspace-field input:focus,.workspace-field select:focus,.workspace-field textarea:focus{outline:none;border-color:var(--workspace-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--workspace-accent) 16%,transparent);background:rgba(255,255,255,.065)}.workspace-field__hint{font-size:var(--text-caption-size);color:#aeb2ba;margin-top:var(--space-4);line-height:1.5}.workspace-output{margin-top:var(--space-24);padding:var(--space-20);border-radius:var(--radius-16);border:1px solid rgba(255,255,255,.13);background:linear-gradient(145deg,rgba(255,255,255,.05),rgba(255,255,255,.02));box-shadow:0 18px 48px rgba(0,0,0,.14)}.workspace-output h3{font-family:var(--font-heading);margin:0 0 var(--space-12);color:var(--color-white)}.workspace-output h4{font-family:var(--font-heading);font-size:.9rem;letter-spacing:.04em;text-transform:uppercase;color:var(--workspace-accent-small,var(--workspace-accent));margin:var(--space-20) 0 var(--space-8)}.workspace-output ul{padding-left:var(--space-20);color:#c0c3c9}.workspace-export-row{display:flex;gap:var(--space-8);margin-top:var(--space-16);flex-wrap:wrap}.workspace-checkbox-label{display:block;font-weight:400;color:#c0c3c9;margin-bottom:var(--space-8)}.media-intake__input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.media-intake__label{display:inline-flex;align-items:center;gap:var(--space-8);min-height:44px;padding:var(--space-12) var(--space-20);border-radius:var(--radius-8);border:1px dashed rgba(255,255,255,.32);color:var(--color-white);font-weight:750;font-size:var(--text-small-size);cursor:pointer}.media-intake__label:hover{border-color:var(--workspace-accent)}.media-intake__preview{margin-top:var(--space-16)}.media-intake__preview audio,.media-intake__preview video{width:100%}
.workspace-fallback__heading{font-family:var(--font-heading);font-size:1.4rem;margin:0 0 var(--space-16);color:var(--color-white)}.workspace-fallback__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-16)}.workspace-fallback__grid+.workspace-fallback__note{margin-top:var(--space-24)}.workspace-fallback__note{color:#c0c3c9;font-size:var(--text-small-size);margin:var(--space-24) 0 var(--space-16)}.workspace-fallback__grid .workspace-output{margin-top:0}
@media(prefers-reduced-motion:reduce){.workspace__hero-art,.workspace__hero-art img{transform:none!important;transition:none!important}}
@media(max-width:860px){.workspace__hero{grid-template-columns:1fr}.workspace__hero-art{display:block;justify-self:start}.workspace__hero-art img{max-height:300px}.workspace__title{font-size:clamp(2.2rem,9vw,3.5rem)}.workspace__content{padding-top:var(--space-24)}.workspace[data-surface-mode="approved-image"] .workspace__header{min-height:510px}.workspace[data-surface-mode="approved-image"] .workspace__header:after{background:linear-gradient(90deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.62) 58%,rgba(0,0,0,.2) 100%),linear-gradient(0deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.24) 68%,rgba(0,0,0,.12) 100%)}.workspace[data-surface-mode="approved-image"] .workspace__hero-art img{height:100%;max-height:none;object-position:var(--workspace-hero-focal-mobile,50% 50%)}}
@media(max-width:640px){.workspace__header{padding-top:var(--space-20)}.workspace__header-top,.workspace__hero,.workspace__toolbar,.workspace__content{width:calc(100% - 28px)}.workspace__header-top{margin-bottom:var(--space-20)}.workspace__hero{gap:20px}.workspace__hero-art{border-radius:18px}.workspace__title{font-size:clamp(2.2rem,12vw,3.7rem)}.workspace__tagline{font-size:1rem;color:#c7c9ce}.workspace__notification{left:var(--space-14);right:var(--space-14);bottom:calc(72px + env(safe-area-inset-bottom));transform:none;max-width:none}.workspace__content{padding-bottom:82px}.workspace-export-row .btn{min-height:44px;flex:1 1 140px}.workspace__footer{padding-bottom:calc(78px + env(safe-area-inset-bottom))}}
/* Root-cause fix: every workspace-shell product (Radio, Learn, Events, ibis.ai, Kaiso,
   Opportunities, Riddim, Screen, Love, Display Network, ...) is a bounded-dark surface
   (background:var(--color-black) on .workspace, above), but their JS renders plain, unqualified
   .btn-outline for in-page controls (SAVE/SHARE/NEXT, provider "Visit" links, filter chips, etc.).
   .btn-outline (css/components/buttons.css) is the *light*-surface variant --
   color:var(--color-black);border-color:var(--color-black) -- i.e. literal black text/border on a
   black background: invisible until hover. buttons.css already ships the correct dark-surface
   variant, .btn-outline--on-dark, but individual workspace JS files were never updated to request
   it. Rather than hunting down and renaming the class in every consumer (and leaving the same trap
   for the next workspace page that copies existing markup), this scopes the already-approved
   .btn-outline--on-dark palette to any .btn-outline rendered inside .workspace, so the whole class
   of bug is closed at the shared-component level. No new colors: this mirrors buttons.css's
   .btn-outline--on-dark values exactly, default/hover/active/disabled included. */
.workspace .btn-outline{color:var(--color-white);border-color:rgba(255,255,255,.6)}
.workspace .btn-outline:hover{background:var(--color-white);color:var(--color-black);border-color:var(--color-white)}
.workspace .btn-outline:active{background:rgba(255,255,255,.85);border-color:var(--color-white);color:var(--color-black)}
.workspace .btn-outline:disabled{color:rgba(255,255,255,.4);border-color:rgba(255,255,255,.3)}
.riddim-studio-search{background:#0e0b12;color:#fff;width:min(1000px,calc(100% - 48px));margin:var(--space-32) auto;padding:var(--space-32) var(--space-24);border-radius:var(--radius-16)}
.riddim-studio-search .workspace-fallback__heading{color:#fff}
.riddim-studio-search .workspace-fallback__note{color:#c0c3c9}
.riddim-studio-search .workspace-output{background:linear-gradient(145deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.13)}
.riddim-studio-search .workspace-output h3{color:#fff}
.riddim-studio-search__featured-label{font-size:var(--text-caption-size);font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--color-riddim,#e10613);margin-bottom:var(--space-8)}
.riddim-studio-search__form{display:flex;flex-wrap:wrap;gap:var(--space-8);margin-top:var(--space-20)}
.riddim-studio-search__form input,.riddim-studio-search__form select{min-height:44px;padding:0 var(--space-12);border-radius:var(--radius-8);border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);color:var(--color-white)}
.riddim-studio-search__form input{flex:1 1 220px}
.riddim-studio-search__form select option{background:#141519;color:#fff}
.riddim-resources{background:#0e0b12;color:#fff;width:min(1000px,calc(100% - 48px));margin:var(--space-32) auto;padding:var(--space-32) var(--space-24);border-radius:var(--radius-16)}
.riddim-resources .workspace-fallback__heading{color:#fff}
.riddim-resources .workspace-fallback__note{color:#c0c3c9}
.riddim-resources .workspace-output{background:linear-gradient(145deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.13)}
.riddim-resources .workspace-output h3{color:#fff}
.riddim-resources__group+.riddim-resources__group{margin-top:var(--space-24)}
.riddim-resources__group-label{font-size:var(--text-caption-size);font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--color-riddim,#e10613);margin-bottom:var(--space-8)}
