/* Colour, type and radius tokens live in /homla.css (Plan v1, light + dark).
         The legacy names used below (--paper, --ink, --muted, --rule, --spark ...)
         are aliases defined there. */
      * { box-sizing: border-box; }
      body { margin:0; background:var(--paper); color:var(--ink);
        font-family:var(--sans); line-height:1.5; font-size:15px; -webkit-font-smoothing:antialiased; }
      ::selection { background:var(--spark); color:var(--paper); }
      header { display:flex; align-items:center; justify-content:space-between;
        padding:18px 28px; border-bottom:1px solid var(--rule); }
      .brand { font-family:var(--display); font-weight:800; letter-spacing:-0.03em; font-size:21px;
        display:flex; align-items:center; gap:8px; }
      .wrap { max-width:1040px; margin:0 auto; padding:40px 32px 96px; }

      /* ---- Sign in ---------------------------------------------------------
         The front door. It used to inherit the app's full-width container, so a
         single email field stretched 1180px across a page that was otherwise
         empty, with the whole form stranded in the top-left corner. A sign-in
         form has one job and should be sized to that job: a narrow column,
         optically centred (slightly above true centre, which is where the eye
         expects a focal point), with the field the width of the thing it holds. */
      .signin { max-width:380px; margin:0 auto; min-height:min(62vh, 520px);
        display:flex; flex-direction:column; justify-content:center; }
      .signin h1 { margin-bottom:10px; }
      .signin-sub { color:var(--muted); font-size:14px; line-height:1.55; margin:0 0 26px; }
      .signin label { margin-top:0; }
      .signin input { margin-bottom:14px; }
      .signin-captcha { margin-top:14px; }
      .signin-captcha:empty { display:none; }
      .signin button { width:100%; }
      .signin button.signin-switch { width:auto; align-self:center; margin-top:18px; background:transparent; border:0; padding:0;
        color:var(--muted); font-size:13px; text-decoration:underline; text-underline-offset:3px; }
      .signin button.signin-switch:hover { background:transparent; color:var(--ink); }

      /* ---- Page head -------------------------------------------------------
         Title, a quiet count, and the screen's actions on ONE line. Actions
         belong here, not repeated on every row: a button drawn once at the top
         is an affordance, the same button drawn forty times is noise. */
      .page-head { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin:0 0 6px; }
      .page-head .count { font-family:var(--mono); font-size:12px; color:var(--muted); }
      .page-sub { color:var(--muted); font-size:14px; max-width:62ch; margin:0 0 28px; line-height:1.5; }
      .page-tools { display:flex; align-items:center; gap:8px; margin:0 0 4px; }
      .page-tools input, .page-tools select { width:auto; min-width:220px; }
      .page-tools select { min-width:150px; }

      /* ---- Table -----------------------------------------------------------
         The list primitive for every screen. Rows are hairline-separated rather
         than boxed: a border around each item competes with the border around
         the next one, and the eye ends up reading frames instead of content.
         Columns give the eye a fixed path down the page, which is the whole
         reason a list of forty things stays readable. */
      .tbl { width:100%; border-collapse:collapse; margin:8px 0 0; table-layout:fixed; }
      /* Fixed layout plus explicit widths, because `auto` sizes columns to their
         content: the first column swallowed the width its text needed and the
         rest bunched up on the left with dead space trailing off to the right.
         Stating the proportions puts the metadata where the eye expects it. */
      .tbl col.c-main { width:auto; }
      .tbl col.c-md   { width:16%; }
      .tbl col.c-sm   { width:11%; }
      .tbl col.c-xs   { width:7%; }
      .tbl col.c-act  { width:190px; }
      .tbl thead th { font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em;
        color:var(--muted); font-weight:500; text-align:left; padding:0 12px 10px; border-bottom:1px solid var(--rule); white-space:nowrap; }
      .tbl thead th.num { text-align:right; }
      /* Rows breathe. The reference this is measured against runs ~90px rows and
         reads as a calm list; at 44px it read as a spreadsheet. */
      .tbl tbody td { padding:18px 12px; border-bottom:1px solid var(--rule); vertical-align:middle; font-size:14px; }
      .tbl tbody td:first-child { vertical-align:top; }
      .pack-shot { display:block; width:100%; height:auto; max-width:640px; aspect-ratio:1200/630; object-fit:cover; border:1px solid var(--ink); margin:0 0 16px; }
      /* Packs detail: the slug column wraps, and stacks under the name on a phone. */
      .tbl.pack-contents td.t-mono { width:38%; overflow-wrap:anywhere; }
      @media (max-width:640px) {
        .tbl.pack-contents, .tbl.pack-contents > tbody { display:block; width:auto; min-width:0; overflow:visible; }
        .tbl.pack-contents tr, .tbl.pack-contents td, .tbl.pack-contents td.t-mono { display:block; width:auto; min-width:0; white-space:normal; }
        .tbl.pack-contents td, .tbl.pack-contents tbody tr:last-child td { border-bottom:0; padding:0 0 4px; }
        .tbl.pack-contents tr { border-bottom:1px solid var(--rule); padding:14px 0; }
        .tbl.pack-contents .t-sub { white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
      }
      .tbl tbody td.num { text-align:right; white-space:nowrap; }
      .tbl tbody tr:last-child td { border-bottom:1px solid var(--rule); }
      .tbl tbody tr.clickable { cursor:pointer; }
      .tbl tbody tr.clickable:hover td { background:var(--raise); }
      .tbl tbody tr.open td { background:var(--raise); }
      .tbl td:first-child, .tbl th:first-child { padding-left:2px; }
      .tbl td:last-child, .tbl th:last-child { padding-right:2px; }
      /* The one strong element per row. Everything else is secondary by design. */
      .t-name { font-weight:600; font-size:15px; letter-spacing:-0.01em; }
      .t-sub { color:var(--muted); font-size:13px; margin-top:3px; line-height:1.45;
        display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
      .t-dim { color:var(--muted); font-size:13px; white-space:nowrap; }
      .t-mono { font-family:var(--mono); font-size:12px; color:var(--muted); }
      /* Row actions stay quiet until the row is under the cursor. Three buttons
         drawn on every row is what made the People list read as a form rather
         than a list; keyboard focus still reveals them. */
      .row-actions { display:inline-flex; gap:6px; opacity:0; transition:opacity .08s ease; }
      .tbl tbody tr:hover .row-actions, .row-actions:focus-within { opacity:1; }
      @media (hover:none) { .row-actions { opacity:1; } }
      /* Selects sitting inside a table cell should not stretch the column. */
      .tbl td select { width:auto; min-width:140px; padding:5px 8px; font-size:13px; }
      /* Pages list. */
      .pg-tbl col.pg-c-url { width:28%; } .pg-tbl col.pg-c-acc { width:96px; }
      .pg-tbl col.pg-c-n { width:64px; } .pg-tbl col.pg-c-date { width:92px; }
      .pg-tbl col.pg-c-auth { width:96px; }
      .pg-tbl tbody td { padding:11px 10px; }
      .pg-tbl tbody tr.pg-row td:first-child { vertical-align:middle; }
      .pg-ellipsis { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
      .pg-name .t-name { font-size:14px; }
      .pg-sub { display:flex; align-items:center; gap:6px; margin-top:2px; min-width:0; }
      .pg-slug { font-family:var(--mono); font-size:12px; color:var(--muted); }
      .pg-chip { flex:none; font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.04em;
        border:1px solid var(--rule); padding:0 5px; color:var(--ink); background:var(--sunk); max-width:45%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
      .pg-url-line { display:flex; align-items:center; gap:4px; min-width:0; }
      .pg-path { flex:1 1 auto; font-family:var(--mono); font-size:12px; color:var(--ink); }
      .pg-icon { flex:none; display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; padding:0;
        border:1px solid transparent; background:transparent; color:var(--ink); cursor:pointer; }
      .pg-icon:hover { border-color:var(--ink); background:var(--paper); color:var(--ink); }
      .pg-acc .pill { white-space:nowrap; display:inline-block; }
      .pg-num { font-variant-numeric:tabular-nums; font-size:13px; color:var(--ink); }
      .pg-meta { font-size:13px; color:var(--muted); white-space:nowrap; }
      a.pg-row-link { display:block; color:var(--ink); text-decoration:none; }
      .pg-row:hover a.pg-row-link { text-decoration:underline; text-underline-offset:3px; }
      /* Page screen: breadcrumb, header, then main (traffic, files) + side (access, details). */
      .pg-crumb { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); margin-bottom:14px; min-width:0; }
      .pg-crumb a { color:var(--muted); text-decoration:none; flex:none; } .pg-crumb a:hover { color:var(--ink); text-decoration:underline; }
      .pg-crumb [aria-current] { color:var(--ink); }
      .pg-detail { display:flex; flex-direction:column; gap:18px; }
      .pg-layout { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:18px; align-items:start; }
      .pg-main, .pg-side { display:flex; flex-direction:column; gap:18px; min-width:0; }
      .pg-meta-list { display:grid; grid-template-columns:auto minmax(0,1fr); gap:9px 14px; margin:0; font-size:13px; }
      .pg-meta-list dt { color:var(--muted); } .pg-meta-list dd { margin:0; color:var(--ink); min-width:0; text-align:right; }
      .pg-meta-list dd.t-mono { font-size:12px; }
      .pg-missing { padding:28px; display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
      @media (max-width:1000px) { .pg-layout { grid-template-columns:minmax(0,1fr); } }
      .pg-missing h1 { font-size:20px; margin:0; } .pg-missing .pg-open { margin-top:10px; }
      .pg-card { background:var(--paper); border:1px solid var(--rule); border-radius:10px; padding:14px 16px; min-width:0; }
      /* Header: title, URL field with inline copy, primary Open, overflow menu. */
      .pg-head-title { font-family:var(--display); font-size:24px; font-weight:600; color:var(--ink); margin:0 0 12px; }
      .pg-head-row { display:flex; align-items:stretch; gap:8px; }
      .pg-link { flex:1 1 auto; min-width:0; display:flex; align-items:center; height:38px; background:var(--paper); border:1px solid var(--rule); border-radius:8px; padding:0 4px 0 10px; }
      .pg-link:focus-within { border-color:var(--ink); }
      .pg-link-ico { flex:none; display:inline-flex; color:var(--muted); margin-right:8px; }
      input.pg-link-input { flex:1 1 auto; min-width:0; border:0 !important; background:transparent !important; padding:0 !important; box-shadow:none !important; outline:none;
        font-family:var(--mono); font-size:12.5px; color:var(--ink); text-overflow:ellipsis; height:auto; }
      .pg-link-copy { flex:none; display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 10px; border:0; border-left:1px solid var(--rule);
        border-radius:0 6px 6px 0; background:transparent; color:var(--ink); font-size:12px; font-weight:500; cursor:pointer; }
      .pg-link-copy:hover { background:var(--sunk); color:var(--ink); }
      .pg-open { flex:none; display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 16px; border-radius:8px; background:var(--ink); color:var(--paper) !important;
        font-size:13px; font-weight:600; text-decoration:none; border:1px solid var(--ink); }
      .pg-open:hover { background:var(--spark); border-color:var(--spark); }
      .pg-more { position:relative; flex:none; }
      .pg-more-btn { width:38px; height:38px; padding:0; display:inline-flex; align-items:center; justify-content:center; border-radius:8px;
        border:1px solid var(--rule); background:var(--paper); color:var(--ink); cursor:pointer; }
      .pg-more-btn:hover, .pg-more-btn[aria-expanded="true"] { border-color:var(--ink); background:var(--paper); color:var(--ink); }
      .pg-menu { position:absolute; right:0; top:calc(100% + 6px); z-index:20; width:260px; background:var(--paper); border:1px solid var(--rule); border-radius:10px;
        box-shadow:0 12px 32px rgba(14,14,12,.14); padding:6px; }
      .pg-menu.hide { display:none; }
      .pg-menu button { display:flex; flex-direction:column; align-items:flex-start; gap:2px; width:100%; text-align:left; border:0; background:transparent; color:var(--ink);
        padding:8px 10px; border-radius:6px; font-size:13px; font-weight:500; cursor:pointer; }
      .pg-menu button small { font-size:12px; font-weight:400; color:var(--muted); }
      .pg-menu button:hover { background:var(--sunk); color:var(--ink); }
      .pg-menu button.pg-menu-danger, .pg-menu button.pg-menu-danger:hover { color:var(--error); }
      /* Analytics: stat cards + a full-width 30-day chart. */
      .pg-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-bottom:1px solid var(--rule); margin:-14px -16px 14px; }
      .pg-stat { padding:14px 16px; border-right:1px solid var(--rule); min-width:0; }
      .pg-stat:last-child { border-right:0; }
      .pg-stat-label { font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
      .pg-stat-value { font-family:var(--display); font-size:26px; font-weight:600; line-height:1.15; margin-top:4px; color:var(--ink); font-variant-numeric:tabular-nums; }
      .pg-stat-sub { font-size:12px; color:var(--muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
      .pg-chart { display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:10px; }
      .pg-yaxis { display:flex; flex-direction:column; justify-content:space-between; height:150px; font-family:var(--mono); font-size:10.5px; color:var(--muted);
        text-align:right; margin-top:-6px; padding-bottom:0; }
      .pg-yaxis span { line-height:12px; } .pg-yaxis span:last-child { margin-bottom:-6px; }
      .pg-plot { position:relative; height:150px; border-bottom:1px solid var(--rule); }
      .pg-grid-line { position:absolute; left:0; right:0; border-top:1px dashed var(--sunk); }
      .pg-cols, .pg-xaxis { display:grid; grid-template-columns:repeat(30,minmax(0,1fr)); column-gap:4px; }
      .pg-cols { position:absolute; inset:0; align-items:end; }
      .pg-col { position:relative; height:100%; display:flex; align-items:flex-end; cursor:default; outline:none; }
      .pg-bar { position:relative; width:100%; background:var(--spark); border-radius:3px 3px 0 0; transition:opacity .12s ease; }
      .pg-bar.zero { background:var(--sunk); border-radius:1px; }
      .pg-cols:hover .pg-bar:not(.zero) { opacity:.4; }
      .pg-col:hover .pg-bar:not(.zero), .pg-col:focus-visible .pg-bar:not(.zero) { opacity:1; }
      .pg-col:hover .pg-bar.zero, .pg-col:focus-visible .pg-bar.zero { background:var(--rule); }
      .pg-col:hover::before, .pg-col:focus-visible::before { content:""; position:absolute; inset:0 -2px; background:color-mix(in srgb, var(--text) 5%, transparent); border-radius:3px; }
      .pg-tip { display:none; position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); z-index:5; white-space:nowrap;
        background:var(--ink); color:var(--paper); font-size:12px; padding:6px 9px; border-radius:6px; pointer-events:none; box-shadow:0 6px 16px rgba(14,14,12,.2); }
      .pg-tip span { display:block; font-family:var(--mono); font-size:10.5px; opacity:.7; text-transform:uppercase; letter-spacing:.04em; }
      .pg-tip strong { font-size:14px; font-variant-numeric:tabular-nums; }
      .pg-col.l .pg-tip { left:0; transform:none; } .pg-col.r .pg-tip { left:auto; right:0; transform:none; }
      .pg-col:hover .pg-tip, .pg-col:focus-visible .pg-tip { display:block; }
      .pg-xaxis { margin-top:6px; font-family:var(--mono); font-size:10.5px; color:var(--muted); }
      .pg-xaxis span { white-space:nowrap; grid-row:1; }
      .pg-xaxis .mid { justify-self:center; } .pg-xaxis .end { justify-self:end; }
      /* Access (Manus-style option list) + files. */
      .pg-card-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; }
      .pg-card-head .method-title, .pg-files-box summary .method-title { margin:0; }
      .pg-opts { display:flex; flex-direction:column; gap:6px; }
      .pg-opt { display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:10px 12px; border:1px solid var(--rule); border-radius:8px;
        background:var(--paper); color:var(--ink); cursor:pointer; font:inherit; }
      .pg-opt:hover { border-color:var(--muted); background:var(--raise); color:var(--ink); }
      .pg-opt.on, .pg-opt.on:hover { border-color:var(--ink); background:var(--raise); box-shadow:inset 0 0 0 1px var(--ink); }
      .pg-opt-ico { flex:none; width:32px; height:32px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; background:var(--sunk); color:var(--ink); }
      .pg-opt.on .pg-opt-ico { background:var(--ink); color:var(--paper); }
      .pg-opt-text { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:1px; }
      .pg-opt-label { font-size:13.5px; font-weight:600; }
      .pg-opt-desc { font-size:12.5px; color:var(--muted); }
      .pg-opt-radio { flex:none; width:16px; height:16px; border-radius:50%; border:1.5px solid var(--rule); }
      .pg-opt.on .pg-opt-radio { border:5px solid var(--spark); }
      .pg-pwd { display:flex; gap:6px; align-items:center; margin-top:8px; }
      .pg-pwd.hide { display:none; }
      .pg-pwd input { flex:1 1 auto; min-width:0; padding:7px 10px; font-size:13px; }
      .pg-access-err { margin:8px 0 0; font-size:12.5px; color:var(--error); }
      .pg-access-err.hide { display:none; }
      .pg-saved { font-family:var(--mono); font-size:11px; text-transform:uppercase; color:var(--success); }
      .pg-saved:not(:empty)::before { content:"\2713  "; }
      .pg-files-box summary { display:flex; align-items:center; gap:8px; cursor:pointer; list-style:none; }
      .pg-files-box summary::-webkit-details-marker { display:none; }
      .pg-files-box summary svg { margin-left:auto; color:var(--muted); transition:transform .12s ease; }
      .pg-files-box[open] summary svg { transform:rotate(180deg); }
      .pg-cmt { background:var(--tint); color:var(--on-tint); }
      #page-comments { margin-top:16px; }
      #page-comments .pg-card-head { justify-content:flex-start; }
      .pg-cmt-toggle { margin-left:auto; font:400 12px/16px var(--font-sans), system-ui, sans-serif; text-transform:none; letter-spacing:0; white-space:nowrap; color:var(--muted); display:flex; align-items:center; gap:6px; cursor:pointer; }
      .pg-cmt-toggle input { accent-color:var(--spark); }
      .pg-cmt-thread { padding:16px 0; border-top:1px solid var(--rule); display:grid; gap:12px; }
      .pg-cmt-thread.done .pg-cmt-msg { opacity:.6; }
      .pg-cmt-top { display:flex; align-items:center; gap:8px; min-width:0; }
      .pg-cmt-num { flex:none; width:24px; height:24px; border-radius:12px 12px 12px 2px; background:var(--ink); color:var(--paper); font:500 11px/24px var(--mono); text-align:center; }
      .pg-cmt-thread.done .pg-cmt-num { background:var(--text-2); }
      .pg-cmt-quote { font-size:12px; line-height:16px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
      .pg-cmt-where { font:400 11px/16px var(--mono); color:var(--muted); flex:none; }
      .pg-cmt-top .sp { flex:1; }
      .pg-cmt-resolve { flex:none; display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 10px; border:1px solid var(--ink); border-radius:8px; background:var(--raise); color:var(--ink); font:500 12px/16px var(--font-sans), system-ui, sans-serif; cursor:pointer; }
      .pg-cmt-resolve:hover { background:var(--spark); }
      .pg-cmt-resolve.reopen { border-color:var(--text-2); color:var(--muted); background:transparent; }
      .pg-cmt-resolve.reopen:hover { color:var(--ink); border-color:var(--ink); background:var(--sunk); }
      .pg-cmt-done { font:500 11px/16px var(--font-sans), system-ui, sans-serif; padding:0 6px; border-radius:999px; background:var(--ok-tint); color:var(--ok); }
      .pg-cmt-msg { display:grid; grid-template-columns:24px minmax(0,1fr); column-gap:12px; }
      .pg-cmt-msg.reply { margin-left:36px; }
      .pg-cmt-av { width:24px; height:24px; border-radius:999px; background:var(--sunk); color:var(--ink); font:600 11px/24px var(--font-sans), system-ui, sans-serif; text-align:center; text-transform:uppercase; }
      .pg-cmt-av.member, .pg-cmt-av.agent { background:var(--ink); color:var(--paper); }
      .pg-cmt-meta { display:flex; gap:8px; align-items:center; font-size:12px; line-height:24px; min-width:0; }
      .pg-cmt-meta strong { font-size:14px; font-weight:500; }
      .pg-cmt-tag { font-size:11px; line-height:16px; padding:0 6px; border-radius:999px; background:var(--sunk); }
      .pg-cmt-body { grid-column:2; font-size:14px; line-height:20px; overflow-wrap:anywhere; }
      .pg-cmt-body p, .pg-cmt-body div, .pg-cmt-body ul, .pg-cmt-body ol, .pg-cmt-body pre, .pg-cmt-body blockquote { margin:0 0 6px; }
      .pg-cmt-body > :last-child { margin-bottom:0; }
      .pg-cmt-body ul, .pg-cmt-body ol { padding-left:20px; }
      .pg-cmt-body a { color:var(--ink); text-decoration:underline; text-decoration-color:var(--text-2); text-underline-offset:2px; }
      .pg-cmt-body code { font:400 12px/20px var(--mono); background:var(--sunk); border-radius:4px; padding:1px 4px; }
      .pg-cmt-body img { display:block; max-width:min(100%,420px); max-height:280px; margin:6px 0; border:1px solid var(--rule); border-radius:8px; background:var(--sunk); }
      .pg-cmt-actions { display:flex; gap:8px; align-items:center; margin-left:36px; }
      .pg-cmt-input { flex:1; min-width:0; }
      .pg-count { font-family:var(--mono); font-size:11px; color:var(--ink); background:var(--sunk); border-radius:999px; padding:1px 7px; }
      .pg-files { list-style:none; margin:10px 0 0; padding:0; max-height:360px; overflow:auto; }
      .pg-files li { display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12px; line-height:1.4; padding:5px 0; border-top:1px solid var(--sunk); min-width:0; }
      /* App detail (Pages -> Apps -> app). Builds on the pg-* page detail. */
      .app-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; }
      .app-head-main { min-width:0; flex:1 1 320px; }
      .app-head-title { display:flex; align-items:center; gap:10px; min-width:0; }
      .app-head-title .pg-head-title { margin:0; }
      .app-head-title .pill { flex:none; }
      .app-head-meta { font-size:13px; color:var(--muted); margin-top:6px; }
      .app-head-actions { display:flex; align-items:center; gap:8px; flex:none; }
      button.app-btn { height:38px; padding:0 16px; border-radius:8px; }
      .app-banner { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:14px 16px; border-radius:10px;
        border:1px solid var(--rule); border-left:3px solid var(--spark); background:var(--raise); font-size:14px; }
      .app-banner.disabled { border-left-color:var(--error); }
      .app-banner-text { flex:1 1 320px; min-width:0; }
      .app-banner-actions { display:flex; gap:8px; flex:none; }
      .app-diff { list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:4px; }
      .app-diff li { display:flex; align-items:center; gap:8px; font-size:13px; }
      .app-diff-tag { font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.04em; padding:1px 6px; border-radius:4px; background:var(--sunk); color:var(--ink); }
      .app-diff li.add .app-diff-tag { background:var(--spark); color:var(--paper); }
      .app-diff li.remove span:last-child { text-decoration:line-through; color:var(--muted); }
      .app-minis { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:16px; }
      .app-mini { border:1px solid var(--sunk); border-radius:8px; padding:10px 12px; min-width:0; }
      .app-mini.warn { border-color:var(--error); }
      .app-mini-value { font-family:var(--display); font-size:20px; font-weight:600; font-variant-numeric:tabular-nums; margin-top:2px; }
      .app-grid2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
      .app-tbl { width:100%; font-size:13px; }
      .app-tbl th.num, .app-tbl td.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
      .app-person { display:flex; flex-direction:column; min-width:0; }
      .app-person-name { color:var(--ink); }
      .app-person-email { font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; }
      .app-warn-text { color:var(--error); }
      .app-errors { list-style:none; margin:0; padding:0; }
      .app-errors li { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px; font-size:13px; padding:6px 0; border-top:1px solid var(--sunk); }
      .app-filters { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:12px 0; }
      .app-filters select, .app-filters input { width:auto; flex:none; padding:6px 8px; font-size:13px; }
      .app-filters select { max-width:260px; }
      .app-tbl th, .app-tbl td { padding-right:12px; }
      .app-tbl td.pg-meta { white-space:nowrap; }
      .app-conn { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
      .app-conn li { display:flex; gap:10px; align-items:flex-start; }
      .app-conn-logo { flex:none; width:32px; height:32px; border-radius:8px; border:1px solid var(--rule); background:var(--raise); display:inline-flex; align-items:center; justify-content:center; }
      .app-conn-mono { font-family:var(--mono); font-size:11px; }
      .app-conn-name { font-size:13.5px; font-weight:600; }
      .app-conn-tools { display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; }
      .app-tool { font-size:12px; padding:2px 8px; border-radius:999px; background:var(--sunk); color:var(--ink); }
      .app-tool.risky { background:transparent; box-shadow:inset 0 0 0 1px var(--spark); }
      .app-pick { margin-top:10px; display:flex; flex-direction:column; gap:4px; max-height:260px; overflow:auto; }
      .app-check { display:flex; align-items:center; gap:8px; margin:0; font-family:var(--sans); font-size:13px; text-transform:none; letter-spacing:0; color:var(--ink); cursor:pointer; }
      .app-check input { width:auto; flex:none; margin:0; padding:0; }
      .app-check .app-person, .app-check span { flex:1 1 auto; text-align:left; }
      .app-chip-check { display:inline-flex; align-items:center; gap:6px; margin:0; padding:4px 10px; border:1px solid var(--rule); border-radius:999px;
        font-family:var(--sans); font-size:13px; text-transform:none; letter-spacing:0; color:var(--ink); cursor:pointer; background:var(--paper); }
      .app-chip-check input { width:auto; margin:0; padding:0; }
      .app-chip-check.on { border-color:var(--ink); background:var(--raise); }
      .app-db { display:grid; grid-template-columns:200px minmax(0,1fr); gap:16px; align-items:start; }
      .app-db-tables { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }
      button.app-db-table { display:flex; justify-content:space-between; gap:8px; width:100%; text-align:left; padding:7px 10px; border:1px solid var(--rule);
        border-radius:8px; background:transparent; color:var(--ink); font-size:13px; }
      button.app-db-table:hover { background:var(--raise); color:var(--ink); }
      button.app-db-table.on { border-color:var(--ink); background:var(--raise); box-shadow:inset 0 0 0 1px var(--ink); }
      .app-db-main { min-width:0; }
      .app-db-cols { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:10px; }
      .app-db-bar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:8px; }
      .app-db-bar input { width:auto; flex:1 1 160px; padding:6px 8px; font-size:13px; }
      .app-db-grid { overflow:auto; max-height:520px; }
      .app-db-grid table { table-layout:auto; width:max-content; min-width:100%; }
      .app-db-grid th, .app-db-grid td { padding:6px 14px 6px 0 !important; }
      .app-db-grid td { font-family:var(--mono); font-size:12px; white-space:nowrap; vertical-align:top; }
      .app-db-cell[data-app-db-cell] { cursor:pointer; }
      .app-db-cell.open { white-space:pre-wrap; word-break:break-word; max-width:420px; }
      button.app-db-sort { border:0; background:transparent; padding:0; color:inherit; font:inherit; text-transform:inherit; letter-spacing:inherit; cursor:pointer; }
      button.app-db-sort:hover { background:transparent; color:var(--ink); text-decoration:underline; }
      @media (max-width:1000px) { .app-db { grid-template-columns:minmax(0,1fr); } }
      .app-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
      /* Skill folder access (modal-skill-access): one row per folder, the open one expands. */
      .sfa-row { border-top:1px solid var(--rule); padding:10px 0; }
      .sfa-row:first-child { border-top:none; padding-top:0; }
      .sfa-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
      .sfa-name { font-family:var(--mono); font-size:13px; min-width:0; overflow-wrap:break-word; }
      .sfa-count { font-size:12px; color:var(--muted); }
      .sfa-state { margin-left:auto; display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
      .sfa-roles { font-size:12.5px; color:var(--muted); }
      .sfa-edit { margin-top:10px; }
      /* Phone: name and count stack on the left, state + Edit stay on the right
         on the same line (internal/finance used to push them onto a 2nd line). */
      @media (max-width:640px) {
        .sfa-head { flex-wrap:nowrap; align-items:flex-start; }
        .sfa-id { display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 1 auto; }
        .sfa-state { flex:none; flex-wrap:nowrap; }
      }
      .sfa-id { min-width:0; }
      @media (min-width:641px) { .sfa-id { display:contents; } }
      /* Skills list, admin only: lock + role chips on a restricted folder. */
      .sk-folder .nowrap, .sfa-name .nowrap { white-space:nowrap; }
      .sk-lock { display:inline-flex; vertical-align:-3px; margin-right:5px; color:var(--ink); }
      .sk-lock svg { width:14px; height:14px; }
      .sk-roles { display:flex; flex-wrap:wrap; gap:4px; margin-top:5px; }
      .sk-role { font-family:var(--sans, inherit); font-size:11px; line-height:1.3; padding:1px 7px; border:1px solid var(--rule); border-radius:999px; color:var(--ink); white-space:nowrap; }
      /* Phone: each skill is a stacked row (name, description, then folder ·
         version · date · author), so nothing is cut or scrolled sideways. */
      @media (max-width:720px) {
        .tbl.skills-tbl { display:block; overflow:visible; }
        .tbl.skills-tbl > thead { display:none; }
        .tbl.skills-tbl > tbody { display:block; min-width:0; width:auto; }
        .tbl.skills-tbl tr { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; padding:14px 2px; border-bottom:1px solid var(--rule); }
        .tbl.skills-tbl tbody td, .tbl.skills-tbl tbody tr:last-child td { display:block; border:0; padding:0; white-space:normal; min-width:0; }
        .tbl.skills-tbl tbody td:first-child { flex:1 1 100%; min-width:0; }
        .tbl.skills-tbl tbody td.sk-folder { flex:0 1 auto; }
        .tbl.skills-tbl .sk-roles { display:inline-flex; margin:0 0 0 6px; vertical-align:1px; }
      }
      .sfa-edit .row { gap:8px; margin-top:10px; }
      .app-versions { list-style:none; margin:0; padding:0; }
      .app-versions li { padding:8px 0; border-top:1px solid var(--sunk); font-size:13px; }
      .app-versions li:first-child { border-top:0; padding-top:0; }
      .app-version-head { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
      .app-version-head button { margin-left:auto; }
      .app-version-msg { margin:3px 0 2px; overflow-wrap:anywhere; }
      .app-spend { margin:0; font-size:14px; }
      .app-skel-wrap { display:flex; flex-direction:column; gap:8px; }
      .app-skel, .skel-bar { border-radius:6px; background:linear-gradient(90deg, var(--sunk) 0%, var(--raise) 50%, var(--sunk) 100%); background-size:200% 100%; animation:app-skel 1.2s ease-in-out infinite; }
      @keyframes app-skel { from { background-position:200% 0; } to { background-position:-200% 0; } }
      @media (prefers-reduced-motion: reduce) { .app-skel, .skel-bar { animation:none; } }
      /* ---- Skeletons (skeleton() in app.js) --------------------------------
         Grey shapes laid out like the screen that is loading: table rows for a
         table, tiles for the connector grid, a title and two columns for a
         detail page. Colours come from the theme variables, so a theme change
         carries them. */
      .skel { display:block; grid-column:1 / -1; } /* spans the grid it loads into (Connectors) */
      .skel-bar { display:block; max-width:100%; flex:none; }
      .skel-lines, .skel-stack, .skel-col, .skel-panel, .skel-card, .skel-detail, .skel-page { display:flex; flex-direction:column; gap:8px; min-width:0; }
      .skel-stack { flex:1; gap:6px; }
      .skel-detail, .skel-page, .skel-col { gap:18px; }
      .skel-card { border:1px solid var(--rule); padding:20px; margin:14px 0; background:var(--paper); }
      .skel-panel { border:1px solid var(--rule); border-radius:10px; padding:16px 18px; background:var(--paper); gap:12px; }
      .skel-tr { display:grid; gap:12px; align-items:center; padding:18px 2px; border-bottom:1px solid var(--rule); }
      .skel-th { padding:10px 2px; }
      .skel-row { display:flex; align-items:center; gap:12px; }
      .skel-icon { width:26px; height:26px; border-radius:7px; }
      .skel-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:12px; }
      .skel-tile { border:1px solid var(--rule); padding:14px 16px; background:var(--paper); }
      .skel-split { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:18px; align-items:start; }
      .skel-split.skel-even { grid-template-columns:1fr 1fr; gap:16px; }
      @media (max-width:1000px) { .skel-split { grid-template-columns:minmax(0,1fr); } }
      @media (max-width:820px) { .skel-split.skel-even { grid-template-columns:minmax(0,1fr); } }
      @media (max-width:1000px) { .app-grid2, .app-minis { grid-template-columns:minmax(0,1fr); } }
      .pg-ext { flex:none; width:38px; text-align:center; font-size:9.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); border:1px solid var(--rule); border-radius:4px; padding:1px 0; }
      @media (max-width:720px) {
        .pg-tbl, .pg-tbl tbody { display:block; }
        .pg-tbl colgroup, .pg-tbl thead { display:none; }
        .pg-tbl tr.pg-row { display:flex; flex-wrap:wrap; align-items:center; column-gap:12px; row-gap:6px; padding:12px 2px; border-bottom:1px solid var(--rule); }
        .pg-tbl tr.pg-row td { display:block; padding:0 !important; border:0 !important; background:transparent !important; }
        .pg-tbl tr.pg-row:hover { background:var(--raise); }
        .pg-tbl td.pg-name { flex:1 1 0; min-width:0; order:1; } .pg-tbl td.pg-acc { order:2; }
        .pg-tbl td.pg-url { flex:1 0 100%; order:4; min-width:0; }
        .pg-tbl td.pg-num, .pg-tbl td.pg-meta { order:5; text-align:left; font-size:12px; color:var(--muted); }
        .pg-tbl td.pg-num::before { content:attr(data-label) " "; font-family:var(--mono); font-size:10px; text-transform:uppercase; }
        .pg-layout { grid-template-columns:minmax(0,1fr); }
        .pg-head-title { font-size:20px; }
        .pg-head-row { flex-wrap:wrap; }
        .pg-link { flex:1 1 100%; }
        .pg-open { flex:1 1 auto; justify-content:center; }
        .pg-stat { padding:12px 10px; } .pg-stat-value { font-size:20px; }
        .pg-stat-sub { white-space:normal; }
        .pg-cols, .pg-xaxis { column-gap:2px; }
        .page-tools { flex-wrap:wrap; }
        .page-tools input, .page-tools select { flex:1 1 100%; min-width:0; width:100%; }
      }
      /* Expanded detail lives in a full-width row under its parent. */
      .t-detail td { background:var(--raise); padding:4px 2px 28px; }
      h1 { font-family:var(--display); font-weight:800; letter-spacing:-0.03em; font-size:30px; line-height:1.05; margin:0; }
      h2 { font-family:var(--display); font-weight:700; letter-spacing:-0.01em; font-size:18px; margin:0 0 6px; }
      h3 { font-family:var(--display); font-weight:700; letter-spacing:-0.01em; margin:0; }
      p { margin:8px 0; }
      .muted { color:var(--muted); font-size:14px; }
      button:not(:where([class^="h-"], [class*=" h-"])) { font:inherit; font-weight:500; cursor:pointer; border:1px solid var(--ink); background:var(--ink);
        color:var(--paper); padding:9px 16px; border-radius:0; transition:background .08s ease, color .08s ease; }
      button:not(:where([class^="h-"], [class*=" h-"])):hover { background:var(--accent-hover); }
      button.ghost { background:transparent; color:var(--ink); border-color:var(--ink); }
      button.ghost:hover { background:var(--ink); color:var(--paper); }
      button.spark { background:var(--spark); border-color:var(--spark); color:var(--paper); }
      button.spark:hover { background:var(--spark-dark); border-color:var(--spark-dark); }
      button.tiny { padding:4px 10px; font-size:12px; border-width:1px; }
      /* Anchors that act as buttons. Without this an <a class="ghost"> keeps the
         browser's link blue, which is the one colour this palette does not have. */
      a.ghost { display:inline-block; font:inherit; font-weight:500; text-decoration:none; cursor:pointer;
        background:transparent; color:var(--ink); border:1px solid var(--ink); padding:7px 14px; }
      a.ghost:hover { background:var(--ink); color:var(--paper); }
      a.ghost.tiny { padding:4px 10px; font-size:12px; }
      button.danger { color:var(--error); border-color:var(--error); background:transparent; }
      button.danger:hover { background:var(--error); color:var(--paper); }
      button:not(:where([class^="h-"], [class*=" h-"])):disabled { opacity:.4; cursor:default; }
      button:not(:where([class^="h-"], [class*=" h-"])):disabled:hover { background:var(--ink); color:var(--paper); }
      button.ghost:disabled:hover { background:transparent; color:var(--ink); }
      .card { border:1px solid var(--rule); padding:20px; margin:14px 0; background:var(--raise); }
      .card h3 { margin:0 0 4px; }
      .row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
      .between { justify-content:space-between; }
      .pill { font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.04em;
        padding:2px 8px; border:1px solid var(--rule); color:var(--muted); }
      .pill.ok { background:var(--ink); color:var(--paper); border-color:var(--ink); }
      .pill.scope { border-color:var(--spark); color:var(--ink); }
      .pill.warn-pill { border-color:var(--error); color:var(--error); }
      label { display:block; font-family:var(--mono); font-size:11px; text-transform:uppercase;
        letter-spacing:.05em; color:var(--muted); margin:12px 0 5px; }
      input, select { width:100%; padding:9px 11px; border:1px solid var(--rule); border-radius:0;
        font:inherit; background:var(--paper); color:var(--ink); transition:border-color .08s ease; }
      /* A native <select> renders as the OS widget: rounded, grey-filled, with a
         double chevron. That is the one control on the page that ignores the
         whole system — sharp corners, hairline borders, paper surfaces — and it
         showed up on every row of People. Drawing the arrow ourselves is what
         makes a dropdown look like part of the instrument rather than bolted on.
         The SVG is inline (a data URI) because the CSP forbids external assets. */
      select { appearance:none; -webkit-appearance:none; padding-right:30px; cursor:pointer;
        background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235A5750' stroke-width='1.5' stroke-linecap='square'/%3E%3C/svg%3E");
        background-repeat:no-repeat; background-position:right 10px center; }
      select:hover { border-color:var(--muted); }
      input:focus, select:focus { outline:none; border-color:var(--ink); }
      input::placeholder { color:var(--text-2); }
      /* A disabled control should read as "not yours to change", not as broken. */
      select:disabled { color:var(--muted); background-color:var(--sunk); cursor:default; opacity:1; }
      code, .mono { font-family:var(--mono); font-size:13px; font-variant-numeric:tabular-nums; }
      pre { position:relative; background:var(--ink); color:var(--paper); padding:14px; padding-right:80px;
        overflow:auto; font-family:var(--mono); font-size:12px; line-height:1.6; white-space:pre-wrap; word-break:break-all; margin:8px 0; }
      pre button { position:absolute; top:8px; right:8px; }
      pre.copyable { padding-right:40px; }
      .copy-icon { position:absolute; top:8px; right:8px; display:inline-flex; align-items:center; justify-content:center;
        width:26px; height:26px; padding:0; border:1px solid rgba(255,255,255,.18); border-radius:6px;
        background:rgba(255,255,255,.08); color:var(--paper); cursor:pointer; opacity:.45; transition:opacity .12s, background .12s; }
      .copy-icon:hover, .copy-icon:focus-visible { opacity:1; background:rgba(255,255,255,.18); }
      .copy-icon svg { display:block; }
      .secret-row { display:flex; gap:6px; align-items:stretch; margin:6px 0; }
      .secret-row input { font-family:var(--mono); font-size:13px; }
      .secret-row button { padding:0 12px; }
      .warn { border-left:3px solid var(--spark); padding:9px 13px; background:var(--sunk); font-size:13px; margin:10px 0; }
      .tabs { display:flex; gap:4px; margin:0 0 32px; border-bottom:1px solid var(--rule); }
      .tabs .tab { font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.06em;
        padding:10px 16px; background:transparent; border:none; color:var(--muted);
        border-bottom:2px solid transparent; margin-bottom:-1px; transition:color .08s ease; }
      .tabs .tab:hover { background:transparent; color:var(--ink); }
      .tabs .tab.spark { background:transparent; color:var(--ink); border-bottom-color:var(--spark); }
      .skill-extra:not(:empty) { margin-top:10px; border-top:1px solid var(--rule); padding-top:10px; }
      /* Folders. The slug carries the path, so a group is just every skill sharing
         a prefix — no folder objects exist to render. */
      .skill-folder { margin:20px 0 0; }
      .skill-folder > summary { cursor:pointer; list-style:none; padding:8px 0;
        border-bottom:1px solid var(--rule); font-family:var(--mono); font-size:12px;
        text-transform:uppercase; letter-spacing:.06em; }
      .skill-folder > summary::-webkit-details-marker { display:none; }
      .skill-folder > summary::before { content:"▸"; display:inline-block; width:16px; color:var(--muted); }
      .skill-folder[open] > summary::before { content:"▾"; }
      .skill-folder > summary .count { color:var(--muted); font-weight:400; margin-left:6px; }
      /* ---- File viewer -----------------------------------------------------
         One file at a time, chosen from a picker, rendered as prose. The
         earlier version put a permanent tree beside a monospace dump, which
         spends half the width on navigation the reader uses once and makes
         a SKILL.md — which is a DOCUMENT — read like a log file. A skill is
         written to be read by a person, so it is set like prose: real heading
         sizes, real paragraph spacing, a comfortable measure. */
      .viewer { border:1px solid var(--rule); background:var(--paper); }
      .viewer-bar { display:flex; align-items:center; gap:10px; padding:8px 10px; border-bottom:1px solid var(--rule); background:var(--raise); }
      .viewer-bar .grow { flex:1; }
      .viewer-pick { position:relative; }
      .viewer-pick > button { font-family:var(--mono); font-size:12px; padding:5px 10px;
        background:var(--paper); color:var(--ink); border:1px solid var(--rule); }
      .viewer-pick > button:hover { background:var(--ink); color:var(--paper); }
      .viewer-pick > button .chev { margin-left:6px; opacity:.6; }
      .viewer-menu { position:absolute; z-index:40; top:calc(100% + 4px); left:0; min-width:290px; max-height:340px;
        overflow:auto; background:var(--raise); border:1px solid var(--ink); padding:4px; }
      .viewer-menu button { display:block; width:100%; text-align:left; font-family:var(--mono); font-size:12px;
        padding:5px 8px; border:0; background:transparent; color:var(--ink); }
      .viewer-menu button:hover { background:var(--sunk); color:var(--ink); }
      .viewer-menu button.active { background:var(--ink); color:var(--paper); }
      .viewer-menu .grp { font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.06em;
        color:var(--muted); padding:8px 8px 3px; }
      .viewer-body { padding:26px 30px; max-height:560px; overflow:auto; }
      /* Prose. The measure is capped because a 1000px line of body text is
         genuinely hard to track back from at the line break. */
      .doc { max-width:70ch; font-size:14.5px; line-height:1.7; }
      .doc h1, .doc h2, .doc h3 { font-family:var(--display); letter-spacing:-0.02em; line-height:1.2; margin:1.6em 0 .5em; }
      .doc h1 { font-size:23px; font-weight:800; } .doc h2 { font-size:19px; font-weight:700; } .doc h3 { font-size:16px; font-weight:700; }
      .doc > :first-child { margin-top:0; }
      .doc p, .doc ul, .doc ol { margin:0 0 1em; }
      .doc ul, .doc ol { padding-left:1.25em; }
      .doc li { margin:.3em 0; }
      .doc code { font-family:var(--mono); font-size:12.5px; background:var(--sunk); padding:1px 5px; }
      .doc pre { font-family:var(--mono); font-size:12.5px; background:var(--sunk); padding:12px 14px;
        overflow-x:auto; margin:0 0 1em; line-height:1.55; }
      .doc pre code { background:transparent; padding:0; }
      .doc table { border-collapse:collapse; width:100%; margin:0 0 1em; font-size:13.5px; }
      .doc th, .doc td { border:1px solid var(--rule); padding:6px 9px; text-align:left; vertical-align:top; }
      .doc th { background:var(--sunk); font-weight:600; }
      .doc blockquote { margin:0 0 1em; padding-left:14px; border-left:2px solid var(--rule); color:var(--muted); }
      .doc hr { border:0; border-top:1px solid var(--rule); margin:1.6em 0; }
      /* Non-prose files keep monospace, but wrapped rather than side-scrolling. */
      .doc-raw { font-family:var(--mono); font-size:12.5px; line-height:1.6; white-space:pre-wrap;
        word-break:break-word; margin:0; max-width:100%; }
      /* Tags: clickable filter chips, and read-only chips on each skill card. */
      .tagbar { display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin:12px 0 0; }
      .tag { font-family:var(--mono); font-size:11px; padding:2px 8px; border:1px solid var(--rule);
        color:var(--muted); background:transparent; cursor:pointer; width:auto; }
      .tag:hover { border-color:var(--ink); color:var(--ink); }
      .tag.on { background:var(--ink); color:var(--paper); border-color:var(--ink); }
      .tag.flat { cursor:default; border-style:dashed; }
      .tag.flat:hover { border-color:var(--rule); color:var(--muted); }
      #skills-search { max-width:280px; }
      /* Foldered slugs are long ("cro/nextcommerce/nextcommerce-postpurchase-upsell").
         Without this the unbroken mono string sets the card's minimum width and
         pushes the layout sideways on a narrow window. */
      .skill-title { overflow-wrap:anywhere; }

      /* Connectors: sub-tabs + marketplace */
      .subtabs { display:flex; gap:6px; margin:0 0 22px; }
      .subtabs .subtab { font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em;
        padding:7px 15px; background:transparent; border:1px solid var(--rule); color:var(--muted); }
      .subtabs .subtab:hover { color:var(--ink); border-color:var(--ink); }
      .subtabs .subtab.on { background:var(--ink); color:var(--paper); border-color:var(--ink); }
      .sub-intro { margin:-6px 0 18px; }
      .market { display:grid; grid-template-columns:repeat(auto-fill,minmax(248px,1fr)); gap:14px; margin:14px 0; }
      .mkt-card { border:1px solid var(--rule); background:var(--raise); padding:18px; display:flex;
        flex-direction:column; gap:11px; transition:border-color .1s ease; }
      .mkt-card:hover { border-color:var(--ink); }
      .mkt-card.soon { opacity:.66; }
      .mkt-card.soon:hover { border-color:var(--rule); }
      .mkt-top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
      .mono-tile { width:42px; height:42px; min-width:42px; display:flex; align-items:center; justify-content:center;
        font-family:var(--display); font-weight:800; font-size:17px; border:1px solid var(--ink);
        background:var(--paper); color:var(--ink); }
      .mono-tile.live { background:var(--ink); color:var(--paper); }
      /* Logo tiles: white ground so brand colours read; image fits with padding. */
      .mono-tile.logo { background:var(--logo-tile); color:var(--ink); padding:6px; overflow:hidden; }
      .mono-tile.logo img { width:100%; height:100%; object-fit:contain; display:block; }
      .mkt-cat { font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-top:1px; }
      .mkt-name { font-family:var(--display); font-weight:700; font-size:16px; letter-spacing:-0.01em; }
      .mkt-blurb { font-size:13px; line-height:1.45; color:var(--muted); flex:1; margin:0; }
      .mkt-foot { margin-top:2px; display:flex; flex-direction:column; gap:6px; }
      .mkt-foot button { width:100%; }
      /* GA opt-in "also allow editing" checkbox on the connect controls. */
      .ga-edit-opt { display:flex; gap:6px; align-items:center; font-size:12px; color:var(--muted); cursor:pointer; margin-top:8px; }
      .ga-edit-opt input { margin:0; width:auto; flex:none; }
      /* Muted one-liner link (People tab → Services hint). Tool cards use a real
         `ghost tiny` button instead — see .link-howto usage in app.js. */
      .link-howto { background:none; border:none; color:var(--muted); font-family:var(--mono); font-size:11px;
        text-transform:uppercase; letter-spacing:.04em; padding:0; cursor:pointer; text-decoration:underline; }
      .link-howto:hover { color:var(--ink); background:none; }
      #connect-modal-tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:4px; }
      .mkt-form { margin-top:4px; border-top:1px solid var(--rule); padding-top:12px; }
      .conn-card { display:flex; align-items:center; gap:14px; border:1px solid var(--rule); background:var(--raise); padding:16px 18px; margin:12px 0; }
      .conn-card .mono-tile { width:38px; height:38px; min-width:38px; font-size:15px; }
      .conn-main { flex:1; min-width:0; }
      .conn-name { font-family:var(--display); font-weight:700; font-size:15px; }
      details.conn-manage summary { cursor:pointer; font-family:var(--mono); font-size:11px; text-transform:uppercase;
        letter-spacing:.05em; color:var(--muted); list-style:none; padding:4px 0; user-select:none; }
      details.conn-manage summary:hover { color:var(--ink); }
      details.conn-manage summary::-webkit-details-marker { display:none; }
      details.conn-manage[open] { border-top:1px solid var(--rule); margin-top:12px; padding-top:4px; }
      .hide { display:none !important; }
      .toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
        background:var(--ink); color:var(--paper); padding:11px 18px; font-size:14px; z-index:200; border-left:3px solid var(--spark); }
      details.tools-tree summary { cursor:pointer; padding:9px 0; font-family:var(--display); font-weight:700; font-size:14px; user-select:none; }
      details.tools-tree { border:1px solid var(--rule); padding:8px 14px; margin:8px 0; background:var(--paper); }
      details.tools-tree[open] { background:var(--raise); }
      .tool-check { display:flex; align-items:center; gap:8px; padding:3px 0; font-family:var(--mono); font-size:13px; font-weight:normal; text-transform:none; letter-spacing:0; color:var(--ink); margin:0; }
      .tool-check input { width:auto; margin:0; accent-color:var(--spark); }
      .access-sub { font-size:12px; color:var(--muted); margin-top:2px; }
      .method { border:1px solid var(--rule); padding:13px 15px; margin:10px 0; background:var(--paper); }
      .method-title { font-family:var(--mono); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
      .method-empty { font-size:13px; color:var(--muted); }
      .connect-tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
      .connect-where { font-size:13px; color:var(--muted); margin:4px 0 6px; }
      .connect-steps { margin:6px 0 8px; padding-left:20px; font-size:13px; color:var(--ink); line-height:1.7; }
      .connect-steps li { margin:2px 0; }
      .connect-os-tabs { display:flex; gap:6px; flex-wrap:wrap; margin:6px 0 4px; }

      /* Modal: 200ms ease-out enter, sharp, paper */
      .modal-backdrop {
        position:fixed; inset:0; background:var(--overlay); z-index:100;
        display:flex; align-items:center; justify-content:center; padding:24px;
        animation:modal-fade .2s ease-out;
      }
      @keyframes modal-fade { from { opacity:0; } to { opacity:1; } }
      .modal-backdrop.hide { display:none !important; }
      .modal {
        background:var(--paper); border:1px solid var(--ink); max-width:560px; width:100%;
        max-height:88vh; display:flex; flex-direction:column; overflow:hidden;
        box-shadow:0 24px 60px rgba(14,14,12,0.25); animation:modal-rise .2s ease-out;
      }
      @keyframes modal-rise { from { transform:translateY(8px); opacity:0; } to { transform:translateY(0); opacity:1; } }
      .modal-header {
        display:flex; align-items:center; justify-content:space-between;
        padding:18px 22px; border-bottom:1px solid var(--rule); flex-shrink:0;
      }
      .modal-header h2 { margin:0; }
      .modal-header button { border:none; background:transparent; color:var(--muted); padding:4px 8px; font-size:15px; }
      .modal-header button:hover { background:transparent; color:var(--ink); }
      .modal-body { overflow-y:auto; padding:22px; flex:1; }
      .modal-body label:first-child { margin-top:0; }
      .modal-footer { padding:16px 22px; border-top:1px solid var(--rule); display:flex; gap:10px;
        flex-shrink:0; justify-content:flex-end; flex-direction:row-reverse; }

      /* ---- Shell: sidebar + content -------------------------------------
         Two panels, not one sheet split by a hairline. The rail used to share
         an edge with the page body, so the nav read as a column OF the content
         rather than a thing beside it. Now the window is the ground (--sunk)
         and both regions are raised cards floating on it with a gap between:
         a narrow one for navigation, a wide one for the screen. */
      body { background:var(--sunk); }
      #app { display:grid; grid-template-columns:240px minmax(0,1fr); gap:16px;
             padding:16px; min-height:100vh; }
      #app.hide { display:none; }

      .sidebar { background:var(--paper); border:1px solid var(--rule); border-radius:14px;
                 display:flex; flex-direction:column; padding:18px 12px; gap:6px;
                 position:sticky; top:16px; align-self:start; height:calc(100vh - 32px); }
      .side-brand { display:flex; align-items:center; gap:8px; padding:4px 10px 16px;
                    font-family:var(--display); font-weight:800; letter-spacing:-0.03em; font-size:18px; }
      .side-nav { display:flex; flex-direction:column; gap:2px; }
      .side-nav .tab, .side-foot .tab {
        display:flex; align-items:center; gap:10px; width:100%; text-align:left;
        background:transparent; border:0; padding:9px 12px; font:inherit; font-size:14px;
        color:var(--muted); cursor:pointer; border-radius:8px;
      }
      .side-nav .tab svg, .side-foot .tab svg { flex:0 0 auto; opacity:.8; }
      .side-nav .tab.on svg { opacity:1; }
      .side-nav .tab:hover, .side-foot .tab:hover { background:var(--sunk); color:var(--ink); }
      .side-nav .tab.on { background:var(--ink); color:var(--paper); }
      .side-group { display:flex; flex-direction:column; gap:2px; padding:4px 0; }
      .side-group-label { padding:5px 12px 2px; font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
      .side-group .tab { padding-left:20px; }
      .side-foot { margin-top:auto; display:flex; flex-direction:column; gap:8px;
                   border-top:1px solid var(--rule); padding-top:12px; }
      .side-user { display:flex; align-items:center; gap:10px; padding:6px 10px; }
      .side-avatar { width:28px; height:28px; border-radius:50%; background:var(--ink); color:var(--paper);
                     display:flex; align-items:center; justify-content:center; font-size:13px;
                     font-weight:600; flex-shrink:0; text-transform:uppercase; }
      .side-id { min-width:0; }
      .side-email { font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
      .side-team { font-size:11.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

      .content { min-width:0; background:var(--paper); border:1px solid var(--rule);
                 border-radius:14px; min-height:calc(100vh - 32px);
                 padding:32px 36px 72px; }
      .content > div { max-width:1120px; }
      /* Home and Connect are pages you READ rather than lists you scan: a
         narrower measure, optically centred, instead of a wide band pinned to
         the left edge with the right third empty. The screens that ARE lists
         (Connectors, Skills, People) keep the full width — a table wants it. */
      #view-home, #view-connect { max-width:920px; margin-inline:auto; }
      .content .wrap { max-width:1100px; margin:0; padding:0; }
      #topbar { display:none; }

      @media (max-width:820px) {
        #app { grid-template-columns:1fr; padding:12px; gap:12px; }
        #app { grid-template-rows:auto 1fr; }
        .sidebar { position:static; height:auto; align-self:stretch;
                   flex-direction:row; flex-wrap:wrap; align-items:center; padding:12px; }
        .side-brand { padding:4px 10px; }
        .side-nav { flex-direction:row; flex-wrap:wrap; gap:4px; flex:1 1 100%; }
        .side-group { flex-direction:row; padding:0; }
        .side-group-label { display:none; }
        .side-group .tab { padding-left:12px; }
        .side-nav .tab, .side-foot .tab { width:auto; }
        .side-foot { margin-top:0; border-top:0; padding-top:0; flex-direction:row; align-items:center; }
        .content { min-height:0; padding:22px 18px 56px; }
        /* A 1fr track grows to the sidebar's min-content (the nowrap email in
           side-user), which widened a 390px phone page to ~450px. */
        #app { grid-template-columns:minmax(0,1fr); }
        .sidebar, .side-foot { min-width:0; }
        .side-foot { flex-wrap:wrap; }
        .side-user { min-width:0; flex:1 1 160px; }
      }

      /* Home — two columns of cards: the clients you install into on the left,
         the raw endpoint and CLI on the right for anything not listed. */
      /* Two explicit columns: "pick your client" on the left, the raw URL and
         the skills command on the right. An auto-fit grid reflowed by height,
         which let a short Codex card pull the reference cards up beside the
         client ones and left the whole page reading as one jumbled masonry. */
      .home-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
      .home-col { display:flex; flex-direction:column; gap:16px; min-width:0; }
      @media (max-width:820px) { .home-grid { grid-template-columns:1fr; } }
      /* The mark rides the ROW, not the heading — one card can hold two
         different apps (Codex and ChatGPT), so a logo above them would name
         only one of the two. */
      .mono-tile.home-logo { width:26px; height:26px; min-width:26px; padding:3px; border-radius:7px; }
      #home-more { margin-top:16px; }
      .home-more-card .home-item:first-of-type { border-top:0; }
      .home-card { border:1px solid var(--rule); background:var(--paper); padding:20px 22px; }
      .home-card h2 { margin:0 0 14px; font-size:16px; }
      .home-item { display:flex; align-items:center; gap:12px; padding:12px 0; border-top:1px solid var(--rule); }
      .home-card .home-item:first-of-type { border-top:0; }
      .home-item .hi-name { flex:1; font-size:14px; }
      .home-code { background:var(--ink); color:var(--paper); font-family:var(--mono); font-size:12.5px;
                   padding:12px 14px; display:flex; align-items:center; gap:10px; overflow-x:auto; }
      .home-code code { flex:1; white-space:pre; }
      .home-label { font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
                    color:var(--muted); margin:0 0 6px; }

      /* Apps: one row per connector in a responsive grid. A row, not a tall
         card — the useful facts are the logo, the name and whether it is
         connected, and a card body of blurb text pushed the grid to three rows
         of scrolling for eleven connectors. */
      .apps-bar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 20px; }
      .apps-bar #apps-search { flex:1; min-width:180px; max-width:420px; }
      .apps-bar .primary { margin-left:auto; }
      .seg { display:inline-flex; border:1px solid var(--rule); border-radius:8px; overflow:hidden; }
      .seg-btn { border:0; background:transparent; padding:7px 14px; font:inherit; font-size:13px;
                 color:var(--muted); cursor:pointer; }
      .seg-btn.on { background:var(--ink); color:var(--paper); }
      .seg-tiny .seg-btn { padding:4px 10px; font-size:12px; }
      .apps-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:12px; }
      .app-row { display:flex; align-items:center; gap:12px; padding:14px 16px;
                 border:1px solid var(--rule); background:var(--paper); cursor:pointer; }
      .app-row:hover { border-color:var(--ink); }
      .app-row .app-main { flex:1 1 auto; min-width:0; }
      .app-row .app-name { font-weight:600; font-size:14px;
                           overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
      .app-row .app-sub { font-size:12.5px; margin-top:2px;
                          overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
      .app-row .app-act { flex:0 0 auto; }
      .app-live { color:var(--ok); }
      .app-count { color:var(--muted); }
      .cc-tag { margin-left:6px; vertical-align:middle; }

      /* App detail */
      .app-detail-head { display:flex; align-items:center; gap:14px; padding-bottom:18px;
                         border-bottom:1px solid var(--rule); margin-bottom:22px; }
      .app-detail-head h1 { margin:0; flex:1; }
      .back-link { background:none; border:0; color:var(--muted); font:inherit; font-size:13px;
                   cursor:pointer; padding:0; margin-bottom:14px; }
      .back-link:hover { color:var(--ink); }
      .acct-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:12px; }
      .acct-add { border:1px dashed var(--rule); display:flex; align-items:center; justify-content:center;
                  min-height:104px; color:var(--muted); font-size:13px; cursor:pointer; background:none; }
      .acct-add:hover { border-color:var(--ink); color:var(--ink); }
      /* ---- A connector's tool list ---------------------------------------
         Forty-five rows of raw `code` was a wall: the callable name never says
         what the tool does, and finding one meant scrolling. Each row leads
         with the plain-English name, keeps the callable name beside it for
         whoever is writing the prompt, and the list filters as you type. */
      .tools-panel { border:1px solid var(--rule); border-radius:12px; margin-top:24px; background:var(--raise); }
      .tools-panel summary { padding:14px 18px; cursor:pointer; font-weight:600; font-size:14px; }
      .tools-head { display:flex; align-items:center; justify-content:space-between; gap:12px;
                    padding:12px 18px; border-top:1px solid var(--rule); flex-wrap:wrap; }
      .tools-count { font-weight:600; font-size:14px; }
      .tools-head input { width:auto; flex:1; min-width:180px; max-width:320px; margin:0; }
      .tools-panel .tools-body { padding:12px 18px 18px; max-height:min(70vh,640px); overflow-y:auto; }

      /* Read / Write / Destructive. The question in front of a connector is
         what it can do TO your account, not what its tools are called. Read is
         the safe majority and stays closed; Destructive is the short list
         worth actually reading, and carries the only colour on the screen. */
      .tool-bucket { border:1px solid var(--rule); border-radius:10px; background:var(--paper); margin-bottom:10px; }
      .tool-bucket > summary { display:flex; align-items:center; gap:10px; padding:14px 16px;
                               cursor:pointer; font-size:14px; list-style:none; }
      .tool-bucket > summary::-webkit-details-marker { display:none; }
      .tool-bucket > summary::after { content:"⌄"; margin-left:auto; color:var(--muted); line-height:1; }
      .tool-bucket[open] > summary::after { content:"⌃"; }
      .tool-bucket .bucket-name { font-weight:600; }
      .tool-bucket .bucket-count { font-size:13px; }
      .tool-bucket-destructive { border-color:var(--error); }
      .tool-bucket-destructive > summary svg { color:var(--error); }
      .bucket-body { padding:0 16px 8px; border-top:1px solid var(--rule); }
      .tool-row { padding:14px 0; border-bottom:1px solid var(--rule); }
      .tool-row:last-of-type { border-bottom:0; }
      .tool-row-head { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
      .tool-title { font-weight:600; font-size:14px; }
      .tool-desc { margin:4px 0 0; color:var(--muted); font-size:13.5px; line-height:1.55; }
      .tools-panel code { font-family:var(--mono); font-size:12px; color:var(--muted); }

      /* ---- Connect another account ---------------------------------------
         A dashed drop-zone rather than a button. It sits at the end of a list
         of account cards and is the same shape as them, so it reads as the
         next empty slot instead of an action bolted under the list. */
      /* The empty slot at the end of the accounts grid — same card, dashed. It
         used to sit BELOW the grid as a full-width bar, which read as an action
         about the list rather than the next thing in it. */
      .connect-tile { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
                      min-height:130px; padding:26px 18px; cursor:pointer;
                      border:1px dashed var(--rule); border-radius:12px; background:transparent;
                      font:inherit; font-size:14px; color:var(--muted); }
      .connect-tile:hover { border-color:var(--ink); color:var(--ink); background:var(--raise); }
      .connect-tile-plus { display:inline-flex; line-height:1; }

      /* The add-an-API-key-account form sits where the tile was: same box, same
         width, so revealing it reads as the tile opening rather than a form
         appearing somewhere else on the page. */
      /* ---- One client's connect page --------------------------------------
         A header card that says which client you are setting up, then the
         steps as numbered cards. The number is the point: the old modal ran
         the whole thing together as prose with a code block wedged in, and
         there was no way to see how many things you still had to do. */
      .connect-page { max-width:760px; margin-inline:auto; }
      .connect-hero { display:flex; align-items:center; gap:16px; padding:20px 22px;
                      border:1px solid var(--rule); border-radius:12px; background:var(--raise); }
      .connect-hero h1 { margin:0; font-size:26px; }
      .mono-tile.connect-hero-logo { width:48px; height:48px; min-width:48px; padding:8px; border-radius:10px; }
      .connect-hero p { margin:4px 0 0; color:var(--muted); font-size:14px; }
      .connect-step { display:flex; gap:16px; padding:20px 22px; margin-top:14px;
                      border:1px solid var(--rule); border-radius:12px; background:var(--raise); }
      .connect-step-n { flex:0 0 auto; width:28px; height:28px; border-radius:50%;
                        border:1px solid var(--rule); display:flex; align-items:center;
                        justify-content:center; font-family:var(--mono); font-size:12.5px;
                        color:var(--muted); }
      .connect-step-main { min-width:0; flex:1; }
      .connect-step h2 { margin:2px 0 0; font-size:16px; }
      .connect-step .connect-step-hint { margin:6px 0 0; color:var(--muted); font-size:14px; line-height:1.55; }
      .connect-step pre.copyable { margin-top:12px; }
      .connect-step .connect-os-tabs { margin:12px 0 0; }
      /* ---- A connector's credential guide (/connectors/<slug>/credentials) --
         Same cards as the connect pages; data from web/credential-tutorials/. */
      .tut-cta { display:flex; align-items:center; justify-content:space-between; gap:12px;
                 margin:4px 0 18px; padding:14px 18px; border:1px solid var(--spark); border-radius:12px;
                 background:var(--raise); color:var(--ink); text-decoration:none; }
      .tut-cta:hover { background:var(--sunk); }
      .tut-cta-main { display:flex; flex-direction:column; gap:2px; min-width:0; }
      .tut-cta-title { font-weight:600; font-size:15px; }
      .tut-cta-sub { color:var(--muted); font-size:13px; }
      .tut-facts { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px; }
      .tut-facts > div { padding:14px 18px; border:1px solid var(--rule); border-radius:12px; background:var(--raise); }
      .tut-facts p { margin:6px 0 0; font-size:14px; line-height:1.5; }
      .tut-ph { margin-top:14px; padding:14px 18px; border:1px solid var(--rule); border-radius:12px; background:var(--raise); }
      .tut-ph label { margin-top:0; }
      .tut-ph input { font-family:var(--mono); max-width:340px; }
      .tut-ph-hint { margin:8px 0 0; line-height:1.5; }
      .tut-url { margin:6px 0 0; font-family:var(--mono); font-size:11.5px; overflow-wrap:anywhere; }
      .connect-action.disabled { opacity:.45; cursor:not-allowed; }
      .tut-scope-group { margin-top:14px; }
      .tut-scopes { margin-top:6px; border-top:1px solid var(--rule); }
      .tut-scope { display:grid; grid-template-columns:minmax(150px, 38%) 1fr; gap:4px 16px; align-items:baseline;
                   padding:9px 0; border-bottom:1px solid var(--rule); }
      .tut-scope-name { font-family:var(--mono); font-size:12.5px; color:var(--ink); overflow-wrap:anywhere; }
      .tut-scope-why { color:var(--muted); font-size:13px; line-height:1.5; }
      .sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
      .tut-page .small { font-size:12.5px; }
      .tut-shot, .tut-video { display:block; width:100%; margin-top:12px; border:1px solid var(--rule); border-radius:8px; }
      .tut-aside { background:transparent; }
      .tut-docs { margin-top:18px; line-height:1.8; }
      @media (max-width: 640px) {
        .tut-facts { grid-template-columns:1fr; }
        .connect-step { padding:16px; gap:12px; }
        .tut-scope { grid-template-columns:1fr; }
      }
      /* The one-click "add it in this client" link, where the client publishes
         a scheme for it. A link, not a button: it leaves the page. */
      .connect-action { display:inline-flex; align-items:center; gap:8px; margin-top:12px;
                        padding:9px 14px; border:1px solid var(--ink); border-radius:8px;
                        background:var(--paper); color:var(--ink); font-size:14px; text-decoration:none; }
      .connect-action:hover { background:var(--ink); color:var(--paper); }

      .key-account-form { border:1px dashed var(--rule); border-radius:12px; padding:18px; margin-top:12px; }
      .key-account-form label:first-of-type { margin-top:0; }

      /* Skill viewer — a wide two-pane modal, because the thing being read is a
         document. A file list that scrolls independently of the file itself is
         the whole point: picking the next file must not lose your place. */
      .modal.modal-skill { max-width: min(1180px, calc(100vw - 32px)); width: 100%; height: 88vh; max-height: 88vh; }
      .skill-modal-body { display: grid; grid-template-columns: 260px 1fr; flex: 1; min-height: 0; }
      .skill-files {
        border-right: 1px solid var(--rule); overflow-y: auto; padding: 14px 0;
        background: var(--paper); min-height: 0;
      }
      .skill-files .grp {
        font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
        color: var(--muted); padding: 12px 16px 4px;
      }
      .skill-files button {
        display: block; width: 100%; text-align: left; background: transparent; border: 0;
        padding: 6px 16px; font: inherit; font-size: 13px; color: var(--ink); cursor: pointer;
      }
      .skill-files button:hover { background: var(--rule); }
      .skill-files button.active { background: var(--ink); color: var(--paper); }
      .skill-files button.active span { opacity: .7; }
      .skill-files .hist { padding: 5px 16px; font-size: 12.5px; }
      .skill-view { overflow: auto; padding: 20px 24px; min-height: 0; }
      .skill-view pre {
        white-space: pre-wrap; word-break: break-word; font-size: 12.5px; line-height: 1.6; margin: 0;
      }
      .skill-view img { max-width: 100%; height: auto; }
      @media (max-width: 860px) {
        .skill-modal-body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
        .skill-files { border-right: 0; border-bottom: 1px solid var(--rule); max-height: 30vh; }
      }
      /* Sortable column headers */
      .tbl th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
      .tbl th.sortable:hover { color: var(--ink); }
      .tbl th .arrow { opacity: .45; font-size: 10px; margin-left: 3px; }

      /* Role editor: sticky search + tool tree */
      .role-search-wrap { position:sticky; top:-22px; background:var(--paper); padding:2px 0 10px; margin:0 0 10px; z-index:1; }
      .role-search-wrap input { width:100%; }
      .tools-tree[data-hidden] { display:none; }
      .tool-check[data-hidden] { display:none; }
      /* Guest invite modal: the tool name never shrinks to a sliver; the description wraps under it on narrow widths. */
      #guest-tools-tree .tool-check { flex-wrap:wrap; align-items:flex-start; }
      #guest-tools-tree .tool-check .mono { overflow-wrap:anywhere; flex:0 1 auto; min-width:0; }
      #guest-tools-tree .tool-check .muted { flex:1 1 100%; min-width:0; padding-left:24px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--sans, inherit); }
      .svc-allow-all { display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12px;
        text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin:0 0 6px; padding:0 0 6px; border-bottom:1px solid var(--rule); }
      .svc-allow-all input { width:auto; margin:0; accent-color:var(--spark); }

      /* Role dropdown in person row */
      .role-select-wrap select { width:auto; padding:5px 9px; font-size:13px; }
      .role-select-wrap select:disabled { opacity:.5; cursor:not-allowed; }

      /* External access (guests). Reuses .tbl, .pill, .card, .seg; only the layout glue is new. */
      .guest-section { margin-top:40px; }
      #guest-invites-banner:not(:empty) { margin:0 0 28px; }
      .guest-section > h2, .guest-section-head h2 { margin:0 0 4px; }
      .guest-section-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
      .guest-filters { flex-wrap:wrap; }
      .guest-group { margin:0 0 28px; }
      .guest-group-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap;
        border-bottom:1px solid var(--ink); padding:0 0 8px; }
      .guest-group-head h2 { margin:0; font-size:17px; }
      .guest-group-head .count { font-family:var(--mono); font-size:12px; color:var(--muted); margin-left:8px; }
      .guest-access { display:flex; flex-wrap:wrap; gap:4px; }
      .guest-access .pill { white-space:nowrap; }
      .guest-hint { margin:2px 0 6px; font-size:12px; }
      .guest-check { margin:8px 0 0; }
      .guest-levels { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 12px; }
      .guest-msg { color:var(--error); font-size:13px; margin:12px 0 0; }
      .guest-more { margin-top:12px; }
      .guest-invite-card .row { margin-top:10px; }
      .guest-invite-card select { width:auto; min-width:180px; }
      .guest-home dl { display:grid; grid-template-columns:max-content minmax(0,1fr); gap:8px 20px; margin:0; }
      .guest-home dt { font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); padding-top:2px; }
      .guest-home dd { margin:0; overflow-wrap:anywhere; }
      .guest-home ul { margin:0; padding-left:18px; }
      @media (max-width:640px) {
        .guest-levels { grid-template-columns:minmax(0,1fr); }
        .guest-home dl { grid-template-columns:minmax(0,1fr); gap:2px 0; }
        .guest-home dd { margin-bottom:10px; }
        .guest-filters select { min-width:0; flex:1 1 140px; }
        .guest-invite-card select { width:100%; }
      }

      /* ---- Accounts on a connector ---------------------------------------
         Two per row, not one full-width band each. An account is a small
         object — a name, where it came from, who it is shared with — and
         giving each one the whole page turned three of them into a scroll
         while the right two-thirds sat empty with four buttons stranded in it.

         Actions move to a footer under a hairline instead of floating far from
         the name they act on, and the destructive one is pushed to the far
         edge so it is never the button next to the one you meant. */
      .accounts-area { margin-top:14px; border-top:1px solid var(--rule); padding-top:12px; }
      /* Two per row on a normal screen: 440px is wide enough that a share chip
         reads on one line and narrow enough to drop to one column on a laptop
         half-screen. min() keeps it from overflowing a narrow phone. */
      .accounts-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,440px),1fr));
                       gap:14px; margin-top:10px; align-items:start; }
      .acct-card { display:flex; flex-direction:column; border:1px solid var(--rule);
                   border-radius:12px; background:var(--raise); overflow:hidden; }
      /* A card with its share form open needs the width; it holds a tool list. */
      .acct-card.wide { grid-column:1 / -1; }
      .acct-head { padding:16px 18px 12px; }
      .acct-card .conn-name { font-size:15px; line-height:1.25; overflow-wrap:anywhere; }
      .acct-meta { display:flex; align-items:center; gap:6px; flex-wrap:wrap;
                   margin-top:6px; font-size:12.5px; color:var(--muted); }
      .acct-shares { padding:0 18px 14px; }
      /* A share is a sentence, not a label: at pill sizing the tracking pushed
         "all services on this account" onto a second line and orphaned its ✕. */
      .acct-shares .pill { display:inline-flex; align-items:center; gap:6px;
                           font-size:10.5px; letter-spacing:.02em; text-transform:none;
                           padding:4px 8px; border-radius:6px; max-width:100%; }
      .acct-label { font-family:var(--mono); font-size:10.5px; text-transform:uppercase;
                    letter-spacing:.06em; color:var(--muted); margin-bottom:6px; }
      .acct-share-form { padding:14px 18px; border-top:1px solid var(--rule); background:var(--paper); }
      .acct-actions { display:flex; align-items:center; gap:4px;
                      margin-top:auto; padding:8px 12px; border-top:1px solid var(--rule); }
      .acct-actions .acct-danger { margin-left:auto; }
      /* Icons, not four words. The labels were the same on every card, so they
         were shape rather than information; the tooltip and the accessible
         name still carry the word for anyone who needs it. */
      .acct-ico { display:inline-flex; align-items:center; justify-content:center;
                  width:30px; height:30px; padding:0; border:0; border-radius:8px;
                  background:transparent; color:var(--muted); cursor:pointer; }
      .acct-ico:hover { background:var(--sunk); color:var(--ink); }
      .acct-ico.acct-danger:hover { background:var(--error); color:var(--paper); }
      .acct-ok { display:inline-flex; align-items:center; color:var(--success); }

      /* Renaming happens on the card, in the line the name already occupies. */
      .acct-name-input { width:100%; padding:2px 6px; margin:-3px 0;
                         font:inherit; font-family:var(--display); font-weight:700; font-size:15px;
                         border:1px solid var(--ink); border-radius:6px; background:var(--paper); }

      /* Role editor: shared-accounts checkbox list */
      #role-shared-accounts .tool-check { justify-content:space-between; }
    
    /* Custom-connector approval table: two narrow tick columns, so the "Use"
       and "Read-only" headers sit over their own checkboxes instead of
       colliding into one run of text at the left edge. */
    .cc-review-table th.cc-tick, .cc-review-table td.cc-tick {
      width: 5.5rem; text-align: center; white-space: nowrap; vertical-align: middle;
    }
    .cc-review-table td.cc-tick input { margin: 0; }
    .cc-review-table th { vertical-align: bottom; }
    /* The tool column's header was centring over a wide column, landing it well
       to the right of the names underneath it. */
    .cc-review-table th:not(.cc-tick), .cc-review-table td:not(.cc-tick) { text-align: left; }
    /* A headerless .grid gets no cell padding, so the connector row ran into
       one unbroken string: name, URL and count with nothing between them. */
    .cc-list td { padding: .55rem .9rem .55rem 0; vertical-align: middle; }
    .cc-list td:first-child { padding-left: 0; }
    .cc-list td.right { text-align: right; white-space: nowrap; }
    /* Team switcher: reads as part of the identity line, not a form control. */
    #tenant-switch {
      font: inherit; color: var(--ink); background: transparent;
      border: 1px solid var(--line, #ddd); border-radius: 6px;
      padding: 2px 6px; max-width: 16rem; cursor: pointer;
    }
    details.cc-add { margin: 1rem 0; }
    details.cc-add summary { cursor: pointer; font-weight: 600; }
    /* Agents: create/edit form and approvals queue. Cards on the raised paper,
       icons in a soft tile, segmented controls for every either/or choice. */
    .ag-avatar { flex:none; display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px;
      border-radius:10px; background:color-mix(in srgb, var(--ag) 14%, var(--raise)); color:var(--ag);
      border:1px solid color-mix(in srgb, var(--ag) 30%, transparent); line-height:1; }
    .ag-avatar { position:relative; overflow:hidden; }
    .ag-avatar .ag-pic { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:var(--raise); }
    .ag-avatar-col { display:flex; flex-direction:column; align-items:center; gap:4px; }
    .ag-avatar-col .ag-link { font-size:12px; display:inline-flex; align-items:center; gap:4px; }
    .ag-avatar-col .ag-link svg { width:14px; height:14px; }
    .ag-chat-pick { margin-left:auto; max-width:280px; }
    .ag-chat-log { display:flex; flex-direction:column; gap:10px; max-height:460px; overflow-y:auto; padding:4px 2px 10px; }
    .ag-chat-empty { margin:8px 0; white-space:normal; }
    .ag-msg { display:flex; gap:8px; align-items:flex-end; max-width:86%; }
    .ag-msg.you { align-self:flex-end; }
    .ag-msg.you .ag-bubble { background:var(--ink); color:var(--paper); border-radius:14px 14px 4px 14px; white-space:pre-wrap; }
    .ag-msg.agent .ag-bubble { background:var(--paper); border:1px solid var(--rule); border-radius:14px 14px 14px 4px; }
    .ag-bubble { padding:9px 13px; line-height:1.45; overflow-wrap:anywhere; }
    .ag-bubble .ag-md > :first-child { margin-top:0; } .ag-bubble .ag-md > :last-child { margin-bottom:0; }
    .ag-msg.is-waiting .ag-bubble, .ag-msg.is-thinking .ag-bubble { color:var(--muted); display:inline-flex; align-items:center; gap:6px; }
    .ag-msg.is-failed .ag-bubble { border-color:color-mix(in srgb, var(--danger, #c0392b) 40%, var(--rule)); display:inline-flex; gap:6px; align-items:center; }
    .ag-dots { display:inline-flex; gap:4px; } .ag-dots i { width:6px; height:6px; border-radius:50%; background:var(--muted); animation:ag-dot 1.2s infinite ease-in-out; }
    .ag-dots i:nth-child(2) { animation-delay:.15s; } .ag-dots i:nth-child(3) { animation-delay:.3s; }
    @keyframes ag-dot { 0%,80%,100% { opacity:.25; transform:translateY(0); } 40% { opacity:1; transform:translateY(-3px); } }
    .ag-chat-form { display:flex; gap:8px; align-items:flex-end; margin-top:8px; }
    .ag-chat-form textarea { flex:1; resize:vertical; min-height:42px; }
    .ag-form { max-width:820px; }
    .ag-card { background:var(--raise); border:1px solid var(--rule); border-radius:12px; padding:18px 20px; margin:0 0 14px; }
    .ag-card-head, .ag-adv > summary { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 14px; }
    .ag-card-head h2, .ag-adv h2 { margin:0; font-size:17px; }
    .ag-card-head .ag-hint, .ag-adv summary .ag-hint { flex-basis:100%; margin:-6px 0 0 40px; }
    .ag-ico { flex:none; display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px;
      border-radius:8px; background:var(--sunk); color:var(--ink); }
    .ag-hint { display:block; color:var(--muted); font-size:13px; line-height:1.45; }
    .ag-form label, .ag-appr label { font-family:var(--sans); text-transform:none; letter-spacing:0; color:var(--ink); font-size:14px; margin:0; }
    .ag-field { display:flex; flex-direction:column; gap:6px; margin:0 0 14px; }
    .ag-field:last-child { margin-bottom:0; }
    .ag-field > .ag-seg { align-self:flex-start; }
    .ag-label { font-size:13px; font-weight:600; color:var(--ink); }
    .ag-form input, .ag-appr input:not([type=checkbox]) { border-radius:8px; background:var(--paper); }
    .ag-form textarea, .ag-appr textarea { width:100%; padding:10px 12px; border:1px solid var(--rule); border-radius:8px;
      font:inherit; font-size:14px; line-height:1.55; background:var(--paper); color:var(--ink); resize:vertical; }
    .ag-form textarea:focus, .ag-appr textarea:focus { outline:none; border-color:var(--ink); }
    .ag-form textarea.mono, .ag-appr textarea.mono { font-family:var(--mono); font-size:12.5px; }
    .ag-form select { border-radius:8px; width:auto; }
    .ag-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }
    /* Templates */
    .ag-templates { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px; }
    .ag-tpl { display:flex; align-items:flex-start; gap:10px; text-align:left; padding:12px; border-radius:10px;
      border:1px solid var(--rule); background:var(--paper); color:var(--ink); font-weight:400; }
    .ag-tpl:hover { background:var(--paper); border-color:var(--ink); }
    .ag-tpl.on { border-color:var(--spark); box-shadow:0 0 0 1px var(--spark) inset; background:var(--paper); }
    .ag-tpl b { display:block; font-size:14px; }
    .ag-tpl small { display:block; color:var(--muted); font-size:12.5px; line-height:1.4; margin-top:2px; }
    /* Segmented control */
    .ag-seg { flex:none; display:inline-flex; padding:2px; gap:2px; border:1px solid var(--rule); border-radius:9px; background:var(--paper); }
    .ag-seg-btn { display:inline-flex; align-items:center; gap:6px; border:0; border-radius:7px; background:transparent; color:var(--muted);
      padding:5px 11px; font-size:13px; font-weight:500; white-space:nowrap; }
    .ag-seg-btn:hover { background:var(--sunk); color:var(--ink); }
    .ag-seg-btn.on { background:var(--ink); color:var(--paper); }
    .ag-seg-btn:disabled { opacity:.4; cursor:not-allowed; }
    .ag-seg-btn:disabled:hover { background:transparent; color:var(--muted); }
    .ag-seg-btn.on[data-value=""] { background:var(--sunk); color:var(--ink); }
    .ag-seg-btn img { display:block; border-radius:3px; }
    /* Services */
    .ag-svcs { display:flex; flex-direction:column; border:1px solid var(--rule); border-radius:10px; overflow:hidden; background:var(--paper); }
    .ag-svc + .ag-svc { border-top:1px solid var(--rule); }
    .ag-svc-head { display:flex; align-items:center; gap:12px; padding:10px 12px; }
    .ag-svc.is-off .ag-logo, .ag-off .ag-logo { opacity:.55; }
    .ag-svc.on { background:var(--raise); }
    .ag-svc-text { flex:1 1 auto; min-width:0; }
    .ag-logo { flex:none; display:inline-flex; align-items:center; justify-content:center; border-radius:7px; background:var(--logo-tile);
      border:1px solid var(--rule); padding:4px; overflow:hidden; font-size:11px; font-weight:700; }
    .ag-logo img { width:100%; height:100%; object-fit:contain; display:block; }
    .ag-row-title { display:block; font-size:14px; font-weight:600; color:var(--ink); }
    .ag-row-sub { display:block; font-size:12.5px; color:var(--muted); margin-top:1px; }
    .ag-writes { margin:0 12px 12px 54px; border-left:2px solid var(--rule); padding-left:12px; display:flex; flex-direction:column; gap:6px; }
    .ag-write { display:flex; align-items:center; justify-content:space-between; gap:12px; }
    .ag-write-name { font-size:13.5px; }
    .ag-tools-toggle { flex:none; gap:4px; padding:4px 8px; font-size:12.5px; color:var(--muted); }
    .ag-tools-toggle .ag-chev { margin-left:0; }
    .ag-svc.is-open .ag-tools-toggle .ag-chev svg { transform:rotate(180deg); }
    .ag-auto-n { display:inline-flex; align-items:center; gap:2px; font-weight:600; color:var(--warn); }
    .ag-auto-n svg { width:12px; height:12px; }
    .ag-writes-tools { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:4px; }
    .ag-writes-q { flex:1 1 200px; margin:0; padding:2px 8px; cursor:text; }
    .ag-writes-q input { flex:1 1 auto; min-width:0; border:0; background:transparent; padding:5px 2px; font:inherit; font-size:13px; color:inherit; outline:none; }
    .ag-writes-bulk { display:inline-flex; gap:4px; margin-left:auto; }
    .ag-writes-bulk .ag-mini-btn { display:inline-flex; align-items:center; gap:4px; margin-left:0; }
    .ag-writes-none { margin:0; font-size:13px; }
    /* Triggers */
    .ag-switch-row { display:flex; align-items:center; gap:12px; padding:11px 0; border-top:1px solid var(--rule); cursor:pointer; }
    .ag-card-head + .ag-switch-row { border-top:0; padding-top:0; }
    .ag-row-ico { flex:none; display:inline-flex; color:var(--muted); }
    .ag-row-text { flex:1 1 auto; min-width:0; }
    .ag-switch { appearance:none; -webkit-appearance:none; flex:none; width:38px; height:22px; border-radius:22px; padding:0;
      background:var(--line-strong); position:relative; cursor:pointer; border:0; transition:background .12s; }
    .ag-switch::after { content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%;
      background:#fff; transition:transform .12s; box-shadow:0 1px 2px rgba(0,0,0,.2); }
    .ag-switch:checked { background:var(--spark); }
    .ag-switch:checked::after { transform:translateX(16px); }
    .ag-sched { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:-2px 0 12px 30px; }
    .ag-sched input, .ag-sched select { width:auto; padding:7px 10px; font-size:13.5px; }
    .ag-sched-times { width:150px !important; }
    .ag-sched-cron { width:180px !important; }
    .ag-sched-tz { width:170px !important; color:var(--muted); }
    .ag-email-senders { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:-4px 0 10px 44px; }
    .ag-email-senders select { width:auto; }
    .ag-email-senders input { flex:1 1 260px; min-width:200px; }
    .ag-email-senders .ag-warn { flex-basis:100%; margin:0; color:var(--warn); }
    .ag-email-senders p { flex:1 1 100%; min-width:0; margin:0; white-space:normal; }
    #af-email-legacy-drop { display:inline; width:auto; min-width:0; margin:0 0 0 4px; padding:0; }
    .ag-sched-at { color:var(--muted); font-size:13.5px; }
    .ag-scheds { display:flex; flex-direction:column; gap:10px; margin:0 0 8px 30px; }
    .ag-sched-row { border:1px solid var(--rule); border-radius:10px; padding:10px 12px; display:flex; flex-direction:column; gap:8px; }
    .ag-sched-row .ag-sched { margin:0; }
    .ag-sched-top { display:flex; align-items:center; gap:8px; }
    .ag-sched-label { flex:1 1 auto; min-width:0; padding:7px 10px; font-size:13.5px; font-weight:600; }
    .ag-sched-instr { width:100%; padding:7px 10px; font-size:13.5px; resize:vertical; }
    .ag-sched-line { margin:0; }
    .ag-sched-add { margin:0 0 12px 30px; }
    .ag-scheds-head { cursor:default; }
    .ag-sched-instr-view { white-space:pre-wrap; }
    @media (max-width:640px) { .ag-scheds, .ag-sched-add { margin-left:0; } }
    /* Advanced */
    .ag-adv > summary { list-style:none; cursor:pointer; margin:0; }
    .ag-adv > summary::-webkit-details-marker { display:none; }
    .ag-adv[open] > summary { margin-bottom:16px; }
    .ag-chev { margin-left:auto; color:var(--muted); display:inline-flex; transition:transform .12s; }
    .ag-adv[open] .ag-chev svg { transform:rotate(180deg); }
    .ag-adv > summary .ag-hint { flex-basis:auto; margin:0; }
    /* Actions */
    .ag-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:16px; }
    .ag-btn { display:inline-flex; align-items:center; gap:7px; border-radius:8px; padding:9px 16px; }
    .ag-reject { color:var(--error); border-color:color-mix(in srgb, var(--error) 50%, var(--rule)); }
    .ag-reject:hover { background:var(--error); border-color:var(--error); color:var(--paper); }
    .ag-actions-note { margin-left:auto; }
    /* Approvals */
    .ag-appr { max-width:820px; }
    .ag-appr-head { display:flex; gap:12px; align-items:center; }
    .ag-appr-title { font-size:15px; line-height:1.4; min-width:0; }
    .ag-appr-meta { display:flex; align-items:center; gap:6px; flex-wrap:wrap; color:var(--muted); font-size:12.5px; margin-top:3px; }
    .ag-appr-meta .ag-logo { padding:3px; border-radius:5px; }
    .ag-args { display:grid; grid-template-columns:minmax(90px,max-content) 1fr; gap:8px 18px; margin:16px 0 0; padding:14px 16px;
      background:var(--paper); border:1px solid var(--rule); border-radius:10px; font-size:14px; }
    .ag-args dt { color:var(--muted); font-size:13px; padding-top:1px; }
    .ag-args dd { margin:0; min-width:0; overflow-wrap:anywhere; }
    .ag-long { white-space:pre-wrap; line-height:1.5; }
    .ag-json { display:block; white-space:pre-wrap; font-size:12px; background:var(--sunk); padding:6px 8px; border-radius:6px; }
    /* Skills picker: chips in a field, a floating list below it */
    .ag-skill-wrap { position:relative; }
    .ag-skills { display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:5px 8px; border:1px solid var(--rule); border-radius:8px; background:var(--paper); cursor:text; }
    .ag-skills:focus-within { border-color:var(--ink); }
    .ag-chips { display:contents; }
    .ag-skills .ag-chip { display:inline-flex; align-items:center; gap:4px; margin:0; padding:2px 4px 2px 9px; border-radius:20px; background:var(--sunk); font-size:13px; }
    .ag-chip button { border:0; background:transparent; color:var(--muted); padding:0 5px; font-size:14px; line-height:1; border-radius:10px; }
    .ag-chip button:hover { background:var(--rule); color:var(--ink); }
    /* Who can talk to it: role chips carry an outline so a group reads apart from one person */
    .ag-skills .ag-chip.ag-chip-role { background:var(--paper); box-shadow:inset 0 0 0 1px var(--rule); }
    .ag-access-line { margin:0; }
    /* Three choices: they wrap on a phone instead of running off the card */
    #af-access .ag-seg { max-width:100%; flex-wrap:wrap; }
    #af-access .ag-seg-btn { white-space:nowrap; }
    .ag-access-warn { margin:0 0 12px; color:var(--warn); }
    .ag-skill-name svg { vertical-align:-3px; }
    .ag-form .ag-skill-q { flex:1 1 160px; min-width:120px; border:0 !important; background:transparent; padding:5px 2px; }
    .ag-skill-list { position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:20; padding:5px; border:1px solid var(--rule); border-radius:10px;
      background:var(--paper); max-height:300px; overflow:auto; box-shadow:0 8px 24px rgba(14,14,12,.12); }
    .ag-skill-opt { display:flex; flex-direction:column; gap:1px; padding:8px 10px; border-radius:7px; cursor:pointer; }
    .ag-skill-opt.on, .ag-skill-opt:hover { background:var(--sunk); }
    .ag-skill-name { font-size:14px; font-weight:500; }
    .ag-skill-folder { margin-left:8px; font-family:var(--mono); font-size:11px; color:var(--muted); padding:1px 6px; border:1px solid var(--rule); border-radius:5px; }
    .ag-skill-desc { font-size:12.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .ag-skill-empty { padding:8px 10px; font-size:13px; color:var(--muted); }
    .ag-channel-approve { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; color:var(--ink); }
    /* Commands card and the chat's "/" list */
    .ag-cmd-row { display:flex; flex-direction:column; gap:6px; padding:10px; border:1px solid var(--rule); border-radius:10px; margin-bottom:8px; }
    .ag-cmd-line { display:flex; gap:8px; align-items:center; }
    .ag-cmd-line > input, .ag-cmd-line > select { flex:1 1 auto; min-width:0; }
    .ag-cmd-name { display:inline-flex; align-items:center; flex:0 0 170px; border:1px solid var(--rule); border-radius:8px; padding-left:8px; background:var(--paper); }
    .ag-cmd-name:focus-within { border-color:var(--ink); }
    .ag-cmd-slash { font-family:var(--mono); color:var(--muted); }
    .ag-cmd-skill { flex:1 1 auto; min-width:0; }
    .ag-cmd-skill > input { width:100%; }
    .ag-cmd-skill .ag-skill-list { right:auto; width:min(340px, calc(100vw - 48px)); }
    .ag-skill-group { padding:8px 10px 4px; font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
    .ag-cmd-ask { display:flex; flex-direction:column; gap:8px; margin:0; font-size:13px; }
    .ag-cmd-ask .row { display:flex; gap:8px; justify-content:flex-end; }
    .ag-form .ag-cmd-name input { border:0 !important; background:transparent; font-family:var(--mono); min-width:0; width:100%; padding-left:2px; }
    .ag-cmd-tag { flex:0 0 auto !important; padding:1px 8px; border-radius:6px; background:var(--sunk); font-size:13px; }
    .ag-chat-form { position:relative; }
    .ag-cmd-list { top:auto; bottom:calc(100% + 4px); }
    .ag-kv { display:flex; flex-wrap:wrap; gap:4px 14px; }
    .ag-kv i { font-style:normal; color:var(--muted); font-size:13px; margin-right:2px; }
    .ag-chip { display:inline-block; padding:1px 8px; border-radius:20px; background:var(--sunk); font-size:13px; margin:0 4px 4px 0; }
    .ag-args-edit { display:flex; flex-direction:column; gap:12px; }
    .ag-edit-field { display:flex; flex-direction:column; gap:6px; }
    .ag-empty { display:flex; gap:12px; align-items:center; padding:18px 20px; border:1px dashed var(--rule); border-radius:12px; max-width:820px; }
    .ag-sub-h { margin:30px 0 10px; }
    .ag-decided { list-style:none; padding:0; margin:0; max-width:820px; border:1px solid var(--rule); border-radius:12px; overflow:hidden; background:var(--raise); }
    .ag-decided li { display:flex; align-items:center; gap:12px; padding:10px 14px; font-size:14px; }
    .ag-decided li + li { border-top:1px solid var(--rule); }
    .ag-dec-ico { flex:none; display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; }
    .ag-dec-ico.ok { background:color-mix(in srgb, var(--success) 14%, transparent); color:var(--success); }
    .ag-dec-ico.no { background:var(--sunk); color:var(--ink); }
    .ag-dec-ico.bad { background:color-mix(in srgb, var(--error) 12%, transparent); color:var(--error); }
    .ag-dec-ico.dim { background:var(--sunk); color:var(--muted); }
    .ag-dec-main { flex:1 1 auto; min-width:0; }
    .ag-dec-err { display:block; color:var(--error); font-size:12.5px; font-family:var(--mono); }
    .ag-dec-by { color:var(--muted); font-size:13px; white-space:nowrap; }
    /* Agents list, runners and tab bar (round 2). */
    #agents-subnav.ag-tabs { gap:4px; padding:3px; border:1px solid var(--rule); border-radius:11px; background:var(--raise); width:max-content; max-width:100%; overflow-x:auto; }
    #agents-subnav.ag-tabs .subtab { display:inline-flex; align-items:center; gap:7px; font-family:var(--sans); font-size:13.5px; font-weight:500;
      text-transform:none; letter-spacing:0; padding:7px 13px; border:0; border-radius:8px; background:transparent; color:var(--muted); white-space:nowrap; }
    #agents-subnav.ag-tabs .subtab:hover { background:var(--sunk); color:var(--ink); }
    #agents-subnav.ag-tabs .subtab.on { background:var(--ink); color:var(--paper); }
    .ag-count { min-width:18px; height:18px; padding:0 5px; border-radius:9px; font-size:11px; font-weight:600; line-height:18px; text-align:center;
      background:var(--sunk); color:var(--muted); font-variant-numeric:tabular-nums; }
    .subtab.on .ag-count { background:var(--bg-sunken); color:var(--text); }
    .ag-count.hot { background:var(--spark); color:var(--paper); }
    .ag-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; max-width:980px; }
    .ag-item { display:flex; align-items:center; gap:12px; padding:14px 16px; background:var(--raise); border:1px solid var(--rule); border-radius:12px; min-width:0; }
    .ag-item:hover { border-color:var(--muted); }
    .ag-item.is-paused .ag-avatar { filter:grayscale(.8); opacity:.7; }
    .ag-item-main { flex:1 1 auto; min-width:0; display:flex; gap:14px; align-items:flex-start; color:inherit; text-decoration:none; }
    .ag-item-text { min-width:0; display:flex; flex-direction:column; gap:3px; }
    .ag-item-title { display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:15.5px; }
    .ag-item-title b { font-weight:650; }
    .ag-item-sub { color:var(--muted); font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
    .ag-item-err { color:var(--error); font-size:12.5px; }
    .ag-status { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; padding:2px 8px 2px 7px; border-radius:20px;
      background:var(--sunk); color:var(--muted); }
    .ag-status.on { background:color-mix(in srgb, var(--success) 13%, transparent); color:var(--success); }
    .ag-status svg { width:12px; height:12px; }
    .ag-status.on svg { width:7px; height:7px; }
    .ag-meta { display:flex; align-items:center; gap:6px 16px; flex-wrap:wrap; margin-top:5px; font-size:12.5px; color:var(--muted); }
    .ag-meta-item { display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
    .ag-mini { display:inline-flex; }
    .ag-mini svg { width:13px; height:13px; }
    .ag-mini.ok { color:var(--success); } .ag-mini.bad { color:var(--error); } .ag-mini.live { color:var(--spark); } .ag-mini.dim { color:var(--muted); }
    .ag-engine { display:inline-flex; align-items:center; gap:5px; padding:1px 8px 1px 5px; border:1px solid var(--rule); border-radius:20px; background:var(--paper); color:var(--ink); white-space:nowrap; font-size:12px; }
    .ag-engine img { display:block; border-radius:3px; }
    .ag-runner { display:inline-flex; align-items:center; gap:5px; color:var(--ink); min-width:0; }
    .ag-runner svg { flex:none; color:var(--muted); }
    .ag-runner-name { max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .ag-pin { display:inline-flex; color:var(--spark); }
    .ag-dot { flex:none; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--text-2); }
    .ag-dot.on { background:var(--success); box-shadow:0 0 0 3px color-mix(in srgb, var(--success) 18%, transparent); }
    .ag-dot.paused { background:var(--spark); }
    .ag-item-actions { flex:none; display:flex; align-items:center; gap:6px; }
    .ag-icon-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; height:34px; min-width:34px; padding:0 9px; border-radius:8px; }
    .ag-icon-btn.ghost { border-color:var(--rule); }
    .ag-icon-btn.ghost:hover { border-color:var(--ink); }
    .ag-run { padding:0 12px; }
    .ag-menu-wrap { position:relative; }
    .ag-menu { position:absolute; right:0; top:calc(100% + 6px); z-index:20; min-width:180px; padding:5px; background:var(--paper);
      border:1px solid var(--rule); border-radius:10px; box-shadow:0 8px 24px rgba(14,14,12,.12); }
    .ag-menu button { display:flex; align-items:center; gap:8px; width:100%; padding:8px 10px; border:0; border-radius:7px; background:transparent; color:var(--ink); font-size:13.5px; text-align:left; }
    .ag-menu button:hover { background:var(--sunk); }
    .ag-menu .ag-menu-danger { color:var(--error); }
    .ag-menu .ag-menu-danger:hover { background:color-mix(in srgb, var(--error) 10%, transparent); }
    .ag-banner { display:flex; align-items:center; gap:12px; max-width:980px; margin:0 0 14px; padding:12px 16px; border-radius:12px; text-decoration:none; color:var(--ink);
      background:color-mix(in srgb, var(--spark) 9%, var(--raise)); border:1px solid color-mix(in srgb, var(--spark) 35%, var(--rule)); }
    .ag-banner > span:nth-child(2) { display:flex; flex-direction:column; gap:1px; flex:1 1 auto; }
    .ag-banner-go { font-weight:600; font-size:13.5px; white-space:nowrap; }
    .ag-banner:hover { border-color:var(--spark); }
    .ag-os { flex:none; display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:10px; background:var(--sunk); color:var(--ink); }
    .ag-os svg { width:20px; height:20px; }
    .ag-add-runner { max-width:980px; margin-top:12px; }
    .ag-add-runner > summary { display:inline-flex; align-items:center; gap:8px; cursor:pointer; list-style:none; padding:8px 14px; border:1px dashed var(--muted); border-radius:8px; font-size:13.5px; }
    .ag-add-runner > summary::-webkit-details-marker { display:none; }
    .ag-add-runner[open] > summary { margin-bottom:10px; }
    .ag-add-runner .pg-card { margin:0 !important; border-radius:12px; }
    .ag-box-card { max-width:980px; margin-bottom:14px; }
    .ag-box-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:14px; }
    .ag-box-actions select { flex:1 1 420px; max-width:680px; }
    /* Cloud box, before paying: one card per size. After: the plan in big type. */
    .ag-sizes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
    .ag-size { position:relative; display:flex; flex-direction:column; gap:2px; padding:12px 14px; border:1.5px solid var(--rule); border-radius:10px; background:var(--paper); cursor:pointer; }
    .ag-size, .ag-size-row { font-family:var(--sans); font-size:14px; text-transform:none; letter-spacing:normal; color:var(--ink); margin:0; }
    .ag-size input { position:absolute; opacity:0; pointer-events:none; }
    .ag-size.on { border-color:var(--spark); box-shadow:0 0 0 3px color-mix(in srgb, var(--spark) 18%, transparent); }
    .ag-size:focus-within { outline:2px solid var(--ink); outline-offset:2px; }
    .ag-size-price { font-size:22px; font-weight:700; letter-spacing:-.02em; }
    .ag-size-price small { font-size:12px; font-weight:500; }
    .ag-size-desc { font-size:13px; line-height:1.35; }
    .ag-box-actions .ag-box-off { margin-left:auto; }
    .ag-plan { display:flex; align-items:center; gap:14px; }
    .ag-plan-chip { flex:none; width:46px; height:46px; border-radius:10px; background:var(--ink); color:var(--paper); display:grid; place-items:center; font-weight:700; }
    .ag-plan-text { display:flex; flex-direction:column; min-width:0; }
    .ag-plan-name { font-size:20px; letter-spacing:-.02em; }
    .ag-plan-sub { font-size:13px; }
    .ag-plan-sub.bad { color:var(--error); font-weight:600; }
    .ag-plan + .ag-meta { margin-top:12px; }
    .ag-plan-todo { display:flex; gap:8px; align-items:center; margin:14px 0 0; padding:10px 12px; border:1px solid var(--spark); border-radius:10px; background:color-mix(in srgb, var(--spark) 10%, var(--paper)); font-size:14px; }
    .ag-plan-todo svg { flex:none; color:var(--spark); }
    /* AI account and Change size modals. */
    .ag-elm-lede { margin:0 0 14px; }
    .ag-elm .ag-el-segs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
    .ag-elm-steps { margin:0 0 8px; padding-left:20px; line-height:1.6; }
    .ag-elm-steps li { margin:0 0 8px; }
    .ag-elm-steps pre.copyable { margin:6px 0 0; }
    .ag-elm-help p { margin:0 0 10px; }
    #ag-elm-secret { width:100%; box-sizing:border-box; margin-top:4px; }
    .ag-size-rows { display:flex; flex-direction:column; gap:8px; }
    .ag-size-row { display:flex; align-items:center; gap:12px; padding:10px 12px; border:1.5px solid var(--rule); border-radius:10px; cursor:pointer; }
    .ag-size-row.on { border-color:var(--spark); }
    .ag-size-row input { accent-color:var(--spark); width:auto; flex:none; margin:0; padding:0; }
    .ag-size-row-text { display:flex; flex-direction:column; flex:1; min-width:0; }
    .ag-size-row-price { white-space:nowrap; }
    .ag-size-diff { margin:12px 0 0; padding:10px 12px; border-radius:8px; background:var(--sunk); font-size:13px; }
    @media (max-width:720px) { .ag-sizes { grid-template-columns:1fr; } .ag-box-actions .ag-box-off { margin-left:0; } }
    .ag-item-actions .ag-reject { color:var(--error); }
    .ag-mono { display:inline-flex; align-items:center; justify-content:center; width:100%; height:100%; font-size:10px; font-weight:700; color:var(--muted); }
    .ag-engine .ag-mono { width:14px; height:14px; }
    /* Runs on */
    .ag-runners { display:flex; flex-direction:column; border:1px solid var(--rule); border-radius:10px; overflow:hidden; background:var(--paper); }
    .ag-runner-opt { display:flex; align-items:center; gap:12px; padding:10px 12px; border:0; border-radius:0; background:transparent; color:var(--ink); text-align:left; font-weight:400; }
    .ag-runner-opt + .ag-runner-opt { border-top:1px solid var(--rule); }
    .ag-runner-opt:hover { background:var(--raise); }
    .ag-runner-opt.on { background:var(--raise); }
    .ag-runner-opt .ag-os { width:30px; height:30px; border-radius:8px; }
    .ag-runner-opt .ag-os svg { width:16px; height:16px; }
    .ag-runner-opt .ag-row-title { display:inline-flex; align-items:center; gap:7px; }
    .ag-radio { flex:none; margin-left:auto; width:18px; height:18px; border-radius:50%; border:1.5px solid var(--rule); background:var(--paper); }
    .ag-runner-opt.on .ag-radio { border:5px solid var(--spark); }
    @media (max-width:760px) {
      .ag-item { flex-direction:column; align-items:stretch; }
      .ag-item-actions { justify-content:flex-end; }
      .ag-runner-name { max-width:150px; }
    }
    /* Agent detail page, run history, Slack tab (round 5) */
    .ag-detail-head { display:flex; align-items:flex-start; gap:16px; margin:8px 0 22px; min-width:0; }
    .ag-detail-title { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:4px; }
    .ag-detail-title h1, .ag-detail-title h2 { margin:0; }
    .ag-detail-head .ag-item-actions { padding-top:6px; }
    .ag-plain { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; font-size:14px; }
    .ag-plain li { display:flex; align-items:center; gap:10px; min-width:0; }
    .ag-plain li > span:not(.ag-mini):not(.ag-tag) { flex:1 1 auto; min-width:0; }
    .ag-plain .ag-logo, .ag-plain .ag-mono { flex:none !important; padding:3px; border-radius:6px; }
    .ag-ellipsis { display:inline-block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom; }
    .ag-tag { flex:none; display:inline-flex; align-items:center; gap:4px; padding:2px 9px; border-radius:20px; font-size:12px; font-weight:600;
      background:var(--ink); color:var(--paper); white-space:nowrap; }
    .ag-tag svg { width:12px; height:12px; }
    .ag-tag.dim { background:var(--sunk); color:var(--ink); }
    .ag-tag.ask { background:var(--ink); color:var(--paper); }
    .ag-tag.auto { background:color-mix(in srgb, var(--spark) 14%, transparent); color:var(--spark-dark); }
    .ag-tag.warn { background:color-mix(in srgb, var(--spark) 14%, transparent); color:var(--spark-dark); font-weight:500; }
    .ag-chiprow { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 12px; }
    .ag-chiprow .ag-chip { margin:0; }
    .ag-copy { flex:none; display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; padding:0; border:1px solid var(--rule);
      border-radius:7px; background:var(--paper); color:var(--muted); }
    .ag-copy:hover { border-color:var(--ink); color:var(--ink); background:var(--paper); }
    .ag-sub-h { display:flex; align-items:center; gap:8px; }
    /* Mailbox tab on an agent's page */
    .ag-ptabs { display:flex; gap:4px; margin:0 0 20px; border-bottom:1px solid var(--rule); overflow-x:auto; }
    .ag-ptab { display:inline-flex; align-items:center; gap:7px; padding:10px 14px; background:transparent; border:0; border-bottom:2px solid transparent; margin-bottom:-1px; border-radius:0;
      font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); white-space:nowrap; }
    .ag-ptab:hover { background:transparent; color:var(--ink); }
    .ag-ptab.on { color:var(--ink); border-bottom-color:var(--spark); }
    .ag-ptab svg { width:15px; height:15px; }
    .ag-ptab-n { min-width:18px; padding:0 5px; text-align:center; border-radius:9px; background:var(--spark); color:var(--paper); font-size:11px; letter-spacing:0; }
    /* Chat, Mailbox and Logs tabs: only the header, the tabs and that tab's panel. */
    .ag-page.ag-on-tab > :not(.ag-back):not(.ag-detail-head):not(.ag-ptabs):not(.ag-ppanel) { display:none !important; }
    /* Chat tab: the card runs from where it starts to the bottom of the window. */
    .ag-page.ag-on-chat #ag-chat { display:flex; flex-direction:column; height:calc(100dvh - var(--ag-chat-top, 260px) - 24px); min-height:420px; margin-bottom:0; }
    .ag-page.ag-on-chat #ag-chat .ag-chat-log { flex:1 1 auto; max-height:none; min-height:0; }
    .content > #view-agents.ag-wide { max-width:none; }
    .ag-page.ag-on-mail { max-width:none; }
    .ag-ptab:focus { outline:none; }
    .ag-ptab:focus-visible { outline:2px solid var(--spark); outline-offset:-2px; }
    .ag-mail { --mail-h:clamp(460px, calc(100vh - 380px), 900px); }
    .ag-mail-strip { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 14px; padding:10px 14px; border:1px solid var(--rule); border-radius:12px; background:var(--raise); }
    .ag-mail-strip .ag-ico { display:inline-flex; color:var(--muted); }
    .ag-mail-strip-label { font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
    .ag-mail-addr-v { font-size:14px; overflow-wrap:anywhere; }
    .ag-mail-strip-hint { flex:1 1 220px; min-width:0; font-size:13px; color:var(--muted); text-align:right; }
    .ag-mail-cols { display:grid; grid-template-columns:clamp(340px, 24vw, 480px) minmax(0,1fr); gap:14px; align-items:stretch; margin:0 0 14px; height:var(--mail-h); }
    .ag-mail-cols .ag-card { margin:0; min-height:0; overflow-y:auto; }
    .ag-mail-count { margin-left:6px; vertical-align:2px; }
    .ag-mail-threads { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
    .ag-mail-threads li + li { border-top:1px solid var(--rule); }
    .ag-mail-thread { width:100%; display:flex; align-items:flex-start; gap:10px; padding:10px 8px; margin:0; text-align:left; background:transparent; color:var(--ink); border:0; border-radius:8px; font-weight:400; }
    .ag-mail-thread:hover { background:var(--sunk); }
    .ag-mail-thread:focus { outline:none; }
    .ag-mail-thread:focus-visible { outline:2px solid var(--spark); outline-offset:-2px; }
    .ag-mail-thread.on { background:var(--sunk); box-shadow:inset 3px 0 0 var(--spark); }
    .ag-mail-dir { flex:none; width:22px; height:22px; margin-top:1px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:var(--sunk); color:var(--muted); font-size:13px; line-height:1; }
    .ag-mail-dir.in { color:var(--ink); } .ag-mail-dir.out { color:var(--spark-dark); }
    .ag-mail-main { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:3px; }
    .ag-mail-l1, .ag-mail-l2 { display:flex; align-items:baseline; justify-content:space-between; gap:10px; min-width:0; }
    .ag-mail-l2 { align-items:center; }
    .ag-mail-subj { flex:1 1 auto; min-width:0; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .ag-mail-time { flex:none; font-size:12px; color:var(--muted); white-space:nowrap; }
    .ag-mail-sub { flex:1 1 auto; min-width:0; font-size:12.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .ag-mail-l2 .ag-tag { flex:none; white-space:nowrap; }
    .ag-mail-view-idle { display:flex; align-items:center; justify-content:center; }
    .ag-mail-back { display:none; margin:0 0 10px; }
    .ag-mail-title { margin:0 0 12px; font-size:17px; overflow-wrap:anywhere; }
    .ag-mmsg { border:1px solid var(--rule); border-radius:10px; padding:12px 14px; margin:0 0 10px; background:var(--paper); }
    .ag-mmsg.out { background:var(--sunk); }
    .ag-mmsg-head { display:flex; align-items:flex-start; gap:8px; }
    .ag-mmsg-who { flex:1 1 auto; min-width:0; overflow-wrap:anywhere; word-break:break-word; font-size:13px; }
    .ag-mmsg-who > * { overflow-wrap:anywhere; word-break:break-all; }
    .ag-mmsg-at { flex:none; font-size:12px; }
    .ag-mmsg-tags { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 0; }
    .ag-mmsg-body { margin:10px 0 0; padding:0; background:transparent; color:var(--ink); font-family:var(--sans); font-size:14px; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; word-break:normal; overflow:visible; }
    .ag-mmsg-atts { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 0; }
    .ag-att { max-width:100%; }
    .ag-att span:nth-child(2) { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .ag-mail-allow-form { display:flex; gap:8px; margin:0 0 10px; }
    .ag-mail-allow-form input { flex:1 1 auto; min-width:0; }
    .ag-mail-allow .ag-chip { display:inline-flex; align-items:center; gap:4px; padding:2px 4px 2px 9px; }
    @media (max-width:900px) {
      .ag-mail-cols { grid-template-columns:minmax(0,1fr); height:auto; }
      .ag-mail-cols .ag-card { overflow:visible; }
      .ag-mail-cols.ag-mail-open .ag-mail-list { display:none; }
      .ag-mail-cols:not(.ag-mail-open) .ag-mail-view { display:none; }
      .ag-mail-back { display:inline-flex; }
      .ag-mail-strip-hint { text-align:left; flex-basis:100%; }
      .ag-mail-allow-form { flex-direction:column; }
    }
    .ag-runs { list-style:none; margin:0 0 18px; padding:0; display:flex; flex-direction:column; gap:10px; max-width:980px; }
    .ag-run-card { padding:14px 16px; background:var(--raise); border:1px solid var(--rule); border-radius:12px; min-width:0; }
    .ag-run-head { display:flex; align-items:center; flex-wrap:wrap; gap:6px 14px; font-size:13px; color:var(--muted); }
    .ag-run-head b { color:var(--ink); font-size:14px; margin-left:-6px; }
    .ag-run-head .ag-runner-name { max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:inline-block; }
    .ag-run-sub { font-size:12.5px; margin-top:4px; }
    .ag-run-err { margin-top:6px; color:var(--error); font-size:13.5px; }
    .ag-md { margin-top:10px; font-size:14px; line-height:1.55; color:var(--ink); overflow-wrap:anywhere; }
    .ag-md p { margin:0 0 8px; }
    .ag-md p:last-child { margin-bottom:0; }
    .ag-md code { font-family:var(--mono); font-size:12.5px; background:var(--sunk); padding:1px 5px; border-radius:4px; }
    .ag-md .md-pre { background:var(--sunk); color:var(--ink); padding:10px 12px; border-radius:8px; margin:6px 0; white-space:pre-wrap; }
    .ag-md .md-pre code { background:none; padding:0; }
    .ag-md .md-list { margin:4px 0 8px; padding-left:20px; }
    .ag-md .md-list li { margin:2px 0; }
    .ag-md .md-h { margin-top:4px; }
    .ag-md .md-table { border-collapse:collapse; margin:6px 0 10px; font-size:13px; display:block; overflow-x:auto; max-width:100%; }
    .ag-md .md-table th, .ag-md .md-table td { border:1px solid var(--rule); padding:5px 9px; text-align:left; vertical-align:top; }
    .ag-md .md-table th { background:var(--sunk); font-weight:600; }
    .ag-md a { color:var(--ink); text-decoration:underline; text-underline-offset:2px; }
    .ag-clamp { max-height:4.7em; overflow:hidden; -webkit-mask-image:linear-gradient(#000 60%, transparent); mask-image:linear-gradient(#000 60%, transparent); }
    .ag-link { margin-top:4px; padding:2px 0; border:0; background:none; color:var(--muted); font-size:13px; font-weight:600; }
    .ag-link:hover { background:none; color:var(--ink); }
    .ag-events { margin-top:10px; font-size:13px; }
    .ag-events > summary { cursor:pointer; color:var(--muted); font-weight:600; }
    .ag-events > summary:hover { color:var(--ink); }
    .ag-events ul { list-style:none; margin:8px 0 0; padding:0 0 0 2px; display:flex; flex-direction:column; gap:6px; }
    .ag-events li { display:flex; align-items:center; gap:8px; }
    .ag-events li > span:nth-child(2) { flex:1 1 auto; min-width:0; }
    .ag-audit { max-width:980px; margin-top:6px; }
    .ag-runhist { max-width:980px; margin-top:6px; }
    .ag-runhist-q { margin:0 0 10px; cursor:text; }
    .ag-runhist-q input { flex:1 1 auto; min-width:0; border:0; background:transparent; padding:7px 2px; font:inherit; color:inherit; outline:none; }
    .ag-kind-chip { border:0; cursor:pointer; font:inherit; font-size:13px; color:var(--ink); }
    .ag-kind-chip.on { background:var(--ink); color:var(--paper); }
    .ag-runhist .ag-runs { margin-bottom:8px; }
    .ag-runs > li[hidden] { display:none; }
    .ag-audit .ag-decided { border:0; background:none; }
    .ag-status.warn { background:color-mix(in srgb, var(--warn) 13%, transparent); color:var(--warn); }
    .ag-status.bad { background:color-mix(in srgb, var(--error) 12%, transparent); color:var(--error); }
    .ag-ch-sub { display:grid; gap:12px; margin:2px 0 4px 44px; }
    .ag-ch-sub[hidden], .ag-slack-connect[hidden] { display:none; }
    .ag-ch-line { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
    .ag-slack-connect { display:grid; gap:8px; padding:12px 14px; border:1px solid var(--rule); border-radius:10px; background:var(--sunk); }
    /* A grid item never shrinks below its content: keep long steps and the token field inside the phone width. */
    .ag-slack-connect { grid-template-columns:minmax(0,1fr); min-width:0; overflow-wrap:anywhere; }
    .ag-slack-connect input, .ag-slack-connect .ag-ch-steps { max-width:100%; min-width:0; box-sizing:border-box; }
    .ag-slack-connect .t-dim, .ag-ch-line .t-dim { white-space:normal; }
    /* Engine login card: one line per engine; pills hug their text; form spaced off the list. */
    #ag-engine-login .ag-el-list { gap:10px; }
    #ag-engine-login .ag-el-line { flex-wrap:wrap; align-items:center; gap:8px 10px; }
    #ag-engine-login .ag-el-line > span.ag-el-name { flex:0 0 64px; font-weight:600; }
    #ag-engine-login .ag-el-line > span.ag-status { flex:none; }
    #ag-engine-login .ag-el-line > span.ag-el-meta { flex:1 1 auto; }
    #ag-engine-login .ag-el-line > .ag-reject { margin-left:auto; }
    #ag-engine-login .ag-el-line > span.ag-el-note { flex-basis:100%; margin:0 0 0 74px; }
    #ag-engine-login .ag-status:not(.on):not(.warn):not(.bad) { background:var(--sunk); color:var(--muted); }
    #ag-engine-login .t-dim { white-space:normal; overflow-wrap:anywhere; }
    #ag-engine-login .ag-el-empty { margin:12px 0 0; }
    #ag-engine-login .ag-el-actions { margin-top:16px; }
    #ag-engine-login .ag-el-actions[hidden] { display:none; }
    #ag-engine-login .ag-el-form { margin-top:16px; gap:12px; padding:14px 16px; }
    #ag-github .ag-el-line { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
    #ag-github .ag-el-line > span.ag-el-name { flex:none; font-weight:600; }
    #ag-github .ag-el-line > span.ag-el-meta { flex:1 1 auto; }
    #ag-github .ag-el-line > .ag-reject { margin-left:auto; }
    #ag-github .ag-el-line > span.ag-el-note { flex-basis:100%; overflow-wrap:anywhere; }
    #ag-github .ag-el-empty { margin:12px 0 0; }
    .ag-gh { margin:0 12px 12px 54px; display:flex; flex-direction:column; gap:8px; }
    .ag-gh-head { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
    .ag-gh .ag-switch-row { padding:6px 0; }
    .ag-gh-more summary { cursor:pointer; }
    .ag-gh .ag-writes-q { flex:none; }
    .ag-gh-repos .ag-check { justify-content:flex-start; text-align:left; }
    .ag-gh-repos .ag-check .mono { flex:0 1 auto; }
    .ag-gh-repos .ag-check input { width:auto; flex:none; margin:0; }
    .gh-btn-logo { filter:invert(1); }
    .ag-gh-repos { display:grid; gap:6px; max-height:260px; overflow:auto; padding:8px 0; }
    .gh-conn { margin-top:14px; border-top:1px solid var(--rule); padding-top:14px; display:flex; flex-direction:column; gap:12px; }
    .gh-conn-line { display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--rule); border-radius:12px; }
    .gh-conn-line b { font-size:15px; }
    .gh-conn-line .gh-conn-main { flex:1 1 auto; min-width:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; }
    .gh-conn-line a { font-size:13.5px; }
    .gh-conn-empty { display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; }
    .gh-conn-empty p { margin:0; flex:1 1 260px; }
    .gh-conn .acct-card { max-width:520px; }
    .ag-gh-repos .ag-check { display:flex; align-items:center; gap:8px; font-size:14px; overflow-wrap:anywhere; }
    #ag-engine-login .ag-el-segs { display:flex; flex-wrap:wrap; gap:8px; }
    #ag-engine-login .ag-el-segs .ag-seg[hidden] { display:none; }
    #ag-engine-login .ag-el-save { display:flex; gap:8px; align-items:center; }
    #ag-engine-login .ag-seg-btn.ag-el-saved::after { content:""; width:6px; height:6px; border-radius:50%; background:var(--success); }
    @media (max-width:520px) {
      #ag-engine-login .ag-el-line > span.ag-el-meta { flex-basis:100%; margin-left:74px; order:3; }
      #ag-engine-login .ag-el-line > span.ag-el-note { margin-left:0; order:4; }
      #ag-engine-login .ag-el-line > .ag-reject > span { display:none; }
    }
    .ag-ch-steps { margin:0; padding-left:18px; font-size:13px; color:var(--muted); line-height:1.5; }
    .ag-ch-manual { margin:4px 0 0 44px; }
    .ag-ch-manual details.ag-slack-connect > summary { cursor:pointer; display:flex; align-items:center; gap:6px; }
    .ag-ch-more { display:grid; gap:6px; }
    .ag-ch-more > summary { cursor:pointer; }
    .ag-mini-btn { padding:2px 8px; font-size:12px; margin-left:6px; }
    .ag-meta-item .ag-logo { width:16px; height:16px; margin-right:2px; }
    .ag-error { max-width:820px; border-color:color-mix(in srgb, var(--error) 40%, var(--rule)); }
    .ag-error > div { flex:1 1 auto; }
    .ag-error .ag-ico { color:var(--error); }
    /* One agent page for view and edit (round 6): .ag-v shows when reading, .ag-e when editing. */
    .ag-page { max-width:860px; }
    .ag-page .ag-form { max-width:none; }
    .ag-page:not(.is-editing) .ag-e { display:none !important; }
    .ag-page.is-editing .ag-v { display:none !important; }
    .ag-card-head .ag-card-edit { margin-left:auto; width:32px; height:32px; padding:0; justify-content:center; }
    .ag-card-head .ag-card-edit + .ag-hint { margin-top:-10px; }
    .ag-name-input { font-family:var(--display); font-weight:800; letter-spacing:-0.03em; font-size:30px; line-height:1.1; padding:2px 8px; margin-left:-9px;
      border:1px dashed var(--rule); border-radius:8px; background:var(--paper); color:var(--ink); min-width:0; flex:1 1 280px; max-width:560px; }
    .ag-name-input:focus { outline:none; border-style:solid; border-color:var(--ink); }
    .ag-page .ag-md { font-size:14px; }
    .ag-skills-view { margin:12px 0 0; }
    .ag-page:not(.is-editing) .ag-runner-opt:not(.on) { display:none; }
    .ag-page:not(.is-editing) .ag-runner-opt { cursor:default; background:transparent; }
    .ag-page:not(.is-editing) .ag-radio { display:none; }
    .ag-page .ag-runner-opt .ag-pin { margin-left:6px; color:var(--muted); }
    .ag-page .ag-svc-head .ag-tag { margin-left:auto; }
    .ag-page .ag-write .ag-tag { margin-left:auto; }
    .ag-untool { width:30px; height:30px; padding:0; justify-content:center; color:var(--muted); }
    .ag-untool:hover { color:var(--ink); }
    .ag-tool-add { display:flex; align-items:center; gap:8px; margin-top:10px; padding:4px 10px; border:1px dashed var(--rule); border-radius:10px; background:var(--paper); }
    .ag-tool-add:focus-within { border-style:solid; border-color:var(--ink); }
    .ag-tool-q-ico { display:inline-flex; color:var(--muted); }
    .ag-form .ag-tool-q { flex:1 1 auto; border:0 !important; background:transparent; padding:7px 2px; }
    .ag-tool-add .ag-skill-list { max-height:340px; overflow:auto; }
    .ag-tool-opt { display:flex; align-items:center; gap:10px; min-width:0; }
    .ag-tool-opt > span:last-child { display:flex; flex-direction:column; min-width:0; }
    .ag-skill-opt.ag-off { cursor:default; color:var(--muted); }
    .ag-skill-opt.ag-off:hover { background:transparent; }
    .ag-combo-sec { display:flex; justify-content:space-between; align-items:center; gap:10px; margin:6px 0 2px; padding:8px 10px 4px; border-top:1px solid var(--rule);
      font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
    .ag-combo-sec a { text-transform:none; letter-spacing:0; font-size:12.5px; }
    .ag-savebar { position:sticky; bottom:12px; z-index:12; display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:10px 12px 10px 18px; margin:4px 0 22px;
      background:var(--raise); border:1px solid var(--ink); border-radius:12px; box-shadow:0 8px 28px rgba(0,0,0,.12); }
    .ag-savebar .warn { flex-basis:100%; margin:0 0 4px; }
    .ag-savebar-note { margin-right:auto; font-size:13px; }
    .ag-run-wait { display:flex; align-items:center; gap:10px; justify-content:space-between; margin-top:6px; font-size:13.5px; }
    .ag-run-wait .ag-icon-btn { flex:none; }
    .ag-sub-h .ag-tag { margin-left:8px; vertical-align:middle; }
    .ag-status.waiting { background:color-mix(in srgb, var(--spark) 13%, transparent); color:var(--spark-dark); }
    .ag-status.waiting svg { width:12px; height:12px; }
    .ag-preview { display:flex; align-items:center; gap:6px; min-width:0; }
    .ag-preview > span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .ag-wait-why { color:var(--spark-dark); }
    .ag-wait-link { color:var(--spark-dark); text-decoration:none; font-weight:600; }
    .ag-banner-wait .ag-ico { color:var(--spark-dark); }
    @media (max-width:900px) { .ag-detail-head { flex-wrap:wrap; } }
    @media (max-width:700px) {
      .ag-grid2 { grid-template-columns:1fr; }
      .ag-svc-head { flex-wrap:wrap; }
      .ag-writes { margin-left:12px; }
      .ag-write { flex-wrap:wrap; }
      .ag-actions-note { margin-left:0; flex-basis:100%; }
    }
    /* Full width, every screen: the content area fills the viewport (same gutter both sides).
       Cards, lists and grids stretch; running text keeps a readable measure. */
    .content > div, .content .wrap, #view-home, #view-connect, .connect-page { max-width:none; }
    .ag-page, .ag-form, .ag-list, .ag-runs, .ag-appr, .ag-empty, .ag-decided, .ag-banner, .ag-add-runner, .ag-box-card, .ag-audit, .ag-runhist, .ag-error { max-width:none; }
    .page-sub, .ag-item-sub, .ag-hint { max-width:80ch; }
    .ag-item-sub { max-width:100%; }
  
    /* ---- Agent page, one system: gutter, header, card heads, rows (2026-10) ---- */
    .content { padding:32px clamp(20px, 3.4vw, 56px) 72px; }
    .ag-detail-head { display:grid; grid-template-columns:auto minmax(0,1fr) auto; column-gap:16px; align-items:start; margin:8px 0 22px; }
    .ag-avatar-col { position:relative; display:block; width:56px; height:56px; margin-top:2px; }
    /* The pencil on the avatar: a 28px badge inside the avatar's corner, always visible (touch has no hover), 40px hit area. */
    .ag-av-pencil { position:absolute; right:2px; bottom:2px; width:28px; height:28px; padding:0; margin:0; display:inline-flex; align-items:center; justify-content:center;
      border-radius:50%; border:2px solid var(--paper); background:var(--ink); color:var(--paper); box-shadow:0 1px 4px rgba(14,14,12,.35); cursor:pointer; transition:background .12s ease, transform .12s ease; }
    .ag-av-pencil::after { content:""; position:absolute; inset:-8px; }
    .ag-av-pencil svg { width:13px; height:13px; }
    .ag-av-pencil:hover { background:var(--spark); transform:scale(1.06); }
    .ag-av-pencil:focus-visible { outline:2px solid var(--spark); outline-offset:2px; }
    .ag-av-pencil[aria-expanded="true"] { background:var(--spark); }
    .ag-detail-title { gap:0; }
    .ag-detail-title .ag-item-title { min-height:40px; gap:10px; }
    .ag-detail-title h1 { font-size:30px; line-height:1.1; }
    .ag-detail-head .ag-item-actions { padding-top:0; height:40px; align-self:start; }
    .ag-desc { margin:4px 0 0; color:var(--muted); font-size:14px; line-height:1.5; max-width:90ch; }
    .ag-desc-t { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
    .ag-desc-t.open { -webkit-line-clamp:unset; display:block; }
    .ag-desc-more { display:inline; margin:2px 0 0; padding:0; background:none; border:0; color:var(--ink); font-size:13px; text-decoration:underline; cursor:pointer; }
    .ag-meta { display:flex; align-items:center; gap:8px 10px; flex-wrap:wrap; margin-top:12px; font-size:13px; color:var(--muted); }
    .ag-meta > * { min-height:28px; }
    .ag-meta .ag-engine, .ag-meta .ag-addr { display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 10px; border:1px solid var(--rule); border-radius:14px; background:var(--paper); color:var(--ink); font-size:13px; white-space:nowrap; }
    .ag-meta .ag-addr { font-family:var(--mono); font-size:12.5px; padding-right:3px; max-width:100%; }
    .ag-meta .ag-addr > svg { width:14px; height:14px; color:var(--muted); flex:none; }
    .ag-meta .ag-addr-t { overflow:hidden; text-overflow:ellipsis; }
    .ag-meta .ag-addr .ag-copy { width:22px; height:22px; border:0; background:transparent; border-radius:11px; }
    .ag-meta .ag-addr .ag-copy:hover { background:var(--sunk); }
    .ag-meta .ag-meta-item { height:28px; }
    @media (max-width:900px) { .ag-detail-head { grid-template-columns:auto minmax(0,1fr); } .ag-detail-head .ag-item-actions { grid-column:1 / -1; justify-content:flex-start; margin-top:12px; } }

    .ag-card { position:relative; }
    .ag-card-head, .ag-adv > summary { display:grid; grid-template-columns:30px minmax(0,1fr) auto; column-gap:12px; row-gap:1px; align-items:center; }
    .ag-card-head > .ag-ico, .ag-adv > summary > .ag-ico { grid-column:1; grid-row:1 / span 2; }
    .ag-card-head > h2, .ag-adv > summary > h2 { grid-column:2; grid-row:1 / span 2; align-self:center; }
    .ag-card-head:has(> .ag-hint) > h2, .ag-adv > summary:has(> .ag-hint) > h2 { grid-row:1; align-self:end; }
    .ag-card-head > .ag-hint, .ag-adv > summary > .ag-hint { grid-column:2; grid-row:2; margin:0; max-width:none; align-self:start; }
    .ag-card-head > :not(.ag-ico):not(h2):not(.ag-hint) { grid-column:3; grid-row:1 / span 2; justify-self:end; align-self:center; }
    .ag-card-head .ag-card-edit { margin:0; }
    .ag-card-head .ag-card-edit + .ag-hint { margin:0; }
    .ag-card-tools { display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
    .ag-hint { max-width:none; }
    .ag-card .ag-hint { max-width:90ch; }
    .ag-btn-sm { padding:4px 10px; font-size:12.5px; border-radius:8px; }

    .ag-plain { gap:12px; }
    .ag-plain li { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; }
    .ag-plain li:has(> .ag-mini:first-child) { display:grid; grid-template-columns:22px minmax(0,1fr) auto; column-gap:10px; align-items:start; }
    /* A command row: the /name chip sized to its content, then the description (wraps), the args hint, the skill chip at the right. */
    .ag-plain li > .ag-cmd-tag { flex:0 0 auto; white-space:nowrap; }
    .ag-plain li > .ag-cmd-desc { flex:1 1 240px; min-width:0; overflow-wrap:anywhere; }
    .ag-plain li > .ag-cmd-desc .ag-cmd-hint { white-space:nowrap; margin-left:4px; }
    .ag-plain li > .ag-cmd-skill-chip { flex:0 0 auto; margin:0 0 0 auto; }
    .ag-plain li > .ag-mini { height:21px; width:22px; align-items:center; justify-content:center; }
    .ag-plain li > .ag-mini svg { width:16px; height:16px; }
    .ag-plain li > .ag-mini .ag-logo, .ag-plain li > .ag-mini .ag-mono { width:16px !important; height:16px !important; padding:0 !important; border:0 !important; background:transparent !important; box-shadow:none !important; border-radius:3px; }
    .ag-plain li > .ag-mini .ag-logo img { width:16px; height:16px; }
    .ag-plain li > span:not(.ag-mini) { align-self:center; line-height:21px; }
    .ag-row-note { display:block; margin-top:4px; color:var(--muted); font-size:13px; line-height:1.45; }
    .ag-row-note .ag-btn { margin-left:6px; vertical-align:middle; }
    .ag-plain li .ag-status { vertical-align:1px; margin-left:4px; }

    /* Tables: never push the page sideways (hover-only row actions sit at the edge); on a phone the table scrolls inside itself. */
    .content { overflow-x:clip; }
    .tbl .t-name a { color:var(--ink); text-decoration:underline; text-decoration-color:var(--rule); text-underline-offset:3px; }
    .tbl .t-name a:hover { text-decoration-color:var(--ink); }
    @media (max-width:720px) {
      .tbl { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; table-layout:auto; }
      .tbl > colgroup { display:none; }
      .tbl > thead, .tbl > tbody { display:table; width:100%; min-width:620px; table-layout:auto; }
      .tbl tbody td, .tbl thead th { white-space:nowrap; }
      .tbl tbody td:first-child { white-space:normal; min-width:180px; }
    }
    .ag-plain a, .ag-row-note a, .ag-hint a { color:var(--ink); text-decoration:underline; text-decoration-color:var(--spark); text-underline-offset:3px; }
    .ag-plain a:hover, .ag-row-note a:hover, .ag-hint a:hover { color:var(--spark-dark); }
    .ag-hook { margin-top:6px; }
    .ag-hook .ag-switch-row { border-top:1px solid var(--rule); }
    .ag-hook-body { margin:0 0 4px 34px; display:flex; flex-direction:column; gap:8px; }
    .ag-hook-line { display:flex; align-items:center; gap:8px; min-width:0; }
    .ag-hook-k { flex:none; width:56px; font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
    .ag-hook-v { flex:1 1 auto; min-width:0; overflow-wrap:anywhere; font-size:12.5px; padding:5px 8px; border:1px solid var(--rule); border-radius:8px; background:var(--paper); }
    .ag-hook-curl { align-items:flex-start; padding-left:64px; }
    .ag-hook-pre { flex:1 1 auto; min-width:0; margin:0; padding:8px 10px; border-radius:8px; background:var(--ink); color:var(--paper); font-size:12px; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-all; }
    @media (max-width:640px) { .ag-hook-body { margin-left:0; } .ag-hook-curl { padding-left:0; } .ag-hook-line { flex-wrap:wrap; } }
    /* Chat composer: one rounded box, the textarea grows inside it, Send sits at its right edge. */
    .ag-chat-form { display:block; margin-top:12px; }
    .ag-composer { display:flex; align-items:flex-end; box-sizing:border-box; gap:8px; padding:8px 8px 8px 16px; border:1px solid var(--rule); border-radius:16px; background:var(--paper); transition:border-color .12s ease, box-shadow .12s ease; }
    .ag-composer:focus-within { border-color:var(--spark); }
    .ag-composer textarea { flex:1 1 auto; min-width:0; min-height:36px; margin:0; padding:7px 0; border:0 !important; outline:0; background:transparent; resize:none; box-shadow:none;
      font-family:var(--sans); font-size:14.5px; line-height:22px; color:var(--ink); max-height:176px; overflow-y:hidden; box-sizing:border-box; }
    .ag-composer textarea::placeholder { font-family:var(--sans); color:var(--muted); opacity:.8; }
    .ag-composer .ag-send { flex:none; height:36px; padding:0 14px; border-radius:11px; }
    .ag-composer .ag-send:disabled { opacity:.35; cursor:default; }
    @media (max-width:640px) { .ag-composer .ag-send { width:38px; padding:0; } .ag-composer .ag-send span { display:none; } }
    .skill-modal-body > * { min-width:0; }
    #skill-modal-view { overflow-x:auto; }