/* ============================================================
   Sly Santa v2 — "Soft Toy" design system
   Playful claymorphism: candy palette, big rounded shapes,
   springy shadows. Shared by every reskinned screen.
   Fonts (Fredoka + Nunito) are linked in base/main.html.
   ============================================================ */

:root{
  --cream:#FFF7EE; --cream-d:#FCEBD8; --ink:#3A2A2A; --ink-soft:#7a6a64;
  /* Bright tokens are for FILLS (avatars, chips, dots, logo). The -d / -ink
     shades are darkened to meet WCAG AA (>=4.5:1) when used as TEXT, and they
     double as the springy button/card shadows. */
  --berry:#FF5A6E; --berry-d:#BE2E41;
  --mint:#2FD0A6; --mint-d:#107B60;
  --sun:#FFC94D; --sun-d:#89630D;
  --sky:#7CC4FF; --sky-ink:#497496; --grape:#9B7BE8; --grape-d:#7a5fc0;
  --apricot:#E6886B; --teal:#2E8479; --plum:#9B5E86;
  /* AA button surfaces (white label >=4.5:1) + their darker shadow */
  --berry-btn:#E11D48; --berry-btn-d:#B3163A; --mint-btn:#1E856A;
  --shadow:0 8px 0 rgba(58,42,42,.08);
  --r:26px; --r-sm:16px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:'Nunito',sans-serif; color:var(--ink);
  background:var(--cream);
  background-image:
    radial-gradient(circle at 90% 3%,rgba(255,201,77,.16),transparent 22%),
    radial-gradient(circle at 5% 26%,rgba(124,196,255,.14),transparent 24%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased; line-height:1.55; min-height:100vh;
}
h1,h2,h3,h4,.fred{font-family:'Fredoka',sans-serif; line-height:1.1; letter-spacing:-.01em; margin:0}
a{color:var(--berry-d)}
img{max-width:100%}
.wrap{max-width:1080px; margin:0 auto; padding:0 22px}
.narrow{max-width:560px; margin:0 auto}
.center{text-align:center}
.muted-note{font-weight:700; color:var(--ink-soft); font-size:14px}
.stack>*+*{margin-top:18px}

/* ---------- floating confetti dots ---------- */
.dot{position:fixed; border-radius:50%; z-index:0; opacity:.45; animation:bob 6s ease-in-out infinite; pointer-events:none}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}

/* ---------- top bar ---------- */
.sb-bar{position:sticky; top:0; z-index:40; background:rgba(255,247,238,.9); backdrop-filter:blur(10px); border-bottom:3px solid var(--cream-d)}
.sb-bar .wrap{display:flex; align-items:center; justify-content:space-between; padding:12px 22px; gap:14px}
.sb-logo{font-family:'Fredoka'; font-weight:700; font-size:22px; color:var(--berry); display:flex; gap:8px; align-items:center; text-decoration:none}
.sb-logo .badge{width:32px; height:32px; border-radius:11px; background:var(--berry); display:grid; place-items:center; box-shadow:0 4px 0 var(--berry-d); transform:rotate(-6deg)}
.sb-logo .badge svg{width:19px; height:19px}
.sb-select{font-size:14px; padding:9px 34px 9px 14px; background-position:right 12px center; max-width:320px}
.sb-right{display:flex; align-items:center; gap:10px; font-weight:800; font-size:14.5px}
.sb-right .who{color:var(--ink-soft)}
.sb-right a{color:var(--ink); text-decoration:none; padding:8px 12px; border-radius:13px}
.sb-right a:hover{background:var(--cream-d)}
.sb-right .btn{color:#fff}  /* the berry CTA keeps white text (beats .sb-right a) */

/* ---------- buttons ---------- */
.btn{font-family:'Fredoka'; font-weight:600; border:none; cursor:pointer; border-radius:18px; font-size:16px;
  padding:13px 22px; display:inline-flex; align-items:center; justify-content:center; gap:9px; text-decoration:none; color:#fff;
  transition:transform .12s cubic-bezier(.3,1.5,.5,1), box-shadow .12s}
.btn:focus-visible{outline:3px solid var(--grape); outline-offset:2px}
.btn-berry{background:var(--berry-btn); box-shadow:0 6px 0 var(--berry-btn-d)}
.btn-berry:hover{transform:translateY(-2px); box-shadow:0 8px 0 var(--berry-btn-d)}
.btn-berry:active{transform:translateY(3px); box-shadow:0 3px 0 var(--berry-btn-d)}
.btn-mint{background:var(--mint-btn); box-shadow:0 6px 0 var(--mint-d)}
.btn-mint:hover{transform:translateY(-2px); box-shadow:0 8px 0 var(--mint-d)}
.btn-mint:active{transform:translateY(3px); box-shadow:0 3px 0 var(--mint-d)}
.btn-sun{background:var(--sun); color:var(--ink); box-shadow:0 6px 0 var(--sun-d)}
.btn-sun:hover{transform:translateY(-2px)}
.btn-white{background:#fff; color:var(--berry-d); box-shadow:0 6px 0 rgba(0,0,0,.12)}
.btn-white:hover{transform:translateY(-2px)}
.btn-ghost{background:rgba(255,255,255,.18); color:#fff; box-shadow:none; border:2px solid rgba(255,255,255,.6)}
.btn-lg{font-size:19px; padding:16px 26px; border-radius:20px}
.btn-block{width:100%}
.btn-pill{background:#fff; color:var(--ink); font-family:'Fredoka'; font-weight:600; font-size:14px; border:3px solid var(--cream-d);
  border-radius:14px; padding:9px 16px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:7px; transition:border-color .15s, transform .12s}
.btn-pill:hover{border-color:var(--berry); transform:translateY(-1px)}
.btn-text{background:none; border:none; color:var(--berry-d); font-family:'Fredoka'; font-weight:600; cursor:pointer; text-decoration:none; font-size:15px}

/* ---------- page header (logged-in app) ---------- */
.phead{padding:30px 0 6px; display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap}
.phead .crumb{font-weight:800; font-size:13px; letter-spacing:.04em; text-transform:uppercase; color:var(--grape-d)}
.phead h1{font-size:clamp(28px,4.6vw,44px); font-weight:700; margin-top:6px}
.phead .meta{font-weight:700; color:var(--ink-soft); font-size:15px; margin-top:8px; display:flex; gap:16px; flex-wrap:wrap}
.phead .meta b{color:var(--ink)}
/* Reveal countdown chip (fragments/reveal_countdown.html) */
.reveal-cd{display:inline-flex; align-items:center; gap:6px; font-family:'Fredoka'; font-weight:600; font-size:13px; color:var(--grape-d); background:#F1ECFC; padding:3px 11px; border-radius:20px}
.reveal-cd.is-today{color:var(--berry-btn); background:#FDE7EB}
.reveal-cd.is-past{color:var(--ink-soft); background:var(--cream-d)}

/* ---------- layout grid ---------- */
.grid{display:grid; grid-template-columns:1.5fr 1fr; gap:22px; padding:22px 0 60px; align-items:start}
.col{display:flex; flex-direction:column; gap:22px; min-width:0}

/* ---------- cards ---------- */
.card{background:#fff; border-radius:var(--r); box-shadow:var(--shadow); border:3px solid #fff; overflow:hidden}
.card-head{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 22px 12px}
.card-head h2,.card-head h3{font-size:20px; font-weight:600; display:flex; align-items:center; gap:9px}
/* icon chip: background is a lightened (≈45%) tint of the theme color
   passed via --ic, so the emoji stays clearly visible on it. */
.card-head .ic{width:30px; height:30px; border-radius:10px; display:flex; align-items:center; justify-content:center; line-height:1; font-size:20px;
  background:color-mix(in srgb, var(--ic, var(--cream-d)) 35%, #fff)}
.card-body{padding:4px 22px 20px}
.card-pad{padding:26px}

/* gradient "hero" cards (next-step / spotlight / santa) */
.gcard{border-radius:var(--r); padding:26px; color:#fff; position:relative; overflow:hidden}
.gcard .glab{font-weight:800; letter-spacing:.04em; text-transform:uppercase; font-size:12.5px; opacity:.9}
.gcard h2{font-size:25px; font-weight:600; margin:6px 0 6px}
.gcard p{font-weight:700; opacity:.95; max-width:50ch}
.g-berry{background:linear-gradient(135deg,#FF5A6E,#FF8A5B); box-shadow:0 10px 0 var(--berry-d)}
.g-mint{background:linear-gradient(135deg,#2FD0A6,#7CC4FF); box-shadow:0 10px 0 #1aa9a0}
.g-grape{background:linear-gradient(135deg,#9B7BE8,#FF5A6E); box-shadow:0 10px 0 var(--grape-d)}

/* ---------- detail rows ---------- */
.drow{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:11px 0; border-top:2px solid var(--cream); font-weight:700}
.drow:first-child{border-top:none}
.drow .k{color:var(--ink-soft); font-size:14.5px}
.drow .v{font-size:15.5px; text-align:right}

/* ---------- people / avatars / pills ---------- */
.avatar{width:44px; height:44px; border-radius:15px; display:grid; place-items:center; font-family:'Fredoka'; font-weight:700; color:#fff; font-size:17px; flex:none; transform:rotate(-4deg)}
/* avatar-shaped chip for emoji icons (not initials) — lightened theme
   tint like .ic, so the emoji reads. Pass the color via --ic. */
.avatar-ic{width:44px; height:44px; border-radius:15px; display:flex; align-items:center; justify-content:center; line-height:1; font-size:32px; flex:none; transform:rotate(-4deg);
  background:color-mix(in srgb, var(--ic, var(--cream-d)) 35%, #fff)}
/* larger variant (exchange-list cards): bigger box + emoji so the icon reads */
.avatar-ic.lg{width:50px; height:50px; border-radius:16px; font-size:40px}
.mini-av{width:38px; height:38px; border-radius:12px; display:grid; place-items:center; font-family:'Fredoka'; font-weight:700; color:#fff; font-size:14px; transform:rotate(-4deg)}
.avatar.muted,.mini-av.muted{opacity:.5; filter:grayscale(.3)}
/* avatar fills carry white initials, so they use AA-with-white shades
   (>=4.5:1). a-sun keeps the bright tone since it uses dark ink text. */
.a-berry{background:var(--berry-btn)} .a-mint{background:var(--mint-btn)} .a-sun{background:var(--sun); color:var(--ink)}
.a-sky{background:var(--sky-ink)} .a-grape{background:var(--grape-d)} .a-apricot{background:#A8634E}
.a-teal{background:#2E8378} .a-plum{background:var(--plum)}
.person{display:flex; align-items:center; gap:14px; padding:13px 22px; border-top:2px solid var(--cream)}
.person:first-child{border-top:none}
.p-main{flex:1; min-width:0}
.p-name{font-weight:800; font-size:16px}
.p-info{font-weight:700; color:var(--ink-soft); font-size:13.5px}
.youtag{font-family:'Fredoka'; font-weight:600; font-size:11px; background:var(--grape-d); color:#fff; padding:2px 8px; border-radius:20px; margin-left:6px; vertical-align:middle}
.pill{font-family:'Fredoka'; font-weight:600; font-size:12.5px; padding:6px 12px; border-radius:20px; white-space:nowrap; display:inline-flex; align-items:center; gap:5px}
.pill.ready{background:#E0F7EF; color:var(--mint-d)}
.pill.invited{background:#FDEBC9; color:var(--sun-d)}
.pill.needs{background:#FFE0E4; color:var(--berry-d)}

/* ---------- wishlist rows ---------- */
.wish{display:flex; align-items:center; gap:12px; padding:12px 0; border-top:2px solid var(--cream); font-weight:700}
.wish:first-child{border-top:none}
.wish .dot{position:static; opacity:1; animation:none; pointer-events:auto; width:34px; height:34px; border-radius:11px;
  display:flex; align-items:center; justify-content:center; line-height:1; font-size:24px; flex:none; transform:rotate(-5deg);
  background:color-mix(in srgb, var(--sun) 35%, #fff)}
.wish .w-main{flex:1; min-width:0}
.wish .w-t{font-size:15.5px}
.wish .w-s{font-weight:700; color:var(--ink-soft); font-size:13px}

/* ---------- forms ---------- */
.field, input[type=text], input[type=email], input[type=password], textarea{
  width:100%; font-family:'Nunito'; font-weight:700; font-size:17px; padding:14px 18px;
  border:3px solid var(--cream-d); border-radius:18px; background:var(--cream); color:var(--ink);
  outline:none; transition:border-color .15s, background .15s}
textarea{line-height:1.5; resize:vertical; min-height:110px}
.field::placeholder, input::placeholder, textarea::placeholder{color:#bda99e}
.field:focus, input:focus, textarea:focus{border-color:var(--mint); background:#fff}

/* reusable select — applies to every <select> on the site (custom
   chevron, no native arrow). select.soft = full-width form variant;
   .sb-select = compact header variant (size overrides above). */
select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  font-family:'Nunito'; font-weight:700; font-size:16px; color:var(--ink);
  padding:13px 42px 13px 16px;
  border:3px solid var(--cream-d); border-radius:16px; background-color:var(--cream);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233A2A2A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center; background-size:15px;
  cursor:pointer; outline:none; transition:border-color .15s, background-color .15s}
select:focus{border-color:var(--mint); background-color:#fff}
select.soft{width:100%}
select option{background:#fff; color:var(--ink); font-weight:700}

/* custom dropdown (soft.js) — themed open option list. The native
   <select> is kept (hidden) for value/submit/onchange; trigger+panel
   are styled HTML so the OPEN list matches the theme. */
.sdd{position:relative; display:inline-block; vertical-align:middle}
.sdd.full{display:block; width:100%}
.sdd>select{position:absolute !important; left:0; top:0; width:1px; height:1px; opacity:0; pointer-events:none; margin:0; padding:0; border:0}
.sdd-trigger{font-family:'Nunito'; font-weight:700; font-size:16px; color:var(--ink); display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-width:200px; padding:13px 16px; border:3px solid var(--cream-d); border-radius:16px; background:var(--cream); cursor:pointer; outline:none; transition:border-color .15s, background .15s; text-align:left}
.sdd-trigger:hover{border-color:var(--sun)}
.sdd.open .sdd-trigger{border-color:var(--mint); background:#fff}
.sdd-trigger .sdd-label{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sdd-trigger .sdd-chev{color:var(--ink); font-size:13px; flex:none; transition:transform .15s}
.sdd.open .sdd-trigger .sdd-chev{transform:rotate(180deg)}
.sdd-compact{display:inline-block}
.sdd-compact .sdd-trigger{width:auto; min-width:0; max-width:320px; font-size:14px; padding:9px 14px; border-radius:14px}
.sdd-panel{position:absolute; top:calc(100% + 6px); left:0; min-width:100%; background:#fff; border:3px solid var(--cream-d); border-radius:16px; box-shadow:0 14px 34px -12px rgba(58,42,42,.4); padding:6px; z-index:60; max-height:320px; overflow:auto; display:none}
.sdd.open .sdd-panel{display:block; animation:sddpop .12s ease-out}
@keyframes sddpop{from{opacity:0; transform:translateY(-4px)}to{opacity:1; transform:none}}
.sdd-opt{padding:11px 14px; border-radius:12px; font-family:'Nunito'; font-weight:700; font-size:15px; color:var(--ink); cursor:pointer; white-space:nowrap}
.sdd-opt:hover{background:var(--cream)}
.sdd-opt[aria-selected=true]{background:var(--cream-d); color:var(--berry-d)}
.flabel, label.soft{display:block; font-family:'Fredoka'; font-weight:600; font-size:15px; margin:0 0 7px 4px}
.fhelp{font-weight:700; color:var(--ink-soft); font-size:13px; margin:6px 4px 0}
.fgroup{margin-bottom:18px}
.check{display:flex; align-items:center; gap:11px; font-weight:700; color:var(--ink); cursor:pointer}
.check input{width:20px; height:20px; flex:none; accent-color:var(--mint)}
.field-row{display:flex; gap:12px}
.field-row .field, .field-row input{flex:1; min-width:0}
.errorlist{list-style:none; margin:0 0 14px; padding:13px 16px; background:#FFE0E4; border-radius:14px; color:var(--berry-d); font-weight:700; font-size:14.5px}
.errorlist li{margin:0}

/* reassurance ticks */
.reassure{display:flex; flex-direction:column; gap:9px; margin-top:16px}
.reassure.inline{flex-direction:row; flex-wrap:wrap; gap:12px 18px; justify-content:center}
.reassure>span{display:flex; align-items:center; font-weight:700; font-size:14px; color:var(--ink-soft)}
.reassure b{color:var(--mint-d)}
/* spacing lives on the tick (not flex gap) so a bold label + trailing
   text don't get a gap inserted before their punctuation. */
.tick{width:20px; height:20px; border-radius:50%; background:var(--mint); display:inline-flex; align-items:center; justify-content:center; flex:none; margin-right:9px}
.tick svg{width:12px; height:12px}

/* drag-to-reorder */
.drag-handle{cursor:grab; touch-action:none; color:#cdbcb0; font-size:18px; line-height:1; padding:0 2px; user-select:none; flex:none}
.drag-handle:active{cursor:grabbing}
.sorting{opacity:.92; background:#fff; border-radius:16px; box-shadow:0 10px 24px -8px rgba(232,56,79,.45); position:relative; z-index:5}

/* honeypot (bot trap) — present in DOM, never shown to humans */
.hp{position:absolute !important; left:-9999px !important; top:-9999px !important; width:1px; height:1px; overflow:hidden}

/* "or" divider */
.or{display:flex; align-items:center; gap:14px; margin:24px 0 20px; color:var(--ink-soft); font-weight:800; font-size:13px; letter-spacing:.05em}
.or::before,.or::after{content:""; flex:1; height:3px; background:var(--cream-d); border-radius:3px}

/* ---------- auth (centered card) layout ---------- */
.auth-main{display:grid; place-items:center; padding:36px 20px 50px; position:relative; z-index:1}
.auth-card{width:100%; max-width:480px; background:#fff; border-radius:var(--r); padding:36px 32px 30px;
  box-shadow:0 12px 0 rgba(58,42,42,.08), 0 40px 70px -30px rgba(232,56,79,.4); border:3px solid #fff; position:relative}
.auth-card .emoji-top{position:absolute; top:-30px; left:50%; transform:translateX(-50%); font-size:48px; filter:drop-shadow(0 6px 0 rgba(58,42,42,.07))}
.auth-card h1{font-size:30px; font-weight:700; text-align:center; margin-top:6px}
.auth-card .sub{text-align:center; font-weight:700; color:var(--ink-soft); font-size:15.5px; margin:8px auto 24px; max-width:34ch}
.auth-card .alt{text-align:center; margin-top:22px; font-weight:700; font-size:15px; color:var(--ink-soft)}
.auth-card .alt a{color:var(--berry); text-decoration:none; font-weight:800}
.magic{background:var(--cream); border:3px solid var(--cream-d); border-radius:20px; padding:18px}
.magic .mlab{font-family:'Fredoka'; font-weight:600; font-size:16px; margin-bottom:4px}
.magic .msub{font-weight:700; color:var(--ink-soft); font-size:13.5px; margin-bottom:14px}
.magic-status{display:block; text-align:center; font-weight:700; font-size:13.5px; color:var(--mint-d); min-height:1em; margin-top:10px}

/* ---------- group nav tabs ---------- */
.snav{display:flex; gap:8px; flex-wrap:wrap; padding:18px 0 0}
.snav a{font-family:'Fredoka'; font-weight:600; font-size:15px; text-decoration:none; color:var(--ink-soft);
  background:#fff; border:3px solid var(--cream-d); border-radius:15px; padding:9px 16px; transition:border-color .15s, color .15s}
.snav a:hover{border-color:var(--berry); color:var(--ink)}
.snav a.active{background:var(--grape-d); border-color:var(--grape-d); color:#fff}

/* ---------- flash messages ---------- */
.messages{list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:10px}
.messages li{background:#E0F7EF; color:var(--mint-d); font-weight:700; padding:13px 18px; border-radius:16px; box-shadow:var(--shadow)}

/* ---------- Pro card ---------- */
.pro{background:linear-gradient(135deg,#3A2A2A,#5A3A42); color:#fff; border-radius:var(--r); padding:24px; position:relative; overflow:hidden; box-shadow:0 10px 0 #2a1d1d}
.pro::after{content:""; position:absolute; inset:0; background:radial-gradient(circle at 88% 12%,rgba(255,201,77,.3),transparent 42%)}
.pro-in{position:relative; z-index:1}
.pro .tag{display:inline-flex; align-items:center; gap:7px; background:var(--sun); color:var(--ink); font-family:'Fredoka'; font-weight:700; padding:5px 12px; border-radius:30px; font-size:12.5px}
.pro h3{font-size:20px; font-weight:600; margin:12px 0 6px}
.pro p{font-weight:700; opacity:.85; font-size:14.5px; margin-bottom:16px}
.pro-pill{background:var(--sun); color:var(--ink); font-family:'Fredoka'; font-weight:600; font-size:11px; padding:3px 9px; border-radius:20px; letter-spacing:.03em; vertical-align:middle}

/* ---------- footer ---------- */
.sb-foot{margin-top:30px; border-top:3px solid var(--cream-d); background:rgba(255,247,238,.6)}
.sb-foot .wrap{padding:30px 22px 40px; text-align:center}
.sb-foot p{margin:4px 0; color:var(--ink-soft); font-weight:700; font-size:14px}
.sb-foot a{color:var(--berry); text-decoration:none; font-weight:800}

/* ============================================================
   Utility / helper classes — CSP prep.
   These replace inline style="" attributes across the templates
   so a strict style-src CSP (nonce on the inline <style>/<script>
   blocks, no 'unsafe-inline') can be applied. Inline style="" on
   an element can't carry a nonce, so anything reusable lives here
   and page-specific one-offs live in each page's <style> block.
   ============================================================ */
.hidden{display:none}

/* page-width variants + bottom padding on .wrap / forms */
.w-560{max-width:560px} .w-620{max-width:620px} .w-680{max-width:680px}
.w-720{max-width:720px} .w-760{max-width:760px}
.pb-page{padding-bottom:60px}

/* icon/avatar tint — feeds --ic to .ic / .fico / .step .ico / .avatar-ic */
.tint-berry{--ic:var(--berry)} .tint-mint{--ic:var(--mint)} .tint-sun{--ic:var(--sun)}
.tint-sky{--ic:var(--sky)} .tint-grape{--ic:var(--grape)}

/* font weight / size (exact px preserved from former inline styles) */
.fw6{font-weight:600} .fw7{font-weight:700} .fw8{font-weight:800}
.fs-18{font-size:18px} .fs-19{font-size:19px} .fs-20{font-size:20px}

/* text colors */
.t-soft{color:var(--ink-soft)} .t-mint{color:var(--mint-d)} .t-sun{color:var(--sun-d)}
.t-berry{color:var(--berry-d)} .t-berryd{color:var(--berry-d)} .t-sky{color:var(--sky-ink)} .t-white{color:#fff}

/* margins */
.mt-6{margin-top:6px} .mt-8{margin-top:8px} .mt-10{margin-top:10px} .mt-12{margin-top:12px}
.mt-14{margin-top:14px} .mt-18{margin-top:18px} .mt-20{margin-top:20px} .mt-22{margin-top:22px}
.mb-6{margin-bottom:6px} .mb-10{margin-bottom:10px} .mb-12{margin-bottom:12px}
.mb-14{margin-bottom:14px} .mb-18{margin-bottom:18px} .mb-22{margin-bottom:22px}
.my-8-4{margin:8px 0 4px} .ml-auto{margin-left:auto}

/* flex helpers */
.flex-1{flex:1; min-width:0}
.actions{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.row10{display:flex; gap:10px}
.row-pad{display:flex; align-items:center; gap:16px}
.form-actions{display:flex; gap:12px; justify-content:flex-end; margin-top:20px}

/* compact buttons + danger-outline pill (Remove / Delete) */
.btn-sm{font-size:14px; padding:9px 16px}
.btn-sm-tall{font-size:14px; padding:10px 18px}
.sb-cta{font-size:14px; padding:9px 16px; border-radius:14px}
.btn-pill.danger{border-color:var(--berry); color:var(--berry-d)}

/* misc structural */
.list-pad{padding:4px 22px 14px}
.edit-pad{padding:0 16px 14px}
.bb-cream{border-bottom:2px solid var(--cream)}
.card-link{display:block; text-decoration:none; color:inherit}
.plain-link{color:inherit; text-decoration:none}
.nounderline{text-decoration:none}
.w-link{color:var(--sky-ink); font-weight:800; text-decoration:none}
.hint{font-weight:600; color:var(--ink-soft)}

@media(max-width:840px){
  .grid{grid-template-columns:1fr}
  .sb-select{max-width:170px}
  .sb-right .who{display:none}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}