/* Layout: map-first. The indoor plan fills the window and Liquid Glass controls float above it,
   frosted per Apple's 2026 revision: a draggable bottom sheet on phones, a floating sidebar from 700px up.
   /organizer is a separate Settings-style screen. Colors are Apple system colors with UMass maroon as the key color. */
:root {
  color-scheme: light dark;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-rounded: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --label: #000000;
  --label-2: rgba(60, 60, 67, .62);
  --label-3: rgba(60, 60, 67, .32);
  --separator: rgba(60, 60, 67, .2);
  --bg-grouped: #f2f2f7;
  --cell: #ffffff;
  --cell-glass: rgba(255, 255, 255, .66);
  --fill: rgba(120, 120, 128, .2);
  --fill-2: rgba(120, 120, 128, .13);
  --fill-3: rgba(118, 118, 128, .08);
  --seg-thumb: #ffffff;

  --tint: #8a1c1c;
  --tint-bg: #8a1c1c;
  --tint-fill: rgba(138, 28, 28, .1);
  --on-tint: #ffffff;
  --red: #ff3b30;
  --red-text: #d70015;
  --green: #34c759;
  --green-text: #248a3d;
  --green-fill: rgba(52, 199, 89, .16);
  --orange: #ff9500;
  --gray: #8e8e93;

  --glass: rgba(250, 250, 252, .76);
  --glass-solid: #f7f7f9;
  --glass-rim: rgba(255, 255, 255, .8);
  --glass-edge: rgba(0, 0, 0, .07);
  --glass-shadow: 0 14px 34px rgba(0, 0, 0, .13), 0 2px 6px rgba(0, 0, 0, .06);
  --blur: blur(26px) saturate(185%);

  --map-ground: #ecebe6;
  --map-floor: #fbfaf7;
  --map-dining: #fcefd9;
  --map-lab: #e4edf9;
  --map-kitchen: #fae5df;
  --map-service: #ececf1;
  --map-line: #cfcdc8;
  --map-wall: #9d9ca2;
  --map-glass: #a9cdef;
  --map-text: #57575d;

  /* Group colors: Apple's increased-contrast system colors, readable with white initials */
  /* Hackachusetts tracks */
  --t-bio: #d30f45; --t-robotics: #0040dd; --t-energy: #248a3d; --t-civic: #8944ab; --t-other: #c93400; --t-none: #6c6c70;
  --m0: #0040dd; --m1: #c93400; --m2: #8944ab; --m3: #0071a4;
  --m4: #d30f45; --m5: #3634a3; --m6: #248a3d; --m7: #7f6545;

  --spring: cubic-bezier(.2, .9, .25, 1);
  --side-w: min(380px, 44vw);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
}
@media (prefers-color-scheme: dark) {
  :root {
    --label: #ffffff;
    --label-2: rgba(235, 235, 245, .62);
    --label-3: rgba(235, 235, 245, .32);
    --separator: rgba(84, 84, 88, .6);
    --bg-grouped: #000000;
    --cell: #1c1c1e;
    --cell-glass: rgba(255, 255, 255, .07);
    --fill: rgba(120, 120, 128, .36);
    --fill-2: rgba(120, 120, 128, .24);
    --fill-3: rgba(118, 118, 128, .16);
    --seg-thumb: #636366;

    --tint: #ff7b7b;
    --tint-bg: #b3343a;
    --tint-fill: rgba(255, 123, 123, .14);
    --red: #ff453a;
    --red-text: #ff6961;
    --green: #30d158;
    --green-text: #30d158;
    --green-fill: rgba(48, 209, 88, .18);

    --glass: rgba(30, 30, 33, .74);
    --glass-solid: #1f1f22;
    --glass-rim: rgba(255, 255, 255, .13);
    --glass-edge: rgba(0, 0, 0, .5);
    --glass-shadow: 0 14px 38px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .3);

    --map-ground: #141416;
    --map-floor: #222225;
    --map-dining: #33291b;
    --map-lab: #1c2636;
    --map-kitchen: #36221e;
    --map-service: #2a2a2e;
    --map-line: #3c3c41;
    --map-wall: #7b7b82;
    --map-glass: #3d6e9f;
    --map-text: #a5a5ad;
  }
}
@media (prefers-contrast: more) {
  :root { --glass-edge: rgba(0, 0, 0, .35); --separator: rgba(60, 60, 67, .45); --label-2: rgba(60, 60, 67, .85); }
}

/* Base */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { font-family: var(--font); font-size: 17px; line-height: 1.3; color: var(--label); background: var(--map-ground); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-font-smoothing: antialiased; }
@supports (-webkit-touch-callout: none) {
  /* iOS: follow the reader's Dynamic Type size */
  html { font: -apple-system-body; font-family: var(--font); }
}
body { margin: 0; background: var(--map-ground); }
body.is-map { position: fixed; inset: 0; overflow: hidden; overscroll-behavior: none; }
.org-root, .org-root body { background: var(--bg-grouped); }
body.is-org { min-height: 100%; }
[hidden] { display: none !important; }
button, input { font: inherit; color: inherit; }
button, label[for], a { touch-action: manipulation; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--tint) 60%, transparent); outline-offset: 2px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Liquid Glass */
.glass {
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  box-shadow: var(--glass-shadow), inset 0 .5px 0 0 var(--glass-rim), inset 0 0 0 .5px var(--glass-edge);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .glass { background: var(--glass-solid); } }
@media (prefers-reduced-transparency: reduce) { .glass { background: var(--glass-solid); -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* Map */
.app { position: fixed; inset: 0; }
#map { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: var(--map-ground); touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; outline: none; cursor: grab; }
#map.placing, #map.composing { cursor: crosshair; }
#map:focus-visible { box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--tint) 60%, transparent); }

.m-floor { fill: var(--map-floor); }
.m-dining { fill: var(--map-dining); }
.m-lab { fill: var(--map-lab); }
.m-kitchen { fill: var(--map-kitchen); }
.m-svc, .m-stair { fill: var(--map-service); }
.m-room { fill: none; stroke: var(--map-line); stroke-width: 2.5; }
.m-ext { fill: none; stroke: var(--map-wall); stroke-width: 7; }
.m-gap { fill: var(--map-floor); }
.m-win { stroke: var(--map-glass); stroke-width: 5; }
.m-swing, .m-fixture { fill: none; stroke: var(--map-line); stroke-width: 1.6; }
.m-grid { stroke: var(--map-text); stroke-opacity: .09; stroke-width: 1; vector-effect: non-scaling-stroke; }
.m-photo-bg { fill: var(--map-floor); }

.poi-dot { stroke: var(--map-floor); stroke-width: 2; }
.poi-food { fill: #c93400; } .poi-lab { fill: #8944ab; } .poi-kitchen { fill: #d70015; }
.poi-bev { fill: #7f6545; } .poi-elevator, .poi-stairs { fill: #6c6c70; } .poi-wc { fill: #0071a4; }
.poi-glyph { fill: none; stroke: #ffffff; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.poi-label { font-family: var(--font); font-weight: 600; font-size: 11.5px; fill: var(--map-text); text-anchor: middle; paint-order: stroke; stroke: var(--map-floor); stroke-width: 3px; stroke-linejoin: round; letter-spacing: .01em; }
.poi-sub { font-weight: 500; font-size: 10.5px; }
.grid-label { font-family: var(--font-mono); font-weight: 500; fill: var(--map-text); fill-opacity: .6; text-anchor: middle; paint-order: stroke; stroke: var(--map-ground); stroke-linejoin: round; }

.marker { cursor: pointer; outline: none; }
.marker .hit { fill: transparent; }
.marker .shadow { fill: rgba(0, 0, 0, .28); }
.marker .balloon { stroke: #ffffff; stroke-width: 2; }
.c0 { fill: var(--m0); } .c1 { fill: var(--m1); } .c2 { fill: var(--m2); } .c3 { fill: var(--m3); }
.c4 { fill: var(--m4); } .c5 { fill: var(--m5); } .c6 { fill: var(--m6); } .c7 { fill: var(--m7); }
.marker .initials { font-family: var(--font-rounded); font-weight: 700; font-size: 12px; fill: #ffffff; text-anchor: middle; letter-spacing: -.01em; }
.marker .lft { fill: #248a3d; stroke: #ffffff; stroke-width: 1.5; }
.marker .lft-plus { stroke: #ffffff; stroke-width: 1.7; stroke-linecap: round; }
.marker .ring { fill: none; stroke: var(--tint); stroke-width: 2.5; }
.marker .m-label { font-family: var(--font); font-weight: 600; font-size: 11.5px; fill: var(--label); text-anchor: middle; paint-order: stroke; stroke: var(--map-floor); stroke-width: 3.2px; stroke-linejoin: round; }
.marker .m-label .you { fill: var(--tint); }
.marker.sel .m-label { font-weight: 700; font-size: 12.5px; }
.marker:focus-visible .balloon { stroke: var(--label); stroke-width: 3; }
.marker.dim { opacity: .22; }
.marker.ghost { opacity: .32; }
.marker.draft .balloon { fill: var(--tint-bg); stroke-dasharray: 3.5 2.5; }
.marker.draft { cursor: grab; }
.pulse { fill: var(--tint); fill-opacity: .3; transform-box: fill-box; transform-origin: center; animation: pulse 1.8s ease-out infinite; }
@keyframes pulse { from { transform: scale(.3); opacity: 1; } to { transform: scale(2.6); opacity: 0; } }

/* Top bar (phones) */
.topbar { position: absolute; z-index: 10; top: calc(var(--safe-t) + 8px); left: calc(var(--safe-l) + 10px); max-width: calc(100% - var(--safe-l) - var(--safe-r) - 140px); display: flex; align-items: center; gap: 10px; padding: 7px 18px 7px 7px; border: 0; border-radius: 999px; color: var(--label); text-align: left; font: inherit; }
.topbar:active { transform: scale(.98); }
.badge-11 { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--tint-bg); color: #ffffff; font: 700 17px/1 var(--font-rounded); letter-spacing: -.03em; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .28); }
.badge-11.big { width: 56px; height: 56px; font-size: 26px; }
.topbar-text { min-width: 0; display: grid; }
.topbar-title { display: block; margin: 0; font-size: 1rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.topbar-sub { display: block; margin: 0; font-size: .76rem; color: var(--label-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; vertical-align: 1px; background: var(--gray); }
.status.live::before { background: var(--green); }
.status.warn::before { background: var(--orange); }
.status.bad::before { background: var(--red); }
.round-btn { width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; color: var(--label); background: none; }
.round-btn .icon { width: 22px; height: 22px; }
.top-actions { position: absolute; z-index: 10; top: calc(var(--safe-t) + 8px); right: calc(var(--safe-r) + 10px); display: flex; gap: 8px; }
.top-actions .round-btn { width: 50px; height: 50px; }
.round-btn { position: relative; }
.badge { position: absolute; top: 2px; right: 0; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--red); color: #ffffff; font: 700 .65rem/19px var(--font-rounded); text-align: center; box-shadow: 0 0 0 2px var(--map-floor); }
.placing-on .topbar, .placing-on .top-actions { visibility: hidden; }

/* Map controls */
.map-controls { position: absolute; z-index: 9; top: calc(var(--safe-t) + 68px); right: calc(var(--safe-r) + 10px); width: 50px; display: flex; flex-direction: column; align-items: center; padding: 3px 0; border-radius: 25px; }
.map-controls button { width: 50px; height: 44px; padding: 0; border: 0; background: none; display: grid; place-items: center; color: var(--label); }
.map-controls button .icon { width: 21px; height: 21px; }
.map-controls button[aria-pressed="false"] { color: var(--label-3); }
.map-controls button:active { opacity: .5; }
.map-controls .sep { width: 26px; height: .5px; margin: 3px 0; background: var(--separator); }

/* Banner and HUD */
.banner { position: absolute; z-index: 12; top: calc(var(--safe-t) + 8px); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; max-width: calc(100% - 20px); padding: 6px 6px 6px 16px; border-radius: 999px; font-weight: 600; font-size: .94rem; white-space: nowrap; animation: drop-in .45s var(--spring); }
.banner .icon { color: var(--tint); width: 20px; height: 20px; }
.banner span { overflow: hidden; text-overflow: ellipsis; }
.banner button { flex: none; height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--fill-2); color: var(--tint); font-weight: 600; font-size: .94rem; }
.hud { position: absolute; z-index: 40; top: calc(var(--safe-t) + 10px); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 11px 20px 11px 16px; border-radius: 999px; font-weight: 600; font-size: .94rem; white-space: nowrap; pointer-events: none; animation: drop-in .45s var(--spring); }
.hud .icon { width: 20px; height: 20px; color: var(--green-text); }
.hud.leaving { opacity: 0; transition: opacity .25s; }
@keyframes drop-in { from { opacity: 0; transform: translate(-50%, -14px) scale(.96); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }

/* Sheet (phones) */
.sheet {
  position: absolute; z-index: 20;
  left: calc(var(--safe-l) + 8px); right: calc(var(--safe-r) + 8px); bottom: calc(8px + var(--kb, 0px));
  height: var(--sheet-max, 80vh);
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 32px;
  transform: translate3d(0, calc(var(--sheet-max, 80vh) - var(--sheet-h, 170px)), 0);
  transition: transform .5s var(--spring), bottom .25s ease;
  will-change: transform;
}
.sheet.dragging { transition: none; }
.sheet-handle { flex: none; height: 24px; width: 100%; padding: 0; border: 0; background: none; display: grid; place-items: center; cursor: grab; touch-action: none; }
.grabber { width: 36px; height: 5px; border-radius: 3px; background: var(--label-3); }
.sheet-scroll { flex: 1; min-height: 0; overflow-y: hidden; overscroll-behavior: contain; padding: 0 14px calc(var(--safe-b) + 18px); }
.sheet.is-large .sheet-scroll { overflow-y: auto; }
.side-brand { display: none; }
.card.entering { animation: card-in .32s var(--spring); }
@keyframes card-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Sidebar (laptops, iPads, landscape phones) */
@media (min-width: 700px) {
  .topbar, .top-actions { display: none; }
  .sheet { top: calc(var(--safe-t) + 10px); left: calc(var(--safe-l) + 10px); bottom: calc(var(--safe-b) + 10px); right: auto; width: var(--side-w); height: auto; transform: none; transition: none; border-radius: 28px; }
  .sheet-handle { display: none; }
  .sheet-scroll { overflow-y: auto; padding: 18px 16px 22px; }
  .side-brand { display: flex; align-items: center; gap: 12px; margin: 0 2px 16px; }
  .side-title { flex: 1; min-width: 0; display: grid; gap: 3px; padding: 0; border: 0; background: none; color: var(--label); text-align: left; font: inherit; }
  .side-h1 { font-size: 1.65rem; font-weight: 700; letter-spacing: -.025em; line-height: 1.1; }
  .side-sub { font-size: .82rem; color: var(--label-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .side-brand .badge-11 { width: 44px; height: 44px; font-size: 20px; }
  .side-brand .round-btn { flex: none; width: 36px; height: 36px; background: var(--fill-2); }
  .side-brand .badge { top: -4px; right: -6px; box-shadow: 0 0 0 2px var(--glass-solid); }
  .side-brand .round-btn .icon { width: 20px; height: 20px; }
  .map-controls { top: auto; bottom: calc(var(--safe-b) + 16px); right: calc(var(--safe-r) + 16px); }
  .banner, .hud { left: calc(var(--side-w) + 20px + (100% - var(--side-w) - 20px) / 2); }
  .placing-on .topbar { visibility: visible; }
}

/* Search */
.search { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 6px 0 14px; border-radius: 999px; background: var(--fill-2); color: var(--label-2); cursor: text; }
.search .icon { width: 19px; height: 19px; }
.search input { flex: 1; min-width: 0; height: 100%; border: 0; padding: 0; background: none; outline: none; font-size: 1rem; color: var(--label); -webkit-appearance: none; appearance: none; }
.search input::placeholder { color: var(--label-2); }
.search input::-webkit-search-cancel-button { display: none; }
.search:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--tint) 35%, transparent); }
.search-clear { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: var(--fill); color: var(--label); display: grid; place-items: center; }
.search-clear .icon { width: 14px; height: 14px; stroke-width: 2.6; }

/* Buttons */
.btn-primary { width: 100%; min-height: 50px; margin: 12px 0 0; padding: 0 20px; border: 0; border-radius: 999px; background: var(--tint-bg); color: var(--on-tint); font-weight: 600; font-size: 1rem; display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .25); transition: transform .15s var(--spring), filter .15s; }
.btn-primary:active { transform: scale(.97); filter: brightness(.92); }
.btn-primary:disabled { opacity: .5; }
.btn-primary .icon { width: 20px; height: 20px; }
.hint { margin: 7px 0 0; text-align: center; font-size: .76rem; color: var(--label-2); }
.link { padding: 0; border: 0; background: none; color: var(--tint); font: inherit; cursor: pointer; }

/* Segmented control */
.segmented { position: relative; display: grid; grid-template-columns: 1fr 1fr; margin: 22px 0 4px; padding: 2px; border-radius: 999px; background: var(--fill-2); }
.segmented button { height: 32px; border: 0; border-radius: 999px; background: none; font-size: .82rem; font-weight: 500; color: var(--label); transition: background .2s, box-shadow .2s; }
.segmented button[aria-selected="true"], .segmented button[aria-checked="true"] { background: var(--seg-thumb); font-weight: 600; box-shadow: 0 3px 8px rgba(0, 0, 0, .12), 0 0 0 .5px rgba(0, 0, 0, .04); }

/* Lists */
.section-title { display: flex; justify-content: space-between; align-items: baseline; margin: 20px 4px 8px; font-size: 1.18rem; font-weight: 700; letter-spacing: -.01em; }
.count { font-size: .88rem; font-weight: 400; color: var(--label-2); font-variant-numeric: tabular-nums; }
.list { list-style: none; margin: 0; padding: 0; border-radius: 18px; background: var(--cell-glass); overflow: hidden; }
.list:empty { display: none; }
.list > li { position: relative; }
.list > li + li::before { content: ""; position: absolute; top: 0; right: 0; left: 62px; height: .5px; background: var(--separator); }
.form-list > li + li::before, .org .list > li + li::before { left: 16px; }
.cell { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 9px 12px 9px 14px; border: 0; background: none; text-align: left; color: inherit; transition: background .15s; }
.cell:active, .cell[aria-current="true"] { background: var(--tint-fill); }
@media (hover: hover) { .cell:hover { background: var(--fill-3); } .cell[aria-current="true"]:hover { background: var(--tint-fill); } }
.avatar { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--c, var(--gray)); color: #ffffff; font: 700 .76rem/1 var(--font-rounded); letter-spacing: -.01em; }
.av0 { --c: var(--m0); } .av1 { --c: var(--m1); } .av2 { --c: var(--m2); } .av3 { --c: var(--m3); }
.av4 { --c: var(--m4); } .av5 { --c: var(--m5); } .av6 { --c: var(--m6); } .av7 { --c: var(--m7); }
.cell-text { flex: 1; min-width: 0; display: grid; gap: 1px; }
.cell-title { font-weight: 600; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell-sub { font-size: .82rem; color: var(--label-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell-detail { font-size: .82rem; color: var(--label); overflow-wrap: anywhere; }
.cell .chev { width: 15px; height: 15px; color: var(--label-3); stroke-width: 2.4; }
.you-tag { margin-left: 6px; font-size: .7rem; font-weight: 700; color: var(--tint); letter-spacing: .02em; text-transform: uppercase; }
.badge-lft { flex: none; padding: 3px 9px; border-radius: 999px; background: var(--green-fill); color: var(--green-text); font-size: .7rem; font-weight: 600; white-space: nowrap; }
.mine-card { margin-top: 12px; border-radius: 18px; background: var(--cell-glass); overflow: hidden; }
.mine-card .cell-sub { color: var(--tint); }

.unavailable { padding: 26px 18px 10px; text-align: center; color: var(--label-2); }
.unavailable .icon { width: 42px; height: 42px; color: var(--label-3); stroke-width: 1.5; }
.unavailable h3 { margin: 8px 0 4px; font-size: 1.18rem; font-weight: 700; color: var(--label); }
.unavailable p { margin: 0 auto; max-width: 30ch; font-size: .88rem; }
.fine-print { margin: 20px 8px 2px; text-align: center; font-size: .7rem; color: var(--label-2); }
.footnote { margin: 8px 16px 0; font-size: .76rem; color: var(--label-2); }
.footnote:empty { display: none; }
.footnote.error { color: var(--red-text); }
.footnote.ok { color: var(--green-text); }

/* Details card */
.card-head { display: flex; align-items: flex-start; gap: 12px; padding: 2px 0 14px; }
.card-head .avatar { width: 44px; height: 44px; font-size: .88rem; }
.card-head-text { flex: 1; min-width: 0; }
.card-head h2 { margin: 0; font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; overflow-wrap: anywhere; }
.card-head p { margin: 3px 0 0; font-size: .88rem; color: var(--label-2); }
.close-btn { flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: var(--fill-2); color: var(--label-2); display: grid; place-items: center; }
.close-btn .icon { width: 15px; height: 15px; stroke-width: 2.6; }
.actions-row { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; margin-bottom: 14px; }
.action { display: grid; justify-items: center; align-content: center; gap: 4px; min-height: 60px; padding: 9px 4px 8px; border: 0; border-radius: 16px; background: var(--fill-2); color: var(--tint); font-size: .76rem; font-weight: 600; transition: transform .15s var(--spring); }
.action:active { transform: scale(.96); }
.action .icon { width: 23px; height: 23px; }
.action.primary { background: var(--tint-bg); color: var(--on-tint); }
.action.destructive { color: var(--red-text); }
.info-row { display: flex; align-items: flex-start; gap: 12px; padding: 11px 14px; }
.info-row .icon { width: 22px; height: 22px; margin-top: 1px; color: var(--label-2); }
.info-row div { min-width: 0; display: grid; gap: 1px; }
.info-row .k { font-size: .76rem; color: var(--label-2); }
.info-row .v { font-size: 1rem; overflow-wrap: anywhere; }
.info-row.good .icon, .info-row.good .v { color: var(--green-text); }
#d-rows > li + li::before { left: 48px; }

/* Compose card */
.nav-row { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 8px; padding: 2px 0 12px; }
.nav-title { margin: 0; text-align: center; font-size: 1rem; font-weight: 600; }
.nav-circle { width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--fill-2); color: var(--label); display: grid; place-items: center; transition: transform .15s var(--spring), opacity .15s; }
.nav-circle .icon { width: 19px; height: 19px; stroke-width: 2.4; }
.nav-circle.confirm { background: var(--tint-bg); color: var(--on-tint); }
.nav-circle:disabled { opacity: .35; }
.nav-circle:active { transform: scale(.92); }
.place-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding: 11px 14px; border-radius: 18px; background: var(--cell-glass); }
.place-row div { min-width: 0; display: grid; gap: 1px; }
.place-row strong { font-weight: 600; }
.place-row span:not(.avatar) { font-size: .76rem; color: var(--label-2); }
.draft-avatar { background: var(--tint-bg); }
.draft-avatar .icon { width: 20px; height: 20px; }
.form-list li { display: flex; align-items: center; min-height: 50px; padding: 0 16px; }
.form-list input:is([type="text"], [type="email"]) { width: 100%; padding: 13px 0; border: 0; background: none; outline: none; font-size: 1rem; color: var(--label); }
.form-list input::placeholder { color: var(--label-3); }
.switch-row { justify-content: space-between; gap: 12px; }
.switch-row label { flex: 1; padding: 13px 0; }
.switch { flex: none; margin: 0; accent-color: var(--green); }
.no-switch .switch { -webkit-appearance: none; appearance: none; position: relative; width: 51px; height: 31px; border-radius: 999px; background: var(--fill); cursor: pointer; transition: background .25s; }
.no-switch .switch::before { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #ffffff; box-shadow: 0 3px 8px rgba(0, 0, 0, .15), 0 1px 1px rgba(0, 0, 0, .16); transition: transform .3s var(--spring); }
.no-switch .switch:checked { background: var(--green); }
.no-switch .switch:checked::before { transform: translateX(20px); }

/* Dialogs */
dialog { padding: 0; border: 0; color: var(--label); background: none; }
dialog::backdrop { background: rgba(0, 0, 0, .28); }
dialog[open] { animation: pop .34s var(--spring); }
@keyframes pop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
.alert { width: min(300px, calc(100vw - 48px)); padding: 22px 18px 18px; border-radius: 30px; text-align: center; }
.alert h2 { margin: 0 0 6px; font-size: 1.06rem; font-weight: 600; }
.alert p { margin: 0 0 18px; font-size: .82rem; line-height: 1.35; }
.alert-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.alert-actions button { height: 46px; border: 0; border-radius: 999px; background: var(--fill-2); font-weight: 600; font-size: 1rem; }
.alert-actions .destructive { background: var(--red); color: #ffffff; }
.about { width: min(440px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 20px 20px 22px; border-radius: 34px; }
.about-head { display: flex; justify-content: space-between; align-items: flex-start; }
.about h2 { margin: 14px 0 6px; font-size: 1.65rem; font-weight: 700; letter-spacing: -.025em; }
.about-lede { margin: 0 0 16px; font-size: .94rem; color: var(--label-2); line-height: 1.4; }
.about-list li { display: flex; gap: 14px; align-items: flex-start; padding: 12px 14px; }
.about-list li + li::before { left: 50px; }
.about-list .icon { width: 22px; height: 22px; margin-top: 1px; color: var(--tint); }
.about-list div { display: grid; gap: 2px; }
.about-list strong { font-size: .94rem; }
.about-list span { font-size: .82rem; color: var(--label-2); line-height: 1.35; }
.about .btn-primary { margin-top: 18px; }
.alert, .about { background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--glass-shadow), inset 0 .5px 0 0 var(--glass-rim), inset 0 0 0 .5px var(--glass-edge); }
@media (prefers-reduced-transparency: reduce) { .alert, .about { background: var(--glass-solid); -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* Organizer (Settings-style) */
.org { max-width: 980px; margin: 0 auto; padding: calc(var(--safe-t) + 6px) max(16px, var(--safe-r)) calc(var(--safe-b) + 48px) max(16px, var(--safe-l)); }
.org-nav { display: flex; align-items: center; height: 44px; }
.back { display: inline-flex; align-items: center; gap: 2px; margin-left: -6px; padding: 8px 8px 8px 0; color: var(--tint); font-size: 1rem; text-decoration: none; }
.back .icon { width: 22px; height: 22px; stroke-width: 2.3; }
.large-title { margin: 2px 0 20px; font-size: 2rem; font-weight: 700; letter-spacing: -.025em; }
.group-header { display: flex; justify-content: space-between; align-items: baseline; margin: 28px 4px 8px; font-size: 1.18rem; font-weight: 700; }
.group-footer { margin: 8px 16px 0; font-size: .76rem; color: var(--label-2); line-height: 1.4; }
.org .list { background: var(--cell); }
.org .list.spaced { margin-top: 14px; }
.row-btn { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 50px; padding: 12px 16px; border: 0; background: none; color: var(--tint); font-size: 1rem; text-align: left; cursor: pointer; }
.row-btn .icon { width: 22px; height: 22px; }
.row-btn.destructive { color: var(--red-text); }
.row-btn.centered { justify-content: center; }
.row-btn:disabled { color: var(--label-3); cursor: default; }
.row-btn:active:not(:disabled) { background: var(--fill-3); }
.plan-preview { display: grid; gap: 10px; padding: 14px 16px; }
.plan-preview img { width: 100%; max-height: 260px; object-fit: contain; border-radius: 12px; background: var(--fill-3); }
.plan-status-row { display: flex; align-items: center; gap: 12px; color: var(--label-2); }
.plan-status-row .icon { width: 22px; height: 22px; }
.org-row { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 16px; }
.org-row .cell-text { flex: 1; }
.org-row .remove { flex: none; height: 36px; padding: 0 12px; border: 0; border-radius: 999px; background: none; color: var(--red-text); font-size: .94rem; }
.org-row .remove:active { background: var(--fill-3); }
.org .list > li.org-row + li::before { left: 64px; }
.sign-in { display: grid; justify-items: center; gap: 8px; padding: 18px 0 8px; text-align: center; }
.lock-badge { width: 72px; height: 72px; border-radius: 22px; display: grid; place-items: center; background: var(--tint-bg); color: #ffffff; box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .3); }
.lock-badge .icon { width: 36px; height: 36px; stroke-width: 1.8; }
.sign-in h2 { margin: 10px 0 0; font-size: 1.3rem; font-weight: 700; }
.sign-in p { margin: 0; max-width: 34ch; font-size: .94rem; color: var(--label-2); }
.sign-in form { display: grid; gap: 4px; width: min(100%, 380px); margin-top: 18px; }
.secure-field { width: 100%; height: 52px; padding: 0 16px; border: 0; border-radius: 14px; background: var(--cell); color: var(--label); font-size: 1rem; outline: none; }
.secure-field:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--tint) 40%, transparent); }
.sign-in .footnote { margin: 8px 4px 0; text-align: left; }

/* Tracks: one color per Hackachusetts challenge, shared by pins, avatars, chips and circles */
.t-bio { --tc: var(--t-bio); } .t-robotics { --tc: var(--t-robotics); } .t-energy { --tc: var(--t-energy); }
.t-civic { --tc: var(--t-civic); } .t-other { --tc: var(--t-other); } .t-none { --tc: var(--t-none); }
.marker .balloon { fill: var(--tc, var(--t-none)); }
.marker.draft .balloon { fill: var(--tint-bg); }
.avatar.team { background: var(--tc, var(--t-none)); border-radius: 30%; }
.avatar.small { width: 30px; height: 30px; font-size: .65rem; }

/* Filter chips (horizontal scroll) */
.chips { display: flex; gap: 8px; margin: 24px -14px 2px; padding: 2px 14px 4px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px 0 11px; border: 0; border-radius: 999px; background: var(--fill-2); color: var(--label); font-size: .82rem; font-weight: 600; white-space: nowrap; transition: background .2s, color .2s; }
.chip .icon { width: 17px; height: 17px; color: var(--tc, var(--label-2)); }
.chip .n { font-weight: 500; color: var(--label-2); font-variant-numeric: tabular-nums; }
.chip[aria-selected="true"] { background: var(--tc, var(--label)); color: #ffffff; }
.chip[aria-selected="true"] .icon, .chip[aria-selected="true"] .n { color: rgba(255, 255, 255, .85); }
@media (prefers-color-scheme: dark) { .chip[aria-selected="true"]:not([class*="t-"]) { color: #000000; } }
@media (min-width: 700px) { .chips { margin-inline: -16px; padding-inline: 16px; } }

/* Track picker */
.track-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.track-chip { display: flex; align-items: center; gap: 9px; min-height: 48px; padding: 8px 12px; border: 0; border-radius: 14px; background: var(--cell-glass); color: var(--label); font-size: .82rem; font-weight: 600; text-align: left; box-shadow: inset 0 0 0 1.5px transparent; transition: background .2s, box-shadow .2s; }
.track-chip .icon { width: 22px; height: 22px; color: var(--tc); }
.track-chip[aria-checked="true"] { background: color-mix(in srgb, var(--tc) 14%, transparent); box-shadow: inset 0 0 0 1.5px var(--tc); }
.track-chip.t-other { grid-column: 1 / -1; }
.org .track-chip { background: var(--cell); }

/* Team picker: circles with four seats */
.mini-title { display: flex; align-items: baseline; justify-content: space-between; margin: 20px 4px 10px; font-size: 1rem; font-weight: 700; }
.mini-sub { font-size: .76rem; font-weight: 500; color: var(--label-2); }
.team-picker { display: flex; gap: 6px; margin: 0 -14px; padding: 4px 14px 8px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.team-picker::-webkit-scrollbar { display: none; }
@media (min-width: 700px) { .team-picker { margin-inline: -16px; padding-inline: 16px; } }
.pick { flex: none; width: 78px; display: grid; justify-items: center; gap: 5px; padding: 4px 0; border: 0; background: none; color: var(--label); scroll-snap-align: start; }
.pick-circle { position: relative; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: var(--tc, var(--t-none)); color: #ffffff; font: 700 .94rem/1 var(--font-rounded); box-shadow: 0 0 0 0 var(--tint); transition: box-shadow .2s var(--spring), transform .2s var(--spring); }
.pick-circle .icon { width: 26px; height: 26px; stroke-width: 2.2; }
.pick.new .pick-circle { background: var(--fill); color: var(--label); }
.pick[aria-checked="true"] .pick-circle { box-shadow: 0 0 0 3px var(--map-floor), 0 0 0 5.5px var(--tint); transform: scale(1.04); }
.pick[aria-disabled="true"] { opacity: .4; }
.pick-name { width: 100%; font-size: .7rem; font-weight: 600; line-height: 1.2; text-align: center; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.seats { display: flex; gap: 3px; }
.seats i { width: 6px; height: 6px; border-radius: 50%; background: var(--fill); }
.seats i.on { background: var(--tc, var(--label-2)); }
.pick-check { position: absolute; right: -2px; bottom: -2px; width: 22px; height: 22px; border-radius: 50%; display: none; place-items: center; background: var(--tint-bg); color: #ffffff; box-shadow: 0 0 0 2px var(--map-floor); }
.pick-check .icon { width: 13px; height: 13px; stroke-width: 3; }
.pick[aria-checked="true"] .pick-check { display: grid; }

/* Form rows */
.form-list li.pair { padding: 0; }
.form-list li.pair input { flex: 1; min-width: 0; padding-inline: 16px; }
.form-list li.pair input + label + input { border-left: .5px solid var(--separator); }
.at-row .at { color: var(--label-3); font-size: 1rem; margin-right: 2px; }
.select-row { justify-content: space-between; gap: 12px; }
.select-row label { flex: none; padding: 13px 0; }
.select-row select { min-width: 0; max-width: 64%; border: 0; background: none; color: var(--label-2); font: inherit; font-size: 1rem; text-align: right; text-align-last: right; outline: none; }
.list.spaced { margin-top: 14px; }

/* Team details */
.track-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -4px 0 14px; }
.track-pill { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px 0 9px; border-radius: 999px; background: color-mix(in srgb, var(--tc) 14%, transparent); color: var(--tc); font-size: .76rem; font-weight: 700; }
.track-pill .icon { width: 16px; height: 16px; }
.seat-pill { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 999px; background: var(--fill-2); font-size: .76rem; font-weight: 600; color: var(--label-2); }
.seat-pill.open { background: var(--green-fill); color: var(--green-text); }
@media (prefers-color-scheme: dark) { .track-pill { color: color-mix(in srgb, var(--tc) 55%, #ffffff); } }
.member-row { display: flex; align-items: center; gap: 12px; padding: 9px 14px; min-height: 52px; }
.member-row .who { flex: 1; min-width: 0; display: grid; gap: 1px; }
.member-row .who strong { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.member-row .who span { font-size: .76rem; color: var(--label-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.role-badge { flex: none; padding: 3px 8px; border-radius: 999px; background: var(--tint-fill); color: var(--tint); font-size: .65rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.seat-empty { color: var(--label-3); }
.seat-empty .avatar { background: none; box-shadow: inset 0 0 0 1.5px var(--label-3); color: var(--label-3); }
#d-members > li + li::before, .panel .members > li + li::before { left: 58px; }

/* Organizer: stats, toolbar, circles */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.stat { padding: 12px 14px; border-radius: 18px; background: var(--cell); }
.stat b { display: block; font: 700 1.65rem/1.1 var(--font-rounded); font-variant-numeric: tabular-nums; }
.stat span { font-size: .76rem; color: var(--label-2); }
@media (max-width: 520px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.org-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.org-toolbar .search { flex: 1 1 260px; background: var(--cell); }
.toolbar-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.pill-btn { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 16px 0 12px; border: 0; border-radius: 999px; background: var(--cell); color: var(--tint); font-size: .88rem; font-weight: 600; }
.pill-btn .icon { width: 19px; height: 19px; }
.pill-btn:active { transform: scale(.97); }
.org .chips { margin: 14px 0 4px; padding: 2px 0 4px; }
.org .chip { background: var(--cell); }
.org .chip[aria-selected="true"] { background: var(--tc, var(--label)); }
.nav-link { margin-left: auto; padding: 8px 0 8px 8px; border: 0; background: none; color: var(--tint); font-size: 1rem; }
.center { text-align: center; }

.circles { display: grid; grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); gap: 26px 10px; justify-items: center; padding: 24px 0 8px; }
.circle { position: relative; width: 136px; height: 136px; padding: 0; border: 0; border-radius: 50%; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--tc) 20%, var(--cell)), color-mix(in srgb, var(--tc) 9%, var(--cell))); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--tc) 55%, transparent), 0 6px 18px rgba(0, 0, 0, .08); color: var(--label); cursor: pointer; transition: transform .25s var(--spring), box-shadow .25s; }
.circle:hover { transform: scale(1.04); }
.circle:active { transform: scale(.97); }
.circle.special { background: var(--cell); box-shadow: inset 0 0 0 2px var(--separator); }
.circle.special.dashed { box-shadow: none; background: transparent; outline: 2px dashed var(--label-3); outline-offset: -2px; }
.circle-core { position: absolute; inset: 22px; display: grid; place-content: center; justify-items: center; gap: 3px; text-align: center; }
.circle-core .icon { width: 18px; height: 18px; color: var(--tc, var(--label-2)); }
.circle-name { max-width: 92px; font-size: .82rem; font-weight: 700; line-height: 1.15; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.circle-sub { font-size: .65rem; font-weight: 600; color: var(--label-2); }
.seat { position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; display: grid; place-items: center; font: 700 .65rem/1 var(--font-rounded); color: #ffffff; background: var(--c, var(--gray)); box-shadow: 0 0 0 3px var(--bg-grouped); }
.seat.empty { background: var(--bg-grouped); box-shadow: 0 0 0 3px var(--bg-grouped), inset 0 0 0 1.5px var(--label-3); }
.seat.more { background: var(--label); color: var(--bg-grouped); }
.seat.s0 { left: 17%; top: 17%; } .seat.s1 { left: 83%; top: 17%; } .seat.s2 { left: 83%; top: 83%; } .seat.s3 { left: 17%; top: 83%; }
.seat.s4 { left: 50%; top: 100%; }
.circle-pin { position: absolute; top: -4px; left: 50%; width: 26px; height: 26px; margin-left: -13px; border-radius: 50%; display: grid; place-items: center; background: var(--tc, var(--t-none)); color: #ffffff; box-shadow: 0 0 0 3px var(--bg-grouped); }
.circle-pin .icon { width: 15px; height: 15px; stroke-width: 2.2; }
.circle.full::after { content: "Full"; position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%); padding: 2px 8px; border-radius: 999px; background: var(--label); color: var(--bg-grouped); font-size: .6rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }

/* Organizer pop-out panels */
.panel { width: min(520px, calc(100vw - 20px)); max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; padding: 18px 16px 20px; border-radius: 30px; background: var(--bg-grouped); box-shadow: 0 24px 60px rgba(0, 0, 0, .3); }
.panel-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.panel-head .avatar { width: 48px; height: 48px; font-size: .94rem; }
.panel-head .avatar .icon { width: 24px; height: 24px; }
.panel-head-text { flex: 1; min-width: 0; }
.panel-head h2 { margin: 0; font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em; overflow-wrap: anywhere; }
.panel-head p { margin: 2px 0 0; font-size: .82rem; color: var(--label-2); }
.panel .list { background: var(--cell); }
.panel .mini-title { margin-top: 18px; }
.panel .member-row { padding-right: 8px; }
.panel .member-row select { max-width: 120px; height: 32px; border: 0; border-radius: 999px; padding: 0 10px; background: var(--fill-2); color: var(--tint); font: inherit; font-size: .76rem; font-weight: 600; }
.icon-btn { flex: none; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--label-2); display: grid; place-items: center; }
.icon-btn .icon { width: 19px; height: 19px; }
.icon-btn.danger { color: var(--red-text); }
.icon-btn:active { background: var(--fill-2); }
.panel .btn-primary { margin-top: 16px; }
@media (max-width: 520px) { .panel { margin: auto auto 10px; border-radius: 30px; max-height: calc(100dvh - 60px); } }

/* Steps, secondary buttons, inline icons */
.step-label { margin: -4px 0 12px; text-align: center; font-size: .76rem; font-weight: 600; color: var(--label-2); letter-spacing: .02em; text-transform: uppercase; }
.lede-small { margin: 0 4px 12px; font-size: .88rem; color: var(--label-2); }
.btn-secondary { width: 100%; min-height: 46px; margin-top: 8px; border: 0; border-radius: 999px; background: var(--fill-2); color: var(--tint); font-weight: 600; font-size: 1rem; }
.icon.inline { width: 1em; height: 1em; vertical-align: -2px; margin-right: 2px; }
.footnote.center { text-align: center; margin-top: 14px; }

/* Announcement / reminder banner */
.notice { position: absolute; z-index: 45; top: calc(var(--safe-t) + 8px); left: 50%; transform: translateX(-50%); width: min(460px, calc(100% - 20px)); display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 12px; border-radius: 24px; animation: drop-in .45s var(--spring); }
.notice-icon { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--tint-bg); color: #ffffff; }
.notice-icon .icon { width: 22px; height: 22px; }
.notice-text { flex: 1; min-width: 0; display: grid; gap: 1px; padding: 0; border: 0; background: none; color: var(--label); text-align: left; font: inherit; cursor: pointer; }
.notice-text strong { font-weight: 600; font-size: .94rem; }
.notice-text span { font-size: .82rem; color: var(--label-2); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
@media (min-width: 700px) { .notice { left: calc(var(--side-w) + 20px + (100% - var(--side-w) - 20px) / 2); } }

/* Schedule */
.now-row .avatar { background: var(--tint-bg); border-radius: 30%; }
.now-row .avatar .icon { width: 20px; height: 20px; }
.notify-box { display: grid; gap: 8px; margin-bottom: 4px; padding: 14px; border-radius: 18px; background: var(--cell-glass); }
.notify-box .row { display: flex; align-items: center; gap: 12px; }
.notify-box .row .icon { width: 26px; height: 26px; color: var(--tint); flex: none; }
.notify-box strong { font-weight: 600; }
.notify-box p { margin: 0; font-size: .82rem; color: var(--label-2); }
.notify-box .btn-primary { margin-top: 4px; }
.notify-box.on .row .icon { color: var(--green-text); }
.news { display: grid; gap: 2px; padding: 11px 14px; }
.news strong { font-weight: 600; }
.news span { font-size: .88rem; overflow-wrap: anywhere; white-space: pre-wrap; }
.news time { font-size: .7rem; color: var(--label-2); }
.slots { list-style: none; margin: 0; padding: 0; border-radius: 18px; background: var(--cell-glass); overflow: hidden; }
.slot { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 11px 14px 11px 12px; }
.slot + .slot::before { content: ""; position: absolute; top: 0; right: 0; left: 86px; height: .5px; background: var(--separator); }
.slot-time { text-align: right; font-variant-numeric: tabular-nums; line-height: 1.15; }
.slot-time b { display: block; font-weight: 600; font-size: .94rem; }
.slot-time span { font-size: .7rem; color: var(--label-2); }
.slot-body { display: grid; gap: 2px; min-width: 0; }
.slot-body strong { font-weight: 600; }
.slot-body span { font-size: .82rem; color: var(--label-2); overflow-wrap: anywhere; }
.slot .icon { width: 17px; height: 17px; color: var(--label-3); margin-top: 2px; }
.slot.past { opacity: .45; }
.slot.now { background: var(--tint-fill); }
.slot.now .slot-time b { color: var(--tint); }
.now-badge { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--tint-bg); color: #ffffff; font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; vertical-align: 2px; }
.day-title { margin: 18px 4px 8px; font-size: 1rem; font-weight: 700; }

/* Messages */
.thread .avatar.icon-avatar { background: var(--tint-bg); }
.thread .avatar .icon { width: 20px; height: 20px; }
.thread .unread { flex: none; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--tint-bg); color: #ffffff; font: 700 .7rem/22px var(--font-rounded); text-align: center; }
.thread .when { flex: none; font-size: .7rem; color: var(--label-2); align-self: flex-start; margin-top: 3px; }
.card.chat:not([hidden]) { display: flex; flex-direction: column; min-height: 100%; }
.card.chat .chat-log { flex: 1; }
.chat .nav-row { margin-bottom: 4px; }
.chat-title { display: grid; justify-items: center; min-width: 0; }
.chat-title span { font-size: .7rem; color: var(--label-2); display: flex; align-items: center; gap: 3px; white-space: nowrap; }
.chat-title .icon { width: 12px; height: 12px; }
.chat-log { display: flex; flex-direction: column; gap: 3px; min-height: 180px; padding: 6px 2px 10px; }
.msg { max-width: 80%; display: grid; gap: 2px; }
.msg .who { margin: 6px 12px 0; font-size: .7rem; font-weight: 600; color: var(--label-2); }
.msg .bubble { padding: 8px 13px; border-radius: 20px; background: var(--fill-2); color: var(--label); font-size: .94rem; line-height: 1.32; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.mine { align-self: flex-end; }
.msg.mine .bubble { background: var(--tint-bg); color: #ffffff; }
.msg.locked .bubble { font-style: italic; color: var(--label-2); background: none; box-shadow: inset 0 0 0 1px var(--separator); }
.msg-time { align-self: center; margin: 10px 0 4px; font-size: .68rem; color: var(--label-2); }
.chat-empty { margin: auto; padding: 30px 10px; text-align: center; color: var(--label-2); font-size: .88rem; }
.chat-compose { position: sticky; bottom: 0; display: flex; align-items: flex-end; gap: 8px; margin: 0 -14px; padding: 8px 14px calc(var(--safe-b) + 8px); background: linear-gradient(to bottom, transparent, var(--glass-solid) 30%); }
@media (min-width: 700px) { .chat-compose { margin: 0 -16px; padding: 8px 16px 4px; } }
.chat-compose textarea { flex: 1; min-width: 0; max-height: 140px; padding: 10px 16px; border: 0; border-radius: 22px; background: var(--fill-2); color: var(--label); font: inherit; font-size: 1rem; line-height: 1.3; resize: none; outline: none; box-shadow: inset 0 0 0 .5px var(--separator); }
.chat-compose textarea:focus { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--tint) 50%, transparent); }
.send-btn { flex: none; width: 40px; height: 40px; margin-bottom: 2px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--tint-bg); color: #ffffff; transition: opacity .15s, transform .15s var(--spring); }
.send-btn .icon { width: 20px; height: 20px; stroke-width: 2.6; }
.send-btn:disabled { opacity: .35; }
.send-btn:active:not(:disabled) { transform: scale(.92); }

/* Organizer: announcements, schedule, moderation */
.area-row { padding-block: 4px; }
.area-row textarea { width: 100%; padding: 10px 0; border: 0; background: none; color: var(--label); font: inherit; font-size: 1rem; resize: vertical; outline: none; }
.area-row textarea::placeholder { color: var(--label-3); }
#ann-form .btn-primary { margin-top: 12px; }
.org-item { display: flex; align-items: flex-start; gap: 12px; padding: 11px 8px 11px 16px; }
.org-item .who { flex: 1; min-width: 0; display: grid; gap: 2px; }
.org-item .who strong { font-weight: 600; overflow-wrap: anywhere; }
.org-item .who span { font-size: .82rem; color: var(--label-2); overflow-wrap: anywhere; white-space: pre-wrap; }
.org-item .when { flex: none; width: 116px; font-size: .82rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--tint); }
.org-item .bell { flex: none; width: 17px; height: 17px; margin-top: 2px; color: var(--label-3); }
.org-item .audit-mark { flex: none; width: 19px; height: 19px; margin-top: 2px; }
.org-item .audit-mark.ok { color: var(--green-text); }
.org-item .audit-mark.bad { color: var(--red-text); }
.org .list > li.org-item + li::before { left: 16px; }
.group-header .nav-link { margin-left: auto; font-size: .94rem; font-weight: 600; }
.select-row input[type="date"], .select-row input[type="time"] { min-width: 0; border: 0; background: none; color: var(--tint); font: inherit; font-size: 1rem; text-align: right; outline: none; }

@media (prefers-reduced-motion: reduce) {
  .notice { animation: none; }
  .circle, .pick-circle { transition: none; }
  .sheet { transition-duration: .01s; }
  .pulse { animation: none; opacity: .5; }
  dialog[open], .hud, .banner, .card.entering { animation: none; }
}