/* ═══════════════════════════════════════════════════════════════════════════
   Andong Kwŏn 1476 — what this edition adds to the shared shell.

   css/main.css (structure) and css/samhan.css (skin) are the same files
   Relinkings carries; this sheet is only what neither has: the Inspection
   view — a leaf of the print beside the men it records — the report dialog,
   and a few masthead pieces. Every colour is a samhan token.
   ═══════════════════════════════════════════════════════════════════════════ */

:root { --fac-w: 42%; }

/* ── masthead pieces ─────────────────────────────────────────────────────── */
.app-title .app-title-hj {
  font-family: var(--fh);
  font-size: var(--hsz);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--acc2);
  align-self: center;
}
.rl-ap .rl-ap-status[data-state="loading"] { color: var(--acc); }
.topbar-action .n {
  font-family: var(--fm); font-size: 10px; letter-spacing: 0.1em;
  border: 1px solid var(--acc); color: var(--acc); padding: 1px 4px; margin-left: 2px;
}

/* ── the sidebar on narrow screens sits over the canvas, as the drawer does ── */
@media (max-width: 1100px) {
  .sidebar { position: absolute; left: 0; top: 0; bottom: 0; }
}

/* ── the inspection toolbar ──────────────────────────────────────────────── */
.insp-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 7px var(--gutter, 18px);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  flex: 0 0 auto;
  min-width: 0;
}
.insp-toolbar .spacer { flex: 1 1 auto; }
.fo-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fo-field { display: inline-flex; align-items: center; gap: 5px; }
.fo-field > span {
  font-family: var(--fm); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--color-text-secondary);
}
.fo-field .number-input { width: 58px; }
.fo-btn {
  height: 28px; min-width: 28px; padding: 0 9px;
  border: 1px solid var(--hair); background: transparent; color: var(--color-text-secondary);
  font-family: var(--fm); font-size: 12.5px; letter-spacing: 0.06em; border-radius: 2px;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
}
.fo-btn:hover { color: var(--color-text-primary); border-color: var(--color-text-primary); }
.fo-btn.on { color: var(--acc2); border-color: var(--acc2); }
.fo-btn:disabled { opacity: 0.4; cursor: default; }
.fo-side { display: inline-flex; }
.fo-side .fo-btn:first-child { border-right: 0; border-radius: 2px 0 0 2px; }
.fo-side .fo-btn:last-child { border-radius: 0 2px 2px 0; }
.fo-pos { font-size: 10.5px; letter-spacing: 0.1em; color: var(--color-text-secondary); white-space: nowrap; }
.fo-pos strong { color: var(--color-text-primary); font-weight: 400; }
.fo-search-wrap { position: relative; }
.fo-search-wrap .text-input { width: 200px; }
.fo-search-wrap .autocomplete-dropdown { min-width: 320px; }

/* ── the split: the leaf at left, the men at right ──────────────────────── */
.insp-split {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  position: relative;
}
.fac-pane {
  flex: 0 0 var(--fac-w);
  min-width: 240px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative;
  border-right: 1px solid var(--color-border);
  background: var(--pn2);
}
.fac-stage {
  flex: 1 1 auto;
  position: relative;
  overflow: hidden;
  cursor: grab;
  background: var(--pn2);
  isolation: isolate;
}
.fac-stage:active { cursor: grabbing; }
#fac-img {
  position: absolute; left: 0; top: 0;
  transform-origin: 0 0;
  will-change: transform;
  user-select: none; -webkit-user-drag: none;
  max-width: none;
  box-shadow: 0 0 0 1px var(--rule);
  background: #fff;
}
#fac-img.loading { opacity: 0.35; transition: opacity 0.2s; }
.fac-cite {
  position: absolute; left: 12px; bottom: 96px; z-index: 5;
  font-size: 10.5px; letter-spacing: 0.1em; color: var(--color-text-secondary);
  background: var(--pn); border: 1px solid var(--color-border); padding: 4px 8px;
  pointer-events: none; max-width: calc(100% - 24px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fac-tools { top: 12px; right: 12px; }
.fac-strip {
  flex: 0 0 84px;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 6px 8px;
  border-top: 1px solid var(--color-border);
  background: var(--pn);
  scrollbar-width: thin;
}
.strip-item {
  flex: 0 0 auto;
  width: 46px; height: 70px;
  border: 1px solid var(--hair); background: var(--pn2); padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  position: relative; overflow: hidden; border-radius: 2px;
}
.strip-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
.strip-item span {
  position: relative; z-index: 1; font-family: var(--fm); font-size: 10px; letter-spacing: 0.06em;
  background: var(--pn); color: var(--color-text-secondary); width: 100%; text-align: center; padding: 1px 0;
}
.strip-item:hover { border-color: var(--color-text-primary); }
.strip-item.on { border-color: var(--acc2); box-shadow: 0 0 0 1px var(--acc2); }
.strip-item.on span { color: var(--acc2); }

.insp-gutter {
  flex: 0 0 6px;
  cursor: col-resize;
  background: transparent;
  position: relative;
  z-index: 6;
  margin-left: -3px;
}
.insp-gutter:hover, .insp-gutter.on { background: var(--acc2); opacity: 0.5; }

.insp-right {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.page-canvas-wrap {
  flex: 1 1 60%;
  min-height: 160px;
  position: relative;
  overflow: hidden;
}
#page-graph { position: absolute; inset: 0; }
.nb-stage { position: absolute; inset: 0; overflow: hidden; cursor: grab; background: var(--pn2); isolation: isolate; }
.nb-stage:active { cursor: grabbing; }
#nb-img { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; user-select: none; -webkit-user-drag: none; max-width: none; line-height: 0; }
/* The matplotlib render, inlined as SVG with its sheet removed: the stage
   shows through, and the notebook's black, white and light blue become
   tokens set for each theme's background — dark ink and a full light blue on
   the pale sheet; a softened light line and a deeper blue on the dark one, so
   neither glares. Lines keep a constant width on screen whatever the zoom
   (vector-effect), because the notebook drew them for a 6000-pixel figure. */
:root {
  --nb-line: #2A2720;               /* ink, a step softer than the text */
  --nb-glyph: #17150F;
  --nb-node: #9CC6DE;               /* the notebook's lightblue, a shade deeper */
  --nb-node-edge: #5E93B8;
  --nb-node-fill-opacity: .9;
}
html[data-theme="dark"] {
  --nb-line: #C9C4B4; --nb-glyph: #EDEAE0; --nb-node: #4F7FA6; --nb-node-edge: #8FB4D6; --nb-node-fill-opacity: .75;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --nb-line: #C9C4B4; --nb-glyph: #EDEAE0; --nb-node: #4F7FA6; --nb-node-edge: #8FB4D6; --nb-node-fill-opacity: .75;
  }
}
#nb-img svg { display: block; fill: var(--nb-glyph); }
#nb-img svg * { stroke-linejoin: round; stroke-linecap: butt; }   /* matplotlib's own rule, scoped */
#nb-img .nb-line { fill: none; stroke: var(--nb-line); vector-effect: non-scaling-stroke; stroke-width: 1.4px; }
#nb-img .nb-ink { fill: var(--nb-line); stroke: var(--nb-line); }
#nb-img .nb-box { fill: var(--pn2); stroke: var(--pn2); }
#nb-img .nb-node { fill: var(--nb-node); fill-opacity: var(--nb-node-fill-opacity); stroke: var(--nb-node-edge); stroke-opacity: .9; stroke-width: 1.5; }
#nb-img.loading { opacity: 0.35; }
.page-canvas-wrap[data-view="notebook"] #page-graph, .page-canvas-wrap[data-view="notebook"] #page-legend,
.page-canvas-wrap[data-view="notebook"] #pg-redraw, .page-canvas-wrap[data-view="notebook"] #pg-svg { visibility: hidden; }
.page-canvas-wrap[data-view="drawing"] .nb-stage { visibility: hidden; }
.pane-switch {
  position: absolute; top: 12px; left: 12px; z-index: 12; display: flex;
  background: var(--pn); border: 1px solid var(--color-border);
}
.pane-switch button {
  background: none; border: 0; padding: 5px 10px;
  font-family: var(--fm); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-text-secondary); border-bottom: 2px solid transparent;
}
.pane-switch button:hover { color: var(--color-text-primary); }
.pane-switch button.on { color: var(--acc2); border-bottom-color: var(--acc2); }
#page-legend { position: absolute; bottom: 12px; left: 12px; z-index: 10; max-width: 220px; opacity: 0.92; }
.nb-cite { position: absolute; left: 12px; bottom: 12px; z-index: 5; font-size: 10.5px; letter-spacing: 0.1em; color: var(--color-text-secondary); background: var(--pn); border: 1px solid var(--color-border); padding: 4px 8px; pointer-events: none; }
#page-legend .legend-caption { display: none; }
#page-legend .legend-sub { white-space: normal; }
@media (max-height: 760px) { #page-legend { display: none; } }
.page-canvas-wrap .canvas-floating-toolbar { top: 12px; right: 12px; }

/* the lists under the drawing */
.insp-lists {
  flex: 0 0 40%;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--color-border);
  background: var(--pn);
  min-width: 0;
}
.insp-tabs { margin: 0; padding: 0 var(--gutter, 18px); flex: 0 0 auto; }
.insp-tabs .tab .n { color: var(--color-text-faint); margin-left: 5px; }
.insp-tabs .tab.on .n { color: var(--acc2); }
.insp-tabs .tab-spacer { flex: 1 1 auto; }
.insp-tabs .tab-act {
  background: none; border: 0; font-family: var(--fm); font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--color-text-faint); padding: 7px 0 8px; margin-left: 12px;
}
.insp-tabs .tab-act:hover { color: var(--acc2); }
.list-scroll { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.ent-list { display: flex; flex-direction: column; }
.ent-empty { padding: 14px var(--gutter, 18px); font-size: 13.5px; color: var(--color-text-faint); font-style: italic; }

.ent-row {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.2fr) auto;
  align-items: baseline;
  column-gap: 10px;
  padding: 5px var(--gutter, 18px);
  border-bottom: 1px solid var(--color-border);
  font-size: 13.5px;
  cursor: pointer;
  min-width: 0;
}
.ent-row:hover { background: var(--color-surface-hover); }
.ent-row.on { background: var(--color-surface-hover); box-shadow: inset 2px 0 0 var(--acc2); }
.ent-row.ctx { opacity: 0.62; }
.ent-row.ctx:hover, .ent-row.ctx.on { opacity: 1; }
.ent-row .e-name { font-family: var(--fh); font-size: 14px; color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ent-row .e-name .e-hg { font-family: var(--fk); font-size: 12.5px; color: var(--color-text-secondary); margin-left: 6px; }
.ent-row .e-roman { font-style: italic; color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; }
.ent-row .e-office { font-family: var(--fh); font-size: 12.5px; color: var(--color-text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ent-row .e-meta { font-family: var(--fm); font-size: 10.5px; letter-spacing: 0.06em; color: var(--color-text-faint); white-space: nowrap; display: flex; gap: 8px; align-items: baseline; }
.ent-row .e-meta .e-fol { color: var(--acc2); border-bottom: 1px dotted var(--acc2); cursor: pointer; }
.ent-row .e-meta .e-note { color: var(--acc); cursor: help; }
.ent-row .e-meta .e-gen { color: var(--color-text-secondary); }
.ent-row.rel { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; }
.ent-row.rel .e-arrow { font-family: var(--fm); font-size: 11.5px; letter-spacing: 0.06em; color: var(--color-text-secondary); white-space: nowrap; }
.ent-row.rel .e-arrow .hj { font-family: var(--fh); font-size: 13.5px; color: var(--color-text-primary); }
.ent-row.rel .e-arrow.sil .hj { color: var(--color-has-sil, var(--color-accent-secondary)); }
.ent-row.rel .e-name.tgt { text-align: right; }
.ent-row.rel .e-name.tgt .e-hg { margin-left: 0; margin-right: 6px; }

.note-item {
  padding: 8px var(--gutter, 18px);
  border-bottom: 1px solid var(--color-border);
  font-size: 13.5px; line-height: 1.5; color: var(--color-text-secondary);
  cursor: pointer;
}
.note-item:hover { background: var(--color-surface-hover); }
.note-item .n-who { font-family: var(--fh); color: var(--color-text-primary); font-size: 14px; }
.note-item .n-kind {
  font-family: var(--fm); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-text-faint); margin-right: 8px;
}
.note-item .n-kind.machine { color: var(--acc); }
.note-item .n-text { display: block; margin-top: 2px; }

/* ── small screens ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .insp-split { flex-direction: column; overflow-y: auto; }
  .fac-pane { flex: 0 0 auto; height: 62vh; min-height: 320px; border-right: 0; border-bottom: 1px solid var(--color-border); }
  .insp-gutter { display: none; }
  .insp-right { flex: 0 0 auto; }
  .page-canvas-wrap { flex: 0 0 auto; height: 52vh; min-height: 280px; }
  .insp-lists { flex: 0 0 auto; max-height: none; }
  .list-scroll { max-height: 60vh; }
  .ent-row { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; }
  .ent-row .e-office { display: none; }
  .fo-search-wrap .text-input { width: 150px; }
  #page-legend { display: none; }
  /* the sheet and the render on a touch screen: a vertical drag scrolls the
     page, a horizontal drag pans, two fingers zoom (d3 takes the touches);
     set as a style attribute too, in inspection.js, because d3-zoom writes
     touch-action: none inline on touch devices */
  #fac-stage, #nb-stage { touch-action: pan-y; }
  .right-drawer { width: min(var(--drawer-width), 100vw); min-width: 0; }
}
@media (max-width: 600px) {
  /* the record drawer never exceeds the screen; it overlays from the right */
  .right-drawer { width: 100vw; min-width: 0; max-width: 100vw; }
  .ent-row { grid-template-columns: minmax(0, 1fr) auto; }
  .ent-row .e-roman { display: none; }
  .fac-cite { display: none; }
  .fo-pos { display: none; }
  .modal-body { padding: 12px 14px 20px; }
  /* the status bar keeps to one line: the counts and the selection; the message and the page links go */
  .bottom-status-bar { flex-wrap: nowrap; overflow: hidden; white-space: nowrap; }
  .bottom-status-bar #status-message, .bottom-status-bar .status-pages, .bottom-status-bar .status-pages + .status-sep { display: none; }
  .bottom-status-bar #status-sel { overflow: hidden; text-overflow: ellipsis; }
}
@media (prefers-reduced-motion: reduce) {
  #fac-img.loading { transition: none; }
}
@media print {
  .samhan-imprint, .top-bar, .insp-toolbar, .fac-strip, .fac-tools, .canvas-floating-toolbar,
  .bottom-status-bar, .sidebar, .right-drawer { display: none !important; }
}

/* ── reader reports, the back matter links ──────────────────── */
.modal.report { width: min(620px, 96vw); }
.report .lede { font-size: 13.5px; color: var(--color-text-secondary); line-height: 1.55; margin: 0 0 12px; }
.rp-row { display: grid; grid-template-columns: 110px 1fr; gap: 6px 12px; align-items: start; margin-bottom: 8px; }
.rp-row label { font-family: var(--fm); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-secondary); padding-top: 6px; }
.rp-row label small { display: block; text-transform: none; letter-spacing: 0; color: var(--color-text-faint); }
.rp-row textarea, .rp-row input[type=text] { width: 100%; box-sizing: border-box; font: 13px/1.45 var(--fb); color: var(--color-text-primary); background: var(--bg); border: 1px solid var(--color-border); border-radius: 2px; padding: 5px 8px; resize: vertical; }
.rp-row textarea:focus, .rp-row input:focus { outline: none; border-color: var(--acc2); }
.rp-row .hanja { font-size: 15px; padding-top: 3px; }
.rp-row .mono { padding-top: 5px; }
.rp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rp-actions { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.rp-actions #rp-status { font-size: 11.5px; color: var(--color-text-faint); }
.rp-actions #rp-status.err { color: var(--acc); }
.status-pages a { color: var(--color-text-faint); text-decoration: none; margin-left: 8px; letter-spacing: .1em; }
.status-pages a:hover { color: var(--acc2); }
@media (max-width: 700px) { .rp-row { grid-template-columns: 1fr; gap: 2px; } .status-pages { display: none; } }
.d-cite-row .btn { margin-right: 6px; }
a.btn.d-rl { text-decoration: none; }

/* ── legibility: the shared module's small labels, raised for this edition without touching the module ── */
body .sg-tools .tool-group > h3, body .sg-tools .tool-group-head h3 { font-size: 11.5px; }
body .sg-tools .form-group label, body .sg-tools .field-label { font-size: 10.5px; }
body .sg-tools .text-input, body .sg-tools .dropdown-input, body .sg-tools .number-input { font-size: 13.5px; }
body .sg-tools .number-input { font-size: 13.5px; }
body .sg-tools .btn { font-size: 13.5px; }
body .sg-tools .btn-sm { font-size: 12.5px; }
body .sg-tools .clear-graph-hint { font-size: 12.5px; }
body .sg-tools .tool-mini-btn { font-size: 10.5px; }
body .sg-tools .tool-check { font-size: 13.5px; }
body .sg-tools .ac-item { font-size: 13.5px; }
body .sg-tools .ac-sub { font-size: 12.5px; }
body .sg-tools .ac-meta { font-size: 10.5px; }
body .sg-tools .path-node-label { font-size: 10.5px; }
body .sg-tools .path-node-remove-btn { font-size: 12.5px; }
body .sg-tools .specific-colors-details > summary { font-size: 10.5px; }
body .sg-tools .appearance-row.is-tight label { font-size: 10.5px; }
body .sg-tools .tool-toggle-label { font-size: 13.5px; }
body .sg-tools .patriline-card-n { font-size: 10.5px; }
body .sg-tools .patriline-card .icon-btn { font-size: 13.5px; }
body .sg-tools .empty-patrilines { font-size: 12.5px; }
body .samhan-graph .floating-node-actions .pill-btn { font-size: 10.5px; }
body .graph-merge-bar { font-size: 14px; }
body .graph-merge-bar button { font-size: 11.5px; }
body .sg-disambig .sg-d-sub { font-size: 13.5px; }
body .sg-disambig .sg-d-item .s { font-size: 12.5px; }
body .sg-disambig .sg-d-item .m { font-size: 10.5px; }
body .samhan-graph .tooltip { font-size: 12.5px; }
body .samhan-graph .tooltip .tt-line { font-size: 10.5px; }
body .samhan-graph-legend { font-size: 12.5px; }
body .samhan-graph-legend .legend-title { font-size: 10.5px; }
body .samhan-graph-legend .legend-rel { font-size: 11.5px; }
body .samhan-graph-legend .legend-sub { font-size: 10.5px; }
body .samhan-graph-legend .legend-caption { font-size: 10.5px; }
body .samhan-graph-legend .legend-reset { font-size: 10px; }