/* Light is the default. Dark applies when the system asks for it and the
   user has not picked light, or when the user picks dark. */
:root {
  color-scheme: light;
  --bg: #f7f7f5;
  --surface: #ffffff;
  --surface-2: #efefea;
  --fg: #1d1d1b;
  --muted: #6b6b66;
  --border: #e2e2dc;
  --accent: #2459d6;
  --accent-fg: #ffffff;
  --focus: #2459d655;
  --ok: #1f8a4c;
  --warn: #b7791f;
  --bad: #c2362f;
  --notice-bg: #fff6dc;
  --notice-fg: #6b4e0b;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #141413;
    --surface: #1c1c1a;
  --surface-2: #2a2a27;
    --fg: #e8e8e3;
    --muted: #9a9a93;
    --border: #2f2f2c;
    --accent: #6d95ff;
    --accent-fg: #0d1220;
    --focus: #6d95ff55;
    --ok: #4cc27f;
    --warn: #e0b04f;
    --bad: #ef6f67;
    --notice-bg: #3a3016;
    --notice-fg: #f2dda3;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #141413;
  --surface: #1c1c1a;
  --surface-2: #2a2a27;
  --fg: #e8e8e3;
  --muted: #9a9a93;
  --border: #2f2f2c;
  --accent: #6d95ff;
  --accent-fg: #0d1220;
  --focus: #6d95ff55;
  --ok: #4cc27f;
  --warn: #e0b04f;
  --bad: #ef6f67;
  --notice-bg: #3a3016;
  --notice-fg: #f2dda3;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 15px/1.5 var(--font);
  display: flex;
  flex-direction: column;
}

a { color: var(--accent); }

/* Header bar */
.bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.brand { font-weight: 650; color: var(--fg); text-decoration: none; }
.spacer { flex: 1; }
.pad-name {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.meta { font-size: 13px; color: var(--muted); }

.status { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); }
.status[data-state="online"] .dot { background: var(--ok); }
.status[data-state="slow"] .dot { background: var(--warn); }
.status[data-state="bad"] .dot,
.status[data-state="offline"] .dot,
.status[data-state="full"] .dot { background: var(--bad); }
.status { font-variant-numeric: tabular-nums; }

.badge {
  font-size: 12px;
  padding: 1px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
}

/* Buttons and inputs */
.btn {
  font: inherit;
  font-size: 14px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--fg);
  cursor: pointer;
}
.btn:hover { border-color: var(--muted); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--muted); }
.btn.ghost:hover { color: var(--fg); border-color: var(--border); }

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

input {
  font: inherit;
  font-family: var(--mono);
  font-size: 15px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--fg);
  min-width: 0;
}
input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); }

/* Home page */
.home { width: 100%; max-width: 640px; margin: 0 auto; padding: 48px 16px; }
.home h1 { font-size: 28px; margin: 0 0 8px; letter-spacing: -0.01em; }
.lead { margin: 0 0 32px; color: var(--muted); font-size: 18px; line-height: 1.5; }
.home h2 { font-size: 17px; margin: 40px 0 12px; }
.features { margin: 0; padding-left: 18px; font-size: 15px; }
.features li + li { margin-top: 10px; }
.features strong { font-weight: 600; }
.open-form label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.row { display: flex; gap: 8px; }
.row input { flex: 1; }
.error { color: var(--bad); margin: 8px 0 0; font-size: 14px; }
.notes { margin: 0; padding-left: 18px; color: var(--muted); font-size: 14px; }
.notes li + li { margin-top: 6px; }

/* Statistics: tiles of a label and a value, in text colors only */
.stat-group + .stat-group { margin-top: 16px; }
.stat-group h3 { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
.stat-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  margin: 0;
}
.stat {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}
.stat dt { font-size: 13px; color: var(--muted); }
.stat dd { margin: 2px 0 0; font-size: 22px; font-weight: 600; color: var(--fg); }

/* Pad page */
.notice {
  padding: 8px 16px;
  background: var(--notice-bg);
  color: var(--notice-fg);
  font-size: 14px;
  border-bottom: 1px solid var(--border);
}

/* Editor area: [gutter | textarea] */
.editor-wrap { flex: 1; display: flex; min-height: 0; }
.editor-pane { flex: 1; display: flex; min-width: 0; }
.editor-box { flex: 1; display: flex; min-width: 0; position: relative; }

#editor {
  flex: 1;
  width: 100%;
  margin: 0;
  padding: 16px;
  border: 0;
  resize: none;
  background: var(--bg);
  color: var(--fg);
  /* The line height is a whole number of pixels. Then the browser lays out a
     row in the textarea and in the mirrors of layout.js with the same height.
     With 1.6 (22.4 px), Chrome rounds rows to 22.390625 px in the textarea
     and 22.40625 px in a div, and line numbers and cursors drift off. */
  font: 14px/22px var(--mono);
  tab-size: 4;
}
#editor[wrap="off"] { white-space: pre; overflow-x: auto; }
#editor:focus { outline: none; }
#editor[readonly] { color: var(--muted); }

.gutter {
  position: relative;
  flex: none;
  overflow: hidden;
  border-right: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font: 14px/22px var(--mono); /* the same as #editor */
  user-select: none;
}
.gutter[hidden] { display: none; }
.gutter > div { position: absolute; right: 10px; opacity: 0.7; }

/* Other writers' carets and selections, drawn by cursors.js */
.cursors { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.remote-caret {
  position: absolute;
  width: 2px;
  margin-left: -1px;
  background: var(--c);
  border-radius: 1px;
}
.remote-sel { position: absolute; background: var(--c); }

/* Header: one dot per person, in the color of their caret. A ring is this
   client; a hollow dot can only read; a dashed dot has no key yet; a pulse
   is someone who types. people.js draws them. */
.editors { display: inline-flex; align-items: center; gap: 4px; }
.editor-dot {
  position: relative;
  flex: none;
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--c);
  font: inherit;
}
button.editor-dot { cursor: pointer; }
.editor-dot.me { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--c); margin-right: 4px; }
.editor-dot.reader { background: transparent; box-shadow: inset 0 0 0 2px var(--c); }
.editor-dot.locked { background: transparent; box-shadow: none; outline: 1.5px dashed var(--c); outline-offset: -1.5px; }
.editor-dot.following { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--c); }
/* The pulse is a ring that grows and fades. It changes only transform and
   opacity, so the browser runs it off the main thread, and it stays smooth
   while the page is busy with each keystroke. */
.editor-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--c);
  opacity: 0;
  pointer-events: none;
}
.editor-dot.active::after { animation: pulse 1.2s cubic-bezier(0.2, 0.6, 0.4, 1) infinite; will-change: transform, opacity; }
@keyframes pulse {
  from { transform: scale(1); opacity: 0.6; }
  to { transform: scale(2.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .editor-dot.active::after { animation: none; opacity: 0.35; transform: scale(1.8); }
}
.btn.people-count { font-size: 13px; padding: 2px 6px; }

.follow-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  font-size: 14px;
}
.follow-bar[hidden] { display: none; }

/* The people dialog */
.people-dialog {
  width: min(440px, calc(100vw - 32px));
  max-height: min(70vh, 640px);
  padding: 16px 20px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--fg);
}
.people-dialog::backdrop { background: rgb(0 0 0 / 0.35); }
.people-dialog h2 { margin: 0 0 12px; font-size: 17px; }
.people-list { list-style: none; margin: 0; padding: 0; }
.person { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--border); }
.person:first-child { border-top: 0; }
.person-name { font-weight: 500; }
.person-tags { flex: 1; min-width: 0; color: var(--muted); font-size: 13px; }
.dialog-actions { display: flex; justify-content: flex-end; margin-top: 12px; }

/* Encrypted pads: the lock panel below the header, and the access section
   with the locked message or the access requests */
.btn.lock { color: var(--ok); border-color: var(--ok); }
.lock-panel {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  font-size: 14px;
}
.lock-panel p { margin: 0 0 8px; }
.panel-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 8px; }
.access {
  padding: 6px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--notice-bg);
  color: var(--notice-fg);
  font-size: 14px;
}
.access[hidden], .lock-panel[hidden] { display: none; }
.access-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 3px 0; }
.code {
  font-family: var(--mono);
  font-size: 13px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--surface-2);
  color: var(--fg);
}
.hint { color: var(--muted); font-size: 13px; }
.check { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: normal; }
.check input { width: auto; padding: 0; }
.open-form .check { display: inline-flex; margin: 12px 0 0; font-weight: normal; color: var(--muted); }
.btn:disabled { opacity: 0.5; cursor: default; }

/* Shared files, above the editor */
.files {
  max-height: 30vh;
  overflow: auto;
  padding: 6px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  font-size: 14px;
}
.files[hidden] { display: none; }
.file { display: flex; align-items: center; gap: 10px; padding: 3px 0; min-width: 0; }
.file .editor-dot { flex: none; }
.file-name { font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-size { color: var(--muted); flex: none; font-variant-numeric: tabular-nums; }
.file-status { color: var(--muted); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.file .btn { flex: none; text-decoration: none; }

/* Shown while files are dragged over the page */
.drop {
  position: fixed;
  inset: 12px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--accent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  color: var(--accent);
  font-size: 18px;
  font-weight: 600;
  pointer-events: none;
}
.drop[hidden] { display: none; }

/* Bottom bar */
.bar.bottom {
  border-bottom: 0;
  border-top: 1px solid var(--border);
  padding: 6px 16px;
  font-size: 13px;
}
.btn.small { font-size: 13px; padding: 3px 10px; }
.btn[aria-pressed="true"] { color: var(--fg); background: var(--surface-2); }

.meter { display: inline-flex; align-items: center; gap: 6px; color: var(--warn); }
.meter[hidden] { display: none; }
.meter[data-level="bad"] { color: var(--bad); }
.meter-track { width: 80px; height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.meter-fill { display: block; height: 100%; background: currentColor; }

@media (max-width: 560px) {
  .pad-name { order: 10; flex-basis: 100%; }
  .home { padding-top: 32px; }
}