/* ============================================================================
   admin-editor-documents.css - the /editor Documents TAB.

   A STUB. It carries this header and no rules yet: the tab's components land in
   their own commit, and this file exists now so that `index.html` can link it
   in the same commit as the two sheets beside it. `scripts/bundle-css.mjs`
   THROWS on a linked stylesheet that does not exist ("bundle-css: missing
   ..."), so a link and its file have to arrive together or the build breaks for
   everybody.

   WHAT GOES IN HERE: the Documents tab inside the session workspace - the
   ordered document rail, the title field, the template picker and the rich-text
   body. Nothing from the templates GALLERY: that is
   `admin-editor-doc-templates.css`, a separate file, so that the tab and the
   gallery are never written by two hands in one place.

   FOUR RULES, each of which fails silently rather than loudly:

     1. EVERY CLASS IS PREFIXED `edtdoc-`. The admin bundle is ONE stylesheet
        loaded whole by every admin page and by /editor, so a bare `.foo {}`
        here is a global rule that lands on any element carrying that class
        anywhere in the panel - and because the editor sheets are linked late it
        WINS at equal specificity. That is not hypothetical: `.edt-page` and
        `.edt-header` both did it, and one of them flipped the whole Person page
        to left-to-right. `tests/editorCssIsolation.spec.ts` is the guard.
     2. THE FILENAME KEEPS ITS `admin-editor` PREFIX. `bundle-css.mjs`
        partitions the public bundle from the admin bundle on
        `href.startsWith('/css/admin')` and on nothing else, so a name like
        `editor-documents.css` would ship the whole admin panel's CSS to every
        marketing visitor, with a completely green build and no test to catch
        it.
     3. NO `direction: rtl`. The /editor page is English and LTR; the Hebrew it
        renders is data. The body editor is an RTL island declared with the
        `dir` and `lang` ATTRIBUTES on the element, never with a rule here.
        `tests/editorContentTranslation.spec.ts` asserts this page declares
        `direction` in exactly one place, and that place is the slide canvas in
        `admin-editor-templates.css`.
     4. NO `container-type`. A `cqw` resolves against the nearest container
        ancestor, and the editor already has one: the 1920x1080 slide box. A
        second container silently re-bases every size in the slide vocabulary.

   It is linked after `admin-editor.css`, which declares the `--edt-*` tokens
   this file reads.
   ============================================================================ */

/* The tab root, and the ONLY rule this file carries until the Documents tab
   lands. It is here rather than in the header comment because
   `tests/cssBraceBalance.spec.ts` asserts every sheet in `public/css` holds at
   least one rule: an empty file and an unreadable one look identical to a
   brace check, so "no rules at all" is a failure by design. The name is
   authoritative - the tab's root element carries `edtdoc-tab`. */
.edtdoc-tab {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ============================================================================
   D1  THE TAB'S TWO COLUMNS
   The rail on the left, the one open document on the right. Desktop first and
   usable on a tablet; the /editor shell already replaces every route but the
   session list below 767px, so there is no phone layout to write.
   ============================================================================ */

.edtdoc-split {
  display: grid;
  grid-template-columns: 335px minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  min-height: 0;
}

@media (max-width: 1024px) {
  .edtdoc-split {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* CAPPED, unlike the deck's stage beside it, and for the opposite reason. The
   deck's stage holds a 16:9 slide that only gets better the wider it is; this
   pane holds a DOCUMENT, and the student's own stylesheet caps its body at
   72ch. On a 27" the uncapped pane reached 1884px, so the Hebrew text pinned
   itself to the right-hand edge with roughly 1340px of blank paper beside it.
   The cap sits HERE rather than on `.sdoc`, which belongs to the student's
   sheet: that file ships to every public page, and an editor sheet may not
   claim a class out of it. */
.edtdoc-pane {
  min-width: 0;
  max-inline-size: 1000px;
  padding: 0.9rem;
  border-radius: 12px;
  background: var(--edt-surface-solid);
  box-shadow: inset 0 0 0 1px var(--edt-line);
}

.edtdoc-pane__empty {
  margin: 0;
  padding: 2rem 0.5rem;
  color: var(--edt-ink-3);
  font-size: 0.85rem;
  text-align: center;
}

/* ============================================================================
   D2  THE SAVE BAR
   About the STORED DRAFT and nothing else. What a student can read is the
   header's Publish button, and the two words must never be conflated.
   ============================================================================ */

.edtdoc-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
  padding: 0.55rem 0.75rem;
  border-radius: 10px;
  background: var(--edt-glass-strong);
  box-shadow: inset 0 0 0 1px var(--edt-line);
}

.edtdoc-bar__status {
  margin: 0;
  color: var(--edt-ink-2);
  font-size: 0.82rem;
}

.edtdoc-bar__ops {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* The phase colours the LEFT EDGE and never the whole bar: a bar that turns red
   under a sentence saying nothing was lost contradicts its own words. */
.edtdoc-bar--dirty {
  box-shadow: inset 3px 0 0 0 var(--edt-accent), inset 0 0 0 1px var(--edt-line);
}

.edtdoc-bar--conflict,
.edtdoc-bar--refused,
.edtdoc-bar--error {
  box-shadow: inset 3px 0 0 0 #b42318, inset 0 0 0 1px var(--edt-line);
}

.edtdoc-bar--blocked {
  box-shadow: inset 3px 0 0 0 var(--edt-ink-3), inset 0 0 0 1px var(--edt-line);
}

.edtdoc-btn {
  padding: 0.35rem 0.7rem;
  border: 0;
  border-radius: 8px;
  background: var(--edt-surface-solid);
  box-shadow: inset 0 0 0 1px var(--edt-line);
  color: var(--edt-ink);
  cursor: pointer;
  font-size: 0.78rem;
}

.edtdoc-btn:hover:not(:disabled) {
  color: var(--edt-accent-ink);
}

/* NO `color` HERE, DELIBERATELY, AND THAT IS THE WHOLE COMMENT. A `color` on
   this rule (0,2,0) outranks `.edtdoc-btn--primary`'s white (0,1,0) four lines
   below, so a disabled PRIMARY button paints grey ink on the blue fill and the
   label all but vanishes - measured at about 1.1:1. That is the resting state
   of the tab: Save is disabled until something is dirty, and Start a draft is
   disabled on the one screen where a lecture has no draft yet. Muting is the
   opacity's job alone, which is exactly what the sibling kit does
   (`.edt-btn:disabled` in admin-editor-home.css), and it cannot defeat a
   variant's own colour. */
.edtdoc-btn:disabled {
  cursor: default;
  opacity: 0.6;
}

.edtdoc-btn--primary {
  background: var(--edt-accent);
  box-shadow: none;
  color: #fff;
}

.edtdoc-btn--primary:hover:not(:disabled) {
  background: var(--edt-accent-ink);
  color: #fff;
}

.edtdoc-btn--danger:hover:not(:disabled) {
  color: #b42318;
}

/* ============================================================================
   D3  WHAT THE SERVER AND THE CLIENT REFUSED
   Rendered one line per reason and VERBATIM. These strings name a document by
   its Hebrew title, which is why every line carries dir="auto" in the markup.
   ============================================================================ */

.edtdoc-details {
  margin: 0 0 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 10px;
  background: rgba(180, 35, 24, 0.06);
  box-shadow: inset 0 0 0 1px rgba(180, 35, 24, 0.18);
  list-style: none;
}

.edtdoc-details--local {
  background: rgba(25, 26, 35, 0.04);
  box-shadow: inset 0 0 0 1px var(--edt-line);
}

.edtdoc-details__line {
  color: var(--edt-ink-2);
  font-size: 0.78rem;
  line-height: 1.5;
}

.edtdoc-blocked {
  margin: 0 0 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 10px;
  background: rgba(25, 26, 35, 0.04);
  color: var(--edt-ink-2);
  font-size: 0.78rem;
}

.edtdoc-conflict {
  margin: 0 0 0.75rem;
  padding: 0.7rem 0.85rem;
  border-radius: 10px;
  background: rgba(180, 35, 24, 0.06);
  box-shadow: inset 0 0 0 1px rgba(180, 35, 24, 0.18);
}

.edtdoc-conflict__lead {
  margin: 0 0 0.35rem;
  color: var(--edt-ink);
  font-size: 0.82rem;
  font-weight: 500;
}

.edtdoc-conflict__revs,
.edtdoc-conflict__advice {
  margin: 0 0 0.35rem;
  color: var(--edt-ink-2);
  font-size: 0.78rem;
}

/* ============================================================================
   D4  THE RAIL
   Its own bounded scroller: twelve documents cannot push the pane off the page,
   but a rail with no ceiling would still grow the tab past the viewport.
   ============================================================================ */

.edtdoc-rail {
  padding: 0.6rem;
  border-radius: 12px;
  background: var(--edt-surface-solid);
  box-shadow: inset 0 0 0 1px var(--edt-line);
  max-height: calc(100dvh - var(--edt-shell-header-h) - 14rem);
  overflow-y: auto;
  overscroll-behavior-y: contain;
}

.edtdoc-rail__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.edtdoc-rail__title {
  margin: 0;
  color: var(--edt-ink);
  font-size: 0.82rem;
  font-weight: 500;
}

.edtdoc-rail__count {
  color: var(--edt-ink-3);
  font-size: 0.75rem;
}

.edtdoc-rail__empty {
  margin: 0;
  padding: 1rem 0.25rem;
  color: var(--edt-ink-3);
  font-size: 0.78rem;
}

.edtdoc-rail__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.edtdoc-rail__item {
  border-radius: 8px;
}

.edtdoc-rail__item.is-active {
  background: rgba(0, 113, 227, 0.08);
}

/* A held-back document is drawn quieter, never hidden: it is still in the draft
   and still editable, and what changes is what a publish does with it. */
.edtdoc-rail__item.is-held .edtdoc-rail__doc-title {
  color: var(--edt-ink-3);
}

.edtdoc-rail__open {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  width: 100%;
  padding: 0.4rem 0.45rem;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.edtdoc-rail__order {
  min-width: 1.3rem;
  color: var(--edt-ink-3);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}

.edtdoc-rail__name {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  flex: 1;
}

/* One line, clipped. `dir="auto"` on the element is what keeps an RTL title's
   FIRST characters inside the box; the ellipsis then eats the end rather than
   the opening words. */
.edtdoc-rail__doc-title {
  overflow: hidden;
  color: var(--edt-ink);
  font-size: 0.8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.edtdoc-rail__doc-title.is-untitled {
  color: var(--edt-ink-3);
  font-style: italic;
}

.edtdoc-rail__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  color: var(--edt-ink-3);
  font-size: 0.68rem;
}

.edtdoc-rail__marks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
}

/* Two axes, two words: "unsaved" is fixed by Save, "pending" by Publish, and
   "held back" says a publish REMOVES the document rather than writing it. */
.edtdoc-mark {
  padding: 0.05rem 0.3rem;
  border-radius: 999px;
  font-size: 0.62rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.edtdoc-mark--unsaved {
  background: rgba(0, 113, 227, 0.12);
  color: var(--edt-accent-ink);
}

.edtdoc-mark--pending {
  background: rgba(105, 53, 216, 0.12);
  color: #4c26a0;
}

.edtdoc-mark--held {
  background: rgba(180, 35, 24, 0.1);
  color: #8c1c14;
}

.edtdoc-rail__ops {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0 0.45rem 0.4rem;
}

.edtdoc-rail__ready {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-right: auto;
  color: var(--edt-ink-2);
  cursor: pointer;
  font-size: 0.68rem;
}

.edtdoc-rail__op {
  padding: 0.15rem 0.35rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--edt-ink-3);
  cursor: pointer;
  font-size: 0.7rem;
}

.edtdoc-rail__op:hover:not(:disabled) {
  background: rgba(25, 26, 35, 0.05);
  color: var(--edt-ink);
}

.edtdoc-rail__op:disabled {
  cursor: default;
  opacity: 0.35;
}

.edtdoc-rail__op--danger:hover:not(:disabled) {
  color: #b42318;
}

.edtdoc-rail__add {
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.4rem;
  border: 0;
  border-radius: 8px;
  background: rgba(25, 26, 35, 0.04);
  color: var(--edt-ink-2);
  cursor: pointer;
  font-size: 0.75rem;
}

.edtdoc-rail__add:hover {
  color: var(--edt-accent-ink);
}

/* A published document this draft has dropped has no row above to carry its
   mark, so it gets its own short list rather than disappearing from the screen
   that decides its fate. */
.edtdoc-rail__dropped {
  margin-top: 0.75rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--edt-line);
}

.edtdoc-rail__dropped-title {
  margin: 0 0 0.3rem;
  color: var(--edt-ink-3);
  font-size: 0.7rem;
  font-weight: 500;
}

.edtdoc-rail__dropped-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.edtdoc-rail__dropped-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  padding: 0.2rem 0;
  color: var(--edt-ink-2);
  font-size: 0.74rem;
}

/* ============================================================================
   D5  THE INSPECTOR'S FIELDS
   ============================================================================ */

.edtdoc-field {
  display: block;
  margin-bottom: 0.6rem;
}

.edtdoc-field__label {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--edt-ink-3);
  font-size: 0.7rem;
  letter-spacing: 0.02em;
}

.edtdoc-field__input {
  width: 100%;
  padding: 0.4rem 0.55rem;
  border: 0;
  border-radius: 8px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--edt-line);
  color: var(--edt-ink);
  font-family: inherit;
  font-size: 0.85rem;
}

.edtdoc-field__input:disabled {
  background: rgba(25, 26, 35, 0.03);
  color: var(--edt-ink-3);
}

/* `--font-mono` from global.css, never a stack written out here: the dead
   src/assets/fonts/fonts.css omits 'Noto Sans Hebrew' and ends in Courier New,
   and it is the first file a search finds. */
.edtdoc-field__input--mono {
  font-family: var(--font-mono);
  font-size: 0.78rem;
}

.edtdoc-field__input--select {
  cursor: pointer;
}

.edtdoc-inspector__purpose {
  margin: 0 0 0.6rem;
  color: var(--edt-ink-2);
  font-size: 0.76rem;
  line-height: 1.5;
}

.edtdoc-inspector__warn {
  margin: 0 0 0.6rem;
  padding: 0.4rem 0.6rem;
  border-radius: 8px;
  background: rgba(180, 35, 24, 0.06);
  color: var(--edt-ink);
  font-size: 0.76rem;
  line-height: 1.5;
}

.edtdoc-inspector__rubric {
  margin: 0 0 0.75rem;
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
  background: rgba(25, 26, 35, 0.03);
  list-style: none;
}

.edtdoc-inspector__rubric-item {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.15rem 0;
  font-size: 0.72rem;
  line-height: 1.5;
}

.edtdoc-inspector__rubric-label {
  min-width: 11rem;
  color: var(--edt-ink);
}

.edtdoc-inspector__rubric-note {
  flex: 1;
  min-width: 0;
  color: var(--edt-ink-2);
}

.edtdoc-inspector__rules {
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}

.edtdoc-inspector__rule {
  display: flex;
  gap: 0.4rem;
  padding: 0.15rem 0;
  color: var(--edt-ink-2);
  font-size: 0.72rem;
  line-height: 1.5;
}

.edtdoc-inspector__severity {
  min-width: 3.2rem;
  color: var(--edt-ink-3);
  font-size: 0.66rem;
  text-transform: uppercase;
}

.edtdoc-inspector__rule--must .edtdoc-inspector__severity {
  color: #8c1c14;
}

/* ============================================================================
   D6  THE RICH-TEXT SURFACE
   The words themselves are drawn by public/css/student-documents.css, because
   the contenteditable wears the template's own `sdoc sdoc--<id>` root: the
   editor and the student page cannot diverge, and `.tpl-code` finds the
   --tpl-* tokens that only `.sdoc` declares. NOTHING HERE RESTYLES A DOCUMENT.
   These rules are the chrome around it.
   ============================================================================ */

.edtdoc-rich {
  margin-top: 0.4rem;
}

.edtdoc-rich__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem;
  margin-bottom: 0.3rem;
}

.edtdoc-rich__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.45rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--edt-ink-2);
  cursor: pointer;
  font-size: 0.72rem;
}

.edtdoc-rich__btn:hover {
  background: rgba(25, 26, 35, 0.05);
}

.edtdoc-rich__btn.is-on {
  background: rgba(0, 113, 227, 0.12);
  color: var(--edt-accent-ink);
}

.edtdoc-rich__btn-label {
  font-size: 0.68rem;
}

/* The contenteditable. It also carries `sdoc sdoc--<id>`, so everything about
   the TYPE is the student's sheet and everything here is the box around it. */
.edtdoc-rich__surface {
  min-height: 14rem;
  max-height: calc(100dvh - var(--edt-shell-header-h) - 22rem);
  padding: 0.75rem 0.9rem;
  border-radius: 10px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--edt-line);
  overflow-y: auto;
}

.edtdoc-rich__surface:focus {
  box-shadow: inset 0 0 0 2px var(--edt-accent);
  outline: none;
}

.edtdoc-rich__refusal {
  margin: 0.35rem 0 0;
  color: #8c1c14;
  font-size: 0.74rem;
  line-height: 1.5;
}