/* BOTAN.IA founder app. Tokens follow the botaniaco.com design system
   (botania.css v5): cool light ground, deep ink, blue for interaction
   only, one warm accent, Space Grotesk / IBM Plex Sans / IBM Plex Mono. */
:root{
  --bg:#F8FAFC; --surface:#FFFFFF; --surface-cool:#F3F6FA;
  --ink:#142033; --ink-2:#5F6B7A; --ink-3:#657183; --deep:#13243A;
  --blue:#4F72D8; --blue-ink:#3756B8; --blue-soft:#DDE8F8; --blue-wash:#EDF3FB;
  --human:#A0763C; --human-ink:#83602C; --human-wash:#F6EFE4;
  --alert:#A4473A; --alert-wash:#F8ECEA;           /* app-only: overdue */
  --line:rgba(20,32,51,.08); --line-2:#D8DEE8; --line-blue:rgba(79,114,216,.28);
  --radius-sm:8px; --radius:12px; --radius-lg:20px;
  --shadow-1:0 1px 2px rgba(19,36,58,.04), 0 10px 28px -16px rgba(19,36,58,.14);
  --shadow-2:0 1px 2px rgba(19,36,58,.05), 0 18px 40px -20px rgba(19,36,58,.2);
  --ring:0 0 0 4px rgba(79,114,201,.14);
  --ease:cubic-bezier(.22,1,.36,1); --fast:180ms; --normal:320ms;
  --font-logo:"Jost","Century Gothic",sans-serif;
  --font-display:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --font-body:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  --gutter:2rem; --btn-h:2.5rem;
}
@media (max-width:767px){ :root{ --gutter:1rem; --btn-h:2.75rem; } }

*{box-sizing:border-box; margin:0; padding:0;}
html{-webkit-text-size-adjust:100%; font-synthesis:none;}
body{
  background:radial-gradient(60% 420px at 85% 0, rgba(221,232,248,.75), rgba(230,228,250,.25) 45%, transparent 75%) no-repeat, var(--bg);
  color:var(--ink); font:400 .9375rem/1.55 var(--font-body);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; min-height:100vh;
}
a{color:inherit; text-decoration:none;}
button,input,select,textarea{font:inherit; color:inherit;}
button{background:none; border:0; cursor:pointer; text-align:inherit;}
svg{display:block; flex:none;}
ul{list-style:none;}
code{font:400 .875em var(--font-mono); background:var(--surface-cool); padding:.1em .35em; border-radius:4px;}
:focus-visible{outline:2px solid var(--blue); outline-offset:2px; border-radius:4px;}
[hidden]{display:none !important;}

/* ---------- top bar ---------- */
.banner{
  background:var(--human-wash); color:var(--human-ink); border-bottom:1px solid rgba(160,118,60,.2);
  font:500 .75rem/1.4 var(--font-mono); letter-spacing:.04em; text-align:center; padding:.5rem var(--gutter);
}
.topbar{
  position:sticky; top:0; z-index:20; padding-top:env(safe-area-inset-top);
  background:rgba(248,250,252,.86); -webkit-backdrop-filter:saturate(1.4) blur(10px); backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar-in{max-width:75rem; margin:0 auto; padding:0 var(--gutter); height:3.75rem; display:flex; align-items:center; gap:1.5rem;}
.brand{display:flex; align-items:center; gap:9px; color:var(--deep);}
.brand svg{width:15px; height:17px; overflow:visible; filter:drop-shadow(0 0 3px rgba(94,123,216,.22));}
.wordmark{font:300 1.0625rem/1 var(--font-logo); letter-spacing:.18em; text-transform:uppercase; margin-right:-.18em;}
.wordmark .ia{color:#35529C; text-shadow:0 0 12px rgba(94,123,216,.28);}
.nav{display:flex; gap:.25rem;}
.nav a{font:400 .8125rem/1 var(--font-mono); letter-spacing:.02em; color:var(--ink-2); padding:.625rem .75rem; border-radius:var(--radius-sm); transition:color var(--fast) var(--ease), background-color var(--fast) var(--ease);}
.nav a:hover{color:var(--ink);}
.nav a[aria-current="page"]{color:var(--ink); background:var(--surface); box-shadow:inset 0 0 0 1px var(--line-2);}
.menu{position:relative; margin-left:auto;}
.menu summary{
  list-style:none; width:2.25rem; height:2.25rem; border-radius:50%; display:grid; place-items:center; cursor:pointer;
  border:1px solid var(--line-2); background:var(--surface); color:var(--ink-2);
}
.menu summary::-webkit-details-marker{display:none;}
.menu summary:hover,.menu[open] summary{color:var(--blue-ink); border-color:var(--line-blue);}
.menu-pop{
  position:absolute; right:0; top:calc(100% + .5rem); width:16rem; padding:.375rem;
  background:var(--surface); border:1px solid var(--line-2); border-radius:var(--radius); box-shadow:var(--shadow-2);
}
.menu-pop .account{padding:.5rem .625rem .625rem; margin-bottom:.25rem; border-bottom:1px solid var(--line); font-size:.8125rem; color:var(--ink-2); overflow-wrap:anywhere;}
.menu-pop button{display:block; width:100%; padding:.5625rem .625rem; border-radius:6px; font-size:.875rem;}
.menu-pop button:hover{background:var(--blue-wash); color:var(--blue-ink);}
body.gated .nav,body.gated .menu{display:none;}

/* ---------- page ---------- */
.shell{max-width:75rem; margin:0 auto; padding:1.75rem var(--gutter) 4rem;}
.loading{color:var(--ink-3); padding:3rem 0;}
.page-head{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1rem 1.5rem; margin-bottom:1.5rem;}
.eyebrow{
  display:flex; align-items:center; gap:.625rem; margin-bottom:.5rem; color:var(--blue-ink);
  font:500 .75rem/1.4 var(--font-mono); letter-spacing:.12em; text-transform:uppercase;
}
.eyebrow::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--blue); box-shadow:0 0 0 4px rgba(79,114,216,.12);}
h1{font:500 clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem)/1.1 var(--font-display); letter-spacing:-.025em; overflow-wrap:anywhere;}
h2{font:500 1.0625rem/1.25 var(--font-display); letter-spacing:-.015em;}
h3{font:500 1rem/1.3 var(--font-display); letter-spacing:-.01em;}
.head-meta{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .75rem; margin-top:.625rem; color:var(--ink-2); font-size:.875rem;}
.head-actions{display:flex; flex-wrap:wrap; gap:.5rem;}
.back{display:inline-flex; align-items:center; gap:.375rem; margin-bottom:1rem; color:var(--ink-2); font:400 .8125rem/1 var(--font-mono); letter-spacing:.02em; padding:.375rem 0;}
.back:hover{color:var(--blue-ink);}
.page-foot{margin-top:1.5rem;}

/* ---------- buttons ---------- */
.btn{
  min-height:var(--btn-h); padding:0 1rem; border-radius:var(--radius-sm); border:1px solid transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem; white-space:nowrap;
  font:500 .8125rem/1.2 var(--font-mono); letter-spacing:.02em;
  transition:transform var(--normal) var(--ease), background-color var(--normal) var(--ease), color var(--normal) var(--ease), border-color var(--normal) var(--ease), box-shadow var(--normal) var(--ease);
}
.btn svg{width:14px; height:14px;}
.btn:active{transform:scale(.98);}
.btn-solid{background:var(--deep); color:#fff; border-color:var(--deep);}
.btn-solid:hover{background:#1B3150; border-color:#1B3150; box-shadow:var(--shadow-1);}
.btn-ghost{background:rgba(255,255,255,.7); color:var(--ink); border-color:var(--line-2);}
.btn-ghost:hover{background:#fff; border-color:var(--line-blue); color:var(--blue-ink);}
.btn-sm{min-height:2.25rem; padding:0 .875rem;}
.btn[disabled]{opacity:.55; pointer-events:none;}
.btn-google{width:100%; min-height:3rem; gap:.75rem; font-size:.875rem;}
.icon-btn{width:2.25rem; height:2.25rem; border-radius:var(--radius-sm); display:grid; place-items:center; color:var(--ink-2); font-size:1.25rem; line-height:1; flex:none;}
.icon-btn:hover{background:var(--blue-wash); color:var(--blue-ink);}
.linkbtn{font:500 .8125rem/1.4 var(--font-mono); letter-spacing:.02em; color:var(--blue-ink); padding:.375rem 0;}
.linkbtn:hover{text-decoration:underline; text-underline-offset:3px;}

/* ---------- panels ---------- */
.panel{background:var(--surface); border:1px solid var(--line-2); border-radius:var(--radius); box-shadow:var(--shadow-1); padding:1.125rem 1.375rem 1.25rem; min-width:0;}
.panel.is-alert{border-color:rgba(164,71,58,.32);}
.panel.is-alert h2{color:var(--alert);}
.panel-head{display:flex; align-items:center; justify-content:space-between; gap:.75rem; min-height:2.25rem; margin-bottom:.5rem;}
.panel-head h2{display:flex; align-items:baseline; gap:.5rem;}
.count{font:500 .75rem/1 var(--font-mono); color:var(--ink-3); letter-spacing:.02em;}
.empty{color:var(--ink-3); font-size:.875rem; padding:.5rem 0 .75rem;}
.cols{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:1.25rem; align-items:start;}
.col{display:grid; gap:1.25rem; min-width:0;}

/* ---------- badges & meta ---------- */
.badge{
  display:inline-flex; align-items:center; gap:.375rem; padding:.1875rem .5rem; border-radius:var(--radius-sm); white-space:nowrap;
  font:500 .6875rem/1.3 var(--font-mono); letter-spacing:.06em; text-transform:uppercase;
  background:var(--surface-cool); color:var(--ink-2); border:1px solid var(--line);
}
.badge::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.75;}
.s-active{background:var(--blue-wash); color:var(--blue-ink); border-color:rgba(79,114,216,.2);}
.s-lead,.s-on_hold{background:var(--human-wash); color:var(--human-ink); border-color:rgba(160,118,60,.22);}
.s-archived{background:transparent; border-style:dashed;}
.s-archived::before{display:none;}
.meta{display:flex; flex-wrap:wrap; align-items:center; gap:.25rem .75rem; margin-top:.25rem; font:400 .75rem/1.45 var(--font-mono); letter-spacing:.02em; color:var(--ink-2);}
.meta a{border-bottom:1px solid var(--line-2);}
.meta a:hover{color:var(--blue-ink); border-color:var(--blue-ink);}
.due.over{color:var(--alert); font-weight:500;}
.due.today{color:var(--human-ink); font-weight:500;}
.who-client{color:var(--human-ink);}
.who-me{color:var(--blue-ink);}

/* ---------- tasks ---------- */
.list > li{border-top:1px solid var(--line);}
.list > li:first-child{border-top:0;}
.task{display:flex; gap:.75rem; align-items:flex-start; padding:.75rem 0;}
.check{
  position:relative; width:1.375rem; height:1.375rem; margin-top:.0625rem; border-radius:50%;
  border:1.5px solid #B4BECD; display:grid; place-items:center; color:transparent; flex:none;
  transition:background-color var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.check::after{content:""; position:absolute; inset:-11px;}  /* 44px touch target */
.check svg{width:12px; height:12px;}
.check:hover{border-color:var(--blue); color:var(--blue);}
.check[aria-pressed="true"]{background:var(--blue); border-color:var(--blue); color:#fff;}
.check.sm{width:1.125rem; height:1.125rem; margin-top:0;}
.check.sm svg{width:10px; height:10px;}
.task-body{flex:1; min-width:0;}
.task-title,.meet-title{font-weight:500; line-height:1.4; overflow-wrap:anywhere; text-align:left; transition:color var(--fast) var(--ease);}
.task-title:hover,.meet-title:hover{color:var(--blue-ink);}
.task.is-done .task-title{color:var(--ink-3); text-decoration:line-through; text-decoration-color:rgba(20,32,51,.3);}
.done-list{margin-top:.25rem;}
.quick-add{display:grid; grid-template-columns:minmax(0,1fr) 10rem 6.5rem auto; gap:.5rem; margin-bottom:.5rem;}

/* ---------- meetings & projects ---------- */
.meet{padding:.75rem 0;}
.meet .when{font:500 .75rem/1.4 var(--font-mono); letter-spacing:.02em; color:var(--blue-ink); margin-bottom:.125rem;}
.meet.past .when{color:var(--ink-3);}
.notes,.plan{white-space:pre-wrap; color:var(--ink-2); font-size:.875rem; max-width:65ch; overflow-wrap:anywhere;}
.notes{margin-top:.375rem;}
.proj{padding:.875rem 0;}
.proj-top{display:flex; align-items:center; flex-wrap:wrap; gap:.5rem .625rem;}
.proj-name{font-weight:500; margin-right:auto;}
.proj-name:hover{color:var(--blue-ink);}
.next-ms{font-size:.8125rem; color:var(--ink-2); margin:.375rem 0 .5rem;}
progress{display:block; appearance:none; -webkit-appearance:none; width:100%; height:4px; border:0; border-radius:4px; background:var(--surface-cool); overflow:hidden; color:var(--blue);}
progress::-webkit-progress-bar{background:var(--surface-cool);}
progress::-webkit-progress-value{background:var(--blue); border-radius:4px;}
progress::-moz-progress-bar{background:var(--blue); border-radius:4px;}
.proj-card{border:1px solid var(--line); border-radius:var(--radius); padding:.875rem 1rem 1rem; background:linear-gradient(180deg,#fff,#FAFBFD);}
.proj-card + .proj-card{margin-top:.75rem;}
.proj-card h3{margin-right:auto;}
.proj-card .plan{margin:.5rem 0 .875rem;}
.ms-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:.5rem;}
.label{font:500 .6875rem/1.3 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);}
.ms-list{margin-top:.5rem;}
.ms-list li{display:flex; align-items:center; gap:.625rem; padding:.375rem 0; font-size:.875rem;}
.ms-title{flex:1; min-width:0; overflow-wrap:anywhere;}
.ms-list .is-done .ms-title{color:var(--ink-3); text-decoration:line-through; text-decoration-color:rgba(20,32,51,.3);}
.ms-list .due{font:400 .75rem/1.4 var(--font-mono); color:var(--ink-2); white-space:nowrap;}

/* ---------- directory ---------- */
.toolbar{display:flex; flex-wrap:wrap; align-items:center; gap:.75rem 1rem; margin-bottom:1.25rem;}
.search{
  flex:1 1 18rem; display:flex; align-items:center; gap:.5rem; min-height:2.75rem; padding:0 .875rem;
  background:var(--surface); border:1px solid var(--line-2); border-radius:var(--radius-sm);
  transition:border-color var(--normal) var(--ease), box-shadow var(--normal) var(--ease);
}
.search:focus-within{border-color:var(--blue); box-shadow:var(--ring);}
.search svg{color:var(--ink-3);}
.search input{flex:1; min-width:0; border:0; outline:0; background:none; font-size:1rem; height:2.625rem;}
.seg{display:inline-flex; flex-wrap:wrap; gap:2px; padding:3px; background:var(--surface-cool); border:1px solid var(--line); border-radius:var(--radius-sm);}
.seg button{font:500 .75rem/1 var(--font-mono); letter-spacing:.02em; padding:.5rem .625rem; border-radius:6px; color:var(--ink-2);}
.seg button:hover{color:var(--ink);}
.seg button[aria-pressed="true"]{background:var(--surface); color:var(--ink); box-shadow:0 1px 2px rgba(19,36,58,.08), inset 0 0 0 1px var(--line-2);}
.toggle{display:inline-flex; align-items:center; gap:.5rem; font-size:.875rem; color:var(--ink-2); cursor:pointer;}
.toggle input{width:1rem; height:1rem; accent-color:var(--blue);}
.dir{background:var(--surface); border:1px solid var(--line-2); border-radius:var(--radius); box-shadow:var(--shadow-1); overflow:hidden;}
.dir-row,.dir-head{display:grid; grid-template-columns:minmax(0,2.2fr) minmax(0,1.4fr) 8.5rem minmax(0,2.4fr); gap:1rem; align-items:center; padding:.875rem 1.25rem;}
.dir-head{background:var(--surface-cool); border-bottom:1px solid var(--line); font:500 .6875rem/1.3 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);}
.dir li + li .dir-row{border-top:1px solid var(--line);}
.dir-row{transition:background-color var(--fast) var(--ease);}
.dir-row:hover{background:var(--blue-wash);}
.dir-name b{display:block; font:500 1rem/1.3 var(--font-display); letter-spacing:-.01em; overflow-wrap:anywhere;}
.dir-name small{display:block; color:var(--ink-2); font-size:.8125rem;}
.dir-service{color:var(--ink-2); font-size:.875rem;}
.dir-status{display:flex; flex-wrap:wrap; gap:.25rem;}
.dir-next .t{display:block; font-size:.875rem; font-weight:500; overflow-wrap:anywhere;}
.dir-next .meta{margin-top:.125rem;}
.dir-next .none{color:var(--ink-3); font-size:.875rem;}

/* ---------- client page ---------- */
.client-grid{display:grid; grid-template-columns:minmax(0,1fr) 20rem; grid-template-areas:"main side"; gap:1.25rem; align-items:start;}
.client-main{grid-area:main; display:grid; gap:1.25rem; min-width:0;}
.client-side{grid-area:side; display:grid; gap:1.25rem; min-width:0; position:sticky; top:5rem;}
.kv{display:grid; gap:.75rem;}
.kv dt{font:500 .6875rem/1.3 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:.125rem;}
.kv dd{overflow-wrap:anywhere;}
.kv dd a{color:var(--blue-ink);}
.kv dd a:hover{text-decoration:underline; text-underline-offset:3px;}
.links a{display:flex; align-items:center; gap:.75rem; padding:.5rem .625rem; margin:0 -.625rem; border-radius:var(--radius-sm); color:var(--ink-2);}
.links a:hover{background:var(--blue-wash); color:var(--blue-ink);}
.links b{display:block; color:var(--ink); font-weight:500; font-size:.875rem; overflow-wrap:anywhere;}
.links small{display:block; font:400 .6875rem/1.4 var(--font-mono); color:var(--ink-3);}

/* ---------- forms ---------- */
.field label,.rep legend{display:block; font-size:.8125rem; font-weight:500; margin-bottom:.375rem;}
.field small{display:block; color:var(--ink-3); font-size:.75rem; margin-top:.25rem;}
.req{color:var(--alert);}
.field :is(input,select,textarea),.quick-add :is(input,select),.rep-row input:not([type=checkbox]){
  display:block; width:100%; min-height:2.625rem; padding:.5rem .75rem; font-size:1rem; line-height:1.4;
  background:var(--surface); border:1px solid var(--line-2); border-radius:var(--radius-sm);
  transition:border-color var(--normal) var(--ease), box-shadow var(--normal) var(--ease);
}
.field textarea{min-height:8rem; resize:vertical;}
:is(.field,.quick-add,.rep-row) :is(input,select,textarea):hover{border-color:rgba(20,32,51,.22);}
:is(.field,.quick-add,.rep-row) :is(input,select,textarea):focus{outline:none; border-color:var(--blue); box-shadow:var(--ring);}
:is(.field,.quick-add) select{
  -webkit-appearance:none; appearance:none; padding-right:2.25rem;
  background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235F6B7A' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right .875rem center;
}
.rep{border:0; min-width:0;}
.rep-row{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) auto; gap:.5rem; align-items:center; margin-bottom:.5rem;}
.rep-row.ms{grid-template-columns:auto minmax(0,1fr) 10rem auto;}
.rep-row input[type=checkbox]{width:1.125rem; height:1.125rem; accent-color:var(--blue);}
.form-error{grid-column:1/-1; color:var(--alert); background:var(--alert-wash); font-size:.875rem; padding:.5rem .75rem; border-radius:var(--radius-sm);}

/* ---------- dialog ---------- */
dialog{border:0; padding:0; background:transparent; color:var(--ink); width:calc(100% - 2rem); max-width:40rem; margin:auto; overflow:visible;}
dialog::backdrop{background:rgba(19,36,58,.32); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);}
.dlg-form{display:flex; flex-direction:column; max-height:calc(100dvh - 2rem); background:var(--surface); border:1px solid var(--line-2); border-radius:var(--radius-lg); box-shadow:var(--shadow-2);}
.dlg-head{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.125rem 1.375rem .375rem;}
.dlg-head h2{font-size:1.25rem;}
.dlg-body{display:grid; grid-template-columns:1fr 1fr; gap:.875rem 1rem; padding:.625rem 1.375rem 1.125rem; overflow:auto;}
.dlg-body :is(.full,.rep,.toggle){grid-column:1/-1;}
.dlg-foot{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; padding:.875rem 1.375rem; border-top:1px solid var(--line);}
.spacer{flex:1;}

/* ---------- toast ---------- */
.toast{
  position:fixed; z-index:60; left:50%; transform:translateX(-50%); bottom:calc(1.25rem + env(safe-area-inset-bottom));
  display:flex; align-items:center; gap:1rem; max-width:calc(100vw - 2rem); padding:.625rem .75rem .625rem 1rem;
  background:var(--deep); color:#fff; border-radius:var(--radius-sm); box-shadow:var(--shadow-2); font-size:.875rem;
}
.toast .linkbtn{color:#B9CBF7;}

/* ---------- sign-in gate ---------- */
.gate{min-height:calc(100vh - 10rem); display:grid; place-items:center;}
.gate-card{width:100%; max-width:26rem; padding:2rem; background:var(--surface); border:1px solid var(--line-2); border-radius:var(--radius-lg); box-shadow:var(--shadow-2);}
.gate-card h1{font-size:1.75rem; margin-bottom:.75rem;}
.gate-card p{color:var(--ink-2); margin-bottom:1.25rem;}
.gate-card .fine{font-size:.8125rem; color:var(--ink-3); margin:0 0 1.25rem;}
.gate-card code{user-select:all; overflow-wrap:anywhere;}
.gate-card .form-error{margin:1rem 0 0;}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .cols{grid-template-columns:minmax(0,1fr);}
  /* phone order: contact, action items, project, meetings, then links */
  .client-grid{display:flex; flex-direction:column; align-items:stretch;}
  .client-main,.client-side{display:contents;}
  .p-links{order:1;}
}
@media (max-width:720px){
  .dir-head{display:none;}
  .dir-row{grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"name status" "service service" "next next"; gap:.375rem .75rem; padding:1rem;}
  .dir-name{grid-area:name;} .dir-status{grid-area:status; justify-content:flex-end;}
  .dir-service{grid-area:service;} .dir-next{grid-area:next; padding-top:.5rem; border-top:1px dashed var(--line);}
  .seg{flex:1 1 auto;}
}
@media (max-width:600px){
  .shell{padding-top:1.25rem;}
  .topbar-in{gap:.75rem;}
  .nav a{padding:.625rem .5rem;}
  .panel{padding:1rem 1rem 1.125rem;}
  .page-head .head-actions{width:100%;}
  .page-head .head-actions .btn{flex:1;}
  .quick-add{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .quick-add input[name=title],.quick-add .btn{grid-column:1/-1;}
  .dlg-body{grid-template-columns:minmax(0,1fr);}
  dialog{width:100%; max-width:100%; margin:auto 0 0;}
  .dlg-form{border-radius:var(--radius-lg) var(--radius-lg) 0 0; max-height:92dvh; padding-bottom:env(safe-area-inset-bottom);}
  .dlg-foot .btn{flex:1;}
  .dlg-foot .spacer{display:none;}
  .rep-row{grid-template-columns:minmax(0,1fr) auto;}
  .rep-row > input[data-k=label]{grid-column:1/-1;}
  .rep-row.ms{grid-template-columns:auto minmax(0,1fr) auto;}
  .rep-row.ms input[data-k=title]{grid-column:2/-1;}
  .rep-row.ms input[data-k=due]{grid-column:2/3;}
}
/* phones and touch screens: comfortable tap targets (about 40-44px) */
@media (max-width:767px), (pointer:coarse){
  .seg button{min-height:2.5rem; padding:0 .75rem;}
  .back,.linkbtn{min-height:2.75rem; display:inline-flex; align-items:center;}
  .kv dd a{display:inline-block; padding:.625rem 0;}
  .brand{min-height:2.75rem;}
  .toggle{min-height:2.75rem;}
  .proj-name{padding:.5rem 0;}
}
@media (max-width:370px){ .wordmark{display:none;} }
@media (prefers-reduced-motion:reduce){ *{transition:none !important;} }