/* Shared content editors (ADR-031 C2): the prompt and lore editors and the edit-history component,
   loaded by the operator panel and the dashboard. Colours and spacing are the tokens both pages
   take from /picker.css; each page keeps its own frame (rail and views, or the Content space). */
  #prompts-section, #prompt-global-section, #prompt-channels-section { max-width:68rem; margin:0 0 var(--sp-3); }
  .editor-with-history { min-width:0; }
  /* Edit history: the diff is the visible thing; changed lines carry a bar, unchanged runs fold to a count. */
  .diff { margin:.3rem 0 .6rem; padding:0; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.88rem; line-height:1.45; white-space:pre-wrap; overflow-wrap:anywhere; max-height:28rem; overflow:auto; border:1px solid var(--line); border-radius:6px; }
  .diff span { display:block; padding:0 .6rem 0 .5rem; border-left:4px solid transparent; }
  .diff .add { border-left-color:var(--accent); background:color-mix(in srgb, var(--accent) 14%, var(--card)); }
  .diff .del { border-left-color:var(--err); background:color-mix(in srgb, var(--err) 12%, var(--card)); text-decoration:line-through; text-decoration-color:color-mix(in srgb, var(--err) 55%, transparent); }
  .diff .ctx { color:var(--muted); }
  .diff .fold { color:var(--muted); font-style:italic; background:var(--card); border-top:1px dashed var(--line); border-bottom:1px dashed var(--line); }
  .diff .field { color:var(--ink); font-family:inherit; font-weight:650; font-size:.85rem; background:var(--card); margin-top:.2rem; }
  .h-status { font-weight:600; margin:.4rem 0; }
  .h-entry { border-top:1px solid var(--line); padding:.35rem 0; }
  .h-entry > summary { cursor:pointer; display:flex; flex-wrap:wrap; gap:.25rem .8rem; align-items:baseline; }
  .h-entry > summary::before { content:"▸"; color:var(--muted); width:.8rem; } .h-entry[open] > summary::before { content:"▾"; }
  .h-action { font-weight:650; } .h-who, .h-when, .h-ref { color:var(--muted); font-size:.9rem; }
  .h-preview:not(:empty) { border-left:4px solid var(--line); padding:.1rem 0 .3rem .8rem; margin:.3rem 0 .5rem; }
  .h-preview h5 { margin:.2rem 0; } .h-clash { color:var(--err); font-weight:600; overflow-wrap:anywhere; }
  .h-tag { font-size:.75rem; font-weight:700; color:var(--accent); border:1px solid var(--accent); border-radius:999px; padding:0 .5rem; }
  .h-conflict { border-left:4px solid var(--accent); padding:.2rem 0 .4rem .9rem; margin:.6rem 0 1rem; }
  .h-conflict h4 { margin:.2rem 0; } .h-conflict h4 time { font-weight:normal; color:var(--muted); font-size:.9rem; }
  .h-field h5 { margin:.6rem 0 .1rem; font-size:.9rem; }
  .h-unchanged > summary { cursor:pointer; color:var(--muted); font-size:.9rem; margin:.5rem 0; }
  .h-fields textarea, .h-fields input[type=number] { width:100%; box-sizing:border-box; margin:0 0 .3rem; }
  .h-choice label { display:block; margin:.15rem 0; }
  .h-choices { margin:.6rem 0 .3rem; display:grid; grid-template-columns:auto minmax(0,1fr); gap:.35rem .8rem; align-items:baseline; }
  .h-choices dt { margin:0; } .h-choices dd { margin:0; color:var(--muted); font-size:.9rem; }
  @media(max-width:650px) { .h-choices { grid-template-columns:1fr; } .h-choices dd { margin:0 0 .4rem; } }
  .prompt-layout { display:grid; grid-template-columns:minmax(12rem, 1fr) minmax(0, 3fr); gap:1.5rem; }
  #prompt-editor > label, #prompt-channels-section > label { display:block; margin:.4rem 0; }
  #cp-reply-text [role=group] label { display:block; margin:.3rem 0; }
  #prompt-save { background:var(--accent); color:var(--bg); font-weight:650; }
  #prompt-delete.danger { color:var(--err); border-color:var(--err); }
  #prompt-list, #prompt-channel { width:100%; }
  #prompt-editor textarea { width:100%; box-sizing:border-box; }
  @media (max-width:650px) { .prompt-layout { grid-template-columns:1fr; } }
  #cp-system-prompt, #cp-reply-head, #cp-reply-tail { width: 100%; max-width: 60rem; font: inherit; }
  .manual-text, .affix-saved { white-space: pre-wrap; overflow-wrap: anywhere; }
  .affix-error { color: var(--err); }
  .saved { color: var(--muted); font-size: 0.9em; margin: 0 0 0.4rem; overflow-wrap: anywhere; }
  .lore-layout { display: grid; grid-template-columns: minmax(16rem, 1fr) minmax(0, 2fr); gap: var(--sp-3); }
  @media (max-width: 650px) { .lore-layout { grid-template-columns: 1fr; } }
  #lore-tree details { margin: .2rem 0; } #lore-tree details details { margin-left: .8rem; }
  #lore-tree summary { cursor: pointer; font-weight: 600; } #lore-tree .count { font-weight: normal; color: var(--muted); font-size: .85rem; }
  #lore-tree .lore-mod { display: block; width: 100%; text-align: left; margin: .1rem 0; padding: .3rem .5rem; border: 0; background: transparent; }
  #lore-tree .lore-mod:hover, #lore-tree .lore-mod.sel { background: var(--card); outline: 1px solid var(--line); }
  #lore-tree .lore-mod .glyph { display: inline-block; width: 1.2rem; color: var(--accent); }
  #lore-tree .lore-mod .id { font-size: .85rem; }
  #lore-tree .book-actions { margin: .3rem 0 .5rem; display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
  #lore-editor label, #lore-import label, #lore-test label { display: block; margin: .4rem 0 .1rem; }
  #lore-editor textarea, #lore-import textarea, #lore-test textarea, #lore-editor input:not([type=radio]):not([type=number]), #lore-import input[type=text] { width: 100%; }
  #lore-editor [role=group] label { display: inline; margin-right: .8rem; }
  .lore-read { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 14rem; overflow-y: auto; padding: .5rem .7rem; border: 1px solid var(--line); border-radius: 6px; background: var(--card); font-size: .92rem; }
  .lore-read .xref { padding: 0 .3rem; margin: 0 .1rem; border: 1px solid var(--accent); border-radius: 4px; background: transparent; color: var(--accent); font: inherit; font-size: .85rem; }
  .lore-read .xref.missing { border-color: var(--line); color: var(--muted); }
  .lore-bar { display: flex; height: 1.4rem; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; margin: var(--sp-1) 0; max-width: 68rem; }
  .lore-bar div { height: 100%; overflow: hidden; white-space: nowrap; font-size: .75rem; line-height: 1.4rem; padding: 0 .3rem; color: var(--bg); }
  .lore-bar .seg-fixed { background: var(--muted); } .lore-bar .seg-persona { background: var(--ink); } .lore-bar .seg-constant { background: var(--accent); }
  .lore-bar .seg-keyed { background: color-mix(in srgb, var(--accent) 60%, var(--card)); color: var(--ink); } .lore-bar .seg-index { background: color-mix(in srgb, var(--accent) 30%, var(--card)); color: var(--ink); }
  .lore-bar .seg-history { background: color-mix(in srgb, var(--muted) 45%, var(--card)); color: var(--ink); } .lore-bar .seg-free { background: var(--card); color: var(--muted); }
  #lore-test-fired li.constant { color: var(--ink); } #lore-test-fired li.keyed { color: var(--ink); } #lore-test-fired li.dropped { color: var(--err); }
  #lore-test-model, #lore-test-model-filter { width: 100%; max-width: 44rem; }
  #lore-tree .danger, #lore-editor .danger, #lore-bulk .danger, .recovery .danger { color: var(--err); border-color: var(--err); }
  .lore-row { display: flex; align-items: center; gap: .2rem; } .lore-row .lore-mod { flex: 1; min-width: 0; }
  #lore-tools, #lore-bulk { margin: .3rem 0 .5rem; } #lore-find { width: 100%; } #lore-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin: .3rem 0; }
  #lore-chips .chip.on { outline: 2px solid var(--accent); } #lore-bulk label.inline { display: inline; margin-right: .4rem; }
  .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; }
  /* The impact line: where an edit reaches and its per-turn token change (ADR-031 decision 3). */
  .impact:not(:empty), .h-impact { margin: .4rem 0; padding: .35rem .6rem; border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--card)); font-size: .92rem; overflow-wrap: anywhere; }
  .recovery { border-collapse: collapse; width: 100%; max-width: 68rem; margin: .5rem 0; }
  .recovery th, .recovery td { text-align: left; padding: .4rem .8rem .4rem 0; vertical-align: top; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
  .recovery th { color: var(--muted); font-weight: 600; font-size: .9rem; }
  .recovery td:last-child { white-space: nowrap; text-align: right; }
  @media (max-width: 40rem) { .recovery thead { display: none; } .recovery tr { display: block; padding: .5rem 0; border-bottom: 1px solid var(--line); }
    .recovery td { display: block; border: 0; padding: .1rem 0; } .recovery td:last-child { text-align: left; white-space: normal; } }
  .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  /* Persona faces: fixed avatar boxes, so an image that loads, fails or is cleared never moves the layout. */
  .face-row { display:flex; gap:1rem; align-items:center; } .face-row > div { flex:1; min-width:0; } #prompt-channel-saved { min-width:0; overflow-wrap:anywhere; }
  .face-box { flex:none; display:inline-block; width:64px; height:64px; border-radius:50%; overflow:hidden; background:var(--line); vertical-align:middle; }
  .face-box img { width:100%; height:100%; object-fit:cover; }
  #cp-face label { display:block; margin:.3rem 0; } #cp-face input { width:100%; max-width:40rem; }
  #prompt-faces { list-style:none; padding:0; margin:.5rem 0; overflow-wrap:anywhere; } #prompt-faces li { margin:.2rem 0; }
  /* A history diff (a face's long avatar URL, an unbroken name) wraps instead of widening a phone-width page. */
  #prompt-history summary { overflow-wrap:anywhere; }
  /* Long explanations fold: open on the panel and on wide screens, closed on phones (user.js). */
  details.about > summary { cursor:pointer; color:var(--muted); font-size:.9rem; margin:.35rem 0; }
  details.about.fold > summary h3 { display:inline; }
  .person-id { display: block; color: var(--muted); font-size: .8em; }   /* one way to name a person: the ID under the name */