* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.5 system-ui, sans-serif; }
#correct-app { display: flex; flex-direction: column; height: 100vh; }
#topbar { display: flex; gap: 1rem; align-items: center;
          padding: .5rem 1rem; border-bottom: 1px solid #ddd; }
#subject-label { font-weight: 600; }
/* The widths are set by app.js (`applyPaneSplitPct`); unset, the split is even. */
#panes { display: grid; grid-template-columns: var(--pdf-width, 1fr) auto var(--subject-width, 1fr);
         flex: 1; min-height: 0; }
/* `min-width: 0` stops content from setting the track width. Without it a wide
   table would squeeze #pdf-pane, whatever grid-template-columns says. */
#pdf-pane, #subject-pane { display: flex; flex-direction: column; min-height: 0; min-width: 0; }

/* The whole 8px is the hit area; only the thin line is drawn, and it widens on
   hover, focus and drag. */
#pane-divider { width: 8px; cursor: col-resize; touch-action: none; position: relative; }
#pane-divider::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%;
                        width: 1px; transform: translateX(-50%); background: #ddd; }
#pane-divider:hover::after, #pane-divider:focus-visible::after,
body.pane-dragging #pane-divider::after { width: 3px; background: #2b6cb0; }
#pane-divider:focus-visible { outline: 2px solid #2b6cb0; outline-offset: -1px; }
body.pane-dragging { cursor: col-resize; user-select: none; }
#pdf-toolbar { display: flex; gap: .5rem; align-items: center;
               padding: .5rem; border-bottom: 1px solid #eee; }
#pdf-scroll { overflow: auto; flex: 1; background: #f4f4f4; padding: .5rem; }
#pdf-scroll img { display: block; margin: 0 auto 1rem; max-width: 100%;
                  box-shadow: 0 1px 4px rgba(0,0,0,.2); background: #fff; }
#pdf-scroll img.in-range { outline: 3px solid #2b6cb0; }

/* One `.clause-block` per clause on the current page; there are often several. */
#page-clauses { display: flex; flex-direction: column; gap: 1rem;
                overflow: auto; flex: 1; padding: .5rem; min-height: 0; }
.page-empty-note { color: #666; padding: .5rem; }

.clause-block { border: 1px solid #ddd; border-radius: 4px; padding: .5rem; }
.clause-block.clause-target { border-color: #2b6cb0; border-width: 2px;
                               background: #eef5fc; }
.clause-heading { display: flex; gap: .5rem; align-items: baseline;
                  flex-wrap: wrap; font-weight: 600; margin-bottom: .4rem; }
.clause-page-source-note, .clause-claims-note { color: #666; font-size: .85em;
                                                 font-weight: normal; }

.clause-identity { display: grid; grid-template-columns: auto 1fr; gap: .4rem;
                    align-items: center; padding: .25rem 0; }
.clause-identity input { padding: .3rem; font: inherit; }

.clause-body-toolbar { display: flex; gap: .5rem; align-items: center;
                        padding: .25rem 0; }
.clause-body-preview, .clause-body-edit { max-height: 320px; overflow: auto;
                                           padding: .5rem; }
.clause-body-edit { font-family: ui-monospace, monospace; border: 0; resize: none;
                     width: 100%; }
.clause-block .CodeMirror { height: 320px; font-family: ui-monospace, monospace; }

/* Typeset HTML from `/api/render` (markdown_render.py). */
.clause-body-preview p { margin: 0 0 .8em; }
.clause-body-preview table { border-collapse: collapse; margin: .6em 0; width: auto; }
.clause-body-preview th, .clause-body-preview td { border: 1px solid #ddd;
                                                    padding: 4px 8px; vertical-align: top; }
.clause-body-preview th { background: #f4f6f8; font-weight: 600; text-align: left; }
.clause-body-preview math[display="block"] { display: block; margin: .8em 0; }
.clause-body-preview math { font-size: 1.05em; vertical-align: middle; }

/* LaTeX that `render_markdown` could not convert. Loud, so a failed conversion
   cannot be mistaken for missing text. */
.clause-body-preview .math-error {
  color: #b02525; background: #ffe3e3;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; padding: 0 3px; border-radius: 3px;
}

.clause-tables { max-height: 40vh; overflow: auto; padding: .25rem 0; min-width: 0; }
.clause-tables .table-caption { font-weight: 600; margin: .5rem 0 .25rem; }
/* Capping `.tabulator` at 100% makes its own `.tabulator-tableholder` scroll
   sideways, so a wide grid scrolls in place instead of widening the pane. */
.table-grid { min-width: 0; }
.table-grid .tabulator { max-width: 100%; }
.table-headers { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center;
                 margin: .25rem 0; }
.table-header-edit { width: 8rem; padding: .15rem .3rem; font: inherit; }
.table-grid-tools { display: flex; gap: .5rem; margin: .25rem 0; }

/* Shown by `announceTypesetFailure`. Loud, because the raw-source fallback
   otherwise looks like nothing went wrong. */
.typeset-failed {
  color: #b02525; background: #ffe3e3; border: 1px solid #f0b4b4;
  border-radius: 3px; padding: .35rem .5rem; margin: .5rem 0; font-size: 13px;
}

/* Typeset cells get the same MathML and error rules as the Preview; they need
   their own selectors because `.clause-body-preview` does not contain the grid. */
.table-grid math { font-size: 1.05em; vertical-align: middle; }
.table-grid .math-error {
  color: #b02525; background: #ffe3e3;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; padding: 0 3px; border-radius: 3px;
}

.clause-save-bar { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;
                    padding: .5rem 0; border-top: 1px solid #eee; }
.clause-notes { flex: 1; min-width: 8rem; padding: .3rem; font: inherit; }
.clause-label-chips label, .table-labels label { margin-right: .5rem; white-space: nowrap; }

/* Inside a chat client the screen opens on one clause, so the picker is hidden. */
.in-chat #standard-picker,
.in-chat #clause-filter {
  display: none;
}

#sign-in-error {
  color: #b00020;
}