/* Common — bright, light, one strong colour per area of the app.
   Layout: white sidebar with coloured chips, wide working pane, cards on a soft tinted ground. */
:root{
  /* neutrals and brand tones borrowed from Did It Run (diditrun.nz web/style.css) */
  --bg:#f9f9f7; --card:#ffffff; --ink:#0b0b0b; --ink-2:#52514e; --muted:#7a7873; --line:rgba(11,11,11,.12); --soft:#f3f2ee;
  --brand-blue:#31a8f7; --brand-pink:#f4279d; --brand-green:#2fd12f;
  --accent:#0a72b8; --accent-ink:#fff; --tint:#eef7fe;
  /* area colours: the darker text-safe tones, used for icons, labels and thin rules only */
  --coral:#c2127a; --amber:#a16207; --green:#1a7f1a; --sky:#0a72b8; --violet:#6d28d9; --pink:#be185d;
  --orange:#c2410c; --blue:#4338ca; --teal:#0f766e; --yellow:#eab308;
  --good:#0c8a0c; --warn:#b26b00; --crit:#c53030;
  --area:var(--accent);
  --display:system-ui, -apple-system, "Segoe UI", sans-serif;
  --body:system-ui, -apple-system, "Segoe UI", sans-serif;
  --r:6px; --shadow:0 1px 2px rgba(16,16,16,.06);
  --stripe:linear-gradient(90deg,var(--brand-blue) 0 33.3%,var(--brand-pink) 33.3% 66.6%,var(--brand-green) 66.6%);
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--bg);color:var(--ink);font:14.5px/1.5 var(--body);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display);margin:0;letter-spacing:-.01em;text-wrap:balance;line-height:1.15}
h1{font-size:clamp(24px,2.4vw,30px);font-weight:700}
h2{font-size:18px;font-weight:650}
h3{font-size:15px;font-weight:650}
p{margin:0}
small,.muted{color:var(--muted)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.ico{flex:none;vertical-align:-4px}

/* areas */
.a-home{--area:var(--sky)} .a-money{--area:var(--green)} .a-spend{--area:var(--amber)}
.a-meet{--area:var(--violet)} .a-tasks{--area:var(--blue)} .a-fix{--area:var(--orange)}
.a-ins{--area:var(--teal)} .a-people{--area:var(--pink)} .a-records{--area:var(--sky)}
.a-set{--area:#52514e}

/* shell */
.shell{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:100vh}
.side{background:var(--card);box-shadow:inset 0 3px 0 0 transparent;border-right:1px solid var(--line);padding:18px 12px;display:flex;flex-direction:column;gap:14px;position:sticky;top:0;height:100vh;overflow-y:auto}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:20px;letter-spacing:-.01em;padding:2px 8px;text-decoration:none}
.logo .dots{display:grid;grid-template-columns:repeat(2,8px);gap:3px}
.logo .dots i{width:8px;height:8px;border-radius:2px;display:block}
.orgpick{display:flex;align-items:center;gap:10px;padding:9px;border-radius:var(--r);background:var(--soft);border:1px solid var(--line);text-decoration:none}
.orgpick .badge{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;color:#fff;font-weight:700;flex:none}
.orgpick b{display:block;font-size:14px;line-height:1.2}
.orgpick span{font-size:12px;color:var(--muted)}
.nav{display:flex;flex-direction:column;gap:1px}
.nav .grp{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:12px 10px 4px}
.sidetop{display:flex;align-items:center;gap:8px}
.menu-btn{display:none;margin-left:auto;align-items:center;gap:6px;font:inherit;font-size:14px;font-weight:600;background:var(--soft);color:var(--ink);border:1px solid var(--line);border-radius:9px;padding:7px 12px;cursor:pointer}
.sidenav{display:flex;flex-direction:column;gap:14px;flex:1}
.nav details.grp{padding:0;margin:0;text-transform:none;letter-spacing:0;font-size:inherit;font-weight:inherit;color:inherit}
.nav details.grp>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:12px 10px 4px;border-radius:6px;user-select:none}
.nav details.grp>summary::-webkit-details-marker{display:none}
.nav details.grp>summary::after{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin:0 4px 3px 0;transition:transform .15s}
.nav details.grp:not([open])>summary::after{transform:rotate(-45deg);margin-bottom:0}
.nav details.grp>summary:hover{color:var(--ink)}
.nav details.grp>div{display:flex;flex-direction:column;gap:1px}
.nav a{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:8px;position:relative;text-decoration:none;font-weight:500;color:var(--ink)}
.nav a .chip{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;color:var(--area);transition:.15s}
.nav a:hover{background:var(--soft)}
.nav a.on{background:var(--soft);font-weight:650}
.nav a.on::before{content:"";position:absolute;left:-12px;top:6px;bottom:6px;width:3px;border-radius:0 3px 3px 0;background:var(--area)}
.nav a.on .chip{color:var(--area)}
.nav a .count{margin-left:auto;font-size:11px;font-weight:650;background:var(--soft);color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line);border-radius:20px;padding:1px 8px}
.side .me{margin-top:auto;display:flex;align-items:center;gap:10px;padding:10px;border-top:1px solid var(--line)}
.av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:12px;flex:none;background:var(--violet)}
.side .me div{min-width:0;flex:1}
.side .me b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side .me a{font-size:12px;color:var(--muted)}
.main{min-width:0;padding:24px clamp(16px,2.4vw,40px) 60px;max-width:1880px;width:100%}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.crumb{margin-bottom:2px}
.head .eyebrow,.eyebrow.crumb{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:650;color:var(--area);margin-bottom:6px}
.head p{color:var(--muted);margin-top:6px;max-width:70ch}
.head .actions{display:flex;gap:8px;flex-wrap:wrap}
.testbar{background:#fdf6e3;color:#6b4a00;border-bottom:1px solid #f1e2b8;font-size:12.5px;font-weight:550;padding:5px 16px;text-align:center;position:relative}
.testbar::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:3px;background:var(--stripe);z-index:5}
.testbar a{font-weight:700}

/* buttons and inputs */
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid transparent;border-radius:5px;padding:8px 14px;font:600 14px var(--body);cursor:pointer;background:var(--accent);color:var(--accent-ink);text-decoration:none;transition:background .12s,border-color .12s;white-space:nowrap}
.btn:hover{background:color-mix(in srgb,var(--accent) 88%,black)}
.btn:active{background:color-mix(in srgb,var(--accent) 78%,black)}
.btn.ghost{background:var(--card);color:var(--ink);border-color:rgba(11,11,11,.16)}
.btn.ghost:hover{background:var(--soft);border-color:rgba(11,11,11,.22)}
.btn.small{padding:5px 10px;font-size:13px;border-radius:4px}
.btn.big{padding:11px 20px;font-size:15px;border-radius:5px}
.btn.yes{background:var(--good)}
.btn.no{background:var(--crit)}
.btn.dark{background:var(--ink)}
.btn[disabled]{opacity:.5;pointer-events:none}
.input{width:100%;font:15px var(--body);color:var(--ink);background:#fff;border:1px solid rgba(11,11,11,.18);border-radius:4px;padding:8px 11px;transition:border-color .15s}
.input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent)}
textarea.input{resize:vertical;min-height:44px}
select.input{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:34px}
input[type=color].input{height:44px;padding:4px}
.check{width:17px;height:17px;accent-color:var(--accent)}
.field{display:flex;flex-direction:column;gap:5px}
.field label{font-weight:600;font-size:14px}
.field .help{font-size:12.5px;color:var(--muted)}
.field.inline{flex-direction:row;align-items:center;gap:10px}
.field .err{color:var(--crit);font-size:13px}
.form{display:grid;gap:14px}
.form.cols{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.form .full{grid-column:1/-1}
.checks{display:flex;flex-wrap:wrap;gap:8px}
.checks label{display:inline-flex;gap:6px;align-items:center;border:1px solid rgba(11,11,11,.16);border-radius:8px;padding:6px 10px;font-weight:500}
.checks ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}

/* cards */
.grid{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
.gauto{grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr))}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g21{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
.g12{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:var(--shadow);min-width:0}
.card > .ch{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.card.tint{background:color-mix(in srgb,var(--area) 5%,white);border-color:color-mix(in srgb,var(--area) 18%,white)}
.card.flat{box-shadow:none}
.stack{display:flex;flex-direction:column;gap:16px}
.row-gap{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.spacer{flex:1}

/* hero tiles: white cards; the colour is a top rule, the label and the meter */
.tile{--tc:var(--accent);border-radius:var(--r);padding:16px 18px;background:var(--card);color:var(--ink);border:1px solid var(--line);box-shadow:var(--shadow);position:relative;overflow:hidden;min-height:120px;display:flex;flex-direction:column;justify-content:flex-start;gap:6px;text-decoration:none;transition:border-color .15s,box-shadow .15s}
.tile::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--tc)}
a.tile:hover{border-color:color-mix(in srgb,var(--tc) 40%,white);box-shadow:0 1px 2px rgba(0,0,0,.05),0 8px 22px rgba(0,0,0,.08)}
.tile .k{font-size:12.5px;font-weight:650;color:var(--tc);display:flex;gap:6px;align-items:center}
.tile .v{font-size:28px;font-weight:700;letter-spacing:-.02em;line-height:1.1;margin-top:8px}
.tile .s{font-size:13px;color:var(--muted)}
.tile .meter{height:6px;border-radius:6px;background:var(--soft);margin-top:10px;overflow:hidden}
.tile .meter i{display:block;height:100%;background:var(--tc);border-radius:6px;transition:width 1s cubic-bezier(.2,.8,.2,1)}
.t-coral{--tc:var(--coral)} .t-green{--tc:var(--green)} .t-violet{--tc:var(--violet)}
.t-sky{--tc:var(--sky)} .t-amber{--tc:var(--amber)} .t-pink{--tc:var(--pink)}
.t-orange{--tc:var(--orange)} .t-teal{--tc:var(--teal)} .t-blue{--tc:var(--blue)}

/* lists */
.list{display:flex;flex-direction:column}
.li{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--line);text-decoration:none;min-width:0}
.li:first-child{border-top:0;padding-top:2px}
.li .dot{--dc:var(--accent);width:32px;height:32px;border-radius:8px;display:grid;place-items:center;flex:none;font-weight:650;font-size:13px;color:var(--dc);background:color-mix(in srgb,var(--dc) 10%,white)}
.li .txt{flex:1;min-width:0}
.li .txt b{display:block;font-weight:600}
.li .txt small{display:block;overflow:hidden;text-overflow:ellipsis}
.ai-jobs .li{flex-wrap:wrap;row-gap:8px}
.ai-jobs .li .txt{flex:1 1 calc(100% - 44px)}
.ai-acts{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-left:44px}
.ai-acts form{margin:0}
a.li:hover b{color:var(--accent)}
.c-coral{--dc:var(--coral)} .c-green{--dc:var(--green)} .c-amber{--dc:var(--amber)} .c-violet{--dc:var(--violet)}
.c-sky{--dc:var(--sky)} .c-orange{--dc:var(--orange)} .c-pink{--dc:var(--pink)} .c-blue{--dc:var(--blue)} .c-teal{--dc:var(--teal)}
.empty{padding:22px;text-align:center;color:var(--muted);border:1px dashed rgba(11,11,11,.18);border-radius:var(--r)}
.empty b{display:block;color:var(--ink);font-size:15px;margin-bottom:4px}

/* pills */
.pill{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;border-radius:6px;padding:2px 8px;white-space:nowrap}
.pill.good{background:#e6f4e6;color:#11651a} .pill.warn{background:#fbf1dc;color:#8a5300}
.pill.crit{background:#fbe7e7;color:#a42626} .pill.plain{background:var(--soft);color:var(--muted)}
.pill.area{background:color-mix(in srgb,var(--area) 10%,white);color:color-mix(in srgb,var(--area) 80%,black)}

/* tables */
.tablewrap{overflow-x:auto;margin:0 -4px}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-size:12px;color:var(--ink-2);font-weight:600;padding:0 10px 10px;white-space:nowrap}
td{padding:9px 10px;border-top:1px solid var(--line);vertical-align:middle}
td.n,th.n{text-align:right;white-space:nowrap}
td.nowrap{white-space:nowrap}
tfoot td{font-weight:650;border-top:1px solid rgba(11,11,11,.35)}
tr.flash td{animation:flash 1.6s ease}
@keyframes flash{0%{background:var(--tint)}100%{background:transparent}}
.bar{height:8px;border-radius:8px;background:var(--soft);overflow:hidden}
.bar i{display:block;height:100%;background:var(--area);border-radius:8px}

/* messages */
.msgs{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.msg{padding:10px 14px;border-radius:var(--r);font-weight:550;display:flex;gap:10px;align-items:center;border:1px solid transparent}
.msg.success{background:#ecf7ec;border-color:#cfe8cf;color:#11581a}
.msg.error{background:#fcecec;border-color:#f1cccc;color:#8f1f1f}
.msg.info,.msg.warning{background:#fdf6e3;border-color:#f1e2b8;color:#6b4a00}
@keyframes pop{from{transform:scale(.96);opacity:0}to{transform:none;opacity:1}}

/* kanban */
.board{display:grid;grid-template-columns:repeat(4,minmax(240px,1fr));gap:14px;overflow-x:auto;padding-bottom:8px}
.col{background:var(--soft);border:1px solid var(--line);border-radius:var(--r);padding:12px;min-height:300px;display:flex;flex-direction:column;gap:10px}
.col h3{display:flex;align-items:center;gap:8px;font-size:15px;padding:2px 4px}
.col h3 .n{margin-left:auto;font-size:12px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);border-radius:20px;padding:1px 9px;color:var(--muted)}
.col .drop{flex:1;display:flex;flex-direction:column;gap:10px;min-height:60px;border-radius:var(--r);transition:background .15s}
.col .drop.over{background:color-mix(in srgb,var(--blue) 12%,transparent)}
.kcard{background:#fff;border-radius:4px;padding:11px 12px;border:1px solid var(--line);box-shadow:0 1px 2px rgba(0,0,0,.04);border-left:3px solid var(--blue);cursor:grab;display:flex;flex-direction:column;gap:6px}
.kcard.dragging{opacity:.5;transform:rotate(2deg)}
.kcard b{font-weight:600;line-height:1.3}
.kcard > a{color:inherit;text-decoration:none} .kcard > a:hover b{text-decoration:underline}
.kcard .meta{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.col.todo .kcard{border-left-color:#898781} .col.doing .kcard{border-left-color:var(--accent)}
.col.waiting .kcard{border-left-color:var(--amber)} .col.done .kcard{border-left-color:var(--green);opacity:.8}

/* votes */
.votebar{display:flex;height:10px;border-radius:5px;overflow:hidden;background:var(--soft)}
.votebar .y{background:var(--good)} .votebar .n{background:var(--crit)} .votebar .a{background:#b9b7ae}
.threshold{position:relative;height:0}
.threshold i{position:absolute;top:-18px;width:2px;height:22px;background:var(--ink)}
.bigvote{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.bigvote button{border:0;border-radius:var(--r);padding:22px 10px;font:650 19px var(--body);color:#fff;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;transition:filter .12s}
.bigvote button:hover{filter:brightness(.92)}
.bigvote .for{background:var(--good)} .bigvote .against{background:var(--crit)} .bigvote .abstain{background:#6f6d68}

/* steps */
.steps{display:flex;gap:6px;flex-wrap:wrap}
.steps span{padding:5px 11px;border-radius:7px;background:var(--soft);font-size:13px;font-weight:550;color:var(--muted)}
.steps span.done{background:color-mix(in srgb,var(--area) 10%,white);color:color-mix(in srgb,var(--area) 80%,black)}
.steps span.on{background:var(--area);color:#fff}

/* chart */
.chart{display:flex;align-items:flex-end;gap:8px;height:220px;padding:10px 0 0;border-bottom:1px solid var(--line);position:relative}
.chart .yr{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;justify-content:flex-end;min-width:0}
.chart .bars{display:flex;gap:3px;align-items:flex-end;height:100%;width:100%;justify-content:center}
.chart .bars i{display:block;width:42%;border-radius:6px 6px 0 0;min-height:2px}
.chart .bars .sp{background:var(--orange)} .chart .bars .bal{background:var(--green)} .chart .bars .neg{background:var(--crit)}
.chart-x{display:flex;gap:8px;font-size:12px;color:var(--muted)} .chart-x span{flex:1;text-align:center}
.legend{display:flex;gap:14px;font-size:13px;color:var(--muted)} .legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px}

/* misc */
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:14px}
.kv dt{color:var(--muted)} .kv dd{margin:0;font-weight:600}
.code{font-family:ui-monospace,SFMono-Regular,monospace;font-size:13px;background:var(--soft);padding:2px 7px;border-radius:6px}
.big-num{font-size:36px;font-weight:700;letter-spacing:-.02em;line-height:1}
.hl{background:linear-gradient(transparent 62%,color-mix(in srgb,var(--brand-blue) 22%,white) 62%)}
.timeline{display:flex;flex-direction:column;gap:0;border-left:3px solid var(--soft);margin-left:8px}
.timeline .ev{position:relative;padding:0 0 16px 20px}
.timeline .ev::before{content:"";position:absolute;left:-8px;top:4px;width:13px;height:13px;border-radius:50%;background:var(--area);border:3px solid #fff;box-shadow:0 0 0 1px var(--line)}
details.more summary{cursor:pointer;font-weight:600;color:var(--area);list-style:none}
details.more summary::-webkit-details-marker{display:none}
details.more[open] summary{margin-bottom:14px}
.minirow{display:flex;gap:6px;align-items:center}
.phone{max-width:420px}
.pre{white-space:pre-wrap;font-size:14px;background:var(--soft);border-radius:var(--r);padding:14px;max-height:420px;overflow:auto}
.welcome{background:var(--card);position:relative;overflow:hidden}
.welcome::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--stripe)}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:50}

/* public pages (login, vote) */
.public{min-height:100vh;display:grid;place-items:center;padding:24px;background:var(--bg)}
.public .box{background:#fff;border:1px solid var(--line);border-radius:8px;padding:32px;max-width:520px;width:100%;box-shadow:0 1px 2px rgba(0,0,0,.05),0 12px 36px rgba(0,0,0,.08);position:relative;overflow:hidden}
.public .box::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--stripe)}

@media (min-width:1600px){.g4.wide5{grid-template-columns:repeat(5,minmax(0,1fr))}.g21{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}}
@media (max-width:1100px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g21,.g12,.g3{grid-template-columns:minmax(0,1fr)}}
@media (max-width:860px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .side{position:sticky;top:0;z-index:30;height:auto;max-height:100vh;max-height:100dvh;padding:10px 16px;gap:10px;border-right:0;border-bottom:1px solid var(--line)}
  .menu-btn{display:inline-flex}
  .orgpick{padding:6px 9px}.orgpick .badge{width:26px;height:26px}
  .sidenav{display:none}
  body.menu-open .sidenav{display:flex;flex:0 0 auto}
  body.menu-open .side{height:100vh;height:100dvh}
  body.menu-open{overflow:hidden}
  .nav a{padding:9px 8px}
  .nav a.on::before{left:-16px}
  .g2{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:480px){.g4{grid-template-columns:minmax(0,1fr)}.bigvote{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media print{.side,.testbar,.no-print{display:none!important}.shell{display:block}.card{box-shadow:none;break-inside:avoid}body{background:#fff}}

/* accounts section tabs */
.tabs{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 16px;border-bottom:1px solid var(--line)}
.tabs a{padding:8px 12px;text-decoration:none;color:var(--ink-2);font-weight:500;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a:hover{color:var(--ink)}
.tabs a.on{color:var(--ink);font-weight:650;border-bottom-color:var(--area)}
@media print{.tabs{display:none}}
/* platform console */
.meter{height:6px;border-radius:6px;background:var(--soft);overflow:hidden;margin:2px 0 4px}
.meter i{display:block;height:100%;background:var(--brand-blue,#0a72b8);border-radius:6px}
.meter i.hot{background:var(--crit)}
.btn.danger{background:var(--crit)}

/* Busy (submitted) buttons */
button[aria-busy="true"], input[aria-busy="true"]{opacity:.65;cursor:progress}
button[aria-busy="true"]::before{content:"";display:inline-block;width:.85em;height:.85em;margin-right:.45em;vertical-align:-.1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:busyspin .7s linear infinite}
@keyframes busyspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){button[aria-busy="true"]::before{animation:none}}

/* dialogs: pop-up forms (button[data-dialog] -> dialog.dlg); closing keeps what was typed */
dialog.dlg{border:0;border-radius:16px;padding:22px 22px 20px;width:min(560px,calc(100vw - 32px));max-height:calc(100vh - 48px);overflow:auto;background:var(--card,#fff);color:inherit;box-shadow:0 20px 60px rgba(0,0,0,.25)}
dialog.dlg::backdrop{background:rgba(15,23,42,.45)}
dialog.dlg>h2{margin:0 36px 14px 0;font-size:18px}
dialog.dlg .dlg-x{position:absolute;top:12px;right:12px;width:32px;height:32px;border:0;border-radius:8px;background:transparent;color:var(--muted);font-size:22px;line-height:1;cursor:pointer}
dialog.dlg .dlg-x:hover{background:rgba(127,127,127,.12)}
dialog.dlg{position:fixed}
.linkbtn{border:0;background:none;padding:0;font:inherit;font-weight:600;color:var(--area);cursor:pointer}
[data-dialog].has-draft{position:relative}
[data-dialog].has-draft::after{content:"draft";margin-left:6px;font-size:11px;font-weight:600;padding:1px 6px;border-radius:999px;background:var(--area,#31a8f7);color:#fff;opacity:.85}
.btn[data-dialog].has-draft::after{background:rgba(255,255,255,.3)}
@media (max-width:600px){dialog.dlg{width:100vw;max-width:100vw;max-height:92vh;margin:auto 0 0;border-radius:16px 16px 0 0}}

/* current file on upload fields */
.current-file{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:13.5px;margin-bottom:2px}
.current-file a{font-weight:600;color:var(--area);word-break:break-all}
.current-file .clear-file{display:inline-flex;align-items:center;gap:6px;font-weight:400;color:var(--muted)}
/* settings page: index on the left, one card per section */
.setwrap{display:grid;grid-template-columns:200px minmax(0,820px);gap:24px;align-items:start}
.setnav{position:sticky;top:20px;display:flex;flex-direction:column;gap:2px;font-size:14px}
.setnav a{padding:7px 10px;border-radius:6px;color:var(--ink-2);text-decoration:none;border-left:2px solid transparent}
.setnav a:hover{background:var(--soft);color:var(--ink)}
.setcard{scroll-margin-top:20px}
.setcard .sethead{margin-bottom:14px}
.setcard .sethead h2{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.setcard .sethead p{font-size:14px}
.setcard > .kv{margin-bottom:14px}
.setcard .setsub{font-size:15px;margin:18px 0 8px;padding-top:14px;border-top:1px solid var(--line)}
.setcard .sethead + .setsub{margin-top:0;padding-top:0;border-top:0}
.setcard .small-note{font-size:13.5px;margin:6px 0 10px}
.setcard .pending{border-color:var(--amber);margin-top:6px}
.setcard .feedrow{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 14px;border:1px solid var(--line);border-radius:8px}
.setcard .feedrow.warn{border-color:var(--amber)}
.setcard .form input:disabled,.setcard .form select:disabled,.setcard .form textarea:disabled{background:var(--soft);color:var(--ink-2)}
@media (max-width:1100px){.setwrap{grid-template-columns:minmax(0,1fr)}.setnav{position:static;flex-direction:row;flex-wrap:wrap;gap:4px}.setnav a{border:1px solid var(--line);background:var(--card)}}
.feedline{font-size:13.5px;color:var(--muted);margin:-6px 0 14px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.feedline.warn{color:var(--amber)}
.setcard .form.cols{grid-template-columns:repeat(2,minmax(0,1fr))}
.setcard .form.cols .field.inline{grid-column:1/-1}
.setcard input[type=color]{max-width:120px;height:40px;padding:4px}
@media (max-width:640px){.setcard .form.cols{grid-template-columns:minmax(0,1fr)}}
/* bank page */
.banktbl td{vertical-align:middle}
.banktbl td.what{min-width:320px}
.amt-in{color:var(--good)} .amt-out{color:var(--crit)}
.sugg{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.sugg-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.sugg-txt b{font-weight:600}
.sugg-tag{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:var(--area)}
.banktbl .alt{margin-top:8px}
.banktbl .minirow select{flex:1;min-width:200px}
.kcard .minirow{min-width:0}.kcard .minirow select{flex:1;min-width:0;width:auto}
/* long text (bank descriptions etc.): one line with "…"; hover shows it all, click/tap expands it */
.clip{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
span.clip,b.clip,small.clip{display:block}
.clip.cut{cursor:pointer}
.clip.open{white-space:normal;overflow-wrap:anywhere}
td.cell-clip{max-width:34ch}
.list .txt{min-width:0}
.sugg-txt{max-width:46ch}
.code.clip{display:inline-block;vertical-align:top}
.budgettbl{table-layout:fixed;width:100%}.budgettbl .input{width:100%;min-width:0}
.txt .code,small .code{white-space:nowrap}
/* dashboard */
.tiles{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.li .go{color:var(--muted);flex:none;opacity:.6}
a.li:hover .go{color:var(--accent);opacity:1}
.li .amt{font-weight:650;white-space:nowrap;flex:none}
.list.tight .li{padding:8px 0}
.tile .v.name{font-size:22px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tile .k .clip{min-width:0}
/* phones: nothing may push the page wider than the screen */
.chart-x span{min-width:0}
@media (max-width:600px){
  .chart,.chart-x{gap:3px}.chart-x{font-size:10.5px}
  .li:has(form,details){flex-wrap:wrap;row-gap:6px}
  .li:has(form,details)>.txt{flex-basis:calc(100% - 50px)}
}
/* meeting page */
.steps.num{counter-reset:st}
.steps.num span::before{counter-increment:st;content:counter(st) " "}
.checkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:0 14px}