/* ═══════════════════════════════════════════════════════════════════════════
 * Entangled Text — public studio skin, page passes
 *
 * et-public-studio.css carries the palette, the flattening and the shared
 * chrome. This file carries the per-page component work, so the skin file does
 * not grow a section per page and each page's rules stay findable.
 *
 * Loaded only by pages that have had a pass. Everything is scoped to
 * body.et-public-studio like the rest of the skin.
 *
 * Class names here were read off the rendered pages, not guessed.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── Leftover atmosphere ──────────────────────────────────────────────────
 * The violet/rose nebulae and the grid belong to the previous identity and
 * sit behind the hero on any page that loads the atmosphere layer. */
body.et-public-studio .et-atmosphere,
body.et-public-studio .et-atmosphere-glow,
body.et-public-studio .et-atmosphere-grid,
body.et-public-studio .et-atmosphere-noise,
body.et-public-studio .et-tools-hero::before,
body.et-public-studio .et-tools-hero::after {
    display: none !important;
}

/* ═══ /tools ═══════════════════════════════════════════════════════════════ */

/* Hero badge — a mono readout, like the page kickers. */
body.et-public-studio .et-tools-hero .et-badge,
body.et-public-studio .et-badge-mono {
    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-accent-primary) !important;
    font-family: var(--et-font-mono, 'IBM Plex Mono', monospace);
    letter-spacing: 0.1em;
    text-shadow: none !important;
}

/* The featured tool and the studio CTA are panels, not tinted cards. */
body.et-public-studio .et-tools-featured,
body.et-public-studio .et-tools-studio-cta,
body.et-public-studio .et-tools-quick-strip,
body.et-public-studio .et-tools-hub-controls,
body.et-public-studio .et-tool-faq-item,
body.et-public-studio .et-card {
    background: var(--et-bg-secondary) !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: inset 0 0 0 1px var(--et-hairline) !important;
}

body.et-public-studio .et-tools-quick-strip__label,
body.et-public-studio .et-tools-studio-cta__eyebrow {
    font-family: var(--et-font-mono, 'IBM Plex Mono', monospace);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--et-text-muted) !important;
}

body.et-public-studio .et-tools-quick-strip__link {
    color: var(--et-text-secondary) !important;
    border-radius: 0 !important;
    transition: color 0.14s ease;
}

body.et-public-studio .et-tools-quick-strip__link:hover {
    color: var(--et-accent-primary) !important;
}

/* ── Tool cards ───────────────────────────────────────────────────────────
 * The 47 cards are the page. They carried a violet-tinted fill and border and
 * a drop shadow each — 51 shadows and 49 tinted edges, which is what made the
 * grid read as a different product from the studio. They get the homepage
 * panel treatment: #09090b on black, corner registration ticks, and the
 * accent down the leading edge on hover. */
body.et-public-studio .et-tool-card {
    position: relative;
    background: var(--et-bg-secondary) !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: inset 0 0 0 1px var(--et-hairline) !important;
    transition: background 0.16s ease, box-shadow 0.16s ease;
}

body.et-public-studio .et-tool-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    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);
    opacity: 0.45;
    transition: opacity 0.16s ease, width 0.16s ease, height 0.16s ease;
    pointer-events: none;
}

body.et-public-studio .et-tool-card:hover {
    background: var(--et-bg-hover) !important;
    box-shadow: inset 0 0 0 1px var(--et-hairline),
                inset 2px 0 0 var(--et-accent-primary) !important;
    transform: none !important;
}

body.et-public-studio .et-tool-card:hover::before {
    opacity: 1;
    width: 15px;
    height: 15px;
}

/* Icon cells, same as the homepage panels: a fixed square so every glyph
   shares an optical baseline. */
body.et-public-studio .et-tool-card-icon {
    border-radius: 0 !important;
    border: 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-tool-card:hover .et-tool-card-icon {
    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) 40%, transparent) !important;
}

/* NEW and UPDATED stay distinguishable — they are the one thing on a card
   telling you something — but UPDATED was indigo, which read as the old
   accent. Both become mono chips: teal for new, muted for updated. */
body.et-public-studio .et-tool-card-badge {
    border: 0 !important;
    border-radius: 0 !important;
    font-family: var(--et-font-mono, 'IBM Plex Mono', monospace);
    letter-spacing: 0.08em;
    text-shadow: none !important;
    box-shadow: inset 0 0 0 1px var(--et-hairline) !important;
}

body.et-public-studio .et-tool-card-badge--new {
    background: color-mix(in srgb, var(--et-accent-primary) 16%, #000) !important;
    color: var(--et-accent-primary) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--et-accent-primary) 40%, transparent) !important;
}

body.et-public-studio .et-tool-card-badge--updated {
    background: #000 !important;
    color: var(--et-text-muted) !important;
}

/* Category headings read as section labels. */
body.et-public-studio .et-tools-cat-section > h2,
body.et-public-studio .et-tools-cat-section > h3 {
    font-family: var(--et-font-display);
    letter-spacing: -0.01em;
}

/* Filter chips and the search field. */
body.et-public-studio .et-tools-hub-controls .btn,
body.et-public-studio .et-tools-hub-controls .nav-link {
    border-radius: 0 !important;
    border: 0 !important;
}


/* ═══ /pricing ═════════════════════════════════════════════════════════════
 * The comparison table was already square and black, but drew no lines at
 * all, so nine rows of three columns ran together as one block of text. The
 * studio's answer to that is a seam, not a border: hairlines under each row,
 * a panel header, and the tier names in the accent so the columns are
 * findable at a glance. */
body.et-public-studio .et-public-content-section table {
    width: 100%;
    border-collapse: collapse;
    border: 0;
}

body.et-public-studio .et-public-content-section thead th {
    background: var(--et-bg-secondary);
    color: var(--et-accent-primary);
    font-family: var(--et-font-display);
    font-weight: 700;
    border: 0;
    box-shadow: inset 0 -1px 0 var(--et-hairline-strong);
    padding: 0.75rem 0.9rem;
}

body.et-public-studio .et-public-content-section tbody td,
body.et-public-studio .et-public-content-section tbody th {
    border: 0;
    box-shadow: inset 0 -1px 0 var(--et-hairline);
    padding: 0.7rem 0.9rem;
    vertical-align: top;
    color: var(--et-text-secondary);
}

/* The row label column carries the question being answered. */
body.et-public-studio .et-public-content-section tbody th,
body.et-public-studio .et-public-content-section tbody tr > *:first-child {
    color: var(--et-text-primary);
    font-weight: 600;
}

body.et-public-studio .et-public-content-section tbody tr:hover td,
body.et-public-studio .et-public-content-section tbody tr:hover th {
    background: var(--et-bg-secondary);
}

/* FAQ and the closing call to action. */
body.et-public-studio .et-llm-faq details,
body.et-public-studio .et-kb-bottom-cta {
    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 .et-mono {
    font-family: var(--et-font-mono, 'IBM Plex Mono', monospace);
    letter-spacing: 0.08em;
    color: var(--et-text-muted);
}

@media (prefers-reduced-motion: reduce) {
    body.et-public-studio .et-tool-card,
    body.et-public-studio .et-tool-card::before,
    body.et-public-studio .et-tool-card-icon,
    body.et-public-studio .et-tools-quick-strip__link { transition: none; }
}

/* ═══ Writing library — /guides, /guides/<slug>, /writing-tips ═════════════
 * Three templates sharing most of their furniture: prose, code blocks with
 * copy buttons, sidebar panels, and the comment thread. Class names below came
 * from sweeping the rendered pages. */

/* ── Shared: panels ───────────────────────────────────────────────────────
 * Everything that was a tinted, rounded, shadowed card becomes a flat panel. */
body.et-public-studio .guide-featured-hero,
body.et-public-studio .guide-sidebar-panel,
body.et-public-studio .guide-newsletter-card,
body.et-public-studio .guide-newsletter-form,
body.et-public-studio .prompt-example,
body.et-public-studio .et-wt-genre-card,
body.et-public-studio .et-llm-citation,
body.et-public-studio .et-wl-hero {
    background: var(--et-bg-secondary) !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: inset 0 0 0 1px var(--et-hairline) !important;
}

body.et-public-studio .et-wt-genre-card {
    transition: background 0.16s ease, box-shadow 0.16s ease;
}

body.et-public-studio .et-wt-genre-card:hover {
    background: var(--et-bg-hover) !important;
    box-shadow: inset 0 0 0 1px var(--et-hairline),
                inset 2px 0 0 var(--et-accent-primary) !important;
    transform: none !important;
}

/* ── Code blocks and their copy buttons ───────────────────────────────────
 * /writing-tips alone has 30 of these. A rounded button floating on a code
 * block is the most obviously non-studio thing on the page. */
body.et-public-studio .et-copy-block-btn {
    border-radius: 0 !important;
    border: 0 !important;
    background: #000 !important;
    box-shadow: inset 0 0 0 1px var(--et-hairline) !important;
    color: var(--et-text-secondary) !important;
    font-family: var(--et-font-mono, 'IBM Plex Mono', monospace);
    font-size: 0.66rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: background 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
}

body.et-public-studio .et-copy-block-btn:hover {
    background: color-mix(in srgb, var(--et-accent-primary) 14%, #000) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--et-accent-primary) 40%, transparent) !important;
    color: var(--et-accent-primary) !important;
}

body.et-public-studio pre,
body.et-public-studio .prompt-example pre,
body.et-public-studio code {
    border-radius: 0 !important;
    border: 0 !important;
}

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

/* ── Prose ────────────────────────────────────────────────────────────────
 * A pull quote gets the accent as a rule down its leading edge, which is how
 * the studio marks anything set apart, rather than a tinted box. */
body.et-public-studio .guide-article-layout,
body.et-public-studio .guide-article-layout > article {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.et-public-studio blockquote {
    background: var(--et-bg-secondary) !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: inset 3px 0 0 var(--et-accent-primary) !important;
    color: var(--et-text-secondary);
}

body.et-public-studio .guide-sidebar-story-cover {
    border-radius: 0 !important;
    box-shadow: inset 0 0 0 1px var(--et-hairline) !important;
}

/* ── The library path / breadcrumb steps ──────────────────────────────────
 * Pills at 999px on a page where nothing else is rounded. They become mono
 * cells, with the current step carrying the accent. */
body.et-public-studio .et-wl-path__step,
body.et-public-studio .et-wl-path__link,
body.et-public-studio .et-wl-hero__latest {
    border-radius: 0 !important;
    border: 0 !important;
    font-family: var(--et-font-mono, 'IBM Plex Mono', monospace);
    letter-spacing: 0.08em;
    background: var(--et-bg-secondary) !important;
    box-shadow: inset 0 0 0 1px var(--et-hairline) !important;
    color: var(--et-text-secondary) !important;
}

body.et-public-studio .et-wl-path__link--here,
body.et-public-studio .et-wl-path__link[aria-current] {
    color: var(--et-accent-primary) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--et-accent-primary) 40%, transparent) !important;
}

/* ── Fields ───────────────────────────────────────────────────────────────── */

/* ── Comment thread ─────────────────────────────────────────────────────────
 * .et-cc__inner is a max-width column, not a card. The shared panel pass
 * used to draw a hairline around it while its padding stayed 1.5rem 0 0,
 * so the heading, form, and thread sat on the edges on every comments
 * page (tools, guides, writing tips). The compose box and each comment
 * are the panels. */
body.et-public-studio .et-cc__inner {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: inset 0 1px 0 var(--et-hairline) !important;
}

body.et-public-studio .et-cc__compose,
body.et-public-studio .et-cc__item {
    background: var(--et-bg-secondary) !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: inset 0 0 0 1px var(--et-hairline) !important;
}

body.et-public-studio .et-cc__count {
    border-radius: 0 !important;
    border: 0 !important;
    background: color-mix(in srgb, var(--et-accent-primary) 14%, #000) !important;
    color: var(--et-accent-primary) !important;
    font-family: var(--et-font-mono, 'IBM Plex Mono', monospace);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--et-accent-primary) 35%, transparent) !important;
}

/* The invite mark on the closing call to action. */
body.et-public-studio .et-invite-cta__mark {
    background: #000 !important;
    background-image: none !important;
    border-radius: 0 !important;
    box-shadow: inset 0 0 0 1px var(--et-hairline) !important;
    color: var(--et-accent-primary) !important;
}

@media (prefers-reduced-motion: reduce) {
    body.et-public-studio .et-copy-block-btn,
    body.et-public-studio .et-wt-genre-card { transition: none; }
}

/* ── The library's gold ───────────────────────────────────────────────────
 * /guides and /writing-tips carry their own accent, #c4a05a, separate from
 * the site's violet: the active chrome tab's underline, the path steps and
 * their current marker, the "Open handbook" CTA, the topic icons, and the
 * focus rings. It is a deliberate sub-brand for the library rather than
 * leftovers, and under the studio skin it becomes teal like everything else —
 * one accent across the whole site is most of what makes it read as one
 * product.
 *
 * Worth recording how it was found: the first sweep missed all of it, because
 * the pattern only knew the violet palette. The second missed it again by one
 * — the gold's blue channel is exactly 90 and the test was `< 90`. It turned
 * up by reading the rendered sub-nav rather than by either sweep. */
body.et-public-studio .et-wl-chrome__tab.is-active {
    border-bottom-color: var(--et-accent-primary) !important;
    color: var(--et-text-primary) !important;
}

body.et-public-studio .et-wl-path__cta,
body.et-public-studio .et-wl-topic i,
body.et-public-studio .et-wl-path__link--here {
    color: var(--et-accent-primary) !important;
}

body.et-public-studio .et-wl-topic {
    border-radius: 0 !important;
    border: 0 !important;
    background: var(--et-bg-secondary) !important;
    box-shadow: inset 0 0 0 1px var(--et-hairline) !important;
    transition: background 0.16s ease, box-shadow 0.16s ease;
}

body.et-public-studio .et-wl-topic:hover,
body.et-public-studio .et-wl-topic:focus-visible {
    background: var(--et-bg-hover) !important;
    border-color: transparent !important;
    box-shadow: inset 0 0 0 1px var(--et-hairline),
                inset 2px 0 0 var(--et-accent-primary) !important;
}

body.et-public-studio .et-wl-path__link:focus-visible,
body.et-public-studio .et-wl-hero__latest:focus-visible,
body.et-public-studio .et-wl-topic:focus-visible,
body.et-public-studio #story-rating-sidebar .sidebar-rating-star-btn:focus-visible {
    outline: 2px solid var(--et-accent-primary) !important;
    outline-offset: 2px;
}

/* The writing-tips contents rail marks each entry with a 3px gold left rule
   (rgba(154,123,60,.2)) and the current one solid. Same sub-brand as the tabs
   above, in a second shade, and it is the studio's live-row marker in every
   other surface — so it becomes teal here too. */
body.et-public-studio .et-wl-kb-nav a,
body.et-public-studio .kb-nav a {
    border-left-color: var(--et-hairline) !important;
    border-radius: 0 !important;
    transition: border-color 0.14s ease, color 0.14s ease, background 0.14s ease;
}

body.et-public-studio .et-wl-kb-nav a:hover,
body.et-public-studio .kb-nav a:hover,
body.et-public-studio .et-wl-kb-nav a.is-active,
body.et-public-studio .kb-nav a.is-active,
body.et-public-studio .et-wl-kb-nav a[aria-current],
body.et-public-studio .kb-nav a[aria-current] {
    border-left-color: var(--et-accent-primary) !important;
    color: var(--et-text-primary) !important;
    background: var(--et-bg-secondary) !important;
}

/* ── The library chrome row on narrow screens ─────────────────────────────
 * .et-wl-chrome__tabs is a flex row of three tabs that neither wraps nor
 * scrolls: at 390px it measures 578px and pushed the whole page into a
 * horizontal scroll. Pre-existing — the tabs were only recoloured here — but
 * it is on a page being converted and the fix is one rule.
 *
 * Scrolling rather than wrapping keeps the row one line, which is what it is:
 * a set of peers you move along, like the studio's own step bars. */
@media (max-width: 820px) {
    body.et-public-studio .et-wl-chrome__tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    body.et-public-studio .et-wl-chrome__tabs::-webkit-scrollbar { display: none; }

    body.et-public-studio .et-wl-chrome__tabs > li { flex: none; }
}

/* The guides pagination is a non-wrapping flex row of page buttons; with ten
   pages it measures 578px and was what actually put /guides into a horizontal
   scroll at 390px. Also pre-existing. Wrapping rather than scrolling here,
   because page numbers are a block you scan, not a row you travel along. */
@media (max-width: 820px) {
    body.et-public-studio #etGuidesPagination > .d-flex {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* ═══ Tool pages — /tools/<slug> ═══════════════════════════════════════════
 * One template behind 47 pages, and the widest surface left: a sidebar listing
 * every tool, each row with an icon and a NEW/UPDATED badge, beside the tool's
 * own panel. 50 drawn borders and 42 old-palette colours before this. */
body.et-public-studio .et-tool-nav-sidebar,
body.et-public-studio .et-tool-panel,
body.et-public-studio .et-tool-faq-item,
body.et-public-studio .et-tool-learn__block,
body.et-public-studio .et-tool-related__card {
    background: var(--et-bg-secondary) !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: inset 0 0 0 1px var(--et-hairline) !important;
}

body.et-public-studio .et-tool-nav-group__title,
body.et-public-studio .et-tool-learn__block-title {
    font-family: var(--et-font-mono, 'IBM Plex Mono', monospace);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--et-text-muted) !important;
}

/* A sidebar row is a live-row marker on hover, like the studio's own lists. */
body.et-public-studio .et-tool-nav-link {
    border: 0 !important;
    border-radius: 0 !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-tool-nav-link:hover,
body.et-public-studio .et-tool-nav-link.is-active,
body.et-public-studio .et-tool-nav-link[aria-current] {
    background: var(--et-bg-hover) !important;
    color: var(--et-text-primary) !important;
    box-shadow: inset 2px 0 0 var(--et-accent-primary) !important;
}

/* The icon chips carried a violet wash (rgba(139,92,246,.15)) behind the
   glyph, which is why 42 of them showed up in the sweep even after the text
   colour was set — the tint is a background, not a colour. */
body.et-public-studio .et-tool-nav-link__icon,
body.et-public-studio .et-tool-nav-link__icon i {
    color: var(--et-accent-primary) !important;
    background: #000 !important;
    background-image: none !important;
    border-radius: 0 !important;
    box-shadow: inset 0 0 0 1px var(--et-hairline) !important;
}

body.et-public-studio .et-tool-nav-link__icon i {
    box-shadow: none !important;
    background: transparent !important;
}

/* The group sections draw a real 1px edge. The colour is close to the hairline
   already, but a border occupies layout where an inset shadow does not, and
   the studio draws no borders. */
body.et-public-studio .et-tool-nav-group {
    border: 0 !important;
    box-shadow: inset 0 -1px 0 var(--et-hairline) !important;
}

body.et-public-studio .et-tool-nav-link__sub {
    color: var(--et-text-muted) !important;
}

/* Same badge treatment as the hub: mono, square, teal for new and muted for
   updated, so 36 UPDATED chips stop reading as a second accent colour. */
body.et-public-studio .et-tool-nav-badge {
    border: 0 !important;
    border-radius: 0 !important;
    font-family: var(--et-font-mono, 'IBM Plex Mono', monospace);
    letter-spacing: 0.08em;
    text-shadow: none !important;
    box-shadow: inset 0 0 0 1px var(--et-hairline) !important;
    background: #000 !important;
    color: var(--et-text-muted) !important;
}

body.et-public-studio .et-tool-nav-badge--new {
    background: color-mix(in srgb, var(--et-accent-primary) 16%, #000) !important;
    color: var(--et-accent-primary) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--et-accent-primary) 40%, transparent) !important;
}

body.et-public-studio .et-tool-related__card {
    transition: background 0.14s ease, box-shadow 0.14s ease;
}

body.et-public-studio .et-tool-related__card:hover {
    background: var(--et-bg-hover) !important;
    box-shadow: inset 0 0 0 1px var(--et-hairline),
                inset 2px 0 0 var(--et-accent-primary) !important;
}

/* ═══ Auth — /login, /register, password reset ═════════════════════════════ */
body.et-public-studio .et-auth-card {
    background: var(--et-bg-secondary) !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: inset 0 0 0 1px var(--et-hairline) !important;
}

/* The provider buttons keep their own identity — a GitHub or Apple button that
   does not look like GitHub or Apple is worse than one that does not match —
   but they lose the rounding and the drawn edge. */
body.et-public-studio .et-auth-github__btn,
body.et-public-studio .et-auth-apple__btn,
body.et-public-studio .et-auth-google__btn {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: inset 0 0 0 1px var(--et-hairline-strong) !important;
}

/* The password strength meter is a signal, so it keeps its colours; it is the
   only thing on the page that should be red or amber. Square, like the rest. */
body.et-public-studio .password-strength,
body.et-public-studio .strength-bar,
body.et-public-studio .strength-fill {
    border-radius: 0 !important;
}

/* ═══ Numbered steps on the landing pages ══════════════════════════════════
 * .step-num is a circle with a drawn edge on /write-a-book-with-ai and its
 * siblings; it becomes the same mono index the studio uses everywhere else. */
body.et-public-studio .step-num {
    border: 0 !important;
    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;
    font-family: var(--et-font-mono, 'IBM Plex Mono', monospace);
    font-weight: 700;
}

/* ═══ Form controls, site-wide ═════════════════════════════════════════════ */
body.et-public-studio .form-check-input {
    border-radius: 0 !important;
    border: 0 !important;
    background-color: #000 !important;
    box-shadow: inset 0 0 0 1px var(--et-hairline) !important;
}

body.et-public-studio .form-check-input:checked {
    background-color: var(--et-accent-primary) !important;
    box-shadow: inset 0 0 0 1px var(--et-accent-primary) !important;
}

@media (prefers-reduced-motion: reduce) {
    body.et-public-studio .et-tool-nav-link,
    body.et-public-studio .et-tool-related__card { transition: none; }
}

/* The remaining violet on a tool page, all of it a background wash rather than
   a text colour, which is why setting colours alone did not clear it: the
   page-title glyph, the sidebar hub glyph, the results placeholder, and the
   panel notice (that one in the old teal #14b8a6). */
body.et-public-studio .et-tool-page-title i.bi,
body.et-public-studio .et-tool-nav-sidebar__hub i.bi {
    background: #000 !important;
    background-image: none !important;
    color: var(--et-accent-primary) !important;
    border-radius: 0 !important;
    box-shadow: inset 0 0 0 1px var(--et-hairline) !important;
}

body.et-public-studio .et-tool-empty-prompt {
    background: #000 !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: inset 0 0 0 1px var(--et-hairline) !important;
    color: var(--et-text-muted) !important;
}

/* The notice is telling you something, so it keeps the accent — as a rule down
   its leading edge rather than a tinted block. */
body.et-public-studio .et-tool-panel__notice {
    background: #000 !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: inset 3px 0 0 var(--et-accent-primary) !important;
    color: var(--et-text-secondary) !important;
}

/* Bootstrap paints .form-check-input from its own background-image and a 3px
   radius, and its rules are more specific than a bare class selector. */
body.et-public-studio input.form-check-input,
body.et-public-studio .form-check .form-check-input {
    border-radius: 0 !important;
    border: 0 !important;
    background-color: #000 !important;
    background-image: none !important;
    box-shadow: inset 0 0 0 1px var(--et-hairline) !important;
}

body.et-public-studio input.form-check-input:checked,
body.et-public-studio .form-check .form-check-input:checked {
    background-color: var(--et-accent-primary) !important;
    box-shadow: inset 0 0 0 1px var(--et-accent-primary) !important;
}

/* ═══ /whats-new — the changelog badges ════════════════════════════════════
 * New / Improved / Fixed were teal, violet and pink: three hues from the old
 * palette, and 48 violet chips on one page. They still have to be tellable
 * apart at a glance, so they keep three levels rather than all going mono —
 * graded in the one accent instead of reaching for a third hue: new is filled
 * teal, improved is plain, and a fix is marked with the accent down its
 * leading edge. Amber was the first attempt and was wrong — it is the studio's
 * warning colour, and a shipped fix is not a warning. */
body.et-public-studio .cl-badge {
    border-radius: 0 !important;
    border: 0 !important;
    font-family: var(--et-font-mono, 'IBM Plex Mono', monospace);
    box-shadow: inset 0 0 0 1px var(--et-hairline);
}

body.et-public-studio .cl-badge-new {
    background: color-mix(in srgb, var(--et-accent-primary) 16%, #000) !important;
    color: var(--et-accent-primary) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--et-accent-primary) 40%, transparent);
}

body.et-public-studio .cl-badge-improved {
    background: #000 !important;
    color: var(--et-text-secondary) !important;
}

body.et-public-studio .cl-badge-fix {
    background: #000 !important;
    color: var(--et-text-muted) !important;
    box-shadow: inset 2px 0 0 var(--et-accent-primary), inset 0 0 0 1px var(--et-hairline);
}

/* ═══ The studio tools (/tools/ai-manga-generator and friends) ═════════════
 * These are the product itself rather than marketing pages, and they already
 * carry the studio palette. Only the shared public link colour leaks in.
 * .et-mgc-quota-dash.is-low stays amber on purpose — it is a low-quota
 * warning, the same class of signal as the health bands, not chrome. */
body.et-public-studio .form-link {
    color: var(--et-accent-primary) !important;
}

body.et-public-studio .form-link:hover {
    color: var(--et-accent-primary-hover) !important;
}

/* The manga/comic studio's welcome overlay is app chrome on a public URL, and
   the only rounded thing left on one. Squared to match; the rest of that
   studio already carries the palette. */
body.et-public-studio .et-mgc-welcome__card,
body.et-public-studio .et-mgc-welcome__choice,
body.et-public-studio .et-mgc-fit-note {
    border-radius: 0 !important;
}

/* ═══ AI Manga Studio / AI Comic Studio ════════════════════════════════════
 * The two studios are the product on a public URL. Their accent now comes from
 * writing-tools-panel-studio-config.js, which sets --et-mgc-accent on the
 * studio root, so colour is handled at the source; what is left here is
 * geometry — the pills, the drawn edges and the drop shadows that the rest of
 * the site has already given up.
 *
 * Deliberately untouched: .et-mgc-quota-dash.is-low keeps its amber, because a
 * dash going amber is telling you the free panel budget is nearly gone. That
 * is a warning, and warnings are the one place the studio allows a second
 * colour. */

/* The genre links under the studio carry a violet border-bottom as their
   underline — the last of the old accent on these pages. */
body.et-public-studio .et-mgc-seo-genre-links .form-link,
body.et-public-studio a.form-link {
    border-bottom-color: color-mix(in srgb, var(--et-accent-primary) 35%, transparent) !important;
}

/* Chrome: the studio bar, the status readouts and the page progress strip. */
body.et-public-studio .et-mgc-studio-bar {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: inset 0 -1px 0 var(--et-hairline) !important;
}

body.et-public-studio .et-mgc-save-status,
body.et-public-studio .et-mgc-quota-dash,
body.et-public-studio .et-mgc-page-progress__item,
body.et-public-studio .et-mgc-free-note,
body.et-public-studio .et-mgc-chip {
    border-radius: 0 !important;
    border: 0 !important;
    box-shadow: inset 0 0 0 1px var(--et-hairline) !important;
}

/* Layout picker. The miniature panel previews are a drawing of a manga page,
   and manga panels are rectangles — the 1px and 4px radii were rounding a
   diagram of something square. */
body.et-public-studio .et-mgc-template-btn,
body.et-public-studio .et-mgc-template-btn__preview,
body.et-public-studio .et-mgc-template-btn__panel {
    border-radius: 0 !important;
    box-shadow: none !important;
}

body.et-public-studio .et-mgc-template-btn {
    border: 0 !important;
    background: var(--et-bg-secondary) !important;
    box-shadow: inset 0 0 0 1px var(--et-hairline) !important;
    transition: background 0.14s ease, box-shadow 0.14s ease;
}

body.et-public-studio .et-mgc-template-btn:hover {
    background: var(--et-bg-hover) !important;
}

body.et-public-studio .et-mgc-template-btn.is-active {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--et-accent-primary) 45%, transparent),
                inset 2px 0 0 var(--et-accent-primary) !important;
}

/* Canvas. The page frame and the panel selection ring are the two things on
   screen that describe the shape of a printed page, so they of all things
   should not be rounded. */
body.et-public-studio .et-mgc-canvas-wrap {
    border-radius: 0 !important;
    box-shadow: none !important;
}

body.et-public-studio .et-mgc-canvas-page-frame,
body.et-public-studio .et-mgc-panel-select-ring,
body.et-public-studio .et-mgc-panel-rect {
    border-radius: 0 !important;
}

/* The welcome overlay and its choices. */
body.et-public-studio .et-mgc-welcome__card,
body.et-public-studio .et-mgc-welcome__choice,
body.et-public-studio .et-mgc-fit-note,
body.et-public-studio .et-mgc-assist-option,
body.et-public-studio .et-mgc-char-card,
body.et-public-studio .et-mgc-studio-overlay .modal-content {
    border-radius: 0 !important;
    box-shadow: none !important;
}

body.et-public-studio .et-mgc-welcome__choice {
    border: 0 !important;
    box-shadow: inset 0 0 0 1px var(--et-hairline) !important;
}

body.et-public-studio .et-mgc-welcome__choice.is-selected,
body.et-public-studio .et-mgc-welcome__choice:hover {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--et-accent-primary) 45%, transparent),
                inset 2px 0 0 var(--et-accent-primary) !important;
}

@media (prefers-reduced-motion: reduce) {
    body.et-public-studio .et-mgc-template-btn { transition: none; }
}

/* The step bar, the page strip and the canvas guides — the rest of the studio
   chrome. The workflow steps were 999px pills; the Write studio marks its own
   steps with a number chip and an underline, which is what these become. */
body.et-public-studio .et-mgc-workflow,
body.et-public-studio .et-mgc-workflow__step,
body.et-public-studio .et-mgc-workflow__num,
body.et-public-studio .et-mgc-page-tab,
body.et-public-studio .et-mgc-page-strip,
body.et-public-studio .et-mgc-template-btn__preview {
    border-radius: 0 !important;
}

body.et-public-studio .et-mgc-workflow,
body.et-public-studio .et-mgc-page-strip {
    border: 0 !important;
    box-shadow: inset 0 -1px 0 var(--et-hairline) !important;
}

body.et-public-studio .et-mgc-workflow__step {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.et-public-studio .et-mgc-workflow__step.is-current {
    background: transparent !important;
    color: var(--et-accent-primary) !important;
    box-shadow: inset 0 -2px 0 var(--et-accent-primary) !important;
}

body.et-public-studio .et-mgc-workflow__step.is-locked {
    opacity: 0.55;
}

body.et-public-studio .et-mgc-page-tab {
    border: 0 !important;
    box-shadow: inset 0 0 0 1px var(--et-hairline) !important;
}

body.et-public-studio .et-mgc-page-tab.is-active {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--et-accent-primary) 45%, transparent),
                inset 2px 0 0 var(--et-accent-primary) !important;
    color: var(--et-accent-primary) !important;
}

/* Canvas guides mark the trim and safe areas; they stay visible but stop
   casting a shadow, which a printed guide line would not. */
body.et-public-studio .et-mgc-canvas-guide,
body.et-public-studio .et-mgc-canvas-page-frame {
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* The script-length meter. Left alone deliberately:
   .et-mgc-template-btn__panel keeps its 1px border, because that border is
   what draws the miniature panel in the layout picker — it is the diagram,
   not chrome around it. */
body.et-public-studio .et-mgc-script-meter-track,
body.et-public-studio .et-mgc-script-meter-fill {
    border-radius: 0 !important;
}

/* ── Studio canvas toolbar on narrow screens ──────────────────────────────
 * The toolbar is a single non-wrapping row of tool groups (zoom, fit, guides,
 * safe zone). At 390px it runs past the viewport. Wrapping rather than
 * scrolling: these are toggles you reach for, not a list you travel along, and
 * a control that has scrolled out of sight on a phone is a control you cannot
 * find. */
@media (max-width: 820px) {
    body.et-public-studio .et-mgc-canvas-toolbar,
    body.et-public-studio .et-mgc-canvas-toolbar__tools {
        /* !important because manga-creator.css pins the tools row to nowrap at
           a higher weight; without it the toolbar wrapped but the row inside it
           did not, and the last group (safe zone / guides) still ran 7px past
           the viewport. */
        flex-wrap: wrap !important;
        row-gap: 0.35rem;
        min-width: 0;
        overflow-x: visible;
    }

    /* The tools row is flex: 0 0 auto, so it sizes to its content and
       overflows the toolbar rather than wrapping inside it — wrapping alone
       could never fix this, because the container was already wider than its
       parent. Letting it shrink is what makes the wrap take effect. */
    body.et-public-studio .et-mgc-canvas-toolbar__tools {
        flex: 1 1 auto !important;
    }

    body.et-public-studio .et-mgc-canvas-tool-group {
        flex: 0 1 auto;
        min-width: 0;
    }
}

/* ═══ The five tools with their own chrome ═════════════════════════════════
 * Most of the 47 tools share one template and were done with it. These five
 * build their own UI and needed their own pass. Error colours (.text-danger,
 * .is-fail) are left alone throughout — those are signals. */

/* ── Tool tip callout (chapter-planner, title-length-checker, others) ──────
 * A left-bar callout with a 0 6px 6px 0 radius. The bar is the right idea —
 * it is the studio's own "set apart" marker — so it keeps it, in the accent,
 * and loses the rounded end. */
body.et-public-studio .et-tool-tip {
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--et-bg-secondary) !important;
    background-image: none !important;
    box-shadow: inset 3px 0 0 var(--et-accent-primary) !important;
    color: var(--et-text-secondary) !important;
}

/* ── AI Book Cover Generator ──────────────────────────────────────────────── */
body.et-public-studio .et-bcc-workflow__step {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.et-public-studio .et-bcc-workflow__step.is-current {
    color: var(--et-accent-primary) !important;
    box-shadow: inset 0 -2px 0 var(--et-accent-primary) !important;
}

body.et-public-studio .et-bcc-prompt-chip,
body.et-public-studio .et-bcc-quota-hint,
body.et-public-studio .et-bcc-panel,
body.et-public-studio .et-bcc-promo__card {
    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-bcc-prompt-chip {
    transition: background 0.14s ease, box-shadow 0.14s ease, color 0.14s ease;
}

body.et-public-studio .et-bcc-prompt-chip:hover,
body.et-public-studio .et-bcc-prompt-chip.is-active {
    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) 40%, transparent) !important;
    color: var(--et-accent-primary) !important;
}

/* The studio promo card was amber. It is an advertisement for Story Studio,
   not a warning, so it takes the accent like every other call to action. */
body.et-public-studio .et-bcc-promo__card--studio {
    box-shadow: inset 0 0 0 1px var(--et-hairline),
                inset 3px 0 0 var(--et-accent-primary) !important;
}

body.et-public-studio .et-bcc-promo__card--studio .et-bcc-promo__title,
body.et-public-studio .et-bcc-quota-hint strong {
    color: var(--et-accent-primary) !important;
}

/* ── Kindle / KDP formatter ───────────────────────────────────────────────── */
body.et-public-studio .et-kdp-progress,
body.et-public-studio .et-kdp-progress__score,
body.et-public-studio .et-kdp-progress__btn,
body.et-public-studio .et-kdp-check,
body.et-public-studio .et-kdp-dropzone,
body.et-public-studio .et-kdp-stage,
body.et-public-studio .et-kdp-panel,
body.et-public-studio .et-kdp-step-card {
    border-radius: 0 !important;
    border: 0 !important;
}

body.et-public-studio .et-kdp-progress,
body.et-public-studio .et-kdp-panel,
body.et-public-studio .et-kdp-stage,
body.et-public-studio .et-kdp-dropzone,
body.et-public-studio .et-kdp-step-card {
    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-kdp-panel.is-active,
body.et-public-studio .et-kdp-step-card--current {
    box-shadow: inset 0 0 0 1px var(--et-hairline),
                inset 3px 0 0 var(--et-accent-primary) !important;
}

body.et-public-studio .et-kdp-dropzone {
    border: 1px dashed var(--et-hairline-strong) !important;
    box-shadow: none !important;
}

body.et-public-studio .et-kdp-dropzone.is-dragover {
    border-color: var(--et-accent-primary) !important;
    background: color-mix(in srgb, var(--et-accent-primary) 8%, #000) !important;
}

/* .is-fail keeps its colour — a failed preflight check is exactly the kind of
   thing that should not be teal. */
body.et-public-studio .et-kdp-check.is-pass {
    color: var(--et-accent-primary) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--et-accent-primary) 35%, transparent) !important;
}

/* ── Character portrait generator ─────────────────────────────────────────── */
body.et-public-studio .et-char-portrait-preview {
    border: 0 !important;
    border-radius: 0 !important;
    background: #000 !important;
    background-image: none !important;
    box-shadow: inset 0 0 0 1px var(--et-hairline) !important;
}

@media (prefers-reduced-motion: reduce) {
    body.et-public-studio .et-bcc-prompt-chip { transition: none; }
}

/* Last of the bespoke chrome on these two tools. The KDP dropzone keeps a
   dashed edge on purpose — a drop target should look like one, and it is the
   single place on the site where a dashed border says something. */
body.et-public-studio .et-bcc-step2-wait,
body.et-public-studio .et-bcc-tabs__btn,
body.et-public-studio .et-kdp-progress__num,
body.et-public-studio .et-kdp-input-modes,
body.et-public-studio .et-kdp-ms-stats {
    border: 0 !important;
    border-radius: 0 !important;
    background-image: none !important;
}

body.et-public-studio .et-bcc-step2-wait,
body.et-public-studio .et-kdp-input-modes,
body.et-public-studio .et-kdp-ms-stats {
    background: var(--et-bg-secondary) !important;
    box-shadow: inset 0 0 0 1px var(--et-hairline) !important;
}

body.et-public-studio .et-bcc-tabs__btn {
    background: transparent !important;
    color: var(--et-text-secondary) !important;
    box-shadow: none !important;
}

body.et-public-studio .et-bcc-tabs__btn.is-active {
    color: var(--et-accent-primary) !important;
    box-shadow: inset 0 -2px 0 var(--et-accent-primary) !important;
}

body.et-public-studio .et-kdp-progress__num {
    background: #000 !important;
    color: var(--et-accent-primary) !important;
    box-shadow: inset 0 0 0 1px var(--et-hairline) !important;
    font-family: var(--et-font-mono, 'IBM Plex Mono', monospace);
}

body.et-public-studio .et-kdp-input-mode,
body.et-public-studio .et-kdp-dropzone__cta {
    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-secondary) !important;
}

body.et-public-studio .et-kdp-input-mode.is-active {
    background: color-mix(in srgb, var(--et-accent-primary) 12%, #000) !important;
    color: var(--et-accent-primary) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--et-accent-primary) 40%, transparent) !important;
}

/* ── Studio at tablet width ───────────────────────────────────────────────
 * Below the two-column breakpoint .et-mgc-grid stacks, but its children keep
 * the widths they had as columns — at 820px the shell is 796px wide while the
 * sidebar sits at 570 and the canvas at 491, leaving ~214px of the tablet
 * unused down the right. Stacked children should take the width they are
 * given. */
@media (max-width: 1024px) {
    body.et-public-studio .et-mgc-grid {
        align-items: stretch;
    }

    body.et-public-studio .et-mgc-grid > .et-mgc-sidebar,
    body.et-public-studio .et-mgc-grid > .et-mgc-preview-col,
    body.et-public-studio .et-mgc-sidebar,
    body.et-public-studio .et-mgc-preview-col {
        width: 100%;
        max-width: 100%;
        flex: 1 1 auto;
        min-width: 0;
    }
}

/* ── Composed fields ──────────────────────────────────────────────────────
 * Some fields are an input inside a wrapper that carries the chrome — the
 * tool sidebar's search is a flex box with the border and an icon, and its
 * inner input is deliberately transparent and borderless. Styling the input
 * there does nothing; the wrapper is the control, so it takes the underline
 * and the inner field is left as it is. */
/* These wrappers are text fields — you type into them — so they take the full
   teal box, not the select's single rule. */
body.et-public-studio .et-tool-nav-search,
body.et-public-studio .et-guides-search {
    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-accent-primary) !important;
    overflow: visible;
    transition: background-color 0.14s ease, box-shadow 0.14s ease;
}

body.et-public-studio .et-tool-nav-search:focus-within,
body.et-public-studio .et-guides-search:focus-within {
    background: var(--et-bg-hover) !important;
    box-shadow: inset 0 0 0 2px var(--et-accent-primary) !important;
}

/* The newsletter form is a layout wrapper around its own input, not a field —
   giving it a box would draw a second one around the input's. */
body.et-public-studio .guide-newsletter-form {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* The inner field must not draw a second surface on top of the wrapper's. */
body.et-public-studio .et-tool-nav-search .et-form-control,
body.et-public-studio .et-tool-nav-search input,
body.et-public-studio .et-guides-search input {
    background: transparent !important;
    box-shadow: none !important;
    min-height: 2.25rem;
}

body.et-public-studio .et-tool-nav-search__icon {
    color: var(--et-text-muted);
}