/* Remember the Domain: the layout of Asra's dev tools (dense, calm, keyboard-first) in this site's own colours. Follows
   the system's light or dark setting unless the visitor picks a theme in Settings (html[data-theme]). */
:root {
  /* the site's own colours (warm paper, deep blue, amber star) on the dev tools' layout */
  --bg: #f7f5f0; --panel: #f1eee7; --panel2: #ffffff; --hover: #ebe7de; --active: #e4e0d6; --border: #e3dfd6; --border2: #d6d1c6;
  --fg: #1b1d22; --muted: #5d6270; --faint: #8a8f99; --accent: #3a49d6; --accent-fg: #ffffff; --accent-soft: rgba(58,73,214,.10);
  --ok: #11795a; --warn: #ffb547; --err: #8b3a3a; --code: #f1eee7; --sel: rgba(58,73,214,.18);
  --free: #11795a; --free-bg: #e2f5ec; --maybe: #8a5a00; --maybe-bg: #fdf0d5; --taken: #6b6f7a; --taken-bg: #eceae5; --closed: #8b3a3a; --closed-bg: #f6e4e2;
  color-scheme: light;
  --fs: 13px; --row: 30px; --gap: 12px; --sidebar: 248px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --bg: #121317; --panel: #16171c; --panel2: #1b1d23; --hover: #22242b; --active: #2a2d36; --border: #2c2f38; --border2: #363a45;
  --fg: #eceef3; --muted: #a2a7b4; --faint: #6f7482; --accent: #8c97ff; --accent-fg: #10121a; --accent-soft: rgba(140,151,255,.16);
  --ok: #5fd3a5; --warn: #ffc56e; --err: #f09a92; --code: #101115; --sel: rgba(140,151,255,.28);
  --free: #5fd3a5; --free-bg: #143327; --maybe: #f2c169; --maybe-bg: #3a2c10; --taken: #a2a7b4; --taken-bg: #262830; --closed: #f09a92; --closed-bg: #3a1e1c;
  color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #121317; --panel: #16171c; --panel2: #1b1d23; --hover: #22242b; --active: #2a2d36; --border: #2c2f38; --border2: #363a45;
  --fg: #eceef3; --muted: #a2a7b4; --faint: #6f7482; --accent: #8c97ff; --accent-fg: #10121a; --accent-soft: rgba(140,151,255,.16);
  --ok: #5fd3a5; --warn: #ffc56e; --err: #f09a92; --code: #101115; --sel: rgba(140,151,255,.28);
  --free: #5fd3a5; --free-bg: #143327; --maybe: #f2c169; --maybe-bg: #3a2c10; --taken: #a2a7b4; --taken-bg: #262830; --closed: #f09a92; --closed-bg: #3a1e1c;
  color-scheme: dark;
}
html[data-density="compact"] { --fs: 12px; --row: 26px; --gap: 8px; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: var(--fs)/1.5 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; }
code, pre, .mono { font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; }
code { font-size: .92em; background: var(--code); border: 1px solid var(--border); border-radius: 4px; padding: 0 4px; }
::selection { background: var(--sel); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 4px; }
* { scrollbar-width: thin; scrollbar-color: var(--border2) transparent; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kbd { font: 11px ui-monospace, Menlo, monospace; color: var(--muted); border: 1px solid var(--border2); border-radius: 4px; padding: 0 5px; background: var(--panel2); }

/* ---- shell: sidebar | main (topbar, view, status) */
.app { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); height: 100vh; height: 100dvh; }
.sidebar { background: var(--panel); border-right: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; }
.brand { display: flex; align-items: center; gap: 8px; padding: 12px 14px 8px; font-weight: 600; color: var(--fg); }
.brand:hover { text-decoration: none; }
.brand .logo { width: 20px; height: 20px; border-radius: 5px; flex: none; }
.search { margin: 4px 10px 8px; display: flex; align-items: center; gap: 6px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 0 8px; height: 30px; color: var(--muted); }
.search:hover { border-color: var(--border2); text-decoration: none; }
.search input { flex: 1; min-width: 0; border: 0; background: none; outline: 0; height: 100%; }
.tsearch { display: flex; align-items: center; gap: 6px; height: 30px; width: 240px; padding: 0 8px; background: var(--panel2); border: 1px solid var(--border2); border-radius: 6px; color: var(--muted); }
.tsearch:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.tsearch input { flex: 1; min-width: 0; border: 0; background: none; outline: 0; height: 100%; color: var(--fg); }
.nav .nomatch { color: var(--faint); padding: 4px 8px; font-size: 12px; }
.bulk .selall { margin-right: 6px; }
.nav { overflow: auto; padding: 0 6px 8px; flex: 1; min-height: 0; }
.nav h6 { margin: 12px 8px 4px; font-size: 11px; font-weight: 600; color: var(--faint); text-transform: uppercase; letter-spacing: .6px; display: flex; justify-content: space-between; align-items: center; }
.nav h6 .mini { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 4px; border-radius: 4px; }
.nav h6 .mini:hover { background: var(--hover); color: var(--fg); }
.nav a { display: flex; align-items: center; gap: 8px; height: var(--row); padding: 0 8px; border-radius: 6px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav a:hover { background: var(--hover); color: var(--fg); text-decoration: none; }
.nav a[aria-current="page"] { background: var(--active); color: var(--fg); }
.nav .dot { width: 6px; height: 6px; border-radius: 2px; background: var(--faint); flex: none; }
.nav a[aria-current="page"] .dot { background: var(--accent); }
.nav .n, .tag { font-size: 11px; color: var(--muted); border: 1px solid var(--border2); border-radius: 10px; padding: 0 7px; line-height: 16px; }
.nav .n, .nav .tag, .nav .ext { margin-left: auto; }
.nav .ext { color: var(--faint); }
.affil { flex: none; padding: 8px 12px 10px; font-size: 11px; color: var(--muted); line-height: 1.5; border-top: 1px solid var(--border); }
.affil a { color: var(--muted); text-decoration: underline; } .affil a:hover { color: var(--fg); }

.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.topbar { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px; border-bottom: 1px solid var(--border); flex: none; }
.crumb { color: var(--muted); display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; overflow: hidden; }
.crumb b { color: var(--fg); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.spacer { flex: 1; }
.tbx { display: flex; align-items: center; gap: 4px; }
.navbtn { display: none; }
.view { flex: 1; min-height: 0; overflow: auto; padding: 20px 24px 32px; outline: none; }
.view > section { max-width: 1040px; }
.status { display: flex; flex-direction: column; padding: 2px 16px; border-top: 1px solid var(--border); color: var(--faint); font-size: 11.5px; flex: none; background: var(--bg); }
.status .ft-line { display: flex; gap: 14px; align-items: center; min-height: 22px; min-width: 0; }
.status .ft-disc { color: var(--muted); align-items: flex-start; padding: 3px 0; }
.status .ft-disc b { color: var(--fg); font-weight: 600; }
.status .ft-t { flex: 1 1 auto; min-width: 0; }
.status .ft-more { display: none; flex: none; font-size: inherit; }
.status .ft-ic { width: 14px; height: 14px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 9.5px; font-weight: 700; border: 1px solid currentColor; color: var(--faint); flex: none; margin-top: 1px; }
.status .ft-bar { border-top: 1px dashed var(--border); white-space: nowrap; }
.status .ft-bar a, .linkbtn { color: var(--accent); }
.status .lock { color: var(--ok); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.linkbtn { border: 0; background: none; padding: 0; cursor: pointer; font-size: inherit; }

/* ---- shared pieces */
h1.title { font-size: 18px; line-height: 1.3; margin: 0 0 4px; font-weight: 600; }
.desc { color: var(--muted); margin: 0 0 16px; max-width: 70ch; }
.help, #hint { color: var(--faint); font-size: 11.5px; margin: 6px 0; max-width: 80ch; }
#hint.bad { color: var(--err); }
.count { color: var(--muted); font-size: 12px; }
.btn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid var(--border2); background: var(--panel2); border-radius: 6px; cursor: pointer; white-space: nowrap; color: var(--fg); }
.btn:hover { background: var(--hover); text-decoration: none; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); font-weight: 500; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost { border-color: transparent; background: none; color: var(--muted); }
.btn.ghost:hover { background: var(--hover); color: var(--fg); }
.btn.danger { color: var(--err); }
.btn.mini { height: 24px; padding: 0 8px; font-size: 12px; }
.btn[disabled] { opacity: .45; cursor: default; }
.input { height: 30px; background: var(--bg); border: 1px solid var(--border2); border-radius: 6px; padding: 0 8px; min-width: 0; }
.input.wide { width: 100%; }
textarea.mono { width: 100%; background: var(--code); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; font-size: 12.5px; resize: vertical; }
.switch { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; cursor: pointer; color: var(--fg); }
.switch input, input.big { accent-color: var(--accent); width: 15px; height: 15px; }
.seg { display: inline-flex; border: 1px solid var(--border2); border-radius: 6px; overflow: hidden; flex-wrap: wrap; }
.seg button { border: 0; border-right: 1px solid var(--border2); background: var(--panel2); padding: 0 12px; height: 28px; cursor: pointer; color: var(--muted); }
.seg button:last-child { border-right: 0; }
.seg button:hover { background: var(--hover); color: var(--fg); }
.seg button[aria-pressed="true"], .seg button[aria-selected="true"] { background: var(--active); color: var(--fg); box-shadow: inset 0 -2px 0 var(--accent); }
.seg .c-free[aria-pressed="true"] { box-shadow: inset 0 -2px 0 var(--free); }
.seg .c-maybe[aria-pressed="true"] { box-shadow: inset 0 -2px 0 var(--maybe); }
.seg .c-taken[aria-pressed="true"] { box-shadow: inset 0 -2px 0 var(--taken); }
.seg .c-closed[aria-pressed="true"], .seg .c-reserved[aria-pressed="true"] { box-shadow: inset 0 -2px 0 var(--closed); }
.pane { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; min-width: 0; margin: 0 0 12px; }
.pane > header { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-bottom: 1px solid var(--border); color: var(--muted); font-size: 12px; font-weight: 500; }
.pane > .body { padding: 12px; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.card { display: block; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); color: var(--fg); }
.card b { display: block; margin-bottom: 2px; font-weight: 600; } .card span { color: var(--muted); font-size: 12px; }
.h2 { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); margin: 22px 0 8px; }
.tabbar { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin: 0 0 10px; overflow-x: auto; }
.tab { border: 0; background: none; color: var(--muted); padding: 7px 11px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; border-radius: 6px 6px 0 0; }
.tab:hover { color: var(--fg); background: var(--hover); }
.tab[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--accent); }
.srow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 12px 0; border-top: 1px solid var(--border); max-width: 760px; }
.srow .l b { display: block; font-weight: 500; } .srow .l span { color: var(--muted); font-size: 12px; }
.menuwrap { position: relative; }
.menu { position: absolute; right: 0; top: 100%; z-index: 30; min-width: 230px; background: var(--panel2); border: 1px solid var(--border2); border-radius: 8px; padding: 4px; box-shadow: 0 12px 32px rgba(0,0,0,.35); display: flex; flex-direction: column; }
.menu .mi { text-align: left; border: 0; background: none; padding: 7px 10px; border-radius: 6px; cursor: pointer; color: var(--fg); }
.menu .mi:hover, .menu .mi:focus { background: var(--hover); }
.callout { border: 1px solid var(--border2); border-left: 3px solid var(--err); background: var(--panel2); border-radius: 6px; padding: 8px 12px; margin: 0 0 8px; color: var(--fg); width: 100%; }
.empty { color: var(--faint); padding: 24px 12px; text-align: center; }
.spin { display: inline-block; width: .8em; height: .8em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: s .8s linear infinite; vertical-align: -1px; }
@keyframes s { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } }
.progress { height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; margin: 8px 0; } .progress i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s; }
.prog.done { border-color: var(--free); } .prog.done .progress i { background: var(--free); }
.prog p { margin: 2px 0; }

/* ---- search */
.bigsearch { display: flex; gap: 8px; max-width: 720px; background: var(--panel2); border: 1px solid var(--border2); border-radius: 8px; padding: 5px; }
.bigsearch:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.bigsearch input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font-size: 16px; padding: 0 8px; height: 34px; }
.bigsearch .btn { height: 34px; padding: 0 16px; }
.results { margin: 16px 0 20px; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 0 0 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
/* between the status filters and the kind filters: a line across on phones, an upright line beside them on wide screens */
.chipsep { flex: none; align-self: stretch; width: 1px; margin: 4px 4px; background: var(--border2); }
.filter { flex: 1; min-width: 12rem; max-width: 420px; height: 30px; background: var(--bg); border: 1px solid var(--border2); border-radius: 6px; padding: 0 8px; }
.bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 8px; padding: 6px 10px; border: 1px solid var(--accent); background: var(--accent-soft); border-radius: 6px; }
.bulk .n { font-weight: 600; margin-right: 6px; }
.bulk.none { border-color: var(--border); background: var(--panel); }
.bulk.none .n { font-weight: 400; color: var(--faint); }
.bulk { min-height: 38px; }
.bulk .n { min-width: 7ch; font-variant-numeric: tabular-nums; }
.bulk .bhint { color: var(--faint); font-size: 12px; margin-right: auto; }
.bulk:not(.none) .bhint { visibility: hidden; }
/* progress numbers change many times a second: a fixed box with fixed-width digits keeps the button beside it still */
.progline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#progmsg { display: inline-block; min-width: 34ch; font-variant-numeric: tabular-nums; }
.count { font-variant-numeric: tabular-nums; }
/* one fixed line: the numbers change all the time, the layout below must not */
.seg .cnt { display: inline-block; margin-left: 2px; color: var(--faint); font-variant-numeric: tabular-nums; font-size: 11.5px; }
.seg .cnt::before { content: ""; }
.countline { height: 20px; margin: 0 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list { list-style: none; margin: 0; padding: 0; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; min-height: calc(var(--row) + 10px); padding: 4px 12px; border-top: 1px solid var(--border); }
.list li:first-child { border-top: 0; }
.list li:hover { background: var(--hover); }
.list li:focus { outline: none; }
.list li.hl { background: var(--active); box-shadow: inset 2px 0 0 var(--accent); }
.list li.exact { background: var(--accent-soft); }
.list li.empty { display: block; }
.sel { width: 14px; height: 14px; margin: 0; accent-color: var(--accent); }
.name { min-width: 0; overflow-wrap: anywhere; }
.name b { font-weight: 600; }
.name .tld { color: var(--accent); font-weight: 600; white-space: nowrap; }
.name small { color: var(--faint); font-size: 11.5px; margin-left: 8px; }
.side { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.pill { display: inline-block; font-style: normal; font-size: 11.5px; font-weight: 500; padding: 1px 8px; border-radius: 10px; white-space: nowrap; }
.pill.wait { color: var(--muted); background: var(--taken-bg); }
.pill.free { color: var(--free); background: var(--free-bg); }
.pill.maybe { color: var(--maybe); background: var(--maybe-bg); }
.pill.taken { color: var(--taken); background: var(--taken-bg); }
.pill.closed { color: var(--closed); background: var(--closed-bg); }
.pill.reserved { color: var(--closed); background: transparent; box-shadow: inset 0 0 0 1px var(--closed); }
.pill.err { color: var(--err); background: var(--closed-bg); }
.act { font-size: 12px; background: none; border: 0; color: var(--accent); cursor: pointer; padding: 2px 4px; border-radius: 4px; }
.act:hover { background: var(--hover); }
.star { background: none; border: 0; color: var(--faint); font-size: 15px; line-height: 1; cursor: pointer; padding: 2px 4px; border-radius: 4px; }
.star:hover { color: var(--fg); background: var(--hover); }
.star[aria-pressed="true"] { color: var(--warn); }
.detail { grid-column: 2 / -1; font-size: 12.5px; color: var(--muted); padding: 2px 0 8px; }
.detail p { margin: 4px 0; }
.detail dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 14px; margin: 6px 0; border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; background: var(--panel2); }
.detail dt { color: var(--muted); } .detail dd { margin: 0; color: var(--fg); overflow-wrap: anywhere; font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
.detail a { margin-right: 12px; }
.reg { display: inline-flex; align-items: center; height: 24px; margin: 0 10px 4px 0; padding: 0 10px; border-radius: 6px; background: var(--accent); color: var(--accent-fg) !important; font-weight: 500; }
.reg:hover { text-decoration: none; filter: brightness(1.08); }
.dbg { font: 11.5px ui-monospace, Menlo, monospace; color: var(--faint); overflow-wrap: anywhere; }
.more-row { margin: 10px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.more-row .help { margin: 0; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--faint); font-size: 12px; margin-top: 10px; }
.legend .pill { margin-right: 4px; }
.news { margin-top: 20px; max-width: 720px; }
.newsbody > p { margin: 0 0 8px; color: var(--muted); }
.newsbody .row .input { flex: 1; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.cap-field { margin: 6px 0; }
cap-widget { display: inline-block; --cap-widget-width: 300px; --cap-background: var(--panel2); --cap-border-color: var(--border2); --cap-color: var(--fg); --cap-checkbox-background: var(--bg); --cap-checkbox-border: 1px solid var(--border2); --cap-border-radius: 6px; }
.wl-status.ok { color: var(--ok); } .wl-status.err { color: var(--err); }
.how { margin-top: 16px; }

/* ---- landing: what it does, examples, saved names (until the first search) */
.intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin: 28px 0 8px; }
.intro .pane { margin: 0; }
.intro .pane > header .spacer { flex: 1; }
.intro .savedhome { grid-column: 1 / -1; }
.pane > ol.stepsl { margin: 0; padding: 12px 16px 12px 38px; }
.stepsl li { margin: 0 0 8px; color: var(--muted); }
.stepsl li b { color: var(--fg); font-weight: 600; }
.intro .list { border: 0; border-radius: 0; background: none; box-shadow: none; }
.exlist li, #savedmini li { grid-template-columns: minmax(0, 1fr) auto; cursor: pointer; }
.exlist li small, #savedmini li small { display: block; margin-left: 0; }
html.classic .intro { margin-top: 2.5rem; gap: 16px; }
html.classic #hint { margin-bottom: .5rem; }

/* ---- saved */
.ltools { justify-content: flex-start; }
.ltools .sep { width: 1px; height: 20px; background: var(--border2); margin: 0 4px; }
.addf label { display: block; color: var(--muted); font-size: 12px; margin-bottom: 6px; }

/* ---- settings */
.settings .tabpane { max-width: 860px; }
.tagbox { border: 1px solid var(--border2); border-radius: 6px; background: var(--panel2); padding: 6px; margin-top: 8px; }
.tagchips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.tagchips li { display: inline-flex; align-items: center; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 0 2px 0 8px; height: 24px; font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
.tagchips li button { border: 0; background: none; color: var(--faint); cursor: pointer; padding: 0 5px; font-size: 14px; line-height: 1; }
.tagchips li button:hover { color: var(--err); }
.tagin { position: relative; margin-top: 6px; }
.tagin input { width: 100%; border: 0; border-top: 1px solid var(--border); background: transparent; padding: 6px 2px 2px; outline: none; }
.sugg { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; list-style: none; margin: 4px 0 0; padding: 4px; background: var(--panel2); border: 1px solid var(--border2); border-radius: 8px; box-shadow: 0 12px 32px rgba(0,0,0,.35); max-height: 18rem; overflow: auto; }
.sugg li { display: flex; justify-content: space-between; gap: 10px; height: 30px; align-items: center; padding: 0 10px; border-radius: 6px; cursor: pointer; }
.sugg li span { font-family: ui-monospace, Menlo, monospace; }
.sugg li small { color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sugg li[aria-selected="true"] { background: var(--active); }
.sugg li.off { cursor: default; opacity: .7; }
.pickmode { margin-bottom: 4px; }
#pkf { margin: 8px 0; }
.pkg { border: 1px solid var(--border); border-radius: 8px; background: var(--panel); margin: 6px 0; }
.pkg > summary { cursor: pointer; padding: 0 12px; min-height: 38px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-weight: 500; list-style: none; }
.pkg > summary::-webkit-details-marker { display: none; }
.pkg > summary::before { content: "›"; color: var(--faint); display: inline-block; width: 10px; transition: transform .1s; }
.pkg[open] > summary::before { transform: rotate(90deg); }
.pkg > summary .count { font-weight: 400; }
.pkg > summary .btn:first-of-type { margin-left: auto; }
.pkg .body { padding: 4px 12px 10px; display: flex; flex-wrap: wrap; gap: 2px 14px; border-top: 1px solid var(--border); }
.pkg .body label { display: inline-flex; align-items: center; gap: 5px; min-width: 7.5rem; height: 24px; font-family: ui-monospace, Menlo, monospace; font-size: 12px; cursor: pointer; }
.pkg .body label input { accent-color: var(--accent); }
.pkg .body .cc { width: 100%; display: flex; flex-wrap: wrap; gap: 0 14px; align-items: center; padding: 3px 0; border-top: 1px solid var(--border); }
.pkg .body .cc b { min-width: 11rem; font-weight: 400; font-size: 12px; color: var(--muted); }
.pkg.private .body span { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--faint); min-width: 7.5rem; }
.gnote { width: 100%; color: var(--faint); font-size: 11.5px; margin: 6px 0; }
.sres label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 30px; }
.sres label input { accent-color: var(--accent); }
.filebtn { position: relative; overflow: hidden; }
.filebtn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* ---- static pages (how it works, sitemap) */
.prose { max-width: 760px; }
.prose h2 { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); margin: 24px 0 8px; }
.prose p, .prose li { max-width: 75ch; }
.prose li { margin: 4px 0; }
.prose table { border-collapse: collapse; width: 100%; border: 1px solid var(--border); }
.prose th, .prose td { text-align: left; padding: 6px 10px; border-top: 1px solid var(--border); vertical-align: top; }
.prose th { color: var(--muted); font-weight: 500; background: var(--panel2); border-top: 0; }
.sitemap { list-style: none; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); }
.sitemap li { padding: 8px 12px; border-top: 1px solid var(--border); } .sitemap li:first-child { border-top: 0; }
.sitemap span { display: block; color: var(--muted); font-size: 12px; }

/* ---- dialog */
.helpbox { width: min(520px, 92vw); background: var(--panel2); color: var(--fg); border: 1px solid var(--border2); border-radius: 10px; padding: 16px 20px; }
.helpbox::backdrop { background: rgba(0,0,0,.55); }
.helpbox h2 { margin: 0 0 8px; font-size: 15px; }
.helpbox .r { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-top: 1px solid var(--border); }
.helpbox .r:first-of-type { border-top: 0; }

/* ---- phones: the sidebar slides in from the left */
@media (max-width: 760px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: fixed; inset: 0 auto 0 0; width: 280px; z-index: 40; transform: translateX(-100%); transition: transform .15s; }
  .app.nav-open .sidebar { transform: none; box-shadow: 0 0 0 100vmax rgba(0,0,0,.5); }
  .navbtn { display: inline-flex; }
  .topbar { padding: 0 8px; gap: 4px; }
  .view { padding: 14px; }
  .tbx [data-keys] { display: none; }
  .tsearch { width: auto; flex: 0 1 150px; }
  .bulk .bhint { display: none; }
  #progmsg { min-width: 0; width: 100%; }
  .status { padding: 2px 10px; }
  .status .ft-bar a:nth-of-type(2), .status .ft-bar .linkbtn { display: none; }
  .bigsearch { flex-direction: column; }
  .bigsearch input { flex: none; }
  .chipsep { flex-basis: 100%; width: auto; height: 1px; margin: 2px 0; }
  .list li { padding: 4px 8px; }
  .name small { display: block; margin-left: 0; }
  .detail { grid-column: 1 / -1; }
  #slist li { grid-template-columns: auto minmax(0, 1fr); }
  #slist li .side { grid-column: 2; justify-content: flex-start; flex-wrap: wrap; }
  .ltools .sep { display: none; }
  .srow { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .intro { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .sidebar { transition: none; } }
input[type=search]::-webkit-search-cancel-button { filter: grayscale(1); opacity: .5; cursor: pointer; }

/* ======================================================================================================
   Classic (the default look): the same page without the sidebar. A header with the brand and four links, the big
   centred search, larger type, round chips and cards, and the disclaimer pinned to the bottom of the window.
   Dev mode (html.dev) is everything above. .c-only / .d-only show a piece in one mode only.
   ====================================================================================================== */
html.dev .c-only, html.classic .d-only { display: none !important; }
html.classic { --fs: 15px; --row: 34px; }
html.classic body { height: auto; }
html.classic .app { display: block; height: auto; }
html.classic .sidebar, html.classic .navbtn { display: none; }
html.classic .main { display: block; min-height: 100vh; }
html.classic .topbar { max-width: 1040px; margin: 0 auto; height: auto; padding: 14px 16px; border-bottom: 0; gap: 14px; }
html.classic .cbrand { display: flex; align-items: center; gap: .55rem; color: var(--fg); font-weight: 600; font-size: 1.05rem; letter-spacing: -.01em; }
html.classic .cbrand:hover { text-decoration: none; }
html.classic .cbrand b { color: var(--accent); font-weight: 700; }
html.classic .cbrand img { border-radius: 7px; }
html.classic .cnav { display: flex; align-items: center; gap: 12px; }
html.classic .cnav .cpill { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--panel2); color: var(--fg); white-space: nowrap; }
html.classic .cnav .cpill:hover { text-decoration: none; border-color: var(--border2); }
html.classic .cnav .cpill[aria-current="page"] { border-color: var(--accent); }
html.classic .cnav .ctext { color: var(--muted); }
html.classic .cnav .ctext:hover, html.classic .cnav .ctext[aria-current] { color: var(--fg); text-decoration: none; }
html.classic .themebtn { border: 1px solid var(--border); border-radius: 999px; width: 34px; height: 34px; justify-content: center; padding: 0; color: var(--fg); }
html.classic .tbx [data-keys] { display: none; }   /* classic keeps Export in the header; shortcuts are in the footer */
html.classic .view { overflow: visible; max-width: 1040px; margin: 0 auto; padding: 0 16px calc(var(--foot, 6rem) + 24px); }
html.classic .view > section { max-width: none; }
/* search page: the centred hero of the first version */
html.classic .v-search > h1.title { text-align: center; font-size: clamp(2rem, 5.5vw, 3.2rem); line-height: 1.1; letter-spacing: -.03em; margin: 2.2rem 0 .75rem; font-weight: 700; }
html.classic .v-search > .desc { text-align: center; font-size: 1.12rem; margin: 0 auto 1.6rem; max-width: 38rem; }
html.classic .bigsearch { margin: 0 auto; max-width: 640px; border-radius: 14px; padding: 6px; border-color: var(--border); box-shadow: 0 1px 2px rgba(20,20,30,.06), 0 8px 24px rgba(20,20,30,.06); }
html.classic .bigsearch input { font-size: 1.15rem; height: 44px; }
html.classic .bigsearch .btn { height: 44px; padding: 0 22px; border-radius: 10px; font-size: 1rem; font-weight: 600; }
html.classic #hint { text-align: center; margin: .9rem auto 0; font-size: .9rem; color: var(--muted); max-width: 38rem; }
html.classic .results { margin-top: 2rem; }
html.classic .filter { max-width: none; height: 36px; border-radius: 8px; }
html.classic .seg { border: 0; gap: .4rem; overflow: visible; }
html.classic .seg button, html.classic .seg button:last-child { border: 1px solid var(--border); border-radius: 999px; height: 32px; padding: 0 14px; background: var(--panel2); color: var(--fg); }
html.classic .seg button[aria-pressed="true"], html.classic .seg button[aria-selected="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); box-shadow: none; }
html.classic .seg button[aria-pressed="true"] .cnt { color: inherit; opacity: .75; }
html.classic .seg .c-free[aria-pressed="true"] { background: var(--free); border-color: var(--free); color: var(--panel2); }
html.classic .seg .c-maybe[aria-pressed="true"] { background: var(--maybe); border-color: var(--maybe); color: var(--panel2); }
html.classic .seg .c-closed[aria-pressed="true"], html.classic .seg .c-reserved[aria-pressed="true"] { background: var(--closed); border-color: var(--closed); color: var(--panel2); }
html.classic .list, html.classic .pane, html.classic .card, html.classic .pkg { border-radius: 14px; box-shadow: 0 1px 2px rgba(20,20,30,.05), 0 8px 24px rgba(20,20,30,.05); background: var(--panel2); }
html.classic .list li { padding: 10px 16px; }
html.classic .list li:hover { background: transparent; }
html.classic .list li.hl { background: var(--accent-soft); }
html.classic .name { font-size: 1.05rem; }
html.classic .name small { font-size: .82rem; }
html.classic .pill { font-size: .8rem; font-weight: 600; padding: 2px 10px; border-radius: 999px; }
html.classic .act { font-size: .88rem; text-decoration: underline; }
html.classic .star { font-size: 1.2rem; }
html.classic .bulk, html.classic .bulk.none { border-radius: 10px; }
html.classic .btn { border-radius: 8px; }
html.classic .news { margin: 2.5rem auto 1rem; max-width: none; }
html.classic .intro .pane > header, html.classic .news > header { font-size: 1.1rem; font-weight: 600; color: var(--fg); height: auto; padding: 14px 16px 0; border-bottom: 0; }
html.classic .newsbody { padding: 10px 16px 16px; }
html.classic .how { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 1.5rem 0 2rem; }
html.classic .how .card { padding: 16px 18px; }
html.classic .how .card b { font-size: 1rem; margin-bottom: 4px; }
html.classic .how .card span { font-size: .92rem; }
html.classic h1.title { font-size: 1.8rem; letter-spacing: -.02em; margin-top: 1rem; }
/* the disclaimer, pinned to the bottom like the first version */
html.classic .status { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 6px 16px; font-size: .8rem; background: color-mix(in srgb, var(--panel2) 94%, transparent); backdrop-filter: blur(8px); }
html.classic .status .ft-line { max-width: 1008px; margin: 0 auto; width: 100%; }
html.classic .status .ft-bar { border-top: 0; }
html.classic { --foot: 4.5rem; }
@media (max-width: 760px) {
  html.classic .topbar { padding: 10px 14px; gap: 8px; }
  html.classic .cbrand span { font-size: .95rem; }
  html.classic .cnav { gap: 8px; }
  html.classic .tbx { display: none; }
  html.classic .cnav .ctext, html.classic .cnav .lbl { display: none; }   /* How it works and Dev mode: footer and Settings */
  html.classic .cnav .cpill { padding: 0 10px; }
  html.classic .view { padding: 0 14px 9rem; }
  html.classic .v-search > h1.title { margin-top: 1.2rem; }
  html.classic .how { grid-template-columns: 1fr; }
  html.classic .bigsearch { flex-direction: column; }
  html.classic .status .ft-disc .ft-t { font-size: .78rem; }
  /* phones: the search field and the button are the same height, with the same text size */
  html.classic .bigsearch input { flex: none; font-size: 1.05rem; height: 48px; padding: 0 12px; }   /* flex: 1 squeezed its height when stacked */
  html.classic .bigsearch .btn { height: 48px; font-size: 1.05rem; justify-content: center; text-align: center; }
  /* phones: the disclaimer is one line; "More" opens it */
  .status .ft-disc { align-items: center; }
  .status .ft-more { display: inline; }
  .status:not(.open) .ft-disc .ft-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.classic .status { padding: 4px 12px; }
}
.nav .navmode { display: flex; align-items: center; gap: 8px; width: 100%; height: var(--row); padding: 0 8px; border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; text-align: left; }
.nav .navmode:hover { background: var(--hover); color: var(--fg); }

/* keyboard shortcut hints are hidden on phones and touch screens; the keys still work with a keyboard attached */
@media (max-width: 760px), (hover: none) and (pointer: coarse) { .kbd-only { display: none !important; } }
#scountry { max-width: 300px; min-width: 0; height: 34px; padding: 0 8px; background: var(--panel2); border: 1px solid var(--border2); border-radius: 6px; }

/* account bar on the Saved view (signed out: one line with Sign in; signed in: email, sync state, sign out) */
.acct { margin: 0 0 14px; max-width: 90ch; }
.acct p { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); color: var(--muted); }
.acct p b { color: var(--fg); font-weight: 600; word-break: break-all; }
.acct .acct-in { font-weight: 600; }
.acct .acct-msg { margin-top: 8px; background: var(--accent-soft); color: var(--fg); border-color: transparent; }
.acct .acct-msg.bad { background: none; border-color: var(--border2); }

/* Settings > Account */
.aclist { margin: 0 0 8px; max-width: 760px; }
.aclist li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.aclist li .grow { flex: 1; min-width: 0; }
.aclist li small { color: var(--muted); display: block; }
.acwf { display: flex; gap: 8px; max-width: 520px; margin: 0 0 6px; }
.acwf .input { flex: 1; min-width: 0; }
.acnew { max-width: 760px; } .acnew code { word-break: break-all; }
.acpre { background: var(--panel2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; overflow-x: auto; font-size: 12px; max-width: 760px; white-space: pre; }

/* /pricing/ */
.plangrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 8px 0 24px; }
.plan h2 { margin: 0 0 4px; font-size: 16px; }
.plan .price { font-size: 26px; font-weight: 700; margin: 0 0 10px; }
.plan .price small { font-size: 13px; font-weight: 400; color: var(--muted); }
.plan ul { margin: 0 0 8px; padding-left: 18px; }
.plan.pro { border-color: var(--accent); }

@media (max-width: 600px) { .tabbar { flex-wrap: wrap; overflow: visible; } }