/* custom-pages.css — the Information reader (/Pages) and its editor (/Pages/Manage).
   Only what these pages introduce; .gp-split-*, .gp-card-*, .data-table, .gp-pager, .gp-badge-*,
   .info-notice and .error-panel are all global.

   NOTE: only /* */ comments in here. A // comment silently kills the rule that follows it through
   CSS parser error recovery. */

.cpage-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

/* ---------------------------------------------------------------------------
   THE READER (/Pages)
   --------------------------------------------------------------------------- */

/* Left panel rows. THE FONT IS STATED TWICE ON PURPOSE: a <button> inherits neither the page's
   family nor its size, so `font: inherit` fixes the typeface and the explicit size stops it
   resolving to body's 1rem, a quarter larger than every other panel in the portal (UI/Layout.md).
   Same treatment as .faq-info-row, which solved the same problem on the same layout. */
.cpage-row {
    display: block;
    width: 100%;
    text-align: left;
    font: inherit;
    font-size: 0.781rem;
    padding: 0.438rem 0.875rem 0.438rem 1.625rem;
    border: none;
    border-bottom: 1px solid var(--line-soft);
    background: none;
    color: inherit;
    cursor: pointer;
}

.cpage-row:last-child {
    border-bottom: none;
}

/* THE PANEL NEEDS ITS OWN [hidden] RULE. The attribute hides through the user-agent stylesheet's
   [hidden] { display: none }, and any AUTHOR display declaration outranks it. The panel is
   display: block today and would still be safe, but stating the rule is what stops a later
   `display:` on this class silently un-hiding every page at once. Fifth occurrence of this trap in
   the project. */
.cpage-panel[hidden] {
    display: none;
}

/* The body's own formatting comes from rich-text.css, which styles the ql- classes DeltaRenderer
   emits, and its SIZE comes from .gp-richtext — the type standard for every rendered Delta. Nothing
   here restates either. Colour is the page's to set. */
.cpage-body {
    color: var(--ink-2);
}

/* ---------------------------------------------------------------------------
   THE EDITOR LIST (/Pages/Manage)
   --------------------------------------------------------------------------- */

/* The drag grip is the AFFORDANCE, not the handle — the whole row is draggable. Muted so it reads
   as a texture rather than a control, and `cursor: grab` on the row is what actually signals the
   gesture. */
.cpage-grip {
    color: var(--ink-3);
    letter-spacing: -0.125rem;
    cursor: grab;
}

.cpage-list-row {
    cursor: grab;
}

.cpage-list-row.is-dragging {
    opacity: 0.45;
    cursor: grabbing;
}

/* NO RULE FOR THE PUBLISH CONTROL, and that is the point of this note.
   It was a .toggle-pill until 2026-09-03 and needed `flex: 0 0 auto` to stop it stretching inside
   .action-cell's flex container (UI/TogglePill.md's flex-parent caveat). It is now a plain
   .btn.btn-sm, which .action-cell already lays out correctly like every other button in the row —
   so the rule went away with the pill, and with it the portal's only .toggle-pill in an
   .action-cell. Nothing here is needed any more. */

/* The "published but empty" marker. It sits beside the title rather than in its own column because
   it is an exception rather than a value every row has — a column would be blank on almost every
   row and would still need explaining. */
.cpage-empty-badge {
    margin-left: 0.5rem;
}

/* ---------------------------------------------------------------------------
   THE EDIT PAGE (/Pages/Manage/Edit/{id}, /Pages/Manage/New)
   --------------------------------------------------------------------------- */

/* NO EDITOR HEIGHT RULE HERE, and that is deliberate. The 24rem long-form default in gp-editor.css
   is what this page wants; only a SHORT surface overrides it, and a custom page reads long-form.
   If an override is ever added it goes on `#cpage-body-editor .ql-editor` and NEVER on
   .ql-container — bounding the container clips Quill's link tooltip, which is a child of it, and
   strands dead space below the text. Both short-lived container floors in this project had that
   defect and were removed. */

/* BYTE-IDENTICAL TO .faq-field-label ON PURPOSE, letter-spacing included.
   There is no global field-label class, and this is now the FOURTH page-local copy —
   .blog-field-label, .faq-field-label, .survey-field-label and this one. Three of the four share
   this exact treatment; .blog-field-label is a genuinely different, larger, non-uppercase label.

   It first shipped with letter-spacing 0.031rem, copied from .role-detail-label — a SUBROW key
   label, which is a different component. Corrected to 0.044rem to match the field label it is
   actually a copy of, so that if these are ever promoted to one global the merge is a rename and
   not a visual change. Promoting them means editing three working pages, which is the sweep the
   project rules out, so it is a decision rather than a defect — recorded in the page's ToDo. */
.cpage-field-label {
    display: block;
    font-size: 0.688rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.044rem;
    color: var(--ink-3);
    margin: 0.875rem 0 0.25rem;
}

/* Bare input[type="text"] is globally styled; this only sets the width.
   34rem matches .faq-input-wide rather than inventing a third width — the FAQ pair form is the
   closest surface, a single-line title above a Quill editor in a padded card. */
.cpage-input-wide {
    width: 100%;
    max-width: 34rem;
}