/* Marketplace adaptation of the myCL2 Voices visual design. Assets stay local. */
:root{--bg:#f4efe4;--surface:#fff;--surface-2:#f4efe4;--field:#fcfaf5;--text:#2b211a;--muted:#6b6455;--border:#e3dccb;--primary:#7a502f;--primary-ink:#fff5df;--primary-soft:#f3ead5;--gold:#b7791f;--accent:#b45309;--danger:#b42318;--radius:16px;color-scheme:light}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 "Noto Sans",system-ui,-apple-system,"Segoe UI",sans-serif}a{color:var(--primary)}button,input,textarea,select{font:inherit}a,button,input,summary{touch-action:manipulation}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--gold);outline-offset:3px}.skip-link{position:absolute;top:-100px;left:12px;z-index:30;background:var(--surface);padding:10px}.skip-link:focus{top:10px}
.topbar{min-height:80px;position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px 26px;background:var(--surface);border-bottom:1px solid var(--border)}.brand{white-space:nowrap;text-decoration:none;line-height:1}.brand-my{font-size:11px;vertical-align:.85em;font-weight:700;font-style:italic}.brand-cl{font-size:28px;font-weight:900;font-style:italic;color:var(--gold)}.brand-project{font-size:13px;font-weight:700;font-style:italic}.modes{display:flex;gap:4px;padding:4px;background:var(--surface-2);border:1px solid var(--border);border-radius:999px}.modes a{padding:8px 18px;text-decoration:none;border-radius:999px;font-weight:600;font-size:14px;white-space:nowrap}.modes a:hover,.modes a[aria-current=page]{background:var(--primary);color:var(--primary-ink)}.account{display:flex;gap:14px;align-items:center;font-size:14px}.account form{margin:0}.account button{padding:7px 14px;background:transparent;color:var(--primary);border:1px solid var(--border)}
.workspace{display:grid;grid-template-columns:216px minmax(0,1fr) 240px;min-height:calc(100vh - 80px)}.sidenav{background:var(--surface);border-right:1px solid var(--border);padding:24px 14px}.sidenav nav{position:sticky;top:104px}.nav-label,.eyebrow{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--muted)}.nav-label{padding:0 12px}.sidenav a{display:block;text-decoration:none;padding:10px 12px;margin:5px 0;border-radius:10px;font-size:14px;font-weight:600}.sidenav a:hover,.sidenav a[aria-current=page]{background:var(--primary-soft)}.sidebar-note{font-size:13px;padding:18px 12px;color:var(--muted);border-top:1px solid var(--border);margin-top:24px}.sidebar-note strong{color:var(--primary)}main{min-width:0;max-width:1120px;width:100%;padding:28px 32px 56px;margin:0 auto}.rail{padding:28px 20px 20px 0}.rail section{padding:20px}.rail h2{font-size:17px;margin-top:0}.rail p{font-size:13px;color:var(--muted)}.rail a{font-size:13px;font-weight:600}.status-strip{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:12px;margin-bottom:22px;color:var(--muted)}#connection{margin:0}#data-status:empty{display:none}#data-status{background:var(--primary-soft);padding:12px 16px;border-radius:10px}
h1{font-size:clamp(28px,calc(3*var(--vw)),40px);font-weight:750;letter-spacing:-.035em;line-height:1.2;margin:12px 0 20px}h2{font-size:22px;line-height:1.3;letter-spacing:-.02em}h3{font-size:18px}section,article{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;margin-bottom:20px;box-shadow:0 2px 8px #1a203305}button,.button{display:inline-block;background:var(--primary);color:var(--primary-ink);border:1px solid transparent;border-radius:999px;padding:10px 20px;cursor:pointer;font-weight:600;font-size:14px;text-decoration:none}button:hover,.button:hover{filter:brightness(1.1)}button:disabled{opacity:.5;cursor:wait}input:not([type=checkbox]):not([type=hidden]),select,textarea{background:var(--field);color:var(--text);border:1px solid var(--border);border-radius:10px;padding:11px 13px;width:100%;max-width:640px;margin:8px 0}input[type=checkbox]{accent-color:var(--primary);width:18px;height:18px;vertical-align:middle}input[type=file]{font-size:14px}input::file-selector-button{background:var(--primary-soft);color:var(--primary);border:0;border-radius:7px;padding:8px 12px;margin-right:10px}textarea{min-height:110px}label{display:block;font-size:14px;font-weight:600}.helptext,.muted{color:var(--muted);font-size:13px}.error,.errorlist{color:var(--danger)}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:18px;margin-top:24px}.grid article{padding:15px;margin-bottom:0;min-width:0}.grid article>a:first-child{text-decoration:none}.grid img{width:100%;height:180px;object-fit:contain;background:var(--field);border-radius:10px}.grid h2{font-size:19px;margin:12px 0 6px}.grid h3{margin-bottom:6px}.grid p{font-size:14px;margin:6px 0}#original{max-width:100%;max-height:400px;border-radius:12px}.hero{padding:28px 30px;background:linear-gradient(120deg,var(--surface),var(--primary-soft));border:1px solid var(--border);border-radius:var(--radius);margin-bottom:24px}.hero h1{margin-bottom:12px}.hero p{max-width:650px;color:var(--muted);margin-bottom:0}.hero .eyebrow{color:var(--accent)}.footer{padding:18px 26px;text-align:center;background:var(--surface);border-top:1px solid var(--border);font-size:12px;color:var(--muted)}.mobile-menu{display:none}
@media((min-width:1550px) and (min-height:2473px)){main{padding:36px 44px}}@media((max-width:1200px) or (max-height:1915px)){.workspace{grid-template-columns:200px minmax(0,1fr)}.rail{display:none}.topbar{gap:12px}.modes a{padding:8px 12px}.account{gap:10px}}@media((max-width:900px) or (max-height:1436px)){.topbar{flex-wrap:wrap;padding:16px 20px}.modes{order:3;margin:auto}.workspace{grid-template-columns:minmax(0,1fr)}.sidenav{display:none}main{padding:24px 20px}.mobile-menu{display:block;position:relative}.mobile-menu summary{cursor:pointer;padding:7px 12px;border:1px solid var(--border);border-radius:999px;font-size:13px}.mobile-menu nav{position:absolute;right:0;top:45px;background:var(--surface);padding:12px;border:1px solid var(--border);border-radius:12px;width:210px;box-shadow:0 8px 24px #0002}.mobile-menu a{display:block;padding:8px;text-decoration:none}.account{margin-left:auto}}@media((max-width:700px) or (max-height:1117px)){.account>a{font-size:13px}.brand-cl{font-size:24px}.brand-project{font-size:11px}.hero{padding:22px}.grid{grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:12px}.grid img{height:150px}.status-strip{align-items:start}.modes{width:100%;justify-content:center}.modes a{flex:1;text-align:center}.topbar{gap:10px}.account .profile-link{display:none}}
@media(prefers-color-scheme:dark){:root{--bg:#1a1712;--surface:#241f18;--surface-2:#2f281f;--field:#2b251d;--text:#f2ebdd;--muted:#aa9f8b;--border:#3d3427;--primary:#d8bd8a;--primary-ink:#2a2015;--primary-soft:#3a301f;--accent:#fb923c;--gold:#f6c05c;--danger:#f87171;color-scheme:dark}}
@media((max-width:700px) or (max-height:1117px)){.modes{min-width:0}.modes a{min-width:0;white-space:normal;font-size:12px;line-height:1.35;padding:9px 8px}.status-strip>*{min-width:0}.mobile-menu nav{max-width:calc(var(--app) - 40px)}}

.ui-lang{display:flex;flex-shrink:0;gap:2px;align-items:center;padding:3px;background:var(--surface-2);border:1px solid var(--border);border-radius:999px;margin:0}.ui-lang button{padding:6px 9px;border-radius:999px;font-size:12px;color:var(--muted);background:transparent}.ui-lang button[aria-pressed=true]{background:var(--primary);color:var(--primary-ink)}
@media((max-width:900px) or (max-height:1436px)){.topbar{gap:10px}.account{margin-left:0}.ui-lang{margin-left:auto}.brand-project{font-size:11px}.brand-cl{font-size:24px}}
@media((max-width:420px) or (max-height:670px)){.topbar{padding:12px}.brand-project{font-size:10px}.brand-cl{font-size:22px}.account{gap:7px}.account>a{font-size:12px}.mobile-menu summary{padding:6px 8px}.ui-lang button{padding:5px 7px}.topbar{column-gap:7px}}

/* Academy header: project launcher, centered search, language and profile. */
.academy-header{display:grid;grid-template-columns:1fr minmax(0,520px) 1fr;gap:20px;min-height:74px;padding:14px 24px}.brand-group{display:flex;align-items:center;gap:12px;min-width:0}.header-icon{display:grid;place-items:center;flex:none;width:36px;height:36px;padding:7px;border:0;border-radius:50%;background:transparent;color:var(--primary);text-decoration:none}.header-icon:hover{background:var(--primary-soft)}.header-icon svg,.header-profile svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.home-link svg{fill:currentColor;stroke:none}.header-right{display:flex;justify-self:end;align-items:center;gap:10px}.header-right .ui-lang{margin:0}.header-profile{position:relative}.header-profile summary{display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;color:var(--primary);font-size:14px;font-weight:600;padding:8px;border-radius:999px}.header-profile summary::-webkit-details-marker{display:none}.header-profile summary:hover{background:var(--primary-soft)}.header-profile .chevron{width:14px;height:14px}.header-profile nav{position:absolute;right:0;top:100%;z-index:20;width:max-content;min-width:220px;max-width:calc(100vw - 24px);white-space:nowrap;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--surface);box-shadow:0 8px 24px #0002}.header-profile nav a{display:block;padding:8px;text-decoration:none;border-radius:8px}.header-profile nav a:hover{background:var(--primary-soft)}.header-profile nav p{margin:4px 8px;overflow-wrap:anywhere}.header-profile nav form{margin:6px 0 0}.header-profile nav button{width:100%}.nav-toggle{display:none}.sidebar-backdrop[hidden]{display:none}
@media((max-width:1100px) or (max-height:1755px)){.academy-header{grid-template-columns:auto minmax(0,1fr) auto;gap:14px}.brand-group{gap:8px}.academy-header .brand-project{font-size:11px}}
@media((max-width:900px) or (max-height:1436px)){.nav-toggle{display:grid}.academy-header{padding:12px 14px}.brand-group{gap:5px}.academy-header .header-right{gap:6px}.sidenav.drawer-open{display:block;position:fixed;left:0;top:var(--header-height,74px);bottom:0;z-index:12;width:250px;overflow-y:auto}.sidenav.drawer-open nav{position:static}.sidebar-backdrop:not([hidden]){display:block;position:fixed;inset:var(--header-height,74px) 0 0;z-index:11;border:0;border-radius:0;background:#0006;width:100%;height:auto}.drawer-active{overflow:hidden}}
@media((max-width:700px) or (max-height:1117px)){.academy-header{grid-template-columns:minmax(0,1fr) auto;gap:6px;padding:10px 12px;min-height:66px}.header-right{gap:4px}.academy-header .brand-cl{font-size:22px}.academy-header .brand-project{font-size:10px}.brand-group{gap:3px}.header-profile summary{padding:6px;gap:3px}.header-profile summary>svg:first-child{display:none}.header-profile summary span:not(.bar-avatar){font-size:12px}.header-icon{width:30px;height:32px;padding:5px}.header-right .ui-lang button{padding:5px 7px}.workspace{min-height:calc(100vh - 66px)}}
@media((max-width:360px) or (max-height:574px)){.academy-header .home-link{display:none}.header-profile summary .chevron{display:none}}
@media((max-width:430px) or (max-height:686px)){.header-profile summary span:not(.bar-avatar),.header-profile summary .chevron{display:none}.header-profile summary>svg:first-child{display:block;width:20px;height:20px}.header-profile summary{padding:5px}.academy-header .brand-project{font-size:9px}.academy-header .brand-cl{font-size:21px}}
/* Search fields use the blue theme instead of the global gold focus ring. */
input[type="search"]:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.header-profile summary span:not(.bar-avatar){max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.sidenav nav>a{display:flex;align-items:center;gap:11px;min-height:44px}.sidenav nav>a svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.sidenav nav>a span{min-width:0}.sidenav nav>a[aria-current=page]{background:var(--primary-soft);color:var(--primary);font-weight:750;box-shadow:inset 3px 0 0 var(--primary)}

/* Only the selected sidebar link uses bold text. */
.sidenav nav>a,.sidenav .nav-label{font-weight:400}
.sidenav nav>a[aria-current=page]{font-weight:700}

/* Author button styles must not override native hidden controls. */
[hidden]{display:none!important}

/* Emphasize the current category while keeping other choices regular. */

.sidenav .nav-label.nav-heading-bold{font-weight:700;color:var(--gold)}

.sidenav .nav-heading-bold{display:flex;align-items:center;gap:8px}.nav-heading-icon{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Indent section items beneath their arrow headings. */
.sidenav nav>a{margin-left:18px}.sidenav .nav-heading-icon{width:14px;height:14px;stroke-width:2.3}

/* A small community noticeboard beside the stalls. */
.community-panel{position:sticky;top:98px}.community-panel-heading{display:flex;align-items:center;gap:8px;margin:0 0 14px 4px}.community-panel-heading p{font-size:10px;letter-spacing:.11em;text-transform:uppercase;font-weight:700;margin:0;color:var(--muted)}.community-dot{width:6px;height:6px;border-radius:50%;background:var(--gold)}.community-card{position:relative;overflow:hidden;border-radius:16px;padding:22px 18px;margin-bottom:16px;box-shadow:none}.community-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:20px}.community-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#e9dcc3;color:#6b5a48}.community-icon svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.community-audience{font-size:9px;font-weight:600;color:#6b5a48;background:#f5ecda;padding:4px 8px;border-radius:999px;white-space:nowrap}.community-card h2{font:26px/1.15 Georgia,serif;letter-spacing:-.035em;margin:0 0 14px}.community-card p{font-size:12px;line-height:1.8;margin:0}.community-card-footer{display:flex;align-items:center;gap:8px;border-top:1px solid #e9dcc3;margin-top:22px;padding-top:14px;font-size:10px;color:#64735e}.community-card-footer>span:first-child{font-size:18px}.community-decoration{position:absolute;bottom:-8px;left:0;width:100%;height:65px;fill:none;stroke:#e5c283;stroke-width:1;opacity:.13;pointer-events:none}@media((max-width:1200px) or (max-height:1915px)){.community-panel{position:static;display:grid;grid-template-columns:1fr 1fr;gap:16px}.community-panel-heading{grid-column:1/-1;margin:0}.community-card{margin:0}}@media((max-width:520px) or (max-height:830px)){.community-panel{grid-template-columns:1fr}.community-panel-heading{grid-column:auto}.community-card h2{font-size:27px}.community-card-top{margin-bottom:14px}}@media(prefers-color-scheme:dark){.community-card-footer{color:#b09a7c}.community-card-footer{border-color:#4a3b2b}}

/* Marketplace wordmark */
.brand{display:inline-flex;align-items:center;gap:9px;color:#6a4527}.brand-mark{display:block;width:38px;height:38px;flex:none}.brand-wordmark{font-size:25px;font-weight:850;letter-spacing:-1.1px;line-height:1.1}.brand-wordmark>span{color:var(--gold)}
@media((max-width:700px) or (max-height:1117px)){.brand{gap:7px}.brand-mark{width:30px;height:30px}.brand-wordmark{font-size:21px;letter-spacing:-.9px}}
@media((max-width:380px) or (max-height:606px)){.brand{gap:5px}.brand-mark{width:26px;height:26px}.brand-wordmark{font-size:18px}}

/* Shared green treatment for all button controls. */
:root{--button-bg:#6a4527;--button-ink:#fff5df}
:root body button:not(.sidebar-backdrop):not(.ui-lang button),:root body .button,:root body input[type=submit],:root body input[type=button],:root body input[type=reset]{background:var(--button-bg);color:var(--button-ink);border-color:var(--button-bg)}
input::file-selector-button{background:var(--button-bg);color:var(--button-ink)}

.header-profile summary{color:var(--gold);font-weight:800}

.header-profile nav{font-weight:700}.header-profile nav button{font-weight:700}

.header-profile nav a,.header-profile nav button{display:flex;align-items:center;gap:9px}.header-profile nav .profile-menu-icon{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.signup-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.signup-options section{display:flex;flex-direction:column;align-items:flex-start}.signup-options .button{margin-top:auto}.signup-role-icon{width:40px;height:40px;fill:none;stroke:#6a4527;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.signup-form{max-width:640px}@media((max-width:600px) or (max-height:957px)){.signup-options{grid-template-columns:1fr}}

.signup-choice-hero .eyebrow{color:var(--text)}.signup-choice-hero h1{color:var(--gold)}

/* Page titles share the profile accent in both color schemes. */
:root body h1{color:var(--gold)}:root body h1 em{color:inherit}

.signup-section-title{display:flex;align-items:center;gap:12px;font-size:18px;letter-spacing:-.02em;margin:30px 0 18px;font-weight:750;color:var(--gold)}.signup-section-title::after{content:"";height:1px;flex:1;background:var(--border);margin-left:4px}.signup-section-icon{display:grid;place-items:center;width:38px;height:38px;flex:none;border:1px solid var(--border);border-radius:12px;background:var(--surface-2)}.signup-section-icon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* Full-height navigation with the wordmark inside the sidebar. */
.sidebar-brand{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 0 20px;margin-bottom:18px;border-bottom:1px solid var(--border)}
.sidenav .sidebar-brand .brand{display:inline-flex;gap:8px;margin:0;padding:0;min-height:0;border-radius:0;background:transparent;box-shadow:none;color:#6a4527}
.sidebar-brand .brand-wordmark{font-size:24px}.sidebar-brand .brand-mark{width:34px;height:34px}.sidebar-close{display:none}
@media((min-width:901px) and (min-height:1438px)){
 body .academy-header{margin-left:244px;grid-template-columns:minmax(0,1fr) auto}.academy-header .brand-group{display:none}
 :root body .workspace{margin-left:244px;grid-template-columns:minmax(0,1fr) 240px}
 body .sidenav{position:fixed;inset:0 auto 0 0;width:244px;padding:20px 14px;overflow-y:auto;z-index:20}body .sidenav nav{position:static}
 body .footer{margin-left:244px}
}
@media((min-width:901px) and (min-height:1438px)) and ((max-width:1250px) or (max-height:1995px)){:root body .workspace{grid-template-columns:minmax(0,1fr)}}
@media((max-width:900px) or (max-height:1436px)){
 .academy-header{grid-template-columns:auto minmax(0,1fr) auto}.academy-header .brand-group{display:flex}
 body .sidenav.drawer-open{top:0;width:min(280px,calc(var(--app) - 40px));z-index:30;padding:18px 14px}.sidebar-brand .sidebar-close{display:grid}body .sidebar-backdrop:not([hidden]){inset:0;z-index:25}body .sidenav.drawer-open nav{position:static}
}
@media((max-width:700px) or (max-height:1117px)){.academy-header{grid-template-columns:auto minmax(0,1fr)}.academy-header .header-right{justify-self:end}}

.signup-section-optional{font-size:.72em;font-weight:400;letter-spacing:normal}

/* Every page stands in a column as wide as Afiwa's video on the welcome page (2:3, the height above the bottom
   bar; --app is set again with the bar below), centred and following the window's size; on a phone that is
   the whole screen. The width rules above test this column (see README). --app-left/--app-right are its
   edges, for the parts pinned to the screen: the header and the bottom bar. */
:root{--app:min(100vw,calc(100vh * .94 * 2 / 3));--vw:calc(var(--app) / 100);--app-left:max(0px,calc(50% - var(--app) / 2));--app-right:var(--app-left)}
html{background:radial-gradient(ellipse at 50% 20%,#eef1f8 0%,#d9deeb 70%,#cfd5e4 100%) fixed}
body{position:relative;max-width:var(--app);margin-inline:auto;min-height:100vh;box-shadow:0 0 0 1px #00000010,0 30px 80px #1a203329;overflow-x:clip}
.skip-link{left:12px}

/* The picker button keeps the site's green with cream text in every state; hover and open only deepen the
   green (a pale hover once left cream text on a pale background, invisible). */

/* No left menu: the Marketplace logo and name stand at the top left of the header, and the page takes the
   width the menu had (desktop columns of 901px and more kept 244px for it). */
:root body .academy-header,:root body .workspace,:root body .footer{margin-left:0}
:root body .academy-header .brand-group{display:flex;align-items:center;min-width:0}
:root body .workspace{grid-template-columns:minmax(0,1fr) 240px}
@media((max-width:1250px) or (max-height:1995px)){:root body .workspace{grid-template-columns:minmax(0,1fr)}}
.academy-header .brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--primary);min-width:0}
.academy-header .brand-mark{width:34px;height:34px;flex:none}
.academy-header .brand-wordmark{font-size:20px;font-weight:800;letter-spacing:-.02em;white-space:nowrap}
@media((max-width:430px) or (max-height:686px)){.academy-header .brand-mark{width:30px;height:30px}.academy-header .brand-wordmark{font-size:17px}}
/* Desktop columns: logo, search, then language and profile, on one row. */
@media((min-width:901px) and (min-height:1438px)){:root body .academy-header{grid-template-columns:auto minmax(0,1fr) auto}}
/* Too narrow for the word beside the search and language buttons: the logo alone (still "Marketplace" to
   screen readers through aria-label). */
@media((max-width:380px) or (max-height:606px)){.academy-header .brand{gap:6px}.academy-header .brand-mark{width:27px;height:27px}.academy-header .brand-wordmark{font-size:15px}}
@media((max-width:340px) or (max-height:542px)){.academy-header .brand-wordmark{display:none}}
/* The bottom bar, as in Instagram Reels: black, with bare white icons along the bottom of the page column,
   each naming itself on hover. The column is as wide as Afiwa's video, which fills the height between
   the header and this bar. */
:root{--nav-h:50px;--app:min(100vw,calc((100vh - var(--header-height,66px) - var(--nav-h)) * 2 / 3))}
body{padding-bottom:var(--nav-h)}
.reel-bar{position:fixed;z-index:30;bottom:0;left:var(--app-left);right:var(--app-right);height:var(--nav-h);padding:0 8px env(safe-area-inset-bottom);display:flex;align-items:center;justify-content:space-around;background:var(--reel-bg);border-top:1px solid var(--reel-line);color:var(--reel-ink);--reel-bg:#000;--reel-line:#262626;--reel-ink:#fff}
:root body .reel-bar>a,:root body .reel-bar>button,:root body .reel-bar summary{position:relative;display:grid;place-items:center;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:12px;background:none;box-shadow:none;color:inherit;cursor:pointer;list-style:none}
.reel-bar summary::-webkit-details-marker{display:none}
:root body .reel-bar :is(a,button,summary)>svg{display:block;width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* My profile, at the right of the bar: its menu opens upwards, inside the column, over Afiwa. */
:root body .reel-bar .header-profile nav{top:auto;bottom:calc(100% + 10px);right:-4px;left:auto}
:root body .reel-bar:has(details[open]){z-index:32}
.reel-bar details[open] [data-tip]::after{display:none}
.reel-bar :is(a,button,summary):focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
/* The name of each icon, shown above it on hover or keyboard focus. */
.reel-bar [data-tip]::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);left:50%;translate:-50% 4px;padding:4px 9px;border-radius:7px;background:#fff;color:#111;font-size:12px;font-weight:700;line-height:1.3;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s,translate .15s}
.reel-bar [data-tip]:is(:hover,:focus-visible)::after{opacity:1;translate:-50% 0}
/* The header: the search as a magnifying glass (it opens across the header when clicked, on every screen),
   the market's filters, the language switch and the profile menu. */
:root body .academy-header{display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-end;gap:10px}
:root body .academy-header .header-right{flex:none}

/* Black like the bottom bar, its contents in white. */
:root body .academy-header{background:#000;border-bottom:1px solid #262626;color:#fff}

:root body .academy-header .ui-lang{background:#1a1a1a;border-color:#3a3a3a}
:root body .academy-header .ui-lang button:not([aria-pressed=true]){color:#c9c9c9}

/* A round × on every pop-up: the profile menu, the category list and the search suggestions (the photo preview
   and the stock editor have their own). Shown only while its pop-up is open; :not(#none) outranks the site's
   filled-button rule. */
:root body button.popup-close:not(#none){position:absolute;z-index:45;display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:50%;background:var(--surface-2);color:var(--text);font-size:19px;line-height:1;box-shadow:none;cursor:pointer}
:root body button.popup-close:not(#none):hover{background:var(--primary-soft)}
:root body button.popup-close:not(#none):focus-visible{outline:2px solid var(--gold);outline-offset:1px}
:root body .header-profile nav{padding-top:40px}
:root body .header-profile button#profile-close:not(#none){top:8px;right:8px}

/* The header's items sit directly on the page, as in Reels: no bar of their own, each a dark glass pill over
   whatever is beneath (Afiwa's video, the feed, the grid). Opening the search gives it a black strip. Pages lay
   out from the top of the window; those without a picture under the items leave room for them. */
:root{--header-height:0px}
:root body .academy-header{position:fixed;top:0;left:var(--app-left);right:var(--app-right);z-index:30;background:transparent;border-bottom:0;pointer-events:none}
:root body .academy-header>*{pointer-events:auto}

:root body:not(.welcome-page):not(.market-view-feed) .workspace{padding-top:var(--header-over,66px)}
/* The header items without backgrounds: bare icons and words, white over the feed's photos and dark over the
   lighter pages (welcome sky, grid, forms), each with a soft halo; the chosen language keeps its blue. */

:root body:not(.market-view-feed) .academy-header .ui-lang button:not([aria-pressed=true]){color:#1d1d1d;text-shadow:0 1px 2px #fffc}

/* The language menu at the left of the bottom bar: only the chosen language, with an arrow; its list opens
   upwards, the chosen one marked. */
:root body .reel-bar .ui-lang{position:relative;flex:none;margin:0;padding:0;background:none;border:0}
:root body .reel-bar .lang-menu summary{display:flex;width:auto;height:auto;align-items:center;gap:3px;padding:6px 8px 6px 11px;border-radius:999px;background:#1a1a1a;border:1px solid #3a3a3a;color:#fff;font-size:12.5px;font-weight:800;letter-spacing:.03em;cursor:pointer;list-style:none}
:root body .reel-bar .lang-menu summary::-webkit-details-marker{display:none}
:root body .reel-bar .lang-menu summary:hover{background:#262626}
:root body .reel-bar .lang-menu summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
:root body .reel-bar .lang-menu .chevron{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:rotate .2s}
:root body .reel-bar .lang-menu[open] .chevron{rotate:180deg}
:root body .reel-bar .lang-options{position:absolute;left:-4px;bottom:calc(100% + 10px);z-index:20;display:flex;flex-direction:column;gap:2px;min-width:150px;padding:6px;border-radius:12px;background:var(--surface);border:1px solid var(--border);box-shadow:0 8px 24px #0004}
:root body .reel-bar .lang-options button:not(#none){display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;border-radius:8px;background:transparent;color:var(--text);font-size:14px;font-weight:600;text-align:left;box-shadow:none}
:root body .reel-bar .lang-options button:not(#none) b{min-width:30px;font-size:11.5px;color:var(--muted)}
:root body .reel-bar .lang-options button:not(#none):hover{background:var(--primary-soft)}
:root body .reel-bar .lang-options button[aria-pressed=true]:not(#none){background:var(--primary-soft);color:var(--primary);font-weight:800}
:root body .reel-bar .lang-options button[aria-pressed=true]:not(#none) b{color:var(--primary)}

/* A permanent header: a slim frosted strip fixed across the top of the column; the page scrolls underneath it
   and shows through, blurred (dark glass over the feed and Afiwa's video, light glass elsewhere). The search
   opens inside it when the bar's magnifying glass is tapped. */
:root body .academy-header{display:flex;min-height:56px;padding:8px 12px;background:#ffffffa6;border-bottom:1px solid #ffffff80;-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);pointer-events:auto}
:root body:is(.welcome-page) .academy-header{background:#0000004d;border-bottom-color:#ffffff1f}

/* The header is transparent: the page shows through it untouched; only the search, when open, has a field. */
:root body .academy-header,:root body:is(.welcome-page) .academy-header{background:transparent;border-bottom-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}

/* The magnifying glass at the left of the header; the search opens beside it, so a second tap closes it. */
:root body .academy-header{justify-content:flex-start}

/* Afiwa back at the right of the bottom bar: her frame rises above the bar, her bubble above it; on her own
   page the frame glows gold and she stays quiet. */

/* Log in, Create an account and My profile open as their own window: no header or bottom bar, the form in a centred white
   window over a dimmed, blurred market, a round × at its top right returning to the page the visitor left. */
:root body.window-page{padding-bottom:0;background:#2a2118 url(market-backdrop.jpg) center/cover fixed}
:root body.window-page::before{content:"";position:fixed;inset:0;background:#0000004d;pointer-events:none}
:root body.window-page .academy-header,:root body.window-page .reel-bar{display:none}
:root body.window-page .workspace{position:relative;padding-top:0;min-height:100dvh;display:grid;place-items:center}
:root body.window-page main{position:relative;box-sizing:border-box;width:min(calc(var(--app,100vw) - 24px),460px);max-height:calc(100dvh - 32px);margin:16px auto;padding:30px 22px 22px;overflow:auto;background:var(--surface);border-radius:22px;box-shadow:0 18px 50px #0007}
:root body.window-page main>section,:root body.window-page main .hero{margin:0;border:0;box-shadow:none;background:transparent;padding:0}
:root body.window-page main h1{padding-right:40px}  /* headings keep clear of the × */

  /* the window itself makes room for the header */

/* The header always names what is open (Log in, My profile, ...), centred. The header shows above the windows too. */
:root body .header-title{position:absolute;left:56px;right:56px;top:0;bottom:0;margin:0;display:flex;align-items:center;justify-content:center;pointer-events:none;font-size:16px;font-weight:800;letter-spacing:.01em;color:#1d1d1d;text-shadow:0 1px 2px #fffc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:root body:is(.welcome-page,.window-page) .header-title{color:#fff;text-shadow:0 1px 4px #000c}

:root body.window-page .academy-header{display:flex}

:root body.window-page:not(.window-wide) .workspace{padding-top:var(--header-over,56px)}
:root body.window-page:not(.window-wide) main{max-height:calc(100dvh - var(--header-over,56px) - 24px);margin-top:4px}
/* The page's name in a book serif, italic and a little larger. */
:root body .header-title{font-family:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;font-style:italic;font-size:21px;font-weight:600;letter-spacing:.01em}
/* Every window closes with a × at the header's right, back to where it was opened from. */
:root body .academy-header>:is(.page-close){position:absolute;top:50%;right:12px;translate:0 -50%;z-index:26;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;color:#fff;text-decoration:none}
:root body .academy-header>:is(.page-close):hover{background:#ffffff26}
:root body .academy-header>:is(.page-close):focus-visible{outline:2px solid var(--gold);outline-offset:2px}
:root body .academy-header>:is(.page-close) svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;filter:drop-shadow(0 1px 3px #000c)}

:root body:not(.market-view-feed):not(.welcome-page):not(.window-page) .academy-header>.page-close{color:#1d1d1d}
:root body:not(.market-view-feed):not(.welcome-page):not(.window-page) .academy-header>.page-close svg{filter:drop-shadow(0 1px 2px #fffc)}
:root body.window-page main h1{padding-right:0}

/* A shop's phone and email, as small round icons right after its name in the header. */
:root body .header-title{gap:8px}

:root body .header-title{overflow:visible}
:root body .header-title-text{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 2px}  /* a long name shortens; the icons stay whole */
/* Afiwa's "How can I help you?" sits up and to her left: its corner at the top-left of her frame, the tail
   pointing down to her. */

/* ... sitting right on top of the bottom bar, to her left, the tail pointing across to her. */

/* Every page on black, like Instagram and TikTok in dark mode: no blurred market behind the grids, the feed or the
   windows; white cards and pictures stand out on it, and the header is white everywhere. */
:root:root,:root body,:root body:not(#none):is(.window-page,.welcome-page){background:#000}  /* the page itself (beside the app column) and every page's own background */
:root body.window-page::before{display:none}
:root body .header-title,:root body:not(.market-view-feed):not(.welcome-page):not(.window-page) .header-title{color:#fff;text-shadow:0 1px 4px #000c}
:root body:not(#none) .academy-header>:is(.page-close){color:#fff}
:root body:not(#none) .academy-header>:is(.page-close) svg{filter:drop-shadow(0 1px 3px #000c)}

/* The language menu has its × too; larger windows (a market photo's results, Afiwa's voice studio) are wider. */
:root body .reel-bar .lang-options{padding-top:40px}
:root body .reel-bar button#lang-close:not(#none){top:6px;right:6px}
:root body.window-page.window-large main{width:min(calc(var(--app,100vw) - 24px),980px)}
:root body .reel-bar .lang-options button#lang-close:not(#none){position:absolute;top:6px;right:6px;display:grid;place-items:center;width:30px;height:30px;padding:0;border-radius:50%;background:var(--surface-2);color:var(--text);font-size:19px}
/* Avatars: in the bar, the person's chosen avatar or their initial on their colour; on the profile, a row of
   round choices, the chosen one ringed in gold (the first is their initial). */
.bar-avatar{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--avatar,#7a502f);color:#fff;font-size:15px;font-weight:800;line-height:1;box-shadow:0 0 0 1.5px #fff9}
.bar-avatar:not(:empty){font-size:17px}
/* Your assistant, in My profile: a picture and a name each, the chosen one ringed in gold. */
.assistant-choices{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 2px}
.assistant-choices>div{margin:0}
.assistant-choices label{display:flex;flex-direction:column;align-items:center;gap:4px;width:76px;font-size:13px;font-weight:700;cursor:pointer}
.assistant-choices img{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:50% 12%;border:3px solid transparent;background:var(--surface-2)}
.assistant-choices input{position:absolute;opacity:0;width:1px;height:1px}
.assistant-choices label:has(input:checked) img{border-color:var(--gold)}
.assistant-choices label:has(input:focus-visible) img{outline:2px solid var(--primary);outline-offset:2px}
.avatar-choices{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 2px}
.avatar-choices>div{margin:0}
.avatar-choices label{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--surface-2);border:2px solid transparent;font-size:24px;line-height:1;cursor:pointer}
.avatar-choices input{position:absolute;opacity:0;width:1px;height:1px}
.avatar-choices>div:first-child label{background:#7a502f;color:#fff;font-size:19px;font-weight:800}
.avatar-choices label:has(input:checked){border-color:#c8921e;box-shadow:0 0 0 2px #e9cf9f}
.avatar-choices label:has(input:focus-visible){outline:2px solid var(--gold);outline-offset:2px}

/* ...but no taller than what is in it: it grows with the preview, up to the space there is. */

/* Log in and Create an account: windows like the others, in their colours; required fields carry a red star,
   passwords an eye to show them, and the button spans the window. */
:root body.window-page .auth-card h1{margin-top:0}
.auth-intro{margin:-6px 0 18px;font-size:14px;line-height:1.5;color:var(--muted)}
.auth-field{margin-bottom:16px}
:root body.window-page .auth-field label{display:block;margin-bottom:6px}
:root body.window-page .auth-field input{width:100%;margin:0}
.auth-required{color:var(--danger)}
.auth-password{position:relative}:root body.window-page .auth-password input{padding-right:46px}
:root body.window-page .auth-card .auth-eye:not(#none){position:absolute;right:4px;top:50%;transform:translateY(-50%);width:36px;height:36px;min-width:0;min-height:0;padding:0;display:grid;place-items:center;border:0;border-radius:8px;background:transparent;color:var(--text);box-shadow:none}
.auth-eye svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.auth-eye .auth-eye-off{display:none}.auth-eye[aria-pressed=true] .auth-eye-off{display:inline}
.auth-help{display:block;margin-top:6px;font-size:13px;color:var(--muted)}
.auth-field-error,.auth-error{margin:6px 0 0;font-size:14px;color:var(--danger)}
.auth-error{margin:0 0 16px;padding:10px 12px;border:1px solid #fecdca;border-radius:10px;background:#fef3f2}
:root body.window-page .auth-card .auth-submit:not(#none){display:block;width:100%;margin-top:22px}
.auth-links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 24px;margin:20px 0 0;font-size:15px}
/* Every window (Log in, Create an account, profile, password, Add products, Afiwa's voice…) opens centred under the
   header's title: in the middle of the space beside the menu (the whole width on a phone, which has none), and
   in the middle from top to bottom, as tall as fits between the header's height above and below, scrolling
   inside beyond that. */
:root body.window-page:not(.window-wide) main:not(#none):not(#none):not(#none){position:fixed;left:calc(var(--side,0px) + (100vw - var(--side,0px)) / 2);top:50%;transform:translate(-50%,-50%);margin:0;width:min(calc(100vw - var(--side,0px) - 24px),460px);height:auto;max-height:calc(100dvh - 2 * var(--header-over,56px) - 8px)}
:root body.window-page.window-large:not(.window-wide) main:not(#none):not(#none):not(#none){width:min(calc(100vw - var(--side,0px) - 24px),980px)}

/* Delete my account: a quiet link at the end of the profile, then a red button in its own window. */
.delete-account-link a{color:var(--danger)}
:root body.window-page .auth-card .auth-submit.auth-danger:not(#none){background:var(--danger);border-color:var(--danger);color:#fff}
/* My profile fits its window without scrolling: wider on a computer, so the avatars take one row; the fields
   two by two (name and location, phone and email); a short description; the password line last. */
:root body.window-page.window-profile:not(.window-wide) main:not(#none):not(#none):not(#none){width:min(calc(100vw - var(--side,0px) - 24px),760px);padding:20px 22px 16px}
:root body.window-page.assistant-customize-page main:not(#none):not(#none):not(#none){width:min(calc(100vw - var(--side,0px) - 24px),900px)}
:root body.window-profile main h1{margin:0 0 10px;font-size:26px;line-height:1.2}
.profile-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 14px}
.profile-form>p,.profile-form>ul{margin:0 0 8px}
/* Only the four fields pair up; the rest spans the window. The avatar choices are a block inside Django's <p>,
   which the browser splits into its label, the choices and the help text, each its own row here. */
.profile-form>*{grid-column:1/-1}.profile-form>p:has(>input:not([type=radio])){grid-column:auto}.profile-form>p:empty{display:none}
.profile-form>p:has(>label:only-child){margin:0}
:root body.window-profile .profile-form p>label{display:block;margin:0 0 3px;font-size:13px}
:root body.window-profile .profile-form :is(input:not([type=radio]),textarea){width:100%;max-width:none;margin:0;padding:8px 12px;min-height:0}
:root body.window-profile .profile-form textarea{height:58px;resize:none}
:root body.window-profile .profile-form .helptext{display:block;margin-top:2px;font-size:12px}
:root body.window-profile .avatar-choices{gap:6px;margin:2px 0 0}
:root body.window-profile .avatar-choices label{width:38px;height:38px;font-size:21px}
:root body.window-profile .avatar-choices>div:first-child label{font-size:17px}
:root body.window-profile .profile-form>button{justify-self:start;margin-top:2px}
.profile-account{margin:12px 0 0;font-size:14px}
@media(max-width:600px){:root body.window-profile .avatar-choices label{width:34px;height:34px;font-size:19px}:root body.window-profile main h1{font-size:22px;margin-bottom:6px}}
@media(max-width:380px){:root body.window-profile .avatar-choices{gap:4px}:root body.window-profile .avatar-choices label{width:31px;height:31px;font-size:17px}:root body.window-profile .avatar-choices>div:first-child label{font-size:15px}:root body.window-profile main h1{font-size:20px;margin-bottom:4px}:root body.window-page.window-profile:not(.window-wide) main:not(#none):not(#none):not(#none){padding:16px 16px 12px}.profile-form>p,.profile-form>ul{margin-bottom:6px}}
/* A window's × in its own top-right corner, not the page's: it floats there and stays in view as the window scrolls. */
:root body:not(#none) main>.page-close{position:sticky;top:-18px;z-index:5;float:right;display:grid;place-items:center;width:38px;height:38px;margin:-18px -10px 0 10px;border-radius:50%;background:var(--surface);color:#3d2a1b;text-decoration:none}
:root body:not(#none) main>.page-close:hover{background:#f3ead5}
:root body:not(#none) main>.page-close:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
:root body:not(#none) main>.page-close svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}