/* agntpad: one stylesheet for both hosts and both themes (mono, warm). */
*{box-sizing:border-box}
:root{--bg:#e9edf3;--paper:#f7f8fb;--ink:#0f172a;--accent:#64748b;--spot:#334155;--primary:#0f172a;--line:#dce2eb;--muted:#5d6b7d;--sunk:#ffffff66}
html.warm{--bg:#eeeae2;--paper:#faf8f3;--ink:#1f2937;--accent:#426449;--spot:#b45309;--primary:#163d2c;--line:#e9e2d6;--muted:#6d7167;--sunk:#ffffff70}
html{scroll-behavior:smooth;scroll-padding-top:24px;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
.page{--gutter:6%;max-width:1400px;margin:40px auto;background:var(--paper);border:1px solid #ffffffb0;border-radius:24px;overflow:hidden;box-shadow:0 12px 60px #18233a0d}
.shell{padding:0 var(--gutter)}
header .shell{min-height:96px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.brand{font-size:23px;font-weight:750;letter-spacing:-1px;display:flex;align-items:center;gap:9px;white-space:nowrap;color:var(--ink);text-decoration:none}
.brand svg{width:32px;height:32px}
.tools{display:flex;align-items:center;gap:20px}
.tools a{font-size:15px;color:var(--ink);text-decoration:none}
.tools a:hover{text-decoration:underline;text-underline-offset:6px}
main{display:block}
.app main{padding:34px var(--gutter) 76px}
h1{font-size:clamp(30px,3.3vw,42px);line-height:1.14;letter-spacing:-1.5px;font-weight:650;margin:0 0 18px}
h2{font-size:28px;line-height:1.2;letter-spacing:-1px;font-weight:600;margin:46px 0 14px}
h3{font-size:19px;letter-spacing:-.3px;margin:28px 0 6px}
html.warm h1,html.warm h2,html.warm h3{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-1px}
p{margin:0 0 16px}
small{color:var(--muted)}
main a{color:var(--primary);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
main a:hover{color:var(--accent)}
a.button,a.brand{text-decoration:none}
button,.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--primary);color:#fff;border:1px solid transparent;border-radius:11px;padding:13px 21px;font:inherit;font-size:15px;font-weight:600;line-height:1.2;cursor:pointer;text-decoration:none;white-space:nowrap;overflow-wrap:normal;transition:transform .2s,box-shadow .2s}
button:hover,.button:hover{transform:translateY(-2px);box-shadow:0 8px 22px #13203118}
.button.secondary,button.secondary{background:transparent;color:var(--ink);border-color:var(--line)}
button[disabled]{opacity:.45;cursor:not-allowed}button[disabled]:hover{transform:none;box-shadow:none}
button.danger{background:#b3261e}
main a.button{color:#fff}main a.button.secondary{color:var(--ink)}
.ms-btn{display:inline-flex;align-items:center;gap:13px;height:46px;padding:0 18px;border:1px solid #8c8c8c;
        border-radius:2px;background:#fff;color:#1f1f1f;text-decoration:none;font-size:15px;font-weight:600;
        font-family:'Segoe UI',-apple-system,BlinkMacSystemFont,Arial,Helvetica,sans-serif}
.ms-btn:hover{background:#f5f5f5}
.ms-btn svg{width:20px;height:20px;display:block}
main a.ms-btn{color:#1f1f1f}
.signin-note{font-size:14px;color:var(--muted);margin:16px 0 0;max-width:34em}
.themes{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:999px;background:var(--sunk)}
.themes button{background:none;border:0;border-radius:999px;padding:8px 15px;font-size:13px;font-weight:600;color:var(--muted);transition:none}
.themes button:hover{transform:none;box-shadow:none;color:var(--ink)}
html:not(.warm) .themes [data-theme=mono],html.warm .themes [data-theme=warm]{background:var(--primary);color:#fff}
input{font:inherit;font-size:15px;padding:11px 13px;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:inherit;max-width:100%}
form.inline{display:inline-flex;gap:8px;margin:10px 8px 0 0;flex-wrap:wrap;align-items:center}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.crumbs{font-size:14px;color:var(--muted);margin:0 0 24px}
.crumbs a{color:var(--muted)}
dl{margin:16px 0}dt{font-weight:700;margin-top:20px}dd{margin:6px 0 0;overflow-wrap:anywhere;color:var(--muted)}
dd ul{margin:6px 0;padding-left:20px}dd li{margin:3px 0}
.spaces,.connections,.leave{border-top:1px solid var(--line);margin:44px 0 0;padding-top:6px}
.leave .add{justify-content:flex-start}
.connections td{overflow-wrap:anywhere}.connections small{display:block;margin-top:4px}
.connections td.row-actions{white-space:nowrap}
.connections td form.inline{margin:0 6px 0 0}.connections td button{padding:9px 15px}
.space-list{list-style:none;padding:0;margin:20px 0}
.space-list>li{margin:14px 0;padding:20px 22px;border:1px solid var(--line);border-radius:14px;background:var(--sunk);overflow-wrap:anywhere}
.role{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.5px;background:var(--bg);color:var(--accent);border:1px solid var(--line);border-radius:999px;padding:3px 10px;margin-left:8px;vertical-align:middle}
html.warm .role{font-family:Arial,Helvetica,sans-serif}

/* --- /docs: a main column with a sidebar, the nested data model, and the copyable endpoint. --- */
.lede{font-size:20px;line-height:1.6;color:var(--muted);max-width:52em;margin:0 0 8px}
.small{font-size:14px;line-height:1.55;color:var(--muted)}
/* /beta: the diluted aside in the heading, the bold words that open a sentence, and the sentence itself. */
h1 .dim{font-size:.5em;font-weight:400;color:var(--muted);opacity:.7;letter-spacing:0;margin-left:.2em}
.statement{max-width:52em;margin:0 0 34px}
.reveal{display:inline;padding:0;margin:0;border:0;border-radius:0;background:none;box-shadow:none;font:inherit;font-weight:700;color:var(--ink);cursor:pointer;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px;transition:none}
.reveal:hover,.reveal[aria-expanded=true]{transform:none;box-shadow:none;background:none;text-decoration-color:var(--accent)}
.reveal[aria-expanded=true]{color:var(--accent)}
.detail{font-size:16px;line-height:1.6;color:var(--muted);opacity:.85;margin:14px 0 0;padding-left:16px;border-left:3px solid var(--line)}
/* 24px is half of a one-row bar, so it reads as a pill; once the buttons wrap it stays a rounded box
   instead of a stadium the corner buttons poke out of. */
.tabs{display:inline-flex;flex-wrap:wrap;gap:3px;padding:4px;margin:30px 0 22px;
      border:1px solid var(--line);border-radius:24px;background:var(--sunk)}
.tabs button{background:none;border:0;border-radius:999px;padding:10px 19px;font-size:15px;color:var(--muted);white-space:normal;transition:none}
.tabs button:hover{transform:none;box-shadow:none;color:var(--ink)}
.tabs button[aria-selected=true]{background:var(--primary);color:#fff}
html.warm .tabs button{font-family:Arial,Helvetica,sans-serif}
/* /what-for: the uses as a two-column list of plain links, the chosen one bold with a marker, and the
   description below it in a frame. Shares theme.js's tab logic with .tabs, none of its pill styling. */
.topics.tabs{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:2px 28px;padding:0;
             margin:26px 0 22px;border:0;border-radius:0;background:none}
.topics.tabs button{display:block;align-self:start;text-align:left;padding:6px 0 6px 20px;border-radius:0;font-size:16px;line-height:1.4;
                    font-weight:400;color:var(--muted);position:relative}
.topics.tabs button::before{content:"";position:absolute;left:4px;top:.95em;width:6px;height:6px;border-radius:50%;
                            background:var(--line)}
.topics.tabs button:hover{color:var(--ink)}
.topics.tabs button[aria-selected=true]{background:none;color:var(--ink);font-weight:700}
.topics.tabs button[aria-selected=true]::before{background:var(--accent)}
.use-frame{position:relative;margin:26px 0 0}
.use-nav{position:absolute;top:18px;right:20px;z-index:1;display:flex;align-items:center;gap:10px;margin:0}
.use-nav button{padding:4px 13px;font-size:16px;line-height:1.3}
.use-count{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.use{border:1px solid var(--line);border-radius:18px;background:var(--sunk);padding:22px 26px 6px}
.use .panel-title{display:block;margin:0 0 18px;padding-right:150px;font-size:22px}
.use .more{margin:0 0 16px}.use .more a{font-weight:600}
.topics-title{font-size:22px;margin:38px 0 4px}
.use .trouble{max-width:none;margin:0 0 16px}
.ask{position:relative;margin:6px 0 16px;padding:14px 60px 14px 18px;border-left:3px solid var(--accent);background:var(--bg);
     border-radius:0 12px 12px 0;color:var(--ink);font-size:16px}
.ask strong{display:block;font-size:12px;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.ask p{margin:0}
.ask .prompt-copy{position:absolute;top:12px;right:12px;background:var(--paper)}
@media(max-width:700px){.topics.tabs{grid-template-columns:1fr;gap:0}.topics.tabs button{flex:none}
  .use-nav{position:static;justify-content:flex-end;margin:0 0 10px}.use .panel-title{padding-right:0}
  .use{padding:18px 18px 4px}}
/* /what-for/grill-me: the skill as a page, numbered rules with their ids in the margin colour. */
.skill-tag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
           color:var(--accent);margin:0 0 6px}
.human{border:1px solid var(--line);border-radius:14px;background:var(--sunk);padding:16px 20px;max-width:62em;
       font-size:15px;color:var(--muted)}
.rule{position:relative;max-width:62em;margin:0 0 12px;padding:10px 16px 10px 76px;border-left:3px solid var(--line);
      background:var(--sunk);border-radius:0 12px 12px 0}
.rule-id{position:absolute;left:16px;top:12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;
         font-weight:700;color:var(--spot)}
@media(max-width:700px){.rule{padding:34px 14px 10px 14px}.rule-id{left:14px;top:10px}}
.panel-title{display:none}
.panel-title+.scroll{margin-top:0}   /* the tab bar already spaces the panel from the picker */
.trouble{max-width:62em;margin:0 0 18px}
.nest{border:1px solid var(--line);border-radius:14px;padding:18px 20px;background:var(--sunk)}
.nest .nest{margin-top:16px}
.nest-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.nest-name{font-weight:700;margin:0}
html.warm .nest-name{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:19px}
.nest-what{margin:8px 0 0;max-width:62em}
.nest .nest .nest .nest-what{margin-bottom:0}
.endpoint{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
          border:1px solid var(--line);border-radius:12px;background:var(--bg);
          padding:9px 9px 9px 16px;max-width:34em;
          font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;overflow-wrap:anywhere}
.endpoint button{padding:9px 16px;font-size:14px}
.endpoint .prompt-copy{padding:9px;background:var(--paper)}
.trouble strong{color:var(--ink)}
.scroll{overflow-x:auto;margin:20px 0}
table{border-collapse:collapse;width:100%;font-size:15px}
td,th{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:12px;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);font-weight:700}
th a{color:var(--muted);text-decoration:none}th a.active{text-decoration:underline}
td.num,th.num{text-align:right;white-space:nowrap}
time{white-space:nowrap}
details{margin:10px 0;padding:14px 0;border-bottom:1px solid var(--line)}
summary{cursor:pointer;font-size:15px;color:var(--primary)}
.notice,.error{border:1px solid;border-radius:10px;padding:12px 15px;font-size:15px}
.notice{color:#14532d;background:#dcfce7;border-color:#bbf7d0}
.error{color:#7f1d1d;background:#fee2e2;border-color:#fecaca}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;background:var(--bg);padding:2px 6px;border-radius:6px;overflow-wrap:anywhere}
pre{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--bg);border:1px solid var(--line);padding:16px;border-radius:12px;font-size:13px;line-height:1.55}
footer{border-top:1px solid var(--line);color:var(--muted);font-size:13px}
footer .shell{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-top:24px;padding-bottom:24px}
footer a{color:var(--muted);text-decoration:none}footer a:hover{text-decoration:underline}
@media(max-width:900px){.page{margin:16px;border-radius:18px}
  header .shell{min-height:0;padding-top:18px;padding-bottom:18px}.app main{padding:26px var(--gutter) 60px}.tools{gap:14px}}
@media(max-width:600px){.page{margin:0;border-radius:0;border:0}.brand{font-size:20px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* --- Landing page: hero, artwork and the capability bar. --- */
.landing main{padding:0}
.hero{display:flex;align-items:center;gap:6%;flex-wrap:wrap;padding:40px var(--gutter) 80px}
.pitch{flex:1 1 420px;min-width:0}
.beside{flex:1 1 360px;min-width:0}
.byo{border:1px solid var(--line);border-radius:16px;background:var(--sunk);padding:24px 26px}
.byo+.byo{margin-top:18px}
.byo .step{color:var(--accent);margin-right:2px}
.brand-inline{font-weight:750;letter-spacing:-1px;white-space:nowrap}
html.warm .brand-inline{font-family:Arial,Helvetica,sans-serif}
.byo .ask{margin:0;font-size:15px;color:var(--ink)}
.byo .ask p{color:var(--ink);font-size:15px;margin:0}
.byo h2{margin:0 0 10px;font-size:22px}
.byo p{margin:0 0 16px;font-size:16px;color:var(--muted)}
.byo .endpoint{margin:0;max-width:none;font-size:13px}
.hero h1{font-size:clamp(46px,5.3vw,76px);line-height:1.06;letter-spacing:-3px;font-weight:650;margin:0 0 26px}
html.warm .hero h1{font-size:clamp(48px,5.6vw,82px);line-height:.98;letter-spacing:-3px;font-weight:400}
.hero h1 em{font-style:normal;color:var(--accent)}
.lead{font-size:20px;line-height:1.65;margin:0 0 36px;max-width:560px;color:var(--ink)}
.actions{display:flex;gap:16px;flex-wrap:wrap}
.features{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:38px var(--gutter) 46px;border-top:1px solid var(--line)}
.feature{text-align:center;font-size:16px}
.feature svg{display:block;width:38px;height:38px;margin:0 auto 16px;color:var(--accent)}
@media(max-width:1000px){.page{--gutter:5%}.hero{padding:34px var(--gutter) 60px;gap:40px}.lead{font-size:18px}.feature{font-size:14px}}
@media(max-width:700px){.page{--gutter:7%}.hero{padding:34px var(--gutter) 44px;gap:32px}.hero h1,html.warm .hero h1{font-size:48px;letter-spacing:-2px}html.warm .hero h1{font-size:58px}.lead{font-size:17px}.lead br{display:none}.features{grid-template-columns:repeat(2,1fr);gap:30px;padding:28px var(--gutter) 38px}.feature svg{width:32px;height:32px;margin-bottom:12px}}

/* --- The Markdown reader on agntpad.page: file tree beside one rendered File. --- */
.crossref{font-size:17px;margin:-20px 0 34px;color:var(--muted)}
.crossref a{color:var(--primary)}
.pane{display:grid;grid-template-columns:minmax(200px,260px) minmax(0,1fr);gap:34px;align-items:start;margin-top:8px}
.filetree{position:sticky;top:20px;border:1px solid var(--line);border-radius:14px;background:var(--sunk);padding:16px 18px;font-size:14px}
.filetree>summary{display:none;cursor:pointer;padding:4px 0;font-weight:600;color:var(--ink);list-style-position:outside}
.filetree>summary:hover{color:var(--accent)}
.filetree .folder{margin:0 0 10px}
.filetree .folder-name{display:inline-block;padding:4px 0;font-weight:600;color:var(--ink);text-decoration:none;overflow-wrap:anywhere}
.filetree .folder-name:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.filetree .folder-name.current{color:var(--accent)}
.filetree p{margin:4px 0}
ul.tree{list-style:none;margin:2px 0 6px;padding-left:14px;border-left:1px solid var(--line)}
ul.tree li{margin:2px 0}
ul.tree .dir{display:block;padding:2px 0;color:var(--ink);font-weight:600;overflow-wrap:anywhere}
ul.tree a{display:block;padding:2px 0;color:var(--muted);text-decoration:none;overflow-wrap:anywhere}
ul.tree a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
ul.tree a.current{color:var(--ink);font-weight:700}
.doc{min-width:0}
.doc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap}
.doc-head h1{font-size:clamp(24px,2.4vw,32px);overflow-wrap:anywhere;margin-bottom:10px}
.doc-actions{display:flex;gap:10px;flex-shrink:0}
.doc-actions button{padding:9px 15px;font-size:14px}
.rendered{margin-top:22px;overflow-wrap:anywhere}
.rendered h1{font-size:clamp(26px,2.6vw,34px);margin:34px 0 14px}
.rendered h2{margin:34px 0 12px}
.rendered img{max-width:100%;height:auto}
.rendered table{margin:18px 0;display:block;overflow-x:auto}
.rendered th,.rendered td{border:1px solid var(--line);padding:8px 12px;text-align:left}
.rendered blockquote{margin:18px 0;padding:2px 0 2px 18px;border-left:3px solid var(--line);color:var(--muted)}
.rendered hr{border:0;border-top:1px solid var(--line);margin:30px 0}
.rendered li{margin:4px 0}
.rendered pre.code{white-space:pre;overflow-x:auto;overflow-wrap:normal}
.rendered pre.mermaid{background:none;border:0;padding:0;text-align:center}
.source{margin-top:22px;max-height:none}
@media(max-width:820px){.pane{grid-template-columns:1fr;gap:20px}
  .filetree{position:static}.filetree>summary{display:list-item;font-size:15px}}

/* Syntax colours are the page's own palette, so code follows the Mono/Warm switch like everything else. */
.hljs-comment,.hljs-quote{color:var(--muted);font-style:italic}
.hljs-keyword,.hljs-selector-tag,.hljs-literal,.hljs-doctag,.hljs-section,.hljs-name{color:var(--accent);font-weight:600}
.hljs-string,.hljs-attr,.hljs-symbol,.hljs-bullet,.hljs-addition,.hljs-meta{color:var(--spot)}
.hljs-number,.hljs-built_in,.hljs-type,.hljs-title,.hljs-attribute{color:var(--primary)}
.hljs-variable,.hljs-template-variable,.hljs-selector-id,.hljs-selector-class{color:var(--ink)}
.hljs-deletion{color:var(--muted);text-decoration:line-through}
.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}

/* --- The panel: account bar, Space cards, modals and the prompt window. --- */
.tools{flex-direction:column;align-items:flex-end;gap:11px}
.tools-row{display:flex;align-items:center;gap:20px}
.account{display:flex;align-items:center;gap:14px}
.account .who{display:flex;flex-direction:column;text-align:right;line-height:1.3;min-width:0;overflow-wrap:anywhere}
.account .who strong{font-size:14px;font-weight:650}
.account .who small{font-size:12px}
.account button,.account .button{padding:7px 14px;font-size:13px}
.account form{margin:0}

.spaces td{overflow-wrap:anywhere}
.spaces td:first-child{width:40%}
.spaces td.empty{color:var(--muted)}
td.row-actions{white-space:nowrap;text-align:right}
td.row-actions button,td.row-actions .button{padding:7px 12px;font-size:13px;margin-left:6px}
.add{display:flex;align-items:center;justify-content:flex-end;gap:14px;flex-wrap:wrap;margin:16px 0 0}
.section-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.section-head h2{margin-bottom:0}
.section-head .small{margin:0}
.pager{display:flex;align-items:center;justify-content:center;gap:18px;margin:22px 0 0}
.pager .button{padding:8px 15px;font-size:14px}
.add .plus{font-size:19px;line-height:1;font-weight:400}

/* One message at a time, out of the way of the content, and closable with or without JavaScript. */
.toast{position:fixed;right:22px;bottom:22px;z-index:30;display:flex;align-items:center;gap:16px;
       max-width:min(430px,calc(100% - 44px));box-shadow:0 14px 44px #18233a2e;
       transition:opacity .35s,transform .35s}
.toast.gone{opacity:0;transform:translateY(10px);pointer-events:none}
.toast-close{font-size:21px;line-height:1;text-decoration:none;color:inherit;opacity:.65}
.toast-close:hover{opacity:1}
main a.toast-close{color:inherit;text-decoration:none}
@media(max-width:600px){.toast{left:16px;right:16px;bottom:16px;max-width:none}}

dialog.modal{padding:0;border:1px solid var(--line);border-radius:16px;background:var(--paper);color:var(--ink);
             width:min(500px,calc(100% - 32px));box-shadow:0 26px 80px #18233a33}
dialog.modal.wide{width:min(620px,calc(100% - 32px))}
dialog::backdrop{background:#0f172a5e}
.modal-body{padding:26px 28px 0}
.modal-body h2{margin:0 0 18px;font-size:20px;letter-spacing:-.4px;overflow-wrap:anywhere}
.modal-body>p{margin:0 0 18px;font-size:15px;line-height:1.55}
.modal-body>p.small{margin:-8px 0 20px}

/* Label, control and the line that explains it move as one block. */
.field{margin:0 0 20px;border:0;padding:0}
.field label{display:block;font-size:13px;font-weight:650;letter-spacing:.2px;margin:0 0 7px}
.field input:not([type=radio]){width:100%}
.field .small{margin:9px 0 0;font-size:13px}
.field.modes legend{padding:0;margin:0 0 4px;font-size:13px;font-weight:650;letter-spacing:.2px}
.field.modes label{display:flex;gap:9px;align-items:flex-start;margin:9px 0 0;font-size:15px;font-weight:400;letter-spacing:0}
.field.modes input{margin:4px 0 0;flex:0 0 auto}

/* A footer bar the width of the dialog, primary action last. */
.modal-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;
               margin:4px -28px 0;padding:16px 28px;border-top:1px solid var(--line);
               background:var(--sunk);border-radius:0 0 15px 15px}
.modal button{padding:9px 17px;font-size:14px;border-radius:9px;font-weight:600;white-space:normal}
.modal button:hover{transform:none;box-shadow:none}
.modal button.secondary:hover{background:var(--bg);border-color:var(--accent)}
.modal button.danger:hover{background:#8f1e18}

.writer-add{display:flex;gap:10px;margin:0 0 14px}
.writer-add input{flex:1 1 auto;min-width:0}
.writer-filter{width:100%;margin:0 0 10px}
.writer-list{list-style:none;margin:0 0 20px;padding:0;max-height:42vh;overflow-y:auto;
             border:1px solid var(--line);border-radius:11px;background:var(--bg)}
.writer-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 13px;border-bottom:1px solid var(--line)}
.writer-list li:last-child{border-bottom:0}
.writer-list .who{display:flex;flex-direction:column;min-width:0;line-height:1.35}
.writer-list .who strong{font-size:15px;font-weight:650;overflow-wrap:anywhere}
.writer-list .who small{font-size:12px;overflow-wrap:anywhere}
.writer-list form{margin:0}
.writer-list button{padding:6px 12px;font-size:13px}

.prompts{border:1px solid var(--line);border-radius:18px;background:var(--sunk);padding:20px 24px;margin:34px 0 0}
.prompt-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.prompt-head h2{margin:0;font-size:20px}
.prompt-tools{display:flex;align-items:center;gap:12px}
.prompt-copy{background:none;border:1px solid var(--line);border-radius:10px;padding:9px;color:var(--ink)}
.prompt-copy:hover{transform:none;box-shadow:none;border-color:var(--accent);background:var(--paper)}
.prompt-copy svg{display:block;width:19px;height:19px}
.prompt-copy .tick,.prompt-copy[data-copied] .sheets{display:none}
.prompt-copy[data-copied]{color:var(--accent);border-color:var(--accent)}
.prompt-copy[data-copied] .tick{display:block}
.prompt-list{list-style:none;margin:12px 0 0;padding:0;min-height:3.2em}
.prompt-list li{font-size:18px;line-height:1.55;margin:0 0 10px;color:var(--ink)}
.prompt-nav{display:flex;align-items:center;gap:10px;margin:0}
.prompt-nav button{padding:4px 13px;font-size:16px;line-height:1.3}
.prompt-count{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}

/* Phones: the header stacks and every row of it ends at the same right edge, tab bars fill the width,
   and the tables that carry buttons become one card per row. Column names return as inline labels. */
@media(max-width:700px){.tools{align-items:stretch;width:100%}
  .tools-row{justify-content:space-between;gap:14px}.tools-row .themes{margin-left:auto}
  .themes button{padding:7px 12px}
  .account{justify-content:space-between}.account .who{text-align:left}
  .account button,.account .button{padding:10px 16px}   /* the same height as the theme switch above it */
  .tabs{display:flex}.tabs button{flex:1 1 auto}
  .add{justify-content:space-between}.prompt-list li{font-size:17px}
  .nest{padding:14px}
  .modal-body{padding:22px 20px 0}
  .modal-actions{margin:4px -20px 0;padding:14px 20px;flex-wrap:wrap}.modal-actions button{flex:1 1 auto}
  table.cards,table.cards tbody,table.cards tr,table.cards td{display:block}
  table.cards tr:first-child{display:none}
  table.cards tr{border:1px solid var(--line);border-radius:14px;background:var(--sunk);padding:14px 16px;margin:0 0 12px}
  table.cards td,table.cards td:first-child{padding:3px 0;border:0;width:auto;text-align:left;white-space:normal}
  table.cards td[data-label]::before{content:attr(data-label);display:inline-block;min-width:6.5em;margin-right:8px;
    font-size:12px;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);font-weight:700}
  table.cards td.row-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
  table.cards td.row-actions button,table.cards td.row-actions .button,.connections table.cards td form.inline{margin:0}}

/* --- Search on agntpad.page: the form, its scope picker, and the hits. --- */
.search{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:22px 0 8px}
.search input[type=search]{flex:1 1 300px;min-width:0}
.search button{padding:11px 20px;font-size:15px}
.scopes{display:inline-flex;flex-wrap:wrap;gap:3px;padding:4px;border:1px solid var(--line);border-radius:22px;background:var(--sunk)}
.scopes label{display:inline-flex}
.scopes span{border-radius:999px;padding:8px 15px;font-size:14px;font-weight:600;color:var(--muted);
             cursor:pointer;white-space:nowrap;line-height:1.2}
.scopes label:hover span{color:var(--ink)}
.scopes input:checked+span{background:var(--primary);color:#fff}
.scopes input:focus-visible+span{outline:2px solid var(--accent);outline-offset:1px}
/* The radio still takes focus and still submits; only its own box is out of the way. Selection is drawn
   from :checked rather than a class, so exactly one pill is ever lit and it lights on click. */
.scopes input{position:absolute;width:1px;height:1px;opacity:0;margin:0}
.hits td:first-child{width:36%}
.hits td small{display:block;margin-top:3px}
.hit-text{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;line-height:1.5;
          color:var(--muted);overflow-wrap:anywhere}
@media(max-width:700px){.search{gap:10px}.search input[type=search]{flex:1 1 100%}.search button{flex:1 1 auto}.hits td:first-child{width:auto}}