/* The plain new-design frame (switchover stage 2, owner 2026-08-28).
 *
 * templates/v2/plain.html carries the pages that are neither deal pages nor
 * old-design pages: the sign-in screen and the admin area. It reuses the deal
 * frame's command bar and tokens; only what those pages need beyond it lives
 * here. Kept separate from app.css so the deal pages never pay for it and the
 * admin look can move without touching a deal rule.
 */

/* The text rail. The deal frame's #rail is a column of icons; the admin area
 * needs a column of NAMES, so it opts in with .plain and gets its own width
 * and row shape. Same left edge, same divider, so the two frames read as one
 * application. */
#rail.plain { width: 210px; flex: 0 0 auto; padding: 10px 8px;
              border-right: 1px solid var(--line2); overflow-y: auto;
              display: flex; flex-direction: column; gap: 1px; }
#rail.plain .rail-group { color: var(--tx3); font-size: 10.5px; font-weight: 700;
                          text-transform: uppercase; letter-spacing: .06em;
                          padding: 12px 8px 5px; }
#rail.plain .rail-item { display: block; padding: 6px 9px; border-radius: 3px;
                         color: var(--tx2); font-size: 12.5px;
                         text-decoration: none; white-space: nowrap;
                         overflow: hidden; text-overflow: ellipsis; }
#rail.plain .rail-item:hover { background: var(--bg2); color: var(--tx); }
#rail.plain .rail-item.active { background: var(--bg2); color: var(--tx);
                                font-weight: 700; }
#rail.plain .back { display: block; padding: 6px 9px; margin-bottom: 4px;
                    color: var(--tx3); font-size: 12px; text-decoration: none; }
#rail.plain .back:hover { color: var(--tx); }

/* The page body inside the plain frame. The deal pages each own their layout;
 * these pages share one — a readable column with room to breathe. */
.plain-inner { padding: 18px 22px 40px; max-width: 1180px; }
.plain-inner > h1 { font-size: 19px; margin: 0 0 4px; }
.plain-inner > h2 { font-size: 15px; margin: 22px 0 8px; }

/* A titled block of content — the admin pages' unit of layout. */
.section-row { display: flex; align-items: center; gap: 10px; margin: 20px 0 8px; }
.section-row h2 { margin: 0; }

/* "Nothing here yet", said quietly rather than as a blank screen. */
.empty { color: var(--tx3); font-size: 12.5px; padding: 14px 2px; }

/* The sign-in card. One panel, centred in the frame, nothing else on the page.
 * The height is the viewport less the command bar, so the card sits on the
 * middle of the screen rather than near its top. */
.signin-wrap { display: flex; align-items: center; justify-content: center;
               min-height: calc(100vh - 34px); padding: 0 20px; }
.signin-card { background: var(--bg1); border: 1px solid var(--line2);
               border-radius: 6px; padding: 30px 26px; max-width: 380px;
               width: 100%; text-align: center; }
.signin-card h1 { font-size: 18px; margin: 0 0 6px; }
.signin-card p { color: var(--tx3); font-size: 12.5px; margin: 0 0 18px; }

/* Admin oddments carried over from the old stylesheet, ported rather than
 * allowlisted: a flag on a row, an open-status mark, and the inline resolve
 * form on the problems page. The admin's list tables use the mockup's own
 * table component (.tbl in command-deck.css), not a rule of their own. */
.flag { color: var(--amber); font-weight: 700; }
.stt-open { color: var(--amber); font-weight: 700; }
.inline-resolve { display: flex; align-items: center; gap: 6px; margin-top: 5px; }

/* The column sorter decorates headers from JavaScript (static/colsort.js), so
 * these two classes never appear in a template and the CSS-parity guard cannot
 * see them. .ar is the arrow slot. The old design styled the same pair in its
 * own stylesheet, which went at switchover stage 5. */
.colsort-th{cursor:pointer;user-select:none}
.colsort-th:hover{color:var(--tx)}
.ar{color:var(--amber);font-size:9px;margin-left:4px}

/* The two-column form grid the add dialogs use (add a business, add a related
 * entity, add a related person). Ported from the old stylesheet at switchover
 * stage 3 rather than allowlisted: the dialogs moved onto this frame, so their
 * rules must live in this design's tokens. Inputs themselves are already
 * styled by command-deck.css. */
.iform { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.iform label { display: flex; flex-direction: column; gap: 3px;
               font-size: 10px; font-weight: 700; color: var(--tx3);
               text-transform: uppercase; letter-spacing: .07em; }
.iform label.wide { grid-column: 1 / -1; }