/* Roboto (Google Fonts, SIL Open Font License: fonts/roboto/OFL.txt), kept here: every weight in one variable file a
   style, Latin and Latin Extended. */
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 100 900; font-display: swap;
             src: url("../fonts/roboto/roboto-normal-latin.woff2") format("woff2");
             unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 100 900; font-display: swap;
             src: url("../fonts/roboto/roboto-normal-latin-ext.woff2") format("woff2");
             unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Roboto"; font-style: italic; font-weight: 100 900; font-display: swap;
             src: url("../fonts/roboto/roboto-italic-latin.woff2") format("woff2");
             unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Roboto"; font-style: italic; font-weight: 100 900; font-display: swap;
             src: url("../fonts/roboto/roboto-italic-latin-ext.woff2") format("woff2");
             unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* Infonet Studio: cream and light, for busy owners. Every colour is a token (screens rule 14). */
:root {
  --bg: #faf6ee;            /* cream page */
  --surface: #fffdf8;       /* cards */
  --surface-2: #f3ece0;     /* bands, table heads */
  --header: #ede3d1;        /* the header: a darker cream */
  --icon: #37c0bb;          /* the logo's teal: every icon */
  --warn: #e07b2a;          /* orange: something a working skill needs is in trouble */
  --claude: #d97757;        /* Claude's turning asterisk in help's status */
  --ink: #26221c;           /* text */
  --ink-2: #5f584d;         /* quieter text */
  --ink-3: #8a8274;         /* hints */
  --line: #e4dacb;
  --accent: #1e5b4a;        /* deep green: links, the main action's outline */
  --accent-2: #2f7a63;
  --accent-soft: #e2ede7;
  --warm: #a85f2b;          /* small highlights */
  --warm-soft: #f7e9dc;
  --note: #7a4a22;          /* a calm note, never red (screens rule 6) */
  --danger: #c2412d;        /* red: taking something away (Remove), and a form's errors (screens rule 25) */
  --danger-soft: #fbe9e6;   /* an error's box */
  --danger-line: #efb9b0;
  --accent-line: #b7d3c5;   /* a success box's border */
  --focus: #2f7a63;
  /* The call flow designer's elements, as Flow Builder colours them */
  --flow-start: #2e844a; --flow-say: #0176d3; --flow-ask: #9050e9; --flow-evaluate: #06a59a; --flow-decision: #dd7a01;
  --flow-forward: #2e844a; --flow-message: #5867e8; --flow-hangup: #c23934; --flow-line: #c9bda9; --flow-dot: #ddd2c0;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(60, 45, 20, .06), 0 6px 24px rgba(60, 45, 20, .06);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.6 var(--sans); }
/* One font on every signed-in page (the owner, 2026-11-01: "i want to implement the same font style in the whole page"):
   its headings, numbers and modals in the text's font; the public pages keep theirs. */
body.has-nav { --serif: var(--sans); }
a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
/* A button that reads as a link (Change card): posts, as a link can't. */
button.link { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); text-decoration: underline;
    text-underline-offset: 3px; text-decoration-thickness: 1px; cursor: pointer; }
button.link .spin { display: none; }
a:hover { color: var(--accent-2); }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.2; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(2rem, 4.5vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 620px; }
.muted { color: var(--ink-2); }
.hint { color: var(--ink-3); font-size: .92rem; }
.label, th, label.caps { text-transform: uppercase; letter-spacing: .08em; font-size: .74rem; font-weight: 600; color: var(--ink-2); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }

/* ---- header and footer ---- */
.top { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--header) 94%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; gap: 24px; height: 64px; position: relative; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: 1.25rem; font-weight: 600; color: var(--ink); text-decoration: none; }
/* The logo is black on white: multiply lets the cream show through the white. */
.brand img { height: 38px; width: auto; display: block; mix-blend-mode: multiply; }
.nav { display: flex; gap: 22px; margin-left: auto; align-items: center; }
.nav a { color: var(--ink); text-decoration: none; font-size: .96rem; }
.nav a:hover { color: var(--accent); }
/* The trail after the logo: where this page is, each step but the last a link. */
.crumbs { min-width: 0; }
.crumbs ol { display: flex; align-items: center; gap: 8px; list-style: none; margin: 0; padding: 0; font-size: .95rem; white-space: nowrap; overflow: hidden; }
.crumbs li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.crumbs li + li::before { content: "›"; color: var(--ink-3); }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
/* With the side nav, it starts where the page does: past the nav (240px, the logo over it) and its padding. */
.has-nav .crumbs { position: absolute; left: calc(var(--nav-w, 264px) + 36px); }
html[data-nav="folded"] .has-nav .crumbs { left: calc(68px + 36px); }
@media (max-width: 820px) { .has-nav .crumbs { position: static; } .crumbs ol { font-size: .85rem; } }
/* Their avatar at the header's right, and its menu. */
.me { position: relative; background: none; border: 0; padding: 0; margin: 0; border-radius: 0; }
.me__avatar { list-style: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
              background: var(--accent-soft); color: var(--accent); font: 700 .9rem var(--sans); letter-spacing: .02em; user-select: none; }
.me__avatar::-webkit-details-marker { display: none; }
.me__avatar:hover, .me[open] .me__avatar { background: var(--accent); color: var(--surface); }
.me__panel { position: absolute; right: 0; top: calc(100% + 8px); min-width: 230px; display: flex; flex-direction: column; padding: 8px;
             background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); z-index: 20; }
.me__who { display: flex; flex-direction: column; padding: 8px 12px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line); line-height: 1.35; }
.me__who .hint { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav .me__panel a { padding: 8px 12px; border-radius: 8px; }
.nav .me__panel a:hover { background: var(--surface-2); color: var(--ink); }
.foot { border-top: 1px solid var(--line); margin-top: 72px; padding: 32px 0 48px; color: var(--ink-2); font-size: .92rem; }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; }

/* ---- buttons: the small outlined pill (screens rule 10) ---- */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; border: 1.5px solid var(--line); border-radius: 999px;
       background: var(--surface); color: var(--ink); font: 600 .95rem var(--sans); text-decoration: none; cursor: pointer; }
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn.main { border-color: var(--accent); color: var(--accent); }
.btn.main:hover { background: var(--accent-soft); }
.btn[disabled], .btn.off { opacity: .5; cursor: not-allowed; }
.btn .spin { display: none; }
/* A file picker as the pill button (screens rule 26): the input itself hidden inside it, still reached by the keyboard. */
.file-pick { position: relative; cursor: pointer; display: inline-flex; width: fit-content; justify-self: start; align-self: flex-start; }
.file-pick input[type=file] { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; overflow: hidden; }
.file-pick:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.file-pick.busy { pointer-events: none; opacity: .7; }
.btn.busy .spin { display: inline-block; }
.spin { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* Thinking, like Claude's (the owner, 2026-10-31: "like the icons from claude"): its turning, breathing asterisk, in the
   site's dark teal ("match the color theme of the site"), until the first words come. */
.thinking { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); }
.thinking::before { content: "\273B"; color: var(--accent); font-size: 1.15em; line-height: 1; display: inline-block;
                    animation: think 2.4s linear infinite; }
@keyframes think { 0% { transform: rotate(0) scale(.8); opacity: .7; } 50% { transform: rotate(180deg) scale(1.15); opacity: 1; }
                   100% { transform: rotate(360deg) scale(.8); opacity: .7; } }
@media (prefers-reduced-motion: reduce) { .thinking::before { animation: none; } }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 24px; }

/* ---- sections ---- */
.hero { padding: 72px 0 56px; }
.hero .lead { font-size: 1.22rem; color: var(--ink-2); max-width: 640px; }
.band { background: var(--surface-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 56px 0; margin: 40px 0; }
section { padding: 32px 0; }
/* Home starts with its first brief, no greeting above it. */
.home > section.brief:first-of-type { padding-top: 8px; }
.grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); }
/* A grid of cards: each a column, its button on the last line, level with the others. */
.grid.plan-credits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.plan-credits { margin-top: 28px; }
.grid.plan-credits > .card { margin: 0; display: block; }
.plan-stack { display: flex; flex-direction: column; gap: 32px; }
.plan-stack > .card { margin: 0; display: block; }
.card-corner { position: absolute; top: 18px; right: 18px; }
@media (max-width: 640px) { .grid.plan-credits { grid-template-columns: 1fr; } }
.grid.offers > .card { display: flex; flex-direction: column; }
.grid.offers > .card > :last-child { margin-top: auto; }
/* On-Demand Credits: a card each, its terms listed on it (the owner, 2026-10-31). */
.grid.packs { margin-top: 28px; row-gap: 32px; }
.pack-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.pack-price { font-size: 1.15rem; font-weight: 600; }
.terms { list-style: none; padding: 12px 0 0; margin: 0 0 16px; border-top: 1px solid var(--line); font-size: .9rem; color: var(--ink-2); }
.terms li { position: relative; padding-left: 20px; margin: 6px 0; }
.terms li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.terms--after { border-top: 0; padding: 0; margin: 24px 0 0; font-size: .95rem; }
.row-between { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; }
.pack-buy { text-align: center; }
/* Email Handler's received mail (111): a row each, newest first; one email, as plain text. */
.email-list { list-style: none; margin: 0; padding: 0; }
.email-list li a { display: grid; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.email-list li:last-child a { border-bottom: 0; }
/* Received by kind (130): a tab shows only its kind. */
#received-list:not([data-view="all"]) li { display: none; }
#received-list[data-view="invite"] li[data-kind="invite"],
#received-list[data-view="receipt"] li[data-kind="receipt"],
#received-list[data-view="request"] li[data-kind="request"],
#received-list[data-view="fyi"] li[data-kind="fyi"],
#received-list[data-view="newsletter"] li[data-kind="newsletter"],
#received-list[data-view="spam_like"] li[data-kind="spam_like"],
#received-list[data-view="other"] li[data-kind="other"] { display: list-item; }
/* A drafted reply, read-only until its pencil (130). */
textarea[data-reply][readonly] { background: var(--bg); cursor: default; }
.email-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.email-log li { display: flex; gap: 10px; align-items: baseline; }
.email-log time { color: var(--ink-3); font-size: .85rem; white-space: nowrap; min-width: 7.5em; }
.email-list li a:hover .email-list__subject { color: var(--accent); }
.email-list__from { font-weight: 600; }
.email-list li.is-new .email-list__from::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-right: 8px; vertical-align: middle; }
.email-body { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; max-height: 60vh; overflow-y: auto; }
.email-files { margin: 0; padding-left: 18px; }
/* Email Handler's address: the label typed, the rest of the address after it (109). */
.email-label { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.email-label input { flex: 1 1 160px; min-width: 0; }
.email-label span { color: var(--ink-2); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9rem; overflow-wrap: anywhere; }
.legal { max-width: 760px; padding-top: 32px; }
.legal ol li { margin: 10px 0; }
/* The Terms (/terms), from docs/product/terms.md: headings to link to, tables that fit a phone. */
.terms-page { padding-top: 32px; }   /* as wide as the header (the owner, 2026-10-31) */
.terms-page ol li { margin: 10px 0; }
.terms-page h2, .terms-page h3, .terms-page span[id] { scroll-margin-top: 80px; }
.terms-page h2 { margin-top: 36px; }
.terms-page table { width: 100%; font-size: .95rem; }
@media (max-width: 640px) { .terms-page table { display: block; overflow-x: auto; } }
.pack-note { margin: 0 0 16px; padding: 6px 10px; border-radius: 8px; background: var(--warm-soft); color: var(--note); font-weight: 600; font-size: .9rem; text-align: center; }
/* A card's label with its action on the right (Change plan). */
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card h3 { margin-bottom: .35em; }
.steps { counter-reset: step; }
.steps .card::before { counter-increment: step; content: counter(step); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
                       background: var(--accent-soft); color: var(--accent); font-weight: 700; margin-bottom: 12px; }
.tag { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.tag.now { background: var(--accent-soft); color: var(--accent); }
.tag.soon { background: var(--warm-soft); color: var(--warm); }

/* ---- pricing ---- */
.tabs { display: inline-flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 24px; }
/* A tab's title the size of a card's title (.tag.assistant-type; the owner, 2026-11-01: "change all tab titles - to be the
   same font as the card titles ... i mean font size"). */
.tabs button, .tabs a { background: none; text-decoration: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 14px; font: 600 .83rem var(--sans);
               text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); cursor: pointer; }
.tabs button[aria-selected="true"], .tabs a[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
/* Every tab, however it's styled, shows it can be clicked. */
[role="tab"], [role="tab"] * { cursor: pointer; }
.plans { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.plan { display: flex; flex-direction: column; }
.plan .price { font-family: var(--serif); font-size: 2rem; font-weight: 600; margin: 6px 0 2px; }
.plan .price small { font-family: var(--sans); font-size: .9rem; font-weight: 400; color: var(--ink-2); }
.plan ul { list-style: none; padding: 0; margin: 14px 0 20px; font-size: .95rem; }
.plan li { padding: 4px 0 4px 22px; position: relative; }
.plan li::before { content: ""; position: absolute; left: 4px; top: 12px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-2); }
.plan .btn { margin-top: auto; align-self: flex-start; }
.plan.popular { border: 2px solid var(--accent); position: relative; box-shadow: 0 1px 2px rgba(30, 91, 74, .08), 0 10px 32px rgba(30, 91, 74, .12); }
.popular-tag { position: absolute; top: -12px; left: 22px; background: var(--accent); color: var(--surface); }
.yearly-only { display: none; }
[data-interval="year"] .yearly-only { display: inline; }
[data-interval="year"] .monthly-only { display: none; }
table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { background: var(--surface-2); }
tr:last-child td { border-bottom: 0; }

/* ---- FAQ ---- */
details { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; margin-bottom: 10px; }
summary { cursor: pointer; font-weight: 600; }
details p { margin: 10px 0 0; color: var(--ink-2); }
/* The FAQ page (/faq), as wide as the header (the owner, 2026-10-31): its sections to jump to, and answers with lists and tables. */
.faq { padding-top: 32px; }
.faq-top { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.faq-top .muted p { margin: 0; }
.faq-top .page-search { flex: 0 0 280px; margin: 0; }
@media (max-width: 720px) { .faq-top { flex-direction: column; align-items: stretch; } .faq-top .page-search { flex-basis: auto; } }
.faq-sections { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 8px; }
.faq-sections a { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); text-decoration: none; font-size: .9rem; }
.faq section { scroll-margin-top: 80px; }
.faq h2 { margin-top: 32px; }
.faq details { scroll-margin-top: 80px; }
.faq-answer { color: var(--ink-2); }
.faq-answer ul, .faq-answer ol { margin: 10px 0 0; padding-left: 22px; }
.faq-answer li { margin: 4px 0; }
.faq-answer table { margin-top: 10px; width: 100%; font-size: .95rem; }
.faq-answer th, .faq-answer td { padding: 6px 8px; }
@media (max-width: 640px) { .faq-answer table { display: block; overflow-x: auto; } }

/* ---- forms ---- */
.form-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; box-shadow: var(--shadow); margin-top: 24px; }
.field { margin-bottom: 20px; }
.field label { display: block; margin-bottom: 6px; }
input[type=text], input[type=email], input[type=number], input[type=date], input[type=time], input[type=tel], input[type=url],
input[type=password], textarea, select {
  width: 100%; padding: 11px 14px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font: 1rem var(--sans); }
input:focus, textarea:focus, select:focus { border-color: var(--accent-2); outline: none; }
/* Its own caret, set in from the right edge (the browser's sits against it). */
select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
         background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%236b7a75' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
         background-repeat: no-repeat; background-position: right 16px center; background-size: 12px 8px; }
textarea { min-height: 96px; resize: vertical; }
/* A field changed in place (the PIN): its button inside on the right, a pencil, then save, then a check mark (site.js). */
.edit-in-place { position: relative; }
.edit-in-place input { padding-right: 52px; }
.edit-in-place input[readonly] { cursor: default; }
.edit-in-place input[readonly]:focus { border-color: var(--line); }
.edit-in-place button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; display: grid;
                        place-items: center; border: 0; border-radius: 8px; background: none; color: var(--ink-2); cursor: pointer; }
.edit-in-place button:hover { background: var(--accent-soft); color: var(--accent); }
.edit-in-place svg { display: none; }
[data-edit-in-place]:not([data-state]) .when-edit, [data-state=edit] .edit-in-place .when-edit,
[data-state=view] .edit-in-place .when-view, [data-state=saved] .edit-in-place .when-saved { display: block; }
[data-state=saved] .edit-in-place button { color: var(--accent); }
/* A settings card that shows its values, with a pencil at its top right to change them in a modal. */
/* A setting shown, read only, like the PIN field: its value in a field's box, its pencil in the box (screens rule 18). */
.shown-field { position: relative; padding: 11px 52px 11px 14px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--surface);
               color: var(--ink); min-height: 48px; }
.shown-field.multiline .shown-field__value { white-space: pre-line; }
.shown-field.no-pencil { padding-right: 14px; }
.fb-page { height: calc(100vh - 160px); min-height: 520px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.shown-field .icon-btn { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; display: grid;
                         place-items: center; border-radius: 8px; color: var(--ink-2); }
.shown-field.multiline .icon-btn { top: 6px; transform: none; }
.shown-field .icon-btn:hover { background: var(--accent-soft); color: var(--accent); }
/* A modal (dialog) over the page, its content like the page's cards. */
dialog.modal { width: min(980px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto; padding: 28px 24px 20px;
               border: 0; border-radius: var(--radius); background: var(--bg); color: var(--ink); box-shadow: var(--shadow); }
dialog.modal[open]:not(:modal) { position: fixed; inset: 24px 0 auto; margin: 0 auto; z-index: 50; }
dialog.modal::backdrop { background: rgba(0, 0, 0, .45); }
.modal-head { margin-bottom: 8px; }
.modal .assistant-columns { margin-bottom: 8px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; position: sticky; bottom: -20px; background: var(--bg); padding: 12px 0 0; }
/* A small button that's only an icon (add, edit, remove, save). */
.icon-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none; border: 0; border-radius: 8px; background: none;
            color: var(--ink-2); cursor: pointer; }
.icon-btn:hover { background: var(--accent-soft); color: var(--accent); }
.icon-btn:disabled { opacity: .45; cursor: default; }
/* An assistant's Details across the page, its fields in two columns (one on a phone); General instructions beneath. */
.details-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
@media (max-width: 720px) { .details-grid { grid-template-columns: minmax(0, 1fr); } }
/* An assistant's title under its name (119). */
.assistant-title { margin: 2px 0 0; color: var(--ink-2); font-size: .92rem; }
.assistant-stack { display: flex; flex-direction: column; gap: 32px; margin-bottom: 40px; }
/* Special instructions: their titles, a link each, each opening its modal (118). */
.instruction-titles { list-style: none; margin: 12px 0 0; padding: 0; }
.instruction-titles li { padding: 9px 0; border-top: 1px solid var(--line); }
.instruction-titles li:first-child { border-top: 0; }
.instruction-titles a { display: flex; align-items: baseline; gap: 10px; min-width: 0; color: var(--ink); text-decoration: none; }
.instruction-n { flex: none; min-width: 1.4em; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.instruction-title { flex: none; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.instruction-preview { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); opacity: .75;
                       font-size: .92em; }
.instruction-titles a:hover .instruction-title { color: var(--accent); text-decoration: underline; }
.instruction-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
dialog.modal.modal--card .instruction-remove { margin-right: auto; }
.remove-confirm { align-items: center; }
/* An instruction's review (120): the assistant's question, its wording, or why it can't, in the modal above its buttons. */
.instruction-review { margin-top: 14px; padding: 14px 16px; border: 1.5px solid var(--accent-2); border-radius: 10px; background: var(--accent-soft); }
.instruction-review p { margin: 0 0 8px; }
.instruction-review .label { margin-bottom: 4px; }
.instruction-review__question, .instruction-review__title { font-weight: 600; }
.instruction-review__proposal, .instruction-review__reason { white-space: pre-wrap; overflow-wrap: anywhere; }
.instruction-review__choices { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; }
.instruction-review input[type=text] { width: 100%; }
.instruction-review__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.instruction-review__status { margin: 0; }
dialog.modal.modal--card .modal-actions[hidden] { display: none; }
.remove-confirm__text { margin: 0 auto 0 0; }
a.icon-btn { text-decoration: none; }
/* A skill page's own cards under its settings (the PIN, its special instructions). */
.skill-cards { display: flex; flex-direction: column; gap: 32px; margin-top: 36px; }
/* A calendar (097): its week, a day a column (stacked on a phone), and its settings' rows. */
.calendar-week { margin-bottom: 32px; }
.calendar-card.is-off { opacity: .6; }
.calendar-card .edit-in-place input[readonly] { font-weight: 600; font-size: 1.1rem; }
.calendar-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
@media (max-width: 900px) { .calendar-days { grid-template-columns: 1fr; } }
.calendar-day { border: 1px solid var(--line); border-radius: 10px; padding: 10px; min-height: 120px; background: var(--surface); }
.calendar-day.today { border-color: var(--accent); }
.calendar-event { display: flex; flex-direction: column; gap: 2px; padding: 8px; margin-bottom: 6px; border-radius: 8px;
                  background: var(--accent-soft); font-size: .92rem; overflow-wrap: anywhere; }
.calendar-event.blocked { background: var(--surface-2); }
.calendar-event details summary { cursor: pointer; }
.calendar-inline { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.calendar-inline input { width: auto; padding: 6px 8px; }
.calendar-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 14px; }
.calendar-hours-row, .calendar-type-row, .calendar-holiday-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
                                                                  padding: 6px 0; border-top: 1px solid var(--line); }
.calendar-hours-row input[type=time], .calendar-type-row input { width: auto; padding: 6px 8px; }
.calendar-type-row input[type=number] { width: 72px; }
.calendar-hours-day { min-width: 120px; }
/* A day a row: the day, then its two stretches in two columns, lined up down the days (the owner, 2026-10-31). */
.calendar-hours-row { display: grid; grid-template-columns: 130px auto auto; justify-content: start; column-gap: 18px; }
.calendar-stretch { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 720px) { .calendar-hours-row { grid-template-columns: 1fr; row-gap: 6px; } }
.calendar-holiday-row > span:first-of-type { flex: 1; min-width: 180px; }
.calendar-holiday-row.suggested { opacity: .8; }
.calendar-link code { overflow-wrap: anywhere; }
/* The Incoming Call Flow's canvas (call-flow.js): a tree from the start, branches side by side, a panel to edit a step. */
.wrap.wide { max-width: 1400px; }
/* ---- The Incoming Call Flow's designer (100, 102): auto-layout, as Salesforce's Flow Builder ------------------------------ */
.fb { display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--bg); }
.fb-bar { display: flex; align-items: center; gap: 16px; padding: 12px 18px; border-bottom: 1px solid var(--line); background: var(--surface); flex-wrap: wrap; }
.fb-bar__title { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.fb-bar__title h2 { margin: 0; font-size: 1.15rem; }
.fb-bar__state { display: flex; gap: 8px; flex: 1; flex-wrap: wrap; }
.fb-bar__actions { display: flex; gap: 8px; align-items: center; }
.fb-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line);
           background: var(--surface-2); color: var(--ink-2); font-size: .82rem; font-weight: 600; white-space: nowrap; }
.fb-chip--live { border-color: var(--accent-2); background: var(--accent-soft); color: var(--accent); }
.fb-chip--live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-2); }
.fb-note { padding: 8px 18px; background: var(--warm-soft); color: var(--note); font-size: .92rem; border-bottom: 1px solid var(--line); }
.fb-body { flex: 1; min-height: 0; display: flex; }
.fb-canvas { position: relative; flex: 1; min-width: 0; overflow: auto; background-color: var(--surface-2);
             background-image: radial-gradient(var(--flow-dot) 1px, transparent 1px); background-size: 18px 18px; }
.fb-stage { display: flex; flex-direction: column; align-items: center; padding: 32px 40px 120px; min-width: max-content; transform-origin: top center; }
.fb-zoom { position: sticky; left: 16px; bottom: 16px; float: left; display: inline-flex; align-items: center; gap: 2px; padding: 4px;
           margin: -56px 0 0 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow); }
.fb-zoom button { border: 0; background: none; color: var(--ink-2); font: inherit; font-weight: 600; padding: 4px 10px; border-radius: 6px; cursor: pointer; }
.fb-zoom button:hover { background: var(--accent-soft); color: var(--accent); }
.fb-zoom span { min-width: 48px; text-align: center; font-size: .85rem; color: var(--ink-2); }

/* A path: a column of elements joined by connectors, each with its + */
.fb-path { display: flex; flex-direction: column; align-items: center; }
.fb-line { width: 2px; height: 20px; background: var(--flow-line); border-radius: 1px; }
.fb-add { position: relative; display: flex; flex-direction: column; align-items: center; }
.fb-plus { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--flow-line); background: var(--surface); color: var(--ink-2);
           display: grid; place-items: center; cursor: pointer; padding: 0; font-size: 16px; line-height: 1; transition: transform .1s; }
.fb-plus:hover, .fb-plus[aria-expanded=true] { border-color: var(--accent-2); color: var(--surface); background: var(--accent-2); transform: scale(1.1); }

/* An element: its icon tile and its label, as Flow Builder's */
.fb-node { display: flex; align-items: center; gap: 12px; width: 280px; padding: 10px 14px 10px 10px; border: 1.5px solid var(--line);
           border-radius: 12px; background: var(--surface); box-shadow: 0 1px 2px rgba(60, 45, 20, .08); text-align: left; cursor: pointer;
           font: inherit; color: var(--ink); }
.fb-node:hover { border-color: var(--accent-2); }
.fb-node.is-selected { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.fb-node.is-wrong { border-color: var(--danger); }
.fb-node__text { display: flex; flex-direction: column; min-width: 0; }
.fb-node__kind { font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.fb-node__label { font-size: .93rem; font-weight: 600; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fb-tile { flex: none; width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; color: #fff; }
.fb-tile--decision { border-radius: 6px; transform: rotate(45deg) scale(.86); }
.fb-tile--decision svg { transform: rotate(-45deg); }
.fb-tile--start { border-radius: 50%; }
.fb-tile--greeting { background: var(--flow-start); } .fb-tile--say { background: var(--flow-say); } .fb-tile--ask { background: var(--flow-ask); } .fb-tile--evaluate { background: var(--flow-evaluate); }
.fb-tile--decision { background: var(--flow-decision); } .fb-tile--forward { background: var(--flow-forward); }
.fb-tile--message { background: var(--flow-message); } .fb-tile--hangup { background: var(--flow-hangup); } .fb-tile--start { background: var(--flow-start); }
.fb-start { display: flex; align-items: center; gap: 12px; padding: 8px 18px 8px 8px; border-radius: 999px; background: var(--surface);
            border: 1.5px solid var(--line); box-shadow: 0 1px 2px rgba(60, 45, 20, .08); }
.fb-start strong { font-size: .95rem; }
.fb-end { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--ink-3); font-size: .78rem; font-weight: 700;
          letter-spacing: .05em; text-transform: uppercase; }
.fb-end::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--flow-line); }

/* A decision's branches: side by side, fanned out from one line */
.fb-branches { display: flex; align-items: flex-start; }
.fb-branch { position: relative; display: flex; flex-direction: column; align-items: center; padding: 0 22px; }
/* The fan-out: one line across, turning down into each path with a rounded elbow, and straight down into the middle ones. */
.fb-branch::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 14px; border-top: 2px solid var(--flow-line); }
.fb-branch:first-child::before { left: calc(50% - 1px); border-left: 2px solid var(--flow-line); border-top-left-radius: 14px; }
.fb-branch:last-child::before { right: calc(50% - 1px); border-right: 2px solid var(--flow-line); border-top-right-radius: 14px; }
.fb-branch:not(:first-child):not(:last-child)::after { content: ""; position: absolute; top: 0; left: calc(50% - 1px); width: 2px; height: 14px;
                                                       background: var(--flow-line); }
.fb-branch:only-child::before { left: calc(50% - 1px); right: auto; width: 0; border-top: 0; border-radius: 0; }
.fb-branch__label { margin-top: 14px; padding: 2px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line);
                    font-size: .8rem; font-weight: 600; color: var(--ink-2); white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }

/* The element menu: grouped, each with its tile */
.fb-menu { position: absolute; z-index: 20; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); width: 300px; padding: 8px;
           border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); }
.fb-menu[hidden] { display: none; }
.fb-menu__group { margin: 4px 8px 4px; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.fb-menu__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border: 0; border-radius: 8px; background: none;
                 text-align: left; font: inherit; color: var(--ink); cursor: pointer; }
.fb-menu__item:hover, .fb-menu__item:focus-visible { background: var(--accent-soft); outline: none; }
.fb-menu__item .fb-tile { width: 28px; height: 28px; border-radius: 7px; }
.fb-menu__item .fb-tile--decision { border-radius: 5px; }
.fb-menu__text { display: flex; flex-direction: column; }
.fb-menu__text small { color: var(--ink-3); font-size: .8rem; }

/* The properties panel */
.fb-panel { flex: none; width: 380px; max-width: 100%; overflow: auto; border-left: 1px solid var(--line); background: var(--surface); padding: 0 0 16px; }
.fb-panel[hidden] { display: none; }
.fb-panel__head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); background: var(--surface); }
.fb-panel__head h3 { margin: 0; flex: 1; font-size: 1.05rem; }
.fb-panel__body { padding: 14px 16px; }
.fb-panel__foot { display: flex; justify-content: space-between; gap: 8px; padding: 0 16px; }
.fb-outcome { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-top: 10px; background: var(--bg); }
.fb-outcome__row { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 10px; }
.btn.danger { color: var(--danger); border-color: var(--danger); }

/* Full page: the designer's modal */
dialog.modal.modal--full { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border-radius: 0; }
dialog.modal.modal--full[open] { display: flex; flex-direction: column; }
/* Modal sizes (screens rule 19): small (a short notice), medium (a confirmation, one column of fields), large (settings
   in several cards: the default), and full (the call flow designer). */
dialog.modal.modal--small { width: min(480px, calc(100vw - 32px)); }
dialog.modal.modal--medium { width: min(720px, calc(100vw - 32px)); }
dialog.modal.modal--large { width: min(980px, calc(100vw - 32px)); }
/* A card modal (modal--card, any size) is a card itself: no frame around it; the plans' prominent label (solid green,
   as "Most popular") on its top edge, a green border, and its buttons in a footer band across its bottom, on the right. */
dialog.modal.modal--card { padding: 20px 0 0; background: transparent; box-shadow: none; overflow: visible; }
dialog.modal.modal--card .card { margin: 0; border: 2px solid var(--accent); box-shadow: 0 12px 40px rgba(0, 0, 0, .25); }
/* Its title: the label on its top edge, bigger than a card's, as Website Helper's step labels. */
dialog.modal.modal--card .assistant-type { background: var(--accent); color: var(--surface); top: -18px; padding: 7px 18px; font-size: .95rem;
                                           letter-spacing: .08em; }
dialog.modal.modal--card .card { padding-top: 36px; }
/* The usual ×, in a circle on the card's top-right corner (half off it, as the title sits on its top edge): closes it, as Cancel does. */
dialog.modal.modal--card .card { position: relative; }
dialog.modal.modal--card .modal-x { position: absolute; top: -16px; right: -16px; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); width: 32px; height: 32px; display: grid; place-items: center;
                                    border: 1.5px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink-2);
                                    cursor: pointer; padding: 0; }
dialog.modal.modal--card .modal-x:hover { border-color: var(--accent-2); background: var(--accent-soft); color: var(--accent); }
dialog.modal.modal--card .card h3 { margin: 4px 0 10px; font-size: 1.3rem; font-weight: 600; }
dialog.modal.modal--card .modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin: 20px -24px -24px; padding: 12px 24px;
                                          border-top: 1px solid var(--line); background: var(--surface-2);
                                          border-radius: 0 0 calc(var(--radius) - 2px) calc(var(--radius) - 2px); }
dialog.modal.modal--medium { width: min(720px, calc(100vw - 32px)); }
dialog.modal.modal--large { width: min(980px, calc(100vw - 32px)); }
/* Their height (the owner, 2026-10-31: "limit to 80% for large modals, smaller modals limit to smaller percentage"). Past
   it the body scrolls, never the whole modal ("what scrolls is the body"): its title or tag, its × and its buttons stay put.
   The body (.modal-body) is gathered from what's between them when it first opens (site.js). */
dialog.modal { --modal-h: 85vh; }
dialog.modal.modal--large { --modal-h: 80vh; }
dialog.modal.modal--medium { --modal-h: 70vh; }
dialog.modal.modal--small { --modal-h: 60vh; }
dialog.modal:not(.modal--full) { max-height: none; overflow: visible; }
.modal-scroll { display: flex; flex-direction: column; max-height: calc(var(--modal-h) - 48px); min-height: 0; }
dialog.modal.modal--card .modal-scroll { max-height: calc(var(--modal-h) - 20px); }
.modal-scroll > .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0 -24px; padding: 0 24px 4px; }
.modal-scroll > .modal-head, .modal-scroll > .modal-actions, .modal-scroll > .tag, .modal-scroll > .modal-x { flex: none; }
.modal-scroll > .modal-actions { position: static; }
.fb-number { font-size: 2rem; font-weight: 700; letter-spacing: .02em; margin: 6px 0 10px; }
.fb-live { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; }
.fb-live::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--flow-hangup); animation: fb-pulse 1.2s infinite; }
@keyframes fb-pulse { 50% { opacity: .3; } }
@media (max-width: 760px) { .fb-panel { position: absolute; inset: 0 0 0 auto; width: 100%; } .fb-body { position: relative; } }
/* Choices side by side (an assistant's type, its gender), each as tall as the tallest. */
/* Agreeing to the Terms of Use (138), at sign-up and in each plan and pack card. */
.agree-terms { font-size: .88rem; text-align: left; margin: 10px 0; }
.choice-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-top: 8px; }
.choice-row .choice { margin: 0; }
input.code { font-size: 1.6rem; letter-spacing: .4em; text-align: center; max-width: 260px; }
.choice { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 12px; margin-bottom: 10px; cursor: pointer; background: var(--surface); }
.choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.choice.off { opacity: .55; cursor: not-allowed; }
.choice input { margin-top: 5px; accent-color: var(--accent); }
audio.sample { display: block; height: 32px; width: 100%; max-width: 300px; margin-top: 8px; }
fieldset.voices { border: 0; padding: 0; margin: 0 0 20px; }
fieldset.voices legend { margin-bottom: 4px; }
/* A form's messages (screens rule 25): success, a service error or a notice inside the card, above the first field
   (.form-errors; .ok for good news); a field's error directly below it, the field marked faulty. */
.form-errors:empty, .field-error:empty { display: none; }
/* A slot holding only the server's empty validation span (asp-validation-for, valid) is empty too. */
.field-error:not(:has(.field-validation-error)):has(> .field-validation-valid:only-child) { display: none; }
.form-errors { display: flex; gap: 12px; align-items: flex-start; color: var(--danger); background: var(--danger-soft);
  border: 1px solid var(--danger-line); border-radius: 10px; padding: 12px 14px; margin-bottom: 18px; font-size: .95rem; }
.form-errors.ok { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-line); }
.field-error { display: flex; gap: 8px; align-items: flex-start; color: var(--danger); font-size: .92rem; margin-top: 6px; }
.field-error[hidden] { display: none; }
.form-errors::before, .field-error::before { content: "!"; flex: none; display: grid; place-items: center; width: 22px; height: 22px;
  border-radius: 50%; background: var(--danger); color: #fff; font-weight: 700; font-size: .85rem; line-height: 1; }
.field-error::before { width: 18px; height: 18px; font-size: .75rem; margin-top: 1px; }
.form-errors.ok::before { content: "\2713"; background: var(--accent); }
.notice { background: var(--accent-soft); color: var(--accent); border-radius: 10px; padding: 10px 14px; margin-bottom: 16px; }
.notice.warn { background: var(--warm-soft); color: var(--warm); }
.progress { display: flex; gap: 8px; margin: 8px 0 4px; }
.progress span { flex: 1; height: 4px; border-radius: 2px; background: var(--line); }
.progress span.done { background: var(--accent-2); }

/* ---- the person's page ---- */
.dial { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 6px 0 14px; }
.dial code { font: 600 1.5rem/1.2 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .04em; background: var(--surface-2);
             border: 1px solid var(--line); border-radius: 10px; padding: 10px 16px; }
code { font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.stat { font-family: var(--serif); font-size: 2rem; font-weight: 600; }
/* An assistant's card (Assistants): its name, its number at the right, the buttons under them. */
.assistant-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
/* Its skills, under the name: small outlined pills. */
.skills { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 0 18px; }
.skills li, .skill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border: 1px solid var(--line); border-radius: 999px;
         font-size: .8rem; font-weight: 600; color: var(--ink-2); background: var(--surface); }
.skill.working { background: var(--icon); border-color: var(--icon); color: var(--surface); }
.skill.problem { background: var(--warn); border-color: var(--warn); color: var(--surface); }
.skill.setup { border-style: dashed; }
.skill.setup a { color: var(--accent); text-decoration: none; }
.skill.off { color: var(--ink-3); background: var(--surface-2); }
/* The × that removes a skill: a small round button at the pill's end, tinted in the pill's own colour. */
.skill__remove { display: inline-grid; place-items: center; width: 16px; height: 16px; margin: 0 -4px 0 4px; border-radius: 50%;
                 background: color-mix(in srgb, currentColor 20%, transparent); color: inherit; text-decoration: none;
                 font-size: .8rem; font-weight: 700; line-height: 1; }
.skill__remove:hover { background: color-mix(in srgb, currentColor 40%, transparent); color: inherit; }
.skills-add { margin: 0 0 12px; }
.skills-add .skill { cursor: pointer; font-family: inherit; }
/* A skill's card on an assistant's settings: the assistants' card, its status pill at the right of the name. */
.skill-card .assistant-head { align-items: center; }
.skill-card .assistant-head h3 { font-size: 1.3rem; }
.skill-card.not-added { border-style: dashed; }
.skill-card[hidden] { display: none; }
.assistant-actions form { margin: 0; }
/* A setup in steps, as a stepper (the owner, 2026-11-01): where you are of how many; circles joined by a line, done ones
   ticked, the current one ringed with "In progress" under it, the rest outlined; each a link back. */
.stepper { margin: 0 0 26px; }
.stepper__head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 18px; font-size: .95rem; }
.stepper__steps { display: grid; list-style: none; padding: 0; margin: 0; }
.stepper__step { position: relative; text-align: center; }
.stepper__step + .stepper__step::before { content: ""; position: absolute; top: 17px; right: 50%; width: 100%; height: 2px; background: var(--line); }
.stepper__step.is-joined::before { background: var(--icon); }
.stepper__step a { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--ink);
                   text-decoration: none; }
.stepper__dot { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--line);
                background: var(--surface); color: var(--ink-2); font-weight: 600; }
.stepper__step.is-done .stepper__dot { background: var(--icon); border-color: var(--icon); color: var(--surface); }
.stepper__step.is-current .stepper__dot { background: var(--accent); border-color: var(--accent); color: var(--surface);
                                           box-shadow: 0 0 0 5px var(--accent-soft); }
/* Done and the one you're on: its tick, ringed. */
.stepper__step.is-done.is-current .stepper__dot { background: var(--accent); }
.stepper__label { font-weight: 600; font-size: .92rem; }
.stepper__step.is-current .stepper__label { color: var(--accent); }
.stepper__now { font-size: .78rem; color: var(--accent); margin-top: -4px; }
.stepper__step a:hover .stepper__dot { border-color: var(--accent-2); }
@media (max-width: 640px) { .stepper__label { font-size: .78rem; } .stepper__dot { width: 30px; height: 30px; } .stepper__step + .stepper__step::before { top: 14px; } }
/* Website Helper's setup cards: the assistant card's look (a 2px border, the step as a label on it, its title size). */
.step-card { position: relative; padding-top: 34px; border: 2px solid var(--accent-soft); margin-top: 28px; }
.step-card h2 { font-size: 1.45rem; margin-bottom: 10px; }
/* Its tag is the standard card's (screens rule 20): light, on its top edge. */
.step-card .assistant-type { position: absolute; top: -13px; left: 22px; }
.step-card { padding-top: 40px; margin-top: 36px; }
/* A section read from the website, to fix and approve. */
/* Each change its own card, space between them, so its buttons plainly belong to it (the owner, 2026-11-01: "could use some
   spacing, so i can tell them apart, i am not sure which button refers to what content"). */
.draft-section.card { display: grid; gap: 10px; margin: 36px 0 0; }
.draft-section h3 { margin: 0; }
.draft-section__text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
/* Read as text; Edit opens the fields. */
.draft-section .draft-edit { display: none; }
.draft-section.is-editing .draft-edit { display: grid; gap: 8px; }
.draft-section.is-editing .draft-view, .draft-section.is-editing h3 { display: none; }
.draft-section[hidden] { display: none; }
.draft-section__approve { font-weight: 600; font-size: .9rem; display: flex; gap: 6px; align-items: center; }
.draft-section__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
/* Inconsistencies found in new information (the owner, 2026-11-01): the summary, each one to resolve, the difference. */
.draft-summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px 16px;
  border: 1.5px solid var(--warn); border-radius: 12px; background: var(--surface-2); margin-bottom: 4px; }
.draft-summary p { margin: 0; flex: 1 1 320px; }
.draft-section__head > span { display: inline-flex; gap: 6px; align-items: center; }
.draft-section__resolved, .draft-section.is-resolved .draft-section__open { display: none; }
.draft-section.is-resolved .draft-section__resolved { display: inline-flex; }
.draft-advice { margin: 0; }
.draft-advice .label { margin-right: 6px; }
.diff { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--surface); }
.diff .label { margin: 0 0 6px; display: flex; justify-content: space-between; gap: 12px; }
.diff__key { text-transform: none; letter-spacing: 0; font-weight: 400; }
.diff__text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .93rem; max-height: 320px; overflow-y: auto; }
.diff del { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); text-decoration: line-through; }
.diff ins { background: color-mix(in srgb, var(--icon) 18%, transparent); color: var(--ink); text-decoration: none; }
.resolve-step__title { margin: 6px 0 12px; }
.resolve-step__issue { white-space: pre-wrap; }
.resolve-step .label { margin: 14px 0 4px; }
.resolve-options { display: flex; flex-wrap: wrap; gap: 8px; }
.file-row { margin-bottom: 8px; }
.reading { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); }
.reading .spin { display: inline-block; }
.skill-note { margin: -10px 0 16px; font-size: .85rem; color: var(--note); }
.assistant-head h3 { margin: 0; min-width: 0; overflow-wrap: anywhere; font-size: 1.45rem; }
/* On or off: a small switch at the left of the card's buttons; an assistant that's off is greyed. */
.assistant-switch { margin-right: auto; }
.switch { display: inline-flex; align-items: center; gap: 8px; padding: 3px 10px 3px 3px; border: 1px solid var(--line); border-radius: 999px;
          background: var(--surface-2); color: var(--ink-2); font: 600 .8rem var(--sans); cursor: pointer; }
.switch__knob { width: 18px; height: 18px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.switch.on { background: var(--icon); border-color: var(--icon); color: var(--surface); flex-direction: row-reverse; padding: 3px 3px 3px 10px; }
.assistant-card.is-off h3, .assistant-card.is-off .assistant-number { color: var(--ink-3); }
.link-sm { font-size: .85rem; color: var(--ink-2); }
/* Remove: a small red pill with a trash can, at the left of a card's buttons (the others stay at the right). */
.remove-pill { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; padding: 5px 12px; border-radius: 999px;
               border: 1.5px solid var(--danger); color: var(--danger); background: none; font: 600 .82rem var(--sans); text-decoration: none; }
.remove-pill:hover, .remove-pill:focus-visible { background: var(--danger); color: var(--surface); }
.btn.danger { background: var(--danger); border-color: var(--danger); color: var(--surface); }
/* Its buttons at the bottom right, a little smaller than the usual pill. */
.assistant-actions { margin-top: auto; justify-content: flex-end; }
.btn.btn-sm { padding: 5px 14px; font-size: .85rem; }
/* A card modal's buttons: the same size as the page's buttons that open it. */
dialog.modal.modal--card .modal-actions .btn { padding: 5px 14px; font-size: .85rem; }
.assistant-number { flex: none; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.assistant-card { display: flex; flex-direction: column; position: relative; padding-top: 30px; border: 2px solid var(--accent-soft); }
.assistant-card.company { border-color: var(--accent); }
/* Page cards' titles 15% bigger than a tag (the owner, 2026-10-31: the standard for page cards). */
.assistant-type { position: absolute; top: -13px; left: 22px; background: var(--accent-soft); color: var(--accent); font-size: .83rem; padding: 3px 12px; }
.assistant-card.company .assistant-type { background: var(--accent); color: var(--surface); }
/* Two to a row, each half the width, even when there's only one; one to a row on a phone. */
.assistant-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; margin-top: 12px; }
@media (max-width: 640px) { .assistant-grid { grid-template-columns: 1fr; } }
/* An assistant's details, a card each in two columns, each card only as tall as what's in it (the owner, 2026-10-30). */
.assistant-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; align-items: start; margin: 12px 0 28px; }
.assistant-columns > div { display: flex; flex-direction: column; gap: 32px; }
@media (max-width: 640px) { .assistant-columns { grid-template-columns: 1fr; } }
/* How much is left, as a bar (credits this month). */
/* A usage meter: it fills as credits are used (the owner, 2026-10-31), a deep fill in a pale, outlined slot. */
.meter-head, .meter-foot { display: flex; justify-content: space-between; gap: 12px; }
.meter-head { margin-top: 18px; }
.meter-foot { margin-top: 6px; }
.meter-foot + .hint { margin-top: 4px; }
.meter { height: 10px; border-radius: 999px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; margin-top: 8px; }
.meter span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.list { list-style: none; padding: 0; margin: 0; }
.list li { padding: 14px 0; border-bottom: 1px solid var(--line); }
.list li:last-child { border-bottom: 0; }

/* ---- the signed-in places down the left (like forceware.io's): a column of pill links, flush under the header
   (64px and its 1px border) and the window's full height ---- */
/* It stays where it is and never scrolls (the owner, 2026-11-01: "make the side bar static and never scrolls"): fixed under
   the header, top to bottom; the page and the footer start after it. */
:root { --nav-w: 264px; }
.shell { display: flex; align-items: flex-start; }
.side-nav { position: fixed; z-index: 5; left: 0; top: 65px; bottom: 0; width: var(--nav-w); display: flex; flex-direction: column; gap: 2px;
            padding: 8px 14px 20px; background: var(--surface); overflow: hidden; }
.side-nav__item { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 999px; white-space: nowrap;
                  color: var(--ink-2); text-decoration: none; font-size: .95rem; font-weight: 500; }
.side-nav__item svg { flex: none; color: var(--icon); }
.side-nav__item:hover { background: var(--surface-2); color: var(--ink); }
.side-nav__item:hover svg, .side-nav__item.is-active svg { color: var(--icon); }
.side-nav__item.is-active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
/* The title: their plan, over the places, one line the height of a link. */
.side-nav__title { display: flex; align-items: center; gap: 10px; padding: 9px 14px; margin-bottom: 6px;
                   border-bottom: 1px solid var(--line); border-radius: 0; color: var(--accent); white-space: nowrap;
                   font-size: .95rem; line-height: 1.6; }
.side-nav__title svg { flex: none; color: var(--icon); }
.side-nav__title .side-nav__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.side-nav__plan { font-weight: 600; color: var(--ink); }
.side-nav__title .side-nav__label { flex: 1; }
/* Collapse: just its arrow, at the title's right; its name is the tooltip. */
.side-nav__fold { flex: none; display: grid; place-items: center; width: 28px; height: 28px; margin: -2px -8px -2px auto; padding: 0;
                  border: 0; border-radius: 50%; background: none; color: var(--icon); cursor: pointer; }
.side-nav__fold:hover { background: var(--surface-2); color: var(--icon); }
.side-nav__fold svg { transition: transform .18s ease; }
/* Folded to its icons (the button at its foot; site.js remembers it in this browser). A row on a phone doesn't fold. */
@media (min-width: 821px) {
  html[data-nav="folded"] { --nav-w: 68px; }
  html[data-nav="folded"] .side-nav__item, html[data-nav="folded"] .side-nav__title { padding-inline: 11px; gap: 0; }
  html[data-nav="folded"] .side-nav__fold svg { transform: rotate(180deg); }
  html[data-nav="folded"] .side-nav__title > svg { display: none; }
  html[data-nav="folded"] .side-nav__fold { margin: -5px; width: 28px; }
  html[data-nav="folded"] .side-nav__label { display: none; }
}
/* Every page's title beside the nav: one font, one size, the same distance below the header (the owner, 2026-10-29);
   what follows it (a notice, a line under it) sits below. */
.shell__main h1 { font-family: var(--serif); font-size: 2.2rem; line-height: 1.2; margin: 0 0 18px; }
.shell__main h1 + .muted { margin-top: -8px; }
/* A page's title with a search box at the right of the same row. */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 18px; }
.page-head h1 { margin: 0; }
.page-search { width: min(280px, 45%); padding: 9px 14px 9px 36px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--surface)
               url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2337c0bb' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E")
               no-repeat 13px center; color: var(--ink); font: .95rem var(--sans); }
.page-search:focus { border-color: var(--accent-2); outline: none; }
@media (max-width: 640px) { .page-head { flex-direction: column; align-items: stretch; } .page-search { width: 100%; } }
/* An assistant's skills, in tabs: Acquired and Available. */
.tabs.tabs--full { display: flex; width: 100%; }
/* A settings gear at the end of a tabs' row (Home's Coordinator settings). */
.tabs__tools { margin-left: auto; align-self: center; display: flex; align-items: center; gap: 2px; }
.tabs__form { margin: 0; display: contents; }
.tabs .tabs__tools .icon-btn { padding: 0; border-bottom: 0; color: var(--ink-2); }
.tabs .tabs__tools .icon-btn:hover { color: var(--accent); }
.tabs__refresh.is-busy svg, .tabs__refresh.busy svg { animation: spin 1s linear infinite; }
[data-view="acquired"] .only-available, [data-view="available"] .only-acquired { display: none; }
.title-sep { color: var(--ink-3); font-weight: 400; margin: 0 .1em; }
.shell__main { flex: 1; min-width: 0; margin-left: var(--nav-w); padding: 16px 36px 48px; }
/* A page's own .wrap sits inside the shell's: no second gutter, its left edge in line with the header's trail (both
   36px past the nav; the owner, 2026-10-29). */
.shell__main .wrap { max-width: 1040px; margin-inline: 0; padding: 0 !important; }
.shell__main .wrap.narrow { max-width: 620px; }
/* The footer starts after the nav, not under it. */
.shell ~ .foot { margin-top: 0; margin-left: var(--nav-w); }
/* Its lines start and end where the page's content does: 36px past the nav, at most the content's 1040px. */
.shell ~ .foot .wrap { max-width: calc(1040px + 72px); margin-inline: 0; padding-inline: 36px; }
/* With the nav, the header runs the window's width: the logo over the nav, lined up with its icons (its 14px padding and
   the links' 14px), the avatar at the far right. */
.has-nav .top .wrap { max-width: none; padding-inline: 28px; }

@media (max-width: 820px) {
  /* The places become a row under the header that scrolls sideways. */
  .shell { flex-direction: column; }
  .side-nav { position: static; flex: none; width: 100%; height: auto; flex-direction: row; overflow-x: auto; padding: 8px 12px; }
  .shell__main { margin-left: 0; padding: 20px 20px 40px; }
  .shell ~ .foot { margin-left: 0; }
  .shell ~ .foot .wrap { padding-inline: 20px; }
  .side-nav__item { flex: none; padding: 8px 14px; }
  /* A row has room for its labels: nothing to fold. */
  .side-nav__fold { display: none; }
  .side-nav__title { flex: none; padding: 4px 14px 4px 6px; margin: 0 6px 0 0; border-bottom: 0; border-right: 1px solid var(--line); }
  .has-nav .top .wrap { padding-inline: 20px; }
}

@media (max-width: 640px) {
  .nav a.hide-sm { display: none; }
  .hero { padding: 48px 0 32px; }
  .form-card { padding: 22px; }
}

/* ---- Home: Briefer's brief, and the chat with the assistant ---- */
.brief__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.brief__headline { font: 600 1.1rem var(--sans); margin-top: 0; }
.brief__items { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.brief__items li { padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; border-left-width: 4px; }
/* What needs them, highlighted (Briefer's settings choose which): past deadline red, urgent orange, coming up amber. */
.brief__items li.is-overdue { border-color: var(--danger); background: #fbeae6; }
.brief__items li.is-urgent { border-color: var(--warn); background: #fcefe3; }
.brief__items li.is-soon { border-color: #d9a227; background: #fbf4df; }
.urgency { display: inline-block; margin-right: 6px; padding: 1px 8px; border-radius: 999px; font: 700 .7rem var(--sans);
           letter-spacing: .06em; text-transform: uppercase; color: var(--surface); background: var(--ink-3); }
.is-overdue .urgency { background: var(--danger); }
.is-urgent .urgency { background: var(--warn); }
.is-soon .urgency { background: #b8860b; }
.assistant-chat__log { display: flex; flex-direction: column; gap: 8px; max-height: 420px; overflow-y: auto; margin-bottom: 12px; }
.assistant-chat .m { margin: 0; padding: 10px 14px; border-radius: 14px; max-width: 80%; white-space: pre-wrap; }
.assistant-chat .m.a { background: var(--surface-2); align-self: flex-start; }
.assistant-chat .m.o { background: var(--accent-soft); align-self: flex-end; }
.assistant-chat .m.e { background: var(--warm-soft); color: var(--note); align-self: flex-start; }
.assistant-chat__form { display: flex; gap: 8px; align-items: center; }
.assistant-chat__form textarea { flex: 1; resize: none; min-height: 44px; }
.assistant-chat__form .btn { flex: none; width: 44px; height: 44px; padding: 0; display: grid; place-items: center; border-radius: 50%; }
/* A brief item's task: who has it, and take / assign / done. Done items go quiet. */
.task { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.task__who { font: 600 .82rem var(--sans); color: var(--ink-2); margin-right: auto; }
.task__actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0; }
.task__to { width: auto; padding: 5px 34px 5px 10px; font-size: .85rem; background-position: right 12px center; }
.brief__items li.is-done { opacity: .6; }
.brief__items li.is-done strong { text-decoration: line-through; }
.company-pill { display: inline-block; margin-left: 10px; padding: 2px 10px; border-radius: 999px; vertical-align: middle;
                background: var(--accent); color: var(--surface); font: 700 .7rem var(--sans); letter-spacing: .08em; text-transform: uppercase; }
/* Home: today's activity (free), and asking for a brief. */
.activity__list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.activity__list li { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.activity__list li .link-sm { margin-left: auto; }
.brief__ask { margin: 14px 0; }
.brief__value { margin-top: 0; padding: 10px 14px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); }
.todo-count { margin: 0 0 6px; font-weight: 600; }
.todo-count a { color: var(--accent); }
/* Home: Today and Brief, in tabs. */
[data-view="today"] .only-brief, [data-view="brief"] .only-today { display: none; }
/* Call Handler's two tabs (the owner, 2026-10-31). */
[data-view="settings"] .only-instructions, [data-view="instructions"] .only-settings { display: none; }
/* The assistant's page's three tabs (the owner, 2026-10-31). */
[data-view="settings"] .only-skills, [data-view="instructions"] .only-skills,
[data-view="skills"] .only-settings, [data-view="skills"] .only-instructions { display: none; }
.skill-week { margin: -4px 0 10px; font: 600 .88rem var(--sans); color: var(--accent); }
.brief__ask-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
/* Pricing: "Show more…", a card like the skills', to open the rest. */
.show-more { display: grid; place-content: center; gap: 6px; text-align: center; cursor: pointer; border: 1.5px dashed var(--line); font: inherit; color: var(--accent); }
.show-more:hover { border-color: var(--accent-2); }
.show-more__label { font: 600 1.1rem var(--serif); }
/* Their own assistant, in the corner (signed in). */
.my-chat__button { position: fixed; bottom: 20px; right: 20px; z-index: 900; width: 56px; height: 56px; border: 0; border-radius: 50%;
                   background: var(--accent); color: var(--surface); cursor: pointer; box-shadow: 0 6px 24px rgba(0,0,0,.2); display: grid; place-items: center; }
.my-chat__panel { position: fixed; bottom: 88px; right: 20px; z-index: 900; width: 380px; max-width: calc(100vw - 40px); height: 540px;
                  max-height: calc(100vh - 110px); display: flex; flex-direction: column; background: var(--surface); border-radius: 16px;
                  box-shadow: 0 12px 40px rgba(0,0,0,.25); padding: 0 14px 10px; }
.my-chat__panel[hidden] { display: none; }
.my-chat__head { display: flex; align-items: center; gap: 8px; padding: 12px 2px; border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.my-chat__who { width: auto; padding: 4px 30px 4px 8px; font-weight: 600; }
.my-chat__close { margin-left: auto; background: none; border: 0; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--ink-2); }
.my-chat__log { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.my-chat .m { margin: 0; padding: 9px 13px; border-radius: 14px; max-width: 85%; white-space: pre-wrap; }
.my-chat .m.a { background: var(--surface-2); align-self: flex-start; }
.my-chat .m.o { background: var(--accent-soft); align-self: flex-end; }
.my-chat .m.e { background: var(--warm-soft); color: var(--note); align-self: flex-start; }
.my-chat__foot { margin: 6px 0 0; font-size: .78rem; }
@media (max-width: 480px) { .my-chat__panel { inset: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; border-radius: 0; } }
/* Home: a day with your assistant. */
.day { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 14px; }
/* Two columns on one baseline: the time lines up with its description's first line. */
.day li { display: grid; grid-template-columns: 96px 1fr; align-items: baseline; column-gap: 0; }
.day__time { font: 600 .9rem var(--sans); color: var(--accent); }
@media (max-width: 480px) { .day li { grid-template-columns: 1fr; } }
/* Headings wrap in even lines, never one word left alone (the owner, 2026-10-29: "break it evenly"). */
h1, h2, h3 { text-wrap: balance; }
/* The sidebar's title: a long business name ends in an ellipsis. */
.side-nav__title .side-nav__label { min-width: 0; overflow: hidden; }
.side-nav__plan { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Billing (084): a cycle's transactions. */
.billing-cycle { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ledger .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ledger .plus { color: var(--accent); }

/* Contacts: finding someone. */
.contacts-search { display: flex; gap: 8px; align-items: center; margin: 0 0 16px; max-width: 560px; }
.contacts-search input[type=search] { flex: 1; width: auto; padding: 8px 12px; border: 1.5px solid var(--line); border-radius: 10px;
                                      background: var(--surface); color: var(--ink); font: 1rem var(--sans); }

/* The plan, at the sidebar's bottom (the account's owner). */
.side-nav__bottom { margin-top: auto; }

/* The workspace switcher under the sidebar's title (121): each workspace they're in, with their role there. */
.ws-switch { margin: 0 8px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.ws-switch summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; cursor: pointer;
                     list-style: none; font-weight: 600; font-size: .9rem; }
.ws-switch summary::-webkit-details-marker { display: none; }
.ws-switch ul { list-style: none; margin: 0; padding: 4px; border-top: 1px solid var(--line); }
.ws-switch a { display: flex; justify-content: space-between; gap: 8px; padding: 7px 8px; border-radius: 8px; color: var(--ink);
               text-decoration: none; font-size: .9rem; }
.ws-switch a:hover, .ws-switch a.is-active { background: var(--accent-soft); color: var(--accent); }
.ws-switch__role { color: var(--ink-2); font-size: .8rem; }

/* The team, a card each (123): their role on its top edge, the pencil at its top right. */
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 28px 20px; margin-top: 12px; }
.team-card { position: relative; margin: 0; }
.team-card h3 { margin: 4px 0 4px; font-size: 1.15rem; }
.team-card__edit { position: absolute; top: 10px; right: 10px; }

/* A search on a tabs' row, at its right (the assistant's skills; the owner, 2026-10-31). */
.tabs .tabs__search { margin: 0 0 6px auto; align-self: center; max-width: 280px; }
@media (max-width: 640px) { .tabs .tabs__search { max-width: 160px; } }

/* A calendar's cards, shown read only (screens rule 18): a line each, the pencil at the card's top right. */
.calendar-card { position: relative; }
.calendar-card__edit { position: absolute; top: 10px; right: 10px; }
.calendar-shown { list-style: none; margin: 0; padding: 0; }
.calendar-shown li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.calendar-shown li:first-child { border-top: 0; }

/* Adding a row in a modal of rows (another day closed): labelled fields on one line, Add at its end (screens: one style). */
.calendar-add-row { display: grid; grid-template-columns: 190px minmax(0, 1fr) auto; gap: 12px; align-items: end; margin-top: 16px;
                    padding-top: 14px; border-top: 1px solid var(--line); }
.calendar-add-row .field { margin: 0; }
@media (max-width: 640px) { .calendar-add-row { grid-template-columns: 1fr; } }

/* Required fields (screens rule 24): a star on each; submitting with one empty borders them red and shakes the first (site.js). */
.field:has([required]) > label.caps::after { content: " *"; color: var(--danger); }
.agree-terms:has([required]) > span::after, .req::after { content: " *"; color: var(--danger); }
.missing { border-color: var(--danger) !important; box-shadow: 0 0 0 1px var(--danger); }
label.missing { outline: 2px solid var(--danger); outline-offset: 4px; border-radius: 6px; box-shadow: none; }
.shake { animation: shake .5s ease-in-out 4; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { .shake { animation: none; } }

/* A new sign-up's free trial, at master's Terms gate (/accept; the owner's design, 2026-11-01): what it gives, the day it ends, then the Terms. */
.trial-head { text-align: center; margin: 28px 0 22px; }
.trial-head .label { color: var(--accent); margin: 0 0 6px; }
.trial-head h1 { margin: 0 0 8px; }
.trial-step .card { margin-bottom: 20px; padding: 26px 28px; }
.trial-stats { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.trial-stats > div { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 12px; }
.trial-stats > div + div { border-left: 1px solid var(--line); }
.trial-stats strong { font-family: var(--serif); font-size: 1.6rem; line-height: 1.2; margin-top: 8px; }
.trial-stats span:not(.trial-icon) { color: var(--ink-2); font-size: .92rem; }
.trial-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--accent-soft); }
.trial-icon svg, .trial-begins svg { width: 22px; height: 22px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.trial-everything { margin: 20px 0 10px; color: var(--ink); }
.trial-checks { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 32px; }
.trial-checks li { display: flex; align-items: center; gap: 12px; }
.trial-checks li::before { content: "\2713"; display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent); font-size: .8rem; font-weight: 700; }
.trial-begins { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 10px; background: var(--accent-soft); }
.trial-ending { margin-top: 14px; padding: 12px 16px; border-radius: 10px; border: 1px solid var(--danger); }
.trial-ending p { margin: 0; }
.trial-ending .label { color: var(--danger); margin-bottom: 4px; }
.trial-begins strong { color: var(--accent); }
.trial-terms h2 { margin: 0 0 14px; }
.trial-terms > .label { color: var(--ink); margin: 0 0 6px; }
.trial-terms > ul { margin: 0 0 16px; padding-left: 20px; }
.trial-terms > ul li { margin: 4px 0; }
.terms-scroll { max-height: 340px; overflow-y: auto; padding: 4px 16px 4px 0; border-top: 1px solid var(--line); }
.terms-scroll h1, .terms-scroll h2 { font-size: 1.15rem; margin-top: 22px; }
.trial-agree { display: flex; gap: 12px; align-items: center; font-size: .95rem; margin: 22px 0 6px; cursor: pointer; }
.trial-agree input { width: 20px; height: 20px; flex: none; }
.trial-go { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 14px; }
.btn.solid { background: var(--accent); color: var(--surface); border-color: var(--accent); padding: 12px 28px; font-family: var(--serif); font-size: 1.1rem; }
.btn.solid:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 640px) {
  .trial-stats { grid-template-columns: 1fr; gap: 18px; }
  .trial-stats > div + div { border-left: none; border-top: 1px solid var(--line); padding-top: 18px; }
  .trial-checks { grid-template-columns: 1fr; }
}

/* A chat's status, fixed between its messages and the message box (the owner, 2026-11-01). */
.chat-status { min-height: 24px; padding: 2px 4px 4px; font-size: .85rem; color: var(--ink-2); }

/* Master's choice of region (143). */
.choose-region { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }

/* A skill's sources of information (the owner, 2026-11-01): its website and documents in one card, one after the other. */
.source + .source { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 16px; }
.source__title { margin: 0 0 8px; font-size: 1.05rem; }

/* What a skill knows, on its own page (the owner, 2026-11-01): contents on the left, the sections on the right. */
.knowledge-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.knowledge-head form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.knowledge { display: grid; grid-template-columns: minmax(200px, 280px) minmax(0, 1fr); gap: 32px; align-items: start; margin-top: 12px; }
.knowledge__toc { position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow-y: auto; padding-right: 8px; }
.knowledge__toc ol { margin: 0; padding-left: 2.4em; }
.knowledge__toc li { margin: 6px 0; font-size: .93rem; }
.knowledge__section { padding: 18px 0 22px; border-bottom: 1px solid var(--line); scroll-margin-top: 80px; }
.knowledge__section:first-child { padding-top: 0; }
.knowledge__section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.knowledge__section h2 { margin: 0 0 8px; font-size: 1.3rem; }
.knowledge__text { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); }
@media (max-width: 760px) { .knowledge { grid-template-columns: 1fr; } .knowledge__toc { position: static; max-height: none; } }
/* The build, after the name in the footer. */
.version { color: var(--ink-3); margin-left: 4px; font-variant-numeric: tabular-nums; }
/* Stop, at the end of a working line (a reading, an upload, a merge). */
.reading__stop { margin-left: auto; color: var(--danger); }
.reading__stop:hover { color: var(--danger); background: none; }
/* A text box as tall as its text (data-grow, site.js): no scrollbar inside, no corner to drag. */
textarea[data-grow] { overflow: hidden; resize: none; }
/* A source's label over its button, as a field's (Your website, as Files or a zip). */
.source__label { margin: 0 0 6px; }
/* Provide Information's Expires on: left on its modal's buttons row; the chosen day in place of the picker. */
.expires { margin-right: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.expires__tick { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .9rem; }
.expires__when { display: inline-flex; align-items: center; gap: 6px; }
.expires__when[hidden], .expires__when [hidden] { display: none; }
.expires__shown { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); cursor: pointer; }
/* A field's label with its buttons on the same row, right (Answers calls as). */
.field__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.field__head .label { margin: 0; }

/* An add-on's pill, top right on its card's border (AddOnPill; the owner, 2026-11-01): circling arrows while it renews, an
   hourglass, warm, once it's going away. The same on every add-on. */
.addon-pill { position: absolute; top: -12px; right: 22px; display: inline-flex; align-items: center; gap: 5px; padding: 3px 11px;
              border-radius: 999px; border: 1.5px solid var(--accent); background: var(--surface); color: var(--accent);
              font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1.4; cursor: default; }
.addon-pill.ending { border-color: var(--warm); color: var(--warm); }
.addon-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
.addon-line .addon-state { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-size: .9rem; }
.addon-line .addon-state.ending { color: var(--warm); }
.addon-line form { margin-left: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* A skill's setup steps (SkillSetup): one card each, in order; what to copy in a box with its Copy button. */
.setup-steps { display: grid; gap: 32px; margin-top: 24px; }
.setup-copy { position: relative; }
.setup-copy pre { max-height: 320px; overflow: auto; margin: 8px 0 0; padding: 12px 14px; border-radius: 8px; background: var(--surface-2, var(--accent-soft));
                  font-size: .8rem; line-height: 1.45; white-space: pre; }
.setup-copy .btn { position: absolute; top: 16px; right: 12px; }

/* A request waiting for permission (176): its answer, then its story. */
.need-answer { margin-top: 10px; display: grid; gap: 8px; max-width: 520px; }
.need-answer .field { margin: 0; }
.story { margin-top: 8px; }
.story__steps { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13px; }