/* The editor, on top of the site's paper and ink (/site.css). A page's
   components bring their own styles (components.tsx). */
.bar-inner { gap: 14px; }
.brand img { display: block; }
.where { color: var(--dim); font-size: 14px; white-space: nowrap; }
.people { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; min-width: 0; }
.person { font-size: 13px; padding: 2px 9px; border-radius: 99px; color: var(--paper); background: var(--hue); white-space: nowrap; }
.actions { display: flex; gap: 6px; }
.button { font: inherit; font-size: 14px; padding: 5px 11px; border-radius: 7px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); text-decoration: none; white-space: nowrap; cursor: pointer; }
.button:hover { background: var(--tint); }
.button[aria-pressed=true] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.loading { width: var(--wrap); margin: 40px auto; color: var(--dim); }
.why { color: oklch(55% 0.18 25); font-size: 14px; margin: 6px 0; }
.bar-why { width: var(--wrap); margin: 8px auto 0; }
.hint { color: var(--dim); font-size: 13px; margin: 4px 0 10px; }

/* Twelve hues for people; a tab picks one by its peer id. */
.hue-0 { --hue: oklch(60% 0.17 25); } .hue-1 { --hue: oklch(62% 0.16 55); } .hue-2 { --hue: oklch(64% 0.15 85); }
.hue-3 { --hue: oklch(60% 0.15 125); } .hue-4 { --hue: oklch(58% 0.14 155); } .hue-5 { --hue: oklch(58% 0.12 185); }
.hue-6 { --hue: oklch(58% 0.13 215); } .hue-7 { --hue: oklch(56% 0.16 255); } .hue-8 { --hue: oklch(55% 0.18 285); }
.hue-9 { --hue: oklch(57% 0.18 315); } .hue-10 { --hue: oklch(59% 0.18 345); } .hue-11 { --hue: oklch(55% 0.02 260); }

/* The page beside its panel. */
.desk { width: var(--wrap); margin: 28px auto 56px; display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 20px; align-items: start; }
.desk > .page { width: auto; margin: 0; }
.page { position: relative; color: var(--ink); }
.page .tx { display: block; outline: none; white-space: pre-wrap; word-wrap: break-word; min-height: 1lh; }
.page.picking [data-node] { cursor: crosshair; }
.page.picking [data-node]:hover { outline: 1px dashed var(--you); outline-offset: 2px; }
.missing { border: 1px dashed var(--faint); border-radius: 6px; padding: 8px 12px; margin: .6em 0; }
.missing-why { display: block; font-size: 13px; color: var(--dim); }
.empty { border: 1px dashed var(--line); border-radius: 6px; padding: 10px; color: var(--faint); font-size: 14px; text-align: center; }
.c-made { position: relative; }
.c-made::after { content: ""; position: absolute; inset: -4px; border: 1px dashed color-mix(in oklch, var(--you) 35%, transparent); border-radius: 6px; pointer-events: none; }

/* Blocks: a handle in the margin, a line where a drop will land. */
.block { position: relative; }
.grip {
  position: absolute; left: -30px; top: 2px; width: 22px; height: 26px; padding: 0;
  border: 0; border-radius: 5px; background: none; color: var(--faint); cursor: grab;
  font-size: 15px; line-height: 26px; opacity: 0; transition: opacity .12s;
}
/* A nested block's handle sits further out, so a container's and its first
   child's never overlap; only the innermost block under the pointer shows. */
.block .block > .grip { left: -52px; }
.block .block .block > .grip { left: -74px; }
.block:hover:not(:has(.block:hover)) > .grip, .grip:focus-visible, .block.selected > .grip, .block.picked > .grip { opacity: 1; }
.grip:hover { background: var(--tint); color: var(--ink); }
.block.selected, .block.picked { outline: 2px solid color-mix(in oklch, var(--you) 55%, transparent); outline-offset: 4px; border-radius: 4px; }
.block.drop-before::before, .block.drop-after::after {
  content: ""; position: absolute; left: 0; right: 0; height: 3px; border-radius: 2px; background: var(--you); z-index: 2;
}
.block.drop-before::before { top: -3px; }
.block.drop-after::after { bottom: -3px; }
.flag { position: absolute; right: 0; top: -18px; font-size: 11px; padding: 0 6px; border-radius: 4px 4px 0 0; background: var(--hue); color: white; z-index: 3; }
.badge { position: absolute; right: -26px; top: 2px; min-width: 18px; height: 18px; border-radius: 9px; background: oklch(80% 0.13 85); color: oklch(25% 0.05 85); font-size: 11px; line-height: 18px; text-align: center; }
.comment-mark { background: oklch(88% 0.12 90 / .55); border-bottom: 2px solid oklch(75% 0.15 85); }

/* Other people's carets. */
.cursors { position: absolute; inset: 0; pointer-events: none; }
.caret { position: absolute; left: 0; top: 0; width: 2px; background: var(--hue); }
.caret-name { position: absolute; left: 0; bottom: 100%; font-size: 11px; line-height: 1.4; padding: 0 5px; border-radius: 3px 3px 3px 0; background: var(--hue); color: white; white-space: nowrap; }

/* `/` in an empty block. */
.slash-menu { position: absolute; left: 0; top: 0; z-index: 6; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 6px; box-shadow: 0 6px 24px rgb(0 0 0 / .14); width: 220px; }

/* The source view. */
.source { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 16px; }
.source-text { width: 100%; min-height: 70vh; box-sizing: border-box; font: 13.5px/1.55 var(--mono); color: var(--ink); background: none; border: 1px solid var(--line); border-radius: 6px; padding: 12px; resize: vertical; tab-size: 2; }

/* The panel. */
.side { position: sticky; top: 72px; max-height: calc(100vh - 92px); overflow: auto; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; font-size: 14px; }
.side-tabs { display: flex; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--paper); z-index: 1; }
.side-tabs button { flex: 1; font: inherit; font-size: 13px; padding: 9px 4px; border: 0; background: none; color: var(--dim); cursor: pointer; border-bottom: 2px solid transparent; }
.side-tabs button[aria-selected=true] { color: var(--ink); border-bottom-color: var(--you); }
.side-body { padding: 12px 14px 16px; }
.side h3 { font-size: 14px; margin: 14px 0 6px; }
.side h3 code { font-size: 11px; color: var(--faint); font-weight: 400; }
.side section + section { border-top: 1px solid var(--line); margin-top: 12px; }
.side button:not(.side-tabs button, .reset, .page button) { font: inherit; font-size: 13px; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer; }
.side button:not(.side-tabs button, .reset, .page button):hover { background: var(--tint); }
.side button[aria-pressed=true]:not(.side-tabs button, .page button) { background: var(--ink); color: var(--paper); }
.side button:disabled { opacity: .5; cursor: default; }
.side input:not([type=checkbox], .page input), .side select, .side textarea { font: inherit; font-size: 13px; padding: 4px 7px; border-radius: 5px; border: 1px solid var(--line); background: none; color: var(--ink); min-width: 0; box-sizing: border-box; }
.side textarea { width: 100%; display: block; margin-bottom: 6px; }
.pencil { width: 100%; }
.rows { width: 100%; border-collapse: collapse; }
.rows th { text-align: left; font-weight: 400; font-family: var(--mono); font-size: 12px; padding: 3px 6px 3px 0; white-space: nowrap; }
.rows td { padding: 3px 0; }
.rows td input { width: 100%; }
.rows .value { display: flex; align-items: center; }
.rows .meta { display: flex; gap: 8px; font-size: 11px; min-width: 0; }
.rows .computed { color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.src { font-size: 11px; color: var(--dim); white-space: nowrap; }
.src-set { color: var(--you); }
.src-token { color: oklch(55% 0.15 150); }
.reset { border: 0; background: none; color: var(--faint); cursor: pointer; font-size: 14px; }
.add { display: flex; gap: 4px; margin-top: 8px; }
.add select { flex: 1.3; } .add input { flex: 1; }
.library { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.library button { width: 100%; text-align: left; }
.slash-menu .library { grid-template-columns: 1fr; }
.slash-menu .library button { font: inherit; font-size: 14px; padding: 5px 8px; border: 0; border-radius: 5px; background: none; color: var(--ink); cursor: pointer; }
.slash-menu .library button:hover, .slash-menu .library button:focus { background: var(--tint); }
.field { display: flex; flex-direction: column; gap: 3px; margin: 6px 0; font-size: 13px; }
.field > span { color: var(--dim); }
.field.check { flex-direction: row; align-items: center; gap: 6px; flex-wrap: wrap; }
.field.check > span { color: var(--ink); }
.field .as { flex-basis: 100%; }
.def { margin: 6px 0; }
.def-edit { width: auto; margin: 8px 0 0; padding: 12px 12px 12px 40px; font-size: 15px; }
.filter { display: flex; gap: 4px; margin: 12px 0 8px; }
.threads, .versions, .changes { list-style: none; padding: 0; margin: 0; }
.thread, .versions li { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin: 8px 0; }
.thread.resolved { opacity: .75; }
.thread .on { border: 0 !important; padding: 0 !important; background: none !important; text-align: left; color: var(--dim) !important; }
.thread q { color: var(--ink); }
.message { margin: 6px 0; }
.thread form { display: flex; gap: 4px; flex-wrap: wrap; }
.thread form input { flex: 1; }
.v-head { display: flex; justify-content: space-between; gap: 8px; }
.v-head time { color: var(--faint); font-size: 12px; }
.authors { color: var(--dim); font-size: 13px; margin: 2px 0 6px; }
.preview .page { width: auto; margin: 8px 0; padding: 20px; zoom: .55; }
.diff { font: 11.5px/1.45 var(--mono); white-space: pre-wrap; word-break: break-word; margin: 0; }
.diff .add { color: oklch(50% 0.14 150); display: block; } .diff .del { color: oklch(52% 0.17 25); display: block; }
.changes li { margin: 4px 0; }
.changes .refused { color: var(--dim); }

@media (max-width: 920px) {
  .desk { grid-template-columns: minmax(0, 1fr); }
  .side { position: static; max-height: none; }
}
@media (max-width: 640px) {
  .where, .bar a.button { display: none; }
  .grip { left: -24px; }
  .page { padding-left: 34px; }
  .actions .button { padding: 4px 7px; }
}