/* ═══════════════════════════════════════════════════════════════════════════
 * Entangled Text — public "studio skin"
 *
 * WHY THIS FILE EXISTS
 * --------------------
 * The public site and the product did not look like the same piece of
 * software. Public pages draw a violet accent on #050508 with 8px corners and
 * a 1px rgba(255,255,255,.08) edge on every card. The studio — Write, Ship,
 * the wizard — is teal on pure black, square, and draws no borders at all: a
 * panel is separated from the page by being #09090b against #000, and the only
 * line anywhere is an inset rgba(255,255,255,.06) hairline.
 *
 * The homepage hero made the split impossible to miss, because the screenshot
 * inside it is the real product: a teal, square, borderless UI sitting inside
 * a violet, rounded, bordered page.
 *
 * The values below are not invented. They were read off the running Write page
 * with getComputedStyle, so this is the studio's own vocabulary rather than an
 * approximation of it.
 *
 * SCOPE
 * -----
 * Everything is scoped to body.et-public-studio. 47 public pages share
 * header-public.php, and converting them in one commit would mean 47 pages
 * changing with no way to look at one of them on its own. A page opts in by
 * adding the class; until it does, nothing here can reach it.
 *
 * Custom properties resolve from the nearest ancestor that sets them. app.css
 * declares the public palette on :root (html), so re-declaring on body wins for
 * everything inside body without needing !important or a specificity fight.
 * ═══════════════════════════════════════════════════════════════════════════ */

body.et-public-studio {
    /* ── Ground and surfaces ──────────────────────────────────────────────
     * Three levels, and no more. #000 is the page, #09090b is anything that
     * sits on it, and #101013 is the one step up used for a hovered or
     * selected row. The studio gets its depth from the gap between panels,
     * not from a ramp of greys. */
    --et-bg-deep: #000;
    --et-bg-primary: #000;
    --et-bg-secondary: #09090b;
    --et-bg-tertiary: #09090b;
    --et-bg-card: #09090b;
    --et-bg-card-solid: #09090b;
    --et-bg-elevated: #09090b;
    --et-bg-input: #09090b;
    --et-bg-hover: #101013;

    /* ── Accent ───────────────────────────────────────────────────────────
     * Teal, and the near-black ink that goes on top of it. The studio never
     * puts white on teal; #06110f is what .btn-et-primary actually computes
     * to, and it is what keeps a filled button from glowing. */
    --et-accent-primary: #2dd4bf;
    --et-accent-primary-hover: #5eead4;
    --et-accent-secondary: #2dd4bf;
    --et-accent-ink: #06110f;

    /* Violet is not retired — it still means "AI is generating" in the studio,
       and the Story Studio rail keeps it. It stops being the brand colour. */
    --et-accent-violet: #bca9ff;

    /* ── Lines ────────────────────────────────────────────────────────────
     * --et-border going transparent is the whole point: components keep their
     * border declarations and simply stop drawing. Where an edge genuinely
     * carries meaning, use --et-hairline as an inset box-shadow instead, which
     * cannot add to layout the way a border does. */
    --et-border: transparent;
    --et-border-strong: transparent;
    --et-hairline: rgba(255, 255, 255, 0.06);
    --et-hairline-strong: rgba(255, 255, 255, 0.1);

    /* ── Text ─────────────────────────────────────────────────────────────── */
    --et-text-primary: #fafafa;
    --et-text-secondary: #b8b8c4;
    --et-text-muted: #a3a3b0;

    /* ── Type ─────────────────────────────────────────────────────────────
     * Headings move from Syne to DM Sans, which is what the studio sets them
     * in. IBM Plex Mono is already loaded for the site and carries the
     * technical labels — the kickers, the step indices, the field names. */
    --et-font-display: 'DM Sans', system-ui, -apple-system, sans-serif;

    /* ── Geometry ─────────────────────────────────────────────────────────── */
    --et-radius-sm: 0;
    --et-radius-md: 0;
    --et-radius-lg: 0;
    --et-radius-xl: 0;
    --et-radius-pill: 0;

    /* Gradients were the other half of the violet identity. Flatten them to the
       accent so any component still reaching for one gets a solid teal. */
    --et-gradient-primary: #2dd4bf;
    --et-gradient-secondary: #2dd4bf;
    --et-gradient-hero: none;
    --et-gradient-card: none;

    background: #000;
    color: var(--et-text-primary);
}

/* ── Flatten ──────────────────────────────────────────────────────────────
 * Mirrors dashboard-flat.css, which is the file that does this job for the
 * logged-in side. Same rule, same reasoning: zero radius, no drop shadows,
 * inset lines only. */
body.et-public-studio .rounded,
body.et-public-studio .rounded-1,
body.et-public-studio .rounded-2,
body.et-public-studio .rounded-3,
body.et-public-studio .rounded-4,
body.et-public-studio .rounded-circle,
body.et-public-studio .rounded-pill,
body.et-public-studio .rounded-top,
body.et-public-studio .rounded-bottom,
body.et-public-studio .card,
body.et-public-studio .et-card,
body.et-public-studio .btn,
body.et-public-studio .badge,
body.et-public-studio .form-control,
body.et-public-studio .form-select,
body.et-public-studio .modal-content,
body.et-public-studio .dropdown-menu,
body.et-public-studio .alert,
body.et-public-studio .toast,
body.et-public-studio [class*="-card"],
body.et-public-studio [class*="-chip"],
body.et-public-studio [class*="-pill"],
body.et-public-studio [class*="-badge"] {
    border-radius: 0 !important;
}

body.et-public-studio .card,
body.et-public-studio .et-card,
body.et-public-studio .modal-content,
body.et-public-studio .dropdown-menu,
body.et-public-studio .alert,
body.et-public-studio .toast {
    box-shadow: none !important;
    background: var(--et-bg-secondary);
    border-color: transparent;
}

/* The avatar and the site mark are the exception the studio also makes: a
   circle that is meant to be a circle stays one. */
body.et-public-studio .et-avatar,
body.et-public-studio .et-avatar img,
body.et-public-studio .et-site-logo img,
body.et-public-studio img.rounded-circle {
    border-radius: 50% !important;
}

/* ── Shared public chrome ─────────────────────────────────────────────────
 * header-public.php and footer-public.php render on every page, so they are
 * restyled here rather than in the homepage stylesheet — the next page to opt
 * in gets a header that already matches. */
body.et-public-studio .et-public-header,
body.et-public-studio .navbar,
body.et-public-studio header.et-public-nav {
    background: #000 !important;
    border: 0 !important;
    box-shadow: inset 0 -1px 0 var(--et-hairline);
    backdrop-filter: none !important;
}

body.et-public-studio .navbar .nav-link,
body.et-public-studio .et-public-header a {
    border-radius: 0 !important;
}

body.et-public-studio .navbar .nav-link:hover,
body.et-public-studio .navbar .nav-link:focus-visible {
    color: var(--et-accent-primary);
}

body.et-public-studio .dropdown-menu {
    background: var(--et-bg-secondary) !important;
    box-shadow: inset 0 0 0 1px var(--et-hairline) !important;
}

body.et-public-studio footer,
body.et-public-studio .et-public-footer {
    background: #000 !important;
    border: 0 !important;
    box-shadow: inset 0 1px 0 var(--et-hairline);
}

/* ── Buttons ──────────────────────────────────────────────────────────────
 * One filled button and one ghost, both square, matching .btn-et-primary in
 * the studio: teal fill, near-black ink, weight 700, no border. */
body.et-public-studio .btn-primary,
body.et-public-studio .btn-et-primary,
body.et-public-studio .et-home-btn--primary {
    background: var(--et-accent-primary) !important;
    border: 0 !important;
    color: var(--et-accent-ink) !important;
    font-weight: 700;
    box-shadow: none !important;
}

body.et-public-studio .btn-primary:hover,
body.et-public-studio .btn-et-primary:hover,
body.et-public-studio .et-home-btn--primary:hover {
    background: var(--et-accent-primary-hover) !important;
    color: var(--et-accent-ink) !important;
}

body.et-public-studio .btn-outline-primary,
body.et-public-studio .btn-outline-light,
body.et-public-studio .btn-secondary {
    background: var(--et-bg-secondary) !important;
    border: 0 !important;
    color: var(--et-text-primary) !important;
    box-shadow: inset 0 0 0 1px var(--et-hairline) !important;
}

body.et-public-studio .btn-outline-primary:hover,
body.et-public-studio .btn-outline-light:hover,
body.et-public-studio .btn-secondary:hover {
    background: var(--et-bg-hover) !important;
    color: var(--et-accent-primary) !important;
}

/* ── Focus ────────────────────────────────────────────────────────────────
 * Retiring borders must not retire the focus ring. Teal, offset, and on
 * :focus-visible so it appears for keyboards and not for mouse clicks. */
body.et-public-studio :focus-visible {
    outline: 2px solid var(--et-accent-primary);
    outline-offset: 2px;
}

/* ── Links ────────────────────────────────────────────────────────────────
 * Deliberately not restated here. app.css already declares
 * `a { color: var(--et-accent-primary) }` at (0,0,1), and this file redefines
 * that variable, so every link is already the studio teal without another
 * rule.
 *
 * There used to be one, carrying five :not() clauses to keep it off buttons
 * and chips. Each :not() adds its argument's weight, so it scored (0,7,1) and
 * quietly outranked every component that tried to set its own colour: the
 * hero CTA rendered teal-on-teal, and later the footer's brand-coloured
 * social marks and its nav links were both dragged back to teal by it. A
 * blanket element rule that has to out-specify its own components is the
 * wrong shape; letting the (0,0,1) base rule stand means any component class
 * beats it for free.
 */

/* The atmosphere canvas belongs to the old violet identity; the entanglement
   field replaces it and they must not both run. */
body.et-public-studio .et-atmosphere,
body.et-public-studio #et-atmosphere-canvas {
    display: none !important;
}

/* ── Header call to action ────────────────────────────────────────────────
 * et-scifi-buttons.css styles .et-public-site .btn-et-primary:not(...) at
 * (0,3,0) with !important on border, background and colour, which outscored
 * the (0,2,1) rule above — the nav button kept a 1px teal edge and white ink
 * while the rest of the page went flat. Adding .et-public-site here takes it
 * to (0,3,1), which is the smallest change that actually wins.
 *
 * The nav CTA is deliberately not the solid teal the hero uses: a translucent
 * fill lets the black through, so the header reads as a HUD strip over the
 * page rather than a band with a button stuck on it, and it leaves the hero's
 * filled button as the single loudest thing above the fold. */
body.et-public-studio.et-public-site .et-navbar .btn-et-primary,
body.et-public-studio.et-public-site header .btn-et-primary,
body.et-public-studio.et-public-site .navbar .btn-et-primary {
    background: color-mix(in srgb, var(--et-accent-primary) 15%, transparent) !important;
    background-image: none !important;
    border: 0 !important;
    color: var(--et-accent-primary) !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    font-weight: 600;
    transition: background 0.18s ease, color 0.18s ease;
}

body.et-public-studio.et-public-site .et-navbar .btn-et-primary:hover,
body.et-public-studio.et-public-site header .btn-et-primary:hover,
body.et-public-studio.et-public-site .navbar .btn-et-primary:hover,
body.et-public-studio.et-public-site .et-navbar .btn-et-primary:focus-visible,
body.et-public-studio.et-public-site header .btn-et-primary:focus-visible,
body.et-public-studio.et-public-site .navbar .btn-et-primary:focus-visible {
    background: color-mix(in srgb, var(--et-accent-primary) 26%, transparent) !important;
    color: #eafffb !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Every other .btn-et-primary on a skinned page.
 *
 * et-scifi-buttons.css builds these from its own --et-cta-* tokens, declared
 * on the button itself, so remapping the three tokens restyles every primary
 * control at once rather than chasing each rule. Its fill is
 * color-mix(teal 78%, #1a1228) with white ink — a muted teal carrying 22% of
 * the old violet page, which is not the studio's teal and does not put dark
 * ink on it. This never showed on the homepage because the hero uses its own
 * button class; it was visible the moment /tools and /pricing came over. */
body.et-public-studio.et-public-site .btn-et-primary,
body.et-public-studio.et-public-site .et-btn-scifi {
    --et-cta-fill: var(--et-accent-primary);
    --et-cta-fill-hover: var(--et-accent-primary-hover);
    --et-cta-ink: var(--et-accent-ink);
    background: var(--et-accent-primary) !important;
    color: var(--et-accent-ink) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background-image: none !important;
    text-shadow: none !important;
    font-weight: 700;
}

body.et-public-studio.et-public-site .btn-et-primary:hover,
body.et-public-studio.et-public-site .btn-et-primary:focus-visible,
body.et-public-studio.et-public-site .et-btn-scifi:hover {
    background: var(--et-accent-primary-hover) !important;
    color: var(--et-accent-ink) !important;
}

body.et-public-studio.et-public-site .btn-et-primary:hover {
    transform: none !important;
}

/* ── Icon rendering ───────────────────────────────────────────────────────
 * Bootstrap Icons are a webfont, so they inherit the body's antialiasing and
 * a line-height meant for prose, which left them optically small and sitting
 * a pixel low against their labels. Pinning line-height to 1 and letting them
 * centre in their own box is most of the improvement; the rest is simply not
 * asking a 15px filled glyph to carry detail it cannot hold. */
body.et-public-studio .bi::before {
    vertical-align: -0.06em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body.et-public-studio .bi {
    line-height: 1;
    font-style: normal;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Shared chrome — header and footer
 *
 * Both render on all 47 public pages, so they are styled here rather than in
 * the homepage sheet: the next page to opt in inherits a header and footer
 * that already match, and only the page's own components need a pass.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── Header ───────────────────────────────────────────────────────────────
 * A strip over the page rather than a band with things on it: black, no
 * border, one hairline underneath, and the active/hovered item marked with
 * the studio's teal underline instead of a pill or a fill. */
body.et-public-studio .et-navbar,
body.et-public-studio .et-public-header {
    background: #000 !important;
    border: 0 !important;
    box-shadow: inset 0 -1px 0 var(--et-hairline);
    backdrop-filter: none !important;
}

body.et-public-studio .et-navbar .nav-link,
body.et-public-studio .et-navbar .navbar-nav > .nav-item > a {
    color: var(--et-text-secondary);
    border-radius: 0 !important;
    position: relative;
    transition: color 0.16s ease, box-shadow 0.16s ease;
}

/* public-nav.css hovers a nav link with a violet wash and two violet glow
   shadows at (0,4,2) !important — the last of the old identity left in the
   header, and it beat the underline this file was drawing. Matching its
   selector depth and its !important is what it takes; the studio marks a live
   item with a teal underline, not a fill, and never glows. */
body.et-public-studio.et-public-site .et-navbar .et-navbar-nav > .nav-item > .nav-link:hover,
body.et-public-studio.et-public-site .et-navbar .et-navbar-nav > .nav-item > .nav-link:focus-visible,
body.et-public-studio.et-public-site .et-navbar .nav-link:hover,
body.et-public-studio.et-public-site .et-navbar .nav-link:focus-visible,
body.et-public-studio.et-public-site .et-navbar .nav-link.active,
body.et-public-studio.et-public-site .et-navbar .nav-link[aria-expanded="true"] {
    color: var(--et-text-primary) !important;
    background: transparent !important;
    box-shadow: inset 0 -2px 0 var(--et-accent-primary) !important;
    text-shadow: none !important;
}

/* The wordmark stays plain white; the ring mark is the only logo colour. */
body.et-public-studio .et-navbar .navbar-brand,
body.et-public-studio .et-site-logo {
    color: var(--et-text-primary);
}

/* Dropdowns and the tools mega-menu are panels, like everything else. */
body.et-public-studio .dropdown-menu,
body.et-public-studio .et-tools-mega {
    background: var(--et-bg-secondary) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: inset 0 0 0 1px var(--et-hairline) !important;
}

body.et-public-studio .dropdown-item {
    border-radius: 0 !important;
    color: var(--et-text-secondary);
}

body.et-public-studio .dropdown-item:hover,
body.et-public-studio .dropdown-item:focus-visible {
    background: var(--et-bg-hover);
    color: var(--et-accent-primary);
}

/* ── Footer ───────────────────────────────────────────────────────────────
 * The old footer sat under a violet glow left over from the previous
 * identity, and painted every nav link in the accent, which made a wall of
 * teal out of thirty links. Column heads go mono like the rest of the
 * technical labels, links sit in secondary text, and teal is kept for hover —
 * so the accent means "this is where you are going" again. */
body.et-public-studio .et-site-footer,
body.et-public-studio footer.et-public-footer {
    background: #000 !important;
    border: 0 !important;
    box-shadow: inset 0 1px 0 var(--et-hairline);
}

/* .et-site-footer__glow is a 120px radial of rgba(139,92,246,.08) — the old
   violet identity, sitting under the bottom bar. Nothing else on a studio page
   glows, and a purple haze under a teal footer was the last thing still giving
   the old palette away. */
body.et-public-studio .et-site-footer__glow,
body.et-public-studio .et-site-footer::before,
body.et-public-studio .et-site-footer::after,
body.et-public-studio .et-public-footer::before,
body.et-public-studio .et-public-footer::after {
    display: none !important;
}

/* The "Site" sub-heading is a different element from the column titles and was
   left in the accent, so one heading in the footer was teal and four were not. */
body.et-public-studio .et-footer-nav__label {
    font-family: var(--et-font-mono, 'IBM Plex Mono', monospace);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--et-text-muted);
}

body.et-public-studio .et-footer-nav-title {
    font-family: var(--et-font-mono, 'IBM Plex Mono', monospace);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--et-text-muted);
}

body.et-public-studio .et-site-footer a:not([data-social]) {
    color: var(--et-text-secondary);
    text-decoration: none;
    transition: color 0.16s ease;
}

body.et-public-studio .et-site-footer a:not([data-social]):hover {
    color: var(--et-accent-primary);
}

body.et-public-studio .et-site-footer__divider {
    border: 0;
    height: 1px;
    background: var(--et-hairline);
    opacity: 1;
}

/* ── Social marks ─────────────────────────────────────────────────────────
 * Each network in its own colour. The tile stays near-black so the row reads
 * as a row rather than a paint chart, and the brand colour carries the
 * identification; on hover the tile takes a wash of the same colour.
 *
 * --soc is set per network below and used by both. The masked marks in
 * et-social_icons.php inherit currentColor by design, so they take the same
 * treatment as the icon-font glyphs with no special casing.
 *
 * X, GitHub, Threads and Medium have no chromatic brand colour — they are
 * black-on-white marks — so they take near-white, which is their mark on a
 * dark ground. Tumblr's #36465D is too dark to read on black and is lifted. */
body.et-public-studio .et-site-footer__social a {
    --soc: var(--et-text-secondary);
    width: 2rem;
    height: 2rem;
    border-radius: 0 !important;
    border: 0 !important;
    background: #09090b;
    box-shadow: inset 0 0 0 1px var(--et-hairline);
    color: var(--soc);
    transition: background 0.16s ease, box-shadow 0.16s ease, color 0.16s ease;
}

body.et-public-studio .et-site-footer__social a:hover {
    background: color-mix(in srgb, var(--soc) 18%, #09090b);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--soc) 45%, transparent);
    color: var(--soc);
    transform: none;
}

body.et-public-studio .et-site-footer__social a[data-social="twitter"]    { --soc: #e7e9ea; }
body.et-public-studio .et-site-footer__social a[data-social="bluesky"]    { --soc: #0285ff; }
body.et-public-studio .et-site-footer__social a[data-social="mastodon"]   { --soc: #6364ff; }
body.et-public-studio .et-site-footer__social a[data-social="github"]     { --soc: #f0f6fc; }
body.et-public-studio .et-site-footer__social a[data-social="gitlab"]     { --soc: #fc6d26; }
body.et-public-studio .et-site-footer__social a[data-social="youtube"]    { --soc: #ff0033; }
body.et-public-studio .et-site-footer__social a[data-social="tiktok"]     { --soc: #25f4ee; }
body.et-public-studio .et-site-footer__social a[data-social="twitch"]     { --soc: #9146ff; }
body.et-public-studio .et-site-footer__social a[data-social="linkedin"]   { --soc: #0a66c2; }
body.et-public-studio .et-site-footer__social a[data-social="reddit"]     { --soc: #ff4500; }
body.et-public-studio .et-site-footer__social a[data-social="pinterest"]  { --soc: #e60023; }
body.et-public-studio .et-site-footer__social a[data-social="tumblr"]     { --soc: #6a8bb5; }
body.et-public-studio .et-site-footer__social a[data-social="patreon"]    { --soc: #ff424d; }
body.et-public-studio .et-site-footer__social a[data-social="substack"]   { --soc: #ff6719; }
body.et-public-studio .et-site-footer__social a[data-social="medium"]     { --soc: #e8e8e8; }
body.et-public-studio .et-site-footer__social a[data-social="wattpad"]    { --soc: #ff500a; }
body.et-public-studio .et-site-footer__social a[data-social="facebook"]   { --soc: #1877f2; }
body.et-public-studio .et-site-footer__social a[data-social="instagram"]  { --soc: #e4405f; }
body.et-public-studio .et-site-footer__social a[data-social="threads"]    { --soc: #e7e9ea; }
body.et-public-studio .et-site-footer__social a[data-social="discord"]    { --soc: #5865f2; }
body.et-public-studio .et-site-footer__social a[data-social="snapchat"]   { --soc: #fffc00; }
body.et-public-studio .et-site-footer__social a[data-social="telegram"]   { --soc: #26a5e4; }
body.et-public-studio .et-site-footer__social a[data-social="signal"]     { --soc: #3a76f0; }
body.et-public-studio .et-site-footer__social a[data-social="whatsapp"]   { --soc: #25d366; }
body.et-public-studio .et-site-footer__social a[data-social="kofi"]       { --soc: #ff5e5b; }
body.et-public-studio .et-site-footer__social a[data-social="devto"]      { --soc: #e7e9ea; }
body.et-public-studio .et-site-footer__social a[data-social="hackernews"] { --soc: #ff6600; }
body.et-public-studio .et-site-footer__social a[data-social="producthunt"]{ --soc: #da552f; }
body.et-public-studio .et-site-footer__social a[data-social="goodreads"]  { --soc: #c8ab7a; }
body.et-public-studio .et-site-footer__social a[data-social="spotify"]    { --soc: #1db954; }
body.et-public-studio .et-site-footer__social a[data-social="soundcloud"] { --soc: #ff5500; }
body.et-public-studio .et-site-footer__social a[data-social="steam"]      { --soc: #66c0f4; }
body.et-public-studio .et-site-footer__social a[data-social="itch"]       { --soc: #fa5c5c; }
body.et-public-studio .et-site-footer__social a[data-social="website"]    { --soc: var(--et-accent-primary); }

@media (prefers-reduced-motion: reduce) {
    body.et-public-studio .et-site-footer__social a,
    body.et-public-studio .et-navbar .nav-link { transition: none; }
}

/* ── Header detailing ─────────────────────────────────────────────────────
 * The strip was correct but plain: black, a hairline, and links. These are the
 * details that make it read as part of the instrument rather than a bar that
 * happens to sit above one — the same vocabulary the page uses, no new one.
 *
 * --et-scroll and .is-scrolled come from public-studio-chrome.js. */

body.et-public-studio .et-navbar {
    /* No position declaration here on purpose. public-nav.css makes the header
       `position: sticky`, and setting `relative` at this weight silently
       un-stuck it — the strip scrolled away, taking the compaction and the
       scroll readout with it. Sticky is itself a positioned box, so the
       readout's absolute ::after still anchors correctly. */
    /* Tighter than the default, and tighter again once the page has moved. */
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
    transition: padding 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}

body.et-public-studio .et-navbar.is-scrolled {
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    box-shadow: inset 0 -1px 0 var(--et-hairline-strong);
    /* Solid, not translucent. At 92% the chapter text underneath read straight
       through the strip, and nothing else in the studio is see-through. */
    background: #000 !important;
    backdrop-filter: none !important;
}

/* Scroll readout: a teal rule along the bottom edge, filled to how far down
   the document you are. It is the one piece of chrome that is telling you
   something rather than decorating, which is why it earns the accent. */
body.et-public-studio .et-navbar::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    width: calc(var(--et-scroll, 0) * 100%);
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--et-accent-primary) 35%, transparent),
        var(--et-accent-primary)
    );
    pointer-events: none;
    z-index: 2;
}

/* Registration ticks at the strip's ends, the same 11px L the panels wear. */
body.et-public-studio .et-navbar > .container {
    position: relative;
}

body.et-public-studio .et-navbar > .container::before,
body.et-public-studio .et-navbar > .container::after {
    content: '';
    position: absolute;
    top: -0.15rem;
    width: 9px;
    height: 9px;
    opacity: 0.45;
    pointer-events: none;
}

body.et-public-studio .et-navbar > .container::before {
    left: -0.35rem;
    border-top: 1px solid color-mix(in srgb, var(--et-accent-primary) 55%, transparent);
    border-left: 1px solid color-mix(in srgb, var(--et-accent-primary) 55%, transparent);
}

body.et-public-studio .et-navbar > .container::after {
    right: -0.35rem;
    border-top: 1px solid color-mix(in srgb, var(--et-accent-primary) 55%, transparent);
    border-right: 1px solid color-mix(in srgb, var(--et-accent-primary) 55%, transparent);
}

/* The wordmark keeps a mono tick in front of it, tying the header to the
   kickers the page sets its section labels in. */
body.et-public-studio .et-navbar .et-brand-name-montserrat {
    position: relative;
    letter-spacing: 0.06em;
}

/* Nav items sit in cells. The hairline before the sign-in / CTA cluster is the
   only divider, which is enough to give the right side structure without
   ruling every gap. */
body.et-public-studio .et-navbar .et-navbar-nav > .nav-item > .nav-link {
    padding-inline: 0.7rem;
    font-size: 0.9rem;
}

body.et-public-studio .et-navbar .et-navbar-nav > .nav-item:has(> .nav-link[href="/login"]) {
    margin-left: 0.45rem;
    padding-left: 0.75rem;
    box-shadow: inset 1px 0 0 var(--et-hairline);
}

/* Same 0.65rem bi-chevron-down as the account menu. The CSS ⌄ caret was a
   different glyph and read larger than that arrow. */
body.et-public-studio .et-navbar .dropdown-toggle::after {
    content: none !important;
    display: none !important;
    border: 0;
}

body.et-public-studio .et-navbar .et-nav-caret {
    font-size: 0.65rem;
    line-height: 1;
    opacity: 0.7;
    margin-left: 0.3rem;
    transition: transform 0.18s ease, opacity 0.18s ease;
}

body.et-public-studio .et-navbar .dropdown-toggle[aria-expanded="true"] .et-nav-caret {
    transform: rotate(180deg);
    opacity: 0.9;
}

/* The mobile trigger becomes a square cell rather than a bare glyph. */
body.et-public-studio .navbar-toggler {
    /* No `display` here. navbar-expand-lg hides this button above 992px with
       `display: none`, and declaring inline-flex at this weight put a
       hamburger next to the wordmark on desktop. Centring is set in the
       mobile block below, where the button is actually shown. */
    width: 2.1rem;
    height: 2.1rem;
    padding: 0;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--et-bg-secondary);
    box-shadow: inset 0 0 0 1px var(--et-hairline);
    color: var(--et-text-primary);
    transition: background 0.16s ease, box-shadow 0.16s ease, color 0.16s ease;
}

body.et-public-studio .navbar-toggler:hover,
body.et-public-studio .navbar-toggler[aria-expanded="true"] {
    background: color-mix(in srgb, var(--et-accent-primary) 14%, #000);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--et-accent-primary) 40%, transparent);
    color: var(--et-accent-primary);
}

body.et-public-studio .navbar-toggler:focus { box-shadow: inset 0 0 0 1px var(--et-accent-primary); }

/* The collapsed mobile menu is a panel like everything else. */
@media (max-width: 991.98px) {
    body.et-public-studio .navbar-toggler {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    body.et-public-studio .navbar-collapse {
        background: var(--et-bg-secondary);
        box-shadow: inset 0 0 0 1px var(--et-hairline);
        margin-top: 0.55rem;
        padding: 0.5rem;
    }

    body.et-public-studio .et-navbar .et-navbar-nav > .nav-item:has(> .nav-link[href="/login"]) {
        margin-left: 0;
        padding-left: 0;
        box-shadow: inset 0 1px 0 var(--et-hairline);
        padding-top: 0.4rem;
        margin-top: 0.3rem;
    }

    body.et-public-studio .et-navbar > .container::before,
    body.et-public-studio .et-navbar > .container::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    body.et-public-studio .et-navbar,
    body.et-public-studio .navbar-toggler,
    body.et-public-studio .et-navbar .dropdown-toggle::after,
    body.et-public-studio .et-navbar .et-nav-caret { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Header, second pass — the parts I had not looked at
 *
 * The first pass was done against the logged-out header only, and against the
 * stylesheet rather than the rendered page. Two things came out of actually
 * opening it: the hover underline was still the old violet→teal→violet
 * gradient (my teal rule added a second underline rather than replacing it),
 * and the whole signed-in user menu — trigger, avatar, name, chevron, panel,
 * items — had never been touched at all.
 *
 * public-nav.css styles these at (0,3,0) with !important on most properties,
 * so every override here carries .et-public-site to reach (0,4,0).
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── The multicoloured underline ──────────────────────────────────────────
 * A 2px gradient running transparent → violet → teal → violet with rounded
 * ends, scaling in on hover. It is the most visible piece of the old identity
 * left anywhere on the page, and my teal underline was drawing underneath it
 * rather than instead of it. Retired; the box-shadow rule above is the single
 * marker, and it covers the dropdown toggles too, which this never did. */
body.et-public-studio.et-public-site .et-navbar .et-navbar-nav > .nav-item > .nav-link:not(.dropdown-toggle)::after,
body.et-public-studio.et-public-site .et-navbar .et-navbar-nav > .nav-item > .nav-link:not(.dropdown-toggle):hover::after,
body.et-public-studio.et-public-site .et-navbar .et-navbar-nav > .nav-item > .nav-link.active:not(.dropdown-toggle)::after {
    display: none !important;
    content: none !important;
}

/* ── Signed-in user menu ──────────────────────────────────────────────────
 * The trigger becomes a cell like every other control: square, hairline,
 * teal when it is open. It read as three loose objects floating in the strip
 * before — an avatar with a violet halo, a name, and a chevron. */
body.et-public-studio.et-public-site .et-navbar .et-nav-user-trigger {
    padding: 0.25rem 0.5rem 0.25rem 0.25rem !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--et-bg-secondary) !important;
    box-shadow: inset 0 0 0 1px var(--et-hairline) !important;
    color: var(--et-text-primary) !important;
    transition: background 0.16s ease, box-shadow 0.16s ease, color 0.16s ease;
}

body.et-public-studio.et-public-site .et-navbar .et-nav-user-trigger:hover,
body.et-public-studio.et-public-site .et-navbar .et-nav-user-trigger:focus-visible,
body.et-public-studio.et-public-site .et-navbar .et-nav-user-trigger[aria-expanded="true"] {
    background: color-mix(in srgb, var(--et-accent-primary) 12%, #000) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--et-accent-primary) 42%, transparent) !important;
    color: var(--et-accent-primary) !important;
    transform: none !important;
}

/* The avatar is a square portrait framed by a hairline. The violet halo —
   0 2px 10px rgba(139,92,246,.35), and a brighter one again when the menu is
   open — is the same old-identity glow the footer was carrying. */
body.et-public-studio.et-public-site .et-navbar .et-nav-avatar,
body.et-public-studio.et-public-site .et-navbar .et-nav-user-trigger[aria-expanded="true"] .et-nav-avatar {
    border-radius: 0 !important;
    box-shadow: inset 0 0 0 1px var(--et-hairline) !important;
    background: #000 !important;
    color: var(--et-accent-primary) !important;
    font-weight: 700;
    transform: none !important;
    transition: box-shadow 0.16s ease;
}

body.et-public-studio.et-public-site .et-navbar .et-nav-user-trigger:hover .et-nav-avatar,
body.et-public-studio.et-public-site .et-navbar .et-nav-user-trigger[aria-expanded="true"] .et-nav-avatar {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--et-accent-primary) 45%, transparent) !important;
}

body.et-public-studio.et-public-site .et-navbar .et-nav-user-name {
    color: inherit !important;
    font-weight: 600;
    font-size: 0.85rem;
}

body.et-public-studio.et-public-site .et-navbar .et-nav-user-chevron {
    color: inherit !important;
    font-size: 0.65rem;
    transition: transform 0.18s ease;
}

body.et-public-studio.et-public-site .et-navbar .et-nav-user-trigger[aria-expanded="true"] .et-nav-user-chevron {
    transform: rotate(180deg);
}

/* The panel: square, solid, one hairline, no drop shadow. It was 12px rounded
   on rgba(14,14,20,.98) under a 48px shadow — a floating card, which is the
   one shape the studio never draws. */
body.et-public-studio.et-public-site .et-navbar .et-nav-user-menu,
body.et-public-studio.et-public-site .et-navbar .et-nav-user-menu.shadow {
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--et-bg-secondary) !important;
    box-shadow: inset 0 0 0 1px var(--et-hairline) !important;
    padding: 0 !important;
    margin-top: 0.4rem !important;
}

body.et-public-studio.et-public-site .et-navbar .et-nav-user-menu .dropdown-item {
    border-radius: 0 !important;
    padding: 0.55rem 0.75rem !important;
    color: var(--et-text-secondary) !important;
    background: transparent !important;
    transition: background 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
}

body.et-public-studio.et-public-site .et-navbar .et-nav-user-menu .dropdown-item i {
    color: var(--et-accent-primary);
}

body.et-public-studio.et-public-site .et-navbar .et-nav-user-menu .dropdown-item:hover,
body.et-public-studio.et-public-site .et-navbar .et-nav-user-menu .dropdown-item:focus-visible {
    background: var(--et-bg-hover) !important;
    color: var(--et-text-primary) !important;
    box-shadow: inset 2px 0 0 var(--et-accent-primary) !important;
}

/* Logout keeps a warning colour, but Bootstrap's #dc3545 is a UI red that
   belongs to a different palette. */
body.et-public-studio.et-public-site .et-navbar .et-nav-user-menu .dropdown-item.text-danger,
body.et-public-studio.et-public-site .et-navbar .et-nav-user-menu .dropdown-item.text-danger i {
    color: #f87171 !important;
}

body.et-public-studio.et-public-site .et-navbar .et-nav-user-menu .dropdown-item.text-danger:hover {
    background: color-mix(in srgb, #f87171 12%, #000) !important;
    color: #ff9798 !important;
    box-shadow: inset 2px 0 0 #f87171 !important;
}

body.et-public-studio.et-public-site .et-navbar .et-nav-user-menu .dropdown-divider {
    border: 0 !important;
    height: 1px;
    margin: 0 !important;
    background: var(--et-hairline);
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    body.et-public-studio.et-public-site .et-navbar .et-nav-user-trigger,
    body.et-public-studio.et-public-site .et-navbar .et-nav-avatar,
    body.et-public-studio.et-public-site .et-navbar .et-nav-user-chevron,
    body.et-public-studio.et-public-site .et-navbar .et-nav-user-menu .dropdown-item { transition: none; }
}

/* ── Tools mega-menu ──────────────────────────────────────────────────────
 * The largest surface in the header and the one I had not opened. A sweep of
 * the nav's computed styles found it still carrying the whole old identity: a
 * 12px-rounded panel under a 48px drop shadow, a violet-tinted header band,
 * violet category icons, and 6-8px radii on every link and chip.
 *
 * Same treatment as everything else — square, #09090b on black, hairlines
 * instead of borders and shadows, teal only where it means something. */
body.et-public-studio.et-public-site .et-tools-mega-panel,
body.et-public-studio.et-public-site .et-tools-mega {
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--et-bg-secondary) !important;
    background-image: none !important;
    box-shadow: inset 0 0 0 1px var(--et-hairline) !important;
}

body.et-public-studio.et-public-site .et-tools-mega-header {
    background: #000 !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: inset 0 -1px 0 var(--et-hairline) !important;
}

/* Section heads read as the page's technical labels. */
body.et-public-studio.et-public-site .et-tools-mega-col-title,
body.et-public-studio.et-public-site .et-tools-mega-popular-label,
body.et-public-studio.et-public-site .et-tools-mega-downloads-title {
    font-family: var(--et-font-mono, 'IBM Plex Mono', monospace);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--et-text-muted) !important;
}

/* Category icons become square cells like the panel icons on the page. */
body.et-public-studio.et-public-site .et-tools-mega-head-icon,
body.et-public-studio.et-public-site .et-tools-mega-featured__icon,
body.et-public-studio.et-public-site .et-tools-mega-dl-icon {
    border-radius: 0 !important;
    background: #000 !important;
    background-image: none !important;
    box-shadow: inset 0 0 0 1px var(--et-hairline) !important;
    color: var(--et-accent-primary) !important;
}

body.et-public-studio.et-public-site .et-tools-mega-link,
body.et-public-studio.et-public-site .et-tools-mega-featured__link,
body.et-public-studio.et-public-site .et-tools-mega-dl-card,
body.et-public-studio.et-public-site .et-tools-mega-downloads-all,
body.et-public-studio.et-public-site .et-tools-mega-popular-item {
    border-radius: 0 !important;
    border-color: transparent !important;
    color: var(--et-text-secondary) !important;
    transition: background 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
}

body.et-public-studio.et-public-site .et-tools-mega-link:hover,
body.et-public-studio.et-public-site .et-tools-mega-featured__link:hover,
body.et-public-studio.et-public-site .et-tools-mega-popular-item:hover {
    background: var(--et-bg-hover) !important;
    color: var(--et-text-primary) !important;
    box-shadow: inset 2px 0 0 var(--et-accent-primary) !important;
    transform: none !important;
}

body.et-public-studio.et-public-site .et-tools-mega-dl-card {
    background: #000 !important;
    box-shadow: inset 0 0 0 1px var(--et-hairline) !important;
}

/* NEW / UPDATED badges stay semantic — they are the one thing in here that is
   telling you something — but they stop being pills. */
body.et-public-studio.et-public-site .et-tools-mega-badge,
body.et-public-studio.et-public-site .et-tools-mega [class*="badge"] {
    border-radius: 0 !important;
    border: 0 !important;
    font-family: var(--et-font-mono, 'IBM Plex Mono', monospace);
    letter-spacing: 0.08em;
    box-shadow: inset 0 0 0 1px var(--et-hairline);
}

body.et-public-studio.et-public-site .et-tools-mega-footer,
body.et-public-studio.et-public-site .et-tools-mega-downloads {
    background: #000 !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: inset 0 1px 0 var(--et-hairline) !important;
}

/* The panel's own "View all" is a filled control, unlike the nav CTA — it is
   the primary action inside this surface. */
body.et-public-studio.et-public-site .et-tools-mega-cta {
    background: var(--et-accent-primary) !important;
    color: var(--et-accent-ink) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-weight: 700;
}

body.et-public-studio.et-public-site .et-tools-mega-cta:hover {
    background: var(--et-accent-primary-hover) !important;
    color: var(--et-accent-ink) !important;
    transform: none !important;
}

/* Writing Library and any other plain dropdown in the strip. */
body.et-public-studio.et-public-site .et-navbar .dropdown-menu {
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--et-bg-secondary) !important;
    box-shadow: inset 0 0 0 1px var(--et-hairline) !important;
    padding: 0 !important;
    margin-top: 0.4rem !important;
}

body.et-public-studio.et-public-site .et-navbar .et-nav-writing-menu {
    max-height: calc(100dvh - var(--hh-h, var(--et-public-navbar-h, 4.4rem)) - 0.85rem);
    overflow-x: hidden;
    overflow-y: auto;
}

@media (max-width: 991.98px) {
    body.et-public-studio.et-public-site .navbar-collapse .et-nav-writing-menu {
        max-height: none;
        overflow: visible;
    }
}

body.et-public-studio.et-public-site .et-navbar .dropdown-menu .dropdown-item {
    border-radius: 0 !important;
    padding: 0.55rem 0.75rem !important;
    color: var(--et-text-secondary) !important;
}

body.et-public-studio.et-public-site .et-navbar .dropdown-menu .dropdown-item:hover,
body.et-public-studio.et-public-site .et-navbar .dropdown-menu .dropdown-item:focus-visible {
    background: var(--et-bg-hover) !important;
    color: var(--et-text-primary) !important;
    box-shadow: inset 2px 0 0 var(--et-accent-primary) !important;
}

/* ── Support chat ─────────────────────────────────────────────────────────
 * The launcher sits on every public page, and it was the only rounded,
 * shadowed object left once the pages themselves were done — a pill in the
 * corner of an otherwise square page.
 *
 * support-chat.css builds everything from its own --sc-* tokens, so remapping
 * those is one block instead of chasing the launcher, the panel, the bubbles
 * and the composer separately. Its accent is already the studio teal. */
body.et-public-studio .et-support-chat {
    --sc-bg: #000;
    --sc-surface: #09090b;
    --sc-border: rgba(255, 255, 255, 0.06);
    --sc-accent: var(--et-accent-primary);
    --sc-muted: var(--et-text-muted);
    --sc-text: var(--et-text-primary);
    --sc-secondary: var(--et-text-secondary);
}

body.et-public-studio .et-support-chat__launcher,
body.et-public-studio .et-support-chat__hide,
body.et-public-studio .et-support-chat__panel {
    border-radius: 0 !important;
    border: 0 !important;
    box-shadow: inset 0 0 0 1px var(--et-hairline) !important;
}

body.et-public-studio .et-support-chat__launcher:hover,
body.et-public-studio .et-support-chat__hide:hover {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--et-accent-primary) 45%, transparent) !important;
    background: color-mix(in srgb, var(--et-accent-primary) 12%, #000) !important;
    color: var(--et-accent-primary) !important;
}

/* The presence dot keeps its own shadow — it is a status light, and the glow
   is what makes it read as lit rather than as a printed dot. */

/* The support panel's "Page — <title>" line is a flex row that wraps, but the
   title itself is one unbroken run, so a long one (the studios' titles are
   ~60 characters) pushed the panel past the viewport at 390px. Nothing else on
   those pages overflowed; this did, on every page with a long title. */
body.et-public-studio .et-support-chat__page-context {
    max-width: 100%;
    min-width: 0;
}

body.et-public-studio .et-support-chat__page-context > * {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* ── Form controls ────────────────────────────────────────────────────────
 * Built on the Story Wizard's underline control (story-wizard-clean.css calls
 * it the write.php / dashboard-space field: no border, a panel surface, a rule
 * along one edge), with the two kinds of control told apart:
 *
 *   text inputs and textareas  a solid teal rule all the way round
 *   selects                    the same teal, on the bottom edge only
 *
 * Something you type into is an open box, and the full edge says so. A select
 * is a closed list you pick from, and the single rule keeps it visibly a
 * different kind of control — which is most of why a long form stays readable
 * rather than turning into a grid of identical boxes.
 *
 * Drawn as inset box-shadows rather than borders: a border occupies layout and
 * would shift every field by a pixel, and the studio draws no borders anywhere
 * else. Focus thickens the rule to 2px and lifts the surface a step; the
 * outline is only suppressed once that has replaced it, so keyboard focus is
 * never left without an indicator.
 *
 * background-image: none matters — Bootstrap paints the select caret there,
 * and without it a styled select shows two arrows. That is the same bug
 * story-wizard-clean.css documents for its own select trigger. */
body.et-public-studio .form-control,
body.et-public-studio .form-select,
body.et-public-studio .et-form-control,
body.et-public-studio select,
body.et-public-studio textarea,
body.et-public-studio input[type="text"],
body.et-public-studio input[type="search"],
body.et-public-studio input[type="email"],
body.et-public-studio input[type="url"],
body.et-public-studio input[type="number"],
body.et-public-studio input[type="password"],
body.et-public-studio input[type="tel"] {
    border: 0 !important;
    border-radius: 0 !important;
    background-color: var(--et-bg-secondary) !important;
    background-image: none !important;
    color: var(--et-text-primary) !important;
    min-height: 2.5rem;
    color-scheme: dark;
    transition: background-color 0.14s ease, box-shadow 0.14s ease;
}

/* Typed-into fields: the full box. */
body.et-public-studio .form-control,
body.et-public-studio .et-form-control,
body.et-public-studio textarea,
body.et-public-studio input[type="text"],
body.et-public-studio input[type="search"],
body.et-public-studio input[type="email"],
body.et-public-studio input[type="url"],
body.et-public-studio input[type="number"],
body.et-public-studio input[type="password"],
body.et-public-studio input[type="tel"] {
    box-shadow: inset 0 0 0 1px var(--et-accent-primary) !important;
}

/* Chosen-from controls: the bottom edge only. .form-select is listed after the
   block above because a select carries that class too and must not keep the
   full box. */
body.et-public-studio select,
body.et-public-studio .form-select,
body.et-public-studio select.form-control {
    box-shadow: inset 0 -1px 0 var(--et-accent-primary) !important;
}

body.et-public-studio textarea,
body.et-public-studio textarea.form-control {
    padding: 0.7rem 0.85rem !important;
    line-height: 1.5;
    resize: vertical;
}

body.et-public-studio .form-control:focus,
body.et-public-studio .form-select:focus,
body.et-public-studio .et-form-control:focus,
body.et-public-studio select:focus,
body.et-public-studio textarea:focus,
body.et-public-studio input[type="text"]:focus,
body.et-public-studio input[type="search"]:focus,
body.et-public-studio input[type="email"]:focus,
body.et-public-studio input[type="url"]:focus,
body.et-public-studio input[type="number"]:focus,
body.et-public-studio input[type="password"]:focus,
body.et-public-studio input[type="tel"]:focus {
    background-color: var(--et-bg-hover) !important;
    outline: none !important;
}

body.et-public-studio .form-control:focus,
body.et-public-studio .et-form-control:focus,
body.et-public-studio textarea:focus,
body.et-public-studio input[type="text"]:focus,
body.et-public-studio input[type="search"]:focus,
body.et-public-studio input[type="email"]:focus,
body.et-public-studio input[type="url"]:focus,
body.et-public-studio input[type="number"]:focus,
body.et-public-studio input[type="password"]:focus,
body.et-public-studio input[type="tel"]:focus {
    box-shadow: inset 0 0 0 2px var(--et-accent-primary) !important;
}

body.et-public-studio select:focus,
body.et-public-studio .form-select:focus,
body.et-public-studio select.form-control:focus {
    box-shadow: inset 0 -2px 0 var(--et-accent-primary) !important;
}

body.et-public-studio .form-control::placeholder,
body.et-public-studio textarea::placeholder,
body.et-public-studio input::placeholder {
    color: var(--et-text-muted);
    opacity: 1;
}

body.et-public-studio .form-control:disabled,
body.et-public-studio .form-control[readonly],
body.et-public-studio input:disabled,
body.et-public-studio textarea:disabled {
    opacity: 0.55;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--et-accent-primary) 30%, transparent) !important;
}

body.et-public-studio select:disabled {
    opacity: 0.55;
    box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--et-accent-primary) 30%, transparent) !important;
}

/* Bootstrap draws the select caret as a background-image, which the rule above
   clears; put a mono chevron back so a select still reads as one. */
body.et-public-studio select.form-select,
body.et-public-studio select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2rem !important;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--et-text-muted) 50%),
        linear-gradient(135deg, var(--et-text-muted) 50%, transparent 50%) !important;
    background-position:
        calc(100% - 1.05rem) calc(50% + 0.1rem),
        calc(100% - 0.75rem) calc(50% + 0.1rem) !important;
    background-size: 0.3rem 0.3rem, 0.3rem 0.3rem !important;
    background-repeat: no-repeat !important;
}

/* Honeypots are positioned off-screen and must keep their own presentation —
   restyling one is a way to teach a bot what to avoid. */
body.et-public-studio input[name$="_hp"],
body.et-public-studio input[name="guide_hp"] {
    all: revert;
}

@media (prefers-reduced-motion: reduce) {
    body.et-public-studio .form-control,
    body.et-public-studio .form-select,
    body.et-public-studio textarea,
    body.et-public-studio input { transition: none; }
}

/* .btn-et-secondary is the ghost half of the button pair and still drew an
   edge. Same treatment as the other secondary controls: a panel surface with a
   hairline, and the accent only on hover. */
body.et-public-studio .btn-et-secondary,
body.et-public-studio .btn-et-ghost {
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--et-bg-secondary) !important;
    background-image: none !important;
    box-shadow: inset 0 0 0 1px var(--et-hairline) !important;
    color: var(--et-text-primary) !important;
}

body.et-public-studio .btn-et-secondary:hover,
body.et-public-studio .btn-et-ghost:hover {
    background: var(--et-bg-hover) !important;
    color: var(--et-accent-primary) !important;
    transform: none !important;
}

/* CoreUI's .btn-link ships indigo (--cui-link-color), which is nowhere in the
   studio palette. Point it at the accent so "Edit series & cast", "Show N
   earlier runs", and every other link-button reads as part of the site. */
body.et-public-studio .btn-link {
    --cui-btn-color: var(--et-accent-primary);
    --cui-btn-hover-color: var(--et-accent-primary-hover);
    --cui-btn-active-color: var(--et-accent-primary-hover);
    --cui-btn-disabled-color: var(--et-text-muted);
    color: var(--et-accent-primary);
}

body.et-public-studio .btn-link:hover,
body.et-public-studio .btn-link:focus-visible {
    color: var(--et-accent-primary-hover);
}

/* Shared modal entrance: rise-and-settle instead of CoreUI's drop-from-above,
   matching the write studio. Compositor-only; ends at transform: none. */
@media (prefers-reduced-motion: no-preference) {
    body.et-public-studio .modal.fade .modal-dialog {
        transform: translateY(14px) scale(0.98);
        opacity: 0;
        transition: transform 0.26s cubic-bezier(0.21, 0.9, 0.32, 1), opacity 0.22s ease;
    }

    body.et-public-studio .modal.show .modal-dialog {
        transform: none;
        opacity: 1;
    }
}