/* THE AI COUNCIL - the public page's own stylesheet (D291).
   ===========================================================================
   OWNER RULING: *"I want to make the Council a stand alone product that can be
   accessed at caligoarts.com/AI_Council... Use what we already built as the
   backend and foundation for the frontend but make this a full marketing and
   promotions page for the AI Council... Make the page flow and be user friendly
   so they can just start chatting with the council."*

   IT DOES NOT LOAD aios.css, AND THAT IS THE SAME MEASUREMENT receipts/ AND
   memories/ WERE BUILT ON. aios.css is 105KB of a three-column dashboard, four
   layout modes, a weather scene and a note editor -- none of which exists here.
   What IS shared is the PALETTE, copied by value, so the four products look
   like family without tracking each other's every change.

   THE ACCENT IS STATED, NOT THEMED. The other three products let a signed-in
   account pick a colour (D256/D260) and write it over --*-accent from a
   preference. This page is read by strangers with no account, so there is
   nothing to read a preference from -- and loading theme.js to discover that
   would be a request that can only ever answer "no". One accent, in the
   channels form as well as the hex, for the reason D260 records: a hex custom
   property cannot carry an alpha, so every translucent fill here reads
   --ac-accent-rgb.

   NO WEBFONT AND NO EXTERNAL REQUEST OF ANY KIND, so this directory's CSP needs
   nothing but 'self'.

   ONE BREAKPOINT, AT 820px. Above it the marketing grids run two or three
   across; below it everything is one column. A second threshold would be a
   number nobody measured.
   =========================================================================== */

:root {
    --ac-bg: #050505;
    --ac-surface: #0f0f0f;
    --ac-surface-2: #151515;
    --ac-text: #ffffff;
    --ac-muted: #a8a8a8;
    --ac-accent: #2ee6d6;
    --ac-accent-rgb: 46, 230, 214;
    --ac-accent-deep: #1a9fa1;
    --ac-border: rgba(var(--ac-accent-rgb), 0.25);
    --ac-border-soft: rgba(255, 255, 255, 0.09);
    --ac-warn: #ffc65c;
    --ac-danger: #ff4b5c;
    --ac-ok: #4fdc8b;
    --ac-radius: 12px;
    --ac-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
    /* EVERY SEAT'S OWN COLOUR ARRIVES FROM THE SERVER and is written to
       --seat on the chip (D246). This is only the fallback for a member the
       server sent with no accent -- a stylesheet holding Anthropic's orange
       beside a table with Claude's name in it is two answers to one question. */
    --seat: var(--ac-accent);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.ac-body {
    margin: 0;
    background: var(--ac-bg);
    color: var(--ac-text);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    /* THE PAGE SCROLLS AND THE CHAMBER DOES NOT TRAP IT. This is a marketing
       page with a conversation inside it, not an app -- somebody reading the
       pitch while the table thinks is the flow being designed for, and a
       full-height app shell would make that impossible. */
    min-height: 100vh;
}

.ac-skip {
    position: absolute; left: -9999px; top: 0;
    background: var(--ac-accent); color: #05070a;
    padding: 10px 16px; z-index: 100; font-weight: bold;
}
.ac-skip:focus { left: 0; }

a { color: var(--ac-accent); }

/* --- CHROME ------------------------------------------------------------- */
.ac-topbar {
    position: sticky; top: 0; z-index: 40;
    background: rgba(5, 5, 5, 0.94);
    border-bottom: 1px solid var(--ac-border-soft);
    backdrop-filter: blur(6px);
}
.ac-topbar-inner {
    max-width: 1100px; margin: 0 auto;
    padding: 10px 16px;
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.ac-brand {
    display: inline-flex; align-items: center; gap: 10px;
    text-decoration: none; color: inherit;
    /* IT TAKES THE ROOM THE NAV DOES NOT, so the nav sits hard right at every
       width without a margin nobody can explain. `min-width: 0` is what lets
       the name ellipsise rather than pushing the nav off the bar -- the flex
       trap this family of stylesheets has been bitten by seven times. */
    flex: 1 1 auto; min-width: 0;
}
.ac-mark {
    flex: 0 0 auto;
    width: 38px; height: 38px; border-radius: 10px;
    display: inline-flex; flex-direction: column;
    align-items: center; justify-content: center;
    background: linear-gradient(145deg, var(--ac-accent), var(--ac-accent-deep));
    color: #05070a; font-weight: bold; line-height: 1;
    font-family: 'Consolas', monospace;
}
.ac-mark span:first-child { font-size: 8px; letter-spacing: 0.04em; }
.ac-mark span:last-child { font-size: 13px; }
.ac-brand-name {
    display: block; font-weight: bold; font-size: 15px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* HIDDEN ON A PHONE. The topbar is sticky, so every pixel of it is a pixel the
   conversation never gets back -- and the h1 two inches below says what this is
   in far better words. MEASURED at 375: 97px with the strapline, 83px without,
   and the nav still wraps to its own row either way. */
.ac-brand-sub {
    display: none; font-size: 11px; color: var(--ac-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ac-topnav { display: flex; gap: 14px; flex: 0 0 auto; flex-wrap: wrap; }
.ac-topnav a {
    color: var(--ac-muted); text-decoration: none; font-size: 13px;
    font-family: 'Consolas', monospace; text-transform: uppercase;
    letter-spacing: 0.05em;
}
.ac-topnav a:hover, .ac-topnav a:focus-visible { color: var(--ac-accent); }

.ac-wrap { max-width: 1100px; margin: 0 auto; padding: 0 16px 72px; }

/* --- TYPE --------------------------------------------------------------- */
h1, h2, h3 { line-height: 1.15; margin: 0 0 12px; }
h1 { font-size: clamp(2rem, 5.2vw, 3.1rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.4rem, 3.4vw, 2rem); }
h3 { font-size: 1.05rem; }
.ac-lede { font-size: 1.1rem; color: var(--ac-muted); max-width: 44rem; margin: 0 0 22px; }
.ac-eyebrow {
    font-family: 'Consolas', monospace; font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.14em;
    color: var(--ac-accent); margin: 0 0 10px;
}
.ac-hint { font-size: 12px; color: var(--ac-muted); }

/* --- BUTTONS ------------------------------------------------------------ */
.ac-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 18px; border-radius: 8px;
    border: 1px solid var(--ac-border);
    background: var(--ac-surface-2); color: var(--ac-text);
    font-family: 'Consolas', monospace; font-size: 13px;
    text-transform: uppercase; letter-spacing: 0.05em;
    text-decoration: none; cursor: pointer;
    /* A CONTROL IS AT LEAST 44px TALL. Both platform guidelines set it and this
       page is opened on a phone more often than not -- F66 measured a 32px
       target here and called it a regression, correctly. */
    min-height: 44px;
}
.ac-btn:hover:not(:disabled), .ac-btn:focus-visible:not(:disabled) {
    background: rgba(var(--ac-accent-rgb), 0.12);
    border-color: var(--ac-accent);
}
/* A `display` RULE ON AN ELEMENT THAT ALSO USES THE `hidden` ATTRIBUTE NEEDS
   THIS BESIDE IT (F60, and D277 where the same thing hid a PAYWALL that went on
   painting). `.ac-btn` is a class selector at (0,1,0) and the user agent's
   `[hidden]` rule is (0,1,0) too but comes from a lower-priority origin -- so
   `display: inline-flex` wins and the element is drawn while
   `hasAttribute('hidden')` reads true.

   MEASURED HERE, ON THIS PAGE, BEFORE IT SHIPPED: at 375 the BUY button
   reported `hidden=true` and `getBoundingClientRect().width = 144` -- laid out,
   painted and pressable, beside a SEND button squeezed to half the row for it.
   The test is never "did I set the attribute", it is "did the box go away". */
.ac-btn[hidden] { display: none; }
.ac-btn:disabled { opacity: 0.5; cursor: default; }
.ac-btn-primary {
    background: linear-gradient(145deg, var(--ac-accent), var(--ac-accent-deep));
    color: #05070a; border-color: transparent; font-weight: bold;
}
.ac-btn-primary:hover:not(:disabled), .ac-btn-primary:focus-visible:not(:disabled) {
    filter: brightness(1.1); background: linear-gradient(145deg, var(--ac-accent), var(--ac-accent-deep));
}
.ac-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* --- HERO --------------------------------------------------------------- */
.ac-hero { padding: 52px 0 10px; }
.ac-hero h1 { max-width: 20ch; }

/* --- THE TABLE ---------------------------------------------------------- */
.ac-seats {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin: 0 0 18px; padding: 0; list-style: none;
    max-width: 100%; min-width: 0;
}
.ac-seat {
    display: inline-flex; align-items: center; gap: 8px;
    /* TWO TO A ROW ON A PHONE, ALWAYS, and it is D283's ruling rather than a
       new one. A chip carries a STATE that changes from "thinking" to
       "answered" to "agrees" while a round runs, so a layout tuned to the
       widths at rest re-wraps mid-round -- the table visibly rearranging itself
       while somebody is reading it. A stated half-row removes the question
       instead of arbitrating it. */
    flex: 1 1 calc(50% - 4px); min-width: 0;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--seat); border-radius: 999px;
    padding: 6px 12px 6px 8px;
    font-family: 'Consolas', monospace; font-size: 12px;
    overflow: hidden;
}
.ac-seat-mark {
    flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--seat); color: #05070a;
    font-weight: bold; font-size: 11px; line-height: 1;
}
.ac-seat-name {
    font-weight: bold;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ac-seat-sub {
    color: var(--ac-muted); font-size: 10px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* THE STATE REPLACES THE BYLINE WHILE A ROUND RUNS (D283), so a chip stays
   about the width it already was and the company name comes back the moment
   the round ends. */
.ac-seats[data-live="1"] .ac-seat-sub { display: none; }
.ac-seat-state { margin-left: auto; color: var(--ac-accent); font-size: 10px; }
.ac-seat-state:empty { display: none; }
.ac-seat-dot {
    display: none; flex: 0 0 auto;
    width: 7px; height: 7px; border-radius: 50%; background: var(--seat);
}
.ac-seats[data-live="1"] .ac-seat-dot { display: inline-block; }
.ac-seat[data-state="thinking"] .ac-seat-dot { animation: ac-pulse 1.4s ease-in-out infinite; }
.ac-seat[data-state="silent"] { opacity: 0.55; border-style: dashed; }
.ac-seat[data-state="silent"] .ac-seat-dot { animation: none; opacity: 0.4; }
@keyframes ac-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) {
    .ac-seat[data-state="thinking"] .ac-seat-dot { animation: none; }
}

/* --- THE ASK BOX -------------------------------------------------------- */
.ac-ask {
    background: var(--ac-surface); border: 1px solid var(--ac-border);
    border-radius: var(--ac-radius); padding: 14px;
    box-shadow: var(--ac-shadow);
}
/* DOCKED: under the conversation, and still on screen (D299).

   `sticky` rather than `fixed`, and that is the load-bearing choice. A fixed
   bottom bar is pinned to the LAYOUT viewport, which a soft keyboard does not
   change -- so on a phone it sits behind the keyboard at the exact moment
   somebody is typing into it, which is the defect D292 had to write
   visualViewport plumbing to undo one panel over. A sticky element stays in
   normal flow, so when the browser scrolls to keep the caret visible it comes
   with it, and a browser that does not support sticky simply renders it in
   place -- which is still the right ORDER, under the transcript.

   It is opaque because the transcript scrolls underneath it. */
.ac-ask-docked {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin-top: 18px;
    background: var(--ac-surface);
}
.ac-ask textarea {
    width: 100%; resize: vertical;
    background: var(--ac-surface-2); color: var(--ac-text);
    border: 1px solid var(--ac-border-soft); border-radius: 8px;
    padding: 12px; font: inherit; font-size: 16px; line-height: 1.5;
    min-height: 88px;
}
.ac-ask textarea:focus {
    outline: none; border-color: var(--ac-accent);
    box-shadow: 0 0 0 2px rgba(var(--ac-accent-rgb), 0.18);
}
.ac-ask-actions { margin-top: 10px; }
/* THE SEND BUTTON TAKES THE ROW IT LANDS ON, so a phone never shows one
   control with a third of a line of nothing beside it (D261's rule, and the
   same measurement). */
.ac-ask-actions .ac-btn { flex: 1 1 auto; }
.ac-view-toggle {
    background: none; border: none; color: var(--ac-accent);
    font-family: 'Consolas', monospace; font-size: 12px;
    text-transform: uppercase; letter-spacing: 0.05em;
    padding: 6px 0; cursor: pointer; text-align: left;
}
.ac-view-body { margin-top: 8px; }
.ac-view-body[hidden] { display: none; }
.ac-view-body textarea { min-height: 60px; }
.ac-state-line {
    margin: 10px 0 0; font-size: 13px; color: var(--ac-muted);
    display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
}
.ac-state-line strong { color: var(--ac-text); }
.ac-msg {
    margin: 10px 0 0; padding: 10px 12px; border-radius: 8px;
    border: 1px solid var(--ac-warn); background: rgba(255, 198, 92, 0.08);
    font-size: 14px;
}
.ac-msg[hidden] { display: none; }
.ac-msg[data-kind="ok"] { border-color: var(--ac-ok); background: rgba(79, 220, 139, 0.08); }
.ac-msg[data-kind="bad"] { border-color: var(--ac-danger); background: rgba(255, 75, 92, 0.08); }

/* --- THE CHAMBER -------------------------------------------------------- */
.ac-chamber { padding: 26px 0 0; }
.ac-chamber[hidden] { display: none; }
.ac-thread { display: flex; flex-direction: column; gap: 14px; }
.ac-turn {
    border-left: 3px solid var(--seat);
    padding: 2px 0 2px 12px;
}
.ac-turn-head {
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
    font-family: 'Consolas', monospace;
}
.ac-turn-name { color: var(--seat); font-weight: bold; font-size: 13px; }
.ac-turn-model { color: var(--ac-muted); font-size: 11px; }
.ac-turn-body { margin: 4px 0 0; white-space: pre-wrap; }
.ac-turn-body p { margin: 0 0 8px; }
.ac-turn-body p:last-child { margin-bottom: 0; }
.ac-turn-body code {
    font-family: 'Consolas', monospace; font-size: 0.92em;
    background: rgba(255, 255, 255, 0.08); padding: 1px 5px; border-radius: 4px;
}
.ac-turn-body li { margin: 0 0 4px; }
.ac-turn-user { border-left-color: var(--ac-muted); }
.ac-turn-user .ac-turn-name { color: var(--ac-muted); }
.ac-turn-silent { border-left-style: dashed; }
.ac-turn-silent .ac-turn-body { color: var(--ac-muted); font-style: italic; }
.ac-turn-note { font-size: 12px; color: var(--ac-muted); margin: 4px 0 0; }

.ac-phase {
    display: flex; align-items: center; gap: 10px;
    margin: 6px 0 0; color: var(--ac-muted);
    font-family: 'Consolas', monospace; font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.1em;
}
.ac-phase::after {
    content: ""; flex: 1 1 auto; height: 1px;
    background: var(--ac-border-soft);
}
.ac-narrate { color: var(--ac-muted); font-size: 13px; margin: 0; font-style: italic; }

.ac-closing {
    border: 1px solid var(--ac-accent); border-radius: var(--ac-radius);
    background: rgba(var(--ac-accent-rgb), 0.07);
    padding: 14px 16px;
}
.ac-closing-head {
    margin: 0 0 6px; font-family: 'Consolas', monospace; font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.12em; color: var(--ac-accent);
}
.ac-closing-body { margin: 0; }
.ac-verdict { margin: 8px 0 0; font-size: 13px; color: var(--ac-muted); }
.ac-asks {
    border: 1px solid var(--ac-accent); border-radius: 8px;
    padding: 10px 12px; background: rgba(var(--ac-accent-rgb), 0.06);
}
.ac-asks-head {
    margin: 0 0 6px; font-family: 'Consolas', monospace; font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.1em; color: var(--ac-accent);
}
.ac-asks ul { margin: 0; padding-left: 18px; }

.ac-stagebar { margin: 4px 0 0; }
.ac-stagebar[hidden] { display: none; }

/* --- MARKETING ---------------------------------------------------------- */
.ac-section { padding: 46px 0 0; }
.ac-section > p { max-width: 44rem; }
.ac-grid {
    display: grid; gap: 14px; margin: 18px 0 0;
    grid-template-columns: 1fr;
}
.ac-card {
    background: var(--ac-surface); border: 1px solid var(--ac-border-soft);
    border-radius: var(--ac-radius); padding: 18px;
}
.ac-card h3 { color: var(--ac-accent); }
.ac-card p { margin: 0; color: var(--ac-muted); }
.ac-card p + p { margin-top: 8px; }
.ac-step-n {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%;
    background: rgba(var(--ac-accent-rgb), 0.15);
    border: 1px solid var(--ac-border);
    color: var(--ac-accent); font-family: 'Consolas', monospace;
    font-size: 13px; margin: 0 0 8px;
}
.ac-price {
    display: block; font-size: 2.2rem; font-weight: bold;
    color: var(--ac-accent); line-height: 1.1; margin: 0 0 4px;
    font-family: 'Consolas', monospace;
}
.ac-price-card { border-color: var(--ac-border); }
.ac-list { margin: 10px 0 0; padding-left: 18px; color: var(--ac-muted); }
.ac-list li { margin: 0 0 6px; }
.ac-faq { margin: 18px 0 0; }
.ac-faq h3 { margin-bottom: 4px; }
.ac-faq p { color: var(--ac-muted); margin: 0 0 16px; max-width: 44rem; }

.ac-footer {
    border-top: 1px solid var(--ac-border-soft);
    margin-top: 56px; padding: 22px 16px 34px;
    color: var(--ac-muted); font-size: 13px;
}
.ac-footer-inner {
    max-width: 1100px; margin: 0 auto;
    display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between;
}
.ac-footer a { color: var(--ac-muted); }

@media (min-width: 820px) {
    .ac-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ac-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ac-seat { flex: 0 0 auto; }
    .ac-ask-actions .ac-btn { flex: 0 0 auto; }
    .ac-brand-sub { display: block; }
}