/* Bookmark Ace components. Colours and metrics come from the skin file. */

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--chrome);
  color: var(--text);
  font: var(--font-size)/1.35 var(--font-family);
}
h1, h2, h3 { font-size: var(--title-size); font-weight: bold; margin: 0 0 6px; }
p { margin: 0 0 6px; }
a { color: var(--link); text-decoration: none; }
a:visited { color: var(--link-visited); }
a:hover { text-decoration: underline; }
/* Links in running text need more than colour to stand out (WCAG 1.4.1). */
p a:not(.btn), label a { text-decoration: underline; }
:focus { outline: none; }
:focus-visible { outline: 1px dotted var(--focus); outline-offset: 1px; }
[hidden] { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Sign-up honeypot (contract §20): off-screen for people, still filled in by robots */
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.muted { color: var(--text-muted); }
.loading { color: var(--text-muted); padding: 2px 4px; }

/* Bevels */
.raised {
  border: 1px solid;
  border-color: var(--edge-light) var(--edge-darker) var(--edge-darker) var(--edge-light);
}
.sunken {
  border: 1px solid;
  border-color: var(--edge-dark) var(--edge-light) var(--edge-light) var(--edge-dark);
}

/* Window chrome */
.window {
  display: flex; flex-direction: column;
  background: var(--chrome);
  border: 1px solid;
  border-color: var(--edge-light) var(--edge-darker) var(--edge-darker) var(--edge-light);
  min-width: 0;
}
.titlebar {
  font-size: var(--title-size); font-weight: bold;
  padding: 3px 6px;
  border-bottom: 1px solid var(--edge-dark);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.window-body { display: flex; flex-direction: column; gap: 4px; padding: 4px; flex: 1; min-height: 0; }
.window-body > .pane { flex: 1; }

/* Toolbar and buttons */
.toolbar { display: flex; flex-wrap: wrap; gap: 3px; }
.btn {
  font: inherit; color: var(--text);
  background: var(--chrome);
  min-height: 22px; padding: 2px 9px;
  border: 1px solid;
  border-color: var(--edge-light) var(--edge-darker) var(--edge-darker) var(--edge-light);
  border-radius: 0;
  cursor: default;
}
.btn:active:not(:disabled), .btn[aria-pressed="true"] {
  border-color: var(--edge-darker) var(--edge-light) var(--edge-light) var(--edge-darker);
  padding: 3px 8px 1px 10px;
}
.btn:disabled { color: var(--text-disabled); }
.btn:focus-visible { outline-offset: -4px; }
.btn-small { min-height: 16px; min-width: 16px; padding: 0 3px; line-height: 12px; }
.buttons { display: flex; justify-content: flex-end; gap: 6px; margin-top: 8px; }
.buttons .btn { min-width: 72px; }

/* Form controls */
.field { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
.field-inline { flex-direction: row; align-items: center; gap: 4px; }
.input, .select, .textarea {
  font: inherit; color: var(--text);
  background: var(--content);
  width: 100%; min-width: 0;
  border: 1px solid;
  border-color: var(--edge-darker) var(--edge-dark) var(--edge-dark) var(--edge-darker);
  border-radius: 0;
}
.input { height: 20px; padding: 1px 3px; }
.select { height: 20px; padding: 0 1px; }
.textarea { padding: 2px 3px; resize: vertical; min-height: 48px; }
.input::placeholder, .textarea::placeholder { color: var(--text-muted); opacity: 1; }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline-offset: 0; }
.check {
  appearance: none; -webkit-appearance: none;
  flex: none; width: 13px; height: 13px; margin: 0;
  background: var(--content) center no-repeat;
  border: 1px solid;
  border-color: var(--edge-darker) var(--edge-dark) var(--edge-dark) var(--edge-darker);
  border-radius: 0;
}
.check:checked { background-image: var(--icon-check); }

/* Content panes */
.pane {
  background: var(--content);
  border: 1px solid;
  border-color: var(--edge-dark) var(--edge-light) var(--edge-light) var(--edge-dark);
  overflow: auto; min-height: 0;
}

/* Tree */
.tree, .tree [role="group"] { list-style: none; margin: 0; padding: 0; }
.tree { padding: 2px 2px 2px 3px; }
.tree [role="group"] { padding-left: var(--indent); }
.tree-item { position: relative; }
.tree-item:focus-visible { outline: none; }
.tree-item::before {
  content: ""; position: absolute; left: 7px; top: 0; bottom: 0;
  border-left: 1px dotted var(--tree-line);
}
.tree-item:last-child::before { bottom: auto; height: calc(var(--row-h) / 2); }
.tree > .tree-item:first-child::before { top: calc(var(--row-h) / 2); }
.tree > .tree-item:first-child:last-child::before { display: none; }
.tree-item::after {
  content: ""; position: absolute; left: 8px; width: 8px; top: calc(var(--row-h) / 2);
  border-top: 1px dotted var(--tree-line);
}
.tree-row {
  position: relative; z-index: 1;
  display: flex; align-items: center;
  height: var(--row-h); padding-left: 16px;
  white-space: nowrap;
}
.tree-toggle {
  position: absolute; left: 3px; top: calc(var(--row-h) / 2 - 4px);
  width: 9px; height: 9px;
  background: var(--content);
  border: 1px solid var(--edge-dark);
}
.tree-toggle::before, .tree-toggle::after { content: ""; position: absolute; background: var(--text); }
.tree-toggle::before { left: 1px; right: 1px; top: 3px; height: 1px; }
.tree-toggle::after { top: 1px; bottom: 1px; left: 3px; width: 1px; }
[aria-expanded="true"] > .tree-row > .tree-toggle::after { display: none; }
.tree-icon {
  flex: none; width: 16px; height: 16px; margin-right: 3px;
  background: var(--icon-page) center no-repeat;
}
.is-folder > .tree-row > .tree-icon { background-image: var(--icon-folder); }
.is-folder[aria-expanded="true"] > .tree-row > .tree-icon { background-image: var(--icon-folder-open); }
.is-tag > .tree-row > .tree-icon, .is-tag[aria-expanded="true"] > .tree-row > .tree-icon { background-image: var(--icon-tag); }
.tree-label {
  padding: 0 2px; line-height: calc(var(--row-h) - 4px);
  color: var(--text);
  overflow: hidden; text-overflow: ellipsis;
}
a.tree-label:visited { color: var(--text); }
.tree > .tree-item > .tree-row > .tree-label { font-weight: bold; }
.tree-count { margin-left: 3px; }
[aria-selected="true"] > .tree-row > .tree-label { background: var(--selected-bg); color: var(--selected-text); }
.tree-item:focus-visible > .tree-row > .tree-label { outline: 1px dotted var(--focus); outline-offset: 0; }
.is-dead > .tree-row > .tree-label { text-decoration: line-through; }
.tree-public {
  flex: none; width: 11px; height: 11px; margin-left: 3px;
  background: var(--icon-public) center no-repeat;
}
[data-density="comfortable"] { --row-h: var(--row-h-comfortable); }
[data-density="dense"] { --row-h: var(--row-h-dense); }

/* Context menu */
.menu {
  position: absolute; z-index: 10;
  min-width: 120px; margin: 0; padding: 2px; list-style: none;
  background: var(--chrome);
  border: 1px solid;
  border-color: var(--edge-light) var(--edge-darker) var(--edge-darker) var(--edge-light);
}
.menu-item {
  display: block; width: 100%;
  padding: 3px 18px 3px 16px;
  font: inherit; color: var(--text); text-align: left; white-space: nowrap;
  background: none; border: 0; border-radius: 0;
}
.menu-item:hover, .menu-item:focus-visible { background: var(--selected-bg); color: var(--selected-text); outline: none; }
.menu-item[aria-disabled="true"] { color: var(--text-disabled); }
.menu-separator { margin: 3px 1px; border-top: 1px solid var(--edge-dark); border-bottom: 1px solid var(--edge-light); }

/* Dialog */
.dialog {
  background: var(--chrome);
  border: 1px solid;
  border-color: var(--edge-light) var(--edge-darker) var(--edge-darker) var(--edge-light);
  width: 100%; max-width: 340px;
}
.dialog-title {
  display: flex; align-items: center; justify-content: space-between; gap: 4px;
  margin: 1px; padding: 2px 2px 2px 4px;
  background: var(--title-active-bg); color: var(--title-active-text);
  font-size: var(--font-size); font-weight: bold;
}
.dialog-title .btn:focus-visible { outline-color: var(--focus); }
.dialog-body { padding: 8px; }

/* Status bar */
.statusbar { display: flex; gap: 2px; padding: 2px 0 0; }
.statusbar-field {
  flex: 1; min-width: 0; padding: 1px 4px;
  border: 1px solid;
  border-color: var(--edge-dark) var(--edge-light) var(--edge-light) var(--edge-dark);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* List table */
.list-wrap { overflow-x: auto; min-width: 0; max-width: 100%; }
.list { width: 100%; border-collapse: collapse; background: var(--content); }
.list th {
  font-weight: normal; text-align: left; white-space: nowrap;
  padding: 1px 4px; background: var(--chrome);
  border: 1px solid;
  border-color: var(--edge-light) var(--edge-darker) var(--edge-darker) var(--edge-light);
}
.list td { height: var(--row-h); padding: 0 4px; white-space: nowrap; }
.list .num { text-align: right; }
.list-title { display: flex; align-items: center; }
.list .is-selected td { background: var(--selected-bg); color: var(--selected-text); }
.list .is-selected a { color: var(--selected-text); }

/* Notices */
.notice { padding: 4px 6px; margin-bottom: 4px; background: var(--notice-bg); border: 1px solid var(--notice-edge); }
.notice-error { background: var(--error-bg); color: var(--error-text); border-color: var(--error-text); }
.notice-offline { background: var(--chrome); border-style: dotted; }

/* Preview page layout */
.page { padding: 12px 16px; max-width: 980px; }
.page-section { margin: 0 0 16px; }
.demo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; align-items: start; }
.demo-sidebar { position: relative; max-width: 300px; height: 420px; }
.demo-sidebar .menu { right: 8px; top: 196px; }
.demo-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.page-section > * + h2 { margin-top: 12px; }
@media (min-width: 600px) { .demo-sidebar .menu { right: -48px; top: 178px; } }

/* Auth pages */
.auth-page { display: flex; justify-content: center; padding: 32px 16px; }
.auth-window { width: 100%; max-width: 360px; }
.auth-window .titlebar { margin: 0; }
.auth-body { padding: 8px; }
.auth-links { margin-top: 8px; }
.auth-secondary { margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--edge-dark); }
.qr img { display: block; background: var(--content); padding: 8px; border: 1px solid var(--edge-dark); max-width: 100%; height: auto; }
code, .setup-key { font-family: "Courier New", monospace; font-size: 12px; overflow-wrap: anywhere; }
.recovery-codes { columns: 2; margin: 0 0 6px; padding: 6px 6px 6px 24px; background: var(--content); border: 1px solid var(--edge-dark); }
a.btn { display: inline-block; text-decoration: none; color: var(--text); }

/* Native dialogs (tree actions) */
dialog.dialog { padding: 0; color: var(--text); }
dialog.dialog::backdrop { background: transparent; }
.dialog-title h2 { margin: 0; font-size: var(--font-size); }
.dialog-info { margin-top: 6px; }

/* Tag field (contract §19): one sunken box holding chips and the text entry; a classic listbox below,
   in the flow (it pushes the rest of the dialog down rather than covering its buttons, D-115) */
.tag-field { position: relative; }
.tag-entry {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px;
  min-height: 20px; padding: 1px 2px;
  background: var(--content);
  border: 1px solid;
  border-color: var(--edge-darker) var(--edge-dark) var(--edge-dark) var(--edge-darker);
}
.tag-entry > .input { flex: 1 1 64px; width: auto; min-width: 64px; height: 16px; padding: 0 1px; border: 0; }
.tag-chips { display: flex; flex-wrap: wrap; gap: 2px; margin: 0; padding: 0; list-style: none; min-width: 0; }
.tag-chips[hidden] { display: none; }
.tag-chip {
  display: inline-flex; align-items: center; max-width: 100%; height: 16px; padding: 0 0 0 3px;
  background: var(--chrome); color: var(--text);
  border: 1px solid;
  border-color: var(--edge-light) var(--edge-dark) var(--edge-dark) var(--edge-light);
  white-space: nowrap;
}
.tag-chip-name { overflow: hidden; text-overflow: ellipsis; }
.tag-chip-remove {
  font: inherit; line-height: 12px; color: var(--text);
  width: 14px; height: 14px; margin-left: 1px; padding: 0;
  background: transparent; border: 0; border-radius: 0; cursor: pointer;
}
.tag-list {
  margin-top: 1px;
  max-height: calc(9 * 18px + 2px); overflow-y: auto;
  margin: 0; padding: 0; list-style: none;
  background: var(--content); border: 1px solid var(--edge-dark);
}
.tag-option { height: 18px; line-height: 18px; padding: 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; }
.tag-option[aria-selected="true"] { background: var(--selected-bg); color: var(--selected-text); }

/* Drag and drop targets */
.tree-row.drop-into .tree-label { outline: 1px dotted var(--focus); background: var(--content); }
.tree-row.drop-before { border-top: 2px dotted var(--focus); }
.tree-row.drop-after { border-bottom: 2px dotted var(--focus); }
.tree-status { min-height: 1.4em; }

/* /sidebar: one window filling the panel (Vivaldi 260px, phone 360px) */
.sidebar-page { display: flex; height: 100vh; height: 100dvh; }
.sidebar-window { flex: 1; min-width: 0; }
.sidebar-window .titlebar { margin: 0; }
.sidebar-window .toolbar .btn { padding: 2px 6px; }

/* Main app (/): tree pane, splitter, view pane; stacked on phones */
.app-page { display: flex; height: 100vh; height: 100dvh; }
.app-window { flex: 1; min-width: 0; }
.app-window .titlebar { margin: 0; }
.toolbar-gap { width: 8px; }
.toolbar-note { align-self: center; padding: 0 4px; color: var(--text-muted); white-space: nowrap; }
.toolbar-note:empty { display: none; }
.app-panes { display: flex; flex: 1; min-height: 0; gap: 0; }
.app-tree-pane { flex: none; width: 280px; overflow: auto; }
.app-panes[data-side="right"] { flex-direction: row-reverse; }
.app-splitter { flex: none; width: 6px; cursor: col-resize; background: var(--chrome); }
.app-splitter:focus-visible { outline: 1px dotted var(--focus); outline-offset: -1px; }
.app-view { flex: 1; min-width: 0; padding: 4px 6px; }
.app-view-title { margin: 0 0 6px; }
.list-title.is-folder .tree-icon { background-image: var(--icon-folder); }
.link-button { font: inherit; color: var(--link); background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.link-button:hover { text-decoration: underline; }
.row-actions { white-space: nowrap; }
.headline { padding: 4px 0; border-bottom: 1px dotted var(--tree-line); }
.headline p { margin: 2px 0 0; }
.news { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px 16px; }
.news h3 { font-size: var(--font-size); margin: 4px 0; }
.news ol { margin: 0; padding-left: 20px; }
.statusbar-form { margin: 0; }
@media (max-width: 700px) {
  .app-panes, .app-panes[data-side="right"] { flex-direction: column; }
  .app-tree-pane { width: auto !important; max-height: 45vh; }
  .app-splitter { display: none; }
  .app-view { overflow: visible; }
}

/* Settings */
.settings-page { max-width: 640px; }
.settings-section { margin-bottom: 12px; }
.settings-section .titlebar { margin: 0; }
.token-form { margin-top: 8px; }
.settings-section .list td { white-space: normal; overflow-wrap: anywhere; }
.dead-list td:nth-child(3) { white-space: normal; overflow-wrap: anywhere; min-width: 10em; }
.inline-form { display: inline; }
.import-counts { width: auto; margin-bottom: 8px; }
.import-counts th { white-space: normal; }

/* Duplicates view (BA-307) */
.dup-group { margin: 0 0 10px; padding: 4px 6px 6px; border: 1px solid var(--edge-dark); min-width: 0; }
.dup-group legend { padding: 0 4px; overflow-wrap: anywhere; }
.dup-group .buttons { margin-top: 4px; }

/* Public folder page (BA-308) */
.public-page .window { max-width: 800px; margin: 0 auto; }
.public-list { list-style: none; margin: 0; padding-left: 16px; }
.public-page .window-body > .public-list { padding-left: 0; }
.public-list li { margin: 2px 0; overflow-wrap: anywhere; }
.public-folder > summary { cursor: pointer; font-weight: bold; }
.public-link .public-description { display: block; }
.public-downloads { margin-top: 12px; }

/* BA-408: front page and /extensions for visitors */
.front-page { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.front-page .titlebar { margin: 0; }
.front-page .window-body { display: block; padding: 8px 10px; }
.front-page h1 { font-size: 18px; margin: 4px 0 2px; }
.front-tagline { font-weight: bold; margin-top: 0; }
.front-actions { justify-content: flex-start; margin: 10px 0; }
.btn-default { outline: 1px solid var(--focus); outline-offset: 0; }
.front-example { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.front-example .sidebar-window { width: 100%; max-width: 300px; }
.front-example figcaption { color: var(--text-muted); }
.front-page dt { font-weight: bold; margin-top: 8px; }
.front-page dd { margin: 2px 0 0; }
.front-footer { color: var(--text-muted); text-align: center; }
/* Help "?" links (contract §21) */
.help-q { display: inline-block; width: 14px; height: 14px; line-height: 12px; margin-left: 4px; text-align: center; font-size: 11px; font-weight: bold; text-decoration: underline; color: var(--link); background: var(--content); border: 1px solid var(--edge-dark); vertical-align: middle; }
.dialog-title .help-q { margin-left: auto; }
/* Welcome window (contract §21) */
.welcome { max-width: 460px; }
.welcome-steps { margin: 6px 0; padding-left: 4px; list-style: none; }
.welcome-steps li { margin: 4px 0; }
.welcome a { text-decoration: underline; }
.welcome-tick { display: inline-block; width: 13px; height: 13px; margin-right: 6px; line-height: 11px; text-align: center; vertical-align: middle; background: var(--content); border: 1px solid; border-color: var(--edge-darker) var(--edge-dark) var(--edge-dark) var(--edge-darker); }