/* Photo album maker (site/album/). Fills the workbench pane: header, pages | the page | panel, footer.
   Phones (≤ 700 px): the pages become a row above the page, the panel a bottom sheet. */
.al-host { position: relative; display: flex; flex-direction: column; min-height: 0; height: 100%; }
.sheet:has(> .al-host) > .sheet-desc, .sheet:has(> .al-host) > .related { display: none; }

/* ── before an album ── */
.al-start { display: grid; gap: 14px; padding: 8px 0; max-width: 720px; }
.al-lead { margin: 0; color: var(--muted); }
.al-start .fileslot { padding: 44px 18px; font-size: 17px; }
.al-start-opts { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.al-sel { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; }
.al select { border: 1.5px solid var(--line); border-radius: 8px; padding: 6px 9px; background: var(--paper); color: var(--ink); font: 14px var(--body); min-width: 0; }
.al-start select { border: 1.5px solid var(--line); border-radius: 8px; padding: 8px 10px; background: var(--panel); color: var(--ink); font: 15px var(--body); }
.al-start .btn .ic, .al .btn .ic { width: 17px; height: 17px; }
.al-safe-note { display: inline-flex; align-items: center; gap: 6px; color: var(--local); font-weight: 600; }
.al-safe-note .ic { width: 16px; height: 16px; }
/* the draft: "Continue your album" / "Start new" */
.al-draft { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1.5px solid color-mix(in srgb, var(--blue) 40%, var(--line)); border-radius: 12px;
  background: color-mix(in srgb, var(--blue) 7%, var(--panel)); }
.al-draft[hidden] { display: none; }
.al-draft > .ic { width: 26px; height: 26px; flex: none; color: var(--blue); margin-top: 6px; }
.al-draft-body { display: grid; gap: 8px; min-width: 0; }
.al-draft-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.al-draft .btn { padding: 9px 14px; font-size: 15px; text-align: left; }

/* ── the editor ── */
.al { --al-phone: 0; position: relative; display: flex; flex-direction: column; height: calc(min(100dvh - 48px, 920px) - 205px); min-height: 460px;
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--panel); }
.al.busy { cursor: progress; }
.al.over { outline: 3px dashed var(--blue); outline-offset: -3px; }
.al :focus-visible { outline: 2.5px solid var(--blue); outline-offset: 2px; }
.al .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.al-top, .al-foot { display: flex; align-items: center; gap: 6px; padding: 7px 10px; flex-wrap: wrap; }
.al-top { border-bottom: 1px solid var(--line); }
.al-foot { border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); padding: 5px 12px; flex-wrap: nowrap; min-width: 0; }
.al-sp { flex: 1; }
.al-title { border: 1.5px solid transparent; border-radius: 8px; padding: 4px 8px; margin-left: -4px; background: none; font: 600 19px var(--display);
  color: var(--ink); min-width: 0; width: min(360px, 40vw); }
.al-title::placeholder { color: var(--muted); opacity: .8; }
.al-title:hover, .al-title:focus { border-color: var(--line); }
.al-title:focus { outline: none; border-color: var(--blue); }
.al .btn { padding: 8px 14px; font-size: 14px; }
.al .al-ib { padding: 7px; display: inline-grid; place-items: center; }
.al .al-ib > span { display: none; }
.al .btn:disabled { opacity: .4; cursor: default; }
.al-top .btn:not(.al-ib) { display: inline-flex; align-items: center; gap: 7px; }
.al-pageno { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Save album: a small panel under the top bar */
.al-savepop { position: absolute; top: 52px; right: 10px; z-index: 40; width: min(340px, calc(100% - 20px)); box-sizing: border-box; display: grid; gap: 12px; padding: 14px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--panel); box-shadow: var(--shadow); }
.al-savepop[hidden] { display: none; }
.al-savepop .al-check { align-items: flex-start; line-height: 1.35; }
.al-savepop .al-check input { margin-top: 1px; flex: none; }
.al-savepop .al-savego { justify-self: start; display: inline-flex; gap: 7px; align-items: center; }
/* a note under the top bar (no draft in this browser) */
.al-note { display: flex; align-items: center; gap: 8px; margin: 0; padding: 7px 10px 7px 12px; font-size: 14px; border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, #d97706 12%, var(--panel)); color: var(--ink); }
.al-note[hidden] { display: none; }
.al-note > .ic { width: 16px; height: 16px; flex: none; }
.al-note > span { flex: 1; min-width: 0; }
.al-note-x { flex: none; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--ink); cursor: pointer; }
.al-note-x .ic { width: 15px; height: 15px; }
.al-status { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; margin-left: 12px; }
.al-safe { display: inline-flex; align-items: center; gap: 5px; color: var(--local); font-weight: 600; white-space: nowrap; }
.al-safe .ic { width: 15px; height: 15px; }

.al-body { flex: 1; display: grid; grid-template-columns: 124px minmax(0, 1fr) 300px; min-height: 0; }

/* the pages */
.al-side { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); background: var(--soft); }
.al-strip { list-style: none; margin: 0; padding: 12px 8px; overflow: auto; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.al-th { position: relative; display: grid; justify-items: center; gap: 4px; padding: 5px; border-radius: 8px; cursor: pointer; touch-action: pan-x pan-y; user-select: none; }
.al-th .al-page { pointer-events: none; box-shadow: 0 1px 3px rgba(0, 0, 0, .22); border-radius: 1px; }
.al-th > span { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.al-th.cur { background: color-mix(in srgb, var(--blue) 14%, transparent); }
.al-th.cur .al-page { outline: 2px solid var(--blue); outline-offset: 1px; }
.al-th.cur > span { color: var(--ink); font-weight: 700; }
.al-th.lifted { opacity: .45; }
.al-th.drop::before, .al-strip.drop-end .al-th:last-child::after { content: ""; position: absolute; left: 4px; right: 4px; height: 3px; border-radius: 2px; background: var(--blue); }
.al-th.drop::before { top: -8px; }
.al-strip.drop-end .al-th:last-child::after { bottom: -8px; }
.al-th .al-slot.empty .al-clip { border-width: 1px; }
.al-striptools { position: relative; display: grid; grid-template-columns: repeat(3, 34px); justify-content: center; gap: 4px; padding: 8px 6px; border-top: 1px solid var(--line); }
.al-striptools .al-ib { background: var(--panel); }
.al-addpop { position: absolute; left: 6px; bottom: calc(100% + 6px); z-index: 30; width: 300px; padding: 12px; border-radius: 12px; background: var(--panel);
  border: 1px solid var(--line); box-shadow: var(--shadow); }
.al-addpop[hidden] { display: none; }
.al-addpop p { margin: 0 0 8px; font-weight: 600; font-size: 14px; }
.al-addgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.al-addgrid .al-tpl { padding: 5px; }

/* the page being edited */
.al-stage { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.al-slotbar { display: flex; align-items: center; justify-content: center; gap: 8px; height: 50px; box-sizing: border-box; padding: 6px 12px; border-bottom: 1px solid var(--line); flex-wrap: nowrap; overflow: hidden; white-space: nowrap; }
.al-hint { color: var(--muted); font-size: 14px; }
.al-zoom { display: inline-flex; align-items: center; gap: 8px; }
.al-zoom .ic { width: 17px; height: 17px; color: var(--muted); }
.al-zoom input { width: 160px; accent-color: var(--ink); }
.al-slotbar .al-ib { display: inline-flex; gap: 6px; padding: 7px 11px; }
.al-slotbar .al-ib > span { display: inline; }
.al-canvas { flex: 1; min-height: 0; overflow: auto; background: color-mix(in srgb, var(--ink) 10%, var(--paper)); }
.al-pagewrap { min-height: 100%; min-width: fit-content; display: grid; place-items: center; padding: 24px; box-sizing: border-box; }

/* a page, anywhere */
.al-page { position: relative; overflow: hidden; box-shadow: 0 2px 10px rgba(0, 0, 0, .22); }
.al-slot { position: absolute; transform-origin: 50% 50%; }
.al-frame { position: absolute; background: #fff; }
.al-clip { position: absolute; inset: 0; overflow: hidden; }
.al-clip img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 50% 50%; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.al-border { position: absolute; inset: 0; pointer-events: none; }
.al-slot.empty .al-clip { border: 1.5px dashed color-mix(in srgb, #1c2428 38%, transparent); background: color-mix(in srgb, #1c2428 5%, transparent); display: grid; place-items: center; }
.al-drop { font-size: 13px; color: #56636a; text-align: center; padding: 4px; line-height: 1.2; }
/* a photo not found on this device: its thumb, dashed, and Relink */
.al-slot.missing .al-clip::after { content: ""; position: absolute; inset: 0; border: 2px dashed rgba(255, 255, 255, .95); outline: 1.5px dashed rgba(28, 36, 40, .55);
  outline-offset: -3.5px; border-radius: inherit; background: rgba(255, 255, 255, .28); pointer-events: none; }
.al-th .al-slot.missing .al-clip::after { border-width: 1px; outline: 0; }
.al-relink { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
  border: 0; border-radius: 999px; background: var(--ink); color: var(--panel); font: 600 13px var(--body); cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); white-space: nowrap; }
.al-pool-ph.missing { outline: 2px dashed color-mix(in srgb, var(--ink) 45%, transparent); outline-offset: -2px; }
.al-pool-ph.missing img { opacity: .6; }
.al-stage .al-slot { cursor: pointer; }
.al-stage .al-slot.filled { cursor: grab; touch-action: pan-y; } /* a swipe scrolls; a picked frame pans */
.al-stage .al-slot.filled.sel { touch-action: none; }
.al-stage.swapping .al-slot { cursor: crosshair; }
.al-stage.swapping .al-slot.sel { outline-style: dashed; }
.al-stage .al-slot.panning { cursor: grabbing; }
.al-stage .al-slot.sel { outline: 3px solid var(--blue); outline-offset: -3px; z-index: 2; }
.al-stage .al-slot.target { outline: 3px dashed var(--blue); outline-offset: -3px; z-index: 3; }
.al-stage .al-slot.target .al-clip { filter: brightness(1.08); }
.al-stage .al-slot.empty.target .al-clip { background: color-mix(in srgb, var(--blue) 18%, transparent); }
.al-stage .al-slot:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; box-shadow: inset 0 0 0 5px rgba(255, 255, 255, .7); z-index: 2; }
.al-grip { position: absolute; left: 6px; top: 6px; z-index: 1; width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px;
  background: rgba(20, 24, 28, .74); color: #fff; font-size: 17px; line-height: 1; cursor: grab; touch-action: none; opacity: 0; }
.al-slot:hover .al-grip, .al-slot.sel .al-grip, .al-slot:focus-within .al-grip { opacity: 1; }
@media (hover: none) { .al-grip { opacity: 1; } }
.al-ghost { position: fixed; left: -36px; top: -36px; width: 72px; height: 72px; object-fit: cover; border-radius: 10px; border: 2px solid #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35); pointer-events: none; z-index: 1000; opacity: .92; }

/* the panel */
.al-panel { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--line); background: var(--panel); }
.al-grabber { display: none; }
.al-tabs { display: flex; border-bottom: 1px solid var(--line); padding: 0 4px; }
.al-tab { flex: 1; display: grid; justify-items: center; gap: 3px; padding: 9px 2px 8px; border: 0; background: none; color: var(--muted); font: 600 12px var(--body);
  cursor: pointer; border-bottom: 2.5px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.al-tab .ic { width: 18px; height: 18px; }
.al-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .al-tab:hover { color: var(--ink); } }
.al-panes { flex: 1; min-height: 0; overflow: auto; }
.al-pane { padding: 12px; display: grid; gap: 12px; align-content: start; }
.al-pane[hidden] { display: none; }
.al-sub { margin: 0; font-size: 14px; color: var(--muted); }
.al-tplgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.al-tpl { display: grid; gap: 5px; justify-items: center; align-content: start; padding: 7px 5px; border: 1.5px solid transparent; border-radius: 10px; background: none;
  color: var(--ink); font: 500 12px/1.2 var(--body); text-align: center; cursor: pointer; }
.al-tpl[aria-pressed="true"] { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 10%, transparent); }
@media (hover: hover) and (pointer: fine) { .al-tpl:hover { background: var(--soft); } }
.al-tplicon { position: relative; display: block; width: 100%; max-width: 64px; background: #fff; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.al-tplicon > span { position: absolute; background: color-mix(in srgb, #1c2428 26%, #fff); border-radius: 1.5px; }
.al-tplicon > span.tx { height: 3.5%; background: color-mix(in srgb, #1c2428 55%, #fff); }
.al-pool { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.al-pool:empty { display: none; }
.al-pool-item { position: relative; }
.al-pool-ph { display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 0; border-radius: 9px; overflow: hidden; background: var(--soft); cursor: grab; touch-action: pan-x pan-y; }
.al-pool-ph img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; user-select: none; }
.al-pool-x { position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; padding: 0; display: grid; place-items: center; border-radius: 50%;
  border: 2px solid var(--panel); background: var(--ink); color: var(--panel); cursor: pointer; opacity: 0; }
.al-pool-x .ic { width: 13px; height: 13px; }
.al-pool-item:hover .al-pool-x, .al-pool-item:focus-within .al-pool-x { opacity: 1; }
@media (hover: none) { .al-pool-x { opacity: 1; } }
.al-pooldrop { display: grid; gap: 10px; border-radius: 10px; }
.al-pooldrop.target { outline: 2.5px dashed var(--blue); outline-offset: 4px; }
.al-pane .fileslot { padding: 14px; font-size: 14px; }

.al-style { display: grid; gap: 14px; }
.al-seg { display: inline-flex; }
.al-seg .btn { flex: 1; border-radius: 0; padding: 7px 10px; font-size: 13px; }
.al-seg .btn:first-child { border-radius: 8px 0 0 8px; }
.al-seg .btn:last-child { border-radius: 0 8px 8px 0; }
.al-seg .btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.al-own { margin: -6px 0 0; font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 8px; }
.al-own:empty { display: none; }
.al-own .linkish { background: none; border: 0; padding: 0; font: 600 13px var(--body); color: var(--blue); cursor: pointer; text-decoration: underline; }
.al-range { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: 14px; }
.al-range > span { font-weight: 600; }
.al-range input[type=range] { width: 100%; accent-color: var(--ink); }
.al-range output { min-width: 42px; text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
.al-range select { grid-column: 2 / 4; }
.al-range .al-swatches { grid-column: 2 / 4; }
.al-swatches { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.al-swatch { width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 2px solid var(--panel); background: var(--c); box-shadow: 0 0 0 1px var(--line); cursor: pointer; }
.al-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--ink); }
.al-swatches input[type=color] { width: 30px; height: 30px; padding: 0; border: 0; background: none; cursor: pointer; }
.al-check { display: flex; gap: 8px; align-items: center; font-size: 14px; cursor: pointer; }
.al-check input { width: 18px; height: 18px; accent-color: var(--ink); }

@media (prefers-reduced-motion: no-preference) {
  .al-grip, .al-pool-x { transition: opacity .15s var(--ease-out); }
  .al-th, .al-tpl, .al-tab { transition: background-color .15s, color .15s, border-color .15s; }
}

/* ── phones: the pages in a row above the page, the panel a bottom sheet ── */
@media (max-width: 700px) {
  .al { --al-phone: 1; height: calc(100dvh - 150px); min-height: 520px; border-radius: 0; border-left: 0; border-right: 0; }
  .al-start .fileslot { padding: 32px 14px; }
  /* the title gets its own row, the buttons the one under it (Save PDF at its end) */
  .al-top { flex-wrap: wrap; gap: 4px; padding: 6px 8px; }
  .al-title { width: auto; flex: 1 0 100%; margin-left: 0; font-size: 17px; }
  .al-top .al-save { margin-left: auto; }
  .al-top .al-sp { display: none; }
  .al-open-editor { padding: 7px !important; }
  .al-open-editor > span, .al-top .al-openalbum > span, .al-top .al-savealbum > span { display: none; }
  .al-top .al-openalbum, .al-top .al-savealbum { padding: 7px; }
  .al-savepop { top: 90px; right: 8px; }
  .al-draft { padding: 12px; gap: 10px; }
  .al-draft > .ic { display: none; }
  .al-foot .al-safe > span { display: none; }
  /* the strip in the first row; the page and the sheet share the second, so the sheet never reaches under the strip */
  .al-body { display: grid; grid-template-rows: auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); }
  .al-side { grid-row: 1; flex-direction: row; border-right: 0; border-bottom: 1px solid var(--line); min-height: 0; flex: none; }
  .al-strip { flex-direction: row; align-items: flex-start; padding: 8px; gap: 8px; overflow-x: auto; overflow-y: hidden; }
  .al-th { padding: 3px; }
  .al-th .al-page { transform: none; }
  .al-th.drop::before { top: 4px; bottom: 4px; left: -6px; right: auto; width: 3px; height: auto; }
  .al-strip.drop-end .al-th:last-child::after { top: 4px; bottom: 4px; right: -6px; left: auto; width: 3px; height: auto; }
  .al-striptools { grid-template-columns: repeat(2, 30px); grid-auto-rows: 30px; align-content: center; gap: 4px; border-top: 0; border-left: 1px solid var(--line); padding: 4px 6px; }
  .al-striptools .al-ib { padding: 0; width: 30px; height: 30px; }
  .al-striptools .al-ib:last-of-type { grid-column: 1 / 3; width: 100%; }
  .al-earlier .ic, .al-later .ic { transform: rotate(-90deg); }
  .al-side { position: relative; z-index: 20; }
  .al-striptools { position: static; }
  .al-addpop { left: 8px; right: 8px; top: calc(100% + 6px); bottom: auto; width: auto; max-height: 60dvh; overflow: auto; }
  .al-body { position: relative; }
  .al-stage { grid-row: 2; grid-column: 1; min-height: 0; }
  .al-canvas { padding-bottom: 64px; } /* the closed sheet sits over the bottom of the page area */
  .al-slotbar { height: 46px; padding: 4px 8px; gap: 6px; }
  .al-zoom input { width: 110px; }
  .al-slotbar .al-ib { padding: 7px; }
  .al-slotbar .al-ib > span { display: none; }
  .al-pagewrap { padding: 12px; }
  /* the sheet: at most as tall as the page area; its grabber and tabs stay, only the tab's content scrolls */
  .al-panel { grid-row: 2; grid-column: 1; align-self: end; position: relative; max-height: 100%; min-height: 0; border-left: 0; border-top: 1px solid var(--line);
    border-radius: 16px 16px 0 0; z-index: 5; box-shadow: 0 -6px 20px rgba(0, 0, 0, .12); }
  .al-grabber, .al-tabs { flex: none; }
  .al-grabber { display: block; width: 36px; height: 4px; border-radius: 2px; background: var(--line); margin: 7px auto 0; }
  .al-tabs { border-bottom: 0; }
  .al-panel[data-open="1"] .al-tabs { border-bottom: 1px solid var(--line); }
  .al-panel:not([data-open="1"]) .al-panes { display: none; }
  .al-panes { max-height: min(46dvh, 400px); }
  .al-pool { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
  .al-tplgrid { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); }
}

/* ── stickers and text boxes on a page (page-view.js itemView, items-ui.js) ── */
.al-item { position: absolute; z-index: 4; transform-origin: 50% 50%; }
.al-item img, .al-item canvas { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.al-textview { position: relative; }
.al-textsvg { display: block; overflow: visible; }
.al-textsvg text { white-space: pre; font-kerning: none; font-variant-ligatures: none; }
.al-item.placeholder .al-textsvg { opacity: .4; }
.al-stage .al-item { cursor: grab; touch-action: none; }
.al-stage .al-item.moving { cursor: grabbing; }
.al-stage .al-item.placeholder { outline: 1.5px dashed color-mix(in srgb, #1c2428 32%, transparent); outline-offset: 2px; }
.al-stage .al-item.sel { outline: 2px solid var(--blue); outline-offset: 2px; } /* stays in its place in the order */
.al-stage .al-item:focus-visible { outline: 2.5px solid var(--blue); outline-offset: 3px; }
.al-stage .al-item.al-editing { visibility: hidden; }
.al-h-size, .al-h-rot, .al-h-width { position: absolute; box-sizing: border-box; touch-action: none; z-index: 1; }
.al-h-size { right: -8px; bottom: -8px; width: 16px; height: 16px; border-radius: 50%; background: var(--blue); border: 2px solid #fff; cursor: nwse-resize; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.al-text > .al-h-size { top: 50%; bottom: auto; right: -7px; width: 12px; height: 28px; margin-top: -14px; border-radius: 6px; cursor: ew-resize; }
.al-h-rot { left: 50%; top: -30px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: #fff; border: 2px solid var(--blue); cursor: grab; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.al-h-rot::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 12px; margin-left: -1px; background: var(--blue); }
@media (pointer: coarse) {
  .al-h-size { width: 24px; height: 24px; right: -12px; bottom: -12px; }
  .al-text > .al-h-size { width: 16px; height: 34px; right: -9px; margin-top: -17px; }
  .al-h-rot { width: 24px; height: 24px; margin-left: -12px; top: -38px; }
}
.al-richframe { position: absolute; z-index: 6; }
.al-rich { background: color-mix(in srgb, #fff 55%, transparent); }
.al-h-width { right: -9px; top: 50%; width: 10px; height: 26px; max-height: 100%; min-height: 14px; transform: translateY(-50%); border-radius: 5px; background: var(--blue); border: 2px solid #fff; cursor: ew-resize; }

/* the bar while an item is picked, or a text box is typed in (the PDF editor's rich text toolbar) */
.al-slotbar .al-inks { flex-wrap: nowrap; gap: 4px; }
.al-slotbar .al-inks .al-swatch { width: 22px; height: 22px; }
.al-slotbar.al-richbar { height: auto; min-height: 50px; flex-wrap: wrap; white-space: normal; overflow: visible; gap: 6px 10px; }
.al-richbar .pe-rt-font { max-width: 10em; }
.al-richbar .pe-rt-size { width: 4.4em; }
.al-richbar .pe-rt-kind { max-width: 9.5em; }
.al-richbar .pe-rt input, .al-richbar .pe-rt select { border: 1.5px solid var(--line); border-radius: 8px; padding: 5px 7px; background: var(--paper); color: var(--ink); font: 14px var(--body); }

/* the Stickers and Text tabs */
.al-h { margin: 4px 0 -4px; font: 600 14px var(--body); }
.al-stkcolors { gap: 5px; }
.al-stkcolors .al-swatch { width: 22px; height: 22px; }
.al-themes { display: flex; flex-wrap: wrap; gap: 6px; }
.al-themes .chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.al-stkgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 6px; }
.al-stk { aspect-ratio: 1; padding: 8px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; display: grid; place-items: center; }
.al-stk img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
@media (hover: hover) and (pointer: fine) { .al-stk:hover { border-color: var(--ink); } .al-emoji:hover { background: var(--soft); } }
.al-emoji-search { width: 100%; box-sizing: border-box; border: 1.5px solid var(--line); border-radius: 8px; padding: 7px 10px; background: var(--paper); color: var(--ink); font: 15px var(--body); }
.al-recent, .al-emojis { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; }
.al-recent:empty { display: none; }
.al-recent > .al-sub { margin-right: 6px; font-size: 13px; }
.al-emoji { width: 38px; height: 38px; padding: 0; border: 0; border-radius: 8px; background: none; font: 24px/1 "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", emoji, system-ui; cursor: pointer; }
.al-ownimg { justify-self: start; display: inline-flex; gap: 8px; align-items: center; }
.al-ownnote { margin: -6px 0 0; font-size: 13px; }
.al-results { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.al-results:empty { display: none; }
.al-addtext { justify-self: start; display: inline-flex; gap: 8px; align-items: center; }
@media (max-width: 700px) {
  .al-slotbar { overflow-x: auto; justify-content: safe center; scrollbar-width: none; } /* a wide bar scrolls, from its start */
  .al-slotbar .al-inks { order: 1; } /* the picked item's actions first: Delete is in reach without scrolling */
  .al-slotbar.al-richbar { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; height: 46px; }
  .al-richbar .pe-rt, .al-richbar .pe-tools { flex-wrap: nowrap; }
  .al-slotbar > *, .al-richbar .pe-rt > *, .al-richbar .pe-rt-group > * { flex: none; }
  .al-stkgrid { grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); }
}

/* ── in-page dialogs (relink-ui.js): a card over the tool ── */
/* the tool's own area (not the whole workbench): as tall as the editor, so the backdrop covers what the tool covers */
.al-host.al-dlgopen { min-height: max(460px, calc(min(100dvh - 48px, 920px) - 205px)); }
.al-dlgback { position: absolute; inset: 0; z-index: 60; display: grid; justify-items: center; align-items: start; padding: 48px 16px 16px; overflow: auto;
  border-radius: 12px; background: color-mix(in srgb, var(--ink) 38%, transparent); }
.al-dlg { box-sizing: border-box; width: min(520px, 100%); display: grid; gap: 14px; padding: 20px; border-radius: 14px; background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); box-shadow: 0 18px 48px rgba(0, 0, 0, .3); }
.al-askdlg { width: min(420px, 100%); }
.al-dlg-h { margin: 0; font: 600 19px var(--display); }
.al-dlg-text { margin: 0; font-size: 15px; line-height: 1.45; }
.al-askdlg .al-dlg-text { font-weight: 600; }
.al-dlg-btns { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.al-dlg .btn { display: inline-flex; align-items: center; gap: 7px; }
.al-dlg .btn .ic { width: 17px; height: 17px; }
.al-relinkpick { display: flex; flex-wrap: wrap; gap: 8px; }
.al-relinkprog { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); min-height: 1.2em; }
.al-relinkprog:has(> span:empty):has(> progress[hidden]) { display: none; }
.al-relinkprog progress { flex: 1; height: 8px; accent-color: var(--blue); }
.al-relinkgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px; max-height: 180px; overflow: auto; }
.al-relinkgrid li { position: relative; aspect-ratio: 1; border-radius: 7px; overflow: hidden; background: var(--soft); }
.al-relinkgrid img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .4; filter: grayscale(.8); }
.al-relinkgrid li.found img { opacity: 1; filter: none; }
.al-relinkgrid li .ic { position: absolute; right: 3px; bottom: 3px; width: 18px; height: 18px; padding: 2px; border-radius: 50%; background: var(--local); color: #fff; box-sizing: border-box; }
.al-relinkres { margin: 0; font-weight: 700; font-size: 15px; }
@media (max-width: 700px) {
  .al-host.al-dlgopen { min-height: max(520px, calc(100dvh - 150px)); }
  .al-dlgback { padding: 16px 8px; border-radius: 0; }
  .al-dlg { padding: 16px; gap: 12px; }
  .al-relinkpick .btn { flex: 1 1 auto; justify-content: center; white-space: nowrap; }
}
@media (prefers-reduced-motion: no-preference) {
  .al-dlg { animation: al-dlg-in .16s var(--ease-out, ease-out); }
  @keyframes al-dlg-in { from { opacity: 0; transform: translateY(6px) scale(.98); } }
}