/* public/assets/ct-list.css — ListLink formatted list (page + pickers)
   ---------------------------------------------------------------------------
   Token-driven (ui.css palette). Two scoped systems:

   .ls-*                the participant page's list: one card or one paper
                        holding rows of four kinds (item / heading / note /
                        divider) in one of three layouts, keyed by
                        [data-ls="checklist|sheet|board"]. Papers reuse
                        NoteLink's .nl-paper[data-look] skins (ct-note.css),
                        so a Sticky list and a Sticky note are one CSS.
   .ll-layouts          the creator/admin "Layout" picker: each option is a
                        drawn SVG icon of the layout (.ll-icon, token-painted).

   Loaded by /list/, /list/admin.html and the /a/listlink/:id page. */

/* ================= Rows (shared by every layout) ================= */

.lsList { list-style: none !important; display: block !important; margin: 0 !important; padding: 0 !important; gap: unset !important; }
.lsList > li, .lsTileRows > li { display: flex; align-items: center; gap: 12px; min-height: 48px; position: relative; margin: 0; padding: 0; }
.lsList li::before, .lsList li::marker { display: none !important; content: none !important; }

.llCheck { display: inline-flex !important; align-items: center; height: 24px; position: relative; flex: none; margin: 0 !important; width: auto !important; }
.llCheck .llToggle { position: absolute; opacity: 0; width: 24px; height: 24px; margin: 0; cursor: pointer; }
.llBox {
  display: inline-block; width: 22px; height: 22px; border-radius: 7px; box-sizing: border-box; position: relative;
  border: 2px solid var(--ls-mark, var(--accent)); background: transparent;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.llToggle:checked + .llBox { background: var(--ls-mark, var(--accent)); }
.llToggle:checked + .llBox::after {
  content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px;
  border: solid var(--ls-check, #fff); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
.llToggle:focus-visible + .llBox { outline: 2px solid var(--ls-mark, var(--accent)); outline-offset: 2px; }
.llToggle:disabled + .llBox { opacity: .6; }

.llText { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 1.02rem; line-height: 1.4; color: var(--ls-ink, var(--text)); }
.llItem.isDone .llText { color: var(--ls-muted, var(--muted)); text-decoration: line-through; text-decoration-color: color-mix(in srgb, currentColor 55%, transparent); }

.lsCtl {
  flex: none; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 9px; background: transparent;
  color: var(--ls-muted, var(--muted)); opacity: .55; display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; touch-action: none;
}
.lsCtl svg { width: 18px; height: 18px; pointer-events: none; }
.llDrag { cursor: grab; }
.llDrag:active { cursor: grabbing; }
.lsCtl:hover, .lsCtl:focus-visible { opacity: 1; background: color-mix(in srgb, var(--ls-ink, var(--text)) 7%, transparent); outline: none; }

.lsHead { margin-top: 10px; min-height: 40px !important; }
.lsHead:first-child { margin-top: 0; }
.lsHeadText { flex: 1; min-width: 0; font-family: var(--font-display); font-weight: 740; letter-spacing: -0.012em; font-size: 1.12rem; color: var(--ls-ink, var(--text)); overflow-wrap: anywhere; }
.lsHeadCount { font-size: .82rem; font-weight: 600; color: var(--ls-muted, var(--muted)); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lsHeadCount:empty { display: none; }
.lsNote { align-items: flex-start !important; }
.lsNote .llText { font-size: .94rem; color: var(--ls-ink-soft, var(--text)); }
.lsNoteBar { flex: none; width: 4px; align-self: stretch; border-radius: 2px; background: var(--ls-mark, var(--accent)); }
.lsHr { min-height: 0 !important; height: 1px; margin: 10px 0; background: var(--ls-rule, var(--ring)); }
.lsHr .llText { display: none; }
.lsHr .lsCtl { position: absolute; right: 0; top: -17px; }
.lsEmpty { color: var(--ls-muted, var(--muted)); font-style: italic; padding: 8px 0; }

/* Drag states (pointer reorder via the grip) */
.lsList > li.llLifted { box-shadow: 0 12px 34px rgba(14,31,26,.18); background: var(--ls-paper, var(--card)); border-radius: 10px; padding: 0 8px; opacity: .98; }
.lsList > li.lsPlaceholder { min-height: 0 !important; border: 1.5px dashed var(--ls-rule, var(--ring)); border-radius: 10px; }

/* Add row */
.lsAdd { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.lsAddIco { flex: none; width: 22px; height: 22px; color: var(--ls-mark, var(--accent)); display: inline-flex; }
.lsAddIco svg { width: 22px; height: 22px; }
.lsAdd input[type="text"] {
  flex: 1; min-width: 0; height: 44px; padding: 0 10px; border: 1px solid transparent; border-bottom: 1.5px dashed var(--ls-rule, var(--ring));
  border-radius: 0; background: transparent; font-size: 1rem; color: var(--ls-ink, var(--text)); box-shadow: none;
}
.lsAdd input[type="text"]::placeholder { color: var(--ls-muted, var(--muted)); }
.lsAdd input[type="text"]:focus { outline: none; border-bottom-color: var(--ls-mark, var(--accent)); border-bottom-style: solid; }
.lsAddBtn { width: auto; height: 38px; padding: 0 14px; border-radius: 999px; border: 0; background: var(--ls-mark, var(--accent)); color: var(--ls-check, #fff); font-weight: 700; font-size: .92rem; cursor: pointer; }
.lsAddKind {
  width: auto; height: 38px; padding: 0 12px; border-radius: 999px; border: 1.5px solid var(--ls-rule, var(--ring)); background: transparent;
  color: var(--ls-muted, var(--muted)); font-weight: 700; font-size: .8rem; cursor: pointer; white-space: nowrap;
}
.lsAddKind[data-kind="heading"], .lsAddKind[data-kind="note"] { border-color: var(--ls-mark, var(--accent)); color: var(--ls-mark, var(--accent)); }
.llStatus { display: block; min-height: 18px; font-size: .84rem; margin-top: 4px; color: var(--ls-muted, var(--muted)); }
.lsFoot { font-size: .87rem; margin: 12px 2px 20px; }

/* Progress strip */
.lsProg { margin: 12px 2px 10px; }
.lsProgRow { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.lsProgText { font-size: .92rem; font-weight: 600; color: var(--text); }
.lsProgPct { font-family: var(--font-display); font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; color: var(--accent); font-variant-numeric: tabular-nums; }
.lsBar { height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--accent) 14%, var(--card)); overflow: hidden; display: flex; gap: 5px; }
.lsBar--seg { background: transparent; overflow: visible; }
.lsBarFill { display: block; height: 100%; background: var(--accent); border-radius: 4px; transition: width var(--t); }
.lsSeg { flex: 1; height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--accent) 14%, var(--card)); overflow: hidden; }
.lsSegFill { display: block; height: 100%; background: var(--accent); border-radius: 4px; transition: width var(--t); }

/* ================= Theme colour on Sticky and Blueprint ================= */
/* The papers stay yellow and blue; the marks follow the theme (lookMarks()
   in the shared look system). */
/* (The per-look mark colours, the glue strip and the memo band are
   generated into ct-looks.css from config/og/looks.json; the server sets
   --look-mark-exact inline so the page uses the exact hex the card drew.) */

/* ================= Layout: checklist ================= */

/* Plain look: a white card with accent section rules. */
.lsCard { margin-top: 12px; padding: 14px 16px 16px; box-shadow: var(--shadow-soft); }
.lsCard .lsProg { margin: 0 0 6px; }
.lsCard[data-ls="checklist"] .lsList > li.llItem { border-top: 1px solid var(--ring); min-height: 52px; }
.lsCard[data-ls="checklist"] .lsList > li.llItem:first-child,
.lsCard[data-ls="checklist"] .lsHead + .llItem,
.lsCard[data-ls="checklist"] .lsHr + .llItem { border-top: 0; }
.lsCard[data-ls="checklist"] .lsHead { margin-top: 14px; min-height: 34px !important; gap: 10px; }
.lsCard[data-ls="checklist"] .lsHead .lsHeadText { flex: 0 1 auto; min-width: 0; max-width: 70%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-sans); font-size: .9rem; font-weight: 700; letter-spacing: 0; color: var(--accent); }
.lsCard[data-ls="checklist"] .lsHead::after { content: ""; flex: 1; height: 1.5px; background: var(--ring); order: 1; }
.lsCard[data-ls="checklist"] .lsHeadCount { order: 2; }
.lsCard[data-ls="checklist"] .lsHead .lsCtl { order: 3; }
.lsCard[data-ls="checklist"] .lsNote { min-height: 40px !important; padding: 4px 0 8px 6px; }
.lsCard[data-ls="checklist"] .lsNote .llText { font-style: italic; color: var(--muted); font-size: .92rem; }
.lsCard[data-ls="checklist"] .lsNoteBar { width: 3px; background: color-mix(in srgb, var(--accent) 60%, transparent); }
.lsCard[data-ls="checklist"] .lsAdd { border-top: 1px solid var(--ring); padding-top: 8px; margin-top: 4px; }

/* Any other look: NoteLink's paper around the rows. */
.lsPaper {
  --ls-ink: var(--nl-ink); --ls-ink-soft: var(--nl-ink-soft); --ls-mark: var(--nl-mark); --ls-rule: var(--nl-rule);
  --ls-muted: var(--look-muted); --ls-check: var(--look-box-check); --ls-paper: var(--look-paper);
  margin-top: 4px; box-shadow: var(--shadow-soft); padding: 18px 16px 16px 26px;
}
.lsPaper .lsHead .lsHeadText { font-size: 1.18rem; }
.lsPaper .lsNote { margin: 6px 0 8px; padding: 10px 12px; border-radius: 12px; background: var(--nl-quote-bg); }

/* ================= Layout: sheet ================= */

.lsPaperHero {
  --ls-ink: var(--nl-ink); --ls-ink-soft: var(--nl-ink-soft); --ls-mark: var(--nl-mark); --ls-rule: var(--nl-rule);
  --ls-muted: var(--look-muted); --ls-check: var(--look-box-check); --ls-paper: var(--look-paper);
  margin-top: 12px; padding: 18px 18px 16px 24px; box-shadow: var(--shadow-soft);
}
.lsPaperHero::before { display: none; }
/* Memo on the Sheet draws a slim tinted band (the card draws the same 30px
   band) and Sticky its glue strip: both generated into ct-looks.css. */
.lsSheetHead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.lsEyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: .9rem; font-weight: 600; color: var(--ls-muted); }
.lsEyebrowIc { width: 26px; height: 26px; border-radius: 8px; background: var(--ls-mark); color: var(--ls-check); padding: 4px; box-sizing: border-box; }
/* The shared tile paints its glyph white; on a look whose mark is white (Bold,
   Sunset) or a light tint (the dark themes) the glyph takes the ink for that mark. */
.lsEyebrowIc .ct-tile-glyph { color: var(--ls-check, #fff); }
.lsRing { position: relative; width: 64px; height: 64px; display: grid; place-items: center; flex: none; }
.lsRing svg { position: absolute; inset: 0; width: 64px; height: 64px; }
.lsRingTrack { fill: none; stroke: var(--ls-rule); stroke-width: 7; }
.lsRingFill { fill: none; stroke: var(--ls-mark); stroke-width: 7; stroke-linecap: round; transition: stroke-dasharray var(--t); }
.lsRing span { font-family: var(--font-display); font-size: .95rem; font-weight: 800; letter-spacing: -0.02em; color: var(--ls-ink); font-variant-numeric: tabular-nums; }
.lsSheetTitle { margin: 4px 0 6px; font-family: var(--font-display); font-size: 1.85rem; font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; color: var(--ls-ink); overflow-wrap: anywhere; }
.lsSheetRule { display: block; width: 44px; height: 3px; border-radius: 2px; background: var(--ls-mark); margin: 10px 0 12px; }
.lsSheetDesc { margin: 0 0 4px; font-size: 1rem; color: var(--ls-ink-soft); }
.lsSheetProg { margin: 0 0 12px; font-size: .88rem; font-weight: 600; color: var(--ls-muted); }
.lsSheet .lsHead { border-bottom: 1.5px solid var(--ls-rule); margin-top: 12px; min-height: 38px !important; }
.lsSheet .lsHead .lsHeadText { font-size: 1.02rem; }
.lsSheet .lsNote { min-height: 40px !important; padding: 2px 0 6px 4px; }
.lsSheet .lsNote .llText { font-style: italic; color: var(--ls-muted); font-size: .92rem; }
.lsSheet .lsNoteBar { width: 3px; }

/* ================= Layout: board ================= */
/* The Board is the paper itself (same hero as the Sheet); every section is
   a tile on it: a band in the look's mark colour with the name and a count
   pill, chips underneath. Tiles are white on light papers, translucent on
   dark ones, so the look shows through. */

.lsBoard {
  /* Tiles are the look's own surface (white on Classic, translucent on the
     dark themes, the look's tint on Warm or Candy), bands its mark, and the
     band's text the glyph ink that sits on that mark. Keyed on the look's
     variables, not its name, so every look (and any new one) is covered;
     the old rules named retired looks and left the themes white on white. */
  --ls-tile: var(--look-surface, var(--card)); --ls-tile-ring: var(--look-surface-line, var(--ring));
  --ls-chip-off: color-mix(in srgb, var(--ls-mark, var(--accent)) 9%, var(--ls-tile)); --ls-chip-off-ring: color-mix(in srgb, var(--ls-mark, var(--accent)) 25%, var(--ls-tile-ring));
  --ls-band: var(--ls-mark, var(--accent)); --ls-band-text: var(--ls-check, #fff);
}
.lsBoard .lsList { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
.lsBoard .lsEmpty { grid-column: 1 / -1; }
.lsTile { display: block !important; min-height: 0 !important; border: 1px solid var(--ls-tile-ring); border-radius: var(--radius-lg); background: var(--ls-tile); overflow: hidden; }
.lsBoard:is([data-look="plain"], [data-look="light"], [data-look="paper"]) .lsTile { box-shadow: var(--shadow-soft); }
.lsTileRows { list-style: none !important; display: block !important; margin: 0 !important; padding: 0 !important; }
.lsTile .lsHead, .lsTile .lsTileLabel {
  margin: 0 !important; min-height: 44px !important; padding: 0 10px 0 12px; gap: 8px;
  background: var(--ls-band); color: var(--ls-band-text);
}
.lsTile .lsTileLabel { display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: .92rem; }
.lsTile .lsHead .lsHeadText { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-display); font-size: .96rem; font-weight: 740; letter-spacing: -0.01em; color: var(--ls-band-text); }
.lsTile .lsHead .lsHeadCount, .lsTile .lsHead .lsCtl { flex: none; }
.lsTile--wide { grid-column: 1 / -1; }
/* On a phone a half-width tile keeps its name whole and drops the count pill;
   the progress line above the tiles carries the numbers. */
@media (max-width: 479px) { .lsTile:not(.lsTile--wide) .lsHead .lsHeadCount, .lsTile:not(.lsTile--wide) .lsTileLabel .lsHeadCount { display: none; } }
.lsTile .lsHead .lsHeadCount, .lsTile .lsTileLabel .lsHeadCount {
  display: inline-block; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--ls-band-text) 92%, transparent); color: var(--ls-band); font-size: .72rem; font-weight: 700;
}
.lsTile .lsHead .lsHeadCount:empty { display: none; }
.lsTile .lsHead .lsCtl { color: var(--ls-band-text); opacity: .7; width: 28px; height: 28px; }
.lsTile .lsHead .lsCtl:hover { background: rgba(255,255,255,.18); }
.lsChipRow { display: block !important; min-height: 0 !important; }
.lsChips { list-style: none !important; display: flex !important; flex-wrap: wrap; gap: 8px; margin: 0 !important; padding: 10px 10px 12px !important; }
.lsChipLi { display: block !important; min-height: 0 !important; }
.lsChip {
  position: relative; display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 8px; margin: 0 !important; width: auto !important; max-width: 100%;
  min-height: 40px; padding: 7px 14px 7px 11px; border-radius: 999px;
  background: var(--ls-chip-off); border: 1px solid var(--ls-chip-off-ring); color: var(--ls-ink, var(--text));
  font-weight: 600; font-size: .92rem; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.lsChip .llToggle { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.lsChip .llText { flex: 1 1 auto; min-width: 0; font-size: inherit; color: inherit; line-height: 1.25; overflow-wrap: anywhere; }
.lsChipDot { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--ls-rule, var(--ring-strong)); background: transparent; box-sizing: border-box; position: relative; }
.lsChip.isDone { background: var(--ls-mark, var(--accent)); border-color: var(--ls-mark, var(--accent)); color: var(--ls-check, #fff); }
.lsChip.isDone .llText { color: var(--ls-check, #fff); text-decoration: none; }
.lsChip.isDone .lsChipDot { border-color: var(--ls-check, #fff); background: var(--ls-check, #fff); }
.lsChip.isDone .lsChipDot::after { content: ""; position: absolute; left: 3px; top: 1px; width: 3px; height: 6px; border: solid var(--ls-mark, var(--accent)); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.lsChip:has(.llToggle:focus-visible) { outline: 2px solid var(--ls-mark, var(--accent)); outline-offset: 2px; }
.lsChip .lsChipDel { position: relative; z-index: 1; width: 22px; height: 22px; margin: 0 -8px 0 -2px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; opacity: .6; display: none; align-items: center; justify-content: center; cursor: pointer; }
.lsChip .lsChipDel svg { width: 14px; height: 14px; }
.lsChip:hover .lsChipDel, .lsChip:focus-within .lsChipDel { display: inline-flex; }
.lsTile .lsNote { min-height: 0 !important; align-items: center !important; gap: 8px; padding: 12px 14px 0; margin: 0; }
/* A note between two chip runs, or after the last one: the chips' own
   padding already spaces it from the chips above; keep the tile's bottom
   padding when it ends the tile. */
.lsTile .lsChipRow + .lsNote { padding-top: 0; }
.lsTile .lsNote:last-child { padding-bottom: 14px; }
.lsTile .lsNote .llText { font-style: italic; color: var(--ls-muted); font-size: .86rem; }
.lsTile .lsNote .lsCtl { width: 26px; height: 26px; }
.lsTile .lsNoteBar { display: none; }
.lsTile .lsHr { display: none !important; }
.lsBoard .lsAdd { margin-top: 14px; }
@media (max-width: 340px) { .lsBoard .lsList { grid-template-columns: 1fr; } }

/* The Layout picker (drawn icons, .ll-layout* / .ll-icon .llx-*) is shared:
   ct-looks.css, so every tool with layouts draws its options the same way. */

/* ================= List builder (creator + admin) ================= */
/* ct-list-editor.js mounts this over a textarea[data-list-editor]; the rows
   are the list, typed into directly. The textarea stays as the hidden source. */

textarea.lle-src { position: absolute !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; overflow: hidden; margin: 0 !important; padding: 0 !important; border: 0 !important; }
.lle { position: relative; border: 1px solid var(--ring); border-radius: var(--radius-lg); background: var(--card); box-shadow: var(--shadow-xs); }
.lle-rows { list-style: none !important; display: block !important; margin: 0 !important; padding: 8px 8px 4px !important; gap: unset !important; }
.lle-rows li::before, .lle-rows li::marker { display: none !important; content: none !important; }
.lle-row { display: flex; align-items: center; gap: 6px; min-height: 44px; margin: 0; padding: 0 2px; border-radius: 10px; position: relative; }
.lle-row:hover, .lle-row:focus-within { background: var(--card-soft); }
.lle-row.is-lifted { background: var(--card); box-shadow: 0 12px 34px rgba(14,31,26,.18); }
.lle-row.lle-ph { border: 1.5px dashed var(--ring-strong); background: transparent; min-height: 0; }
.lle-ctl { flex: none; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted); opacity: .45; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; touch-action: none; }
.lle-ctl svg { width: 16px; height: 16px; pointer-events: none; }
.lle-grip { cursor: grab; }
.lle-row:hover .lle-ctl, .lle-row:focus-within .lle-ctl { opacity: .8; }
.lle-ctl:hover { opacity: 1 !important; background: color-mix(in srgb, var(--text) 7%, transparent); }
.lle-mark { flex: none; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; position: relative; }
.lle-tick { position: absolute; inset: 0; width: 24px; height: 24px; margin: 0; opacity: 0; cursor: pointer; }
.lle-box { display: inline-block; width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--accent); box-sizing: border-box; position: relative; background: transparent; pointer-events: none; }
.lle-tick:checked + .lle-box { background: var(--accent); }
.lle-tick:checked + .lle-box::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.lle-tick:focus-visible + .lle-box { outline: 2px solid var(--accent); outline-offset: 2px; }
.lle-sec { font-family: var(--font-display); font-weight: 800; font-size: 1rem; color: var(--accent); }
.lle-notebar { display: block; width: 4px; height: 20px; border-radius: 2px; background: var(--accent); opacity: .7; }
.lle-hr { display: block; width: 14px; height: 2px; background: var(--ring-strong); }
.lle-hrline { flex: 1; height: 1px; background: var(--ring); }
.lle-input {
  flex: 1; min-width: 0; height: 40px; margin: 0 !important; padding: 0 8px !important; border: 0 !important; border-radius: 8px !important; background: transparent !important; box-shadow: none !important;
  font-family: var(--font-sans); font-size: 1rem; color: var(--text);
}
.lle-input:focus { outline: none !important; box-shadow: none !important; }
.lle-row[data-kind="heading"] { margin-top: 6px; }
.lle-row[data-kind="heading"]:first-child { margin-top: 0; }
.lle-row[data-kind="heading"] .lle-input { font-family: var(--font-display); font-weight: 740; font-size: 1.05rem; letter-spacing: -0.01em; }
.lle-row[data-kind="note"] .lle-input { font-style: italic; color: color-mix(in srgb, var(--text) 78%, var(--card)); }
.lle-row.is-done .lle-input { color: var(--muted); text-decoration: line-through; }
.lle-row[data-kind="divider"] { min-height: 28px; }
.lle-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px 10px; border-top: 1px solid var(--ring); background: var(--card-soft); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.lle-add { display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 12px 0 8px; border-radius: 999px; border: 1px solid var(--ring); background: var(--card); color: var(--text); font-weight: 650; font-size: .86rem; cursor: pointer; width: auto; }
.lle-add svg { width: 15px; height: 15px; color: var(--accent); }
.lle-add:hover { border-color: var(--ring-strong); background: var(--accent-soft); }
.lle-add--quiet { color: var(--muted); }
.lle-tpl { position: relative; margin-left: auto; }
.lle-tpl-btn { height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid transparent; background: transparent; color: var(--accent); font-weight: 700; font-size: .86rem; cursor: pointer; width: auto; }
.lle-tpl-btn:hover { background: var(--accent-soft); }
.lle-tpl-menu[hidden] { display: none !important; }
.lle-tpl-menu { position: absolute; right: 0; bottom: calc(100% + 6px); min-width: 180px; padding: 6px; border: 1px solid var(--ring); border-radius: 12px; background: var(--card); box-shadow: var(--shadow-hover); z-index: 20; display: grid; gap: 2px; }
.lle-tpl-item { display: block; width: 100%; text-align: left; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font-size: .92rem; font-weight: 550; cursor: pointer; }
.lle-tpl-item:hover, .lle-tpl-item:focus-visible { background: var(--card-soft); outline: none; }
@media (max-width: 480px) { .lle-add span { font-size: .82rem; } .lle-tpl { margin-left: 0; } }