/* Legacy component rules for pages that still use the previous class names. */
#ammo-host{margin:0;background:var(--canvas);color:var(--ink);font:15px/1.55 var(--pico-font-family);min-width:320px}
#ammo-host *{box-sizing:border-box}
#ammo-host a{color:var(--blue)}
#ammo-host a:hover{color:var(--blue-hover)}
#ammo-host :is(a,button,input,select,textarea,summary):not([tabindex="-1"]):focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
#ammo-host h1,#ammo-host h2{color:var(--ink);font-family:Rockwell,Georgia,serif;font-weight:700;line-height:1.25;letter-spacing:0;margin:0}
#ammo-host h1{font-size:24px}#ammo-host h2{font-size:18px}
#ammo-host p{color:inherit;margin:0}
.host-header{min-height:64px;padding:10px 32px;display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--header-bg)}
#ammo-host .host-wordmark{display:inline-flex;align-items:center;gap:12px;padding:4px;min-height:44px;font:700 22px/1 var(--font-sans);letter-spacing:-.02em;color:var(--ink);text-decoration:none}
.host-wordmark img{display:block;width:64px;height:34px;object-fit:contain;filter:var(--logo-filter)}
.host-header-actions{display:flex;align-items:center;gap:24px;font-size:13px}
.host-header-actions nav{display:flex;align-items:center;gap:24px}
.host-rule{height:3px;display:grid;grid-template-columns:repeat(3,1fr)}
.host-rule>span:nth-child(1){background:var(--primary-fill)}.host-rule>span:nth-child(2){background:var(--purple-fill)}.host-rule>span:nth-child(3){background:var(--red)}
.host-layout{display:grid;grid-template-columns:242px minmax(0,1fr);min-height:calc(100dvh - 67px)}
.host-sidebar{background:var(--sidebar-bg);color:var(--sidebar-ink);padding:24px 16px;display:flex;flex-direction:column;gap:32px;border-right:1px solid var(--sidebar-line)}
.host-nav{display:flex;flex-direction:column;gap:8px}
#ammo-host .host-nav a{display:flex;align-items:center;min-height:44px;padding:8px 16px;border-radius:8px;color:var(--sidebar-ink);font-size:13px;text-decoration:none}
#ammo-host .host-nav a:hover,#ammo-host .host-nav a[aria-current=page]{background:var(--sidebar-hover);color:var(--sidebar-ink)}
.host-nav a[aria-current=page]{font-weight:650;box-shadow:inset 2px 0 0 var(--ink)}
.host-session{margin-top:auto;display:grid;gap:8px;padding-top:16px;border-top:1px solid var(--sidebar-line);font-size:12px;overflow-wrap:anywhere}.host-session p{color:var(--sidebar-muted)}
#ammo-host .host-session button{justify-self:start}
.host-main{padding:32px;max-width:1300px;width:100%;min-width:0}
.host-public{display:block}.host-public .host-main{margin:auto}.host-auth{max-width:600px;margin:32px auto}
#ammo-host .host-auth h1{font-family:var(--font-display);font-size:clamp(32px,5vw,48px);line-height:1.05;letter-spacing:-.02em;font-weight:700;margin:0 0 12px}
#ammo-host .host-auth .host-lead{margin:0 0 24px;max-width:42ch;color:var(--secondary);font-size:16px;line-height:1.5}
#ammo-host .host-auth .host-facts{margin-bottom:24px}
#ammo-host .host-auth .host-form{margin-top:0}
.host-recovery{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;margin:0}
#ammo-host .host-recovery a:not(.host-primary){display:inline-flex;align-items:center;min-height:44px}
.host-page-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:24px}
#ammo-host .host-page-heading h1{font-family:Rockwell,Georgia,serif;font-size:32px;line-height:1.15;font-weight:700;letter-spacing:0;min-width:0;overflow-wrap:anywhere}
.host-page-status{margin:-8px 0 24px;font-size:13px;color:var(--muted)}
.host-section-first{margin-top:0}
.host-section{margin-top:32px}.host-section>h2{margin-bottom:16px}
#ammo-host button:not(.btn):not(.theme-toggle):not(.host-theme):not(.log-tab):not(.link-button){position:relative;width:auto;min-height:32px;height:32px;padding:6px 10px;border:1px solid var(--control-border);border-radius:12px;font:500 12px/18px var(--pico-font-family);box-shadow:none;filter:none;cursor:pointer;background:var(--control-bg);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;gap:8px}
/* The hit slop is absolute. A button that is not itself positioned paints that slop on the nearest positioned ancestor, so the theme control covers the header, the log tabs cover the sidebar, and the -6px inset widens the page. */
#ammo-host button{position:relative}
#ammo-host button::after{content:"";position:absolute;inset:-6px}
/* The theme control is the last item in the header. A negative right inset crosses the viewport once Sign in and Get started share that row. */
#ammo-host .host-header button.host-theme::after,#ammo-host .host-header button.theme-toggle::after{right:0}
#ammo-host button:hover{filter:none;background:var(--hover);color:var(--ink)}
#ammo-host button.host-primary{background:var(--blue);border-color:var(--blue);color:var(--primary-ink)}
[data-theme=dark] #ammo-host button.host-primary{background:color-mix(in srgb,var(--primary-fill) 65%,var(--canvas));border-color:color-mix(in srgb,var(--primary-fill) 65%,var(--canvas))}
#ammo-host button.host-primary:hover{color:var(--primary-ink);filter:none}
[data-theme=dark] #ammo-host button.host-primary:focus-visible,[data-theme=dark] #ammo-host a.host-primary:focus-visible{background:var(--canvas);color:var(--blue);border-color:var(--blue)}
#ammo-host button.host-secondary{background:var(--control-bg);border-color:var(--control-border);color:var(--ink)}
#ammo-host button:disabled{cursor:default;opacity:.55}
#ammo-host button.host-icon-button{width:32px;padding:6px}
#ammo-host .host-icon{width:16px;height:16px;stroke-width:1.5}
#ammo-host input:not([type=checkbox]):not([type=hidden]),#ammo-host select{height:34px;max-width:360px;width:100%;padding:6px 10px;border:1px solid var(--control-border);border-radius:8px;background:var(--control-bg);color:var(--ink);font:13px/20px var(--pico-font-family);margin:0}
.host-form{display:grid;gap:16px;max-width:360px;margin-top:24px}.host-form>button{justify-self:start}
.host-field{display:grid;gap:8px}.host-field label,.host-key-output>label{font-size:13px;font-weight:550}
#ammo-host fieldset{border:0;padding:0;margin:0;display:grid;gap:8px}#ammo-host legend{padding:0;font-size:13px;font-weight:550;margin-bottom:8px}
.host-check{display:flex;align-items:center;gap:8px;min-height:44px;font-size:13px}
#ammo-host input[type=checkbox]{accent-color:var(--primary-fill);width:16px;height:16px;margin:0}
.host-feedback{font-size:12px;color:var(--muted)!important;margin-top:8px!important}
#ammo-host .host-error{color:var(--danger);font-size:13px}#ammo-host pre.host-error,#ammo-host p.host-error{white-space:pre-wrap;margin:4px 0 0;font:inherit}.host-error ul{list-style:none;padding:0;margin:0}
.host-facts{display:grid;margin:0;max-width:640px;border:1px solid var(--line);border-radius:8px}
.host-facts>div{display:grid;grid-template-columns:112px minmax(0,1fr);gap:16px;align-items:baseline;padding:12px 16px}
.host-facts>div+div{border-top:1px solid var(--line)}
.host-facts dt{font-size:13px;font-weight:550;color:var(--muted)}
.host-facts dd{margin:0;font-size:13px;overflow-wrap:anywhere}
.host-table-wrap{overflow:auto;max-width:100%}.host-table{width:100%;border-collapse:collapse;font-size:13px;margin:0}
.host-table th{color:var(--muted);font-weight:500;text-align:left;font-size:12px}.host-table th,.host-table td{padding:16px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.host-table tbody tr[data-row-link]{cursor:pointer}.host-table tbody tr:hover{background:var(--hover)}
#ammo-host .host-row-title{color:var(--ink);font-weight:550}.host-url{overflow-wrap:anywhere}
.host-empty{padding:24px 0;color:var(--muted)!important;font-size:13px}
.host-back{display:inline-flex;min-height:44px;align-items:center;margin-bottom:16px;font-size:13px}
.host-mono,.host-key-copy input{font-family:ui-monospace,SFMono-Regular,Consolas,monospace!important}
.host-key-output{max-width:420px}.host-key-copy{display:flex;align-items:center;gap:16px;margin-top:8px}
#ammo-host .host-tabs{display:flex;gap:24px;border-bottom:1px solid var(--line);margin-bottom:16px}
#ammo-host .host-tabs button{border:0;border-radius:0;background:transparent;color:var(--muted);height:44px;padding:8px 0;font-size:13px}
#ammo-host .host-tabs button[aria-selected=true]{color:var(--ink);border-bottom:2px solid var(--ink)}
#ammo-host .host-tabs button:hover{color:var(--ink);background:transparent}
.host-log{margin:0;border:1px solid var(--line);border-radius:8px;background:var(--code-bg);color:var(--code-ink);padding:16px;max-height:480px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;font:13px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace}
.host-log code{font:inherit;background:transparent;color:inherit}
#ammo-host .host-dialog{border:1px solid var(--line);border-radius:12px;padding:24px;background:var(--canvas);color:var(--ink);width:min(400px,calc(100vw - 32px));box-shadow:none}
.host-dialog::backdrop{background:color-mix(in srgb,var(--canvas) 75%,transparent)}
.host-dialog h2{margin-bottom:16px}.host-dialog p{font-size:13px}.host-dialog form{margin-top:24px}.host-actions{display:flex;justify-content:flex-end;gap:16px;margin-top:24px}
.host-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.host-skip{position:fixed;top:-100px;left:16px;z-index:100;background:var(--canvas);padding:16px}.host-skip:focus{top:16px}
#ammo-host [hidden]{display:none!important}
@media(min-width:852px){.host-layout{grid-template-columns:272px minmax(0,1fr)}}
@media(max-width:700px){.host-header{padding:10px 16px}.host-layout{display:block}.host-sidebar{padding:8px 16px;border-right:0;border-bottom:1px solid var(--sidebar-line);gap:16px}.host-nav{flex-direction:row;gap:8px}.host-nav a{flex:1;justify-content:center}.host-nav a[aria-current=page]{box-shadow:inset 0 -2px 0 var(--ink)}.host-session{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:0;padding-top:0}.host-main{padding:24px 16px}.host-auth{margin:16px 0}.host-page-heading{gap:16px}#ammo-host .host-page-heading h1{font-size:28px}.host-facts>div{grid-template-columns:96px minmax(0,1fr);padding:12px}.host-table .host-url{display:none}.host-table td,.host-table th{padding:12px 8px}.host-key-copy{gap:8px}.host-key-copy input{min-width:0}.host-dialog{padding:24px}}
.host-domain-form{margin-top:16px}
.host-domain-card{margin-top:24px;padding-top:24px;border-top:1px solid var(--line)}
.host-domain-card h3{margin-bottom:8px}
.host-domain-steps{margin:12px 0 0;padding-left:1.25rem;display:grid;gap:8px}
.host-domain-steps p{margin:0}
.host-dns{table-layout:fixed;width:100%}
.host-dns th:first-child,.host-dns td:first-child{width:4.5rem}
.host-dns code{font-family:var(--font-mono);font-size:12px;overflow-wrap:anywhere}
.host-dns-actions{display:flex;flex-wrap:wrap;gap:8px}
.host-domain-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:16px}
.host-domain-check{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0}
.host-domain-check .host-domain-checking{display:none;margin:0}
.host-domain-check .host-domain-status{margin:0}
.host-domain-check.htmx-request [data-domain-status]{display:none}
.host-domain-check.htmx-request .host-domain-checking{display:block}
#your-domain .host-muted{max-width:62ch}
@media(prefers-reduced-motion:reduce){#ammo-host *{scroll-behavior:auto}}

.host-footer{display:flex;flex-wrap:wrap;gap:24px;padding:16px 32px;border-top:1px solid var(--line);font-size:12px}.host-footer nav{display:flex;flex-wrap:wrap;align-items:center;gap:24px;width:100%}.host-footer a{min-height:44px;display:inline-flex;align-items:center}
#ammo-host .host-field textarea{width:100%;max-width:360px;min-height:120px;padding:8px;border:1px solid var(--control-border);border-radius:8px;background:var(--control-bg);color:var(--ink);font:13px/1.55 var(--pico-font-family);resize:vertical}
#ammo-host article.host-auth p{margin-top:16px}

#ammo-host h3{font-family:Rockwell,Georgia,serif;font-size:1.08rem;font-weight:700;letter-spacing:0;margin:0}
.host-muted{color:var(--muted)!important;font-size:13px}
.host-definition-list{display:grid;gap:8px;font-size:13px;margin:0}.host-definition-list dt{color:var(--muted)}.host-definition-list dd{margin:0}
.host-plan-choice{display:grid;grid-template-columns:1fr;max-width:720px;border:1px solid var(--line);border-radius:8px}
.host-plan-choice>article{display:flex;flex-direction:column;gap:16px;padding:16px;min-width:0}
.host-plan-choice>article+article{border-top:1px solid var(--line)}
.host-plan-choice-head{display:grid;gap:4px}
.host-plan-current{font-size:13px;font-weight:650}
.host-price{font-size:18px;font-weight:650;margin:0}.host-price-period{font-size:13px;font-weight:400;color:var(--muted)}
.host-price-note{font-size:12px;color:var(--muted)!important}
.host-feature-list{margin:0;padding-left:20px;font-size:13px;display:grid;gap:4px}
.host-checkout-form{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:auto}.host-checkout-form label{font-size:13px;font-weight:550}.host-checkout-form input[type=number]{width:80px}
@media(min-width:700px){.host-plan-choice{grid-template-columns:1fr 1fr}.host-plan-choice>article+article{border-top:0;border-left:1px solid var(--line)}}
.host-portal-form{margin-top:16px}
.host-card-setup{max-width:480px}.host-card-setup p{font-size:15px;max-width:62ch}
.host-card-setup-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:8px}
.host-card-banner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;margin:0 0 24px;padding:12px 16px;border:1px solid var(--line);border-radius:8px}
.host-card-banner p{font-size:13px;max-width:68ch}
.host-card-banner-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.host-card-line{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:0 0 24px}
.host-card-line p{margin:0;font-size:15px}
#ammo-host form.host-add-card{flex-direction:row;align-items:center;width:auto;margin:0;gap:8px}
#ammo-host form.host-add-card>button{width:auto;height:32px;min-height:32px}
.host-inline-form{display:inline}
#ammo-host button.host-link-button{background:transparent;border:0;color:var(--muted);text-decoration:underline;padding:6px}
#ammo-host button.host-link-button:hover{color:var(--ink);background:transparent}
#ammo-host .host-card-setup button.host-later{font-size:13px;font-weight:400;text-underline-offset:2px;padding:6px 2px}

.host-qr-container{background:#fff;padding:16px;border-radius:8px;margin:16px 0;text-align:center;display:inline-block}
.host-qr-container svg{display:block;width:200px;height:200px}
.host-secret-details{margin:16px 0;font-size:13px}
.host-secret-details summary{cursor:pointer;color:var(--muted)}
.host-secret-details code{display:block;margin-top:8px;padding:8px;background:var(--code-bg);border-radius:4px;font-size:12px;word-break:break-all}

.host-empty-state,.host-empty-board{display:grid;gap:8px;justify-items:start;max-width:560px}
#ammo-host .host-empty-board h2{font-family:Rockwell,Georgia,serif;font-size:24px;line-height:1.2;font-weight:700}
.host-empty-board .host-primary{margin-top:8px}
.host-panel{display:grid;gap:16px;max-width:420px;margin-top:32px;padding:16px;border:1px solid var(--line);border-radius:8px}
.host-panel>h2{margin:0}
.host-panel .host-form{margin-top:0}
.host-key-reveal{max-width:560px}
#ammo-host .host-key-reveal .host-field input{max-width:none;width:100%;min-width:0}
.host-stake{margin:0;font-size:13px;color:var(--ink)}
.host-status{font-size:13px}
.host-status-active{color:var(--ink)}
.host-status-revoked{color:var(--muted)}
.host-page-heading+.host-panel,.host-page-heading+.host-empty-board{margin-top:0}
#ammo-host .host-warning{color:var(--warning);font-size:13px}
.host-main:has(.host-hero){padding-top:8px}
.host-hero{display:grid;gap:48px;max-width:720px}
.host-hero-lead{display:grid;gap:24px}
.host-hero-intro{display:grid;justify-items:start;gap:0}
#ammo-host .host-hero h1{font-family:Rockwell,Georgia,serif;font-size:40px;line-height:1.1;font-weight:700;letter-spacing:0;max-width:11ch}
.host-hero-mark{width:120px;margin-top:16px}
.host-hero-identity{margin-top:16px;font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.host-hero-action{display:grid;gap:8px;justify-items:start}
#ammo-host .host-hero-action textarea{max-width:none;width:min(100%,640px);height:280px;min-height:280px}
.host-step-link{display:inline-flex;align-items:center;min-height:44px;font-size:13px}
.host-manual{display:grid;gap:8px}
.host-manual summary{min-height:44px;display:list-item;list-style:disclosure-closed inside;padding:12px 0;font-size:13px;font-weight:550;cursor:pointer}
.host-manual[open]>summary{list-style:disclosure-open inside}
.host-plan-board{display:grid;gap:16px;max-width:560px}
.host-plan-grid{display:grid;grid-template-columns:1fr;border:1px solid var(--line);border-radius:8px}
.host-plan-grid>div{display:grid;gap:4px;padding:16px}
.host-plan-grid>div+div{border-top:1px solid var(--line)}
.host-plan-name{font-size:13px;font-weight:650}
.host-plan-price{font-size:15px;font-weight:650;color:var(--ink)}
.host-plan-cadence{font-size:13px;color:var(--muted)}
@media(min-width:560px){.host-plan-grid{grid-template-columns:1fr 1fr}.host-plan-grid>div+div{border-top:0;border-left:1px solid var(--line)}}
@media(max-width:700px){.host-hero{gap:40px}.host-hero-lead{gap:24px}#ammo-host .host-hero h1{font-size:32px}.host-hero-identity{display:none}}
#ammo-host a.host-primary{position:relative;display:inline-flex;align-items:center;justify-content:center;width:auto;min-height:32px;height:32px;margin-top:8px;padding:6px 10px;border:1px solid var(--blue);border-radius:12px;background:var(--blue);color:var(--primary-ink);font:500 12px/18px var(--pico-font-family);text-decoration:none}
[data-theme=dark] #ammo-host a.host-primary{background:color-mix(in srgb,var(--primary-fill) 65%,var(--canvas));border-color:color-mix(in srgb,var(--primary-fill) 65%,var(--canvas))}
#ammo-host a.host-primary::after{content:"";position:absolute;inset:-6px}
#ammo-host a.host-primary:hover{color:var(--primary-ink)}
.host-snippet{display:grid;gap:8px;margin-top:8px;min-width:0}
.host-snippet-head{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;font-weight:550}
.host-snippet-actions{display:flex;align-items:center;gap:8px}
#ammo-host .host-snippet textarea{max-width:none;width:100%;height:240px;min-height:240px;padding:8px 10px;border:1px solid var(--control-border);border-radius:8px;background:var(--code-bg);color:var(--code-ink);font:12px/1.45 ui-monospace,SFMono-Regular,Consolas,monospace;resize:vertical;white-space:pre;overflow:auto}

@font-face{font-family:"Inter Variable";font-style:normal;font-weight:100 900;font-display:swap;src:url("fonts/inter-latin.260c81a4759b.woff2") format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter Variable";font-style:normal;font-weight:100 900;font-display:swap;src:url("fonts/inter-latin-ext.1ad231aac0a8.woff2") format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/jetbrains-mono-latin.caf0dfde4e44.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/jetbrains-mono-latin-ext.443d1c3be5b2.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
#ammo-host a{color:var(--ink)}
#ammo-host a:hover{color:var(--ink);text-underline-offset:4px}
#ammo-host .host-rule{display:grid;height:3px}
#ammo-host .host-rule>span:nth-child(1){background:#3097ef}
#ammo-host .host-rule>span:nth-child(2){background:#6434b9}
#ammo-host .host-rule>span:nth-child(3){background:#ef3340}
#ammo-host .host-sidebar{background:var(--bg)}
#ammo-host .host-nav a[aria-current=page]{background:transparent;color:var(--ink);font-weight:600;box-shadow:inset 2px 0 0 var(--accent)}
#ammo-host .host-page-heading h1{font-family:var(--font-display);font-size:clamp(32px,5vw,48px);line-height:1;letter-spacing:-.02em;font-weight:700}
#ammo-host button.host-primary,#ammo-host a.host-primary{background:var(--accent);border-color:var(--accent);color:#0b0b0c}
#ammo-host button.host-primary:hover,#ammo-host a.host-primary:hover{background:var(--accent-hover);color:#0b0b0c}
html[data-theme=dark] #ammo-host button.host-primary,html[data-theme=dark] #ammo-host a.host-primary{background:var(--accent);border-color:var(--accent);color:#0b0b0c}
.host-main:has(.host-hero){padding-top:32px}
.host-hero{display:grid;gap:0;max-width:760px}
#ammo-host .host-hero h1.host-hero-title{font-family:var(--font-display);letter-spacing:-.02em;color:var(--ink);margin:0 0 12px;font-size:clamp(40px,8vw,72px);font-weight:700;line-height:1;max-width:none}
#ammo-host #apps-hero-title{font-size:clamp(32px,4.2vw,56px);line-height:1.05;white-space:nowrap}
.host-hero-title .line{display:block}
#ammo-host .host-hero-payoff,#ammo-host .host-page-tagline{font-family:var(--font-display);letter-spacing:-.02em;color:var(--ink);font-weight:700;line-height:1.1;margin:0}
#ammo-host .host-hero-payoff{font-size:clamp(28px,4vw,40px);margin:0 0 20px}
#ammo-host .host-page-heading-copy{display:grid;gap:8px;min-width:0}
#ammo-host .host-page-tagline{font-size:clamp(22px,3vw,32px)}
#ammo-host .host-hero-subline{color:var(--secondary);margin:0 0 48px;font-size:19px;line-height:1.5;max-width:36ch}
.host-prompt{margin:0 0 28px;min-width:0}
#ammo-host .host-prompt-label{color:var(--secondary);margin:0 0 8px;font-size:12px;font-weight:500;line-height:1.4}
.host-prompt-box{background:color-mix(in srgb,var(--hairline) 42%,var(--white));border:1px solid var(--hairline);border-radius:8px;min-width:0;padding:14px 16px 16px;position:relative}
.host-agent-prompt .host-prompt-box{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:start}
.host-agent-prompt .host-prompt-actions{grid-column:2;grid-row:1;margin:0}
.host-agent-prompt .host-prompt-face{grid-column:1;grid-row:1}
.host-prompt-face{display:grid;gap:0;min-width:0}
#ammo-host .host-prompt-prose{color:var(--ink);font-family:var(--font-sans);font-size:15px;line-height:1.55;margin:0 0 12px;overflow-wrap:break-word}
#ammo-host .host-prompt-prose:last-child{margin-bottom:0}
#ammo-host .host-prompt-code{color:var(--ink);font-family:var(--font-mono);font-size:13px;line-height:1.5;margin:0 0 8px;overflow-wrap:anywhere}
#ammo-host .host-prompt-line{color:color-mix(in srgb,var(--ink) 72%,var(--secondary));font-family:var(--font-mono);font-size:14px;font-weight:400;hyphens:none;line-height:1.6;margin:0;overflow-wrap:break-word}
#ammo-host .host-prompt-line.host-prompt-gap{margin-top:.65em}
.host-prompt-source{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:pre-line}
.host-prompt-form{margin:0}
#ammo-host button.host-copy{height:32px;min-height:32px;padding:6px 10px;border:1px solid var(--hairline);border-radius:8px;background:transparent;color:var(--ink);font:500 12px/1 var(--font-sans);gap:6px;flex-shrink:0}
#ammo-host button.host-copy:hover{background:color-mix(in srgb,var(--ink) 6%,transparent);border-color:var(--hairline);color:var(--ink)}
#ammo-host button.host-copy:focus-visible{outline:2px solid var(--ink);outline-offset:2px;background:transparent;color:var(--ink)}
#ammo-host button.host-copy.is-copied{background:color-mix(in srgb,var(--success) 10%,transparent);border-color:color-mix(in srgb,var(--success) 45%,var(--hairline));color:var(--success)}
html[data-theme=dark] #ammo-host button.host-copy.is-copied{color:color-mix(in srgb,var(--success) 55%,var(--ink))}
#ammo-host .host-prompt-note,#ammo-host .host-page-status,#ammo-host .host-session p{color:var(--secondary)}
#ammo-host .host-prompt-note{margin:8px 0 0;font-size:12px;line-height:1.45}
#ammo-host .host-prompt-agents{color:var(--secondary);margin:8px 0 0;font-size:12px;line-height:1.45}
.host-manual{margin-top:8px}
.host-plan-board{margin-top:48px;max-width:720px;gap:16px}
.host-plan-grid{border:0;gap:16px}
.host-plan-grid>div{background:var(--white);border:1px solid var(--hairline);border-radius:16px;padding:32px;gap:8px}
.host-plan-name,.host-plan-choice h3{font-family:var(--font-sans);font-size:18px;font-weight:600}
.host-plan-price,.host-price{font-family:var(--font-sans);font-size:clamp(48px,5vw,64px);font-weight:600;letter-spacing:-.03em;line-height:1}
#ammo-host .host-plan-cadence,#ammo-host .host-price-period,#ammo-host .host-price-note{color:var(--secondary);font-size:16px}
#ammo-host .host-plan-grid>.host-price-highlight,#ammo-host .host-plan-choice>.host-price-highlight{background:var(--ink);color:var(--bg);border-color:var(--ink)}
#ammo-host .host-plan-grid>.host-price-highlight .host-plan-name,#ammo-host .host-plan-grid>.host-price-highlight .host-plan-price,#ammo-host .host-plan-choice>.host-price-highlight h3,#ammo-host .host-plan-choice>.host-price-highlight .host-price,#ammo-host .host-plan-choice>.host-price-highlight .host-price span{color:var(--bg)}
#ammo-host .host-plan-grid>.host-price-highlight .host-plan-cadence,#ammo-host .host-plan-choice>.host-price-highlight .host-price-note,#ammo-host .host-plan-choice>.host-price-highlight .host-price-period,#ammo-host .host-plan-choice>.host-price-highlight .host-feature-list,#ammo-host .host-plan-choice>.host-price-highlight .host-plan-current{color:color-mix(in srgb,var(--bg) 72%,transparent)}
.host-plan-choice{border:0;gap:16px;max-width:760px}
.host-plan-choice>article{background:var(--white);border:1px solid var(--hairline);border-radius:16px;padding:24px}
.host-panel,.host-facts{background:var(--white);border-color:var(--hairline)}
.host-mono,.host-key-copy input,.host-snippet textarea,.host-log{font-family:var(--font-mono)!important}
@media(max-width:768px){.host-hero-subline{margin-bottom:32px;font-size:17px}#ammo-host #apps-hero-title{font-size:32px;white-space:normal}#ammo-host .host-prompt-line{font-size:13px}#ammo-host .host-nav a[aria-current=page]{box-shadow:inset 0 -2px 0 var(--accent)}}
[x-cloak]{display:none!important}
#ammo-host .host-plans>h2{margin-bottom:28px}
#ammo-host .host-facts>div{grid-template-columns:minmax(148px,11.5rem) minmax(0,1fr)}
#ammo-host .host-plan-choice{align-items:stretch}
#ammo-host .host-plan-choice>article{height:100%}
#ammo-host .host-plan-who{margin:0;color:var(--secondary);font-size:15px;line-height:1.45}
#ammo-host .host-plan-plus{margin:0;font-size:15px;font-weight:600}
#ammo-host .host-feature-list{font-size:15px;line-height:1.45;gap:8px}
#ammo-host .host-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 12px;margin:0;font-size:inherit;font-weight:400;letter-spacing:0;line-height:1.2}
#ammo-host .host-price-amount{font-size:clamp(48px,5vw,64px);font-weight:600;letter-spacing:-.03em;line-height:1}
#ammo-host .host-price-meta{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:8px}
#ammo-host .host-price-period,#ammo-host .host-price-vat{font-size:16px;font-weight:400;letter-spacing:0;line-height:1.3}
#ammo-host .host-plan-action{margin-top:auto;width:100%}
#ammo-host .host-checkout-form{display:flex;flex-direction:column;align-items:stretch;gap:12px;margin-top:auto;width:100%}
#ammo-host .host-plan-action>button,#ammo-host .host-checkout-form>button{width:100%;height:44px;min-height:44px}
#ammo-host .host-plan-action>.host-plan-current{min-height:44px;display:flex;align-items:center}
#ammo-host .host-stepper{display:grid;gap:8px}
#ammo-host .host-stepper-label{font-size:15px;font-weight:600}
#ammo-host .host-stepper-row{display:flex;align-items:center;gap:8px}
#ammo-host .host-stepper-row button{width:44px;height:44px;min-height:44px;padding:0;font-size:20px;line-height:1}
#ammo-host .host-stepper-row button::after{inset:0}
#ammo-host .host-stepper-row input[type=number]{width:72px;max-width:72px;height:44px;padding:0;text-align:center;font-size:16px;font-variant-numeric:tabular-nums;-moz-appearance:textfield;appearance:textfield}
#ammo-host .host-stepper-row input[type=number]::-webkit-outer-spin-button,#ammo-host .host-stepper-row input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
#ammo-host .host-stepper-total{margin:0;font-size:22px;font-weight:650;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
#ammo-host .host-stepper-confirm{display:flex;align-items:flex-start;gap:8px;margin:0;font-size:14px;line-height:1.4}
#ammo-host .host-stepper-confirm[hidden]{display:none !important}
#ammo-host .host-stepper-confirm input{margin-top:3px;accent-color:var(--accent)}
#ammo-host .host-plan-choice>.host-price-highlight .host-stepper-confirm{color:color-mix(in srgb,var(--bg) 72%,transparent)}
#ammo-host .host-plan-choice>.host-price-highlight [data-billing-error]{color:#ff8b82}
html[data-theme=dark] #ammo-host .host-plan-choice>.host-price-highlight [data-billing-error]{color:#b91c1c}
#ammo-host .host-plan-hint{margin:0;font-size:14px;font-weight:600;line-height:1.4}
#ammo-host .host-plan-trial{margin:24px 0 0;max-width:62ch;color:var(--secondary);font-size:15px;line-height:1.5}
#ammo-host .host-plan-faq{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px;max-width:62ch;color:var(--secondary);font-size:14px;line-height:1.45}
#ammo-host .host-plan-choice>.host-price-highlight .host-plan-who,#ammo-host .host-plan-choice>.host-price-highlight .host-plan-plus,#ammo-host .host-plan-choice>.host-price-highlight .host-feature-list,#ammo-host .host-plan-choice>.host-price-highlight .host-price-note,#ammo-host .host-plan-choice>.host-price-highlight .host-price-period,#ammo-host .host-plan-choice>.host-price-highlight .host-price-vat,#ammo-host .host-plan-choice>.host-price-highlight .host-plan-current,#ammo-host .host-plan-grid>.host-price-highlight .host-plan-who,#ammo-host .host-plan-grid>.host-price-highlight .host-plan-cadence{color:color-mix(in srgb,var(--bg) 72%,transparent)}
#ammo-host .host-plan-choice>.host-price-highlight .host-price-amount,#ammo-host .host-plan-choice>.host-price-highlight .host-stepper-label,#ammo-host .host-plan-choice>.host-price-highlight .host-stepper-total{color:var(--bg)}
#ammo-host .host-plan-choice>.host-price-highlight .host-plan-hint{color:var(--accent)}
#ammo-host .host-plan-choice>.host-price-highlight .host-stepper-row button,#ammo-host .host-plan-choice>.host-price-highlight .host-stepper-row input{background:transparent;color:var(--bg);border-color:color-mix(in srgb,var(--bg) 40%,transparent)}
#ammo-host .host-plan-choice>.host-price-highlight .host-stepper-row button:hover{background:color-mix(in srgb,var(--bg) 12%,transparent);color:var(--bg)}
#ammo-host .host-plan-grid>.host-price-highlight .host-plan-price{color:var(--bg)}
#ammo-host p.host-plan-cadence,#ammo-host .host-plan-grid .host-plan-cadence{font-size:16px}
#ammo-host .host-plan-price-line{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 12px}
#ammo-host .host-app-status{display:grid;gap:8px;max-width:640px}
#ammo-host .host-app-state{margin:0;font-family:var(--font-display);font-size:clamp(28px,4vw,40px);font-weight:700;letter-spacing:-.02em;line-height:1.1;color:var(--ink)}
#ammo-host .host-app-address{margin:8px 0 0;font-family:var(--font-mono);font-size:18px;line-height:1.4;color:var(--ink);overflow-wrap:anywhere}
#ammo-host .host-app-actions{display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap}
#ammo-host .host-app-note{max-width:62ch;color:var(--secondary);font-size:15px;line-height:1.5}
#ammo-host .host-section>.host-muted{margin:0 0 12px;max-width:62ch}
#ammo-host button.host-text-danger{display:inline-flex;align-items:center;gap:6px;height:auto;min-height:44px;padding:6px 10px;background:transparent;border:0;color:var(--error);font-size:13px}
#ammo-host button.host-text-danger:hover{color:var(--error)}
#ammo-host button.host-danger{background:var(--white);border-color:var(--error);color:var(--error)}
#ammo-host button.host-danger:hover{background:var(--white);border-color:var(--error);color:var(--error)}
#ammo-host{caret-color:var(--ink)}
#ammo-host ::selection{background:var(--ink);color:var(--bg)}
#ammo-host .host-auth{max-width:880px;margin:48px auto 8px}
#ammo-host .host-auth h1.host-hero-title{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;line-height:.98;color:var(--ink);margin:0 0 20px;font-size:clamp(26px,4.6vw,56px)}
#ammo-host .host-auth .host-hero-title .line{display:block}
@media(min-width:701px){#ammo-host .host-auth .host-hero-title .line{white-space:nowrap}}
#ammo-host .host-auth .host-hero-subline{margin:0 0 28px;max-width:42ch;font-size:19px;line-height:1.5}
#ammo-host .host-address{font-family:var(--font-mono);color:var(--ink);font-size:15px;overflow-wrap:anywhere}
#ammo-host .host-sent .host-hero-subline{margin:0 0 8px}
#ammo-host .host-sent .host-hero-subline:last-child{margin-bottom:24px}
#ammo-host p.host-address{margin:4px 0 12px;font-size:16px}
#ammo-host .host-auth button.host-primary,#ammo-host .host-auth a.host-primary{height:48px;min-height:48px;padding:0 20px;border-radius:10px;font:600 16px/1 var(--font-sans)}
#ammo-host .host-offer{margin:0 0 24px;max-width:42ch;color:var(--secondary);font-size:15px;line-height:1.5}
#ammo-host .host-auth .host-form{margin-top:0}
#ammo-host .host-auth-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px}
#ammo-host a.host-text-link{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);font-size:14px;text-underline-offset:3px}
#ammo-host .host-auth .host-error{margin:0 0 8px}
#ammo-host .host-key-reveal{max-width:760px;margin-top:8px}
#ammo-host .host-key-reveal .host-prompt-box{display:flex;flex-direction:column;align-items:stretch;gap:12px}
#ammo-host .host-key-reveal .host-field{flex:1 1 auto;width:100%;max-width:none;min-width:0;align-self:stretch}
#ammo-host .host-key-reveal .host-copy{align-self:flex-start}
#ammo-host .host-key-reveal .host-field textarea{display:block;width:100%;max-width:none;min-height:0;height:auto;margin:0;padding:8px 10px;border:1px solid var(--control-border);border-radius:8px;background:var(--control-bg);color:var(--ink);font:13px/1.45 var(--font-mono);resize:none;overflow:hidden;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-all;field-sizing:content}
@media(max-width:1000px){#ammo-host .host-key-reveal .host-field textarea{font-size:12px}}
@media(max-width:480px){#ammo-host .host-key-reveal .host-field textarea{font-size:11px}}
#ammo-host p.host-live-limit{margin:0 0 16px;max-width:68ch;overflow-wrap:anywhere;line-height:1.45}
@media(max-width:700px){#ammo-host .host-auth{margin:8px 0 0}#ammo-host .host-auth .host-hero-subline{margin-bottom:20px;font-size:17px}#ammo-host .host-auth .host-form{max-width:none}#ammo-host .host-auth .host-form>button,#ammo-host .host-auth .host-auth-actions,#ammo-host .host-auth a.host-primary{width:100%}#ammo-host .host-auth .host-auth-actions{display:grid;justify-items:stretch}#ammo-host .host-auth .host-recovery{display:grid;justify-items:start;gap:4px}#ammo-host .host-auth .host-recovery a.host-primary{width:100%;justify-content:center}}
@media(prefers-reduced-motion:no-preference){#ammo-host .host-sent{animation:host-arrive .45s cubic-bezier(.16,1,.3,1) both}}
@keyframes host-arrive{from{opacity:0;filter:blur(6px);transform:translateY(8px)}to{opacity:1;filter:none;transform:none}}
#ammo-host .host-status-pending{color:var(--ink)}
#ammo-host .host-status-accepted{color:var(--success)}
#ammo-host .host-status-expired,#ammo-host .host-status-revoked{color:var(--muted)}
#ammo-host .host-invite-email{overflow-wrap:anywhere}
#ammo-host .host-invite-note{margin:4px 0 0;color:var(--muted);font-size:13px;overflow-wrap:anywhere;white-space:pre-wrap}
#ammo-host .host-invite-actions{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
#ammo-host .host-invite-actions form{margin:0}
#ammo-host button.host-text{display:inline-flex;align-items:center;min-height:44px;padding:6px 10px;background:transparent;border:0;color:var(--ink);font-size:13px}
#ammo-host .host-saved{margin:0 0 16px;color:var(--success);font-size:13px}
#ammo-host .host-field textarea.host-note{min-height:72px;max-height:160px}
#ammo-host .host-auth .host-invite-note{margin:0 0 16px;color:var(--ink);font-size:16px}
#ammo-host .host-invite-copy{max-width:66ch;display:grid;gap:16px}
#ammo-host .host-invite-copy p{margin:0;font-size:16px;line-height:1.55;color:var(--ink)}
#ammo-host .host-invite-quote{margin:0;padding:12px 16px;border:0;border-left:1px solid var(--hairline);background:var(--white)}
#ammo-host .host-invite-quote-by{margin:0 0 6px;color:var(--secondary);font-size:14px}
#ammo-host .host-invite .host-form{margin-top:40px}
#ammo-host .host-user-code{margin:24px 0;padding:16px 24px;background:var(--white);border:1px solid var(--hairline);border-radius:8px;text-align:center}
#ammo-host .host-user-code code{font-family:var(--font-mono);font-size:clamp(24px,5vw,32px);font-weight:700;letter-spacing:.12em;color:var(--ink);background:transparent;padding:0}
#ammo-host .host-hint{margin:12px 0 24px;color:var(--secondary);font-size:14px}
#ammo-host .host-form--buttons{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
#ammo-host .host-form--buttons button{min-width:120px}
#ammo-host .host-invite-next{margin:16px 0 0;max-width:66ch;color:var(--secondary);font-size:16px;line-height:1.55}
/* Public sign-in only. The signed-in dashboard keeps its own rings. Hairline
   borders sit under 1.4:1, so these fields use the secondary text colour. */
#ammo-host.host-public-auth :focus-visible:is(a,button,input,select,textarea,summary):not([tabindex="-1"]),
html[data-theme=dark] #ammo-host.host-public-auth .host-header :focus-visible:is(a,button,input,select,textarea,summary):not([tabindex="-1"]),
#ammo-host.host-public-auth .host-header :focus-visible:is(a,button,input,select,textarea,summary):not([tabindex="-1"]),
#ammo-host.host-public-auth .host-footer :focus-visible:is(a,button,input,select,textarea,summary):not([tabindex="-1"]){outline:2px solid var(--focus);outline-offset:-2px}
#ammo-host.host-public-auth .host-skip:focus,#ammo-host.host-public-auth .host-skip:focus-visible{top:16px;color:var(--ink);background:var(--canvas);text-decoration:none;border:1px solid var(--secondary);border-radius:8px}
#ammo-host.host-public-auth .host-header-actions a,#ammo-host.host-public-auth .host-footer a{display:inline-flex;align-items:center;min-height:44px;padding:6px 4px;border-radius:8px}
#ammo-host.host-public-auth .host-field label{color:var(--ink)}
#ammo-host.host-public-auth .host-auth input:not([type=hidden]):not([type=checkbox]){border-color:var(--secondary)}
#ammo-host.host-public-auth .host-auth a:not(.host-primary){text-decoration:underline;text-underline-offset:3px}
#ammo-host.host-public-auth button.host-primary:focus-visible,#ammo-host.host-public-auth a.host-primary:focus-visible{outline:2px solid var(--focus);outline-offset:-2px;background:var(--canvas);color:var(--ink);border-color:var(--focus)}
@media(prefers-reduced-motion:reduce){#ammo-host .host-sent{animation:none}}
#ammo-host .host-plan-end{margin:16px 0 0;max-width:62ch;color:var(--secondary);font-size:13px;line-height:1.55}
#ammo-host .host-plan-title{display:flex;align-items:flex-start;flex-wrap:wrap;gap:8px 12px}
#ammo-host .host-plan-title .host-plan-current{padding-top:4px}
#ammo-host .host-plan-is-current .host-plan-current{color:var(--ink)}
#ammo-host .host-plan-choice>article.host-plan-is-current{background:var(--white);color:var(--ink);border-color:var(--accent)}
#ammo-host .host-plan-extra:empty{display:none}
@media(min-width:700px){
  #ammo-host .host-plan-choice{grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto auto auto auto;row-gap:0;column-gap:16px}
  #ammo-host .host-plan-choice>article{display:grid;grid-template-rows:subgrid;grid-row:1 / span 6;height:auto;gap:0;align-items:stretch}
  #ammo-host .host-plan-choice>article+article{border:1px solid var(--hairline)}
  #ammo-host .host-plan-choice-head,#ammo-host form.host-plan-fields{display:contents}
  #ammo-host .host-plan-extra:empty{display:block;margin:0;padding:0;min-height:0}
  #ammo-host .host-plan-who,#ammo-host .host-price{margin-top:4px}
  #ammo-host .host-plan-main,#ammo-host .host-plan-extra:not(:empty),#ammo-host .host-plan-action{margin-top:16px}
}

/* Open Design application layer. */
/*
  ammo.host — application layer on the AMMO styleguide.
  Load after assets/app.css. Every colour is a styleguide token or a
  color-mix of tokens; this file introduces no new palette values.
*/

:root {
  --type-page: 32px;
  --type-section: 18px;
  --type-body: 15px;
  --type-small: 13px;
  --type-label: 12px;
  --page-gutter: 32px;
  --content-w: 1040px;
  --sidebar-w: 242px;
  --panel-radius: 12px;
  --code-radius: 10px;
  --font-mono: ui-monospace, SFMono-Regular, Consolas, monospace;
}

@media (min-width: 851px) {
  :root { --sidebar-w: 272px; }
}

* { box-sizing: border-box; }

.host-body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--pico-font-family);
  font-size: var(--type-body);
  line-height: 1.55;
  min-width: 320px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.host-body [hidden] { display: none !important; }
.host-body img,
.host-body svg { display: block; }
.host-body :where(a) { color: var(--blue); }
.host-body :where(a):hover { color: var(--blue-hover); }
.host-body ::selection { background: var(--selection); color: var(--selection-ink); }
.host-body :is(a, button, input, select, textarea, summary):not([tabindex="-1"]):focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.host-body main:focus,
.host-body main:focus-visible { outline: none; }

/* ─── type: one fixed scale on every screen ───────────────────────── */

.host-body h1,
.host-body .page-title {
  font-family: Rockwell, Georgia, serif;
  overflow-wrap: anywhere;
  font-size: var(--type-page);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}

.host-body h2 {
  font-family: Rockwell, Georgia, serif;
  font-size: var(--type-section);
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--ink);
  margin: 0;
}

.host-body h3 {
  font-family: Rockwell, Georgia, serif;
  font-size: 1.08rem;
  line-height: 1.4;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}

.host-body p { margin: 0; text-wrap: pretty; }
.host-body .small { font-size: var(--type-small); line-height: 1.5; color: var(--muted); }
.host-body .label { font-size: var(--type-label); line-height: 1.4; font-weight: 600; color: var(--muted); }
.host-body .mono { font-family: var(--font-mono); font-size: var(--type-small); font-variant-numeric: tabular-nums; }
.host-body .muted { color: var(--muted); }

/* ─── shell ────────────────────────────────────────────────────────── */

.skip-link {
  position: fixed;
  top: -80px;
  left: 16px;
  z-index: 100;
  padding: 10px 14px;
  border: 1px solid var(--focus);
  border-radius: var(--control-radius);
  background: var(--canvas);
  color: var(--ink);
  font-size: var(--type-small);
}
.skip-link:focus { top: 16px; }

.host-header {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 72px;
  padding: 10px 32px;
  background: var(--header-bg);
  /* Hit slop is allowed to leave a control, but not the page. Clip stops it widening the document. */
  overflow-x: clip;
  overflow-y: clip;
}

.host-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
}
.host-brand:hover { color: var(--ink); text-decoration: none; }
.host-brand img {
  width: 64px;
  height: 34px;
  object-fit: contain;
  filter: var(--logo-filter);
}
.host-brand span {
  font-family: Rockwell, Georgia, serif;
  font-size: 24px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0;
}

.host-header-actions { display: flex; align-items: center; gap: 8px; }

.brand-rule {
  flex: none;
  height: 3px;
  background: linear-gradient(
    to right,
    var(--primary-fill) 0 33.333%,
    var(--purple-fill) 33.333% 66.666%,
    var(--red) 66.666% 100%
  );
}

.host-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  flex: 1;
  min-height: 0;
}

.host-sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  overflow: auto;
  padding: 24px 16px;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-line);
}

.host-nav { display: flex; flex-direction: column; gap: 4px; }
.host-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: var(--control-radius);
  color: var(--sidebar-ink);
  font-size: var(--type-small);
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
}
.host-nav a:hover { background: var(--sidebar-hover); color: var(--sidebar-ink); text-decoration: none; }
.host-nav a[aria-current="page"] { background: var(--sidebar-hover); color: var(--ink); font-weight: 650; }
.host-nav svg { width: 16px; height: 16px; flex: none; color: currentColor; }

.host-content { display: flex; flex-direction: column; min-width: 0; align-self: start; }
.host-body--public .host-content { flex: 1; align-self: stretch; }

.host-main {
  flex: 1;
  width: 100%;
  max-width: calc(var(--content-w) + (var(--page-gutter) * 2));
  margin: 0 auto;
  padding: 32px var(--page-gutter) 48px;
  min-width: 0;
}

.host-footer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px 32px;
  flex-wrap: wrap;
  margin-top: auto;
  padding: 16px 32px;
  border-top: 1px solid var(--line);
  background: var(--canvas);
  color: var(--muted);
  font-size: var(--type-label);
  line-height: 1.5;
}
.host-footer > span { flex-shrink: 0; color: var(--muted); }
.host-footer nav { display: flex; flex-wrap: wrap; gap: 4px 20px; flex: 1; }
.host-footer .theme-picker { flex-shrink: 0; margin-left: auto; }
.host-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 4px 0;
  color: var(--muted);
  text-decoration: none;
}
.host-footer a:hover { color: var(--ink); text-decoration: none; }

.theme-picker {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}
.theme-picker .theme-option {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.theme-picker .theme-option:hover { color: var(--ink); background: var(--hover); }
.theme-picker .theme-option[aria-pressed="true"] { color: var(--ink); background: var(--control-bg); }
.theme-picker .theme-option svg { width: 16px; height: 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ─── logged-out layout: no sidebar, footer stays down ────────────── */

.host-body--public .host-shell { display: flex; flex-direction: column; }
.host-body--public .host-footer { margin-top: auto; }
.host-body--public .host-main {
  display: grid;
  place-items: center;
  flex: 1;
  width: 100%;
  max-width: none;
  padding: 40px 24px;
}

.auth { width: 100%; max-width: 400px; }
.auth-intro { max-width: 42ch; }
.auth-lead {
  margin-top: 12px;
  color: var(--muted);
  font-size: var(--type-body);
  line-height: 1.6;
  max-width: 42ch;
}
.auth-lead strong { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.auth-form { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 28px; }
.auth-form .field { max-width: 360px; }
.auth-form .btn { margin-top: 0; }
.auth-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.auth-panel {
  margin-top: 24px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--panel-radius);
}
.auth-panel .label { display: block; margin-bottom: 4px; }
.auth-email { display: block; font-size: var(--type-body); font-weight: 600; overflow-wrap: anywhere; }
.auth-panel .small { margin-top: 10px; }
.auth-status { margin-top: 12px; }
.auth-switch {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--type-small);
}
.auth-switch a { color: var(--blue); }
.legal {
  margin: 0;
  color: var(--muted);
  font-size: var(--type-label);
  line-height: 1.55;
  max-width: 46ch;
}
.legal a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.legal a:hover { color: var(--ink); }

.notfound { max-width: 520px; }
.notfound .auth-actions { margin-top: 28px; }

/* ─── controls ────────────────────────────────────────────────────── */

.theme-toggle,
.host-theme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 6px;
  border: 1px solid var(--control-border);
  border-radius: var(--control-radius);
  background: var(--control-bg);
  color: var(--ink);
  cursor: pointer;
}
.theme-toggle:hover,
.host-theme:hover { background: var(--hover); border-color: var(--muted); color: var(--ink); }
.theme-toggle svg,
.host-theme svg { width: 16px; height: 16px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
  min-height: 32px;
  margin: 0;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: var(--button-radius);
  font-family: var(--pico-font-family);
  font-size: var(--type-label);
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.btn svg { width: 16px; height: 16px; flex: none; }
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* White text on --primary-fill fails WCAG AA. --nav-active-ink stays dark on that blue. */
.btn-primary {
  background: var(--primary-fill);
  border-color: var(--primary-fill);
  color: var(--nav-active-ink);
}
.btn-primary:hover {
  background: color-mix(in oklab, var(--primary-fill) 88%, var(--primary-ink));
  border-color: color-mix(in oklab, var(--primary-fill) 88%, var(--primary-ink));
  color: var(--nav-active-ink);
}
.btn-primary:active { background: var(--primary-fill); border-color: var(--primary-fill); }

.btn-secondary {
  background: var(--control-bg);
  border-color: var(--control-border);
  color: var(--ink);
}
.btn-secondary:hover { background: var(--hover); border-color: var(--muted); color: var(--ink); }

.btn-quiet {
  padding-inline: 6px;
  background: transparent;
  border-color: transparent;
  color: var(--muted);
}
.btn-quiet:hover { background: var(--hover); color: var(--ink); }

.btn-danger {
  background: var(--danger-bg);
  border-color: var(--danger-border);
  color: var(--danger);
}
.btn-danger:hover { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); }

.btn-icon { width: 32px; padding: 6px; }

.link-button {
  display: inline;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--blue);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.link-button:hover { background: transparent; color: var(--blue-hover); }

.link-quiet {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 4px;
  border-radius: var(--compact-control-radius);
  color: var(--muted);
  font-size: var(--type-small);
  text-decoration: none;
}
.link-quiet:hover { background: var(--hover); color: var(--ink); text-decoration: none; }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: var(--type-small);
  text-decoration: none;
}
.back-link:hover { color: var(--ink); text-decoration: none; }
.back-link svg { width: 16px; height: 16px; flex: none; }

/* ─── fields ───────────────────────────────────────────────────────── */

.field { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 360px; }
.field label { font-size: var(--type-label); line-height: 1.4; font-weight: 600; color: var(--ink); }
.field .hint { font-size: var(--type-label); line-height: 1.5; color: var(--muted); }
.input,
.select {
  width: 100%;
  height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--control-border);
  border-radius: var(--control-radius);
  background: var(--control-bg);
  color: var(--ink);
  font-family: var(--pico-font-family);
  font-size: var(--type-small);
  line-height: 20px;
  margin: 0;
}
.input::placeholder { color: var(--muted); opacity: 1; }
.input:focus,
.select:focus { border-color: var(--focus); }
.select { max-width: 150px; }
.form-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 16px; }
.form-stack .field { width: 100%; }
.host-body input[type="checkbox"],
.host-body input[type="radio"] { width: 16px; height: 16px; margin: 0; accent-color: var(--primary-fill); }

/* ─── page structure ───────────────────────────────────────────────── */

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.page-sub { margin-top: 6px; max-width: 64ch; color: var(--muted); font-size: var(--type-small); line-height: 1.55; }
.page-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.title-line { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.tag {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: var(--compact-control-radius);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.tag--trial { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning); }

.section { margin-top: 40px; padding-top: 0; border-top: 0; min-width: 0; }
.section-first { margin-top: 0; padding-top: 0; border-top: 0; }
.section-ruled { padding-top: 24px; border-top: 1px solid var(--line); }
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.section-head .small { font-size: var(--type-label); }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 32px; }

/* ─── status ───────────────────────────────────────────────────────── */

.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: var(--compact-control-radius);
  font-size: var(--type-label);
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
.status::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: currentColor;
}
.status--live { background: var(--success-bg); color: var(--success); }
.status--info { background: var(--info-bg); color: var(--info-ink); }
.status--failed { background: var(--danger-bg); color: var(--danger); }
.status--trial { background: var(--warning-bg); color: var(--warning); }
.status--muted { background: var(--code-bg); color: var(--muted); }

/* ─── apps list ────────────────────────────────────────────────────── */

.app-list-head,
.app-row {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) 150px 150px 16px;
  gap: 16px;
  align-items: center;
}
.app-list-head {
  padding: 0 12px 8px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--type-label);
}
.app-list { list-style: none; margin: 0; padding: 0; }
.app-row {
  min-height: 64px;
  padding: 14px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
}
.app-row:hover { background: var(--hover); color: var(--ink); text-decoration: none; }
.app-row:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.app-name { min-width: 0; font-size: var(--type-body); font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.app-url { min-width: 0; color: var(--muted); font-size: var(--type-small); overflow-wrap: anywhere; }
.app-meta { color: var(--muted); font-size: var(--type-label); text-align: right; }
.app-status { display: flex; justify-content: flex-start; }
.app-chevron { display: flex; justify-content: flex-end; color: var(--muted); }
.app-chevron svg { width: 16px; height: 16px; }

/* ─── empty state ──────────────────────────────────────────────────── */

.empty { max-width: 720px; padding: 4px 0 0; text-align: left; }
.empty h1 { max-width: 18ch; }
.empty-lead { margin: 12px 0 0; max-width: 58ch; color: var(--muted); font-size: var(--type-body); line-height: 1.6; }
.prompt-panel {
  margin-top: 28px;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--panel-radius);
  max-width: 680px;
}
.prompt-text { margin: 0; max-width: 62ch; color: var(--ink); font-size: var(--type-body); line-height: 1.65; }
.prompt-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.prompt-note { margin: 10px 0 0; color: var(--muted); font-size: var(--type-label); line-height: 1.5; }
.prompt-panel--dialog { margin-top: 16px; padding: 16px; }
.steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: var(--type-label);
}
.steps li { display: flex; align-items: center; gap: 6px; }
.steps b { font-family: var(--font-mono); font-weight: 400; color: var(--ink); }
.empty-foot { margin: 16px 0 0; color: var(--muted); font-size: var(--type-label); }

/* ─── app detail ───────────────────────────────────────────────────── */

.status-panel {
  width: 100%;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--panel-radius);
}
.status-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; }
.app-address {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
}
.app-address a { color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.app-address a:hover { color: var(--ink); text-decoration: underline; }
.status-meta { margin-top: 6px; color: var(--muted); font-size: var(--type-label); }

.app-panels {
  display: grid;
  gap: 16px;
  margin-bottom: 32px;
}
.app-panel-full,
#ammo-host .app-panel-full {
  max-width: none !important;
  width: 100% !important;
}

.trial-panel {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--panel-radius);
}
.trial-copy { max-width: 62ch; }
.trial-panel .status { margin-bottom: 10px; }
.trial-panel h2 { margin-bottom: 6px; color: var(--ink); }
.trial-panel p { color: var(--ink); font-size: var(--type-body); line-height: 1.6; }
.trial-panel .trial-includes { margin-top: 8px; color: var(--muted); font-size: var(--type-label); }
.trial-panel .btn { flex: none; }

.deploy-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.deploy-row {
  display: grid;
  grid-template-columns: 48px 120px minmax(0, 1fr) 120px;
  gap: 8px 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--type-small);
}
.deploy-num { font-family: var(--font-mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.deploy-what { color: var(--ink); }
.deploy-when { color: var(--muted); font-size: var(--type-label); text-align: right; }
.deploy-error { grid-column: 3 / 5; color: var(--danger); font-size: var(--type-label); line-height: 1.5; }

.log-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; }
.refresh { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: var(--type-label); font-weight: 500; }
.refresh .select { height: 32px; max-width: 140px; }
.log-tabs { display: flex; gap: 24px; margin-top: 8px; border-bottom: 1px solid var(--line); }
.log-tab {
  min-height: 34px;
  padding: 0 8px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-family: var(--pico-font-family);
  font-size: var(--type-small);
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
}
.log-tab:hover { background: var(--hover); color: var(--ink); }
.log-tab[aria-selected="true"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); }
.log-tab:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

.log-panel {
  max-height: 210px;
  min-width: 0;
  margin-top: 12px;
  padding: 12px 14px;
  overflow: auto;
  background: var(--code-bg);
  border: 1px solid var(--line);
  border-radius: var(--code-radius);
}
.log-line {
  display: flex;
  gap: 12px;
  min-width: 0;
  color: var(--code-ink);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.7;
}
.log-time { flex: none; white-space: nowrap; color: var(--muted); }
.log-text { flex: 1; min-width: 0; white-space: pre-wrap; word-break: break-word; }

.facts { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 12px 24px; margin: 0; font-size: var(--type-small); }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.facts .mono { color: var(--ink); }

/* ─── keys ─────────────────────────────────────────────────────────── */

.key-reveal { margin-bottom: 24px; }
.key-copy { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
#ammo-host .host-key-code { flex: 1 1 160px; min-width: 0; margin: 0; padding: 0; border: 0; background: transparent; color: var(--ink); font: 13px/1.45 var(--font-mono); overflow-wrap: anywhere; }
.key-copy .input { flex: 1; min-width: 220px; max-width: none; font-family: var(--font-mono); font-size: var(--type-small); }
.keys-layout { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 32px; align-items: start; }
.keys-layout .panel .field { width: 100%; }
.keys-layout .panel .field input { max-width: 360px; }
#ammo-host .keys-layout fieldset { gap: 0; margin: 0; padding: 0; }
#ammo-host .keys-layout fieldset .host-check { min-height: 28px; gap: 8px; margin: 0; padding: 0; }
#ammo-host .keys-layout fieldset label.host-check { min-height: 28px; }
.key-table { width: 100%; border-collapse: collapse; font-size: var(--type-small); margin-bottom: 16px; }
.key-table-note { color: var(--muted); font-size: var(--type-small); line-height: 1.5; }
.key-table th { color: var(--muted); font-weight: 500; font-size: var(--type-label); text-align: left; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--line); }
.key-table td { padding: 14px 12px 14px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.key-table th:last-child,
.key-table td:last-child { padding-right: 0; text-align: right; }
.key-table .key-name { font-weight: 600; }
.key-table .key-prefix { font-family: var(--font-mono); font-size: var(--type-label); color: var(--muted); }
.key-table .key-perms { color: var(--muted); font-size: var(--type-label); }
.key-table .btn-icon { width: 32px; height: 32px; min-height: 32px; }

.key-list { border-top: 1px solid var(--line); }
.key-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px 100px;
  gap: 8px 12px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--type-small);
}
.key-row strong { display: block; font-size: var(--type-small); font-weight: 600; }
.key-row .small { display: block; margin-top: 2px; }
.key-row .mono { color: var(--muted); font-size: var(--type-label); overflow-wrap: anywhere; }
.key-row .status { justify-self: start; }

/* ─── add card / billing / account ─────────────────────────────────── */

.card-setup { max-width: 560px; padding-top: 24px; border-top: 1px solid var(--line); }
.card-line { color: var(--ink); font-size: var(--type-body); line-height: 1.65; max-width: 58ch; }
.card-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 20px; }

.plan-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.plan-summary .label { display: block; margin-bottom: 4px; }
.plan-summary p { color: var(--ink); font-size: var(--type-small); line-height: 1.5; }
.plan-summary .plan-name { font-size: var(--type-section); font-weight: 600; line-height: 1.3; }

.trial-list { border-top: 1px solid var(--line); }
.trial-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px 16px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.trial-row strong { display: block; font-size: var(--type-small); font-weight: 600; }
.trial-row .small { display: block; margin-top: 2px; }
.trial-row .btn { justify-self: end; }

.card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  flex-wrap: wrap;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.card-row strong { display: block; font-size: var(--type-small); font-weight: 600; }
.card-row .small { display: block; margin-top: 2px; }

.plan-choice { display: grid; gap: 8px; margin: 16px 0 0; padding: 0; border: 0; }
.plan-choice label {
  display: flex;
  min-height: 44px;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--control-radius);
  cursor: pointer;
}
.plan-choice label:has(input:checked) { border-color: var(--primary-fill); }
.plan-choice strong { display: block; font-size: var(--type-small); font-weight: 600; }
.plan-choice .small { display: block; margin-top: 2px; }

/* ─── danger zone ──────────────────────────────────────────────────── */

.danger-zone { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); }
.danger-zone h2 { font-size: var(--type-body); font-weight: 650; }
.danger-zone > p { margin-top: 16px; max-width: 68ch; color: var(--muted); font-size: var(--type-small); line-height: 1.55; }
.danger-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  flex-wrap: wrap;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.danger-row:last-of-type { border-bottom: 0; }
.danger-row strong { display: block; font-size: var(--type-small); font-weight: 600; }
.danger-row .small { margin-top: 2px; max-width: 62ch; }
.danger-row .btn { flex: none; }

.confirm-delete {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--control-border);
  border-radius: var(--button-radius);
  background: var(--control-bg);
}
.confirm-delete .btn { border-radius: 0; border: 0; }
.confirm-delete .btn:first-child { border-radius: var(--button-radius) 0 0 var(--button-radius); }
.confirm-delete .confirm-switch {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-left: 1px solid var(--control-border);
  font-size: var(--type-label);
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  cursor: pointer;
}
.confirm-delete .confirm-switch input { margin: 0; }
.confirm-delete .confirm-switch:has(input:checked) { color: var(--danger); }
.confirm-delete .btn-danger:disabled { opacity: 0.5; cursor: not-allowed; }

/* ─── dialogs and feedback ─────────────────────────────────────────── */

.host-dialog {
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  margin: auto;
  padding: 24px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--panel-radius);
  background: var(--surface);
  color: var(--ink);
}
.host-dialog::backdrop { background: color-mix(in oklab, var(--canvas) 78%, transparent); }
.host-dialog h2 { font-size: var(--type-section); line-height: 1.35; margin-bottom: 8px; }
.host-dialog p { color: var(--muted); font-size: var(--type-small); line-height: 1.55; }
.host-dialog .field { max-width: none; }
.dialog-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; width: 100%; margin-top: 24px; }

.copy-status { position: static; inset: auto; z-index: auto; min-height: 18px; margin: 8px 0 0; padding: 0; border-radius: 0; background: transparent; color: var(--muted); font-size: var(--type-label); line-height: 1.5; text-align: left; }
.copy-status[data-state="success"] { color: var(--success); }
.copy-status[data-state="error"] { color: var(--danger); }
.copy-status:empty { min-height: 0; margin-top: 0; }

/* ─── responsive: 390px first-class ───────────────────────────────── */

@media (max-width: 980px) {
  .app-list-head { display: none; }
  .app-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "name status"
      "url url"
      "meta meta";
    gap: 4px 12px;
    min-height: 0;
    padding: 14px 4px;
  }
  .app-name { grid-area: name; }
  .app-url { grid-area: url; }
  .app-meta { grid-area: meta; text-align: left; }
  .app-status { grid-area: status; justify-content: flex-end; }
  .app-chevron { display: none; }
  .two-col { grid-template-columns: 1fr; }
  .two-col .section + .section { margin-top: 24px; }
}

@media (max-width: 900px) {
  .keys-layout { grid-template-columns: 1fr; gap: 32px; }
  .plan-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  :root { --page-gutter: 16px; }

  .host-header { min-height: 64px; padding: 10px 16px; }
  .host-header-actions nav { gap: 8px; }
  .host-brand img { width: 58px; height: 28px; }
  .host-brand span { font-size: 20px; }

  .host-shell { display: flex; flex-direction: column; }
  .host-sidebar {
    position: static;
    height: auto;
    padding: 8px 16px;
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid var(--sidebar-line);
  }
  .host-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .host-nav a { justify-content: center; gap: 6px; min-height: 44px; padding: 8px 6px; font-size: 12px; }
  .host-nav svg { width: 15px; height: 15px; }

  .host-main { padding: 24px 16px 32px; }
  .host-footer { padding: 16px; gap: 8px 16px; }
  .host-footer nav { gap: 0 16px; }

  .host-body--public .host-main { padding: 32px 20px; }
  .auth { max-width: 360px; }

  .app-list-head { display: none; }
  .app-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "name status"
      "url url"
      "meta meta";
    gap: 4px 12px;
    min-height: 0;
    padding: 14px 4px;
  }
  .app-name { grid-area: name; }
  .app-url { grid-area: url; }
  .app-meta { grid-area: meta; text-align: left; }
  .app-status { grid-area: status; justify-content: flex-end; }
  .app-chevron { display: none; }

  .two-col { grid-template-columns: 1fr; }
  .two-col .section + .section { margin-top: 24px; }

  .plan-summary { grid-template-columns: 1fr; gap: 12px; }
  .trial-row { grid-template-columns: minmax(0, 1fr) auto; }
  .trial-row .status { grid-column: 1; justify-self: start; }
  .trial-row .btn,
  .trial-row > form { grid-column: 2; grid-row: 1 / 3; align-self: center; justify-self: end; }

  .deploy-row { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .deploy-what { grid-column: 2 / 4; font-size: var(--type-label); }
  .deploy-when { grid-column: 3; grid-row: 1; text-align: right; }
  .deploy-error { grid-column: 2 / 4; }

  .key-row { grid-template-columns: minmax(0, 1fr) auto; }
  .key-row .mono { grid-column: 1 / -1; }
  .key-copy .input { min-width: 0; flex-basis: 100%; }

  .facts { grid-template-columns: 1fr; gap: 2px; }
  .facts dd { margin-bottom: 10px; }
  .facts dd:last-child { margin-bottom: 0; }

  .danger-row { align-items: flex-start; }
  .danger-row .btn { width: auto; }

  .log-line { grid-template-columns: 12ch minmax(0, 1fr); gap: 8px; font-size: 12px; }
  .log-time { white-space: nowrap; }
  .log-panel { max-height: 190px; padding: 10px 12px; }

  .trial-panel { gap: 16px; }
  .trial-panel .btn { width: auto; }

  /* A 390px mockup is a phone even when reviewed on a desktop pointer. */
  .btn,
  .link-quiet,
  .back-link,
  .host-footer a { min-height: 44px; }
  .theme-toggle,
  .host-theme { width: 44px; height: 44px; }
  .btn-icon { width: 44px; }
  .input,
  .select,
  .refresh .select { height: 44px; }
  .log-tab { min-height: 44px; }
}

@media (max-width: 380px) {
  .host-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (pointer: coarse) {
  .btn,
  .link-quiet,
  .back-link,
  .host-nav a,
  .host-footer a { min-height: 44px; }
  .theme-toggle,
  .host-theme { width: 44px; height: 44px; }
  .btn-icon { width: 44px; }
  .log-tab { min-height: 44px; }
  .app-row { min-height: 64px; }
  .input,
  .select,
  .refresh .select { height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .host-body *,
  .host-body *::before,
  .host-body *::after {
    transition: none !important;
    animation: none !important;
  }
}

.host-body {
  --secondary: var(--muted);
  --hairline: var(--line);
  --white: var(--surface);
  --bg: var(--canvas);
  --accent: var(--primary-fill);
  --error: var(--danger);
  --font-display: Rockwell, Georgia, serif;
  --font-sans: var(--pico-font-family);
  --font-mono: ui-monospace, SFMono-Regular, Consolas, monospace;
}
.host-wordmark { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink); text-decoration: none; }
.host-wordmark:hover { color: var(--ink); text-decoration: none; }
.host-wordmark img { width: 64px; height: 34px; object-fit: contain; filter: var(--logo-filter); }
.host-wordmark span { font-family: Rockwell, Georgia, serif; font-size: 24px; line-height: 1; font-weight: 700; }
.auth h1 .line { display: block; }
/* Public email fields. Hairline borders sit under 1.4:1, so these use --secondary. */
.host-body--public .auth input:not([type="hidden"]):not([type="checkbox"]),
.host-body--public .field .input { border-color: var(--secondary); }
#ammo-host.host-public-auth :focus-visible:is(a, button, input, select, textarea, summary):not([tabindex="-1"]),
#ammo-host.host-public-auth .host-header :focus-visible:is(a, button, input, select, textarea, summary):not([tabindex="-1"]),
#ammo-host.host-public-auth .host-footer :focus-visible:is(a, button, input, select, textarea, summary):not([tabindex="-1"]) { outline: 2px solid var(--focus); outline-offset: -2px; }
#ammo-host .btn,
#ammo-host .theme-toggle,
#ammo-host .host-theme,
#ammo-host .log-tab,
#ammo-host .link-button {
  height: auto;
}
#ammo-host .btn-primary,
#ammo-host a.btn-primary,
#ammo-host button.host-primary,
#ammo-host a.host-primary {
  color: var(--nav-active-ink);
}
#ammo-host.host-body h1,
#ammo-host .page-title {
  font-family: Rockwell, Georgia, serif;
  font-size: var(--type-page, 32px);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--ink);
}
.log-time { white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  #ammo-host .host-sent { animation: none; }
}
#ammo-host.host-public-auth :focus-visible:is(a,button,input,select,textarea,summary):not([tabindex="-1"]){outline:2px solid var(--focus);outline-offset:-2px}
.host-body--public .field .input{border-color:var(--secondary)}
@media(prefers-reduced-motion:reduce){#ammo-host .host-sent{animation:none}}

/* Prototype type, shell, and controls. These beat the older #ammo-host rules. */
#ammo-host.host-body {
  --pico-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --type-page: 32px;
  --type-section: 18px;
  --type-body: 15px;
  --type-small: 13px;
  --type-label: 12px;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  font-family: var(--pico-font-family);
  font-size: var(--type-body);
  line-height: 1.55;
}
#ammo-host.host-body h1,
#ammo-host.host-body .page-title,
#ammo-host.host-body .auth h1,
#ammo-host.host-body .host-page-heading h1 {
  font-family: Rockwell, Georgia, serif;
  font-size: var(--type-page);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: 0;
  margin: 0;
}
#ammo-host.host-body h2 {
  font-family: Rockwell, Georgia, serif;
  font-size: var(--type-section);
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: 0;
}
#ammo-host.host-body .page-sub {
  margin-top: 6px;
  max-width: 64ch;
  color: var(--muted);
  font-size: var(--type-small);
  line-height: 1.55;
}
#ammo-host.host-body .auth-lead {
  margin-top: 12px;
  color: var(--muted);
  font-size: var(--type-body);
  line-height: 1.6;
}
#ammo-host.host-body .small,
#ammo-host.host-body .host-muted {
  font-size: var(--type-small);
  line-height: 1.55;
}
#ammo-host.host-body .status-meta {
  font-size: var(--type-label);
  line-height: 1.55;
}
#ammo-host.host-body .label,
#ammo-host.host-body .tag,
#ammo-host.host-body .legal,
#ammo-host.host-body .host-footer {
  font-size: var(--type-label);
}
#ammo-host .host-shell {
  flex: 1;
  align-items: stretch;
  grid-template-rows: minmax(0, 1fr);
}
/* Logged-out pages carry host-public and no sidebar. .host-shell's grid
   otherwise puts that single child in the 242/272px sidebar track, so a
   72ch article renders at about 200px. Flex lets the article's own measure apply. */
#ammo-host .host-shell.host-public {
  display: flex;
  flex-direction: column;
}
#ammo-host .host-sidebar {
  align-self: stretch;
  height: auto;
  min-height: 100%;
  position: relative;
  top: auto;
  display: flex;
  flex-direction: column;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-line);
}
#ammo-host .host-content {
  align-self: stretch;
  min-height: 100%;
}
#ammo-host.host-body--public .host-main {
  align-content: start;
  justify-items: center;
}
#ammo-host .host-footer { margin-top: auto; }
#ammo-host .host-nav a[aria-current="page"] {
  background: var(--sidebar-hover);
  color: var(--ink);
  font-weight: 650;
  box-shadow: none;
}
#ammo-host button.host-theme,
#ammo-host button.theme-toggle {
  width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 6px;
  border: 1px solid var(--control-border);
  border-radius: var(--control-radius);
  background: var(--control-bg);
  color: var(--ink);
}
#ammo-host button.btn,
#ammo-host a.btn,
#ammo-host summary.btn {
  position: relative;
  width: auto;
  height: auto;
  min-height: 32px;
  padding: 6px 10px;
  font-family: var(--pico-font-family);
  font-size: var(--type-label);
  font-weight: 600;
  line-height: 1.3;
}
#ammo-host button.btn-icon,
#ammo-host a.btn-icon {
  width: 32px;
  min-width: 32px;
  padding: 6px;
}
#ammo-host button.btn-secondary,
#ammo-host a.btn-secondary,
#ammo-host button.host-secondary,
#ammo-host a.host-secondary {
  background: var(--control-bg);
  border: 1px solid var(--control-border);
  color: var(--ink);
}
#ammo-host button.btn-secondary:hover,
#ammo-host a.btn-secondary:hover,
#ammo-host button.host-secondary:hover {
  background: var(--hover);
  border-color: var(--muted);
  color: var(--ink);
}
#ammo-host button.btn-quiet,
#ammo-host a.btn-quiet {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
}
#ammo-host button.btn-danger,
#ammo-host a.btn-danger {
  background: var(--danger-bg);
  border-color: var(--danger-border);
  color: var(--danger);
}
#ammo-host button.btn-danger:hover,
#ammo-host a.btn-danger:hover {
  background: var(--danger-bg);
  border-color: var(--danger);
  color: var(--danger);
}
#ammo-host button.btn-primary,
#ammo-host a.btn-primary,
#ammo-host button.host-primary,
#ammo-host a.host-primary {
  background: var(--primary-fill);
  border-color: var(--primary-fill);
  color: var(--nav-active-ink);
}
#ammo-host form.host-checkout-form.host-card-update {
  flex-direction: row;
  align-items: center;
  width: auto;
  margin: 0;
  gap: 8px;
}
#ammo-host form.host-checkout-form.host-card-update > button {
  width: auto;
  height: auto;
  min-height: 32px;
}
#ammo-host .host-plan-choice > article,
#ammo-host .host-plan-choice > article.host-plan-is-current,
#ammo-host .host-plan-choice > article.host-price-highlight {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
}
#ammo-host .host-plan-choice > article.host-plan-is-current {
  border-color: var(--primary-fill);
}
#ammo-host .host-plan-choice > article.host-price-highlight,
#ammo-host .host-plan-choice > article.host-price-highlight h3,
#ammo-host .host-plan-choice > article.host-price-highlight .host-price,
#ammo-host .host-plan-choice > article.host-price-highlight .host-price span,
#ammo-host .host-plan-choice > article.host-price-highlight .host-plan-who,
#ammo-host .host-plan-choice > article.host-price-highlight .host-feature-list,
#ammo-host .host-plan-choice > article.host-price-highlight .host-plan-plus,
#ammo-host .host-plan-choice > article.host-price-highlight .host-price-meta,
#ammo-host .host-plan-choice > article.host-price-highlight .host-price-amount {
  background: var(--surface);
  color: var(--ink);
}
#ammo-host .host-plan-title {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
#ammo-host .host-plan-title .tag { padding-top: 0; }
#ammo-host .facts {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
}
#ammo-host .facts dt,
#ammo-host .host-facts dt {
  color: var(--muted);
}
#ammo-host .facts dd { color: var(--ink); }
#ammo-host .app-address {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
#ammo-host .app-address a,
#ammo-host .host-app-address {
  margin: 0;
  color: var(--ink);
  font-family: var(--pico-font-family);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
}
#ammo-host .danger-zone h2 {
  font-size: var(--type-body);
  font-weight: 650;
}
#ammo-host .danger-zone > p {
  margin-top: 16px;
  color: var(--muted);
}
#ammo-host .status-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  flex-wrap: wrap;
}
#ammo-host .status-meta { margin-top: 6px; color: var(--muted); }
#ammo-host .status-meta.host-error { color: var(--danger); }
#ammo-host p.refresh-note {
  display: block;
  width: 100%;
  margin: 8px 0 0;
  padding: 0;
  text-align: left;
  text-indent: 0;
  position: static;
  left: auto;
  color: var(--muted);
  font-size: var(--type-label);
  line-height: 1.5;
}
#ammo-host p.notice.host-live-limit {
  margin: 0 0 16px;
  max-width: 68ch;
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
  border-radius: 6px;
  padding: 14px 18px;
  color: var(--warning);
  font-size: var(--type-small);
  line-height: 1.55;
}
#ammo-host p.notice.host-live-limit a {
  color: var(--warning);
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* A link in a sentence needs a cue besides its colour. */
#ammo-host :is(.host-app-note, .host-muted, .prompt-note, p.small) a,
#ammo-host .host-app-status > p a,
#ammo-host .host-docs-content :is(p, li) a,
#ammo-host .danger-zone :is(p, li) a {
  text-decoration: underline;
  text-underline-offset: 4px;
}
@media (max-width: 768px) {
  #ammo-host .host-nav a[aria-current="page"] { box-shadow: none; }
}
@media (max-width: 700px) {
  #ammo-host .host-sidebar {
    height: auto;
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid var(--sidebar-line);
  }
  #ammo-host .host-nav a[aria-current="page"] { box-shadow: none; }
  #ammo-host.host-body h1,
  #ammo-host.host-body .page-title,
  #ammo-host.host-body .host-page-heading h1 { font-size: var(--type-page); }
  #ammo-host button.btn,
  #ammo-host a.btn,
  #ammo-host summary.btn { min-height: 44px; }
  #ammo-host button.host-theme {
    width: 44px;
    height: 44px;
    min-height: 44px;
    flex: none;
  }
#ammo-host button.btn-icon,
#ammo-host a.btn-icon { width: 44px; min-width: 44px; }
}

#ammo-host .section-head > details.plan-change { width: auto; margin: 0; }
#ammo-host .plan-change > summary.btn {
  position: static;
  display: inline-flex;
  list-style: none;
}
#ammo-host .plan-change > summary.btn::marker,
#ammo-host .plan-change > summary.btn::-webkit-details-marker {
  content: "";
  display: none;
}
#ammo-host summary.btn-secondary {
  background: var(--control-bg);
  border: 1px solid var(--control-border);
  color: var(--ink);
}
#ammo-host summary.btn:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}
#ammo-host .plan-picker { margin-top: 28px; }
#ammo-host .plan-picker[hidden] { display: none !important; }
#ammo-host .card-row > p { margin: 0; color: var(--ink); }
#ammo-host .trial-row > form { justify-self: end; margin: 0; }
#ammo-host .trial-row strong a { color: var(--ink); text-decoration: none; }
#ammo-host .two-col > :only-child { grid-column: 1 / -1; }
#ammo-host .log-panel .host-empty {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--code-ink) !important;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.7;
}
#ammo-host p.refresh-note { border: 0; box-shadow: none; }

/* Signed-out header. Get started stays a primary button; Sign in stays secondary.
   Both are one line and at least 44px so the row does not read as a single phrase.
   The public-auth link rule is less specific and must not flatten this padding.
   The wordmark is the full Rockwell "ammo.host". It does not shrink or clip.
   When the actions do not fit beside it, they wrap onto the next row. Signed-in
   pages have no account nav, so they stay on one row. */
#ammo-host .host-wordmark {
  white-space: nowrap;
}
#ammo-host .host-wordmark span {
  white-space: nowrap;
}
#ammo-host .host-header:has(.host-header-actions nav) {
  flex-wrap: wrap;
}
#ammo-host .host-header:has(.host-header-actions nav) .host-wordmark,
#ammo-host .host-header:has(.host-header-actions nav) .host-header-actions {
  flex: none;
}
#ammo-host .host-header:has(.host-header-actions nav) .host-header-actions {
  margin-left: auto;
}
#ammo-host .host-header .host-header-actions nav {
  gap: 12px;
}
#ammo-host .host-header .host-header-actions nav a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-height: 44px;
  height: auto;
  margin: 0;
  padding: 6px 10px;
  border-radius: var(--button-radius);
  white-space: nowrap;
  text-decoration: none;
}
#ammo-host .host-header .host-header-actions nav a.btn-secondary {
  background: var(--control-bg);
  border: 1px solid var(--control-border);
  color: var(--ink);
}
#ammo-host .host-header .host-header-actions nav a.btn-secondary:hover {
  background: var(--hover);
  border-color: var(--muted);
  color: var(--ink);
  text-decoration: none;
}
#ammo-host .host-header .host-header-actions nav a.btn-primary {
  background: var(--primary-fill);
  border: 1px solid var(--primary-fill);
  color: var(--nav-active-ink);
}
#ammo-host .host-header .host-header-actions nav a.btn-primary:hover {
  background: color-mix(in oklab, var(--primary-fill) 88%, var(--primary-ink));
  border-color: color-mix(in oklab, var(--primary-fill) 88%, var(--primary-ink));
  color: var(--nav-active-ink);
  text-decoration: none;
}
@media (max-width: 420px) {
  #ammo-host .host-header { gap: 8px; }
  #ammo-host .host-header:has(.host-header-actions nav) {
    padding-inline: 8px;
  }
  #ammo-host .host-header .host-header-actions nav {
    gap: 8px;
  }
}

/* Non-interactive elements receive programmatic focus for assistive tech
   but never paint a ring. Scrollable regions like .log-panel keep their
   :focus-visible ring so keyboard users can see where they are. */
#ammo-host :is(
  main,
  section,
  article,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  [tabindex="-1"],
  .host-log,
  pre,
  .host-docs-code
):is(:focus, :focus-visible) {
  outline: none;
  box-shadow: none;
}
/* Scrollable tabindex=0 regions: hide ring on pointer focus, show on keyboard */
#ammo-host .log-panel:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}
#ammo-host .log-panel:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}
#ammo-host .host-terms-note {
  flex-basis: 100%;
  margin: 0;
  color: var(--secondary);
  font-size: 13px;
}
#ammo-host .host-terms-note a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Plan cards for pricing page */
.plan-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 24px;
  margin-bottom: 16px;
}
.plan-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--panel-radius);
}
.plan-card--featured {
  background: var(--primary-fill);
  border-color: var(--primary-fill);
  color: var(--nav-active-ink);
}
.plan-card--featured .plan-card-name,
.plan-card--featured .plan-card-price,
.plan-card--featured .plan-card-desc,
.plan-card--featured .plan-card-features,
.plan-card--featured .plan-card-period,
.plan-card--featured .plan-card-features li { color: var(--nav-active-ink); }
.plan-card-badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--compact-control-radius);
  background: var(--line);
  color: var(--ink);
  font-size: var(--type-label);
  font-weight: 600;
}
.plan-card--featured .plan-card-badge {
  background: var(--nav-active);
  color: var(--nav-active-ink);
}
.plan-card-current-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 6px;
  background: var(--success-bg);
  color: var(--success);
  font-size: 10px;
  font-weight: 500;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.plan-card-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0;
  font-size: 2rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
}
.plan-card-period {
  font-size: var(--type-small);
  font-weight: 400;
  color: var(--muted);
}
.plan-card-desc {
  margin: 0;
  color: var(--ink);
  font-size: var(--type-body);
  line-height: 1.55;
}
.plan-card-divider {
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--line);
}
.plan-card--featured .plan-card-divider {
  background: color-mix(in oklab, var(--nav-active-ink) 25%, transparent);
}
.plan-card-features {
  margin: 0;
  padding-left: 20px;
  font-size: var(--type-small);
  line-height: 1.55;
  color: var(--ink);
}
.plan-card-features li { margin-top: 6px; color: var(--muted); }
.plan-card-features li:first-child { margin-top: 0; }
.plan-card--featured .plan-card-features li { color: var(--nav-active-ink); }
.plan-card-action { margin-top: auto; padding-top: 16px; }
.plan-card-action .btn { width: 100%; }
.plan-card-action .host-checkout-form { display: flex; flex-direction: column; gap: 12px; }
.plan-card-action .host-error { margin: 0; }
.plan-card-action .app-count { margin-bottom: 4px; }
.plan-card--current { opacity: 0.7; }

.checkout-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
  cursor: pointer;
}
.checkout-consent input[type="checkbox"] {
  flex-shrink: 0;
  margin-top: 2px;
}
.plan-card--featured .checkout-consent { color: var(--nav-active-ink); }
#ammo-host .plan-card--featured .btn-primary,
#ammo-host .plan-card--featured button.btn-primary {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
}
#ammo-host .plan-card--featured .btn-primary:hover,
#ammo-host .plan-card--featured button.btn-primary:hover {
  background: var(--hover);
  border-color: var(--muted);
  color: var(--ink);
}
#ammo-host .plan-card--featured .btn-primary:focus-visible,
#ammo-host .plan-card--featured button.btn-primary:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

.pricing-status {
  margin-top: 16px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--control-radius);
  color: var(--muted);
  font-size: var(--type-small);
}
.plan-card-amount {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

/* Light mode: use AMMO tokens, improve card/text visibility */
[data-theme="light"] .status-panel,
[data-theme="light"] .trial-panel,
[data-theme="light"] .plan-card:not(.plan-card--featured),
[data-theme="light"] .prompt-panel,
[data-theme="light"] .auth-panel,
[data-theme="light"] .pricing-status,
[data-theme="light"] .panel {
  background: var(--surface);
  border-color: var(--line);
}
[data-theme="light"] .host-body p:not(.plan-card--featured p),
[data-theme="light"] .host-body .facts dd,
[data-theme="light"] .host-body .trial-panel p,
[data-theme="light"] .host-body .card-line,
[data-theme="light"] .host-body .trial-copy p {
  color: var(--ink);
}
[data-theme="light"] .status--live {
  background: var(--success-bg);
  color: var(--success);
}

/* Footer single row on desktop */
.host-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 16px 32px;
  padding: 16px 32px;
  border-top: 1px solid var(--line);
  background: var(--canvas);
  color: var(--muted);
  font-size: var(--type-label);
}
.host-footer > span { flex-shrink: 0; }
.host-footer > span a { color: var(--muted); text-decoration: none; }
.host-footer > span a:hover { color: var(--ink); }
.host-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  flex: 1;
}
.host-footer .theme-picker { flex-shrink: 0; margin-left: auto; }
@media (max-width: 700px) {
  .host-footer { padding: 16px; gap: 12px 16px; }
  .host-footer nav { gap: 0 16px; flex-basis: 100%; order: 1; }
  .host-footer .theme-picker { margin-left: 0; }
}
.host-lock-links{margin:8px 0 0;padding-left:20px;font-size:13px}.host-lock-links li+li{margin-top:4px}
#app-lock h3{margin-top:32px}

/* Minimal footer (theme switcher only) */
.host-footer--minimal {
  justify-content: flex-end;
  border-top: none;
  padding: 8px 32px;
  background: transparent;
}
.host-footer--minimal .theme-picker { margin-left: 0; }
@media (max-width: 700px) {
  .host-footer--minimal { padding: 8px 16px; }
}

/* Company band - always dark, independent of page theme */
.company-band {
  background: #151413;
  color: #d9d5cc;
  position: relative;
  font-size: 14px;
  font-family: var(--pico-font-family);
  -webkit-font-smoothing: antialiased;
}
.company-band::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, #2f6bff, #7a3ff2, #ef4a4a);
}
/* #ammo-host a (shared styles) uses an id selector, so the band must match it. */
.company-band a,
#ammo-host .company-band a { color: #cfcbc2; text-decoration: none; }
.company-band a:hover,
#ammo-host .company-band a:hover { color: #fff; }
.company-band a:focus-visible,
#ammo-host .company-band a:focus-visible { outline: 2px solid #8fb0ff; outline-offset: 2px; }
.company-band-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 56px 32px 36px;
}
.company-band-top {
  display: grid;
  grid-template-columns: 1fr 1.35fr 1.15fr;
  gap: 44px;
  align-items: start;
}
.company-band-logo { display: block; height: 46px; width: auto; filter: brightness(0) invert(1); }
.company-band-co b { display: block; margin-top: 18px; color: #fff; font: 500 18px/1.3 Rockwell, Georgia, serif; }
.company-band-origin {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 14px;
  color: #a19d94;
}
.company-band h6 {
  font: 600 12px/1 var(--pico-font-family);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #827e75;
  margin: 0 0 16px;
}
.company-band-prods { display: grid; gap: 10px; }
.company-band-prod {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: background 0.2s, border-color 0.2s;
}
a.company-band-prod:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.18);
}
.company-band-pm {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: #fff;
  font: 700 16px/1 Rockwell, Georgia, serif;
  position: relative;
  overflow: hidden;
}
.company-band-pm::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, #2f6bff, #7a3ff2, #ef4a4a);
}
.company-band-pm span { margin-top: -3px; }
.company-band-pm--host { background: #141312; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15) inset; }
.company-band-pm--tools { background: #0b8a7a; }
.company-band-prod b { display: block; color: #fff; font: 500 16px/1.3 Rockwell, Georgia, serif; }
.company-band-prod .tld-host { color: #8fb0ff; }
.company-band-prod .tld-tools { color: #6fd3c3; }
.company-band-prod small { display: block; color: #9a968d; font-size: 13px; line-height: 1.4; }
.company-band-here {
  margin-left: auto;
  flex: none;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #cfcbc2;
}
.company-band-go { margin-left: auto; flex: none; color: #7d7970; }
.company-band-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 20px;
}
.company-band-links li { margin: 0; padding: 0; }
.company-band-bot {
  margin: 44px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  font-size: 12.5px;
  color: #827e75;
}
@media (max-width: 900px) {
  .company-band-top { grid-template-columns: 1fr 1fr; }
  .company-band-co { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .company-band-wrap { padding: 44px 20px 36px; }
  .company-band-top { grid-template-columns: 1fr; gap: 36px; }
  .company-band-links ul { grid-template-columns: 1fr; }
}
@media (pointer: coarse) {
  .company-band-co > a,
  .company-band-links a { display: inline-flex; align-items: center; min-height: 44px; }
}