/* Social Calendar — a weekend-first, deliberately colorful planner */
:root {
  --bg:          #f4f2fb;
  --bg-tint:     radial-gradient(1200px 600px at 12% -8%, #ffe6f2 0%, transparent 60%),
                 radial-gradient(1000px 520px at 92% -4%, #e2f0ff 0%, transparent 58%),
                 radial-gradient(900px 480px at 50% 108%, #fff3dc 0%, transparent 55%);
  --surface:     #ffffff;
  --surface-2:   #f8f7fd;
  --surface-3:   #f1eff9;
  --border:      #e6e3f2;
  --border-soft: #efedf7;
  --text:        #1b1a2e;
  --muted:       #6a6683;
  --faint:       #9b97b2;

  --grape:  #7c4dff;  --grape-soft:  #eee8ff;
  --punch:  #ff4d8d;  --punch-soft:  #ffe6ef;
  --tang:   #ff8a2b;  --tang-soft:   #fff0e0;
  --sun:    #f2b705;  --sun-soft:    #fff6da;
  --lime:   #16a34a;  --lime-soft:   #e3f8ec;
  --aqua:   #06a4c9;  --aqua-soft:   #e0f6fb;
  --ocean:  #2f6bff;  --ocean-soft:  #e6edff;

  --accent: var(--grape); --accent-soft: var(--grape-soft);
  --ok: var(--lime);      --ok-soft: var(--lime-soft);
  --warn: var(--tang);    --warn-soft: var(--tang-soft);
  --alert: var(--punch);  --alert-soft: var(--punch-soft);
  --trip: var(--aqua);    --trip-soft: var(--aqua-soft);

  --radius:    18px;
  --radius-sm: 11px;
  --shadow:    0 1px 2px rgba(27,26,46,.04), 0 10px 26px -12px rgba(27,26,46,.16);
  --shadow-lg: 0 2px 4px rgba(27,26,46,.05), 0 22px 44px -18px rgba(27,26,46,.26);
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          #0f0e18;
    --bg-tint:     radial-gradient(1200px 600px at 12% -8%, #2a1430 0%, transparent 60%),
                   radial-gradient(1000px 520px at 92% -4%, #0f2138 0%, transparent 58%),
                   radial-gradient(900px 480px at 50% 108%, #2a2110 0%, transparent 55%);
    --surface:     #191826;
    --surface-2:   #1f1e2e;
    --surface-3:   #262539;
    --border:      #2d2b42;
    --border-soft: #252338;
    --text:        #eeecf7;
    --muted:       #a09cba;
    --faint:       #6f6b8a;

    --grape: #a98bff; --grape-soft: #2a2145;
    --punch: #ff79a8; --punch-soft: #3a1b2a;
    --tang:  #ffa65c; --tang-soft:  #3a2616;
    --sun:   #ffc93d; --sun-soft:   #3a2f12;
    --lime:  #4ade80; --lime-soft:  #15301f;
    --aqua:  #43c9e8; --aqua-soft:  #0e2b35;
    --ocean: #7aa2ff; --ocean-soft: #192442;
    --shadow:    0 1px 2px rgba(0,0,0,.4), 0 12px 28px -14px rgba(0,0,0,.7);
    --shadow-lg: 0 2px 4px rgba(0,0,0,.5), 0 26px 48px -20px rgba(0,0,0,.8);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--text);
  background: var(--bg-tint), var(--bg);
  background-attachment: fixed;
  font: 15px/1.5 var(--sans);
}
a { color: inherit; text-decoration: none; }

/* ---------------------------------------------------------------- shell */
header.top {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--border);
}
.top-inner {
  max-width: 1340px; margin: 0 auto; padding: 11px 20px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 750; font-size: 16.5px; letter-spacing: -.03em; }
.brand .mark {
  width: 31px; height: 31px; flex: 0 0 auto; border-radius: 9px;
  box-shadow: 0 4px 13px -4px var(--punch);
  transition: transform .2s cubic-bezier(.34,1.56,.64,1);
}
.brand:hover .mark { transform: rotate(-8deg) scale(1.07); }
.brand .wordmark {
  font-size: 19px; font-weight: 800; letter-spacing: -.045em;
  background: linear-gradient(100deg, var(--grape), var(--punch) 55%, var(--tang));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
nav.tabs { display: flex; gap: 3px; flex-wrap: wrap; margin-left: auto; }
nav.tabs a {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 999px; font-size: 13.5px; color: var(--muted);
  font-weight: 600; white-space: nowrap; transition: all .14s;
}
nav.tabs a:hover { background: var(--surface-3); color: var(--text); }
nav.tabs a.on {
  color: #fff; background: linear-gradient(135deg, var(--grape), var(--punch));
  box-shadow: 0 5px 14px -5px var(--grape);
}
nav.tabs a .em { font-size: 14px; }

main { max-width: 1340px; margin: 0 auto; padding: 24px 20px 90px; }

h1 { font-size: 27px; letter-spacing: -.035em; margin: 0 0 3px; font-weight: 760; }
h2 { font-size: 16.5px; letter-spacing: -.02em; margin: 0 0 13px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
h3 { font-size: 13.5px; margin: 0 0 8px; font-weight: 680; }
.sub { color: var(--muted); font-size: 13.5px; margin: 0 0 22px; }
.page-head { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.page-head .sub { margin: 0; }
.page-head .spacer { flex: 1; }

/* ----------------------------------------------------------- primitives */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.pad { padding: 17px 18px; }
.btn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 8px 14px; border-radius: 999px; font: inherit; font-size: 13.5px;
  font-weight: 640; border: 1.5px solid var(--border); background: var(--surface);
  color: var(--text); transition: transform .12s, box-shadow .12s, background .12s;
}
.btn:hover { background: var(--surface-2); transform: translateY(-1px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0); }
.btn.primary {
  background: linear-gradient(135deg, var(--grape), var(--punch)); border-color: transparent; color: #fff;
  box-shadow: 0 6px 18px -6px var(--grape);
}
.btn.primary:hover { filter: brightness(1.06); box-shadow: 0 10px 24px -8px var(--grape); }
.btn.sm { padding: 5px 11px; font-size: 12.5px; }
.btn.ghost { border-color: transparent; background: transparent; color: var(--muted); }
.btn.ghost:hover { background: var(--surface-3); color: var(--text); box-shadow: none; }
.btn.danger { color: var(--alert); border-color: transparent; background: transparent; }
.btn.danger:hover { background: var(--alert-soft); box-shadow: none; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.pill {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px;
  border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .005em;
  background: var(--surface-3); color: var(--muted); white-space: nowrap;
}
.pill.ok     { background: var(--ok-soft);     color: var(--ok); }
.pill.warn   { background: var(--warn-soft);   color: var(--warn); }
.pill.alert  { background: var(--alert-soft);  color: var(--alert); }
.pill.accent { background: var(--accent-soft); color: var(--accent); }
.pill.trip   { background: var(--trip-soft);   color: var(--trip); }
.pill.ocean  { background: var(--ocean-soft);  color: var(--ocean); }
.pill.sun    { background: var(--sun-soft);    color: #9a7400; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pill.sun { color: var(--sun); } }

.muted { color: var(--muted); } .faint { color: var(--faint); }
.small { font-size: 12.5px; } .tiny { font-size: 11.5px; }
.mono { font-family: var(--mono); font-size: 12px; }
.right { text-align: right; } .nowrap { white-space: nowrap; }
.empty {
  color: var(--faint); font-size: 13.5px; text-align: center; padding: 34px 18px;
  border: 2px dashed var(--border); border-radius: var(--radius); background: var(--surface-2);
}
.empty .big { font-size: 34px; display: block; margin-bottom: 8px; opacity: .85; }

/* --------------------------------------------------------------- forms */
label.f { display: block; margin-bottom: 13px; }
label.f > span { display: block; font-size: 11.5px; font-weight: 700; color: var(--muted); margin-bottom: 5px; letter-spacing: .01em; }
input[type=text], input[type=date], input[type=time], input[type=number],
input[type=search], input[type=url], input[type=email], input[type=password],
select, textarea {
  width: 100%; padding: 9px 12px; font: inherit; font-size: 14px;
  background: var(--surface-2); color: var(--text);
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  transition: border-color .12s, background .12s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent); background: var(--surface);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
textarea { resize: vertical; min-height: 72px; line-height: 1.55; }
select[multiple] { min-height: 140px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 14px; }
.check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; margin-bottom: 13px; font-weight: 550; }
.check input { width: auto; }
.filters { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.filters input, .filters select { width: auto; min-width: 155px; }

details.form-block > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 15px; border-radius: 999px; font-size: 13.5px; font-weight: 640;
  border: 1.5px solid transparent; color: #fff;
  background: linear-gradient(135deg, var(--grape), var(--punch));
  box-shadow: 0 6px 18px -6px var(--grape);
}
details.form-block > summary::-webkit-details-marker { display: none; }
details.form-block > summary:hover { filter: brightness(1.06); }
details.form-block .body {
  margin-top: 14px; padding: 18px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow);
}
details.inline > summary {
  cursor: pointer; list-style: none; font-size: 12px; color: var(--muted); font-weight: 700;
}
details.inline > summary::-webkit-details-marker { display: none; }
details.inline > summary:hover { color: var(--accent); }
details.inline .body { margin-top: 11px; padding-top: 13px; border-top: 1px dashed var(--border); }

/* ------------------------------------------------------- weekend board */
.weekend {
  margin-bottom: 16px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
  transition: box-shadow .18s, transform .18s;
}
.weekend:hover { box-shadow: var(--shadow-lg); }
.weekend.now { border-color: transparent; box-shadow: 0 0 0 2.5px var(--grape), var(--shadow-lg); }
.weekend-head {
  display: flex; align-items: center; gap: 11px; padding: 12px 18px; flex-wrap: wrap;
  border-bottom: 1px solid var(--border-soft);
  background: linear-gradient(100deg, var(--surface-3), var(--surface) 70%);
}
.weekend.now .weekend-head { background: linear-gradient(100deg, var(--grape-soft), var(--punch-soft) 85%); }
.weekend-head .wk { font-weight: 740; font-size: 15px; letter-spacing: -.025em; white-space: nowrap; }
.weekend-head .spacer { flex: 1; }
.weekend-body { display: grid; grid-template-columns: repeat(3, 1fr); }

.day { border-right: 1px solid var(--border-soft); padding: 0 0 14px; min-width: 0; }
.day:last-child { border-right: none; }
.day.past { opacity: .45; }
.day-head {
  display: flex; align-items: center; gap: 7px; padding: 9px 15px 8px;
  border-bottom: 1px solid var(--border-soft); margin-bottom: 11px;
}
.day-head .em { font-size: 15px; }
.day-head .name { font-weight: 720; font-size: 13px; letter-spacing: .01em; }
.day-head .num { color: var(--faint); font-size: 11.5px; font-family: var(--mono); margin-left: auto; }
.day.fri .day-head { background: var(--sun-soft); }
.day.sat .day-head { background: var(--punch-soft); }
.day.sun .day-head { background: var(--aqua-soft); }
.day.fri .day-head .name { color: #9a7400; }
.day.sat .day-head .name { color: var(--punch); }
.day.sun .day-head .name { color: var(--aqua); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .day.fri .day-head .name { color: var(--sun); } }
.day.today .day-head::after {
  content: "TODAY"; font-size: 9px; font-weight: 800; letter-spacing: .09em;
  background: var(--grape); color: #fff; padding: 2px 6px; border-radius: 999px;
}
.day .slots { padding: 0 13px; }

.slot { margin-bottom: 11px; }
.slot:last-child { margin-bottom: 0; }
.slot-label {
  font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 6px; display: flex; align-items: center; gap: 6px;
}
.slot-label .add { margin-left: auto; color: var(--faint); font-size: 17px; line-height: 1; padding: 0 4px; border-radius: 6px; }
.slot-label .add:hover { color: #fff; background: var(--grape); }

.plan {
  display: block; padding: 9px 11px; border-radius: var(--radius-sm);
  background: var(--surface-2); margin-bottom: 6px;
  border-left: 4px solid var(--faint); transition: transform .12s, box-shadow .12s;
}
.plan:hover { transform: translateX(2px); box-shadow: var(--shadow); }
.plan.confirmed { border-left-color: var(--lime);  background: var(--lime-soft); }
.plan.proposed  { border-left-color: var(--tang);  background: var(--tang-soft); }
.plan.idea      { border-left-color: var(--faint); }
.plan.done      { border-left-color: var(--grape); background: var(--grape-soft); opacity: .78; }
.plan .t { font-weight: 650; font-size: 13px; line-height: 1.35; display: flex; gap: 5px; align-items: baseline; }
.plan .w { color: var(--muted); font-size: 11.5px; margin-top: 3px; display: flex; align-items: center; gap: 4px; }
.open-slot {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 9px; border: 1.5px dashed var(--border); border-radius: var(--radius-sm);
  color: var(--faint); font-size: 12px; font-weight: 600; transition: all .14s;
}
.open-slot:hover { border-color: var(--grape); color: var(--grape); background: var(--grape-soft); border-style: solid; }

.trip-banner {
  display: flex; align-items: center; gap: 9px; padding: 9px 18px; font-size: 13px;
  background: linear-gradient(100deg, var(--aqua-soft), transparent);
  color: var(--trip); border-bottom: 1px solid var(--border-soft); font-weight: 680;
}

/* ------------------------------------------------------------- layouts */
.cols { display: grid; grid-template-columns: 1fr 340px; gap: 20px; align-items: start; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 14px; }
.statrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 11px; margin-bottom: 20px; }
.stat {
  border-radius: var(--radius); padding: 13px 15px; border: 1px solid transparent;
  background: var(--surface); box-shadow: var(--shadow); position: relative; overflow: hidden;
}
.stat::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--c, var(--grape));
}
.stat .n { font-size: 25px; font-weight: 780; letter-spacing: -.04em; line-height: 1.05; color: var(--c, var(--text)); }
.stat .l { font-size: 11px; color: var(--muted); margin-top: 3px; font-weight: 650; }

/* -------------------------------------------------------------- avatar */
.av {
  width: 38px; height: 38px; border-radius: 13px; flex: 0 0 auto;
  display: grid; place-items: center; font-weight: 760; font-size: 14px; color: #fff;
  letter-spacing: -.02em; box-shadow: 0 4px 12px -5px rgba(0,0,0,.45);
}
.av.lg { width: 56px; height: 56px; border-radius: 18px; font-size: 20px; }
.av.sm { width: 26px; height: 26px; border-radius: 9px; font-size: 10.5px; }

/* ---------------------------------------------------------- person card */
.person-card { display: flex; flex-direction: column; gap: 10px; padding: 15px; transition: transform .14s, box-shadow .14s; }
.person-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.person-card .top-line { display: flex; align-items: center; gap: 11px; }
.person-card .nm { font-weight: 720; font-size: 15px; letter-spacing: -.02em; }
.person-card .last { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.person-card .last b { color: var(--text); font-weight: 650; }
.dish { font-size: 12px; color: var(--muted); }
.dish b { color: var(--text); font-weight: 650; }
.bar { height: 5px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--lime), #0ea968); }
.bar > i.warn  { background: linear-gradient(90deg, var(--sun), var(--tang)); }
.bar > i.alert { background: linear-gradient(90deg, var(--tang), var(--punch)); }

/* --------------------------------------------------------------- lists */
.rows { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; gap: 13px; padding: 12px 16px; border-bottom: 1px solid var(--border-soft); }
.row:last-child { border-bottom: none; }
.row:hover { background: var(--surface-2); }
.row .grow { flex: 1; min-width: 0; }
.row .ttl { font-weight: 650; font-size: 13.5px; }
.row .meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.sec-head {
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); padding: 13px 16px 7px; border-bottom: 1px solid var(--border-soft);
  background: var(--surface-2); display: flex; align-items: center; gap: 7px;
}
.timeline { position: relative; padding-left: 20px; }
.timeline::before {
  content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 2.5px; border-radius: 3px;
  background: linear-gradient(180deg, var(--grape), var(--punch) 50%, var(--tang));
  opacity: .35;
}
.tl-item { position: relative; padding: 0 0 18px; }
.tl-item::before {
  content: ""; position: absolute; left: -20px; top: 6px; width: 11px; height: 11px;
  border-radius: 50%; background: var(--surface); border: 2.5px solid var(--grape);
}
.tl-item .when { font-size: 11.5px; color: var(--faint); font-family: var(--mono); font-weight: 600; }
.tl-item .what { font-weight: 670; font-size: 13.5px; margin: 2px 0 3px; }

.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.note-card { padding: 15px 16px; display: flex; flex-direction: column; gap: 9px; transition: transform .14s, box-shadow .14s; }
.note-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.note-card.pinned { box-shadow: 0 0 0 2px var(--sun), var(--shadow); }
.note-body { font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; color: var(--text); }
.fav-row { display: flex; align-items: flex-start; gap: 11px; padding: 10px 0; border-bottom: 1px dashed var(--border); }
.fav-row:last-child { border-bottom: none; }
.fav-row.been .nm { text-decoration: line-through; color: var(--muted); }
.fav-ico { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; font-size: 15px; background: var(--surface-3); flex: 0 0 auto; }

.trip-card { padding: 0; overflow: hidden; transition: transform .14s, box-shadow .14s; }
.trip-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.trip-hero {
  padding: 15px 16px; color: #fff; position: relative;
  background: linear-gradient(135deg, var(--grape), var(--punch) 60%, var(--tang));
}
.trip-hero.wishlist  { background: linear-gradient(135deg, #8b5cf6, #d946ef 60%, #f97316); }
.trip-hero.planning  { background: linear-gradient(135deg, #f59e0b, #ef4444 70%); }
.trip-hero.scheduled { background: linear-gradient(135deg, #0ea5e9, #10b981 70%); }
.trip-hero.been      { background: linear-gradient(135deg, #64748b, #475569 70%); }
.trip-hero .nm { font-weight: 780; font-size: 16.5px; letter-spacing: -.025em; line-height: 1.25; }
.trip-hero .dest { font-size: 12.5px; opacity: .92; margin-top: 2px; font-weight: 560; }
.trip-hero .em { position: absolute; right: 12px; top: 11px; font-size: 26px; opacity: .55; }
.trip-hero .hero-status {
  font-size: 9.5px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase;
  opacity: .88; margin-bottom: 3px;
}
.trip-hero.been { filter: saturate(.25) brightness(.8); }
.trip-meta { padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }

.scroll-x { overflow-x: auto; }

@media (max-width: 920px) {
  .cols { grid-template-columns: 1fr; }
  .weekend-body { grid-template-columns: 1fr; }
  .day { border-right: none; border-bottom: 1px solid var(--border-soft); }
  .day:last-child { border-bottom: none; }
  .grid2, .grid3 { grid-template-columns: 1fr; }
  main { padding: 16px 16px 70px; }
  nav.tabs { margin-left: 0; width: 100%; overflow-x: auto; padding-bottom: 2px; }
  h1 { font-size: 23px; }
}

/* Inline date scheduler on a trip */
.sched {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  padding: 7px 11px; border-radius: 999px; background: var(--surface-2);
  border: 1.5px dashed var(--border);
}
.sched input[type=date] { width: auto; padding: 5px 9px; font-size: 13px; border-radius: 8px; }

/* ------------------------------------------------- sortable trip list */
table.triplist { width: 100%; border-collapse: collapse; font-size: 13.5px; table-layout: fixed; }
table.triplist th:nth-child(1), table.triplist td:nth-child(1) { width: 25%; min-width: 190px; }
table.triplist th:nth-child(2), table.triplist td:nth-child(2) { width: 19%; }
table.triplist th:nth-child(3), table.triplist td:nth-child(3) { width: 10%; }
table.triplist th:nth-child(4), table.triplist td:nth-child(4) { width: 14%; }
table.triplist th:nth-child(5), table.triplist td:nth-child(5) { width: 12%; }
table.triplist th:nth-child(6), table.triplist td:nth-child(6) { width: 12%; }
table.triplist th:nth-child(7), table.triplist td:nth-child(7) { width: 14%; }
table.triplist thead th {
  /* Not sticky: pinning it under the sticky nav left a sliver where rows
     showed through and the first row sat half-hidden behind the header. */
  background: var(--surface-2); border-bottom: 1.5px solid var(--border);
  padding: 0; font-size: 10.5px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden;
}
table.triplist thead th a {
  display: flex; align-items: center; gap: 4px; padding: 11px 10px; color: inherit;
}
table.triplist thead th a:hover { color: var(--accent); background: var(--surface-3); }
table.triplist thead th.on { color: var(--accent); }
table.triplist thead th .arrow { opacity: .5; font-size: 9px; }
table.triplist thead th.on .arrow { opacity: 1; }
table.triplist tbody td {
  padding: 11px 10px; border-bottom: 1px solid var(--border-soft); vertical-align: middle;
}
table.triplist tbody tr:last-child td { border-bottom: none; }
table.triplist tbody tr:hover { background: var(--surface-2); }
table.triplist tbody tr.st-been { opacity: .72; }
table.triplist .tname {
  display: flex; align-items: baseline; gap: 8px; font-weight: 680; font-size: 14px;
  letter-spacing: -.015em;
}
table.triplist .tname > span:last-child { min-width: 0; }
table.triplist .tname:hover { color: var(--accent); }
table.triplist .tname .em { font-size: 16px; }
table.triplist .sub-bits { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 5px; }
table.triplist .sub-bits .pill { font-size: 10.5px; padding: 2px 7px; }

@media (max-width: 920px) {
  table.triplist { font-size: 12.5px; min-width: 820px; }
}

/* Notes and places reuse the trip table, with their own column widths */
table.notelist { table-layout: auto; }
table.notelist th:nth-child(1), table.notelist td:nth-child(1) { width: 46%; min-width: 260px; }
table.placelist th:nth-child(1), table.placelist td:nth-child(1) { width: 26%; min-width: 180px; }
table.placelist { table-layout: auto; }
table.notelist .meta, table.placelist .meta { font-size: 12px; color: var(--muted); }
table.notelist thead th a, table.placelist thead th a { cursor: default; }
table.placelist thead th a { cursor: pointer; }

/* Compact grid of tick boxes — beats a wall of free-text fields */
.tickgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 2px 10px; margin: 0 0 14px; padding: 11px 13px;
  background: var(--surface-2); border: 1.5px solid var(--border); border-radius: var(--radius-sm);
}
.tickgrid .check { margin: 0; font-size: 12.5px; font-weight: 500; }

.kidstrip {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 7px 9px; border-radius: var(--radius-sm); background: var(--sun-soft);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kidstrip { background: var(--sun-soft); } }
.kidstrip .pill { background: var(--surface); }

.row.sugg { align-items: flex-start; }
.row.sugg .ttl { font-size: 14.5px; }
.row.sugg:hover { background: var(--accent-soft); }

/* Quick capture box */
.capture { padding: 15px 17px; margin-bottom: 18px; border-color: transparent;
  box-shadow: 0 0 0 2px var(--grape), var(--shadow); }
.cap-head { font-weight: 700; font-size: 14px; margin-bottom: 9px; letter-spacing: -.01em; }
.cap-head .faint { font-weight: 500; font-size: 12.5px; }
.cap-row { display: flex; gap: 9px; }
.cap-row input { flex: 1; font-size: 14.5px; padding: 11px 13px; }
.cap-row .btn { white-space: nowrap; }
.cap-hint { font-size: 11.5px; color: var(--faint); margin-top: 7px; }
@media (max-width: 620px) { .cap-row { flex-direction: column; } }

/* Kid name boxes, one row per child */
.kidbox { margin-bottom: 13px; }
.kidrow { display: grid; grid-template-columns: 1.1fr 150px 1.4fr; gap: 7px; margin-bottom: 7px; }
.kidrow input { font-size: 13.5px; padding: 7px 10px; }
[data-kidhint] { margin-top: 2px; }
@media (max-width: 760px) { .kidrow { grid-template-columns: 1fr; } }

table.menulist { table-layout: auto; }
table.menulist th:nth-child(1), table.menulist td:nth-child(1) { width: 20%; min-width: 130px; }
table.menulist th:nth-child(2), table.menulist td:nth-child(2) { width: 72px; }
table.menulist th:nth-child(3), table.menulist td:nth-child(3) { width: 30%; }
table.menulist th:nth-child(4), table.menulist td:nth-child(4) { width: 30%; }
table.menulist td { padding-top: 9px; padding-bottom: 9px; }
table.menulist .meta { font-size: 11.5px; line-height: 1.45; }

.picks { display: flex; flex-direction: column; gap: 7px; margin-top: 5px; }
.pick { padding: 7px 9px; border-radius: 9px; background: var(--surface-2); border-left: 3px solid var(--grape); }
.pick a { font-size: 12.5px; color: var(--accent); }
.pick .btn { margin-top: 4px; padding: 2px 8px; font-size: 11px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* Places: areas strip, and collapsible per-trip groups */
.arealine { display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-bottom:18px;
  padding:9px 12px; border-radius:var(--radius-sm); background:var(--surface-2); }
details.tripgroup { margin-bottom:10px; }
details.tripgroup > summary {
  cursor:pointer; list-style:none; display:flex; align-items:center; gap:9px;
  padding:10px 14px; border-radius:var(--radius-sm); background:var(--surface-2);
  border:1px solid var(--border); font-size:13.5px;
}
details.tripgroup > summary::-webkit-details-marker { display:none; }
details.tripgroup > summary::before { content:"▸"; color:var(--faint); font-size:11px; }
details.tripgroup[open] > summary::before { content:"▾"; }
details.tripgroup > summary:hover { border-color:var(--accent); }
details.tripgroup > .card { margin-top:8px; }
table.placelist tbody td:first-child { width:42%; }

/* ---------------------------------------------------- meal plan board */
.mealboard { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; }
.mealcol { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:11px; min-height:150px; transition:border-color .12s, background .12s; }
.mealcol.tray { background:var(--surface-2); border-style:dashed; }
.mealcol.dragover { border-color:var(--grape); background:var(--grape-soft); }
.mealcol-head { display:flex; align-items:center; gap:7px; font-weight:720; font-size:13px;
  letter-spacing:-.01em; margin-bottom:9px; padding-bottom:7px; border-bottom:1px solid var(--border-soft); }
.mealcol-head .pill { margin-left:auto; }
.mealitem { display:flex; gap:7px; align-items:flex-start; padding:9px 10px; margin-bottom:7px;
  border-radius:var(--radius-sm); background:var(--surface-2); border-left:3px solid var(--grape);
  cursor:grab; }
.mealcol.tray .mealitem { background:var(--surface); }
.mealitem:active { cursor:grabbing; }
.mealitem.dragging { opacity:.45; }
.mealitem .nm { font-weight:650; font-size:13px; }
.mealitem .grow { flex:1; min-width:0; }
.mealitem .moveform { margin-top:5px; }
.mealitem select { font-size:11.5px; padding:3px 7px; border-radius:7px; }
.mealempty { font-size:11.5px; color:var(--faint); text-align:center; padding:14px 6px;
  border:1px dashed var(--border); border-radius:var(--radius-sm); }
.dishpick { margin-bottom:14px; }

/* Filterable people picker */
.peoplebox { margin-bottom: 13px; }
.peoplebox .flabel { display:block; font-size:11.5px; font-weight:700; color:var(--muted);
  margin-bottom:5px; letter-spacing:.01em; }
.peoplefilter { display:flex; align-items:center; gap:9px; margin-bottom:6px; }
.peoplefilter input { flex:1; font-size:13px; padding:7px 11px; }
.peoplefilter [data-filtercount] { white-space:nowrap; }

.whereblock { margin-bottom: 13px; }
.whereblock .flabel { display:block; font-size:11.5px; font-weight:700; color:var(--muted);
  margin-bottom:6px; letter-spacing:.01em; }
.whereopts { display:flex; gap:14px; flex-wrap:wrap; padding:10px 13px;
  background:var(--surface-2); border:1.5px solid var(--border); border-radius:var(--radius-sm); }
.whereopts .check { margin:0; font-weight:550; }
[data-menufield][hidden], [data-whereother][hidden] { display:none !important; }

/* Footer and the default-password warning */
.sitefoot { max-width:1340px; margin:0 auto; padding:26px 20px 34px; display:flex;
  gap:9px; flex-wrap:wrap; align-items:center; justify-content:center;
  font-size:11.5px; color:var(--faint); }
.sitefoot a { color:var(--muted); text-decoration:underline; }
.sitefoot a:hover { color:var(--accent); }
.sitefoot .dot { opacity:.5; }
.warnbar { background:var(--warn-soft); color:var(--warn); font-size:12.5px;
  font-weight:650; text-align:center; padding:7px 16px; border-bottom:1px solid var(--border); }

/* Day column: a simple ordered list, no slot split */
.dayplans { padding: 0 13px; }
.plan .when { color: var(--accent); font-variant-numeric: tabular-nums; margin-right: 3px; }
.dayplans .open-slot { margin-top: 2px; }

table.peoplelist { table-layout: auto; }
table.peoplelist th:nth-child(1), table.peoplelist td:nth-child(1) { width: 24%; min-width: 170px; }
table.peoplelist .tname .av { margin-right: 2px; }

/* Proposing dates */
.datelist { display:flex; flex-direction:column; gap:6px; margin-bottom:8px; }
.daterow { display:grid; grid-template-columns:1fr 130px; gap:7px; }
.daterow input { font-size:13px; padding:7px 10px; }
button.pill { border:none; cursor:pointer; font-family:inherit; }
button.pill:hover { filter:brightness(1.06); }
.plan.proposal { border-left-style:dashed; border-left-color:var(--tang);
  background:transparent; border:1px dashed var(--border); }
.plan.proposal .t { font-weight:560; color:var(--muted); }

.msgbox { width:100%; font-size:12.5px; line-height:1.55; font-family:var(--sans);
  background:var(--surface-2); margin-bottom:8px; }
[data-copied] { margin-left:8px; color:var(--ok); font-weight:700; }

table.agendalist { table-layout: auto; }
table.agendalist th:nth-child(1), table.agendalist td:nth-child(1) { width: 150px; }
table.agendalist tr.freerow td { background: var(--surface-2); }
table.agendalist tr.freerow .open-slot { padding: 5px 11px; font-size: 11.5px; }

/* Recipe-link import on the Add-a-dish form */
form.fromlink { padding: 10px 11px; margin-bottom: 11px; border-radius: 10px;
  background: var(--soft); border: 1px dashed var(--border); }
form.fromlink .f { margin-bottom: 7px; }
p.warnline, p.okline { margin: 0 0 11px; padding: 8px 10px; border-radius: 9px;
  font-size: 13px; line-height: 1.4; }
p.warnline { background: #fff6e2; color: #7a4b00; border: 1px solid #f0d9a8; }
p.okline { background: #e8f8ee; color: #15603a; border: 1px solid #b4e3c6; }

/* A free day on the weekend board: green ring, so open dates read at a glance */
.day.isfree { border-color: var(--free-ring, #43a86b); box-shadow: 0 0 0 2px var(--free-glow, rgba(67,168,107,.22)); }
.day.isfree .day-head .num { color: var(--free-ring, #43a86b); font-weight: 700; }
.day.isfree .day-head::after { content: "free"; margin-left: auto; font-size: 10px;
  letter-spacing: .04em; text-transform: uppercase; color: var(--free-ring, #43a86b);
  background: var(--free-glow, rgba(67,168,107,.14)); border-radius: 999px; padding: 1px 7px; }
p.kept { color: #15603a; background: #e8f8ee; border: 1px solid #b4e3c6;
  border-radius: 8px; padding: 6px 9px; margin: 9px 0; }
button.linky { background: none; border: 0; padding: 0; font: inherit;
  color: var(--accent); text-decoration: underline; cursor: pointer; }

/* Who the recipe came from, on the menu list */
.menulist .src { font-size: 12px; color: var(--muted); background: var(--soft);
  border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px;
  display: inline-block; max-width: 170px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }

/* ---- four-column lists ----------------------------------------------
   .triplist sets nth-child widths for the seven-column trip table, which
   left these squeezed (the menu's busy Recipe cell was inheriting 10%).
   Give each four-column table its own widths so they line up. */
table.triplist.menulist th:nth-child(1), table.triplist.menulist td:nth-child(1) { width: 34%; min-width: 180px; }
table.triplist.menulist th:nth-child(2), table.triplist.menulist td:nth-child(2) { width: 16%; min-width: 110px; }
table.triplist.menulist th:nth-child(3), table.triplist.menulist td:nth-child(3) { width: 38%; min-width: 210px; }
table.triplist.menulist th:nth-child(4), table.triplist.menulist td:nth-child(4) { width: 12%; min-width: 86px; }

table.triplist.agendalist th:nth-child(1), table.triplist.agendalist td:nth-child(1) { width: 22%; min-width: 150px; }
table.triplist.agendalist th:nth-child(2), table.triplist.agendalist td:nth-child(2) { width: 34%; min-width: 180px; }
table.triplist.agendalist th:nth-child(3), table.triplist.agendalist td:nth-child(3) { width: 24%; min-width: 140px; }
table.triplist.agendalist th:nth-child(4), table.triplist.agendalist td:nth-child(4) { width: 20%; min-width: 120px; }

/* every cell starts at the top, so rows of different heights still line up */
table.triplist.menulist th, table.triplist.menulist td,
table.triplist.agendalist th, table.triplist.agendalist td { vertical-align: top; }
table.triplist.menulist td.acts { text-align: right; }
table.triplist.menulist td.acts details.inline { display: inline-block; text-align: left; }

/* the Recipe cell stacks several controls — one rhythm, one left edge */
.rcpcell { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.rcpcell form { margin: 0; }
.rcpcell .picks { width: 100%; }
.rcpcell .btnline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rcpcell .ingcount { color: var(--ok); font-weight: 700; white-space: nowrap; }
.menulist .tname { align-items: flex-start; }

/* ---- menu: three columns, name opens a full-width editor ---------------- */
table.triplist.menulist th:nth-child(1), table.triplist.menulist td:nth-child(1) { width: 38%; min-width: 190px; }
table.triplist.menulist th:nth-child(2), table.triplist.menulist td:nth-child(2) { width: 20%; min-width: 120px; }
table.triplist.menulist th:nth-child(3), table.triplist.menulist td:nth-child(3) { width: 42%; min-width: 220px; }

/* the dish name is the edit handle */
.menulist button.namebtn { background: none; border: 0; padding: 0; font: inherit;
  cursor: pointer; text-align: left; display: inline-flex; align-items: flex-start;
  gap: 7px; color: inherit; }
.menulist button.namebtn .nm { font-weight: 600; border-bottom: 1px dashed transparent; }
.menulist button.namebtn:hover .nm,
.menulist button.namebtn:focus-visible .nm { color: var(--accent); border-bottom-color: currentColor; }
.menulist button.namebtn.editing .nm { color: var(--accent); border-bottom-style: solid; }

/* the editor's own row, spanning the table */
.menulist tr.editrow > td { background: var(--surface-2); border-top: 0;
  box-shadow: inset 0 2px 0 var(--accent); padding: 14px 12px 16px; }
.menulist tr.editrow:hover > td { background: var(--surface-2); }
.editwrap { max-width: 920px; }
.editwrap .edithead { display: flex; align-items: center; gap: 10px;
  margin-bottom: 11px; font-size: 13.5px; color: var(--muted); }
.editwrap .edithead b { color: var(--text); }
.editwrap .edithead .btn { margin-left: auto; }

/* "something is happening" on the slow buttons */
button.is-busy { opacity: .85; cursor: progress; }
.spin { display: inline-block; width: 11px; height: 11px; margin-right: 7px;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; vertical-align: -1px; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
p.busynote { margin: 7px 0 0; color: var(--muted); line-height: 1.45; }
@media (prefers-reduced-motion: reduce) { .spin { animation-duration: 2.4s; } }

/* quick-edit handle on the trips list */
button.editlink { background: none; border: 0; padding: 0; font: inherit; font-size: 11.5px;
  color: var(--muted); cursor: pointer; text-decoration: underline dotted; }
button.editlink:hover, button.editlink:focus-visible { color: var(--accent); }
table.triplist tr.editrow > td { background: var(--surface-2); border-top: 0;
  box-shadow: inset 0 2px 0 var(--accent); padding: 14px 12px 16px; }
table.triplist tr.editrow:hover > td { background: var(--surface-2); }
.editwrap .edithead .btn { margin-left: 0; }
.editwrap .edithead a.btn { margin-left: auto; }

/* ======================================================================
   Phones. Two things break a desktop layout on a narrow screen: grid and
   flex children default to min-width:auto, so one wide table drags the
   whole page sideways; and a seven-column table has nowhere to go. So:
   let children shrink, and turn data tables into stacked rows that keep
   their column names as labels.
   ====================================================================== */
@media (max-width: 760px) {
  .cols > *, .stack > *, .cards > *, main, .card { min-width: 0; }
  .card.scroll-x { overflow-x: visible; }

  table.triplist { min-width: 0 !important; width: 100% !important;
    table-layout: auto !important; font-size: 14px; border-collapse: separate;
    border-spacing: 0 10px; }
  table.triplist thead { position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  table.triplist tbody tr { display: block; background: var(--surface);
    border: 1.5px solid var(--border); border-radius: var(--radius-sm);
    padding: 11px 13px; }
  table.triplist tbody tr:hover { background: var(--surface); }
  table.triplist tbody td { display: block; width: auto !important;
    min-width: 0 !important; border: 0 !important; padding: 3px 0 !important;
    text-align: left !important; white-space: normal !important; }
  table.triplist tbody td[data-label]::before {
    content: attr(data-label) " "; display: block; font-size: 10.5px;
    text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
    font-weight: 700; margin-bottom: 1px; }
  /* the first cell is the row's title — it needs no label above it */
  table.triplist tbody td:first-child { padding-top: 0 !important; font-size: 15px; }
  table.triplist tbody td:first-child::before { display: none; }
  /* a cell with nothing in it is noise once stacked */
  table.triplist tbody td.is-empty { display: none; }
  table.triplist tr.editrow { padding: 0 !important; border: 0 !important; }
  table.triplist tr.editrow > td { box-shadow: none; padding: 0 !important; }
  .editwrap { max-width: none; }
  .editwrap .edithead { flex-wrap: wrap; }
  .editwrap .edithead a.btn, .editwrap .edithead .btn { margin-left: 0; }

  /* comfortable touch targets */
  .btn, button.btn, select, input[type="text"], input[type="url"], input[type="search"],
  input[type="date"], input[type="time"], input[type="number"], input[type="password"],
  summary, .pill a { min-height: 38px; }
  .btn.sm { min-height: 34px; padding: 7px 12px; font-size: 13px; }
  a.pill, button.pill { display: inline-flex; align-items: center; min-height: 30px; }
  .check { min-height: 32px; display: flex; align-items: center; gap: 8px; }
  .check input[type="checkbox"], .check input[type="radio"] { width: 20px; height: 20px; }
  nav.tabs a { min-height: 40px; display: inline-flex; align-items: center; }

  /* forms go one field per line, and inputs never trigger iOS zoom */
  .grid2, .grid3, .daterow, .kidrow, .mealboard { grid-template-columns: 1fr !important; }
  input, select, textarea { font-size: 16px; }
  .filters { flex-wrap: wrap; gap: 8px; }
  .filters > div[style*="flex:1"] { display: none; }
  .btn-row { flex-wrap: wrap; }
  .statrow { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
  h1 { font-size: 21px; line-height: 1.25; }
  main { padding: 14px 16px 80px; }
  .sec-head { font-size: 13px; }
  details.form-block .body { min-width: 0 !important; }
  .msgbox, textarea { width: 100%; box-sizing: border-box; }
}

@media (max-width: 420px) {
  main { padding: 12px 12px 80px; }
  table.triplist tbody tr { padding: 10px 11px; }
}

@media (max-width: 760px) {
  /* a row's title is its main tap target — give it a finger-sized box */
  .tname, a.tname, button.tname { min-height: 40px; display: flex;
    align-items: center; gap: 8px; }
  button.editlink { min-height: 34px; display: inline-flex; align-items: center;
    padding: 6px 4px; }
  .sitefoot a, nav a, footer a { min-height: 34px; display: inline-flex;
    align-items: center; }
}

@media (max-width: 760px) {
  .open-slot { min-height: 38px; display: flex; align-items: center;
    justify-content: center; }
  footer.sitefoot { flex-wrap: wrap; gap: 4px 8px; padding-bottom: 26px; }
  footer.sitefoot a { min-height: 36px; padding: 0 6px; }
}

/* The grid blow-out fix belongs at every narrow width, not just phones:
   without it a wide table drags the page sideways instead of scrolling
   inside its own card. */
@media (max-width: 1000px) {
  .cols > *, .stack > *, .cards > *, main, .card { min-width: 0; }
}

/* Touch sizing follows the input device, so tablets get it too. */
@media (pointer: coarse) {
  .btn, button.btn, select, summary,
  input[type="text"], input[type="url"], input[type="search"], input[type="date"],
  input[type="time"], input[type="number"], input[type="password"] { min-height: 38px; }
  .btn.sm { min-height: 34px; padding: 7px 12px; }
  a.pill, button.pill { display: inline-flex; align-items: center; min-height: 30px; }
  .tname, a.tname, button.tname { min-height: 40px; display: flex; align-items: center; gap: 8px; }
  button.editlink { min-height: 34px; display: inline-flex; align-items: center; padding: 6px 4px; }
  .open-slot { min-height: 38px; display: flex; align-items: center; justify-content: center; }
  nav.tabs a { min-height: 40px; display: inline-flex; align-items: center; }
  footer.sitefoot a { min-height: 36px; display: inline-flex; align-items: center; padding: 0 6px; }
  .check { min-height: 32px; display: flex; align-items: center; gap: 8px; }
  .check input[type="checkbox"], .check input[type="radio"] { width: 20px; height: 20px; }
  input, select, textarea { font-size: 16px; }   /* stops iOS zooming on focus */
}

@media (max-width: 760px) {
  /* Stacked, an empty cell is just a label over a dash — drop it. */
  table.triplist tbody td:has(> span.faint:only-child) { display: none; }
  /* The rows are the cards now, so the wrapper shouldn't draw a second box. */
  .card.scroll-x { background: transparent; border: 0; box-shadow: none; padding: 0; }
  .card.scroll-x > table.triplist { margin: 0; }
}

@media (max-width: 760px) {
  /* display:block on the row beats [hidden]'s UA display:none, which left
     every inline editor open on a phone. Put it back. */
  table.triplist tbody tr[hidden],
  table.triplist tbody tr.editrow[hidden] { display: none !important; }
}

/* ---- tick dates in the list view, then choose who --------------------- */
.agendalist th.pickcol, .agendalist td.pickcol { width: 38px; min-width: 38px;
  text-align: center; }
label.datepick { display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; cursor: pointer; }
label.datepick input { width: 19px; height: 19px; cursor: pointer; accent-color: var(--accent); }

.pickbar { position: sticky; bottom: 12px; z-index: 30; display: flex;
  align-items: center; gap: 11px; flex-wrap: wrap; margin-top: 14px;
  padding: 11px 14px; border-radius: 999px; background: var(--surface);
  border: 1.5px solid var(--accent); box-shadow: 0 8px 26px rgba(0,0,0,.14); }
.pickbar .pickmsg { font-size: 13.5px; color: var(--muted); }
.pickbar .pickmsg b { color: var(--accent); font-size: 16px; }
.pickbar .btn { margin-left: auto; }
.pickbar .btn + .btn { margin-left: 0; }

dialog.pickdlg { width: min(560px, calc(100vw - 28px)); border: 1.5px solid var(--border);
  border-radius: var(--radius); padding: 18px 20px 20px; background: var(--surface);
  color: var(--text); box-shadow: 0 20px 60px rgba(0,0,0,.28); }
dialog.pickdlg::backdrop { background: rgba(14,10,28,.46); backdrop-filter: blur(2px); }
dialog.pickdlg .dlghead { display: flex; align-items: center; font-weight: 800;
  font-size: 16px; margin-bottom: 12px; }
dialog.pickdlg .dlghead .btn { margin-left: auto; }
dialog.pickdlg .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
dialog.pickdlg .btn-row { margin-top: 14px; }

@media (max-width: 760px) {
  .agendalist td.pickcol { position: absolute; right: 10px; top: 8px; width: auto; }
  .agendalist tbody tr { position: relative; padding-right: 46px; }
  .pickbar { bottom: 10px; border-radius: var(--radius-sm); }
  .pickbar .btn { margin-left: 0; width: 100%; }
  dialog.pickdlg { padding: 15px; max-height: 88vh; }
}

/* display:flex beats [hidden]'s display:none, so say it explicitly */
.pickbar[hidden] { display: none; }