/* Theme palettes. The base is light; dark is applied either by the OS
   preference (theme = auto, the default) or forced by the theme toggle,
   which puts `light`/`dark` on <html> (see web/src/theme.rs). Keep the two
   dark blocks in sync. */
:root {
  color-scheme: light;
  --bg: #f6f7f9;
  --panel: #ffffff;
  --text: #1a1d21;
  --muted: #6b7280;
  --accent: #3b82f6;
  --accent-hover: #2563eb;
  --accent-border: #1d4ed8;
  --danger: #ef4444;
  --danger-border: #dc2626;
  --border: #e5e7eb;
  --topbar-h: 48px;
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='square'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

:root.dark {
  color-scheme: dark;
  --bg: #0f1115;
  --panel: #171a20;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --accent: #60a5fa;
  --accent-hover: #3b82f6;
  --accent-border: #79b5fc;
  --danger: #f87171;
  --danger-border: #fa8b8b;
  --border: #2a2f3a;
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2.5' stroke-linecap='square'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    color-scheme: dark;
    --bg: #0f1115;
    --panel: #171a20;
    --text: #e5e7eb;
    --muted: #9ca3af;
    --accent: #60a5fa;
    --accent-hover: #3b82f6;
    --accent-border: #79b5fc;
    --danger: #f87171;
    --danger-border: #fa8b8b;
    --border: #2a2f3a;
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2.5' stroke-linecap='square'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  }
}

* {
  box-sizing: border-box;
  /* The design language is sharp: everything stays square. */
  border-radius: 0;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
}

/* Class rules set `display`, which would beat the UA rule for `hidden`. */
[hidden] {
  display: none !important;
}

.muted {
  color: var(--muted);
}

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 24px;
}

.center-screen {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  text-align: center;
}

/* Inside the app frame the topbar already took part of the viewport, so a
   full 100vh here overflows and shows a scrollbar with nothing to scroll to.
   Login and setup render .center-screen as the whole page, where the 100vh
   above is right. */
.content > .center-screen {
  min-height: 0;
  flex: 1;
}

.auth-card {
  width: 100%;
  max-width: 380px;
}

/* The auth forms have a single action, so its button spans the form. */
.auth-card .btn-primary {
  width: 100%;
}

.auth-card h1 {
  margin: 0 0 8px;
  font-size: 22px;
}

.auth-logo {
  width: 44px;
  height: 44px;
  margin-bottom: 12px;
}

.auth-card p {
  margin: 0 0 20px;
  font-size: 13px;
}

.field {
  display: block;
  margin-bottom: 14px;
}

.field span {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 4px;
}

input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
}

input:focus,
textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  resize: vertical;
}

/* Square checkboxes — native controls are rounded, the theme is sharp. */
input[type="checkbox"] {
  appearance: none;
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  flex: none;
  border: 1px solid var(--border);
  background: var(--panel);
  cursor: pointer;
  position: relative;
  vertical-align: -3px;
}

input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent-border);
}

input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

button,
:where(a.btn) {
  font: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  padding: 9px 14px;
}

/* Browser link colors are unreadable on the dark panels. */
a {
  color: var(--accent);
}

a.btn {
  color: var(--text);
  text-decoration: none;
}

button:hover,
:where(a.btn):hover {
  border-color: var(--muted);
}

button:disabled {
  opacity: 0.6;
  cursor: default;
}

/* No width here on purpose. Full width belongs to the few places that ask
   for it (.auth-card, .unlock-btn), not to every dialog's action row. */
.btn-primary {
  background: var(--accent);
  /* One step away from the fill, per theme (see palette above), so the
     button's edge reads the same as on neutral buttons. */
  border-color: var(--accent-border);
  color: #fff;
  font-weight: 600;
}

.btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-border);
}

.error {
  color: var(--danger);
  font-size: 13px;
  min-height: 18px;
  margin: 0 0 10px;
}

/* layout (signed-in): full-width topbar, then sidebar + content below */

.layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.topbar {
  flex: none;
  position: sticky;
  top: 0;
  z-index: 130;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.icon-btn.nav-toggle {
  display: none;
}

.body-row {
  flex: 1;
  display: flex;
  align-items: stretch;
}

/* ---- sidebar ---- */

.sidebar {
  flex: none;
  width: 224px;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border-right: 1px solid var(--border);
  position: sticky;
  top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  white-space: nowrap;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.brand:hover {
  opacity: 0.8;
}

.brand-name {
  overflow: hidden;
  text-overflow: ellipsis;
}

.logo {
  width: 26px;
  height: 26px;
  flex: none;
  display: block;
}

.nav {
  flex: 1;
  overflow-y: auto;
  padding: 14px 8px 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sidebar-user {
  padding: 0 10px 2px;
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  padding: 0 10px 6px;
}

/* Section header with a right-aligned action (the Files refresh). */
.nav-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 4px;
}

.nav-section-head .nav-section-label {
  flex: 1;
  padding-bottom: 2px;
}

.nav-section-refresh {
  color: var(--muted);
  background: none;
  border-color: transparent;
  padding: 3px 5px;
}

.nav-section-refresh:hover {
  color: var(--text);
  border-color: var(--border);
}

.nav-tab {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  margin-bottom: 2px;
  padding: 8px 10px;
  text-align: left;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 14px;
}

.nav-tab:hover {
  background: var(--bg);
  color: var(--text);
}

.nav-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.ic-tab {
  width: 18px;
  height: 18px;
  flex: none;
}

.nav-tab.active .icon {
  color: #fff;
}

.nav-tab-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-tab-note {
  flex: none;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--muted);
}

.nav-tab.active .nav-tab-note {
  background: rgb(255 255 255 / 18%);
  border-color: rgb(255 255 255 / 30%);
  color: #fff;
}

.nav-backdrop {
  display: none;
}

/* Sidebar footer: theme toggle, log out, and the project version.
   Sits at the bottom of the sidebar, below the manage section. */
.sidebar-footer {
  flex: none;
  border-top: 1px solid var(--border);
  padding: 8px;
}

.sidebar-footer .nav-tab {
  margin-bottom: 0;
}

.sidebar-action.logout {
  color: var(--danger);
}

.sidebar-action.logout:hover {
  color: var(--danger);
}

.sidebar-version {
  margin-top: 8px;
  padding: 0 10px;
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.badge {
  font-size: 11px;
  padding: 2px 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--muted);
}

.content {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 20px;
}

/* While a file is open the app is a fixed-height frame: the file view
 * (editor, image, …) scrolls inside, the page itself never grows. */
.layout.file-mode {
  height: 100vh;
  overflow: hidden;
}

.layout.file-mode .body-row {
  min-height: 0;
}

/* Narrow screens: the sidebar becomes an off-canvas drawer that only
   covers the content, below the (always visible) topbar. */
@media (max-width: 860px) {
  .sidebar {
    position: fixed;
    top: var(--topbar-h);
    bottom: 0;
    left: 0;
    right: auto;
    height: auto;
    z-index: 120;
    transform: translateX(-100%);
    transition: transform 0.15s ease;
  }

  .sidebar.open {
    transform: translateX(0);
    box-shadow: 0 0 48px rgb(0 0 0 / 35%);
  }

  .nav-backdrop {
    display: block;
    position: fixed;
    top: var(--topbar-h);
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 110;
    background: rgb(0 0 0 / 40%);
  }

  .icon-btn.nav-toggle {
    display: inline-flex;
  }

  .content {
    padding: 14px;
  }
}

/* ---- file browser ---- */

.browser {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.icon {
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
}

.ic-folder {
  color: var(--accent);
}

.ic-muted {
  color: var(--muted);
}

.crumbs {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 0 12px;
  font-size: 15px;
  flex-wrap: wrap;
}

.crumb {
  cursor: pointer;
  color: var(--muted);
  padding: 3px 6px;
  overflow-wrap: anywhere;
}

.crumb:hover {
  color: var(--text);
  background: var(--panel);
}

.crumb.current {
  color: var(--text);
  font-weight: 600;
  cursor: default;
  background: none;
}

.crumb-sep {
  color: var(--muted);
  padding: 0 1px;
}

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding-bottom: 12px;
}

/* Wider screens fit the sort controls by shrinking the label. Wrapping
   there would move them to a second line. */
@media (max-width: 360px) {
  .toolbar {
    flex-wrap: wrap;
  }
}

.toolbar-right {
  display: flex;
  gap: 6px;
}

/* Sort control in the toolbar. The select mirrors the app's other selects:
   no native chrome, own arrow. */
.sort-label {
  font-size: 13px;
  color: var(--muted);
  align-self: center;
  margin-right: 2px;
}

.sort-select {
  appearance: none;
  width: auto;
  padding: 7px 32px 7px 10px;
  border: 1px solid var(--border);
  background-color: var(--panel);
  background-image: var(--select-arrow);
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 12px 12px;
  color: var(--text);
  font: inherit;
  font-size: 13px;
}

.sort-select:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

.icon-btn {
  padding: 7px 9px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
}

.icon-btn:hover {
  border-color: var(--muted);
}

.icon-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.ic-btn {
  width: 18px;
  height: 18px;
  color: inherit;
}

.entries-area {
  position: relative;
  flex: 1;
  min-height: 240px;
}

.entries-area.drop-target {
  outline: 2px dashed var(--accent);
  outline-offset: -2px;
}

.drop-hint {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 500;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--panel) 60%);
  /* The hint must not steal the drag from the area beneath it. */
  pointer-events: none;
}

.center-note {
  text-align: center;
  padding: 48px 0;
}

.error-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--danger);
  font-size: 14px;
}

/* root tiles were replaced by the sidebar's folder tabs */

/* grid view */

.entries-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

.tile {
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 16px 10px 12px;
  text-align: center;
  cursor: pointer;
  user-select: none;
}

/* Touch: a long press opens the context menu (see util::LongPress). The
   iOS callout and text selection would otherwise appear first. Vertical
   panning stays with the browser. */
.entries-area,
.tile,
.row {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}

.tile:hover {
  border-color: var(--muted);
}

.tile-icon {
  width: 42px;
  height: 42px;
  margin: 0 auto 10px;
  display: block;
}

/* Holds the icon with the thumbnail layered over it. The icon is the
   fallback when no thumbnail loads. */
.tile-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.tile-media .tile-icon {
  margin: 0;
}

/* One tile height per folder: the taller media area applies to every tile,
   not only the ones that end up with a thumbnail. */
.has-thumbs .tile-media {
  height: 92px;
}

/* No background: the element must stay transparent until the bytes arrive,
   or it hides the icon underneath as a dark rectangle. */
.tile-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tile-name {
  font-size: 13px;
  line-height: 1.3;
  word-break: break-word;
  /* Uniform tile height: the name area always takes two lines and
     never overflows (the full name is in the title tooltip). */
  min-height: calc(2 * 1.3em);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* list view */

.entries-list {
  background: var(--panel);
  border: 1px solid var(--border);
  overflow: hidden;
}

.row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 90px 150px;
  gap: 12px;
  align-items: center;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  font-size: 14px;
  user-select: none;
}

.row:last-child {
  border-bottom: none;
}

.row:hover {
  background: var(--bg);
}

.row-icon {
  width: 20px;
  height: 20px;
}

.row-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row-size,
.row-date {
  font-size: 13px;
  text-align: right;
}

@media (max-width: 640px) {
  .row {
    grid-template-columns: 28px minmax(0, 1fr) 90px;
  }

  .row-date {
    display: none;
  }
}

/* context menu */

.ctx-menu {
  position: fixed;
  z-index: 100;
  min-width: 190px;
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 5px;
  box-shadow: 0 8px 24px rgb(0 0 0 / 18%);
}

.ctx-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  font-size: 14px;
  cursor: pointer;
}

.ic-ctx {
  width: 18px;
  height: 18px;
  flex: none;
}

.ctx-item:hover {
  background: var(--bg);
}

.ctx-item.disabled {
  opacity: 0.45;
  cursor: default;
}

.ctx-item.disabled:hover {
  background: none;
}

/* toolbar selection actions (top right) */

.sel-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
}

.sel-actions .icon-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.sel-actions .icon-btn:disabled:hover {
  border-color: var(--border);
  color: var(--muted);
}

.sel-more-menu {
  position: fixed;
  inset: auto;
  margin: 0;
  min-width: 190px;
  color: inherit;
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 5px;
  box-shadow: 0 8px 24px rgb(0 0 0 / 18%);
}

/* selection actions in the top bar */

.topbar .sel-actions {
  min-height: 0;
}

.topbar .sel-actions .icon-btn {
  padding: 5px 7px;
}

/* selection highlight in the grid and list */

.tile.selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--panel));
}

.row.selected {
  background: color-mix(in srgb, var(--accent) 12%, var(--panel));
  box-shadow: inset 2px 0 0 var(--accent);
}

/* settings tabs (profile / server) */

.settings-tabs {
  display: flex;
  gap: 8px;
}

.settings-tab-btn {
  padding: 7px 14px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.settings-tab-btn:hover {
  border-color: var(--muted);
  color: var(--text);
}

.settings-tab-btn.active {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
}

/* toast */

.toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 200;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 11px 16px;
  font-size: 14px;
  box-shadow: 0 8px 24px rgb(0 0 0 / 18%);
  max-width: 320px;
}

.toast-error {
  background: color-mix(in srgb, var(--danger) 12%, var(--panel));
  border-color: var(--danger-border);
  color: var(--danger);
}


/* ---- modals ---- */

/* The shell is a native <dialog> opened with showModal(): the browser puts
   it in the top layer and paints ::backdrop, so there is no overlay element
   to position and no z-index to keep in order. The reset below strips the
   UA's own box so the .modal card inside is the only thing that shows. */
.modal-host {
  padding: 0;
  border: none;
  background: none;
  /* The UA caps an open dialog's size; the card sets its own. */
  max-width: none;
  max-height: none;
  /* Centre it in the inset-0 box, as the old flex overlay did. */
  margin: auto;
  overflow: visible;
}

.modal-host::backdrop {
  background: rgb(0 0 0 / 45%);
}

.modal {
  width: 440px;
  max-width: calc(100vw - 32px);
  padding: 20px;
  background: var(--panel);
  border: 1px solid var(--border);
  box-shadow: 0 12px 44px rgb(0 0 0 / 35%);
}

.modal.picker {
  width: 640px;
}

.modal-title {
  margin: 0 0 12px;
  font-size: 16px;
}

.modal-label {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 6px;
}

.modal .input {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 16px;
}

.dialog-error {
  color: var(--danger);
  font-size: 13px;
}

.dialog-error {
  margin-top: 8px;
}

.modal-message {
  white-space: pre-line;
  font-size: 14px;
  margin: 0 0 8px;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

.btn-danger {
  background: var(--danger);
  /* A visible border (one step away from the fill, per theme) so the
     button's edge reads the same as on neutral buttons. */
  border-color: var(--danger-border);
  color: #fff;
}

.btn-danger:hover {
  background: color-mix(in srgb, var(--danger) 85%, black);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.conflict-list {
  max-height: 200px;
  overflow-y: auto;
  margin: 8px 0;
  padding-left: 20px;
  font-size: 13px;
}

/* Folder picker: roots on the left, the selected root's tree on the right. */

.picker-body {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  border: 1px solid var(--border);
  height: 320px;
}

.picker-roots {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  border-right: 1px solid var(--border);
  background: var(--bg);
  min-height: 0;
  overflow-y: auto;
}

.picker-root {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 7px 8px;
  border: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  min-width: 0;
}

.picker-root:hover {
  background: var(--panel);
}

.picker-root.active {
  background: var(--accent);
  color: #fff;
}

.picker-root.ro .picker-root-name {
  opacity: 0.6;
  text-decoration: line-through dotted;
}

.picker-root-ic {
  width: 16px;
  height: 16px;
  flex: none;
}

.picker-root-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.picker-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* Grid items default to min-height:auto, which would let a long
     folder list stretch the dialog instead of scrolling. */
  min-height: 0;
}

.picker-crumbs {
  padding: 8px 10px;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
  flex: none;
}

.picker-entries {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.picker-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 14px;
  user-select: none;
}

.picker-row:hover {
  background: var(--bg);
}

.picker-row .row-name {
  flex: 1;
}

/* A right-pointing chevron drawn with borders (no icon needed). */
.picker-chev {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(-45deg);
  flex: none;
}

.picker-empty {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
}

.picker-empty-ic {
  width: 32px;
  height: 32px;
  opacity: 0.5;
}

.picker-root.active .picker-root-ic {
  color: #fff;
}

@media (max-width: 640px) {
  .picker-body {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    height: 380px;
  }

  .picker-roots {
    flex-direction: row;
    flex-wrap: wrap;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
}

/* ---------------------------------------------------------------------------
 * Full-page file view (preview / editor / "no preview"). The top bar carries
 * the title + actions; the content area below is edge to edge.
 * ------------------------------------------------------------------------- */
.content.file-open {
  padding: 0;
  overflow: hidden;
}

/* The browser stays mounted (state, fetch callback) but hidden. */
.content.file-open .browser {
  display: none;
}

.file-view {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.file-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.file-title-icon {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--muted);
}

.file-title-name {
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

.file-close,
.file-download {
  border: none;
  background: transparent;
  color: var(--muted);
  padding: 6px 8px;
}

.file-close:hover,
.file-download:hover {
  color: var(--text);
  background: var(--bg);
}
.preview-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  background: var(--bg);
}
.preview-img {
  max-width: 100%;
  max-height: 100%;
  display: block;
  margin: auto;
}
.preview-pdf {
  width: 100%;
  height: 100%;
  border: none;
  background: #fff;
}
.preview-video {
  width: 100%;
  max-height: 100%;
  background: #000;
}
.preview-audio {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 24px;
}
.preview-audio audio {
  width: 100%;
  max-width: 480px;
}

/* CodeMirror (text editor) */
.cm-container {
  height: 100%;
}
.cm-container .cm-editor {
  height: 100%;
}
/* Load/save failure: dims the editor and shows the message in a card
 * (the top-bar Save button stays reachable to retry). */
.cm-error {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgb(0 0 0 / 45%);
}

.cm-error-card {
  position: relative;
  max-width: 440px;
  min-width: 200px;
  background: var(--panel);
  border: 1px solid var(--border);
  box-shadow: 0 12px 44px rgb(0 0 0 / 35%);
}

.cm-error-close {
  position: absolute;
  top: 7px;
  right: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--muted);
  padding: 3px;
}

.cm-error-close:hover {
  color: var(--text);
  background: var(--bg);
}

.cm-error-close .ic-btn {
  width: 16px;
  height: 16px;
}

.cm-error-text {
  padding: 16px 40px 16px 20px;
  font-size: 14px;
  text-align: center;
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------------
 * Text editor (full page; title/save/close live in the top bar)
 * ------------------------------------------------------------------------- */
.file-editor {
  flex: 1;
  min-height: 0;
  display: flex;
  position: relative;
  background: var(--bg);
}
.file-editor .cm-container {
  width: 100%;
  height: 100%;
}
/* "No preview" fallback (binaries, archives). */
.file-nopreview {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.file-nopreview .btn-primary {
  margin-top: 14px;
}
/* ---------------------------------------------------------------------------
 * Download format dialog
 * ------------------------------------------------------------------------- */
.dl-formats {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}
.dl-fmt {
  justify-content: flex-start;
}

/* ---------------------------------------------------------------------------
 * Item info dialog
 * ------------------------------------------------------------------------- */
.info-list {
  margin: 8px 0 16px;
  display: grid;
  grid-template-columns: 90px 1fr;
  row-gap: 8px;
  column-gap: 12px;
}
.info-list dt {
  color: var(--muted);
}
.info-list dd {
  margin: 0;
  word-break: break-word;
}

/* ---------------------------------------------------------------------------
   Shares (milestone 6)
   --------------------------------------------------------------------------- */

.share-modal {
  width: 480px;
}

.share-link-row {
  display: flex;
  gap: 8px;
  margin: 12px 0;
}

.share-link-input {
  flex: 1;
  font-family: ui-monospace, monospace;
  font-size: 12.5px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  min-width: 0;
}

.share-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 14px;
  font-size: 14px;
}

.share-check input {
  width: 16px;
  height: 16px;
}

.share-expiry-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
}

.share-expiry-row label {
  font-size: 13px;
  color: var(--muted);
}

.share-expiry-row select,
.share-expiry-row input {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font: inherit;
}

/* Optional password on the create-share form. Laid out like the expiry
   row above it, so the form reads as one column of labelled fields. */
.share-pw-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
}

.share-pw-row label {
  font-size: 13px;
  color: var(--muted);
}

/* Expiry and password sit in one column, so their inputs line up. */
.share-expiry-row label,
.share-pw-row label {
  min-width: 64px;
}

.share-pw-row input {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font: inherit;
}

.share-pw-hint {
  font-size: 12px;
  margin: 0 0 10px;
}

/* The password gate of a protected share: the whole page is this card. */
.unlock-card {
  width: 320px;
  max-width: calc(100vw - 32px);
  padding: 20px;
  text-align: left;
}

.unlock-card h2 {
  margin: 0 0 6px;
  font-size: 18px;
}

.unlock-card input {
  margin-top: 14px;
}

.unlock-btn {
  width: 100%;
  margin-top: 12px;
}

.share-expiry-note {
  margin: 4px 0 0;
  font-size: 12.5px;
}

.btn-sm {
  padding: 5px 10px;
  font-size: 12.5px;
}

.icon-btn-sm {
  padding: 4px 6px;
}

/* "Your shares" manage view */

.shares-view {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}

.view-header {
  margin-bottom: 16px;
}

.view-header .admin-section-title {
  margin-bottom: 0;
}

.view-hint {
  margin: 4px 0 0;
  font-size: 13px;
  max-width: 64ch;
}

.share-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.share-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  background: var(--panel);
}

.share-item-main {
  min-width: 0;
}

.share-item-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ic-row {
  width: 18px;
  height: 18px;
  flex: none;
}

.share-item-meta {
  font-size: 12px;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.share-item-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* Phones: the name gets the full width, the buttons move below it. */
@media (max-width: 640px) {
  .share-item {
    flex-wrap: wrap;
  }

  .share-item-main,
  .share-item-actions {
    flex: 1 1 100%;
    min-width: 0;
  }

  .share-item-actions {
    flex-wrap: wrap;
  }

  .shares-view .share-item-actions select {
    flex: 1 1 auto;
    min-width: 0;
  }

  .share-item-actions .btn {
    white-space: nowrap;
  }
}

/* A loan's mode select sits beside small buttons: same height. No
   percentage cap: the actions box sizes to its content, so a cap would
   leave a gap after the select. */
.shares-view .share-item-actions select {
  max-width: none;
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 12.5px;
}

/* Sections of the share management view: the viewer's own links and, for an
   admin, one section per account. Native <details>/<summary>. */

.share-groups {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.share-group {
  border: 1px solid var(--border);
  background: var(--panel);
}

.share-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  /* The caret below stands in for the disclosure triangle. */
  list-style: none;
}

.share-group-head::-webkit-details-marker {
  display: none;
}

.share-group-head:hover {
  background: color-mix(in srgb, var(--accent) 6%, var(--panel));
}

.share-group-head:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.share-caret {
  width: 16px;
  height: 16px;
  flex: none;
  transition: rotate 0.15s ease;
}

.share-group[open] .share-caret {
  rotate: 90deg;
}

.share-group-count {
  font-size: 12px;
  font-weight: 400;
}

/* A live link whose account cannot sign in any more. */
.share-group-warn {
  font-size: 12px;
  font-weight: 400;
  color: var(--danger);
}

.share-group-del {
  margin-left: auto;
}

/* Rows inside a section read as one block: the border moves from each row to
   the section. */
.share-group .share-list {
  gap: 0;
  border-top: 1px solid var(--border);
}

.share-group .share-item {
  border: 0;
  border-top: 1px solid var(--border);
}

.share-group .share-item:first-child {
  border-top: 0;
}

/* ------------------------------------------------------------------ */
/* Admin (milestone 7)                                                */
/* ------------------------------------------------------------------ */

.admin-view {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}

.admin-section-title {
  margin: 0 0 14px;
  font-size: 15px;
}

.users-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.users-header .admin-section-title {
  margin-bottom: 0;
}

.users-header .btn-primary {
  width: auto;
}

.user-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.user-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
}

.user-row-main {
  min-width: 0;
}

.user-row-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 14px;
  flex-wrap: wrap;
}

.ic-admin {
  width: 16px;
  height: 16px;
  flex: none;
}

.user-row-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.badge-off {
  background: color-mix(in srgb, var(--danger) 15%, var(--panel));
  border-color: var(--danger);
  color: var(--danger);
}

.setting-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--border);
  cursor: pointer;
}

.setting-row input {
  margin-left: auto;
}

.setting-label {
  display: block;
  font-weight: 600;
  font-size: 14px;
}

.setting-desc {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

/* Setting row whose control is a select, pushed to the right. */
.setting-row-select {
  cursor: default;
}

.setting-row-select > span {
  flex: 1;
}

.setting-row-select select {
  appearance: none;
  margin-left: auto;
  padding: 10px 42px 10px 12px;
  border: 1px solid var(--border);
  background-color: var(--panel);
  background-image: var(--select-arrow);
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px 14px;
  color: var(--text);
  font: inherit;
  max-width: 190px;
}

/* User create/edit form */

.user-form {
  width: 520px;
}

.field-input {
  width: 100%;
  box-sizing: border-box;
}

/* Search exclusions: a bordered block matching the setting row above it. */
.excludes-field {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--border);
}

.excludes-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.exclude-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}

.exclude-path {
  flex: 1;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.exclude-remove {
  flex: none;
  padding: 4px 6px;
}

.exclude-add {
  align-self: flex-start;
}

.excludes-empty {
  font-size: 13px;
  margin: 0;
}

.field-hint {
  font-size: 12px;
  margin: -2px 0 8px;
}

.check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  margin-bottom: 12px;
  cursor: pointer;
}

.form-error {
  color: var(--danger);
  font-size: 13px;
  margin: 4px 0 8px;
}

.roots-editor {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.root-draft {
  display: flex;
  align-items: center;
  gap: 8px;
}

.root-draft-path {
  flex: 1;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.root-draft-mode {
  width: auto;
  padding: 6px 8px;
}

.root-add {
  align-self: flex-start;
  margin-top: 4px;
}

/* ------------------------------------------------------------------ */
/* Empty state + keyboard focus (milestone 8)                         */
/* ------------------------------------------------------------------ */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 64px 20px;
  text-align: center;
}

.empty-glyph {
  width: 52px;
  height: 52px;
}

.empty-state h3 {
  margin: 0;
  font-size: 16px;
}

/* Visible keyboard focus on selectable file/folder entries. The ring is
   inset (negative offset) so the scroll container never clips it. */
.tile:focus-visible,
.row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* ------------------------------------------------------------------ */
/* Search view (#/search)                                              */
/* ------------------------------------------------------------------ */

.search-view {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Query bar ------------------------------------------------------ */

.query-bar {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.query-input {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 0 10px;
  min-width: 0;
}

.query-input .qi-icon {
  width: 18px;
  height: 18px;
  color: var(--muted);
  flex: none;
}

.query-input input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  height: 38px;
  padding: 0;
}

.query-input input::placeholder {
  color: var(--muted);
}

/* Segmented Name / Content / Both control */

.seg {
  display: flex;
  border: 1px solid var(--border);
  background: var(--panel);
}

.seg button {
  appearance: none;
  border: none;
  border-right: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  padding: 0 14px;
  cursor: pointer;
}

.seg button:last-child {
  border-right: none;
}

.seg button:hover {
  background: var(--bg);
}

.seg button.on {
  background: var(--accent);
  color: #fff;
}

/* Start folder --------------------------------------------------- */

/* The folder a search starts in; opens the folder picker. */
.folder-pick {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 260px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  padding: 0 10px;
  cursor: pointer;
}

.folder-pick:hover {
  border-color: var(--muted);
}

.folder-pick .fp-icon {
  width: 16px;
  height: 16px;
  color: var(--muted);
  flex: none;
}

.folder-pick .fp-path {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Run / stop ------------------------------------------------------- */

.btn-run {
  border: 1px solid var(--accent-border);
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 0 18px;
  cursor: pointer;
}

.btn-run:hover {
  background: var(--accent-hover);
}

.btn-stop {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--danger-border);
  background: var(--danger);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 0 14px;
  cursor: pointer;
}

.btn-stop:hover {
  opacity: 0.9;
}

.btn-stop .ic-stop {
  width: 14px;
  height: 14px;
}

/* One row needs more than a phone width. The query and run button stay
   first, the scope and the folder get their own rows. */
@media (max-width: 640px) {
  .query-bar {
    flex-wrap: wrap;
  }

  .seg,
  .folder-pick {
    order: 1;
    flex: 1 1 100%;
    min-width: 0;
    max-width: none;
    min-height: 38px;
  }

  .seg button {
    flex: 1;
  }
}

/* Status line ------------------------------------------------------ */

.status-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
}

.status-line .dot {
  width: 8px;
  height: 8px;
  background: var(--accent);
  animation: search-pulse 1s ease-in-out infinite;
}

@keyframes search-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

.status-line .skip {
  opacity: 0.75;
}

/* Group labels ----------------------------------------------------- */

.group-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Result group: a flex item of `.search-view` that re-establishes the
   column layout for its label/list/more-row children. */
.result-group {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.group-label .gl-icon {
  width: 15px;
  height: 15px;
}

.group-label .n {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

.group-label .grow {
  flex: 1;
}

.collapse-all {
  appearance: none;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0;
  padding: 3px 10px;
  cursor: pointer;
}

.collapse-all:hover {
  background: var(--bg);
  color: var(--text);
}

/* Name-result rows --------------------------------------------------- */

.srow {
  display: grid;
  /* icon | name+dir | size | goto */
  grid-template-columns: 28px minmax(0, 1fr) 90px 30px;
  gap: 12px;
  align-items: center;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  font-size: 14px;
  user-select: none;
}

.srow:last-child {
  border-bottom: none;
}

.srow:hover {
  background: var(--bg);
}

.srow-icon {
  width: 20px;
  height: 20px;
}

.srow-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.srow-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Highlighted query hits (plain fragments render as bare spans). */
mark.hl-hit {
  background: color-mix(in srgb, var(--accent) 25%, transparent);
  color: inherit;
}

/* The directory-path line (the name line lives inside .srow-name). */
.srow-dir {
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.srow-dir mark.hl-hit {
  color: inherit;
}

.ssize {
  font-size: 13px;
  color: var(--muted);
  text-align: right;
}

/* Paging footer: position in the results on the left, the action on the
   right. Separated from the list by its own border so the button never reads
   as another result row. */
.page-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--muted);
}

.page-foot .pf-count {
  font-variant-numeric: tabular-nums;
}

.page-foot .pf-more,
.pf-btn {
  appearance: none;
  padding: 5px 12px;
  border: 1px solid var(--border);
  background: var(--panel);
  font: inherit;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
}

.page-foot .pf-more:hover,
.pf-btn:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}

/* Up to 13 buttons: unwrapped they overflow a phone screen. */
.pf-pages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-right: auto;
}

.pf-btn {
  min-width: 30px;
  padding: 5px 8px;
  font-variant-numeric: tabular-nums;
}

.pf-btn.current {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.pf-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.pf-goto {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.pf-goto input {
  width: 72px;
  padding: 5px 8px;
}

/* An arrow-key page turn is loading. Fixed at the top, so it also shows over
   the preview. The delay keeps fast turns from flashing. */
.page-busy {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  overflow: hidden;
  z-index: 250;
  pointer-events: none;
  animation: page-busy-in 0s 200ms both;
}

.page-busy::after {
  content: "";
  display: block;
  width: 30%;
  height: 100%;
  background: var(--accent);
  animation: upload-indeterminate 1.2s ease-in-out infinite;
}

body:has(.page-busy) {
  cursor: progress;
}

@keyframes page-busy-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Content matches ----------------------------------------------------- */

.match-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-top: none;
}

/* The first card is the one right after the group label; `:first-of-type`
   cannot be used because the label is an earlier `div` sibling. */
.group-label + .match-card {
  border-top: 1px solid var(--border);
}

/* The header opens the file; the matched lines below are text to read. */
.match-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  font-size: 14px;
  cursor: pointer;
}

.match-head:hover {
  background: var(--bg);
}

.match-head .mi {
  width: 18px;
  height: 18px;
  color: var(--muted);
  flex: none;
}

/* Takes the slack, so the count and the two buttons sit at the right edge. */
.mpath {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mpath b {
  font-weight: 600;
}

.mcount {
  flex: none;
  font-size: 12px;
  color: var(--muted);
}

/* "Show in folder", in both the name rows and the match-card headers. */
.goto-btn {
  appearance: none;
  flex: none;
  justify-self: end;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
}

.goto-btn:hover {
  border-color: var(--border);
}

.goto-btn .goto-ic {
  width: 16px;
  height: 16px;
  color: var(--muted);
}

.goto-btn:hover .goto-ic {
  color: var(--accent);
}

.chev {
  appearance: none;
  border: 1px solid var(--border);
  background: transparent;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: none;
}

.chev:hover {
  background: var(--bg);
}

.chev .chev-mark {
  display: block;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translate(-1px, -1px);
}

.chev .chev-mark.up {
  transform: rotate(-135deg) translate(-1px, -1px);
}

.match-lines {
  border-top: 1px solid var(--border);
  background: var(--bg);
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
}

/* Matched lines are text to read, not a control: the card header is what
   opens the file, so no pointer cursor and no hover here. */
.mline {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 12px;
  padding: 5px 14px;
  border-bottom: 1px solid var(--border);
  white-space: pre;
  user-select: text;
}

.mline:last-child {
  border-bottom: none;
}

.mline .ln {
  color: var(--muted);
  text-align: right;
  user-select: none;
}

.mline .tx {
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-empty {
  padding: 48px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}

/* ------------------------------------------------------------------ */
/* Uploads: overlay panel + log view                                   */
/* ------------------------------------------------------------------ */

.upload-panel {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 190;
  width: min(380px, calc(100vw - 40px));
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgb(0 0 0 / 18%);
  font-size: 13px;
}

/* The toast sits above the panel when both show. */
.upload-panel ~ .toast,
.toast:has(~ .upload-panel) {
  bottom: 80px;
}

.upload-panel-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}

.upload-panel.collapsed .upload-panel-head {
  border-bottom: none;
}

.upload-panel-title {
  font-weight: 600;
}

.upload-panel-summary {
  margin-left: auto;
  font-size: 12px;
}

.upload-panel-list {
  max-height: 50vh;
  overflow-y: auto;
}

.upload-job {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}

.upload-job:last-child {
  border-bottom: none;
}

.upload-job-head {
  display: flex;
  align-items: center;
  gap: 4px;
}

.upload-job-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

.upload-job-pct {
  font-variant-numeric: tabular-nums;
  margin-right: 4px;
}

.upload-bar {
  height: 4px;
  margin: 6px 0 4px;
  /* Clip the indeterminate block: it slides past both ends. */
  overflow: hidden;
  background: color-mix(in srgb, var(--accent) 15%, var(--panel));
}

.upload-bar-fill {
  height: 100%;
  background: var(--accent);
  transition: width 0.2s linear;
}

/* Preparing: nothing to measure yet, so a sliding block instead of a fill. */
.upload-bar.indeterminate .upload-bar-fill {
  width: 30% !important;
  animation: upload-indeterminate 1.2s ease-in-out infinite;
}

@keyframes upload-indeterminate {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(333%);
  }
}

.upload-job.failed .upload-bar-fill {
  background: var(--danger);
}

.upload-job.done .upload-bar-fill {
  background: var(--muted);
}

.upload-job-state {
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upload-job.failed .upload-job-state {
  color: var(--danger);
  white-space: normal;
}

.upload-conflict {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  padding: 8px;
  border: 1px solid var(--danger-border);
  background: color-mix(in srgb, var(--danger) 8%, var(--panel));
}

.upload-conflict-all {
  display: flex;
  /* The label wraps on a narrow dialog; keep the box on the first line. */
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 12px;
  cursor: pointer;
}

.upload-conflict-all input {
  flex: none;
  margin-top: 2px;
}

.modal .upload-conflict-all {
  margin: 8px 0 0;
  font-size: 13px;
}

.upload-conflict-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.upload-graph {
  margin-top: 8px;
  color: var(--accent);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--accent) 6%, var(--panel));
}

/* Peak label above the plot, so the line can never run through it. */
.upload-graph-max {
  display: block;
  text-align: right;
  padding: 2px 6px 0;
  font-size: 11px;
  line-height: 14px;
}

.upload-graph svg {
  display: block;
  width: 100%;
  height: 46px;
}

.upload-errors {
  margin: 6px 0 0;
  padding-left: 18px;
  font-size: 12px;
  color: var(--danger);
}

.upload-err-file {
  font-weight: 500;
}

/* Log view: the same rows, full width, roomier. */
.uploads-view .upload-log {
  border: 1px solid var(--border);
  background: var(--panel);
  font-size: 14px;
}

.uploads-view .upload-job {
  padding: 12px 14px;
}

.uploads-view .upload-graph svg {
  height: 76px;
}

/* Security settings tab: password, passkeys, sign-in requirement. */

.security-tab {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.security-tab h3 {
  margin: 10px 0 0;
}

/* Matches .excludes-field, so the three blocks of this tab read as one list. */
.security-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--border);
}

.security-form .field input {
  width: 100%;
  box-sizing: border-box;
}

.passkey-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 14px;
}

.passkey-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
}

.passkey-main {
  flex: 1;
  overflow: hidden;
}

.passkey-name {
  display: block;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The sign-in requirement's labels are whole phrases, so the shared 190px
   cap for setting selects would clip them. */
.security-tab .setting-row-select select {
  max-width: none;
  width: auto;
}

/* Separator between the password form and the passkey button. `.auth-card p`
   sets a bottom-only margin on every paragraph in the card, and wins on
   specificity, so both of these have to name the card too. */
.auth-card .login-or {
  margin: 16px 0 8px;
  font-size: 12px;
  color: var(--muted);
  text-transform: lowercase;
}

.auth-card .setting-desc {
  margin-top: 8px;
}

.auth-card .btn {
  width: 100%;
}

/* ------------------------------------------------------------------ */
/* Calendars and contacts                                             */
/* ------------------------------------------------------------------ */

.pim-view {
  display: flex;
  gap: 16px;
  flex: 1;
  min-height: 0;
  width: 100%;
}

.pim-side {
  flex: none;
  width: 260px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.pim-main {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--border);
  background: var(--panel);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.pim-side-head {
  display: flex;
  align-items: center;
  gap: 4px;
}

.pim-side-head .admin-section-title {
  flex: 1;
  margin: 0;
}

.pim-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  background: var(--panel);
}

.pim-group-label {
  padding: 10px 10px 4px;
  font-size: 12px;
  color: var(--muted);
  border-top: 1px solid var(--border);
}

.pim-row {
  display: flex;
  align-items: center;
  min-width: 0;
}

.pim-row:hover {
  background: var(--bg);
}

.pim-toggle {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.pim-swatch {
  display: inline-block;
  flex: none;
  width: 14px;
  height: 14px;
  background: var(--swatch);
  border: 2px solid var(--swatch);
}

/* A hidden collection keeps its color as an outline only. */
.pim-row-hidden .pim-swatch {
  background: transparent;
}

.pim-row-hidden .pim-row-name {
  color: var(--muted);
}

.pim-row-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 6px;
  padding: 8px 10px 8px 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

.pim-row-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pim-row-gear {
  flex: none;
  margin-right: 4px;
}

.pim-show-all {
  align-self: flex-start;
}

.pim-row-note {
  flex: none;
  max-width: 45%;
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pim-modal {
  width: 600px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}

.pim-modal-title {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow-wrap: anywhere;
}

.pim-note {
  margin: -6px 0 8px;
  font-size: 13px;
}

.pim-section {
  display: block;
  padding: 14px 0 0;
  margin-top: 14px;
  border-top: 1px solid var(--border);
}

.pim-section-title {
  margin: 0 0 8px;
  font-size: 14px;
}

.pim-hint {
  margin: 0 0 10px;
  font-size: 13px;
}

.pim-section-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.pim-section-actions.pim-left {
  justify-content: flex-start;
}

.pim-colors {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.pim-color {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 2px solid var(--panel);
  outline: 1px solid var(--border);
  background: var(--swatch);
  cursor: pointer;
}

.pim-color.selected {
  outline: 2px solid var(--text);
}

.pim-color-input {
  width: 34px;
  height: 30px;
  padding: 0 2px;
  cursor: pointer;
}

.pim-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}

.pim-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.pim-item-name {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pim-mode {
  flex: none;
  width: auto;
  max-width: 55%;
  padding: 6px 28px 6px 8px;
}

.pim-add {
  display: flex;
  gap: 8px;
  align-items: center;
}

.pim-add .field-input {
  flex: 1;
  min-width: 0;
}

.pim-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  min-width: 0;
}

.pim-link-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pim-link-url {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pim-link-meta {
  font-size: 12px;
}

.pim-link-actions {
  display: flex;
  flex: none;
  gap: 6px;
}

.pim-link-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}

.pim-inline {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--muted);
}

.pim-inline input,
.pim-inline select {
  width: auto;
  min-width: 140px;
}

.pim-hints,
.pim-sample {
  margin: 0 0 8px;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.5;
}

.pim-sample li {
  overflow-wrap: anywhere;
}

.admin-stack {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.rooms-hint {
  margin-bottom: 12px;
}

.room-address {
  font-size: 12px;
  margin-top: 2px;
  overflow-wrap: anywhere;
}

.feeds-header {
  margin-top: 28px;
}

/* Below this the month grid needs the width of the collection list. */
@media (max-width: 1180px) {
  .pim-view {
    flex-direction: column;
  }

  .pim-side {
    width: auto;
  }

  /* The events and contacts come first; the list of collections would
     fill a whole phone screen above them. */
  .pim-main {
    min-height: 240px;
    order: -1;
  }
}

@media (max-width: 640px) {
  .pim-link {
    flex-direction: column;
    align-items: stretch;
  }

  .pim-link-actions {
    flex-wrap: wrap;
  }

  .pim-add {
    flex-wrap: wrap;
  }

  .pim-add .pim-mode {
    max-width: 100%;
  }

  /* A lent row keeps name, mode and remove button on one line. */
  .pim-item .pim-mode {
    flex: 0 1 auto;
    min-width: 0;
  }
}

/* Mirrored chevron: the icon set has only the right-pointing one. */
.flip {
  transform: scaleX(-1);
}

/* Selects in the calendar and contacts views, their dialogs, the shares
   page, and any form field: the same height and colors as the inputs beside
   them, in both themes. */
.pim-modal select,
.pim-view select,
.shares-view select,
select.field-input {
  appearance: none;
  padding: 10px 34px 10px 12px;
  border: 1px solid var(--border);
  background-color: var(--bg);
  background-image: var(--select-arrow);
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 12px 12px;
  color: var(--text);
  font: inherit;
  font-size: 14px;
}

.pim-modal select:focus,
.pim-view select:focus,
.shares-view select:focus,
select.field-input:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

.pim-link-form .pim-inline input {
  padding: 10px 12px;
}

.pim-file-input {
  display: none;
}

/* ---- Calendar ---------------------------------------------------- */

.cal {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.cal-pad {
  padding: 12px 14px;
}

.cal-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}

.cal-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.cal-title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 17px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cal-views {
  display: flex;
}

.cal-view-btn {
  padding: 6px 12px;
  font-size: 13px;
  margin-left: -1px;
}

.cal-view-btn.active {
  background: var(--accent);
  border-color: var(--accent-border);
  color: #fff;
  position: relative;
  z-index: 1;
}

/* The buttons overlap by one pixel; the hovered one must draw on top, or its
   neighbor covers its right edge. */
.cal-view-btn:hover,
.cal-view-btn:focus-visible {
  position: relative;
  z-index: 2;
}

.cal-badge {
  min-width: 18px;
  padding: 0 5px;
  font-size: 11px;
  line-height: 18px;
  background: var(--danger);
  color: #fff;
  text-align: center;
}

.cal-truncated {
  margin: 0;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--danger);
  border-bottom: 1px solid var(--border);
}

.cal-head {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border-bottom: 1px solid var(--border);
}

.cal-head-day {
  padding: 6px 8px;
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cal-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: 26px repeat(var(--lines), 22px) 6px;
  border-bottom: 1px solid var(--border);
}

.cal-cell {
  grid-row: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px;
  min-width: 0;
  padding: 4px 6px;
  border: 0;
  border-right: 1px solid var(--border);
  background: none;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

.cal-cell:nth-child(7) {
  border-right: 0;
}

.cal-cell:hover {
  background: var(--bg);
}

.cal-cell.cal-out .cal-num {
  color: var(--muted);
}

.cal-cell.cal-sel {
  background: var(--bg);
  box-shadow: inset 0 0 0 2px var(--accent);
}

.cal-num {
  font-size: 13px;
  line-height: 18px;
  min-width: 20px;
  text-align: center;
}

.cal-today .cal-num {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}

/* Phone only: the colors of a day's events instead of their titles. */
.cal-dots {
  display: none;
  gap: 3px;
}

.cal-dot {
  display: inline-block;
  flex: none;
  width: 8px;
  height: 8px;
  background: var(--c, var(--accent));
}

.cal-item {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  min-width: 0;
  margin: 1px 2px;
  padding: 0 6px;
  border: 0;
  font-size: 12px;
  line-height: 20px;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
}

.cal-bar {
  background: var(--c);
  color: #fff;
  text-shadow: 0 0 2px rgb(0 0 0 / 40%);
}

.cal-bar.cal-cont-l {
  margin-left: 0;
}

.cal-bar.cal-cont-r {
  margin-right: 0;
}

.cal-chip {
  background: none;
  color: var(--text);
}

.cal-chip:hover {
  background: var(--bg);
}

.cal-time {
  flex: none;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.cal-item-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cal-cancelled .cal-item-title,
.cal-cancelled .cal-row-title,
.cal-detail-title.cal-cancelled {
  text-decoration: line-through;
}

.cal-more {
  position: relative;
  z-index: 1;
  justify-content: flex-start;
  margin: 1px 2px;
  padding: 0 6px;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 12px;
  line-height: 20px;
  white-space: nowrap;
  overflow: hidden;
  min-width: 0;
}

.cal-more:hover {
  color: var(--text);
  text-decoration: underline;
}

.cal-day {
  border-top: 1px solid var(--border);
}

.cal-day-title {
  margin: 0;
  padding: 12px 14px 6px;
  font-size: 14px;
}

.cal-day-today {
  color: var(--accent);
}

.cal-rows {
  display: flex;
  flex-direction: column;
  padding-bottom: 8px;
}

.cal-row {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 10px;
  padding: 7px 14px;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  min-width: 0;
}

.cal-row:hover {
  background: var(--bg);
}

.cal-row .cal-dot {
  align-self: center;
}

.cal-row-time {
  flex: none;
  width: 120px;
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.cal-row-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cal-row-title {
  font-size: 14px;
  overflow-wrap: anywhere;
}

.cal-row-meta {
  font-size: 12.5px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.cal-agenda-day + .cal-agenda-day {
  border-top: 1px solid var(--border);
}

.cal-inv {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}

.cal-inv-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.cal-inv-title {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.cal-inv-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cal-detail-title {
  overflow-wrap: anywhere;
}

.cal-flag {
  display: inline-block;
  margin: 0 0 12px;
  padding: 2px 8px;
  font-size: 12px;
  border: 1px solid var(--danger);
  color: var(--danger);
}

.cal-facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 8px 16px;
  margin: 0 0 16px;
  font-size: 14px;
}

.cal-facts dt {
  color: var(--muted);
}

.cal-facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.cal-pre {
  white-space: pre-wrap;
}

.cal-desc {
  margin-bottom: 16px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  background: var(--bg);
  font-size: 14px;
  overflow-wrap: anywhere;
  max-height: 40vh;
  overflow-y: auto;
}

.cal-attendees {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
}

.cal-attendees li {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.cal-att-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ps-badge {
  margin-left: auto;
  flex: none;
  padding: 1px 7px;
  font-size: 11.5px;
  border: 1px solid var(--border);
  color: var(--muted);
}

.ps-accepted {
  border-color: #16a34a;
  color: #16a34a;
}

.ps-declined {
  border-color: var(--danger);
  color: var(--danger);
}

.ps-tentative {
  border-color: #d97706;
  color: #d97706;
}

.cal-reply {
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

.cal-scope {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}

.cal-scope input[type="radio"] {
  width: auto;
  margin: 0;
  padding: 0;
  accent-color: var(--accent);
}

/* ---- Contacts ---------------------------------------------------- */

.ct {
  display: flex;
  min-height: 0;
  flex: 1;
}

.ct-list {
  flex: none;
  width: 320px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  min-height: 0;
  /* Rows do not wrap; on a phone the list must not grow to their width. */
  min-width: 0;
}

.ct-search {
  position: relative;
  padding: 10px;
  border-bottom: 1px solid var(--border);
}

.ct-search input {
  padding-left: 34px;
}

.ct-search-icon {
  position: absolute;
  left: 20px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}

.ct-rows {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  max-height: calc(100vh - var(--topbar-h) - 120px);
}

.ct-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 8px 12px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  min-width: 0;
}

.ct-row:hover {
  background: var(--bg);
}

.ct-row.ct-sel {
  background: var(--bg);
  box-shadow: inset 3px 0 0 var(--accent);
}

/* The contact's address book, colored like its entry in the list beside. */
.ct-book {
  flex: none;
  width: 10px;
  height: 10px;
  margin-left: auto;
  background: var(--swatch);
}

.ct-avatar {
  flex: none;
  width: 36px;
  height: 36px;
  object-fit: cover;
  background: var(--bg);
}

.ct-initials {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.ct-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--bg);
}

.ct-avatar-lg {
  width: 72px;
  height: 72px;
  font-size: 22px;
}

.ct-row-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ct-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  min-width: 0;
}

.ct-name-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ct-meta {
  font-size: 12.5px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ct-detail {
  flex: 1;
  min-width: 0;
  padding: 16px 20px;
  overflow-y: auto;
}

.ct-back {
  display: none;
  margin-bottom: 12px;
}

.ct-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
  min-width: 0;
}

.ct-head-text {
  min-width: 0;
}

.ct-head-text p {
  margin: 4px 0 0;
  overflow-wrap: anywhere;
}

.ct-title {
  margin: 0;
  font-size: 20px;
  overflow-wrap: anywhere;
}

.ct-value {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 8px;
}

.ct-value + .ct-value {
  margin-top: 4px;
}

.ct-label {
  font-size: 12px;
}

@media (max-width: 860px) {
  .ct-list {
    width: 260px;
  }

  .cal-row-time {
    width: 96px;
  }
}

@media (max-width: 640px) {
  .content:has(.pim-view) {
    padding: 12px;
  }

  .cal-toolbar {
    padding: 8px;
  }

  .cal-title {
    order: -1;
    flex-basis: 100%;
  }

  .cal-views {
    margin-left: auto;
  }

  .cal-view-btn {
    padding: 6px 9px;
  }

  /* Phones get compact day cells with dots; the day list below the grid
     shows the chosen day's events. */
  .cal-week {
    grid-template-rows: 46px;
  }

  .cal-item,
  .cal-more {
    display: none;
  }

  .cal-dots {
    display: flex;
  }

  .cal-cell {
    align-items: center;
    padding: 4px 2px;
  }

  .cal-head-day {
    padding: 6px 2px;
    text-align: center;
  }

  .cal-inv {
    flex-direction: column;
    align-items: stretch;
  }

  .cal-row-time {
    width: 80px;
  }

  .cal-facts {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  .cal-facts dd {
    margin-bottom: 8px;
  }

  /* List and details take turns. */
  .ct-list {
    width: auto;
    flex: 1;
    border-right: 0;
  }

  .ct-rows {
    max-height: none;
  }

  .ct-detail,
  .ct-has-open .ct-list {
    display: none;
  }

  .ct-has-open .ct-detail {
    display: block;
    padding: 12px;
  }

  .ct-back {
    display: inline-flex;
  }
}