/*
 * The speed dial board. Ported from the browlr prototype; colors are tokens so light and dark
 * both work. <html data-theme="light|dark"> pins a theme; no attribute follows the OS.
 */
:root {
  --bg: #E8EDEC;
  --surface: #FFFFFF;
  --surface-2: #F2F6F5;
  --ink: #15201E;
  --muted: #5A6967;
  --line: #D2DBD9;
  --accent: #0E7C6B;
  --accent-ink: #FFFFFF;
  --accent-soft: #D3EBE5;
  --glass: rgb(255 255 255 / .74);
  --scrim: rgb(14 22 21 / .38);
  --shadow: 0 1px 2px rgb(20 32 30 / .08), 0 6px 18px rgb(20 32 30 / .08);
  --shadow-lift: 0 2px 4px rgb(20 32 30 / .12), 0 14px 32px rgb(20 32 30 / .18);
  --wall-tide: radial-gradient(1100px 620px at 12% -12%, #CBE5DE 0%, transparent 62%), radial-gradient(900px 600px at 105% 0%, #D9E1EE 0%, transparent 58%), linear-gradient(#E9EFEE, #E1E8E8);
  --wall-slate: linear-gradient(160deg, #DFE5EA, #C8D1D9);
  --wall-dune: linear-gradient(165deg, #F0E7D9, #E0D2BE);
  --f-display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --f-body: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --tile: 150px;
  --gap: 18px;
  --radius: 14px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0F1615; --surface: #18211F; --surface-2: #1F2A28; --ink: #E3ECEA; --muted: #93A5A2;
    --line: #2B3836; --accent: #3DBFA6; --accent-ink: #052019; --accent-soft: #15372F;
    --glass: rgb(22 31 29 / .76); --scrim: rgb(0 0 0 / .55);
    --shadow: 0 1px 2px rgb(0 0 0 / .35), 0 6px 18px rgb(0 0 0 / .28);
    --shadow-lift: 0 2px 4px rgb(0 0 0 / .4), 0 14px 32px rgb(0 0 0 / .5);
    --wall-tide: radial-gradient(1100px 620px at 12% -12%, #123530 0%, transparent 62%), radial-gradient(900px 600px at 105% 0%, #19223A 0%, transparent 58%), linear-gradient(#0E1514, #0A100F);
    --wall-slate: linear-gradient(160deg, #1B222A, #10151B);
    --wall-dune: linear-gradient(165deg, #2B251C, #191611);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0F1615; --surface: #18211F; --surface-2: #1F2A28; --ink: #E3ECEA; --muted: #93A5A2;
  --line: #2B3836; --accent: #3DBFA6; --accent-ink: #052019; --accent-soft: #15372F;
  --glass: rgb(22 31 29 / .76); --scrim: rgb(0 0 0 / .55);
  --shadow: 0 1px 2px rgb(0 0 0 / .35), 0 6px 18px rgb(0 0 0 / .28);
  --shadow-lift: 0 2px 4px rgb(0 0 0 / .4), 0 14px 32px rgb(0 0 0 / .5);
  --wall-tide: radial-gradient(1100px 620px at 12% -12%, #123530 0%, transparent 62%), radial-gradient(900px 600px at 105% 0%, #19223A 0%, transparent 58%), linear-gradient(#0E1514, #0A100F);
  --wall-slate: linear-gradient(160deg, #1B222A, #10151B);
  --wall-dune: linear-gradient(165deg, #2B251C, #191611);
  color-scheme: dark;
}

body.board-page { background: var(--bg); color: var(--ink); font-family: var(--f-body); min-height: 100vh; }
body.board-page[data-wall="tide"]  { background: var(--wall-tide) fixed, var(--bg); }
body.board-page[data-wall="slate"] { background: var(--wall-slate) fixed, var(--bg); }
body.board-page[data-wall="dune"]  { background: var(--wall-dune) fixed, var(--bg); }
/* Your own image: a light wash of the page color keeps names readable on busy photos. */
body.board-page[data-wall="custom"] {
  background: linear-gradient(color-mix(in srgb, var(--bg) 22%, transparent), color-mix(in srgb, var(--bg) 22%, transparent)) fixed,
              var(--wall-image, none) center / cover no-repeat fixed, var(--bg);
}
body.board-page[data-wall="custom"] .label span,
body.board-page[data-wall="custom"] .sec-head h2 { background: color-mix(in srgb, var(--surface) 80%, transparent); padding: 1px 7px; border-radius: 6px; }

/* header */
.top {
  position: sticky; top: 0; z-index: 20; padding-inline: 16px;
  background: var(--glass); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.top-inner { max-width: 1240px; margin: 0 auto; display: flex; align-items: center; gap: 16px; padding-block: 12px; }
.wordmark { font: 700 26px/1 var(--f-display); letter-spacing: -0.02em; display: flex; align-items: center; gap: 8px; flex: none; color: var(--ink); text-decoration: none; }
.wordmark .dial { width: 26px; height: 26px; border-radius: 8px; background: var(--accent); color: var(--accent-ink); display: grid; grid-template-columns: repeat(3, 4px); gap: 3px; place-content: center; }
.wordmark .dial i { width: 4px; height: 4px; border-radius: 1px; background: currentColor; }
.search { flex: 1 1 auto; max-width: 620px; margin-inline: auto; min-width: 0; display: flex; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.search:focus-within { border-color: var(--accent); }
.search svg { margin-left: 12px; color: var(--muted); flex: none; }
.search input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; padding: 11px 10px; font-size: 15px; color: var(--ink); }
.search input:focus { box-shadow: none; }
.search .engine { padding: 0 12px; color: var(--muted); font-size: 12.5px; border-left: 1px solid var(--line); flex: none; }
.search { position: relative; }
.search-key { font: 500 11px/1 var(--f-mono); color: var(--muted); border: 1px solid var(--line); border-radius: 5px; padding: 3px 6px; margin-right: 10px; }
.search:focus-within .search-key { display: none; }
.search-results { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 45; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lift); padding: 6px; max-height: min(70vh, 520px); overflow-y: auto; }
.search-row { display: flex; align-items: center; gap: 12px; padding: 7px 10px; border-radius: 9px; color: var(--ink); text-decoration: none; }
.search-row[aria-selected="true"] { background: var(--accent-soft); }
.search-row .search-face { --tile: 120px; flex: none; width: 44px; height: 30px; border-radius: 7px; aspect-ratio: auto; font-size: 13px; }
.search-row .search-face img { width: 20px; height: 20px; }
.search-glyph { display: grid; place-items: center; background: var(--surface-2); color: var(--muted); }
.search .search-glyph svg { margin: 0; width: 16px; height: 16px; }
.search-text { min-width: 0; display: flex; flex-direction: column; }
.search-text > span { font-weight: 500; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-text small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.actions { display: flex; gap: 6px; flex: none; align-items: center; }
.ghost-btn { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-weight: 500; font-size: 13.5px; cursor: pointer; text-decoration: none; list-style: none; }
.ghost-btn::-webkit-details-marker { display: none; }
.ghost-btn:hover { border-color: var(--accent); }
.ghost-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.ghost-btn.square { width: 38px; padding: 0; justify-content: center; }
.account { position: relative; }
.account .menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 220px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lift); padding: 6px; }
.account .menu a, .account .menu button { display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: 8px; border: 0; background: none; color: var(--ink); font-size: 13.5px; text-decoration: none; cursor: pointer; }
.account .menu a:hover, .account .menu button:hover { background: var(--accent-soft); }
.account .menu-who { margin: 0; padding: 6px 10px 8px; font-weight: 600; font-size: 13.5px; border-bottom: 1px solid var(--line); margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; }
.account .menu-who small { font-weight: 400; color: var(--muted); font-family: var(--f-mono); }

/* page */
.page { max-width: 1240px; margin: 0 auto; padding-inline: 16px; padding-block: 18px 40px; display: flex; flex-direction: column; gap: 18px; }
.tabs-wrap { display: flex; }
.tabs { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); overflow-x: auto; max-width: 100%; min-width: 0; margin-inline: auto; scrollbar-width: none; }
.gtab { display: inline-flex; align-items: center; gap: 7px; flex: none; padding: 7px 12px; border-radius: 9px; font-weight: 500; color: var(--muted); white-space: nowrap; text-decoration: none; }
.gtab:hover { color: var(--ink); background: color-mix(in srgb, var(--surface) 70%, transparent); }
.gtab[aria-current="page"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.gtab-icon { padding: 7px 9px; }
.gtab .count, .sec-head .count { font: 500 11px/1 var(--f-mono); color: var(--muted); background: var(--surface-2); padding: 3px 5px; border-radius: 5px; font-variant-numeric: tabular-nums; }

.board[data-layout="sections"] { display: flex; flex-direction: column; gap: 30px; }
.section { display: flex; flex-direction: column; gap: 12px; }
.sec-head { display: flex; align-items: center; gap: 10px; }
.sec-head h2 { font: 600 19px/1.2 var(--f-display); letter-spacing: -0.01em; margin: 0; }
.sec-head .rule { flex: 1; height: 1px; background: var(--line); }
.sec-grip { color: var(--muted); cursor: grab; padding: 4px; border-radius: 6px; touch-action: none; display: grid; place-items: center; }
.sec-grip:hover { color: var(--ink); background: var(--glass); }
.section.is-ghost { opacity: .4; }
.sec-toggle { border: 0; background: none; color: var(--muted); padding: 4px; border-radius: 6px; cursor: pointer; display: grid; place-items: center; }
.sec-toggle:hover { color: var(--ink); background: var(--glass); }
.sec-toggle svg { transition: transform .15s; }
.section.collapsed .sec-toggle svg { transform: rotate(-90deg); }

.dial-grid[hidden], .gtab[hidden] { display: none; }
.dial-grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(min(var(--tile), calc((100% - 2 * var(--gap)) / 3)), 1fr)); }
.board[data-layout="tabs"] .dial-grid { grid-template-columns: repeat(auto-fill, min(var(--tile), calc((100% - 2 * var(--gap)) / 3))); justify-content: center; }

.tile { position: relative; min-width: 0; }
.tile-hit { display: flex; flex-direction: column; gap: 7px; width: 100%; padding: 0; border: 0; background: none; text-decoration: none; color: inherit; text-align: left; cursor: pointer; }
.face {
  position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; width: 100%;
  border-radius: var(--radius); overflow: hidden; background: var(--c, var(--surface-2)); color: #fff;
  font: 700 calc(var(--tile) * .2)/1 var(--f-display); letter-spacing: -0.02em; box-shadow: var(--shadow);
  transition: transform .14s ease, box-shadow .14s ease;
}
.face::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .06), inset 0 1px 0 rgb(255 255 255 / .14); pointer-events: none; }
.face.img { background: color-mix(in srgb, var(--c, var(--accent)) 12%, var(--surface)); }
.face.img img { width: 40%; max-width: 76px; aspect-ratio: 1; object-fit: contain; border-radius: 12%; filter: drop-shadow(0 1px 2px rgb(0 0 0 / .12)); }
.face .mono { text-shadow: 0 1px 2px rgb(0 0 0 / .18); }
.tile-hit:hover .face, .tile-hit:focus-visible .face { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.tile-hit:focus-visible { outline: none; }
.tile-hit:focus-visible .face { outline: 2px solid var(--accent); outline-offset: 3px; }
.label { display: flex; align-items: baseline; gap: 6px; min-width: 0; font-size: 13px; font-weight: 500; padding-inline: 4px; }
.label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.label small { font: 500 11px/1 var(--f-mono); color: var(--muted); flex: none; }
.hide-titles .dial-grid .label { display: none; }

.tile-more { position: absolute; top: 6px; right: 6px; width: 28px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: rgb(0 0 0 / .32); color: #fff; opacity: 0; transition: opacity .12s; }
.tile:hover .tile-more, .tile:focus-within .tile-more { opacity: 1; }
@media (hover: none) { .search-key { display: none; } }
@media (hover: none) { .tile-more { opacity: .7; width: 24px; height: 20px; top: 5px; right: 5px; } }

/* drag and drop */
.tile.is-ghost .face { opacity: .3; outline: 2px dashed var(--accent); outline-offset: -2px; }
.tile.is-ghost .label, .tile.is-ghost .tile-more { opacity: 0; }
.sortable-fallback { opacity: .95 !important; }
.sortable-fallback .face { box-shadow: var(--shadow-lift); }
.sortable-fallback .tile-more { display: none; }
.tile.merge-target .face { transform: scale(1.06); outline: 3px solid var(--accent); outline-offset: 3px; }
.tile.merge-target::after { content: attr(data-merge-label); position: absolute; left: 50%; top: -8px; translate: -50% -100%; background: var(--accent); color: var(--accent-ink); font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 999px; white-space: nowrap; pointer-events: none; box-shadow: var(--shadow); z-index: 2; }
.gtab.drop-target { background: var(--accent); color: var(--accent-ink); }
.gtab.drop-target .count { background: color-mix(in srgb, var(--accent-ink) 18%, transparent); color: inherit; }
.gtab.is-ghost { opacity: .4; }
body.dragging, body.dragging * { cursor: grabbing !important; }
.tile, .gtab { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

.add-tile { display: grid; place-items: center; align-content: center; gap: 4px; aspect-ratio: 16 / 10; border-radius: var(--radius); border: 1.5px dashed color-mix(in srgb, var(--muted) 55%, transparent); background: color-mix(in srgb, var(--surface) 35%, transparent); color: var(--muted); font-weight: 500; font-size: 12.5px; text-decoration: none; }
.add-tile:hover { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--surface) 70%, transparent); }

.folder-face { background: color-mix(in srgb, var(--surface) 82%, var(--accent) 18%); padding: 9%; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 7%; place-items: stretch; }
.folder-face .mini { border-radius: 6px; background: var(--c, var(--surface-2)); display: grid; place-items: center; color: #fff; font: 700 calc(var(--tile) * .075)/1 var(--f-display); overflow: hidden; }
.folder-face .mini.img { background: var(--surface); }
.folder-face .mini.img img { width: 58%; aspect-ratio: 1; object-fit: contain; }
.folder-face .mini.blank { background: color-mix(in srgb, var(--surface) 70%, transparent); }

.empty { margin: 0; color: var(--muted); text-align: center; padding: 8px; }

/* dialogs ("sheets"): folder contents, add/edit dial, groups */
.sheet { margin: auto; border: 1px solid var(--line); border-radius: 16px; padding: 0; background: var(--surface); color: var(--ink); width: min(600px, calc(100vw - 32px)); max-height: calc(100vh - 48px); box-shadow: var(--shadow-lift); font-family: var(--f-body); }
.sheet.wide { width: min(820px, calc(100vw - 32px)); }
.sheet.narrow { width: min(440px, calc(100vw - 32px)); }
.sheet::backdrop { background: var(--scrim); backdrop-filter: blur(3px); }
.sheet-head { display: flex; align-items: center; gap: 6px; padding: 16px 18px 12px; border-bottom: 1px solid var(--line); }
.sheet-head h2 { font: 600 20px/1.2 var(--f-display); margin: 0; flex: 1; text-wrap: balance; }
.sheet-body { display: block; padding: 18px; }
.sheet-foot { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.sheet-foot form { display: contents; }
.edit-layout { display: grid; grid-template-columns: 170px 1fr; gap: 18px; align-items: start; }
.edit-preview { display: flex; flex-direction: column; gap: 8px; --tile: 170px; }
.edit-preview .face { --c: var(--surface-2); }

.swatches { display: flex; flex-wrap: wrap; gap: 7px; }
.swatches label { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.swatches input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.swatches span { display: block; width: 26px; height: 26px; border-radius: 8px; background: var(--c); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .12); }
.swatches span.auto { background: conic-gradient(#0E7C6B, #2A6FB0, #5B54B8, #9A3F8F, #B8462E, #B7791F, #4B7A2E, #0E7C6B); }
.swatches input:checked + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.swatches input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.swatches small { font-size: 11.5px; color: var(--muted); }
.walls span { width: 72px; height: 46px; border-radius: 10px; }
.walls .wall-none { background: var(--bg); }
.walls .wall-tide { background: var(--wall-tide); }
.walls .wall-slate { background: var(--wall-slate); }
.walls .wall-dune { background: var(--wall-dune); }
.walls .wall-custom { background: var(--surface-2) center / cover no-repeat; }

.seg { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); gap: 2px; flex-wrap: wrap; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span { display: block; padding: 6px 12px; border-radius: 7px; font-size: 13px; font-weight: 500; color: var(--muted); }
.seg input:checked + span { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.seg input:focus-visible + span { outline: 2px solid var(--accent); }

.toast-action { border: 0; border-radius: 8px; padding: 5px 10px; font-size: 13px; font-weight: 600; background: rgb(0 0 0 / .08); color: inherit; cursor: pointer; text-decoration: none; }
.toast-action:hover { background: rgb(0 0 0 / .14); }
.x-btn { border: 0; background: none; width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; color: var(--muted); cursor: pointer; }
.x-btn:hover { background: var(--surface-2); color: var(--ink); }

@media (max-width: 760px) {
  .top-inner { flex-wrap: wrap; gap: 10px; }
  .search { order: 3; flex-basis: 100%; max-width: none; }
  .actions { margin-left: auto; }
  .actions .txt { display: none; }
  .actions .ghost-btn.primary { width: 38px; padding: 0; justify-content: center; }
  .search-key { display: none; }
  .edit-layout { grid-template-columns: 1fr; }
  .edit-preview { max-width: 200px; }
  :root { --gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .face { transition: none; }
}

/* settings sidebar */
.settings-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 35;
  width: min(360px, 100vw); display: flex; flex-direction: column;
  background: var(--surface); color: var(--ink); border-left: 1px solid var(--line);
  box-shadow: var(--shadow-lift); font-family: var(--f-body);
  transform: translateX(100%); transition: transform .2s ease;
  padding-top: env(safe-area-inset-top, 0px);
  /* The whole panel scrolls (header stays put), so the sections under the form never squeeze it. */
  overflow-y: auto; overscroll-behavior: contain;
}
.settings-panel.open { transform: none; }
.settings-head { display: flex; align-items: center; gap: 8px; padding: 16px 16px 12px 20px; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 1; background: var(--surface); }
.settings-head h2 { font: 600 20px/1.2 var(--f-display); margin: 0; }
.settings-status { flex: 1; text-align: right; font-size: 12px; color: var(--muted); }
.settings-body { flex: none; padding: 18px 20px 28px; }
.settings-body .seg { display: flex; }
.settings-body .seg label { flex: 1; }
.settings-body .seg span { text-align: center; }
/* On wide screens the board moves over so nothing hides behind the panel. */
@media (min-width: 1100px) {
  body.settings-open .page, body.settings-open .top-inner { padding-right: 376px; transition: padding .2s ease; }
}
@media (prefers-reduced-motion: reduce) { .settings-panel { transition: none; } }

.settings-extra { flex: none; border-top: 1px solid var(--line); }
.settings-body + .settings-extra { padding-top: 18px; }

/* import folder picker */
.pill { font: 500 12px/1 var(--f-mono); background: var(--surface-2); border: 1px solid var(--line); padding: 5px 8px; border-radius: 999px; }
.import-tree { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 12px; max-height: min(420px, 50vh); overflow: auto; }
.import-tree li { display: flex; align-items: center; gap: 10px; padding: 7px 12px 7px calc(12px + var(--depth, 0) * 22px); border-bottom: 1px solid var(--line); }
.import-tree li:last-child { border-bottom: 0; }
.import-tree label { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; cursor: pointer; }
.import-tree input { width: 16px; height: 16px; accent-color: var(--accent); flex: none; }
.import-tree .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; font-size: 14px; }
.import-tree .path { color: var(--muted); font-weight: 400; }
.import-tree .meta { font: 500 11.5px/1 var(--f-mono); color: var(--muted); flex: none; font-variant-numeric: tabular-nums; }
.board-hint { margin: 0; text-align: center; color: var(--muted); font-size: 13.5px; }
.board-hint a { color: var(--accent); font-weight: 600; text-decoration: none; }