:root{
  color-scheme:light dark;
  --ink:#1F1B3A;
  --paper:#FAF9FF;
  --surface:#FFFFFF;
  --surface-2:#FFFFFF;
  --brand:#4F46E5;
  --brand-dark:#4338CA;
  --accent:#0891B2;
  --accent-dark:#0E7490;
  --accent-fg:#04282E;
  --danger:#DC2626;
  --rule:#E7E5F5;
  --ink-2:#635F82;
  --btn-hover:#F1EFFC;
  --flash-bg:#FFF4E8; --flash-border:#FBC490; --flash-fg:#7A3E0A;
  --bar-bg:rgba(31,27,58,.88);
  --bar-fg:#FAF9FF;
  --bar-fg-dim:#C7C3E0;
  --shadow-1:0 1px 2px rgba(31,27,58,.08), 0 1px 1px rgba(31,27,58,.05);
  --shadow-2:0 4px 14px rgba(31,27,58,.12), 0 1px 3px rgba(31,27,58,.08);
  --edge:transparent;
  --r:18px;
  --r-sm:12px;
  --type-reminder:#4F46E5; --type-reminder-bg:#EAE8FC;
  --type-task:#059669;     --type-task-bg:#DCFCE7;
  --type-note:#DB2777;     --type-note-bg:#FCE7F3;
}
@media (prefers-color-scheme: dark){
  :root{
    --ink:#ECEAF9;
    --paper:#0F0D1A;
    --surface:#1A1729;
    --surface-2:#252135;
    --brand:#818CF8;
    --brand-dark:#A5B4FC;
    --accent:#FB923C;
    --accent-dark:#F97316;
    --danger:#F87171;
    --rule:#3D3A52;
    --ink-2:#B8B4D1;
    --edge:rgba(251,146,60,.12);
    --btn-hover:#2A2543;
    --flash-bg:#3A2812; --flash-border:#FB923C; --flash-fg:#FBC490;
    --shadow-1:0 4px 12px rgba(0,0,0,.4), 0 2px 4px rgba(0,0,0,.3);
    --shadow-2:0 12px 32px rgba(0,0,0,.5), 0 4px 8px rgba(0,0,0,.35);
    --type-reminder:#818CF8; --type-reminder-bg:#2A2760;
    --type-task:#6EE7B7;     --type-task-bg:#0F3D2C;
    --type-note:#F9A8D4;     --type-note-bg:#4A1435;
  }
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Instrument Sans",system-ui,sans-serif;font-size:16px;line-height:1.55}
a{color:inherit}
.bar{position:sticky;top:0;z-index:20;background:var(--bar-bg);color:var(--bar-fg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(12px + env(safe-area-inset-top,0px)) 16px 12px}
.mark{font-family:"Archivo Black",sans-serif;font-size:19px;letter-spacing:-.01em;text-decoration:none;white-space:nowrap}
.mark span{color:var(--accent)}
.wrap{max-width:640px;margin:0 auto;padding:20px 16px calc(100px + env(safe-area-inset-bottom,0px))}
body.has-tabbar .wrap{padding-bottom:calc(148px + env(safe-area-inset-bottom,0px))}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-weight:600;border:1px solid var(--edge);background:var(--surface);color:var(--ink);border-radius:var(--r-sm);padding:11px 18px;cursor:pointer;text-decoration:none;min-height:46px;box-shadow:var(--shadow-2);transition:all .2s ease}
.btn:hover{background:var(--btn-hover);transform:translateY(-1px);box-shadow:0 8px 20px rgba(251,146,60,.15), var(--shadow-2)}
.btn-post{background:var(--brand);color:#fff;padding:9px 14px;min-height:0;white-space:nowrap;box-shadow:none;border-color:transparent}
.btn-post:hover{background:var(--brand-dark)}
.btn-big{width:100%;background:var(--brand);border-color:transparent;color:#fff;font-size:17px;min-height:54px;box-shadow:var(--shadow-2)}
.btn-big:hover{background:var(--brand-dark)}
.btn-sm{padding:8px 14px;min-height:38px;font-size:14px}
.btn-danger{color:var(--danger)}
.btn-danger:hover{background:#FDE8E8}
@media (prefers-color-scheme: dark){.btn-danger:hover{background:#3A2323}}
.btn.on{background:var(--brand);border-color:transparent;color:#fff}
.fabs{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:15;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
body.has-tabbar .fabs{bottom:calc(78px + env(safe-area-inset-bottom,0px))}
.fab{display:inline-flex;align-items:center;gap:8px;font:inherit;font-weight:700;font-size:15px;line-height:1;border:0;border-radius:999px;padding:0 20px;min-height:50px;background:linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);color:#000;text-decoration:none;white-space:nowrap;cursor:pointer;box-shadow:0 8px 24px rgba(251,146,60,.4);transition:all .2s ease}
.fab:hover{background:linear-gradient(135deg, var(--accent-dark) 0%, #EA580C 100%);transform:translateY(-2px);box-shadow:0 12px 32px rgba(251,146,60,.5)}
.fab:active{transform:translateY(0)}
.fab-plus{font-size:20px;font-weight:700;line-height:1;margin-top:-2px}
@media (max-width:400px){.fab{font-size:14px;padding:0 17px;min-height:47px}}
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;justify-content:space-around;background:var(--bar-bg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px))}
.tab{display:flex;flex-direction:column;align-items:center;gap:3px;flex:1;min-height:48px;padding:4px 4px 2px;text-decoration:none;color:var(--bar-fg-dim);font-size:11px;font-weight:600;border-radius:12px}
.tab svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8}
.tab.active{color:var(--bar-fg)}
.tab.active svg{stroke-width:2.2}
.tab-icon-wrap{position:relative;display:inline-flex}
.tab-dot{position:absolute;top:-2px;right:-4px;width:9px;height:9px;border-radius:50%;background:var(--accent);border:2px solid var(--bar-bg)}
h1{font-family:"Instrument Sans",system-ui,sans-serif;font-weight:600;font-size:23px;letter-spacing:-.01em;margin:0 0 6px}
.sub{color:var(--ink-2);margin:0 0 20px;font-size:15px}
.section-label{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2);margin:0 0 12px}
.groups-shelf{--paper:var(--surface-2);background:linear-gradient(135deg, var(--surface-2) 0%, color-mix(in srgb, var(--surface-2) 95%, var(--accent) 5%) 100%);border:1px solid var(--edge);border-radius:var(--r);padding:16px 16px 10px;margin:0 0 28px;box-shadow:var(--shadow-1)}
.groups-row{display:flex;gap:16px;overflow-x:auto;padding:2px 2px 6px;margin:0}
.group-chip{flex:none;width:76px;display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;color:inherit;opacity:1;transition:opacity .15s ease;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;touch-action:pan-x}
.group-chip-dim{opacity:.4}
.group-circle{position:relative;width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-2), 0 0 20px rgba(251,146,60,.25);color:#fff;font-weight:700;font-size:24px;font-family:"Archivo Black",sans-serif;transition:all .2s ease}
.group-chip:hover .group-circle{transform:scale(1.05);box-shadow:var(--shadow-2), 0 0 24px rgba(251,146,60,.35)}
.group-count{position:absolute;right:-2px;bottom:-2px;min-width:22px;height:22px;padding:0 5px;border-radius:999px;background:var(--surface);color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;border:2px solid var(--paper)}
.group-name{font-size:12.5px;font-weight:700;text-align:center;line-height:1.25}
.group-circle-active{box-shadow:0 0 0 3px var(--paper),0 0 0 5px var(--ink),var(--shadow-2)}
.group-chip-new .group-circle{background:var(--surface) !important;border:2px dashed var(--rule);box-shadow:none;color:var(--ink-2);font-size:28px;font-family:inherit;font-weight:400}
.group-chip-lifted{opacity:1 !important;z-index:5;position:relative}
.group-chip-lifted .group-circle{box-shadow:0 8px 20px rgba(0,0,0,.35);transform:scale(1.08)}
.avatars{display:flex;margin-left:2px}
.avatar{width:20px;height:20px;border-radius:50%;border:2px solid var(--surface);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:#fff;margin-left:-6px;flex:none}
.avatar:first-child{margin-left:0}
.flash{background:var(--flash-bg);color:var(--flash-fg);border-radius:var(--r-sm);padding:10px 14px;margin:0 0 16px;font-size:14px;box-shadow:var(--shadow-1)}
.field{margin-bottom:16px}
.field label{display:block;font-weight:600;font-size:14px;margin-bottom:6px}
.field input[type=text],.field input[type=email],.field input[type=password],.field input[type=number],.field input[type=datetime-local],.field textarea,.field select{width:100%;font:inherit;font-size:16px;padding:11px 12px;border:1px solid var(--rule);border-radius:var(--r-sm);background:var(--surface);color:var(--ink)}
.field input:focus,.field textarea:focus,.field select:focus{outline:2px solid var(--brand);outline-offset:1px}
.field .hint{font-size:13px;color:var(--ink-2);margin:6px 0 0}
.checkrow{display:flex;align-items:center;gap:8px;font-size:15px;margin:6px 0;font-weight:400}
.loc-toggle{display:flex;align-items:center;gap:12px;cursor:pointer;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:14px 16px;box-shadow:var(--shadow-1)}
.loc-toggle:has(input:checked){border-color:var(--accent);background:color-mix(in srgb, var(--accent) 10%, var(--surface))}
.loc-toggle input{width:20px;height:20px;flex:none;accent-color:var(--accent)}
.loc-toggle-icon{font-size:22px;flex:none}
.loc-toggle-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.loc-toggle-text strong{font-size:15px;font-weight:700}
.loc-toggle-text span{font-size:12.5px;color:var(--ink-2);font-weight:400}
.card{background:linear-gradient(135deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 98%, var(--brand) 2%) 100%);border:1px solid var(--edge);border-radius:var(--r);padding:18px;margin-bottom:14px;box-shadow:var(--shadow-2)}
.type-picker{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:20px}
.type-opt{display:flex;flex-direction:column;align-items:center;gap:4px;border:2px solid var(--rule);border-radius:var(--r);padding:12px 6px;cursor:pointer;text-align:center;background:var(--surface)}
.type-opt input{position:absolute;opacity:0;pointer-events:none}
.type-opt svg{width:22px;height:22px;fill:none;stroke:var(--ink-2);stroke-width:1.8}
.type-opt span{font-size:13px;font-weight:700;color:var(--ink-2)}
.type-opt.sel-reminder.checked{border-color:var(--type-reminder);background:var(--type-reminder-bg)}
.type-opt.sel-reminder.checked svg,.type-opt.sel-reminder.checked span{color:var(--type-reminder);stroke:var(--type-reminder)}
.type-opt.sel-task.checked{border-color:var(--type-task);background:var(--type-task-bg)}
.type-opt.sel-task.checked svg,.type-opt.sel-task.checked span{color:var(--type-task);stroke:var(--type-task)}
.type-opt.sel-note.checked{border-color:var(--type-note);background:var(--type-note-bg)}
.type-opt.sel-note.checked svg,.type-opt.sel-note.checked span{color:var(--type-note);stroke:var(--type-note)}
.badge{font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.badge-reminder{background:var(--type-reminder-bg);color:var(--type-reminder)}
.badge-task{background:var(--type-task-bg);color:var(--type-task)}
.badge-note{background:var(--type-note-bg);color:var(--type-note)}
.filter-row{display:flex;gap:8px;margin-bottom:16px;overflow-x:auto;padding-bottom:2px}
.filter-chip{flex:none;font-size:13px;font-weight:700;padding:8px 14px;border-radius:999px;border:1px solid var(--rule);background:var(--surface);color:var(--ink-2);text-decoration:none;white-space:nowrap}
.filter-chip.active{background:var(--brand);border-color:transparent;color:#fff}
.grid{display:flex;flex-direction:column;gap:12px}
.item{display:flex;gap:12px;background:linear-gradient(135deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 96%, var(--accent) 4%) 100%);border:1px solid var(--edge);border-radius:var(--r);padding:12px;text-decoration:none;color:var(--ink);position:relative;overflow:hidden;box-shadow:var(--shadow-2);align-items:flex-start;transition:all .2s ease}
.item:active{transform:translateY(1px);box-shadow:var(--shadow-1)}
.item.is-done{opacity:.55}
.item.is-done .item-name{text-decoration:line-through}
.item-check{flex:none;width:26px;height:26px;border-radius:50%;border:2px solid var(--rule);background:var(--surface);cursor:pointer;display:flex;align-items:center;justify-content:center;margin-top:2px}
.item-check.checked{background:var(--type-task);border-color:var(--type-task)}
.item-check.checked::after{content:"";width:9px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translateY(-1px)}
.item-thumb{width:56px;height:56px;flex:none;border-radius:12px;object-fit:cover;background:var(--rule)}
.item-thumb.ph{display:flex;align-items:center;justify-content:center;font-size:22px}
.item-body{min-width:0;flex:1;padding-left:2px}
.item-name{font-weight:700;font-size:16px;margin:0 0 3px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.item-meta{font-size:13px;color:var(--ink-2);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item-tags{display:flex;gap:6px;margin-top:7px;flex-wrap:wrap;align-items:center}
.empty{text-align:center;padding:60px 20px;color:var(--ink-2)}
.empty h2{font-weight:600;font-size:19px;color:var(--ink);margin:0 0 8px}
.search{display:flex;gap:8px;margin-bottom:16px}
.search input{flex:1;font:inherit;font-size:16px;padding:11px 12px;border:1.5px solid var(--edge);border-radius:var(--r-sm);background:var(--surface-2);color:var(--ink);box-shadow:var(--shadow-1);transition:all .2s ease}
.search input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(251,146,60,.15), var(--shadow-2)}
.attach-strip{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.attach-chip{position:relative;width:76px;height:76px;border-radius:12px;overflow:hidden;background:var(--paper);border:1px solid var(--rule)}
.attach-chip img{width:100%;height:100%;object-fit:cover;display:block}
.attach-chip.file{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.attach-chip.file svg{width:22px;height:22px;stroke:var(--ink-2);fill:none;stroke-width:1.8}
.attach-chip.file span{font-size:9px;color:var(--ink-2);padding:0 4px;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.attach-remove{position:absolute;top:2px;right:2px;width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;border:0;font-size:13px;line-height:1;cursor:pointer}
.attach-add{width:76px;height:76px;border-radius:12px;border:2px dashed var(--rule);display:flex;align-items:center;justify-content:center;font-size:26px;color:var(--ink-2);background:var(--surface);cursor:pointer;flex:none}
.sheet-overlay,.lightbox-overlay{position:fixed;inset:0;z-index:100;background:rgba(20,18,39,.6);display:flex;align-items:flex-end;justify-content:center;padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px))}
.sheet-card{width:100%;max-width:420px;background:var(--surface);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-2)}
.sheet-btn{display:block;width:100%;font:inherit;font-size:16px;font-weight:600;color:var(--ink);background:none;border:0;border-top:1px solid var(--rule);padding:16px;cursor:pointer;text-align:center;text-decoration:none}
.sheet-card .sheet-btn:first-child,.sheet-card>form:first-child .sheet-btn{border-top:0}
.sheet-card form .sheet-btn{width:100%}
.sheet-btn:hover{background:var(--btn-hover)}
.sheet-cancel{color:var(--ink-2)}
.lightbox-overlay{align-items:center;padding:24px}
.lightbox-img{max-width:100%;max-height:100%;border-radius:12px;box-shadow:var(--shadow-2);display:block}
.lightbox-close{position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:999px;border:0;background:rgba(0,0,0,.5);color:#fff;font-size:22px;line-height:1;cursor:pointer}
.reader-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.reader-back{text-decoration:none}
.reader-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.btn-icon{padding:8px 14px;font-size:20px;line-height:1;font-weight:700}
.reader-body{white-space:pre-wrap;word-wrap:break-word;font-size:15.5px;line-height:1.55;color:var(--ink)}
.link-btn{background:none;border:0;padding:0;font:inherit;font-size:15px;font-weight:600;color:var(--brand);cursor:pointer;text-decoration:underline}
.link-btn:hover{color:var(--brand-dark)}
.geosearch{position:relative}
.suggest-list{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:30;margin:0;padding:4px;list-style:none;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-sm);box-shadow:var(--shadow-2);max-height:220px;overflow-y:auto}
.suggest-item{padding:10px 10px;font-size:14px;border-radius:8px;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.suggest-item:hover,.suggest-item:active{background:var(--btn-hover)}
.locate-row{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap;align-items:center}
.loc-tip{background:var(--flash-bg);color:var(--flash-fg);border-radius:var(--r-sm);padding:12px 14px;margin:0 0 10px;font-size:14px;box-shadow:var(--shadow-1)}
.loc-tip p{margin:0 0 8px}
.loc-tip .link-btn{color:var(--flash-fg);font-size:14px}
.map-pick{height:220px;border-radius:var(--r);overflow:hidden;margin-bottom:8px;box-shadow:var(--shadow-1)}
.map-full{height:calc(100vh - 260px);min-height:320px;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-1)}
.map-hint{font-size:13px;color:var(--ink-2);margin:0 0 16px}
.radius-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.radius-opt{flex:none;font-size:13px;font-weight:700;padding:8px 14px;border-radius:999px;border:1px solid var(--rule);background:var(--surface);color:var(--ink-2);cursor:pointer}
.radius-opt.sel{background:var(--brand);border-color:transparent;color:#fff}
.leaflet-popup-content{font-family:"Instrument Sans",system-ui,sans-serif}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:var(--surface);color:var(--ink)}
.pin-popup{min-width:140px}
.pin-popup-title{font-weight:700;font-size:14px;margin:0 0 4px}
.pin-popup-note{font-size:12px;color:var(--ink-2);margin:0 0 6px}
.pin-popup a{color:var(--brand);font-weight:600;font-size:12px;text-decoration:none}
.nudge-pin{width:26px;height:26px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--brand);border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.nudge-pin::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;border-radius:50%;background:var(--accent);transform:translate(-50%,-50%) rotate(45deg)}
.compact-list{padding:4px !important}
.compact-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 12px;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--rule)}
.compact-row:last-child{border-bottom:0}
.compact-name{font-weight:600;font-size:15px;flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.compact-loc{font-size:13px;color:var(--ink-2);flex:0 1 42%;min-width:0;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.settings-list{padding:4px !important}
.settings-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 12px;text-decoration:none;color:var(--ink);font-weight:600;font-size:15px;border-bottom:1px solid var(--rule)}
.settings-row:last-child{border-bottom:0}
.settings-row .chev{color:var(--ink-2);font-weight:400;font-size:18px}
.share-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--rule)}
.share-row:last-child{border-bottom:0}
.share-who{display:flex;align-items:center;gap:10px;min-width:0}
.share-who span{font-weight:600;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.contact-list{display:flex;flex-direction:column;gap:2px}
.contact-check{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--rule);font-size:14.5px;font-weight:500;cursor:pointer}
.contact-check:last-child{border-bottom:0}
.contact-check input{width:18px;height:18px;flex:none}
.contact-hint{font-size:12px;color:var(--ink-2);margin-left:auto}
table.people{width:100%;border-collapse:collapse;font-size:14px}
table.people th,table.people td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--rule)}
@media (max-width:400px){.type-opt span{font-size:11.5px}}

/* ---------------------------------------------------------- voice memos
   Added 2026-09-13 with the in-app recorder. Audio attachments are pulled
   out of the 76px .attach-chip grid and given a native <audio> player -
   play/scrub/duration for free, and identical behaviour on iOS, Android
   and desktop, which a hand-rolled player does not get. */

.audio-att{
  position:relative;display:flex;align-items:center;gap:12px;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-sm);
  padding:12px 38px 12px 12px;margin-bottom:8px;
}
.audio-att.is-pending{border-style:dashed;border-color:var(--accent)}
.audio-att-ico{
  flex:0 0 38px;height:38px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:var(--type-reminder-bg);color:var(--type-reminder);
}
.audio-att-ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.audio-att-body{flex:1 1 auto;min-width:0}
.audio-att-name{
  display:block;font-size:12.5px;color:var(--ink-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:6px;
}
.audio-att-name em{font-style:normal;color:var(--accent-dark)}
@media (prefers-color-scheme: dark){.audio-att-name em{color:var(--accent)}}
.audio-att audio{width:100%;max-width:100%;height:36px;display:block}
.audio-att-remove{top:6px;right:6px}

/* the recording panel. Deliberately NOT .sheet-overlay - the global
   focus handler in form.html closes every .sheet-overlay when the window
   regains focus, which is exactly when the mic permission prompt closes. */
.rec-overlay{
  position:fixed;inset:0;z-index:120;background:rgba(20,18,39,.6);
  display:flex;align-items:flex-end;justify-content:center;
  padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px));
}
.rec-card{
  width:100%;max-width:420px;background:var(--surface);
  border-radius:var(--r);box-shadow:var(--shadow-2);
  padding:22px 20px 0;text-align:center;overflow:hidden;
}
.rec-head{display:flex;align-items:center;justify-content:center;gap:9px;color:var(--ink-2);font-weight:600;font-size:15px}
.rec-dot{width:11px;height:11px;border-radius:50%;background:var(--danger);animation:recpulse 1.4s ease-in-out infinite}
@keyframes recpulse{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion: reduce){.rec-dot{animation:none}}
.rec-time{font-size:40px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin:10px 0 16px}
.rec-msg{font-size:14.5px;line-height:1.5;color:var(--ink-2);margin:4px 0 18px}
.rec-card .rec-stop{margin-bottom:4px}
.rec-card .rec-cancel{margin:0 -20px}

/* ------------------------------------------------- HA location webhook card
   The /me settings block that hands out the webhook URL and the YAML to paste
   into Home Assistant. Folded in a <details> because it's power-user wiring. */
.ha-hook summary::-webkit-details-marker{display:none}
.ha-hook summary{list-style:none;display:flex;align-items:center;gap:8px}
.ha-hook summary::before{content:"▸";color:var(--ink-2);font-size:13px;transition:transform .15s ease}
.ha-hook[open] summary::before{transform:rotate(90deg)}
.ha-hook .hook-url{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-sm);
  color:var(--ink);padding:9px 10px;
}
.ha-hook .hook-yaml{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11.5px;line-height:1.5;
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-sm);
  color:var(--ink);padding:11px 12px;margin:0;
  overflow-x:auto;white-space:pre;
}
.ha-hook code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;
  background:var(--btn-hover);border-radius:5px;padding:1px 5px;
}
.ha-hook .hook-copy{margin-top:8px}