/* =====================================================================
   Accountant Superior Lineup — product landing page. Static page served
   from /accountant/ (canonical /licenses/Accountant). Built on the Dental Books
   landing (public/dental-books/styles.css, the model for every SkyRock
   landing): the SkyRock White system over a FIXED Webb ground, frosted
   panels floating on it, brushed-black top bar, steel-navy + gold, soft
   shadows. The ground is Centaurus A — the Lineup app's own factory
   default (front/app/appearance.js DEFAULT_BG), the same file the hub and
   Logbooks ship as theirs — so the page opens on the sky the product opens
   on. Not pickable; the visible credit rides .asl-sky-credit under the
   footer (owner rule: Webb imagery always carries its credit).
     Centaurus A (Webb)  NASA, ESA, CSA, STScI
   Self-contained tokens (mirror the Lineup client's front/styles/tokens.css).
   `asl-` namespace.

   THE WORKSPACE DEMO (.asl-ws-*, .asl-mod, .asl-pal) is drawn to the
   Lineup's own recipe (front/styles/workspace.css, which is Logbooks'
   blueprint workspace): the dotted paper at 22px, the 14.5rem module card
   with its 12px radius and kind hairline, gold ONLY on the selected card
   (a border + tint, never an outline ring — owner rule), the right-edge
   drawer with a vertical tab and no gold on it, the active tab as a fill.
   INSIDE AN APP (.asl-in*, 2026-09-19): the operating view a double-click
   opens draws the module's APP as its own screen — Consolidator's toolbar
   and two panes (front/styles/board.css), Letterhead's three steps and
   Opciones (front/styles/letterhead.css) — with its menu items as buttons
   that read what they do. Gold marks the item being read, as a border.
   ===================================================================== */

:root {
    /* Surfaces */
    --bg: #ebebeb; --surface: #ffffff; --surface-2: #f7f7f7; --surface-3: #ebebeb;
    --line: #e4e4e4; --line-strong: #d2d2d2;
    /* Frosted panel — cool glass that lets the cosmos faintly tint it. */
    --panel: linear-gradient(158deg, rgba(249, 249, 249, 0.90), rgba(234, 234, 234, 0.86));
    --panel-line: rgba(255, 255, 255, 0.45); --panel-blur: blur(16px) saturate(1.15);
    --panel-sheen: inset 0 1px 0 rgba(255, 255, 255, 0.55);
    /* Ink — the ladder Dental Books measured (2026-08-20): --subtle 6.49:1, --gold-ink 5.70:1
       on these panels. Re-measure before changing either. */
    --text: #2a2f3a; --muted: #5b6473; --subtle: #545a63; --on-accent: #ffffff;
    /* On the starfield (light text directly on the cosmos) */
    --on-dark: #FFF6F6; --on-dark-muted: rgba(255, 255, 255, 0.74); --on-dark-faint: rgba(255, 255, 255, 0.55);
    --gold-light: #d9c08a;
    /* Brand: steel-navy + gold signature */
    --accent: #3C486B; --accent-hover: #2e3a56; --accent-press: #283350;
    --accent-soft: #eef1f7; --accent-ring: rgba(60, 72, 107, 0.22);
    --gold: #c2a35a; --gold-soft: rgba(194, 163, 90, 0.40); --gold-ink: #7a5e17;
    --steel-grad: linear-gradient(-145deg, #2e3a56, #3C486B, #283350, #46557e, #2e3a56);
    --silver-grad: linear-gradient(-145deg, #f4f4f4, #e0e0e0, #fcfcfc, #d8d8d8, #eeeeee);
    /* Semantic */
    --success: #2e9e6b; --success-soft: rgba(46, 158, 107, 0.14); --success-ink: #1f6f4b;
    --danger: #d9534f; --danger-soft: rgba(217, 83, 79, 0.14); --danger-ink: #a33531;
    /* Type */
    --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    /* Spacing */
    --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
    /* Radii */
    --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px;
    /* Elevation */
    --sh-sm: 0 1px 2px rgba(8, 12, 24, 0.18), 0 2px 6px rgba(8, 12, 24, 0.16);
    --sh-md: 0 1px 3px rgba(8, 12, 24, 0.22), 0 8px 22px rgba(8, 12, 24, 0.28);
    --sh-lg: 0 14px 38px rgba(5, 8, 18, 0.46);
    /* Motion */
    --ease: cubic-bezier(0.2, 0.6, 0.2, 1); --dur: 160ms;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    min-height: 100vh;
    color: var(--text);
    font-family: var(--font);
    font-size: 0.9375rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    background-color: #0b0e1a;
    background-image:
        linear-gradient(180deg, rgba(8, 11, 22, 0.58), rgba(8, 11, 22, 0.72)),
        url('/components/files/images/centaurus-a.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
a { color: var(--accent); text-decoration: none; }
:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--gold-soft); border-radius: var(--r-sm); }

main { max-width: 72rem; margin: 0 auto; padding: 0 var(--s-5); }

/* ---------------- Top bar (brushed black metal — SkyRock dark vibe) ---------------- */
.asl-topbar {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
    padding: var(--s-3) var(--s-5);
    background: linear-gradient(-145deg, #1c1c1c, #2a2a2a, #141414, #333333, #1c1c1c);
    border-bottom: 1px solid rgba(255, 255, 255, 0.10); box-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
    position: sticky; top: 0; z-index: 20;
}
.asl-brand { display: flex; align-items: center; gap: var(--s-3); text-decoration: none; color: var(--on-dark); }
.asl-brand-logo {
    width: 1.9rem; height: 1.9rem; flex: 0 0 auto; display: inline-block;
    background-image: url('/components/files/icons/OfficialSkyRockWhiteLogo.svg');
    background-size: contain; background-repeat: no-repeat; background-position: center;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}
.asl-brand-text { display: flex; flex-direction: column; line-height: 1.05; font-weight: 700; letter-spacing: 0.04em; color: var(--on-dark); }
.asl-brand-sub { color: rgba(255, 255, 255, 0.5); font-size: 0.6rem; letter-spacing: 0.18em; font-weight: 400; text-transform: uppercase; margin-top: 2px; white-space: nowrap; }

.asl-nav { display: flex; align-items: center; gap: var(--s-1); flex-wrap: wrap; justify-content: flex-end; }
.asl-nav a {
    color: rgba(255, 255, 255, 0.72); text-decoration: none; font-size: 0.9rem; font-weight: 600;
    padding: 0.5rem 0.85rem; border-radius: var(--r-md); border: 1px solid transparent;
    transition: color var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.asl-nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.asl-nav a.asl-nav-cta { border-color: var(--gold-light); color: var(--on-dark); }
.asl-nav a.asl-nav-cta:hover { background: rgba(194, 163, 90, 0.16); color: #fff; }
.asl-lang { display: inline-flex; align-items: center; margin-right: var(--s-2); }

/* ---------------- Buttons (light, for dark/cosmic surfaces) ---------------- */
.asl-btn {
    display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
    border: 1px solid transparent; border-radius: var(--r-md);
    padding: 0.7rem 1.4rem; font-weight: 600; font-size: 0.95rem; cursor: pointer; color: var(--accent);
    font-family: inherit;
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.asl-btn:active { transform: translateY(1px); }
.asl-btn--silver { background: var(--silver-grad); color: var(--accent); box-shadow: var(--sh-md); }
.asl-btn--silver:hover { filter: brightness(1.04); }
.asl-btn--ghost { background: rgba(255, 255, 255, 0.08); color: var(--on-dark); border-color: rgba(255, 255, 255, 0.42); }
.asl-btn--ghost:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.62); color: #fff; }
.asl-btn--quiet { background: var(--surface); color: var(--accent); border-color: var(--line-strong); box-shadow: var(--sh-sm); }
.asl-btn--quiet:hover { background: var(--surface-2); border-color: var(--accent); }

/* ---------------- Hero (open on the starfield, light text) ---------------- */
.asl-hero {
    text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--s-4);
    padding: clamp(2.75rem, 8vw, 5.5rem) 0 clamp(2rem, 5vw, 3.25rem);
}
.asl-hero-badge {
    display: inline-flex; align-items: center; gap: var(--s-2); color: var(--gold-light);
    text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.7rem; font-weight: 700;
    padding: 0.42rem 0.9rem; border: 1px solid var(--gold-soft); border-radius: var(--r-pill);
    background: rgba(194, 163, 90, 0.12);
}
/* A three-word name: the first two on the top line in white, the last in gold. The size
   stops at 5.2rem where Dental Books goes to 6.5, because "Accountant Superior" is twice
   the width of "Dental" and would wrap mid-word on a laptop at the larger size. */
.asl-hero-title {
    margin: 0; font-weight: 800; letter-spacing: -0.02em; line-height: 1.0;
    font-size: clamp(2.4rem, 8.5vw, 5.2rem);
    display: flex; flex-direction: column; align-items: center; gap: 0.08em;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}
.asl-hero-title-1 { color: var(--on-dark); font-size: 0.62em; letter-spacing: 0.01em; font-weight: 700; }
.asl-hero-title-2 {
    background: linear-gradient(180deg, #f3e6c2 0%, #d9c08a 55%, #c2a35a 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #d9c08a;
}
.asl-hero-lead { margin: 0; color: var(--on-dark-muted); font-size: clamp(1.02rem, 2.3vw, 1.2rem); max-width: 46rem; line-height: 1.6; text-wrap: balance; }
.asl-hero-cta { display: flex; gap: var(--s-3); flex-wrap: wrap; justify-content: center; margin-top: var(--s-2); }
.asl-hero-cta--left { justify-content: flex-start; }

/* The one-licence line, where Dental Books shows its price. NO NUMBER lives here until the
   plan is seeded (scripts/accountantPageTest.js refuses a figure the catalog does not carry). */
.asl-hero-price { margin: var(--s-2) 0 0; display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; justify-content: center; }
.asl-hero-price-amt {
    font-size: clamp(1.7rem, 4.4vw, 2.6rem); font-weight: 800; letter-spacing: -0.02em;
    color: var(--on-dark); text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}
.asl-hero-price-per { font-size: 1rem; font-weight: 600; color: var(--gold-light); letter-spacing: 0.04em; }
.asl-hero-price-note { margin: 0; color: var(--on-dark-muted); font-size: 0.9rem; }

.asl-hero-quals {
    list-style: none; margin: var(--s-4) 0 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); justify-content: center;
}
.asl-qual { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--on-dark-muted); font-size: 0.86rem; }
.asl-qual::before { content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--gold-light); flex: 0 0 auto; }

/* ---------------- Section scaffolding (headers sit on the cosmos) ---------------- */
.asl-divider { width: 100%; max-width: 72rem; height: 1px; margin: 0 auto; background: rgba(255, 255, 255, 0.14); }
.asl-section { padding: clamp(2.5rem, 7vw, 4.5rem) 0; }
.asl-eyebrow { margin: 0 0 var(--s-2); color: var(--gold-light); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.72rem; font-weight: 700; }
.asl-h2 { margin: 0 0 var(--s-3); font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 800; letter-spacing: -0.015em; color: var(--on-dark); max-width: 32ch; text-wrap: balance; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.35); }
.asl-lead { margin: 0 0 var(--s-6); color: var(--on-dark-muted); font-size: clamp(1rem, 2.2vw, 1.1rem); max-width: 52rem; line-height: 1.6; }

/* ---------------- Card grids (frosted-white panels) ---------------- */
.asl-grid { display: grid; gap: var(--s-4); }
.asl-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); }
.asl-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); }

.asl-card {
    background: var(--panel); -webkit-backdrop-filter: var(--panel-blur); backdrop-filter: var(--panel-blur);
    border: 1px solid var(--panel-line); border-radius: var(--r-lg);
    padding: var(--s-5); box-shadow: var(--sh-md), var(--panel-sheen);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.asl-card:hover { transform: translateY(-3px); box-shadow: var(--sh-lg), var(--panel-sheen); }
.asl-card-ic {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.8rem; height: 2.8rem; border-radius: var(--r-md); margin-bottom: var(--s-3);
    border: 1px solid var(--line); background: var(--accent-soft); color: var(--accent);
}
.asl-card-ic svg { width: 22px; height: 22px; display: block; }
.asl-card-ic--gold { background: rgba(194, 163, 90, 0.16); color: var(--gold-ink); border-color: var(--gold-soft); }
.asl-card-t { margin: 0 0 var(--s-2); font-size: 1.1rem; font-weight: 700; color: var(--text); }
.asl-card-p { margin: 0; color: var(--muted); font-size: 0.94rem; line-height: 1.55; }

/* The two app cards: a product name, its tagline, and what it does as a ticked list. */
.asl-app { display: flex; flex-direction: column; gap: var(--s-2); }
.asl-app-head { display: flex; align-items: center; gap: var(--s-3); }
.asl-app-head .asl-card-ic { margin-bottom: 0; }
.asl-app-name { margin: 0; font-size: 1.35rem; font-weight: 800; color: var(--text); letter-spacing: -0.01em; }
.asl-app-tag { margin: 0; color: var(--muted); font-size: 0.94rem; }
.asl-app-list { margin: var(--s-3) 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--s-2); }
.asl-app-list li { position: relative; padding-left: 1.6rem; color: var(--text); font-size: 0.94rem; line-height: 1.5; }
.asl-app-list li::before {
    content: ""; position: absolute; left: 0.25rem; top: 0.42em;
    width: 0.42rem; height: 0.74rem; border: solid var(--success);
    border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.asl-app-foot { margin: var(--s-3) 0 0; color: var(--subtle); font-size: 0.82rem; line-height: 1.5; }

/* ---------------- Callout (frosted highlight) ---------------- */
.asl-callout {
    display: flex; gap: var(--s-4); align-items: flex-start; margin-top: var(--s-5);
    padding: var(--s-5); border: 1px solid var(--panel-line); border-left: 3px solid var(--accent);
    border-radius: var(--r-md); background: var(--panel); -webkit-backdrop-filter: var(--panel-blur); backdrop-filter: var(--panel-blur); box-shadow: var(--sh-md), var(--panel-sheen);
}
.asl-callout-ic { color: var(--accent); flex: 0 0 auto; line-height: 1; margin-top: 2px; }
.asl-callout-ic svg { width: 22px; height: 22px; display: block; }
.asl-callout-p { margin: 0; color: var(--muted); font-size: 0.98rem; line-height: 1.6; }
.asl-callout-p strong { color: var(--text); }

/* ---------------- Privacy assurance (gold-accented proof point) ---------------- */
.asl-privacy {
    display: flex; gap: var(--s-4); align-items: flex-start; margin: var(--s-5) 0;
    padding: var(--s-5); border: 1px solid var(--gold-soft); border-left: 3px solid var(--gold);
    border-radius: var(--r-md); background: var(--panel);
    -webkit-backdrop-filter: var(--panel-blur); backdrop-filter: var(--panel-blur);
    box-shadow: var(--sh-md), var(--panel-sheen);
}
.asl-privacy-ic {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 2.8rem; height: 2.8rem; border-radius: var(--r-md);
    border: 1px solid var(--gold-soft); background: rgba(194, 163, 90, 0.12); color: var(--gold-ink);
}
.asl-privacy-ic svg { width: 22px; height: 22px; display: block; }
.asl-privacy-t { margin: 0 0 var(--s-2); font-size: 1.1rem; font-weight: 700; color: var(--text); }
.asl-privacy-p { margin: 0; color: var(--muted); font-size: 0.96rem; line-height: 1.6; }
.asl-secret { margin: var(--s-5) auto 0; text-align: center; color: var(--on-dark-muted); font-size: 1rem; font-style: italic; max-width: 46rem; }
.asl-secret strong { color: var(--gold-light); font-style: normal; }
.asl-note { margin: var(--s-5) 0 0; max-width: 58rem; color: var(--on-dark-faint); font-size: 0.86rem; line-height: 1.6; }
.asl-note a { color: var(--on-dark-muted); text-decoration: underline; }

/* ---------------- Mid-page call to action ---------------- */
.asl-midcta {
    display: flex; align-items: center; justify-content: center; gap: var(--s-4);
    flex-wrap: wrap; text-align: center;
    margin-top: var(--s-6); padding: var(--s-5);
    border: 1px solid var(--panel-line); border-radius: var(--r-lg);
    background: var(--panel); -webkit-backdrop-filter: var(--panel-blur); backdrop-filter: var(--panel-blur);
    box-shadow: var(--sh-md), var(--panel-sheen);
}
.asl-midcta-p { margin: 0; color: var(--text); font-size: 1rem; font-weight: 600; max-width: 34rem; }

/* ---------------- Licence ---------------- */
.asl-price { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s-5); align-items: start; }
@media (max-width: 56rem) { .asl-price { grid-template-columns: 1fr; } }
.asl-price-card {
    background: var(--panel); -webkit-backdrop-filter: var(--panel-blur); backdrop-filter: var(--panel-blur);
    border: 1px solid var(--panel-line); border-top: 3px solid var(--gold);
    border-radius: var(--r-lg); padding: var(--s-6) var(--s-5);
    box-shadow: var(--sh-md), var(--panel-sheen);
    display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2);
}
.asl-price-name { margin: 0; color: var(--muted); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; }
.asl-price-fig { margin: 0; display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; }
.asl-price-amt { font-size: clamp(1.9rem, 4.6vw, 2.6rem); font-weight: 800; letter-spacing: -0.025em; color: var(--text); }
.asl-price-per { font-size: 0.98rem; font-weight: 700; color: var(--gold-ink); }
.asl-price-note { margin: 0; color: var(--muted); font-size: 0.88rem; }
.asl-price-list { margin: var(--s-3) 0 var(--s-4); padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--s-2); align-self: stretch; }
.asl-price-list li { position: relative; padding-left: 1.6rem; color: var(--text); font-size: 0.94rem; line-height: 1.5; }
.asl-price-list li::before {
    content: ""; position: absolute; left: 0.25rem; top: 0.42em;
    width: 0.42rem; height: 0.74rem; border: solid var(--success);
    border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.asl-price-side { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); padding-top: var(--s-2); }
.asl-price-side-t { margin: 0; color: var(--on-dark); font-size: 1.05rem; font-weight: 700; }
.asl-price-side-p { margin: 0; color: var(--on-dark-muted); font-size: 0.92rem; line-height: 1.6; }

/* ---------------- FAQ (open by default, no accordion) ---------------- */
.asl-faq { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); gap: var(--s-4) var(--s-6); }
.asl-faq-item { padding-left: var(--s-4); border-left: 2px solid var(--gold-soft); }
.asl-faq-q { margin: 0 0 var(--s-2); font-size: 1.02rem; font-weight: 700; color: var(--on-dark); line-height: 1.3; }
.asl-faq-a { margin: 0; color: var(--on-dark-muted); font-size: 0.94rem; line-height: 1.6; }

/* ---------------- Closing CTA panel (steel-navy band) ---------------- */
.asl-cta-panel {
    text-align: center; border: 1px solid var(--accent-press); border-radius: var(--r-lg);
    box-shadow: var(--sh-lg); background: var(--steel-grad); color: var(--on-accent);
    padding: clamp(2.2rem, 6vw, 3.75rem) clamp(1.5rem, 5vw, 3.5rem);
    margin: clamp(2rem, 6vw, 3.5rem) 0 clamp(2.5rem, 6vw, 3.25rem);
    display: flex; flex-direction: column; align-items: center; gap: var(--s-3);
}
.asl-cta-h { margin: 0; font-size: clamp(1.6rem, 4.2vw, 2.5rem); font-weight: 800; letter-spacing: -0.015em; color: #fff; max-width: 26ch; text-wrap: balance; }
.asl-cta-p { margin: var(--s-2) auto var(--s-3); max-width: 48rem; color: rgba(255, 255, 255, 0.82); font-size: clamp(1rem, 2.1vw, 1.1rem); line-height: 1.6; }
.asl-cta-tag { margin: var(--s-3) 0 0; color: rgba(255, 255, 255, 0.6); font-size: 0.84rem; letter-spacing: 0.06em; }

/* ---------------- Footer + the ground's credit ---------------- */
.asl-foot { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; justify-content: center; color: var(--on-dark-faint); font-size: 0.85rem; padding: var(--s-5) 0 var(--s-6); text-align: center; }
.asl-foot a { color: var(--on-dark-muted); text-decoration: none; }
.asl-foot a:hover { color: #fff; text-decoration: underline; }
.asl-foot-dot { color: rgba(255, 255, 255, 0.3); }
.asl-sky-credit { margin: 0; padding: 0 var(--s-5) var(--s-6); text-align: center; color: rgba(255, 255, 255, 0.42); font-size: 0.72rem; letter-spacing: 0.02em; }

/* Screen-reader-only: the live tally the demo announces as the visitor works. */
.asl-sr-only {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* =====================================================================
   THE PLAYABLE WORKSPACE — proof before features. A frosted board holding
   a window of the Lineup: the tab row (Inicio, one tab per workspace, +),
   the dotted paper with module cards you can drag, the right-edge drawer
   that adds one, and the operating view a double-click opens.
   ===================================================================== */
.asl-ws-wrap { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: var(--s-6); align-items: start; }
.asl-ws-board, .asl-ws-points { min-width: 0; }
@media (max-width: 60rem) { .asl-ws-wrap { grid-template-columns: 1fr; } }

.asl-ws-board {
    margin: 0; padding: var(--s-5);
    background: var(--panel); -webkit-backdrop-filter: var(--panel-blur); backdrop-filter: var(--panel-blur);
    border: 1px solid var(--panel-line); border-radius: var(--r-lg); box-shadow: var(--sh-md), var(--panel-sheen);
}
.asl-ws-cap { color: var(--muted); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; margin-bottom: var(--s-3); }
.asl-demo-hint { margin: 0 0 var(--s-3); color: var(--muted); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.asl-ws-fallback { color: var(--subtle); font-size: 0.9rem; padding: var(--s-6) 0; margin: 0; }

/* The window: a white sheet with the app's top bar (the tab row) and the paper under it. */
.asl-ws { border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); box-shadow: var(--sh-sm); overflow: hidden; position: relative; }
.asl-ws-top {
    display: flex; align-items: center; gap: var(--s-2); padding: 6px 8px;
    border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--surface), var(--surface-2));
    overflow-x: auto; scrollbar-width: none;
}
.asl-ws-top::-webkit-scrollbar { display: none; }
.asl-ws-mark { width: 1.1rem; height: 1.1rem; flex: 0 0 auto; margin: 0 4px 0 2px; background-image: url('/components/files/icons/OfficialSkyRockBlackLogo.svg'); background-size: contain; background-repeat: no-repeat; background-position: center; opacity: 0.85; }
.asl-ws-tabs { display: flex; align-items: center; gap: 4px; flex: 1 1 auto; min-width: 0; }
/* The active tab is a FILL and an ink, the app's own .nav-item.is-active recipe — never a ring. */
.asl-ws-tab {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid transparent; border-radius: var(--r-sm);
    background: transparent; color: var(--muted); font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; white-space: nowrap;
    max-width: 11rem; overflow: hidden; text-overflow: ellipsis;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.asl-ws-tab:hover { background: var(--surface-3); color: var(--text); }
.asl-ws-tab.is-active { background: var(--accent-soft); color: var(--accent); }
.asl-ws-tab:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--gold-soft); }
.asl-ws-tab--home svg { width: 14px; height: 14px; }
.asl-ws-add {
    display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; flex: 0 0 auto;
    border: 1px dashed var(--line-strong); border-radius: var(--r-sm); background: transparent; color: var(--subtle); font: inherit; font-size: 1rem; line-height: 1; cursor: pointer;
}
.asl-ws-add:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.asl-ws-add:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--gold-soft); }
.asl-ws-add[disabled] { opacity: 0.35; cursor: default; }
.asl-ws-add[disabled]:hover { color: var(--subtle); border-color: var(--line-strong); background: transparent; }

/* The paper: the blueprint plane, dotted at 22px, crosshair at rest — the Lineup's .ws-view. */
.asl-ws-view {
    position: relative; overflow: hidden; height: clamp(19rem, 46vw, 24rem);
    background-color: var(--surface-3);
    background-image:
        radial-gradient(circle at 1px 1px, rgba(88, 88, 88, 0.20) 1px, transparent 0),
        linear-gradient(158deg, rgba(255, 255, 255, 0.96), rgba(236, 236, 236, 0.94));
    background-size: 22px 22px, auto;
    cursor: crosshair; touch-action: none; -webkit-tap-highlight-color: transparent;
}
.asl-ws-hint { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem; pointer-events: none; text-align: center; padding: var(--s-5); }
.asl-ws-hint[hidden] { display: none; }
.asl-ws-hint__t { margin: 0; font-size: 1rem; font-weight: 700; color: var(--muted); }
.asl-ws-hint__m { margin: 0; font-size: 0.78rem; color: var(--subtle); max-width: 22rem; line-height: 1.5; }

/* Inicio, drawn as the catalog: what an accountant sees on the first tab. */
.asl-ws-home { position: absolute; inset: 0; padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); overflow: auto; cursor: default; }
.asl-ws-home[hidden] { display: none; }
.asl-ws-home__t { margin: 0; font-size: 0.95rem; font-weight: 700; color: var(--text); }
.asl-ws-home__m { margin: 0; font-size: 0.78rem; color: var(--muted); }
.asl-ws-home__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); gap: var(--s-2); }
.asl-ws-home__app {
    display: flex; align-items: center; gap: var(--s-2); padding: 8px 10px; text-align: left;
    border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); color: var(--text); font: inherit; cursor: pointer;
    box-shadow: var(--sh-sm);
}
.asl-ws-home__app:hover { border-color: var(--accent); background: var(--surface-2); }
.asl-ws-home__app:focus-visible { outline: none; box-shadow: var(--sh-sm), 0 0 0 3px var(--gold-soft); }
.asl-ws-home__name { font-size: 0.82rem; font-weight: 700; }
.asl-ws-home__tag { font-size: 0.68rem; color: var(--subtle); line-height: 1.3; }
.asl-ws-home__spaces { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.asl-ws-home__space {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; font: inherit; font-size: 0.76rem; font-weight: 600; cursor: pointer;
    border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); color: var(--muted);
}
.asl-ws-home__space:hover { color: var(--accent); border-color: var(--accent); }
.asl-ws-home__space:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--gold-soft); }
.asl-ws-home__count { color: var(--subtle); font-weight: 400; }

/* The module: the Lineup's card, 14.5rem, 12px radius, a kind hairline along the head. */
.asl-mod {
    position: absolute; width: 14.5rem; cursor: grab;
    background: var(--surface); color: var(--text);
    border: 1px solid var(--line-strong); border-radius: 12px;
    box-shadow: 0 1px 2px rgba(8, 12, 24, 0.10), 0 10px 24px rgba(8, 12, 24, 0.14);
    display: flex; flex-direction: column; user-select: none; -webkit-user-select: none;
    transition: box-shadow 0.16s ease, border-color 0.16s ease;
}
.asl-mod:hover { box-shadow: 0 2px 4px rgba(8, 12, 24, 0.12), 0 16px 34px rgba(8, 12, 24, 0.20); }
.asl-mod.is-dragging { box-shadow: 0 20px 44px rgba(8, 12, 24, 0.32); z-index: 30; cursor: grabbing; transition: none; }
/* SELECTED is a gold border + tint — never an outline ring (owner rule). */
.asl-mod.is-selected { border-color: var(--gold); background: var(--surface-2); }
.asl-mod:focus { outline: none; }
.asl-mod:focus-visible { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.asl-mod__head {
    display: flex; align-items: center; gap: 0.45rem; padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--line); border-radius: 11px 11px 0 0;
    background: linear-gradient(180deg, var(--surface), var(--surface-2)); position: relative;
}
.asl-mod__head::before { content: ""; position: absolute; left: 10px; right: 10px; top: 0; height: 2px; border-radius: 0 0 2px 2px; }
.asl-mod--consolidator .asl-mod__head::before { background: linear-gradient(90deg, var(--accent), transparent); }
.asl-mod--letterhead .asl-mod__head::before { background: linear-gradient(90deg, var(--gold), transparent); }
.asl-mod__kind {
    width: 1.4rem; height: 1.4rem; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 7px; background: var(--accent-soft); color: var(--accent); border: 1px solid var(--line-strong);
}
.asl-mod__kind svg { width: 13px; height: 13px; display: block; }
.asl-mod--letterhead .asl-mod__kind { background: rgba(194, 163, 90, 0.16); color: var(--gold-ink); border-color: var(--gold-soft); }
.asl-mod__title { flex: 1 1 auto; min-width: 0; font-size: 0.78rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asl-mod__app { flex: 0 0 auto; font-size: 0.6rem; color: var(--subtle); text-transform: uppercase; letter-spacing: 0.08em; }
.asl-mod__body { display: flex; flex-direction: column; gap: 3px; padding: 0.5rem 0.6rem 0.55rem; }
.asl-mod__badges { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 2px; min-height: 0; }
.asl-badge { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: var(--r-pill); font-size: 0.64rem; font-weight: 700; border: 1px solid transparent; }
.asl-badge--success { background: var(--success-soft); color: var(--success-ink); }
.asl-badge--danger { background: var(--danger-soft); color: var(--danger-ink); }
.asl-badge--neutral { background: var(--surface-3); color: var(--muted); border-color: var(--line); }
.asl-mod__line { margin: 0; font-size: 0.76rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asl-mod__line--dim { color: var(--muted); }
/* The door, on the card: always visible — opening a session is what the card is for. */
.asl-mod__open {
    margin-top: 6px; align-self: stretch; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 4px 8px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface);
    color: var(--accent); font: inherit; font-size: 0.74rem; font-weight: 700; cursor: pointer;
}
.asl-mod__open svg, .asl-ov__back svg { width: 13px; height: 13px; display: block; flex: 0 0 auto; }
.asl-mod__open:hover { background: var(--accent-soft); border-color: var(--accent); }
.asl-mod__open:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--gold-soft); }
.asl-mod.is-selected .asl-mod__open { border-color: var(--gold-soft); }

/* The drawer: a clipping overlay over the paper; the tab and the panel are separate
   absolutes that travel together; NO GOLD on the tab. */
.asl-pal { position: absolute; inset: 0; pointer-events: none; z-index: 40; overflow: hidden; }
.asl-pal__tab {
    position: absolute; right: 0; top: 1rem; display: flex; align-items: center;
    padding: 0.7rem 0.34rem; cursor: pointer; pointer-events: auto;
    background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    color: var(--accent); border: 1px solid var(--line-strong); border-right: none; border-radius: 9px 0 0 9px;
    box-shadow: -2px 2px 10px rgba(8, 12, 24, 0.10); font: inherit;
    transition: transform 0.24s var(--ease), background 0.16s ease;
}
.asl-pal__tab:hover { background: #ffffff; }
.asl-pal__tab:focus-visible { outline: none; box-shadow: -2px 2px 10px rgba(8, 12, 24, 0.10), 0 0 0 3px var(--gold-soft); }
.asl-pal__tablabel { writing-mode: vertical-rl; text-orientation: mixed; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.asl-ws.is-open .asl-pal__tab { transform: translateX(calc(-13.5rem - 0.6rem)); }
.asl-pal__panel {
    position: absolute; right: 0.6rem; top: 0.6rem; bottom: 0.6rem; width: 13.5rem; max-width: calc(100% - 1.2rem);
    display: flex; flex-direction: column; gap: var(--s-2); pointer-events: auto; padding: var(--s-3);
    background: rgba(255, 255, 255, 0.93); -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1);
    color: var(--text); border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 13px;
    box-shadow: 0 1px 2px rgba(8, 12, 24, 0.10), 0 14px 34px rgba(8, 12, 24, 0.16);
    opacity: 0; transform: translateX(calc(13.5rem + 1.2rem));
    transition: transform 0.24s var(--ease), opacity 0.18s ease;
}
.asl-ws.is-open .asl-pal__panel { opacity: 1; transform: translateX(0); }
.asl-pal__head { display: flex; align-items: center; gap: var(--s-2); }
.asl-pal__title { margin: 0; font-size: 0.86rem; font-weight: 700; flex: 1 1 auto; }
.asl-pal__close { width: 1.6rem; height: 1.6rem; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: var(--r-sm); background: transparent; color: var(--subtle); cursor: pointer; font: inherit; font-size: 1rem; line-height: 1; }
.asl-pal__close:hover { background: var(--surface-2); color: var(--text); }
.asl-pal__close:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--gold-soft); }
.asl-pal__hint { margin: 0; font-size: 0.7rem; color: var(--subtle); line-height: 1.4; }
.asl-pal__body { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.asl-pal__item {
    display: flex; align-items: center; gap: var(--s-2); width: 100%; padding: 8px;
    border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface);
    text-align: left; font: inherit; color: var(--text); cursor: pointer;
    /* The item is a drag handle too (2026-09-19): `pan-y` keeps the list scrollable by touch
       while a pull towards the paper starts the drag. */
    touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.asl-pal__item:hover { border-color: var(--accent); background: var(--surface-2); }
.asl-pal__item:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--gold-soft); }
.asl-pal__item[disabled] { opacity: 0.45; cursor: default; }
.asl-pal__item.is-dragging { border-color: var(--gold); background: var(--surface-2); }
/* The GHOST a pulled item becomes: the card, held by its head, gold-edged because it IS the
   thing being placed; dimmed where a release would create nothing. */
.asl-pal__ghost {
    position: absolute; left: 0; top: 0; z-index: 60; pointer-events: none;
    display: flex; align-items: center; gap: 0.45rem; width: 14.5rem; padding: 0.5rem 0.6rem;
    border: 1px solid var(--gold); border-radius: 12px; background: var(--surface); color: var(--text);
    box-shadow: 0 20px 44px rgba(8, 12, 24, 0.32); font-size: 0.78rem; font-weight: 700;
}
.asl-pal__ghost.is-off { opacity: 0.55; border-color: var(--line-strong); }
.asl-pal__ghost-hint { margin-left: auto; font-size: 0.6rem; font-weight: 400; color: var(--subtle); white-space: nowrap; }
.asl-ws-view.is-dropping { cursor: copy; }
.asl-pal__icon { display: inline-flex; color: var(--accent); flex: 0 0 auto; }
.asl-pal__icon svg { width: 16px; height: 16px; display: block; }
.asl-pal__text { display: flex; flex-direction: column; min-width: 0; }
.asl-pal__name { font-size: 0.78rem; font-weight: 700; }
.asl-pal__sub { font-size: 0.64rem; color: var(--subtle); line-height: 1.3; }

/* The operating view a double-click opens: the breadcrumb bar above it is the way back. */
.asl-ov { position: absolute; inset: 0; z-index: 50; display: flex; flex-direction: column; background: var(--surface-3); cursor: default; }
.asl-ov[hidden] { display: none; }
.asl-ov__bar { display: flex; align-items: center; gap: var(--s-2); padding: 6px 10px; border-bottom: 1px solid var(--line); background: var(--surface); font-size: 0.76rem; color: var(--muted); }
.asl-ov__back { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--accent); font: inherit; font-size: 0.74rem; font-weight: 700; cursor: pointer; }
.asl-ov__back:hover { background: var(--accent-soft); border-color: var(--accent); }
.asl-ov__back:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--gold-soft); }
.asl-ov__crumb { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asl-ov__crumb b { color: var(--text); }
.asl-ov__sheet { flex: 1 1 auto; margin: var(--s-3); padding: var(--s-4); border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--sh-sm); display: flex; flex-direction: column; gap: var(--s-2); overflow: auto; }
.asl-ov__t { margin: 0; font-size: 1rem; font-weight: 800; color: var(--text); display: flex; align-items: center; gap: var(--s-2); }
.asl-ov__t .asl-mod__kind { width: 1.6rem; height: 1.6rem; }
.asl-ov__l { margin: 0; font-size: 0.8rem; color: var(--muted); }
.asl-ov__p { margin: var(--s-2) 0 0; font-size: 0.8rem; color: var(--text); line-height: 1.5; max-width: 34rem; }
.asl-ov__rows { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: var(--s-2); }
.asl-ov__row { padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); font-size: 0.74rem; display: flex; justify-content: space-between; gap: 6px; }
.asl-ov__row b { color: var(--accent); font-variant-numeric: tabular-nums; }
.asl-ov__row.is-ok b { color: var(--success-ink); }
.asl-ov__row.is-open b { color: var(--danger-ink); }

/* stat tiles under the window */
.asl-ws-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); margin-top: var(--s-4); }
.asl-stat { text-align: center; padding: var(--s-3) var(--s-2); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--sh-sm); }
.asl-stat-v { display: block; font-size: 1.5rem; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.asl-stat-l { display: block; font-size: 0.7rem; color: var(--muted); margin-top: 2px; }
.asl-stat--gold { background: linear-gradient(160deg, var(--gold-soft), var(--surface)); border-color: var(--gold); }
.asl-stat--gold .asl-stat-v { color: var(--gold-ink); }

.asl-demo-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.asl-demo-kbd { margin: 0; color: var(--subtle); font-size: 0.78rem; max-width: 30rem; }

/* points beside the window (on the cosmos) */
.asl-ws-points { display: flex; flex-direction: column; gap: var(--s-4); }
.asl-point { padding-left: var(--s-4); border-left: 2px solid var(--gold-light); }
.asl-point-t { margin: 0 0 var(--s-1); font-size: 1.05rem; font-weight: 700; color: var(--on-dark); }
.asl-point-p { margin: 0; color: var(--on-dark-muted); font-size: 0.93rem; line-height: 1.55; }

/* ---------------- Inside an app: the operating view, drawn as the app's own screen ---------------- */
/* The view hook (workspace.js registerView) fills .asl-ov__sheet with this. Every menu item is a
   real button: pressing it (or tabbing to it) reads what it does into .asl-in__what. The item
   being read carries a gold BORDER — the selected-card rule, never an outline ring. */
.asl-in { display: flex; flex-direction: column; gap: var(--s-3); }
.asl-in__about { margin: 0; font-size: 0.8rem; color: var(--text); line-height: 1.5; max-width: 42rem; }
.asl-in__menus { margin: 0; font-size: 0.7rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.asl-in__bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px;
    border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2);
}
.asl-in__bar-name { font-size: 0.72rem; color: var(--subtle); font-weight: 700; padding: 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 12rem; }
.asl-in__spacer { flex: 1 1 auto; }
.asl-in__sub { font-size: 0.74rem; color: var(--muted); padding: 0 4px; }
.asl-in__menu {
    display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
    background: var(--surface); color: var(--accent); font: inherit; font-size: 0.72rem; font-weight: 700; cursor: pointer; white-space: nowrap;
    transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.asl-in__menu--primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.asl-in__menu--ghost { border-color: transparent; background: transparent; color: var(--muted); }
.asl-in__menu:hover { border-color: var(--accent); }
.asl-in__menu--primary:hover { background: var(--accent-hover); }
.asl-in__menu[aria-pressed="true"] { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold-soft); }
.asl-in__menu:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--gold-soft); }
.asl-in__what {
    margin: 0; padding: 8px 10px; border-left: 3px solid var(--gold); border-radius: 0 var(--r-sm) var(--r-sm) 0;
    background: var(--surface-2); font-size: 0.78rem; color: var(--text); line-height: 1.5; min-height: 2.6rem;
}
.asl-in__what b { color: var(--accent); }
/* Consolidator: the two panes, one over the other, the divider between them (board.css). */
.asl-in__panes { display: flex; flex-direction: column; gap: 6px; }
.asl-in__pane { border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); overflow: hidden; }
.asl-in__pane-head {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 5px 8px;
    border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--surface), var(--surface-2)); font-size: 0.72rem;
}
.asl-in__pane-t { margin: 0; font-size: 0.8rem; font-weight: 800; color: var(--text); }
.asl-in__counts { color: var(--muted); }
.asl-in__counts .is-ok { color: var(--success-ink); font-weight: 700; }
.asl-in__counts .is-bad { color: var(--danger-ink); font-weight: 700; }
.asl-in__tabs { display: flex; gap: 4px; padding: 6px 8px 0; }
.asl-in__tab { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--r-pill); font-size: 0.66rem; font-weight: 700; color: var(--muted); border: 1px solid var(--line); white-space: nowrap; }
.asl-in__tab.is-on { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.asl-in__chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 8px 0; }
.asl-in__chips:last-of-type { padding-bottom: 8px; }
.asl-in__chip {
    display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border: 1px solid var(--line-strong); border-radius: var(--r-pill);
    background: var(--surface); font-size: 0.72rem; color: var(--text); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.asl-in__chip small { color: var(--subtle); font-size: 0.64rem; }
.asl-in__chip.is-ok { border-color: var(--success); background: var(--success-soft); color: var(--success-ink); }
.asl-in__chip.is-ok small { color: var(--success-ink); }
.asl-in__chip.is-open { border-color: var(--danger); background: var(--danger-soft); color: var(--danger-ink); }
.asl-in__chip.is-open small { color: var(--danger-ink); }
.asl-in__towers { border-top: 1px dashed var(--line); margin-top: 8px; padding-top: 8px; }
.asl-in__pane-p { margin: 0; padding: 8px; font-size: 0.72rem; color: var(--muted); line-height: 1.45; }
.asl-in__divider { height: 4px; width: 38%; margin: 0 auto; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--line-strong) 0 5px, transparent 5px 9px); }
/* Letterhead: the three steps, then Opciones (letterhead.css). */
.asl-in__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.asl-in__step { display: flex; gap: 8px; padding: 8px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); min-width: 0; }
.asl-in__step-n { flex: 0 0 auto; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 0.72rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.asl-in__step-body { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.asl-in__step-t { margin: 0; font-size: 0.8rem; font-weight: 800; color: var(--text); }
.asl-in__step-d { margin: 0; font-size: 0.7rem; color: var(--muted); line-height: 1.4; }
.asl-in__step-file { font-size: 0.68rem; color: var(--subtle); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asl-in__opts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.asl-in__opt { display: flex; gap: 8px; align-items: flex-start; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); }
.asl-in__switch { flex: 0 0 auto; width: 1.6rem; height: 0.9rem; border-radius: var(--r-pill); background: var(--line-strong); position: relative; margin-top: 2px; }
.asl-in__switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 0.65rem; height: 0.65rem; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 2px rgba(8, 12, 24, 0.3); }
.asl-in__switch.is-on { background: var(--accent); }
.asl-in__switch.is-on::after { left: auto; right: 2px; }
.asl-in__opt-t { margin: 0; font-size: 0.74rem; font-weight: 700; color: var(--text); }
.asl-in__opt-d { margin: 0; font-size: 0.68rem; color: var(--muted); line-height: 1.4; }
.asl-in__real { margin: 0; font-size: 0.72rem; color: var(--subtle); font-style: italic; }

/* ---------------- Responsive ---------------- */
@media (max-width: 40rem) {
    .asl-ws-board { padding: var(--s-4) var(--s-3); }
    .asl-mod, .asl-pal__ghost { width: 12rem; }
    .asl-pal__panel { width: 12rem; transform: translateX(calc(12rem + 1.2rem)); }
    .asl-ws.is-open .asl-pal__tab { transform: translateX(calc(-12rem - 0.6rem)); }
    .asl-ov__rows { grid-template-columns: 1fr; }
    .asl-in__steps, .asl-in__opts { grid-template-columns: 1fr; }
    .asl-in__bar-name { display: none; }
    .asl-ws-stats { grid-template-columns: 1fr 1fr 1fr; gap: var(--s-2); }
    .asl-stat-v { font-size: 1.2rem; }
}
@media (max-width: 38rem) {
    .asl-topbar { flex-direction: column; align-items: stretch; gap: var(--s-2); padding: var(--s-3) var(--s-4); }
    .asl-brand { justify-content: center; }
    .asl-nav { justify-content: center; gap: 2px 4px; }
    .asl-nav a { padding: 0.4rem 0.6rem; font-size: 0.82rem; }
    .asl-lang { margin-right: 0; }
    .asl-brand-text { font-size: 0.9rem; }
    .asl-demo-bar { flex-direction: column; align-items: stretch; }
    .asl-demo-bar .asl-btn { width: 100%; }
    .asl-midcta .asl-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .asl-card, .asl-btn, .asl-pal__tab, .asl-pal__panel, .asl-mod, .asl-in__menu { transition: none; }
    .asl-card:hover { transform: none; }
}