/* The editor on the Knowledge graphs tab's node panel (graph-editor.js) and the Studio's Beats mode (beat-studio.js).
   Kept apart from knowledge-graphs.css and mission-studio.css on purpose, so the founder page's own changes merge
   without a conflict (the founder, 2026-10-14: the edit panel is made bigger, at least half the screen at desktop width). */

/* The panel: half the screen at desktop width, never wider than the work area, the whole width on a phone. */
.knowledge-graphs .kg-panel { width: min(100%, max(50vw, 560px)); padding: 20px 24px 28px; }
@media (max-width: 900px) { .knowledge-graphs .kg-panel { width: 100%; } }

/* A row of the facts: label and words, with a pencil at the top right. */
.knowledge-graphs .kg-facts { display: block; margin: 0 0 14px; }
.ge-row { position: relative; display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 4px 12px; padding: 10px 44px 10px 0; border-top: 1px solid var(--desk-rule, #dce4df); }
.ge-row:first-child { border-top: 0; }
.ge-row dt { font: 600 12px/1.5 var(--sans); color: var(--desk-muted, #53685f); }
.ge-row dd { margin: 0; }
.ge-row.is-editing > dd { display: none; }
.ge-block { position: relative; }
.ge-block > .kg-h { padding-right: 44px; }
.ge-block.is-editing > :not(.kg-h):not(.ge-form):not(.ge-pencil) { display: none; }
.ge-pencil { position: absolute; top: 6px; right: 0; display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--line-strong, #b9c6bf); border-radius: 8px; background: #fff; color: var(--ink); cursor: pointer; }
.ge-block > .kg-h .ge-pencil { top: 8px; }
.ge-pencil:hover, .ge-pencil[aria-expanded="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.ge-pencil:focus-visible { outline: 3px solid #a33d50; outline-offset: 2px; }
.ge-pending { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font: 500 11px/1.6 var(--mono); background: #f6e7c8; color: #8a5a12; }
.ge-readonly, .ge-hint { margin: 6px 0; color: var(--desk-muted, #53685f); }
.ge-readonly-tag { margin-left: auto; padding-right: 0; font: 500 11px/1.6 var(--mono); color: var(--desk-muted, #53685f); }

/* The form a pencil opens. */
.ge-form { grid-column: 1 / -1; display: grid; gap: 10px; margin: 8px 0 4px; padding: 14px; border: 1.5px dashed var(--kg-blue-soft, #8fb0c4); border-radius: 10px; background: #f9fbfa; }
.ge-form label { display: grid; gap: 4px; font: 600 13px/1.4 var(--sans); }
.ge-form input, .ge-form textarea { width: 100%; box-sizing: border-box; font: 15px/1.45 var(--sans); padding: 8px 10px; border: 1px solid var(--line-strong, #b9c6bf); border-radius: 6px; background: #fff; color: var(--ink); }
.ge-form textarea { resize: vertical; }
.ge-form input:focus-visible, .ge-form textarea:focus-visible { outline: 3px solid #a33d50; outline-offset: 1px; }
.ge-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ge-note { margin: 0; min-height: 1.4em; }
.ge-studio { justify-self: start; }

/* The tools under the status line, and the import's diff. */
.ge-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; }
.ge-import { display: grid; gap: 8px; margin: 0 0 14px; padding: 12px; border: 1.5px dashed var(--kg-blue-soft, #8fb0c4); border-radius: 10px; }
.ge-import[hidden] { display: none; }
.ge-import label { display: grid; gap: 4px; font: 600 13px/1.4 var(--sans); }
.ge-import input { font: 15px/1.45 var(--sans); padding: 8px 10px; border: 1px solid var(--line-strong, #b9c6bf); border-radius: 6px; }
.ge-diffs li { overflow-wrap: anywhere; }

/* Questions, beats and proposals. */
.ge-questions { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.ge-beats li { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.ge-status { display: inline-block; padding: 1px 8px; border-radius: 999px; font: 500 11px/1.6 var(--mono); background: var(--kg-blue-fill); color: var(--kg-blue); }
.ge-status.is-waiting, .ge-pending.is-waiting { background: #f6e7c8; color: #8a5a12; }
.ge-status.is-sent, .ge-status.is-checking { background: var(--kg-blue-fill); color: var(--kg-blue); }
.ge-status.is-merged { background: var(--kg-green-fill); color: var(--kg-green); }
.ge-status.is-person { background: #f8e1e1; color: #8b2b2b; }
.ge-diff { overflow-wrap: anywhere; }

/* Missions: a dropdown a road and grade, opening to thumbnails. */
.ge-missions { display: grid; gap: 8px; }
.ge-group { border: 1px solid var(--desk-rule, #dce4df); border-radius: 8px; background: #fff; }
.ge-group > summary { cursor: pointer; padding: 10px 12px; font: 600 14px/1.4 var(--sans); }
.ge-group > summary:focus-visible { outline: 3px solid #a33d50; outline-offset: 2px; }
.ge-thumbs { list-style: none; margin: 0; padding: 4px 12px 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.ge-thumbs a { display: grid; gap: 4px; text-decoration: none; color: var(--ink); font: 13px/1.35 var(--sans); }
.ge-thumbs img, .ge-thumb-tile { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; background: var(--kg-blue-fill); }
.ge-thumb-tile { display: grid; place-items: center; font: 600 28px var(--serif); color: var(--kg-blue); }

/* The Studio's Beats mode. */
.bs .bs-resolved { margin: -4px 0 0; color: var(--desk-muted, #53685f); min-height: 1.4em; }
.bs-must { display: grid; gap: 10px; }
.bs-must label { display: grid; gap: 4px; font: 600 14px/1.3 var(--sans); }
.bs-must input { width: 100%; min-height: 44px; font: 16px/1.4 var(--sans); padding: 8px 10px; border: 1.5px solid var(--ink); border-radius: 10px; background: #fff; color: var(--ink); }
.bs-examples { margin-top: 14px; }

@media (prefers-reduced-motion: reduce) { .ge-pencil { transition: none; } }
@media (max-width: 700px) { .ge-row { grid-template-columns: minmax(0, 1fr); } }