/* rspcrm — palette lifted from the rspeds.com Kadence globals */
:root{
  --p1:#2B6CB0; --p2:#215387; --p3:#1A202C; --p4:#2D3748; --p5:#4A5568;
  --p6:#718096; --p7:#EDF2F7; --p8:#F7FAFC; --p9:#fff;
  --ok:#2F855A; --warn:#C05621; --bad:#C53030;
  --bg:var(--p8); --card:var(--p9); --line:#E2E8F0; --ink:var(--p3); --muted:var(--p6);
  --radius:12px; --shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.1);
}
[data-theme="dark"]{
  --bg:#0F141B; --card:#161C26; --line:#26303D; --ink:#E6EDF5; --muted:#8A97A8;
  --p7:#1D2430; --p8:#0F141B;
  --shadow:0 1px 2px rgba(0,0,0,.4);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink); font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--p1);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1360px;margin:0 auto;padding:0 24px}

/* ---------- top bar ---------- */
.top{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.top .wrap{display:flex;align-items:center;gap:20px;height:60px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16px;color:var(--ink)}
.brand:hover{text-decoration:none}
.brand .mark{width:30px;height:30px;border-radius:8px;background:var(--p1);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:800;letter-spacing:.02em}
nav.main{display:flex;gap:2px;margin-left:8px;flex:1}
nav.main a{padding:8px 14px;border-radius:999px;color:var(--p5);font-weight:500;font-size:14px}
nav.main a:hover{background:var(--p7);text-decoration:none}
nav.main a.on{background:var(--p1);color:#fff}
.top .right{display:flex;align-items:center;gap:10px}
.iconbtn{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:var(--card);color:var(--p5);display:grid;place-items:center;cursor:pointer;font-size:15px}
.iconbtn:hover{background:var(--p7)}
.who{font-size:13px;color:var(--muted)}
.who b{color:var(--ink);font-weight:600}

/* ---------- search ---------- */
.searchbox{position:relative;width:300px}
.searchbox input{width:100%;padding:8px 12px 8px 34px;border:1px solid var(--line);border-radius:9px;background:var(--bg);color:var(--ink);font-size:14px}
.searchbox input:focus{outline:2px solid var(--p1);outline-offset:-1px;background:var(--card)}
.searchbox .mag{position:absolute;left:11px;top:9px;color:var(--muted);font-size:13px}
.results{position:absolute;top:42px;left:0;right:0;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);overflow:hidden;display:none;max-height:70vh;overflow-y:auto}
.results.show{display:block}
.results a{display:block;padding:9px 14px;border-bottom:1px solid var(--line);color:var(--ink)}
.results a:last-child{border-bottom:0}
.results a:hover{background:var(--p7);text-decoration:none}
.results .t{font-weight:600;font-size:14px}
.results .s{font-size:12px;color:var(--muted)}
.results .kind{float:right;font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding-top:3px}

/* ---------- layout ---------- */
main{padding:26px 0 60px}
h1{font-size:26px;margin:0 0 4px;letter-spacing:-.02em}
.sub{color:var(--muted);font-size:14px;margin:0 0 22px}
.grid{display:grid;gap:16px}
.cards{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.card h3{margin:0 0 2px;font-size:13px;font-weight:600;color:var(--muted);letter-spacing:.01em}
.card .big{font-size:32px;font-weight:700;letter-spacing:-.03em;line-height:1.1}
.card .note{font-size:12px;color:var(--muted);margin-top:4px}
.card .note.good{color:var(--ok)}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.panel > header{padding:15px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}
.panel > header h2{margin:0;font-size:15px;font-weight:650}
.panel > header .sub{margin:0;font-size:12px}
.panel .body{padding:18px}
.two{grid-template-columns:1.35fr 1fr}
@media(max-width:1000px){.two{grid-template-columns:1fr}}

/* ---------- table ---------- */
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600;padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--p7)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.name{font-weight:600}
.dim{color:var(--muted);font-size:13px}

/* ---------- bits ---------- */
.pill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:600;background:var(--p7);color:var(--p5);white-space:nowrap}
.pill.target{background:#E6F4EA;color:var(--ok)}
.pill.over{background:#FEF0E6;color:var(--warn)}
.pill.t1{background:#E8F0FB;color:var(--p1)}
.bar{height:7px;border-radius:99px;background:var(--p7);overflow:hidden}
.bar > i{display:block;height:100%;background:var(--p1)}
.bar > i.target{background:var(--ok)}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
select,.btn{padding:8px 12px;border:1px solid var(--line);border-radius:9px;background:var(--card);color:var(--ink);font-size:13px;font-family:inherit}
select:focus{outline:2px solid var(--p1);outline-offset:-1px}
.btn{cursor:pointer;font-weight:600}
.btn.primary{background:var(--p1);color:#fff;border-color:var(--p1)}
.btn.primary:hover{background:var(--p2)}
.pager{display:flex;gap:6px;align-items:center;justify-content:center;padding:16px}
.pager a,.pager span{padding:6px 11px;border-radius:8px;font-size:13px;border:1px solid var(--line)}
.pager .on{background:var(--p1);color:#fff;border-color:var(--p1)}
.empty{text-align:center;padding:56px 20px;color:var(--muted)}
.empty .mark{font-size:34px;margin-bottom:10px;opacity:.5}

/* ---------- note bodies ---------- */
.note-body{font-size:14px;line-height:1.6}
.note-body blockquote{margin:0 0 12px;padding:10px 14px;background:var(--p7);border-radius:8px;font-style:normal}
.note-body blockquote p{margin:0}
.note-body ul{margin:0 0 12px;padding-left:20px}
.note-body p{margin:0 0 10px}

/* ---------- login ---------- */
.loginwrap{min-height:100vh;display:grid;place-items:center;padding:24px}
.loginbox{width:100%;max-width:380px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:30px;box-shadow:var(--shadow)}
.loginbox h1{font-size:21px;margin:14px 0 4px}
.field{margin-bottom:13px}
.field label{display:block;font-size:13px;font-weight:600;margin-bottom:5px}
.field input{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:9px;font-size:15px;background:var(--bg);color:var(--ink)}
.field input:focus{outline:2px solid var(--p1);outline-offset:-1px;background:var(--card)}
.err{background:#FEE;border:1px solid #FBB;color:var(--bad);padding:10px 12px;border-radius:9px;font-size:13px;margin-bottom:14px}
[data-theme="dark"] .err{background:#2A1416;border-color:#5B2226;color:#F3A3A3}
.btn.wide{width:100%;padding:11px;font-size:15px}

/* ---------- dock ---------- */
.dock{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:8px;align-items:flex-end;z-index:30}
.dock a{background:var(--p1);color:#fff;padding:8px 14px;border-radius:999px;font-size:13px;font-weight:600;box-shadow:var(--shadow);display:flex;gap:8px;align-items:center}
.dock a:hover{background:var(--p2);text-decoration:none}
.dock kbd{background:rgba(255,255,255,.22);border-radius:5px;padding:1px 5px;font-size:10px;font-family:inherit}

/* ---------- tooltips: every control explains itself ----------
   The bubble is one shared element on <body>, positioned by app.js. It used to
   be a ::after on the tipped element itself, which meant every panel and table
   with overflow:hidden sliced it in half. Fixed positioning on <body> cannot be
   clipped by anything, and the script clamps it inside the viewport. */
[data-tip]{position:relative}
.tip{
  position:fixed;z-index:9999;left:0;top:0;
  background:var(--p3);color:#fff;padding:7px 10px;border-radius:8px;
  font-size:12px;font-weight:450;line-height:1.45;max-width:280px;
  box-shadow:0 8px 22px rgba(16,24,40,.26);pointer-events:none;text-align:left;
  text-decoration:none;opacity:0;visibility:hidden;transition:opacity .09s ease
}
.tip.on{opacity:1;visibility:visible}
.tip::after{
  content:'';position:absolute;left:var(--arrow,50%);transform:translateX(-50%);
  top:-10px;border:5px solid transparent;border-bottom-color:var(--p3)
}
.tip.above::after{top:auto;bottom:-10px;border-bottom-color:transparent;border-top-color:var(--p3)}
[data-theme="dark"] .tip{background:#2B3442}
[data-theme="dark"] .tip::after{border-bottom-color:#2B3442}
[data-theme="dark"] .tip.above::after{border-bottom-color:transparent;border-top-color:#2B3442}

/* ---------- tooltip affordance ----------
   A tooltip nobody can see is a tooltip nobody reads. Every tipped thing now
   advertises itself: text gets a dotted underline, controls that cannot carry
   one get a small ⓘ. The tooltip itself already owns ::after and ::before, so
   the ⓘ is a background image rather than a third pseudo-element. */
:root{--tipline:#94A3B8}
[data-theme="dark"]{--tipline:#5F6D7E}

[data-tip]{
  text-decoration-line:underline;
  text-decoration-style:dotted;
  text-decoration-color:var(--tipline);
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}
[data-tip]:hover{text-decoration-color:var(--p1)}

/* Boxes cannot carry a readable underline — it would decorate their children.
   Roomy ones take the ⓘ; tight ones take a dotted bottom edge. */
[data-tip]:is(div,fieldset,form,header,select,input,textarea,button,.btn,.iconbtn,.opt,.progress,.quote,.qenrol,.qfee){
  text-decoration:none;
}
[data-tip]:is(div,fieldset,header,button,.btn,.iconbtn,.opt,.progress):not(.quote,.qenrol,.qfee){
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='%2394A3B8'/%3E%3Crect x='7.1' y='6.5' width='1.8' height='5.1' rx='.9' fill='%23fff'/%3E%3Ccircle cx='8' cy='4.2' r='1.05' fill='%23fff'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 5px top 5px;
  background-size:10px 10px;
}
[data-theme="dark"] [data-tip]:is(div,fieldset,header,button,.btn,.iconbtn,.opt,.progress):not(.quote,.qenrol,.qfee){
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='%236F7D8E'/%3E%3Crect x='7.1' y='6.5' width='1.8' height='5.1' rx='.9' fill='%23161C26'/%3E%3Ccircle cx='8' cy='4.2' r='1.05' fill='%23161C26'/%3E%3C/svg%3E");
}
/* Room for the ⓘ so it never sits on top of a word. */
.opt[data-tip]{background-position:right 5px top 4px}
.opt[data-tip] span{padding-right:23px}
.btn[data-tip],button[data-tip]{padding-right:24px}
.iconbtn[data-tip]{background-position:right 2px top 2px;background-size:8px 8px}

/* Tight boxes: a dotted edge instead, which cannot collide with anything. */
[data-tip]:is(select,input,textarea,.quote,.qenrol,.qfee){border-bottom:2px dotted var(--tipline)}

/* The active nav item sits on a filled pill, so grey would disappear on it. */
.main a.on[data-tip]{text-decoration-color:rgba(255,255,255,.6)}

/* ---------- page heads ---------- */
.pagehead{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:20px;flex-wrap:wrap}
.pagehead .sub{margin:0}
.back{display:inline-block;font-size:13px;color:var(--muted);margin-bottom:10px}
.ok{color:var(--ok)}
.pill.warn{background:#FEF0E6;color:var(--warn)}
[data-theme="dark"] .pill.target{background:#14301F;color:#6BCF97}
[data-theme="dark"] .pill.warn{background:#2E2013;color:#E9A46A}
[data-theme="dark"] .pill.t1{background:#152234;color:#7FB0EF}
.btn.small{padding:5px 11px;font-size:12px}

/* ---------- today ---------- */
.progress{display:flex;align-items:center;gap:16px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 18px;box-shadow:var(--shadow)}
.ring{--pct:0;width:74px;height:74px;border-radius:50%;display:grid;place-items:center;text-align:center;
  background:conic-gradient(var(--p1) calc(var(--pct)*1%),var(--p7) 0)}
.ring::before{content:'';position:absolute;width:58px;height:58px;border-radius:50%;background:var(--card)}
.ring b,.ring span{position:relative;z-index:1;display:block}
.ring b{font-size:20px;font-weight:700;line-height:1}
.ring span{font-size:10px;color:var(--muted)}
.progress-detail{font-size:13px;color:var(--muted)}
.progress-detail b{color:var(--ink);font-size:15px}

.queue{display:flex;flex-direction:column;gap:8px}
.qrow{display:flex;align-items:center;gap:18px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:14px 18px;box-shadow:var(--shadow);color:var(--ink)}
.qrow:hover{text-decoration:none;border-color:var(--p1);transform:translateY(-1px);transition:.12s}
.qmain{flex:1;min-width:0}
.qname{font-weight:650;font-size:15px}
.qmeta{font-size:12.5px;color:var(--muted);margin-top:2px}
.qnums{display:flex;gap:22px;text-align:right}
.qnums b{display:block;font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.2}
.qnums span{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.qfee b{color:var(--p1)}
.qstate{display:flex;flex-direction:column;gap:4px;align-items:flex-end;min-width:110px}
.qgo{font-weight:650;color:var(--p1);font-size:14px;white-space:nowrap}
@media(max-width:820px){.qnums,.qstate{display:none}}

/* ---------- call screen ---------- */
.callhead{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:18px;flex-wrap:wrap}
.dial{display:flex;align-items:center;gap:14px}
.dialbtn{background:var(--p1);color:#fff;padding:11px 20px;border-radius:11px;font-size:19px;font-weight:700;
  letter-spacing:.01em;font-variant-numeric:tabular-nums;box-shadow:var(--shadow)}
.dialbtn:hover{background:var(--p2);text-decoration:none}
.quote{text-align:right}
.quote b{display:block;font-size:22px;font-weight:700;color:var(--p1);line-height:1.1}
.quote span{font-size:11px;color:var(--muted)}

.logger fieldset{border:0;padding:0;margin:0 0 16px}
.logger legend{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:7px;padding:0}
.opts{display:flex;flex-wrap:wrap;gap:6px}
.opt{position:relative}
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt span{display:block;padding:7px 13px;border:1.5px solid var(--line);border-radius:9px;font-size:13px;
  font-weight:550;cursor:pointer;background:var(--card);transition:.1s}
.opt span:hover{border-color:var(--p6)}
.opt input:checked + span{background:var(--p1);border-color:var(--p1);color:#fff}
.opt.good input:checked + span{background:var(--ok);border-color:var(--ok)}
.opt.warn input:checked + span{background:var(--warn);border-color:var(--warn)}
.opt.bad  input:checked + span{background:var(--bad);border-color:var(--bad)}
.opt input:focus-visible + span{outline:2px solid var(--p1);outline-offset:2px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.logger .field{margin-bottom:14px}
.logger .field label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);display:block;margin-bottom:5px}
.logger .field label .dim{text-transform:none;letter-spacing:0;font-weight:400}
.logger input,.logger textarea{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:9px;
  background:var(--bg);color:var(--ink);font:inherit;font-size:14px}
.logger input:focus,.logger textarea:focus{outline:2px solid var(--p1);outline-offset:-1px;background:var(--card)}
.loggeractions{display:flex;gap:8px;align-items:center;margin-top:4px}
.loggeractions .btn.wide{flex:1;width:auto}

.history .hrow{padding:10px 0;border-bottom:1px solid var(--line)}
.history .hrow:last-child{border-bottom:0}
.hwhen{font-size:11.5px;color:var(--muted)}
.hwhat{display:flex;gap:5px;margin:4px 0}
.hnote{font-size:13px;color:var(--p5)}

/* ---------- school detail ---------- */
.person{display:flex;gap:11px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--line)}
.person:last-child{border-bottom:0}
.av{width:34px;height:34px;border-radius:50%;background:var(--p7);color:var(--p5);display:grid;place-items:center;
  font-size:12px;font-weight:700;flex-shrink:0}
.deflist > div{display:flex;justify-content:space-between;gap:16px;padding:7px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.deflist > div:last-child{border-bottom:0}
.deflist dt{color:var(--muted);margin:0}
.deflist dd{margin:0;text-align:right;font-weight:550}

/* ---------- pipeline ---------- */
.board{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.col{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.col header{padding:12px 14px;border-bottom:1px solid var(--line);font-size:13px;font-weight:650;display:flex;align-items:center;gap:7px}
.col header b{margin-left:auto;color:var(--muted)}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.colbody{padding:14px;min-height:90px}

/* ---------- filters ---------- */
.fsearch{padding:8px 12px;border:1px solid var(--line);border-radius:9px;background:var(--card);color:var(--ink);font-size:13px;min-width:250px;font-family:inherit}
.fsearch:focus{outline:2px solid var(--p1);outline-offset:-1px}

/* ---------- notes written with inline light-mode colours ----------
   Every call script carries hardcoded background colours from when these were
   generated for WordPress. Inline styles beat stylesheets, so dark mode needs
   !important to reach them. This covers all 6,306 existing notes without
   rewriting any of them. */
[data-theme="dark"] .note-body [style]{
  background-color: rgba(255,255,255,.055) !important;
  background-image: none !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
[data-theme="dark"] .note-body [style] *{ color: var(--ink) !important; }
[data-theme="dark"] .note-body [style*="border-left"]{
  border-left-color: #7C83F5 !important;
}
[data-theme="dark"] .note-body a{ color: #7FB0EF !important; }

/* the same blocks in light mode, kept legible if a note ever omits a colour */
.note-body [style]{ color: var(--ink); }

.playbooklink{padding:7px 13px;border:1px solid var(--line);border-radius:9px;font-size:13px;
  font-weight:600;color:var(--p5);white-space:nowrap}
.playbooklink:hover{background:var(--p7);text-decoration:none;color:var(--ink)}

/* ---------- split sign-in ----------
   Two columns on a wide screen, stacked on a phone where a side panel would
   just push the form below the fold. */
body.split{margin:0;background:var(--bg)}
.splitwrap{min-height:100vh;display:grid;grid-template-columns:minmax(0,44fr) minmax(0,56fr)}

.splitside{
  background:var(--p1);color:#fff;padding:38px 42px;
  display:flex;flex-direction:column;justify-content:space-between;gap:36px
}
.sidetop{display:flex;align-items:center;gap:11px}
.sidemark{
  width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.16);
  display:grid;place-items:center;font-weight:800;font-size:13px;color:#fff
}
.sidename{font-weight:650;font-size:15px}
.sidemid h2{font-size:29px;line-height:1.28;font-weight:700;margin:0 0 14px;max-width:15ch}
.sidestat{font-size:15px;line-height:1.65;color:rgba(255,255,255,.82);margin:0;max-width:34ch}
.sidefoot{font-size:12.5px;color:rgba(255,255,255,.6);margin:0}

.splitmain{display:grid;place-items:center;padding:32px 24px;background:var(--bg)}
.splitform{width:100%;max-width:360px}
.splitform h1{font-size:23px;margin:0 0 5px}
.splitform .sub{margin:0 0 22px}
.splitform .btn.wide{margin-top:6px}

/* "Forgot your password?" rides on the password label so it never collides
   with the field or adds another row. */
.field label{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.flink{font-size:12.5px;font-weight:500;color:var(--p1);text-decoration:none}
.flink:hover{text-decoration:underline}

.explain{font-size:13px;line-height:1.65;color:var(--muted);margin:16px 0 0}
.hint{font-size:12px;color:var(--muted);margin:6px 0 0}

.linkbox{margin-bottom:18px;border-color:var(--warn)}
.linkfield{
  width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:9px;
  background:var(--bg);color:var(--ink);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12.5px
}

@media (max-width:820px){
  .splitwrap{grid-template-columns:1fr;min-height:100dvh}
  .splitside{padding:26px 24px 30px;gap:18px}
  .sidemid h2{font-size:21px;max-width:none}
  .sidefoot{display:none}
  .splitmain{padding:26px 24px 48px;align-items:start}
}

/* .btn is used on <a> as well as <button>; anchors need this to match. */
a.btn{display:inline-block;text-align:center;text-decoration:none}
a.btn:hover{text-decoration:none;background:var(--p7)}
a.btn.wide{display:block}

/* ---------- website line on a school ---------- */
.sitebar{display:flex;align-items:center;gap:10px;margin:-8px 0 18px;font-size:14px}
.sitebar a{font-weight:500}

/* ---------- inline editing ----------
   Editing is folded away behind a summary so the record still reads as a
   record. Someone working the phone should not be looking at a form. */
.editable summary,.addbox summary{cursor:pointer;list-style:none}
.editable summary::-webkit-details-marker,.addbox summary::-webkit-details-marker{display:none}
.editable summary{display:flex;gap:11px;align-items:flex-start}
.editable[open] summary{margin-bottom:10px}
.addbox{margin-top:10px}
.addbox summary{font-size:13px;font-weight:600;color:var(--p1);padding:6px 0}
.addbox summary:hover{text-decoration:underline}

.inlineform{display:flex;flex-direction:column;gap:8px;padding:10px 0 4px}
.inlineform input,.inlineform select{
  width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:8px;
  background:var(--bg);color:var(--ink);font-size:13.5px;font-family:inherit
}
.inlineform input:focus,.inlineform select:focus{outline:2px solid var(--p1);outline-offset:-1px;background:var(--card)}
.inlineform .row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.inlineform .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600;margin-top:2px}
.btn.small{padding:5px 10px;font-size:12px}