/* ═══════════════════════════════════════════════════════════════════════════
   patriot.plus, /admin/chapter, the page-specific half of the paper look.

   The same relationship to live.css that /admin/chapters has: everything
   general (buttons, panels, inputs, pills, tables) comes from there, and only
   what that file lacks is here. The shapes are deliberately the ones the
   platform admin page already uses, because the two pages do the same job
   from the two ends of it and an officer who has seen one should recognise
   the other.
   ═══════════════════════════════════════════════════════════════════════════ */
body.paper { padding-bottom: 80px; }

.mast nav { display: flex; gap: 14px; flex-wrap: wrap; }
.mast nav a { font: 700 .7rem var(--mono); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; border-bottom: 2px solid transparent; }
.mast nav a:hover { border-bottom-color: var(--ink); }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 26px 0 8px; }
.page-head .s { color: var(--ink-2); font-size: .78rem; margin-top: 6px; }
.sec-head { display: flex; align-items: center; gap: 10px; border-bottom: 2px solid var(--ink); padding-bottom: 6px; margin-bottom: 12px; }
.sec-head .count { margin-left: auto; }
.sec-panel { margin-top: 16px; }
.hint { font-size: .76rem; line-height: 1.5; margin: 6px 0 0; color: var(--ink-2); }
.empty { padding: 14px 0; color: var(--ink-2); font-size: .86rem; }
#loading { padding: 40px 0; color: var(--ink-2); }

.gate { max-width: 520px; margin: 60px auto; }
.gate .h1 { margin-bottom: 10px; }
.gate p { margin-bottom: 16px; line-height: 1.5; }

/* The chooser for somebody who runs two chapters. It sits at the top right of
   the head rather than above the form, because it changes every section below
   it and not one field. */
#switchField { flex: 0 1 260px; }
#lookField { max-width: 420px; }
/* Two fields of the same width beat one field as wide as whatever is typed
   in it, which is what flex grow alone gives. */
#editForm .field.grow { flex: 1 1 260px; }

/* What an officer who is not a president sees: the same fields, readable,
   visibly not theirs to change. Emptying the form instead would hide the two
   settings this page exists to explain, and a chapter's own look is worth
   knowing even when changing it is somebody else's press. */
.readonly .input[disabled], .readonly .select[disabled], .readonly .textarea[disabled] { background-color: var(--grey); color: var(--ink-2); cursor: not-allowed; }
.readonly .check input[disabled] { cursor: not-allowed; }
/* The held words, one per line. A monospace column of short words, tall enough
   that a list of six does not have to be scrolled to be read, and never wide
   enough to push the page sideways. */
#modForm .textarea { min-height: 150px; overflow-x: auto; white-space: pre; }
#modForm .field { max-width: 520px; }
.role-note { font: 700 .62rem var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }

/* The officers table. Emails are long and phones are narrow, so it scrolls
   sideways inside its own box rather than pushing the page wide. */
.tbl-wrap { overflow-x: auto; border: 2px solid var(--ink); background: #fff; }
/* min-width is what actually makes the box above scroll. Without it the table
   shrinks to the phone instead, and an email address wraps in the middle of
   its own domain, which is the one thing in this table nobody can read wrong. */
/* 440 was four columns. Term ends is the fifth, and a date input has a width of
   its own that does not shrink, so the floor goes up with it rather than the
   email column being squeezed to nothing on a handset. */
table.tbl { width: 100%; min-width: 620px; border-collapse: collapse; font-size: .82rem; }
.tbl th, .tbl td { text-align: left; padding: 8px 10px; border-bottom: 1px dashed #999; vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl th { font: 700 .62rem var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); border-bottom: 2px solid var(--ink); white-space: nowrap; }
.tbl td.email { word-break: break-all; }
.tbl td.act { text-align: right; white-space: nowrap; }
.tbl tr.you td { background: #fffbe0; }
.tbl .pill.you { background: var(--yellow); }
/* A seat that has run out. The row is not struck through and not greyed away:
   it is a row a president still has to do something about, so it reads as
   flagged rather than as finished. */
.tbl tr.expired td { background: #ffeee9; }
.tbl tr.expired.you td { background: #fff3dd; }
.pill.gone { background: var(--bad); color: #fff; }
.tbl td.term { white-space: nowrap; }
.tbl td.term .none { color: var(--ink-2); }
/* The date box in a table cell. Narrow enough that five columns fit, and never
   the full width of the column, because a date is eight characters wide however
   much room it is given. */
.tbl .input.date { width: 9.4rem; padding: 4px 6px; font-size: .78rem; }
.tbl td.term .pill { margin-left: 6px; }

/* ONE LINE, and only when there is something to say. Yellow rather than red:
   a term ending in three weeks is a diary entry, not a fault. */
.notice { margin: 0 0 12px; padding: 9px 11px; border: 2px solid var(--ink); background: var(--yellow);
          font-size: .82rem; line-height: 1.5; }

/* The panel that gives the chapter away. Marked out like the Leave panel below
   it, because it is the other press on this page that an officer cannot undo on
   their own, and in the house ink rather than in the danger red, because handing
   over is the ordinary end of a term and not an accident. */
.handover { border-width: 3px; }
.handover .label { color: var(--ink); }
#handoverForm .field.grow { flex: 1 1 260px; }

/* WHAT HAPPENED. A list and not a table: three short things per line, one of
   which is a timestamp, and a table of those on a phone is four columns of
   nothing. The middle column is the meeting reference, which is why it is
   monospace and why it is not wide.

   CALLED audit AND NOT hist, because live.css already has a .hist: the
   projector histogram, ten grid columns and 34vh tall. This page loads that
   file, so the first draft of this list came out as a row of eight tall
   columns running off the side of a handset. */
.audit { list-style: none; margin: 0; padding: 0; border: 2px solid var(--ink); background: #fff; }
.audit-row { display: flex; align-items: baseline; gap: 10px; padding: 7px 11px; border-bottom: 1px dashed #999; font-size: .82rem; }
.audit-row:last-child { border-bottom: 0; }
.audit-row.you { background: #fffbe0; }
.audit-what { flex: 1 1 auto; }
.audit-ref { font: 700 .68rem var(--mono); letter-spacing: .06em; color: var(--ink-2); background: var(--grey);
            padding: 2px 5px; border: 1px solid #bbb; }
.audit-when { flex: 0 0 auto; color: var(--ink-2); font-size: .76rem; white-space: nowrap; }

/* One line under a form, in the form's own colour. Never a toast: the sentence
   is about the field the cursor is still in. */
.msg { display: none; font-size: .8rem; line-height: 1.5; padding: 8px 10px; border: 2px solid var(--ink); }
.msg.on { display: block; }
.msg.bad { background: #ffd9d2; }
.msg.good { background: #d8f3e1; }

/* The last panel on the page, and the only one that takes something away. */
.leave { margin-top: 30px; border-color: var(--bad); }
.leave .label { color: var(--bad); }

.modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 400; display: grid; place-items: center; padding: 16px; overflow-y: auto; }
.modal { width: min(520px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; }
.modal .h2 { margin-bottom: 12px; }
.modal p { line-height: 1.55; font-size: .9rem; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 16px; }

@media (max-width: 720px) {
  #switchField { flex: 1 1 100%; }
  #addForm .row .btn { margin-top: 0 !important; }
  #handoverForm .row .btn { margin-top: 0 !important; }
  /* Three things on one line becomes two lines with the time under them, rather
     than a timestamp squeezed against a sentence it has nothing to do with. */
  .audit-row { flex-wrap: wrap; gap: 4px 8px; }
  .audit-what { flex: 1 1 100%; }
}

/* ── THE CHAPTER'S TWO COLOURS AND ITS MARK ─────────────────────────────────
   A native colour input is a small swatch with a system picker behind it, and
   that is exactly right here: a president is choosing a colour, not typing a
   hex value, and every browser this page runs on already draws the one control
   that does that well. It is sized to the height of the inputs beside it so
   the row does not step. */
/* The field is held wider than its swatch so the label above it has room:
   at the swatch's own width the two labels in this row run into each other. */
.colour-field { min-width: 132px; }
.input.colour { width: 72px; height: 42px; padding: 3px; cursor: pointer; }
.mark-preview { align-items: center; gap: 12px; }
/* A checkerboard, so a mark with transparency in it reads as transparent
   rather than as white on a white page and then a surprise on a dark wall. */
.mark-preview img {
  width: 64px; height: 64px; object-fit: contain; border: 1px solid var(--rule);
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #e4e4e4 25%, transparent 25%, transparent 75%, #e4e4e4 75%),
    linear-gradient(45deg, #e4e4e4 25%, transparent 25%, transparent 75%, #e4e4e4 75%);
  background-size: 12px 12px;
  background-position: 0 0, 6px 6px;
}