:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --text: #1c2330;
  --muted: #667085;
  --border: #e3e6eb;
  --accent: #2f6fed;
  --accent-text: #ffffff;
  --danger: #c4312b;
  --row-hover: #f1f4fa;
  color-scheme: light;
}

/* Dark by the system's setting, unless this browser chose light (theme.js), or by choice. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14171c;
    --surface: #1c2027;
    --text: #e6e8eb;
    --muted: #9aa3af;
    --border: #2c323b;
    --accent: #5b8ff7;
    --accent-text: #0d1117;
    --danger: #f0716b;
    --row-hover: #232833;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #14171c;
  --surface: #1c2027;
  --text: #e6e8eb;
  --muted: #9aa3af;
  --border: #2c323b;
  --accent: #5b8ff7;
  --accent-text: #0d1117;
  --danger: #f0716b;
  --row-hover: #232833;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

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

[hidden] {
  display: none !important;
}

button,
.button {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.45em 0.9em;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
}

button:hover,
.button:hover {
  border-color: var(--accent);
}

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

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

.link {
  border: none;
  background: none;
  color: var(--accent);
  padding: 0.2em 0.4em;
}

input[type="date"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="text"] {
  width: 100%;
  padding: 0.5em 0.7em;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

label {
  display: grid;
  gap: 0.3em;
  font-weight: 500;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.5rem;
  display: grid;
  gap: 1rem;
}

.narrow {
  max-width: 420px;
}

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

/* A command to copy: all of it on its own line, selected with one click. */
.mac-install {
  display: block;
  margin-top: 0.25rem;
  overflow-wrap: anywhere;
  user-select: all;
}

.error {
  color: var(--danger);
  min-height: 1.2em;
  margin: 0;
}

/* Signing in: P1's identity on one side, the form on the other; one column on a phone. */
.login {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(320px, 5fr) 7fr;
}

.login[hidden] {
  display: none;
}

.login-brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  padding: 3rem clamp(2rem, 5vw, 5rem);
  color: #fff;
  background:
    radial-gradient(120% 90% at 0% 100%, rgb(255 255 255 / 0.14), transparent 60%),
    linear-gradient(160deg, #3b7bff 0%, #2456d6 55%, #1a3a9c 100%);
}

.login-brand .logo-tile {
  fill: #fff;
}

.login-brand .logo-arc {
  stroke: #2456d6;
}

.login-brand .logo-text {
  fill: #2456d6;
}

.login-brand-name {
  margin: 0;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.login-tagline {
  margin: 0;
  max-width: 26rem;
  font-size: 1.1rem;
  line-height: 1.5;
  color: rgb(255 255 255 / 0.85);
}

.login-panel {
  display: grid;
  place-items: center;
  padding: 2rem 1.25rem;
}

.login-form {
  display: grid;
  gap: 0.9rem;
  width: 100%;
  max-width: 360px;
}

.login-form h1 {
  margin: 0;
  font-size: 1.75rem;
}

.login-form h1 + .muted {
  margin: -0.6rem 0 0.4rem;
}

.login-form p {
  margin: 0;
}

.login-form input[type="email"],
.login-form input[type="password"],
.login-form input[type="text"] {
  padding: 0.7em 0.85em;
  font-size: 1rem;
}

.login-form label[for] {
  margin-bottom: -0.6rem;
}

.password-field {
  position: relative;
  display: grid;
}

.password-field input {
  padding-right: 4.5rem !important;
}

.password-field .reveal {
  position: absolute;
  top: 50%;
  right: 0.35rem;
  transform: translateY(-50%);
  padding: 0.3em 0.7em;
  border: none;
  background: none;
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 600;
}

.caps-lock {
  margin-top: -0.5rem !important;
  color: #b45309;
  font-size: 0.85rem;
}

.login-form .error:empty {
  display: none;
}

.wide {
  justify-content: center;
  width: 100%;
  padding: 0.75em 1em;
  font-size: 1rem;
  font-weight: 600;
}

.login-apps {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.8rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

@media (max-width: 760px) {
  .login {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  .login-brand {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
  }

  .login-logo {
    width: 36px;
    height: 36px;
  }

  .login-brand-name {
    font-size: 1.25rem;
  }

  .login-tagline {
    display: none;
  }

  .login-panel {
    place-items: start center;
    padding-top: 2rem;
  }
}

.switch {
  font-size: 0.9em;
}

.notice {
  color: var(--accent);
}

.badge {
  display: inline-block;
  min-width: 1.4em;
  padding: 0 0.4em;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 0.8em;
  line-height: 1.4em;
  text-align: center;
}

.panel h2 {
  font-size: 1.05rem;
  margin: 1.5rem 0 0.25rem;
}

.activity-what .path {
  display: block;
}

select {
  padding: 0.45em 0.6em;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: 0.7rem 16px;
  background: var(--bg);
}

.logo {
  border: none;
  background: none;
  padding: 2px;
  border-radius: 11px;
}

.logo:hover .logo-tile {
  filter: brightness(1.1);
}

.logo-tile {
  fill: var(--accent);
}

.logo-arc {
  fill: none;
  stroke: #fff;
  stroke-opacity: 0.55;
  stroke-width: 2;
  stroke-linecap: round;
}

.logo-text {
  fill: #fff;
  font: 800 13px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  letter-spacing: 0.3px;
}

.topbar input[type="search"] {
  justify-self: center;
  width: min(640px, 100%);
  padding: 0.65em 1.1em;
  border: 1px solid transparent;
  border-radius: 999px;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.12);
  font-size: 1rem;
}

.topbar input[type="search"]:focus {
  border-color: var(--accent);
  outline: none;
}

.topbar-end {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.icon-button,
.avatar {
  width: 36px;
  height: 36px;
  padding: 0;
  justify-content: center;
  border-radius: 50%;
}

.icon-button {
  font-size: 1.05rem;
}

.avatar {
  position: relative;
  border: none;
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 700;
}

.avatar .badge {
  position: absolute;
  top: -4px;
  right: -6px;
}

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

.app-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px 6rem;
}

.back {
  margin: 0.25rem 0 0.5rem;
  padding: 0.2em 0;
}

/* A row of choices in a pill: the Places, and Tiles or Details. */
.segmented {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
}

.segmented button {
  border: none;
  border-radius: 999px;
  background: none;
  color: var(--muted);
  padding: 0.4em 1.1em;
}

.segmented button:hover {
  color: var(--text);
}

.segmented button.active {
  background: var(--accent);
  color: var(--accent-text);
}

.segmented.small button {
  padding: 0.3em 0.8em;
  font-size: 0.9em;
}

.places {
  margin: 0.5rem 0 0.25rem;
}

.contents {
  display: contents;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.small {
  font-size: 0.82em;
}

/* ---------- Menus ---------- */

.menu {
  position: fixed;
  z-index: 50;
  min-width: 200px;
  max-width: min(320px, calc(100vw - 16px));
  display: grid;
  padding: 0.3rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgb(0 0 0 / 0.18);
}

.menu button {
  border: none;
  background: none;
  justify-content: flex-start;
  padding: 0.5em 0.8em;
  border-radius: 6px;
}

.menu button:hover,
.menu button:focus-visible,
.menu button.active {
  background: var(--row-hover);
  outline: none;
}

.menu .badge {
  margin-left: auto;
}

.menu-note {
  margin: 0 0 0.2rem;
  padding: 0.5em 0.8em;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.85em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 20;
  padding: 0.8em 1.4em;
  border-radius: 16px;
  font-weight: 600;
  box-shadow: 0 4px 16px rgb(0 0 0 / 0.25);
}

.drop-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  border: 3px dashed var(--accent);
  pointer-events: none;
}

.drop-overlay p {
  margin: 0;
  padding: 1rem 2rem;
  border-radius: 12px;
  background: var(--surface);
  color: var(--accent);
  font-size: 1.4rem;
  font-weight: 700;
}

.status {
  margin: 0;
  padding: 0 16px;
  min-height: 1.6em;
  line-height: 1.6em;
  color: var(--muted);
  font-size: 0.9em;
}

.status.error {
  color: var(--danger);
}

.panel h2.section-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  font-weight: 600;
  margin: 1.25rem 0 0.5rem;
}

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin: 0.5rem 0 1rem;
}

.files-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 0.75rem 0 0;
}

.files-title .breadcrumbs {
  font-size: 1.6rem;
  font-weight: 700;
}

.files-title .breadcrumbs .link {
  padding: 0 0.15em;
  font-weight: 700;
}

.kind {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 22px;
  border-radius: 4px;
  font: 700 8.5px/1 system-ui, sans-serif;
  letter-spacing: 0.02em;
  color: #fff;
  background: #8a94a6;
}

.kind.big {
  width: 44px;
  height: 36px;
  font-size: 11px;
  border-radius: 6px;
}

.kind.folder {
  position: relative;
  background: #f0b429;
  border-radius: 3px 6px 4px 4px;
}

.kind.folder::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 0;
  width: 45%;
  height: 5px;
  border-radius: 3px 3px 0 0;
  background: #f0b429;
}

.kind.k-doc { background: #2f6fed; }
.kind.k-pdf { background: #d64541; }
.kind.k-sheet { background: #1f9d55; }
.kind.k-slides { background: #d9731a; }
.kind.k-image { background: #8e44ad; }
.kind.k-media { background: #c0397b; }
.kind.k-archive { background: #6b5b4a; }
.kind.k-code { background: #34495e; }

.folder-chips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 0.6rem;
}

.folder-chip {
  display: flex;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.folder-chip .chip-open {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  justify-content: flex-start;
  gap: 0.7rem;
  padding: 0.7rem 0.9rem;
  border-radius: 0;
}

.chip-name {
  display: grid;
  min-width: 0;
  text-align: left;
}

.chip-name > span {
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

.more {
  border: none;
  background: none;
  padding: 0.2em 0.6em;
  font-size: 1.1rem;
  justify-content: center;
  color: var(--muted);
}

.more:hover {
  background: var(--row-hover);
  color: var(--text);
}

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 0.8rem;
}

/* A tile: the whole card opens the Preview; ⋯ in its corner opens the menu. */
.tile {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface);
}

.tile-open {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.2rem;
  width: 100%;
  padding: 0 0 0.6rem;
  border: none;
  border-radius: 0;
  background: none;
  text-align: left;
  white-space: normal;
}

.tile-open:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.tile-more {
  position: absolute;
  right: 0.35rem;
  bottom: 0.3rem;
  border-radius: 6px;
}

/* The badge is the placeholder: a Thumbnail fades in over it, so nothing moves when it arrives. */
.tile-thumb,
.row-thumb {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.tile-thumb {
  height: 132px;
  margin-bottom: 0.3rem;
  background: var(--row-hover);
}

.row-thumb {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 5px;
}

.thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.18s ease-out;
}

.has-thumb .thumb {
  opacity: 1;
}

/* A document page is read from its top, where its title is. */
.thumb.page {
  object-position: top;
}

.has-thumb > .kind {
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .thumb {
    transition: none;
  }
}

.tile-name,
.tile-open .small {
  padding: 0 0.75rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tile-name {
  font-weight: 500;
}

.tile:hover,
.folder-chip:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 10px rgb(0 0 0 / 0.08);
}

.tile.highlight,
.folder-chip.highlight {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent);
}

.listing.details {
  margin-top: 1.25rem;
}

.details .name-cell .name-wrap {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.details .name-cell .link {
  padding: 0;
  color: var(--text);
  font-weight: 500;
  white-space: normal;
  text-align: left;
}

.details .name-cell .link:hover {
  color: var(--accent);
  text-decoration: underline;
}

.details .name-cell .path {
  flex-basis: 100%;
  padding-left: calc(28px + 0.6rem);
}

.row-more {
  width: 3rem;
  text-align: right;
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem;
  font-weight: 600;
  min-width: 0;
}

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

.listing {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  table-layout: auto;
}

.listing th,
.listing td {
  text-align: left;
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.listing th {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
  font-weight: 600;
}

.listing tbody tr:last-child td {
  border-bottom: none;
}

.listing tbody tr:hover {
  background: var(--row-hover);
}

.listing .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.name-cell {
  word-break: break-word;
}

.name-cell .icon {
  margin-right: 0.4em;
}

.name-cell .path {
  display: block;
  font-size: 0.8em;
  color: var(--muted);
}

.row-actions {
  text-align: right;
  white-space: nowrap;
}

.row-actions button {
  padding: 0.25em 0.5em;
  font-size: 0.9em;
}

.empty {
  text-align: center;
  padding: 2rem 0;
}

dialog {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  padding: 0;
  width: min(640px, calc(100vw - 32px));
}

dialog::backdrop {
  background: rgb(0 0 0 / 0.4);
}

.dialog-body {
  padding: 1.25rem;
  display: grid;
  gap: 0.75rem;
}

.dialog-body h2 {
  margin: 0;
  word-break: break-word;
}

@media (max-width: 640px) {
  .hide-narrow {
    display: none;
  }

  .topbar {
    gap: 0.6rem;
  }

  .files-title .breadcrumbs {
    font-size: 1.3rem;
  }

  .tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .folder-chips {
    grid-template-columns: minmax(0, 1fr);
  }

  .fab {
    right: 16px;
    bottom: 16px;
  }

  .listing.details .num {
    text-align: left;
    font-size: 0.85em;
    padding-left: calc(28px + 0.6rem);
  }

  .listing .row-more {
    grid-column: 2;
    grid-row: 1;
    width: auto;
  }

  /* A table row is too wide for a phone once it carries four buttons, so
     each row becomes a small card: name and size on top, actions below. */
  .listing thead {
    display: none;
  }

  .listing,
  .listing tbody,
  .listing td {
    display: block;
  }

  .listing tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--border);
  }

  .listing tbody tr:last-child {
    border-bottom: none;
  }

  .listing td {
    border: none;
    padding: 0.1rem 0;
  }

  .listing td:empty {
    display: none;
  }

  .listing .hide-narrow {
    display: none;
  }

  .listing .row-actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    white-space: normal;
    padding-top: 0.4rem;
  }

  .listing .row-actions:empty {
    display: none;
  }
}

/* ---------- Wiki ---------- */

.wiki-path {
  overflow-wrap: anywhere;
}

.wiki-article {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  max-width: 860px;
  overflow-wrap: break-word;
}

.wiki-title {
  margin: 0 0 0.75rem;
  font-size: 1.5rem;
}

.wiki-page h1,
.wiki-page h2,
.wiki-page h3 {
  margin: 1.2em 0 0.4em;
  line-height: 1.25;
}

.wiki-page table {
  border-collapse: collapse;
  display: block;
  overflow-x: auto;
}

.wiki-page th,
.wiki-page td {
  border: 1px solid var(--border);
  padding: 0.3rem 0.6rem;
  text-align: left;
}

.wiki-page pre {
  overflow-x: auto;
  background: var(--bg);
  padding: 0.6rem 0.8rem;
  border-radius: 6px;
}

.wiki-page img {
  max-width: 100%;
}

.wiki-page a {
  color: var(--accent);
}

.wiki-page a.broken {
  color: var(--muted);
  text-decoration: underline dashed;
  cursor: default;
}

.wiki-page sup.citation-ref {
  font-size: 0.7em;
  margin-left: 0.1em;
}

.wiki-page sup.citation-ref a::before {
  content: "[";
}

.wiki-page sup.citation-ref a::after {
  content: "]";
}

.wiki-page p.citation {
  margin: 0.25rem 0;
  font-size: 0.85rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.wiki-page .citation-label {
  font-weight: 600;
  margin-right: 0.25rem;
}

.wiki-page blockquote {
  margin: 0.5rem 0;
  padding-left: 0.8rem;
  border-left: 3px solid var(--border);
  color: var(--muted);
}

.wiki-domain {
  margin: 0 0 0.5rem;
}

.wiki-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 1rem;
  align-items: start;
}

.wiki-side {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  overflow-wrap: anywhere;
}

.wiki-side h2 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 0.5rem 0 0.4rem;
}

.wiki-list {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
}

.wiki-list li {
  padding: 0.15rem 0;
}

.wiki-side a {
  color: var(--accent);
}

.wiki-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  margin: -0.25rem 0 0.75rem;
  font-size: 0.85rem;
}

.chip {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.05rem 0.55rem;
}

.chip.tag {
  color: var(--accent);
}

.chip.confidence-low {
  color: var(--danger);
  border-color: var(--danger);
}

.listing tr.highlight td {
  background: var(--row-hover);
}

@media (max-width: 800px) {
  .wiki-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

.wiki-page a.conflict-copy {
  color: var(--danger);
}

/* The graph library's own rules: it would inject them itself, but the
   content policy (rightly) refuses inline style elements. */
.force-graph-container canvas {
  display: block;
  user-select: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.force-graph-container .clickable {
  cursor: pointer;
}

.force-graph-container .grabbable {
  cursor: grab;
}

.force-graph-container .grabbable:active {
  cursor: grabbing;
}

.float-tooltip-kap {
  position: absolute;
  width: max-content;
  max-width: max(50%, 150px);
  padding: 3px 5px;
  border-radius: 3px;
  font: 12px sans-serif;
  color: #eee;
  background: rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

.wiki-graph-canvas {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
}

.wiki-graph-legend {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
}

.dot {
  display: inline-block;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  vertical-align: middle;
}

.dot.page {
  background: var(--accent);
}

.dot.source {
  background: var(--muted);
}

.wiki-toolbar {
  justify-content: flex-start;
  gap: 0.4rem;
}

.wiki-toolbar .wiki-path {
  margin-left: auto;
}

/* Room for the ⋯ button in a tile's corner. */
.tile .tile-open .tile-name,
.tile .tile-open .small {
  padding-right: 2.2rem;
}

/* ---------- Preview (SPEC-WEB-PREVIEW.md) ---------- */

/* A viewer is dark in both themes, like any photo viewer, so pictures read true; its panels follow the theme. */
.preview {
  --viewer-bg: #0b0d11;
  --viewer-text: #eceef1;
  --viewer-muted: #a4acb9;
  --viewer-control: rgb(255 255 255 / 0.1);
  --viewer-control-hover: rgb(255 255 255 / 0.2);
  position: fixed;
  inset: 0;
  z-index: 45;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  background: var(--viewer-bg);
  color: var(--viewer-text);
}

body.previewing {
  overflow: hidden;
}

.preview-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem 0.75rem 1.25rem;
}

.preview-heading {
  flex: 1;
  min-width: 0;
}

.preview-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preview-meta {
  margin: 0.15rem 0 0;
  color: var(--viewer-muted);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.preview-actions {
  display: flex;
  gap: 0.4rem;
}

.preview-button {
  border-color: transparent;
  background: var(--viewer-control);
  color: var(--viewer-text);
}

.preview-button:hover {
  border-color: transparent;
  background: var(--viewer-control-hover);
}

.preview-button.primary {
  background: var(--accent);
  color: var(--accent-text);
}

.preview-button.icon {
  width: 2.2rem;
  justify-content: center;
  padding-inline: 0;
}

.preview button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.preview-notice {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
  margin: 0 1rem 0.5rem;
  padding: 0.5rem 0.9rem;
  border-radius: 8px;
  background: #4a3b12;
  color: #fbe7b3;
  font-size: 0.9rem;
}

.preview-notice .link {
  color: #ffd66b;
  font-weight: 600;
}

.preview-stage {
  position: relative;
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  min-height: 0;
}

.preview-content {
  min-height: 0;
  overflow: auto;
  display: grid;
  place-items: center;
  padding: 0 4.5rem 1rem;
}

.preview-content:focus {
  outline: none;
}

.preview-loading {
  color: var(--viewer-muted);
}

.preview-step {
  position: absolute;
  top: 50%;
  z-index: 1;
  width: 2.75rem;
  height: 2.75rem;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  transform: translateY(-50%);
  background: var(--viewer-control);
  color: var(--viewer-text);
  font-size: 1.7rem;
  line-height: 1;
}

.preview-step:hover {
  background: var(--viewer-control-hover);
}

.preview-step.previous {
  left: 1rem;
}

.preview-step.next {
  right: 1rem;
}

.preview-position {
  margin: 0;
  padding: 0.3rem 0 0.8rem;
  text-align: center;
  color: var(--viewer-muted);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

/* Images: fitted; a click shows real size, where the frame scrolls to pan. */
.preview-image-frame {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  cursor: zoom-in;
}

.preview-image {
  max-width: 100%;
  /* The viewer's own height, less its header and the position line. */
  max-height: calc(100dvh - 8.5rem);
  object-fit: contain;
  border-radius: 2px;
  box-shadow: 0 8px 40px rgb(0 0 0 / 0.5);
}

.preview-image-frame.zoomed {
  display: block;
  height: calc(100dvh - 8.5rem);
  overflow: auto;
  cursor: zoom-out;
}

.preview-image-frame.zoomed .preview-image {
  max-width: none;
  max-height: none;
}

.preview-content.kind-image:has(.zoomed) {
  display: block;
}

/* Text, markdown and PDF read on a page; the page follows the theme. */
.preview-content.kind-text,
.preview-content.kind-markdown,
.preview-content.kind-pdf {
  place-items: start center;
}

.preview-text,
.preview-markdown {
  width: min(100%, 60rem);
  margin: 0;
  padding: 1.5rem 1.75rem;
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
}

.preview-markdown img.note-image {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

/* A picture that isn't in this place, or comes from the web: its description, in a dashed box. */
.preview-markdown img.note-image.missing {
  display: inline-block;
  min-width: 8rem;
  min-height: 2.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px dashed var(--border);
  color: var(--muted);
  font-size: 0.85rem;
}

/* Office documents: a readable version on a page, drawn with the page's own elements. */
.preview-content.kind-office {
  place-items: start center;
  align-content: start;
  gap: 0.75rem;
}

.preview-office {
  width: min(100%, 60rem);
  margin: 0;
  padding: 1.5rem 1.75rem;
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.office-doc h2, .office-doc h3, .office-doc h4 { margin: 1.25em 0 0.4em; line-height: 1.25; }
.office-doc h2:first-child { margin-top: 0; }
.office-doc p { margin: 0 0 0.7em; }
.office-doc a, .office-deck a { color: var(--accent); }

.office-picture {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0.5rem 0;
  border-radius: 4px;
}

.office-table-wrap {
  max-width: 100%;
  overflow: auto;
  margin: 0.5rem 0 1rem;
}

.office-table {
  border-collapse: collapse;
  font-size: 0.9rem;
}

.office-table td,
.office-table th {
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.office-table td p { margin: 0; }
.office-table td.num { text-align: right; font-variant-numeric: tabular-nums; }

.office-grid thead th,
.office-grid tbody th {
  position: sticky;
  background: var(--surface-2, var(--bg));
  color: var(--muted);
  font-weight: 500;
  font-size: 0.8rem;
  text-align: center;
}

.office-grid thead th { top: 0; }
.office-grid tbody th { left: 0; }
.office-book .office-table-wrap { max-height: 70vh; }

.office-sheet-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-bottom: 0.75rem;
}

.office-sheet-tab {
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.office-sheet-tab[aria-selected="true"] {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-text);
}

.office-deck {
  display: grid;
  gap: 1rem;
  padding: 0;
  background: transparent;
}

.office-slide {
  position: relative;
  padding: 1.25rem 1.5rem 1.25rem 3rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.office-slide h3 { margin: 0 0 0.5rem; font-size: 1.2rem; }
.office-slide ul { margin: 0; padding-left: 1.25rem; }

.office-slide-number {
  position: absolute;
  top: 1.25rem;
  left: 1rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

.office-slide-pictures {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.office-slide-pictures .office-picture { max-height: 12rem; margin: 0; }

.preview-text {
  overflow: auto;
  font: 0.85rem/1.55 ui-monospace, "Cascadia Mono", Consolas, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  tab-size: 4;
}

.preview-truncated {
  width: min(100%, 60rem);
  margin: 0 0 0.6rem;
  color: var(--viewer-muted);
  font-size: 0.9rem;
}

.preview-truncated .link {
  padding: 0;
}

.preview-pdf {
  display: grid;
  justify-items: center;
  gap: 1rem;
}

.preview-pdf-page {
  max-width: 100%;
  background: #fff;
  box-shadow: 0 6px 30px rgb(0 0 0 / 0.45);
}

.preview-pdf-canvas {
  display: block;
  max-width: 100%;
}

.preview-media {
  max-width: 100%;
  max-height: 100%;
}

.preview-content.kind-audio .preview-media {
  width: min(100%, 36rem);
}

/* What P1 doesn't show: the file's details and a way to get it. */
.preview-card {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  width: min(100%, 24rem);
  padding: 2rem 1.5rem;
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  text-align: center;
}

.preview-card .kind.big {
  width: 64px;
  height: 52px;
  margin-bottom: 0.5rem;
  font-size: 14px;
}

.preview-card p {
  margin: 0;
}

.preview-card-name {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.preview-card .primary {
  margin-top: 0.9rem;
}

@media (max-width: 640px) {
  .preview-header {
    flex-wrap: wrap;
    padding: 0.6rem 0.75rem;
  }

  .preview-content {
    padding: 0 0.5rem 0.5rem;
  }

  .preview-step {
    top: auto;
    bottom: 0.4rem;
    transform: none;
    width: 2.4rem;
    height: 2.4rem;
  }

  .preview-text,
  .preview-markdown {
    padding: 1rem;
  }
}

/* Fixed rows: the notice is often hidden, and a hidden child would otherwise shift the rest up a row. */
.preview-header { grid-row: 1; }
.preview-notice { grid-row: 2; }
.preview-stage { grid-row: 3; }
.preview-position { grid-row: 4; }

/* ---------- Sharing (SPEC-SHARING.md) ---------- */

/* My Files' shared marker: a people icon and how many have access. */
.shared-marker {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  flex: none;
  padding: 0.1em 0.45em;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.5;
}

.shared-marker svg {
  width: 1.1em;
  height: 1.1em;
  fill: currentColor;
}

.folder-chip .shared-marker {
  margin-left: auto;
}

/* On a tile it sits in the picture's corner, above a Thumbnail. */
.tile-thumb .shared-marker {
  position: absolute;
  top: 0.45rem;
  left: 0.45rem;
  z-index: 1;
  background: var(--surface);
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.15);
}

.shared-list td {
  vertical-align: middle;
}

.share-add {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: end;
  gap: 0.6rem;
}

.share-add .muted {
  font-weight: 400;
}

#share-message:empty {
  display: none;
}

.share-heading {
  margin: 0.5rem 0 0;
  font-size: 1rem;
}

.share-access {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}

.share-person {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0;
  border-top: 1px solid var(--border);
}

.share-who {
  overflow-wrap: anywhere;
  font-weight: 500;
}

#share-done {
  justify-self: end;
}

@media (max-width: 640px) {
  .share-add {
    grid-template-columns: 1fr 1fr;
  }

  .share-add .share-email,
  .share-add button {
    grid-column: 1 / -1;
  }

  .share-person {
    grid-template-columns: 1fr 1fr;
  }

  .share-person .share-who,
  .share-person button {
    grid-column: 1 / -1;
  }
}

.share-add label {
  white-space: nowrap;
}

.share-people-section {
  display: grid;
  gap: 0.75rem;
}

.share-people-section[hidden],
.link-section[hidden] {
  display: none;
}

/* ---------- Links (SPEC-WEB-ESSENTIALS.md) ---------- */

/* The Link marker shares the shared marker's look; on a tile it takes the other corner. */
.folder-chip .shared-marker + .link-marker {
  margin-left: 0.3rem;
}

.tile-thumb .link-marker {
  left: auto;
  right: 0.45rem;
}

.share-people-section:not([hidden]) + .link-section {
  border-top: 1px solid var(--border);
  padding-top: 0.75rem;
}

.link-section {
  display: grid;
  gap: 0.6rem;
}

.link-section > p {
  margin: 0;
}

.link-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.link-row {
  display: grid;
  gap: 0.4rem;
  padding: 0.65rem;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.link-row.expired .link-usage {
  color: var(--danger);
}

.link-address-row {
  display: flex;
  gap: 0.5rem;
}

.link-address {
  flex: 1;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85rem;
}

.link-usage {
  margin: 0;
  font-size: 0.85rem;
}

.link-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.link-controls label {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-right: auto;
  font-size: 0.9rem;
}

.link-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.link-item > span:last-child {
  display: grid;
  min-width: 0;
  overflow-wrap: anywhere;
}

#link-message:empty {
  display: none;
}

.link-footer {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}

#account-links,
#admin-links {
  margin-top: 1.5rem;
}

#account-links[hidden],
#admin-links[hidden] {
  display: none;
}

/* ---------- The desktop app, offered after sign-in ---------- */

.app-card {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin: 0 0 1.25rem;
  padding: 1rem 3rem 1rem 1.25rem;
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 10px;
  background: var(--surface);
}

.app-card-text {
  flex: 1 1 22rem;
}

.app-card h2 {
  margin: 0 0 0.2rem;
  font-size: 1rem;
}

.app-card p {
  margin: 0;
}

.app-card-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.app-card #app-card-dismiss {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  border: none;
  background: none;
  color: var(--muted);
  padding: 0.25em 0.5em;
}

.app-card #app-card-dismiss:hover {
  color: var(--text);
}

.apps {
  display: grid;
  gap: 1rem;
}

.apps h2,
.apps p {
  margin: 0;
}

.apps .app-option {
  display: grid;
  gap: 0.5rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.apps .app-option.first {
  order: -1;
  border-color: var(--accent);
}

.apps h2 {
  order: -3;
}

.apps > p.muted {
  order: -2;
}

.apps .app-option h3 {
  margin: 0;
  font-size: 0.95rem;
}

.apps .app-option .button {
  justify-self: start;
}

.copy-line {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}

.copy-line code {
  flex: 1;
  min-width: 0;
  padding: 0.55em 0.7em;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  font-size: 0.85rem;
  overflow-x: auto;
  white-space: nowrap;
}

.apps > button[value="close"] {
  justify-self: end;
}

a.button {
  text-decoration: none;
}

/* ---------- The Upload queue, in the page corner ---------- */

.uploads-panel {
  position: fixed;
  right: 24px;
  bottom: 88px; /* above + New */
  z-index: 30;
  display: grid;
  width: min(380px, calc(100vw - 32px));
  max-height: min(60vh, 460px);
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 10px 32px rgb(0 0 0 / 0.18);
  overflow: hidden;
}

.uploads-header {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.75rem 0.5rem 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
}

.uploads-heading {
  flex: 1;
  min-width: 0;
}

.uploads-title,
.uploads-detail {
  margin: 0;
}

.uploads-title {
  font-weight: 600;
}

.uploads-detail {
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.uploads-header .icon-button {
  border: none;
  background: none;
  color: var(--muted);
  padding: 0.3em 0.55em;
}

.uploads-header .icon-button:hover {
  background: var(--row-hover);
  color: var(--text);
}

.uploads-list {
  margin: 0;
  padding: 0.25rem 0;
  overflow-y: auto;
  list-style: none;
}

.uploads-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.2rem;
  padding: 0.5rem 1rem;
}

.uploads-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.92rem;
}

.uploads-line {
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

.uploads-row.failed .uploads-line {
  color: var(--danger);
}

.uploads-bar {
  display: block;
  height: 4px;
  border-radius: 2px;
  background: var(--row-hover);
  overflow: hidden;
}

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

.uploads-row.done .uploads-bar-fill {
  background: #1f9d55;
}

.uploads-row.failed .uploads-bar-fill {
  background: var(--danger);
}

.uploads-row.done .uploads-bar,
.uploads-row.cancelled .uploads-bar {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .uploads-bar-fill {
    transition: none;
  }
}

@media (max-width: 640px) {
  .uploads-panel {
    right: 16px;
    left: 16px;
    width: auto;
    bottom: 84px;
  }
}

/* + New shows its ring for the keyboard, not after a click. */
.fab:focus:not(:focus-visible) {
  outline: none;
}

.uploads-line,
.uploads-bar {
  grid-column: 1 / -1;
}

.uploads-action.icon-button {
  border: none;
  background: none;
  color: var(--muted);
  padding: 0.1em 0.45em;
  font-size: 0.85rem;
}

.uploads-action.icon-button:hover {
  background: var(--row-hover);
  color: var(--text);
}

.uploads-action.link {
  padding: 0;
  font-size: 0.85rem;
  font-weight: 600;
}

.uploads-cancel-all {
  padding: 0.2em 0.5em;
  font-size: 0.85rem;
}

.uploads-row.cancelled .uploads-name {
  color: var(--muted);
  text-decoration: line-through;
}

/* ---------- Choosing what happens to names already taken ---------- */

.clash {
  display: grid;
  gap: 0.75rem;
}

.clash h2,
.clash p {
  margin: 0;
}

.clash-names {
  margin: 0;
  padding-left: 1.2rem;
  font-size: 0.92rem;
}

.clash-names li {
  overflow-wrap: anywhere;
}

.clash-choices {
  display: grid;
  gap: 0.5rem;
}

.clash-choice {
  display: grid;
  justify-items: start;
  gap: 0.15rem;
  padding: 0.75rem 0.9rem;
  text-align: left;
  white-space: normal;
}

.clash-choice:hover,
.clash-choice:focus-visible {
  border-color: var(--accent);
  background: var(--row-hover);
}

.clash-choice .muted {
  font-size: 0.85rem;
}

.clash-cancel {
  justify-self: end;
}

/* ---------- Trash ---------- */

.trash-button {
  gap: 0.4em;
  margin-left: auto;
  border-color: transparent;
  background: none;
  color: var(--muted);
  font-size: 0.85rem;
}

.trash-button:hover {
  color: var(--text);
  background: var(--row-hover);
}

.trash-icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.trash-title {
  align-items: center;
  gap: 1rem;
}

.trash-heading {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 700;
}

.trash-title input[type="search"] {
  width: min(280px, 100%);
  margin-left: auto;
}

.trash-note {
  margin: 0.25rem 0 1rem;
}

.trash-list .trash-name {
  font-weight: 500;
  overflow-wrap: anywhere;
}

.trash-list .name-wrap {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* ---------- Deleting permanently ---------- */

.purge {
  display: grid;
  gap: 0.75rem;
}

.purge h2,
.purge p {
  margin: 0;
}

.purge label {
  font-weight: 400;
  font-size: 0.92rem;
}

.purge input {
  width: 100%;
  padding: 0.5em 0.7em;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

.purge .dialog-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.danger-solid {
  border-color: var(--danger);
  background: var(--danger);
  color: #fff;
}

.danger-solid:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.trash-title #empty-trash-button {
  flex: none;
}

/* ---------- The page a Link opens (SPEC-WEB-ESSENTIALS.md) ---------- */

.shared-link {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.shared-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem clamp(1rem, 4vw, 2.5rem);
  color: #fff;
  background: linear-gradient(160deg, #3b7bff 0%, #2456d6 55%, #1a3a9c 100%);
}

.shared-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.15rem;
  font-weight: 800;
}

.shared-logo .logo-tile {
  fill: #fff;
}

.shared-logo .logo-arc {
  stroke: #2456d6;
}

.shared-logo .logo-text {
  fill: #2456d6;
}

.shared-top .shared-top-note {
  color: rgb(255 255 255 / 0.85);
  font-size: 0.9rem;
}

.shared-main {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: 2rem 16px 3rem;
  box-sizing: border-box;
}

.shared-loading {
  text-align: center;
}

.shared-card {
  max-width: 400px;
  margin: 3rem auto 0;
  padding: 2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.shared-card[hidden],
.shared-gate[hidden],
#shared-view[hidden],
.shared-loading[hidden] {
  display: none;
}

.shared-card h1 {
  margin: 0 0 0.5rem;
  font-size: 1.4rem;
}

.shared-card p {
  margin: 0;
}

.shared-message {
  text-align: center;
}

.shared-gate {
  display: grid;
  gap: 0.8rem;
}

.shared-gate label[for] {
  margin-bottom: -0.5rem;
}

.shared-gate input {
  padding: 0.7em 0.85em;
  font-size: 1rem;
}

.shared-gate .error:empty {
  display: none;
}

.shared-hero {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.shared-hero-text {
  flex: 1;
  min-width: 0;
}

.shared-hero h1 {
  margin: 0;
  font-size: 1.5rem;
  overflow-wrap: anywhere;
}

.shared-hero p {
  margin: 0.2rem 0 0;
}

.shared-hero .button[hidden] {
  display: none;
}

.shared-zip-note {
  margin: 0.75rem 0 0;
}

.shared-zip-note[hidden],
.shared-crumbs[hidden] {
  display: none;
}

.shared-crumbs {
  margin-top: 1.25rem;
}

.shared-table {
  margin-top: 1rem;
}

.shared-table .row-actions {
  width: 1%;
  text-align: right;
}

.shared-footer {
  padding: 1.25rem 16px;
  text-align: center;
  font-size: 0.85rem;
}

@media (max-width: 640px) {
  .shared-top .shared-top-note {
    display: none;
  }

  .shared-hero {
    flex-wrap: wrap;
  }

  .shared-hero .button {
    width: 100%;
    justify-content: center;
  }
}

/* ---------- Connect an AI (SPEC-MCP.md) ---------- */

#connection-form,
.new-connection {
  margin-top: 1rem;
}

#connection-form h2,
.new-connection h2 {
  margin: 0;
}

.scope-choice {
  border: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}

.scope-choice legend {
  padding: 0;
  margin-bottom: 0.3rem;
  font-weight: 500;
}

.scope-choice label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 400;
}

.new-connection {
  max-width: 640px;
  border-color: var(--accent);
}

.new-connection p,
.new-connection .toolbar {
  margin: 0;
}

/* The configuration to paste: kept as written, selected with one click. */
.connection-config {
  margin: 0;
  padding: 0.75em 0.9em;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  font-size: 0.82rem;
  line-height: 1.45;
  overflow-x: auto;
  white-space: pre;
  user-select: all;
}