/* ── island ──
 * The phone's chrome (src/island.js): a pill and a mic at the bottom, the card home and
 * the all-notes deck. Everything is scoped to body.island and every selector is isl-
 * prefixed — the prototype hit five generic-name collisions before the rule.
 * Layers: home 52 (over the note, under live 55), deck 80, dim 84, pill + mic 86 — all
 * under the palette (100), the share sheet (110) and the voice panel (120).
 * Linked from index.html in cascade order (before overrides.css) — the order is load-bearing. */

#isl-root { display: none; }
body.island #isl-root { display: block; }

/* The desktop chrome steps aside; nothing leaves the DOM. */
body.island :is(#tabline, #sidebar, #sb-resize, #fab, #fab-mic, #empty-state) { display: none !important; }
/* The status bar goes too, except its message slot (flashCopied, upload progress): that
   drops in at the top as the prototype's toast — a small pill in the note's ink — which is
   where the undo pill (#isl-undo) shows too, so the phone has one place that says what happened. */
body.island #status {
  position: fixed; left: 0; right: 0; top: calc(env(safe-area-inset-top, 0px) + 8px); bottom: auto; z-index: 87;
  height: auto; padding: 0 16px; background: none; border: 0; justify-content: center; pointer-events: none;
}
body.island #status > :not(#status-copied) { display: none !important; }
body.island #status-copied {
  max-width: 100%; padding: 8px 15px; border-radius: 20px; white-space: normal; text-align: center;
  background: var(--fg); border: 0; color: var(--bg-page); font-size: 12px; font-weight: 600;
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .6); transform: translateY(-14px); transition: opacity .25s, transform .25s;
}
body.island #status-copied.visible { transform: none; pointer-events: auto; }
body.island #status-copied:empty { display: none; }
body.island #app-shell { grid-template-columns: 0 minmax(0, 1fr); }
body.island #document-container {
  padding-top: 8px;   /* #isl-top above it carries the safe area */
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 110px);   /* the last line clears the pill */
}

/* The note's path, ~/folder/name, above it — a tap opens all notes. */
#isl-top { display: none; }
body.island #isl-top {
  display: flex; flex: none; align-items: center; justify-content: center; gap: 5px; width: 100%;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 24px 6px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 11px; letter-spacing: .06em; color: var(--fg-faint);
}
#isl-top span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#isl-top .isl-ik { flex: none; opacity: .8; }

/* The block toolbar is for the block being edited; once the keyboard has gone, so has it. */
body.island .block.active:not(.editing) .touch-tools { display: none; }

/* Checklists sized for a thumb. */
body.island .md-check { align-items: flex-start; gap: 11px; padding: 4px 0; }
body.island .md-check .cb {
  width: 20px; height: 20px; margin-top: 1px; transform: none;
  border: 1.5px solid var(--fg-faint); border-radius: 6px; font-size: 12px; font-weight: 700;
}
body.island .md-check.done .cb { background: var(--accent); border-color: var(--accent); color: var(--bg-page); }

:root { --isl-spring: cubic-bezier(.3, 1.25, .4, 1); --isl-safe-b: env(safe-area-inset-bottom, 0px); }

.isl-ik .k { fill: var(--accent); stroke: none; }

/* ── The pill ── */
#isl-pill {
  --w: 236px; --h: 50px; --shift: -30px;
  position: fixed; left: 50%; bottom: calc(var(--isl-safe-b) + 12px); z-index: 86;
  width: var(--w); height: var(--h); margin-left: calc(var(--w) / -2 + var(--shift));
  border-radius: 26px; background: var(--fg); color: var(--bg-page);
  overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab;
  box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .7);
  transition: width .45s var(--isl-spring), height .45s var(--isl-spring), margin .45s var(--isl-spring),
              bottom .45s var(--isl-spring), border-radius .4s, transform .3s, opacity .25s;
}
#isl-pill.isl-drag { transition: none; }
#isl-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* Open, the pill becomes the panel and rises one mic-height, so the mic keeps its spot. */
#isl-pill[data-s="open"] {
  --w: min(440px, calc(100vw - 24px)); --h: 330px; --shift: 0px;
  bottom: calc(var(--isl-safe-b) + 72px); border-radius: 34px; cursor: default;
}

.isl-closed, .isl-open { position: absolute; inset: 0; transition: opacity .2s; }
.isl-closed { display: flex; align-items: center; gap: 10px; padding: 0 18px 0 9px; }
#isl-pill:not([data-s="closed"]) .isl-closed,
#isl-pill:not([data-s="open"]) .isl-open { opacity: 0; pointer-events: none; }
.isl-ring { flex: none; }
.isl-nm { flex: 1; min-width: 0; font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.isl-sz { font-size: 11px; opacity: .55; font-variant-numeric: tabular-nums; }
.isl-dots { position: absolute; bottom: 7px; left: 50%; transform: translateX(-50%); display: flex; gap: 3px; }
.isl-dots i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .25; }
.isl-dots i.isl-on { opacity: .9; }

.isl-open { padding: 20px 20px 16px; display: flex; flex-direction: column; gap: 14px; transition-delay: .08s; }
.isl-oh { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.isl-oh b { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.isl-oh span { font-size: 11px; opacity: .6; white-space: nowrap; }
.isl-acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.isl-act {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: none; border: 0; padding: 0; color: inherit; font-size: 11px; font-weight: 600; cursor: pointer;
}
.isl-act i {
  width: 52px; height: 52px; border-radius: 18px; display: grid; place-items: center; font-style: normal;
  background: color-mix(in srgb, var(--bg-page) 12%, transparent); transition: transform .15s;
}
.isl-act:active i { transform: scale(.92); }
.isl-cmdf {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px 14px; border: 0; border-radius: 16px;
  background: color-mix(in srgb, var(--bg-page) 12%, transparent); color: inherit; font-size: 13px; opacity: .85; cursor: pointer;
}
.isl-hintl { font-size: 10px; opacity: .5; text-align: center; }

/* ── The mic ── */
#isl-mic {
  position: fixed; left: calc(50% + 98px); bottom: calc(var(--isl-safe-b) + 12px); z-index: 86;
  width: 50px; height: 50px; border-radius: 50%; border: 0; display: grid; place-items: center;
  background: var(--bg-page); color: var(--fg); cursor: pointer; touch-action: none;
  user-select: none; -webkit-user-select: none;
  box-shadow: inset 0 0 0 2px var(--fg), 0 14px 32px -14px rgba(0, 0, 0, .45);
  transition: transform .35s var(--isl-spring), opacity .2s, background .2s;
}
#isl-mic:active { transform: scale(.9); }
#isl-mic:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* The mic sits on the pill's left ring (the link-capacity ring the pill draws), so the round button
   on the right is the agent's. Transparent, so the ring shows around it. The pill is 236px wide,
   shifted 30px left: its left edge is 148px left of centre, and the ring starts 9px inside it. */
body.island #isl-mic {
  left: calc(50% - 139px); bottom: calc(var(--isl-safe-b) + 21px);
  width: 32px; height: 32px; background: transparent; color: var(--bg-page); box-shadow: none;
}
body.island #isl-mic svg { width: 15px; height: 15px; }
/* The pill is a panel or the held note's talk bar: it has its own mic. */
#isl-root[data-s="open"] #isl-mic, body.isl-menu-on #isl-mic { opacity: 0; pointer-events: none; }
/* Over the red recording card the mic only fades: a hold that began on it must still be heard to end,
   and a tap on that spot stops the recording, as a tap on the card does. */
body.isl-rec-card #isl-mic { opacity: 0; }
/* Drawn at 32px to fit the ring, but a thumb gets 44px. */
body.island #isl-mic::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; }

/* ── The agent's button: where the mic used to sit, the face and its dot ── */
#isl-agent {
  position: fixed; left: calc(50% + 98px); bottom: calc(var(--isl-safe-b) + 12px); z-index: 86;
  width: 50px; height: 50px; border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center;
  background: #fdf6e8; cursor: pointer; touch-action: manipulation;
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  box-shadow: 0 0 0 1px var(--border), 0 14px 32px -14px rgba(0, 0, 0, .45);
  transition: transform .35s var(--isl-spring), opacity .2s, box-shadow .2s;
}
#isl-agent:active { transform: scale(.9); }
#isl-agent:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
#isl-agent[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--accent), 0 14px 32px -14px rgba(0, 0, 0, .45); }
#isl-agent .agent-face-wrap { width: 100%; height: 100%; }
#isl-agent .agent-face { width: 100%; height: 100%; }
#isl-agent .agent-dot { right: 1px; top: 1px; width: 13px; height: 13px; }
/* It steps aside wherever the pill and mic do, and while a recording or a hold menu has the bottom. */
body.isl-kb #isl-agent, body.isl-sheet-on #isl-agent, body.isl-rec #isl-agent, body.isl-menu-on #isl-agent { opacity: 0; pointer-events: none; }
/* The pill's open panel and its dim sit over the agent's card, and focus mode has no agent at all. */
#isl-root[data-s="open"] #isl-agent, body.focus-mode #isl-agent { opacity: 0; pointer-events: none; }

/* Listening, the mic is the stop button: red, a white square. */
body.isl-rec #isl-mic { background: var(--danger); color: #fff; box-shadow: 0 14px 32px -14px rgba(0, 0, 0, .45); }
body.isl-rec #isl-mic svg { display: none; }
body.isl-rec #isl-mic::after { content: ''; width: 16px; height: 16px; border-radius: 4px; background: #fff; }

/* The keyboard is up: the pill and mic step aside for it. */
body.isl-kb #isl-pill { opacity: 0; pointer-events: none; transform: translateY(30px); }
body.isl-kb #isl-mic { opacity: 0; pointer-events: none; transform: scale(.4); }

/* ── The backdrop behind the open panel ── */
#isl-dim {
  position: fixed; inset: 0; z-index: 84; opacity: 0; pointer-events: none;
  background: color-mix(in srgb, var(--bg-page) 50%, transparent);
  transition: opacity .35s ease, backdrop-filter .35s ease, -webkit-backdrop-filter .35s ease;
}
#isl-root:is([data-s="open"], [data-s="menu"], [data-s="sheet"]) #isl-dim {
  opacity: 1; pointer-events: auto; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}

/* ── Home ── */
#isl-home {
  position: fixed; inset: 0; z-index: 52; display: none; flex-direction: column;
  padding: calc(env(safe-area-inset-top, 0px) + 34px) 24px calc(var(--isl-safe-b) + 90px);
  background: var(--bg-page); color: var(--fg); overflow-y: auto;
}
body.island.isl-at-home #isl-home { display: flex; }
.isl-date { font-size: 12px; color: var(--fg-dim); letter-spacing: .02em; }
.isl-ask {
  margin-top: 12px; padding: 0; border: 0; background: none; text-align: left; cursor: text;
  font-size: 30px; font-weight: 800; letter-spacing: -.04em; line-height: 1.15; color: var(--fg-faint);
}
.isl-caret {
  display: inline-block; width: .5em; height: .95em; margin-left: 4px; vertical-align: -.1em;
  background: var(--accent); animation: isl-blink 1.1s steps(1) infinite;
}
@keyframes isl-blink { 50% { opacity: 0; } }
.isl-sub { font-size: 12.5px; color: var(--fg-dim); margin-top: 12px; max-width: 28ch; line-height: 1.55; }
.isl-rh {
  margin-top: auto; padding-top: 24px; margin-bottom: 10px; font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--fg-faint); font-weight: 600;
}
.isl-rh span { text-transform: none; letter-spacing: .02em; }
.isl-minis {
  display: flex; gap: 10px; overflow-x: auto; margin: 0 -24px; padding: 4px 24px 6px;
  scrollbar-width: none; scroll-snap-type: x proximity;
  /* Snap to the 24px gutter, not the edge: without it a card's start snaps to x=0,
     so the row scrolls itself 24px on load and the first card touches the screen edge. */
  scroll-padding-inline: 24px;
}
.isl-minis::-webkit-scrollbar { display: none; }
.isl-mini {
  flex: none; width: 128px; height: 168px; padding: 12px; scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 6px; overflow: hidden; text-align: left; cursor: pointer;
  background: var(--bg-raised); border: 1px solid var(--border); border-radius: 16px; color: var(--fg);
  transition: transform .45s var(--isl-spring), box-shadow .35s ease;
}
.isl-mini:active { transform: scale(.96); }
.isl-mini .isl-t { font-weight: 700; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: none; }
.isl-mini .isl-p {
  font-size: 8.5px; line-height: 1.5; color: var(--fg-dim); flex: none;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.isl-mini .isl-p:empty { display: none; }
.isl-mini .isl-kcs { max-height: 15px; overflow: hidden; }
.isl-mini .isl-s {
  font-size: 9.5px; color: var(--fg-dim); display: flex; justify-content: space-between; gap: 6px;
  padding-top: 7px; border-top: 1px solid var(--border); font-variant-numeric: tabular-nums; flex: none;
}
.isl-ag { color: var(--fg-faint); white-space: nowrap; }

/* A note's silhouette: one hairline per line, coloured by what the line is. */
.isl-mm {
  flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 2.5px; padding: 3px 0 0 6px; overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 65%, transparent); mask-image: linear-gradient(#000 65%, transparent);
}
.isl-mm i { display: block; flex: none; position: relative; height: 2px; border-radius: 1px; background: var(--fg-faint); }
.isl-mm .isl-mm-h { height: 3px; background: var(--fg); }
.isl-mm .isl-mm-li, .isl-mm .isl-mm-td { background: var(--fg-dim); }
.isl-mm .isl-mm-c { background: var(--accent); opacity: .7; }
.isl-mm .isl-mm-dn { background: var(--border); }
.isl-mm :is(.isl-mm-td, .isl-mm-dn)::before {
  content: ''; position: absolute; left: -6px; top: -.5px; width: 3px; height: 3px; border-radius: 50%; background: var(--warn);
}
.isl-mm .isl-mm-dn::before { background: var(--accent); }
.isl-mm .isl-mm-o { height: 8px; border-radius: 2px; background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }

.isl-nf { display: flex; align-items: center; gap: 4px; color: var(--fg-dim); white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.isl-nf b { color: var(--fg); font-weight: 700; }
.isl-kcs { display: flex; gap: 3px; flex-wrap: wrap; flex: none; min-width: 0; }
.isl-kc {
  font-size: 8.5px; line-height: 1.5; padding: 0 5px; border-radius: 4px; white-space: nowrap; letter-spacing: .04em;
  border: 1px solid var(--accent-line); color: var(--accent);
}
.isl-kc.isl-warn { border-color: color-mix(in srgb, var(--warn) 45%, transparent); color: var(--warn); }

/* ── All notes ── */
#isl-all {
  position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column;
  padding-top: env(safe-area-inset-top, 0px);
  background: color-mix(in srgb, var(--bg-page) 94%, transparent);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  transform: translateY(-102%); visibility: hidden;
  transition: transform .4s cubic-bezier(.2, .85, .25, 1), visibility 0s .4s;
}
#isl-all.isl-on { transform: none; visibility: visible; transition: transform .4s cubic-bezier(.2, .85, .25, 1); }
.isl-all-h { padding: 10px 20px 4px; font-size: 26px; font-weight: 800; letter-spacing: -.04em; color: var(--fg); }
/* The list stops above the handle, and the handle above the pill and the mic, so the last
   card is never under them. */
#isl-all { padding-bottom: calc(var(--isl-safe-b) + 70px); }
.isl-grab {
  flex: none; display: grid; place-items: center; padding: 10px 0 4px; border: 0; background: none;
  cursor: grab; touch-action: none;
}
.isl-grab i { width: 38px; height: 5px; border-radius: 3px; background: var(--fg-faint); }
.isl-x { width: 40px; height: 40px; border: 0; background: none; color: var(--fg-dim); display: grid; place-items: center; cursor: pointer; }
.isl-find {
  display: flex; align-items: center; gap: 8px; margin: 8px 16px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 14px; background: var(--bg-raised); color: var(--fg-dim);
}
.isl-find input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--fg); font: inherit; font-size: 16px; }
.isl-all-l { flex: 1; overflow-y: auto; padding: 0 12px 6px; }
.isl-chips { display: flex; gap: 6px; overflow-x: auto; padding: 4px 4px 12px; scrollbar-width: none; }
.isl-chips::-webkit-scrollbar { display: none; }
.isl-chip {
  flex: none; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: none;
  color: var(--fg-dim); font-size: 12px; cursor: pointer;
}
.isl-chip.isl-on { background: var(--fg); border-color: var(--fg); color: var(--bg-page); }
.isl-deck { display: flex; flex-direction: column; gap: 10px; }
.isl-card {
  display: block; width: 100%; text-align: left; cursor: pointer; color: var(--fg);
  background: var(--bg-raised); border: 1px solid var(--border); border-radius: 18px; padding: 14px 15px 12px;
  transition: transform .32s cubic-bezier(.2, .8, .2, 1);
}
.isl-card:active { transform: scale(.98); }
.isl-card .isl-t { display: block; font-weight: 700; font-size: 15px; letter-spacing: -.01em; }
.isl-card .isl-p {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  color: var(--fg-dim); font-size: 12.5px; line-height: 1.5; margin-top: 4px;
}
.isl-card .isl-p:empty { display: none; }
.isl-f { display: flex; align-items: center; gap: 10px; margin-top: 11px; font-size: 11px; color: var(--fg-dim); }
.isl-f .isl-kc { font-size: 10px; }
.isl-sp { margin-left: auto; display: flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.isl-none { padding: 40px 0; text-align: center; color: var(--fg-dim); font-size: 13px; }

/* Going home: the note as it was, folding into its card. */
.isl-ghost {
  position: fixed; inset: 0; z-index: 53; pointer-events: none; overflow: hidden;
  display: flex; flex-direction: column; background: var(--bg-page);
}

/* ── Todo lists (src/island-todos.js) ──
   Only the todo card gives up room on a crowded home: everything else keeps its size,
   and the card scrolls inside itself, stopping half-way through a row. */
#isl-home > :not(.isl-todo) { flex-shrink: 0; }
.isl-todo { margin-top: 22px; display: flex; flex-direction: column; min-height: 0; flex: 0 1 auto; }
.isl-tdtabs { display: flex; gap: 6px; overflow-x: auto; margin: 0 -24px 10px; padding: 0 24px; scrollbar-width: none; flex: none; }
.isl-tdtabs::-webkit-scrollbar { display: none; }
.isl-tdtab {
  flex: none; display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: none; color: var(--fg-dim); font: inherit; font-size: 12px; white-space: nowrap;
}
.isl-tdtab span { font-size: 10.5px; opacity: .7; font-variant-numeric: tabular-nums; }
.isl-tdtab.isl-on { background: var(--fg); border-color: var(--fg); color: var(--bg-page); }
.isl-tdname {
  flex: none; width: 130px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--accent);
  background: none; color: var(--fg); font: inherit; font-size: 16px; outline: 0;
}
.isl-tdwrap { position: relative; display: flex; flex-direction: column; min-height: 0; flex: 0 1 auto; }
.isl-tdcard {
  position: relative; min-height: 69px; flex: 0 1 auto; overflow-y: auto; overflow-x: hidden;
  background: var(--bg-raised); border: 1px solid var(--border); border-radius: 18px;
  touch-action: pan-y; overscroll-behavior: contain; scrollbar-width: none;
}
.isl-td {
  position: relative; display: flex; align-items: center; gap: 11px; height: 46px; padding: 0 14px;
  border-bottom: 1px solid var(--border); background: var(--bg-raised); color: var(--fg);
  touch-action: pan-y; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
  transition: transform .35s var(--isl-spring), box-shadow .3s, background .3s;
}
.isl-td.isl-press { transform: scale(.97); background: var(--bg-page); transition: transform .38s cubic-bezier(.4, 0, .6, 1), background .38s; }
.isl-td.isl-tdlift { z-index: 3; background: var(--bg-page); transform: scale(1.02); box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .55); }
.isl-td.isl-tdmoving { transition: box-shadow .2s; }
.isl-tdcb {
  flex: none; width: 22px; height: 22px; padding: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  border: 1.6px solid var(--fg-faint); background: none; transition: background .15s, border-color .15s;
}
.isl-done .isl-tdcb { background: var(--accent); border-color: var(--accent); }
.isl-done .isl-tdcb::after {
  content: ''; width: 9px; height: 5px; border: 2px solid var(--bg-page); border-top: 0; border-right: 0;
  transform: translate(0, -1px) rotate(-45deg);
}
.isl-tdt { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13.5px; }
.isl-done .isl-tdt { color: var(--fg-dim); text-decoration: line-through; text-decoration-color: var(--fg-faint); }
.isl-tdedit, .isl-tdadd input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--fg); font: inherit;
  font-size: 16px;   /* 16px or iOS zooms the page to the field */
}
/* First in the card: new items land just under it, so what you type and what it made stay in view. */
.isl-tdadd {
  display: flex; align-items: center; gap: 11px; height: 46px; padding: 0 14px; color: var(--fg-dim); cursor: text;
  border-bottom: 1px solid var(--border);
}
.isl-tdadd > span { flex: none; width: 22px; text-align: center; color: var(--accent); font-size: 18px; }
.isl-tdmore {
  position: absolute; left: 50%; bottom: 8px; z-index: 2; transform: translateX(-50%);
  display: flex; align-items: center; gap: 5px; padding: 4px 11px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--fg); color: var(--bg-page); font: inherit; font-size: 11px; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .5);
}
.isl-tdmore[hidden] { display: none; }
.isl-tdhint { flex: none; margin-top: 8px; font-size: 10.5px; color: var(--fg-dim); text-align: center; }
/* Typing a todo: the recent cards step aside so the list keeps its room above the keyboard. */
body.isl-kb #isl-home :is(.isl-rh, .isl-minis, .isl-tdhint) { display: none; }

/* ── Reminders (src/island-remind.js) ── */
.isl-tdt small { display: block; font-size: 10px; color: var(--fg-dim); }
.isl-tdr {
  flex: none; display: flex; align-items: center; gap: 4px; overflow: hidden; white-space: nowrap;
  font-size: 11px; color: var(--accent); font-variant-numeric: tabular-nums;
}
.isl-tdr.isl-due { color: var(--warn); }
/* Just set: the label types itself in. */
.isl-tdr.isl-tdr-in { animation: isl-type .6s steps(14, end) both; }
@keyframes isl-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.isl-tdtab.isl-tdrem.isl-on { background: var(--accent); border-color: var(--accent); }
.isl-tdg { padding: 10px 14px 4px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-dim); font-weight: 600; }
.isl-tdempty { padding: 18px 14px; color: var(--fg-dim); font-size: 12.5px; text-align: center; line-height: 1.5; }
.isl-rmnow { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--accent); }
.isl-rmnow span { flex: 1; }
.isl-rmnow button { border: 0; background: none; color: var(--fg-dim); font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer; }

/* A bottom sheet: the picker. The pill and mic step aside while it is up. */
body.isl-sheet-on :is(#isl-pill, #isl-mic) { opacity: 0; pointer-events: none; }
.isl-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 85; max-height: 86vh;
  display: flex; flex-direction: column;
  background: var(--bg-raised); color: var(--fg); border-top: 1px solid var(--border); border-radius: 24px 24px 0 0;
  box-shadow: 0 -20px 50px -20px rgba(0, 0, 0, .5);
}
.isl-sheet.isl-dragging { transition: none; }
.isl-sheet .isl-grab { padding: 9px 0 5px; }
.isl-sh-h { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 2px 20px 10px; touch-action: none; }
.isl-sh-h b { font-size: 15px; font-weight: 700; }
.isl-sh-x { border: 0; background: none; padding: 4px 0 4px 12px; color: var(--accent); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.isl-sh-b {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 0 20px calc(var(--isl-safe-b) + 18px);
}
.isl-pk { display: flex; flex-direction: column; gap: 12px; }
.isl-pk-for { margin-top: -6px; font-size: 12.5px; color: var(--fg-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.isl-pk-days { display: flex; gap: 6px; overflow-x: auto; margin: 0 -20px; padding: 2px 20px; scrollbar-width: none; }
.isl-pk-days::-webkit-scrollbar { display: none; }
.isl-pk-days[hidden], .isl-pk-cal[hidden] { display: none; }
.isl-pk-day {
  flex: none; width: 54px; padding: 8px 0; display: flex; flex-direction: column; align-items: center; gap: 1px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 14px; background: var(--bg-page); color: var(--fg-dim); font: inherit; font-size: 10.5px;
}
.isl-pk-day b { font-size: 17px; line-height: 1.2; color: var(--fg); }
.isl-pk-day small { font-size: 9px; opacity: .8; }
.isl-pk-day.isl-on { background: var(--accent); border-color: var(--accent); color: var(--bg-page); }
.isl-pk-day.isl-on b { color: var(--bg-page); }
.isl-pk-more { justify-content: center; gap: 4px; }
.isl-pk-cal-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.isl-pk-cal-h b { font-size: 14px; }
.isl-pk-cal-h span { display: flex; gap: 4px; }
.isl-pk-cal-h button, .isl-pk-cal-g button {
  border: 0; background: none; color: var(--fg); font: inherit; cursor: pointer; border-radius: 10px;
}
.isl-pk-cal-h button { min-width: 34px; height: 30px; border: 1px solid var(--border); font-size: 13px; }
.isl-pk-cal-h button:disabled, .isl-pk-cal-g button:disabled { opacity: .3; cursor: default; }
.isl-pk-cal-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.isl-pk-cal-g i { font-style: normal; font-size: 10px; color: var(--fg-dim); padding: 4px 0; }
.isl-pk-cal-g button { height: 36px; font-size: 13px; font-variant-numeric: tabular-nums; }
.isl-pk-cal-g button.isl-today { box-shadow: inset 0 0 0 1px var(--border); }
.isl-pk-cal-g button.isl-on { background: var(--accent); color: var(--bg-page); font-weight: 700; }
.isl-pk-wheels {
  position: relative; display: flex; justify-content: center; align-items: center; gap: 2px; height: 180px; overflow: hidden;
  background: var(--bg-page); border: 1px solid var(--border); border-radius: 18px;
}
.isl-pk-band {
  position: absolute; left: 14px; right: 14px; top: 72px; height: 36px; pointer-events: none;
  border-radius: 10px; background: var(--accent-soft); border: 1px solid var(--accent-line);
}
.isl-pk-w {
  position: relative; width: 80px; height: 180px; padding: 72px 0; overflow-y: scroll; scroll-snap-type: y mandatory;
  scrollbar-width: none; overscroll-behavior: contain; touch-action: pan-y; cursor: grab;
  -webkit-mask-image: linear-gradient(transparent, #000 32%, #000 68%, transparent);
  mask-image: linear-gradient(transparent, #000 32%, #000 68%, transparent);
}
.isl-pk-w::-webkit-scrollbar { display: none; }
.isl-pk-w div {
  height: 36px; line-height: 36px; text-align: center; scroll-snap-align: center;
  font-size: 21px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--fg-faint); transition: color .15s;
}
.isl-pk-w div.isl-on { color: var(--fg); }
.isl-pk-colon { position: relative; font-size: 22px; font-weight: 700; }
.isl-pk-rep { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.isl-pk-rep span { margin-right: 4px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-dim); font-weight: 600; }
.isl-pk-rep button {
  padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; background: none;
  color: var(--fg-dim); font: inherit; font-size: 12px; cursor: pointer;
}
.isl-pk-rep button.isl-on { background: var(--fg); border-color: var(--fg); color: var(--bg-page); }
.isl-pk-sum { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.isl-pk-sum b { font-size: 15px; }
.isl-pk-sum span { font-size: 12px; color: var(--fg-dim); }
.isl-pk-sum span.isl-bad { color: var(--warn); }
.isl-pk-go {
  padding: 14px; border: 0; border-radius: 16px; cursor: pointer;
  background: var(--accent); color: var(--bg-page); font: inherit; font-size: 14px; font-weight: 700;
}
.isl-pk-go:disabled { opacity: .4; cursor: default; }

/* Due while the app is open: a banner from the top. */
#isl-banner {
  position: fixed; top: calc(env(safe-area-inset-top, 0px) + 8px); left: 10px; right: 10px; z-index: 88;
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 2px 10px; padding: 12px 14px;
  background: color-mix(in srgb, var(--bg-raised) 94%, transparent); color: var(--fg);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border: 1px solid var(--border); border-radius: 22px; box-shadow: 0 20px 50px -16px rgba(0, 0, 0, .6);
  transform: translateY(-160%); transition: transform .5s cubic-bezier(.2, 1.1, .3, 1);
}
#isl-banner.isl-on { transform: none; }
.isl-bn-ic { grid-row: span 2; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.isl-bn-h { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--fg-dim); }
.isl-bn-h b { color: var(--fg); font-weight: 600; }
.isl-bn-t { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.isl-bn-acts { grid-column: 1 / -1; display: flex; gap: 8px; margin-top: 8px; }
.isl-bn-acts button {
  flex: 1; padding: 8px; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--bg-page); color: var(--fg); font: inherit; font-size: 12px; font-weight: 600;
}
.isl-bn-acts button[data-bn="x"] { flex: none; width: 36px; display: grid; place-items: center; color: var(--fg-dim); }

/* ── Hold menus ──
   A held card presses in; at the hold it is lifted (a still copy, .isl-lift) above the
   dim, and the menu springs out of it — below it, or above when below has no room. */
:is(.isl-mini, .isl-card) { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
:is(.isl-mini, .isl-card).isl-press { transform: scale(.95); transition: transform .35s ease-out; }
.isl-lift {
  position: fixed; z-index: 85; margin: 0; pointer-events: none;
  box-shadow: 0 24px 50px -18px rgba(0, 0, 0, .7), 0 0 0 2px var(--accent-line);
}
.isl-menu {
  position: fixed; z-index: 85; left: 50%; width: min(366px, calc(100vw - 24px)); margin-left: calc(min(366px, calc(100vw - 24px)) / -2);
  display: flex; flex-direction: column; gap: 14px; padding: 16px; overflow-y: auto; overscroll-behavior: contain;
  background: var(--bg-raised); color: var(--fg); border: 1px solid var(--border); border-radius: 26px;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7);
}
.isl-mh { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.isl-mh > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.isl-mh b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.isl-mh span { font-size: 11px; color: var(--fg-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.isl-del {
  flex: none; display: flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent); background: none; color: var(--danger);
  font-size: 12px; font-weight: 600;
}
.isl-macts { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.isl-menu .isl-act i { width: 46px; height: 46px; border-radius: 15px; background: var(--bg-page); box-shadow: inset 0 0 0 1px var(--border); color: var(--accent); }
.isl-menu .isl-act { font-size: 10.5px; font-weight: 600; }
/* A held menu focuses its first action for the keyboard; a thumb should not see a ring. */
.isl-menu :focus:not(:focus-visible) { outline: none; }
.isl-mf { display: flex; flex-direction: column; gap: 6px; }
.isl-mf > span { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--fg-dim); }
.isl-mf .isl-chips { flex-wrap: wrap; padding: 0; }
.isl-mhint { font-size: 10.5px; color: var(--fg-dim); text-align: center; }

/* The pill talks to the held note; the mic pulses to say it is listening for that. */
.isl-nm.isl-talk { text-align: left; padding-left: 0; }
.isl-ctxic { width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: var(--bg-page); display: grid; place-items: center; flex: none; }
.isl-ctxic .isl-ik .k { fill: currentColor; }
body.isl-menu-on:not(.isl-rec) #isl-mic { color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); animation: isl-pulse 1.6s ease-out infinite; }
@keyframes isl-pulse {
  0%   { box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 0 var(--accent-soft); }
  70%  { box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 14px transparent; }
  100% { box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 0 transparent; }
}

/* ── Recording ──
   The island stands in for the voice panel while the mic listens (the panel comes back
   for "finishing…" and errors, which have buttons the card does not). Dictating, the
   pill grows up into a red card; a command to a held note keeps the small pill. */
body.island.isl-rec #voice-panel { display: none !important; }
body.isl-rec #isl-pill { opacity: 1; pointer-events: auto; transform: none; }   /* even with the keyboard up */
body.isl-rec-card #isl-pill { --h: 150px; border-radius: 28px; background: var(--danger); color: #fff; cursor: pointer; }
body.isl-rec-card #isl-pill .isl-closed {
  flex-direction: column; align-items: stretch; justify-content: space-between; gap: 8px; padding: 12px 12px 11px 16px;
}
.isl-rv-f { font-size: 10.5px; opacity: .75; text-align: center; }
.isl-rv-h { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; }
.isl-rv-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: isl-blink 1.2s ease-in-out infinite; }
.isl-rv-l { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.isl-rv-t { font-variant-numeric: tabular-nums; opacity: .85; }
.isl-rv-x { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.isl-wave {
  display: grid; grid-template-rows: repeat(5, 4px); grid-auto-flow: column; grid-auto-columns: 4px;
  gap: 2px; justify-content: center;
}
.isl-wave i { border-radius: 1px; background: rgba(255, 255, 255, .2); }
.isl-wave i.on { background: #fff; }
.isl-tele { min-height: 17px; font-size: 12px; line-height: 1.4; white-space: nowrap; overflow: hidden; opacity: .95; }
@keyframes isl-blink { 50% { opacity: .3; } }
.isl-rec-ring {
  position: fixed; inset: 0; z-index: 86; pointer-events: none; opacity: 0; transition: opacity .3s;
  border: 3px solid var(--accent); border-radius: 0;
}
body.isl-rec .isl-rec-ring { opacity: 1; }

/* A delete's way back: five seconds, then it is gone for good. */
#isl-undo {
  position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 8px); z-index: 87; transform: translate(-50%, -14px);
  display: flex; align-items: center; max-width: calc(100vw - 32px); padding: 6px 6px 6px 15px;
  border-radius: 20px; background: var(--fg); color: var(--bg-page); font-size: 12px; font-weight: 600;
  box-shadow: 0 14px 32px -12px rgba(0, 0, 0, .6); opacity: 0; pointer-events: none;
  transition: opacity .25s, transform .25s;
}
#isl-undo.isl-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
#isl-undo > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The icon and the word are one pill that presses as one. */
.isl-undo-p {
  flex: none; display: inline-flex; align-items: center; gap: 5px; margin-left: 12px; padding: 4px 11px 4px 8px;
  border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 700;
  background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent);
  transition: transform .14s cubic-bezier(.3, 1.4, .5, 1), background .2s;
}
.isl-undo-p:active { transform: scale(.92); background: color-mix(in srgb, var(--accent) 36%, transparent); }
.isl-undo-p .isl-ik .k { fill: currentColor; }

/* The phone tour (src/island-tour.js): a dim with a spotlight hole over one piece, a
   finger acting out that piece's gesture, and a caption beside it. Over everything the
   island has (banner 88), under the palette (100). The spot's shadow is the dim. */
#isl-tour { position: fixed; inset: 0; z-index: 95; cursor: pointer; -webkit-tap-highlight-color: transparent; }
#isl-tour[hidden] { display: none; }
/* The install banner (120) would sit over the tour and the piece it points at; it is
   back the moment the tour closes. */
body.isl-touring #install-banner { display: none; }
.isl-tour-spot {
  position: fixed; pointer-events: none; box-shadow: 0 0 0 200vmax rgba(0, 0, 0, .72), 0 0 0 2px var(--accent-line, var(--accent)) inset;
  transition: left .45s var(--isl-spring), top .45s var(--isl-spring), width .45s var(--isl-spring), height .45s var(--isl-spring), border-radius .45s;
}
#isl-tour.isl-tour-instant :is(.isl-tour-spot, .isl-tour-hand, .isl-tour-cap) { transition: none; }
.isl-tour-hand {
  position: fixed; width: 0; height: 0; pointer-events: none;
  transition: left .45s var(--isl-spring), top .45s var(--isl-spring);
}
.isl-tour-hand i {
  position: absolute; left: -17px; top: -17px; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255, 255, 255, .28); border: 2px solid rgba(255, 255, 255, .9);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45); animation: 1.6s ease-in-out infinite;
}
.isl-tour-hand[data-g="tap"] i      { animation-name: isl-tour-tap; }
.isl-tour-hand[data-g="swipe-x"] i  { animation-name: isl-tour-swipe-x; }
.isl-tour-hand[data-g="swipe-up"] i { animation-name: isl-tour-swipe-up; }
.isl-tour-hand[data-g="hold"] i     { animation-name: isl-tour-hold; animation-duration: 2s; }
@keyframes isl-tour-tap {
  0%, 100% { transform: scale(1); opacity: .9; }
  20% { transform: scale(.72); opacity: 1; }
  45% { transform: scale(1.35); opacity: 0; }
  46% { transform: scale(1); opacity: 0; }
  70% { opacity: .9; }
}
@keyframes isl-tour-swipe-x {
  0% { transform: translateX(-46px) scale(.9); opacity: 0; }
  15% { opacity: 1; }
  70% { transform: translateX(46px) scale(.9); opacity: 1; }
  85%, 100% { transform: translateX(46px) scale(.9); opacity: 0; }
}
@keyframes isl-tour-swipe-up {
  0% { transform: translateY(10px) scale(.9); opacity: 0; }
  15% { opacity: 1; }
  70% { transform: translateY(-70px) scale(.9); opacity: 1; }
  85%, 100% { transform: translateY(-70px) scale(.9); opacity: 0; }
}
@keyframes isl-tour-hold {
  0% { transform: scale(1); opacity: 0; box-shadow: 0 0 0 0 var(--accent); }
  12% { transform: scale(.8); opacity: 1; }
  65% { transform: scale(.8); opacity: 1; box-shadow: 0 0 0 16px transparent; }
  85%, 100% { transform: scale(.8); opacity: 0; box-shadow: 0 0 0 16px transparent; }
}
.isl-tour-cap {
  position: fixed; left: 16px; right: 16px; max-width: 420px; margin: 0 auto; padding: 14px 14px 10px 16px; cursor: default;
  border-radius: 18px; background: var(--bg-raised); border: 1px solid var(--border); color: var(--fg);
  box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .7); transition: top .45s var(--isl-spring);
}
.isl-tour-n { font-size: 11px; color: var(--fg-faint); letter-spacing: .04em; }
.isl-tour-t { margin-top: 2px; font-size: 16px; font-weight: 700; color: var(--accent); }
.isl-tour-x { margin-top: 4px; font-size: 13.5px; line-height: 1.45; color: var(--fg-dim); }
.isl-tour-b { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.isl-tour-b button {
  min-height: 36px; padding: 0 12px; border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-size: 13px;
  background: none; color: var(--fg-dim);
}
.isl-tour-b button:disabled { opacity: .35; cursor: default; }
.isl-tour-b button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.isl-tour-skip { margin-left: -12px; }
.isl-tour-b .isl-tour-next { min-width: 72px; background: var(--accent); color: var(--bg-page); font-weight: 700; }
.isl-tour-dots { flex: 1; display: flex; justify-content: center; gap: 5px; }
.isl-tour-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--fg-faint); opacity: .5; transition: width .25s, opacity .25s; }
.isl-tour-dots i.isl-on { width: 14px; border-radius: 3px; background: var(--accent); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  #isl-pill, #isl-mic, #isl-all, #isl-dim, #isl-undo, .isl-mini, .isl-card { transition: none; }
  .isl-caret, .isl-rv-dot, .isl-tdr-in, body.isl-menu-on #isl-mic { animation: none; }
  #isl-banner, .isl-pk-w div { transition: none; }
  .isl-tour-spot, .isl-tour-hand, .isl-tour-cap, .isl-tour-dots i { transition: none; }
  .isl-tour-hand i { animation: none; opacity: .9; }
}

/* Delete (src/island.js islAnimateOut): flash red and shrink away, then the gap closes;
   undo lands the item back with a small spring. Reduced motion skips all of it in JS. */
:is(.isl-mini, .isl-card, .isl-td).isl-gone { overflow: hidden; pointer-events: none; animation: isl-out .4s cubic-bezier(.4, 0, .2, 1) forwards; }
@keyframes isl-out {
  30% { transform: scale(1.02); opacity: 1; box-shadow: 0 0 0 2px var(--danger); }
  100% { transform: scale(.7) translateY(24px); opacity: 0; box-shadow: 0 0 0 2px var(--danger); }
}
.isl-td.isl-gone { animation-name: isl-out-row; border-radius: 12px; }
@keyframes isl-out-row {
  30% { transform: scale(1.01); opacity: 1; box-shadow: inset 0 0 0 2px var(--danger); }
  100% { transform: scale(.7); opacity: 0; box-shadow: inset 0 0 0 2px var(--danger); }
}
.isl-mini.isl-collapse {
  width: 0 !important; padding-left: 0 !important; padding-right: 0 !important; border-width: 0 !important; margin-right: -10px;
  transition: width .28s ease, padding .28s, margin .28s;
}
:is(.isl-card, .isl-td).isl-collapse {
  height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; border-width: 0 !important; margin-bottom: -10px;
  transition: height .26s ease, padding .26s, margin .26s;
}
.isl-td.isl-collapse { margin-bottom: 0; }
:is(.isl-mini, .isl-card).isl-back { animation: isl-in .45s cubic-bezier(.3, 1.2, .4, 1); }
@keyframes isl-in { from { opacity: 0; transform: scale(.7) translateY(24px); } }
.isl-td.isl-back { animation: isl-in-row .45s cubic-bezier(.3, 1.2, .4, 1); }
@keyframes isl-in-row { from { opacity: 0; transform: translateX(-24px); } }

/* ── Sheet contents (src/island-sheets.js): group labels, rows, the search field ── */
.isl-grp { padding: 14px 8px 4px; font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-faint); }
.isl-sh-hint { margin: 10px 4px 0; font-size: 11.5px; line-height: 1.5; color: var(--fg-dim); }
.isl-sh-find { margin: 0 0 6px; background: var(--bg-page); border-radius: 12px; }
.isl-cmds { display: flex; flex-direction: column; margin: 0 -6px; }
.isl-cmd {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 8px; border: 0; border-radius: 12px;
  background: none; color: var(--fg); text-align: left; font: inherit; cursor: pointer;
}
.isl-cmd:active { background: var(--accent-soft); }
.isl-cmd > i {
  flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px;
  background: var(--bg-code); color: var(--accent);
}
.isl-cmd > i svg { width: 16px; height: 16px; }
.isl-cmd > span { min-width: 0; display: flex; flex-direction: column; }
.isl-cmd b { font-size: 14px; font-weight: 600; }
.isl-cmd b + span { font-size: 11.5px; color: var(--fg-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Theme tiles: each drawn in its own theme, the current one ringed in the app's accent. */
.isl-ths { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 0 8px; }
.isl-th {
  display: flex; flex-direction: column; gap: 4px; padding: 12px; border: 2px solid transparent; border-radius: 14px;
  text-align: left; font: inherit; font-size: 12px; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(127, 127, 127, .28);
  transition: transform .15s;
}
.isl-th:active { transform: scale(.97); }
.isl-th.isl-on { border-color: var(--accent); box-shadow: none; }
.isl-th-n { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.isl-th-n b { flex: none; width: 3px; height: 13px; }
.isl-th-s { font-size: 11px; opacity: .75; }

/* Hold menus: reminder presets as two-line cards, then the menu's text rows. */
.isl-rms { display: flex; flex-wrap: wrap; gap: 6px; }
.isl-rms button {
  padding: 7px 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-page); color: var(--fg);
  font: inherit; font-size: 12px; font-weight: 600; text-align: left; cursor: pointer;
}
.isl-rms button small { display: block; font-size: 10.5px; font-weight: 400; color: var(--fg-dim); }
.isl-rms button:active { background: var(--accent-soft); }
.isl-rms .isl-rm-any { border-style: dashed; }
.isl-mrows { display: flex; flex-direction: column; }
.isl-mrow {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 4px 2px; margin-top: 6px;
  border: 0; border-top: 1px solid var(--border); background: none; color: var(--fg); font: inherit; font-size: 13px;
  text-align: left; cursor: pointer;
}
.isl-mrow .isl-ik { color: var(--fg-dim); }

/* Focus: one way out, said at the top. The path bar and the block toolbar step aside. */
#isl-focusx { display: none; }
body.island.focus-mode #isl-focusx {
  display: block; position: fixed; top: calc(env(safe-area-inset-top, 0px) + 8px); left: 50%; transform: translateX(-50%); z-index: 86;
  padding: 5px 12px; border: 1px solid var(--border); border-radius: 20px; background: var(--bg-page);
  color: var(--fg-dim); font: inherit; font-size: 11px; cursor: pointer;
}
body.island.focus-mode #isl-top { visibility: hidden; }
body.island.focus-mode .touch-tools { display: none !important; }

/* The format strip (src/island.js islWireStrip): the pill's place while typing in a note,
   docked on top of the keyboard (--isl-kb-h, set from the visual viewport). */
#isl-strip { display: none; }
body.island.isl-kb.isl-typing:not(.isl-at-home):not(.isl-sheet-on) #isl-strip {
  display: flex; position: fixed; left: 50%; bottom: calc(var(--isl-kb-h, 0px) + 8px); transform: translateX(-50%); z-index: 86;
  gap: 2px; padding: 4px; border-radius: 999px; background: var(--fg); color: var(--bg-page);
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .6);
}
#isl-strip button {
  width: 38px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 999px;
  background: none; color: inherit; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
#isl-strip button:active { background: color-mix(in srgb, var(--bg-page) 18%, transparent); }
#isl-strip .isl-ik .k { fill: currentColor; }

/* Share (task 9): the desktop panel and all its logic, laid out as the prototype's
   sheet — link on top, QR beside three big buttons, capacity, the live switch. */
body.island #share-overlay { padding: 0; align-items: flex-end; background: rgba(0, 0, 0, .42); backdrop-filter: none; }
body.island #share-card {
  width: 100%; max-width: none; max-height: 86vh; overflow-y: auto; border-radius: 24px 24px 0 0;
  border: 0; border-top: 1px solid var(--border); box-shadow: 0 -20px 50px -20px rgba(0, 0, 0, .5);
  background: var(--bg-raised); padding-bottom: calc(var(--isl-safe-b) + 14px);
  animation: isl-sheet-up .36s cubic-bezier(.2, .85, .25, 1);
}
@keyframes isl-sheet-up { from { transform: translateY(105%); } }
body.island #share-card::before {
  content: ''; display: block; width: 38px; height: 5px; margin: 9px auto 5px; border-radius: 3px; background: var(--fg-faint);
}
body.island #share-card .share-head {
  display: flex; align-items: center; justify-content: space-between; padding: 2px 20px 10px; border: 0; background: none;
}
body.island #share-card .share-head .t { font-size: 15px; font-weight: 700; color: var(--fg); text-transform: none; letter-spacing: 0; }
body.island #share-card .share-head .esc { font-size: 0; cursor: pointer; border: 0; background: none; padding: 4px 0 4px 12px; }
body.island #share-card .share-head .esc::after { content: 'done'; font-size: 13px; font-weight: 600; color: var(--accent); }
body.island #share-card .share-body {
  display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; padding: 0 24px;
  grid-template-areas: "link link" "qr acts" "cap cap" "live live";
}
body.island #share-card .share-right { display: contents; }
body.island #share-link {
  grid-area: link; max-height: 66px; overflow: hidden; padding: 11px 12px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--bg-page); font-size: 12px; line-height: 1.5; word-break: break-all;
}
body.island #share-qr { grid-area: qr; width: 120px; height: 120px; padding: 8px; border-radius: 12px; background: #fff; margin: 0; }
body.island #share-qr :is(img, canvas, svg) { width: 100% !important; height: 100% !important; }
body.island #share-card .share-actions { grid-area: acts; display: flex; flex-direction: column; gap: 8px; margin: 0; }
body.island #share-card .share-actions :is(.btn, select) {
  width: 100%; height: 36px; margin: 0; border-radius: 10px; font-size: 12.5px; font-weight: 600; text-align: center; color: var(--fg);
}
body.island #share-card .share-actions .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--bg-page); }
body.island #share-card .capacity { grid-area: cap; margin: 2px 0 0; }
body.island #share-card .live-row {
  grid-area: live; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; margin: 0; padding: 12px;
  border: 1px solid var(--border); border-radius: 12px; font-size: 12.5px;
}
body.island #share-card .live-row .live-note { flex-basis: 100%; padding-left: 54px; font-size: 11px; color: var(--fg-dim); }
body.island #share-card .live-row input {
  appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 42px; height: 25px; margin: 0;
  border-radius: 13px; background: var(--border); cursor: pointer; transition: background .2s;
}
body.island #share-card .live-row input::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%; background: var(--fg); transition: left .2s, background .2s;
}
body.island #share-card .live-row input:checked { background: var(--accent); }
body.island #share-card .live-row input:checked::after { left: 20px; background: var(--bg-page); }
body.island #share-card .share-foot { padding: 12px 24px 0; border: 0; background: none; font-size: 11.5px; color: var(--fg-dim); }
.isl-sr { align-items: flex-start; }
.isl-sr b + span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.isl-sr mark { background: var(--accent-soft); color: var(--accent); border-radius: 3px; }
.isl-sr-hint { margin: 2px 4px 4px; }

/* A sheet is the whole conversation while it is up; the install offer waits. */
body.isl-sheet-on #install-banner { display: none; }