/* The platform's screens (P3, 2026-10-12): sign-in, the firm's page, the operator's console, a client's devices.
   Colours come from tokens.css only (checks/hilda_tokens_check.py reads this file too); the components are hilda.css's:
   hl-bar, hl-sec, hl-table, hl-btn, hl-tabs, hl-status, hs-in, hs-menu. This file adds only the layout those do not have. */

/* ---------------------------------------------------------------- the way in (auth.html) */
body.pf-body{background:var(--paper);color:var(--ink);margin:0;font-family:var(--font-sans)}
.au{max-width:440px;margin:0 auto;padding:12vh 16px 48px;display:grid;gap:14px}
.au h1{font-size:30px;line-height:36px;margin:0;font-weight:600;letter-spacing:-.01em}
.au p{margin:0;color:var(--ink-2);line-height:22px}
.au form{display:grid;gap:12px;margin-top:6px}
.au label{display:grid;gap:4px;font-size:14px;color:var(--ink-2)}
.au .hs-in{max-width:none;height:40px;font-size:15px}
.au .hs-in.au-code{font-size:20px;letter-spacing:.18em;font-variant-numeric:tabular-nums}
.au .hl-btn{height:40px;justify-content:center;text-decoration:none}
.au a.hl-btn{display:inline-flex;align-items:center}
.au .au-terms{display:flex;gap:8px;align-items:flex-start;font-size:14px;line-height:20px;color:var(--ink-2)}
.au .au-terms input{margin-top:3px}
.au-said{min-height:1.5em;color:var(--ink)}
.au-said[data-tone="err"]{color:var(--danger)}
.au-alt{font-size:14px;display:flex;gap:16px;flex-wrap:wrap}
.au-alt a,.au p a{color:var(--action)}
.au-logo{font-weight:600;font-size:18px;letter-spacing:-.01em}
.au-key{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.au-key code,.au-codes code{font:600 16px/24px var(--font-mono);letter-spacing:.05em;font-variant-numeric:tabular-nums;word-break:break-all}
.au-key code{padding:8px 10px;background:var(--surface);border-radius:var(--radius-sm);box-shadow:inset 0 0 0 1px var(--line)}
.au-codes{list-style:none;margin:0;padding:12px 14px;display:grid;grid-template-columns:1fr 1fr;gap:6px 16px;background:var(--surface);border-radius:var(--radius-md);box-shadow:var(--shadow-panel)}
.au-row{display:flex;gap:10px;flex-wrap:wrap}
@media print{.au>*:not(.au-codes):not(h1):not(.au-logo){display:none}}

/* ---------------------------------------------------------------- the firm's page (birojs.html) and the operator's (operator.html) */
.pf-main{padding:24px 36px 56px;display:grid;gap:22px;align-content:start;max-width:1040px;margin:0 auto;width:100%;box-sizing:border-box;min-width:0}
.pf-head h1{margin:0;font-family:var(--font-serif);font-weight:400;font-size:38px;line-height:42px;letter-spacing:-.02em}
.pf-head p{margin:6px 0 0;font-size:13px;color:var(--ink-3)}
.pf-bar-link{color:var(--on-bar);text-decoration:none;font-size:14px;padding:0 10px}
.pf-bar-link:hover{text-decoration:underline}
.pf-note{margin:0;padding:0 var(--space-5) var(--space-4);font-size:13.5px;line-height:20px;color:var(--ink-2)}
.pf-note[data-tone="err"],.pf-said[data-tone="err"]{color:var(--danger)}
.pf-said{min-height:1.4em;margin:0;padding:0 var(--space-5) var(--space-3);font-size:13.5px;color:var(--ink)}
.pf-banner{padding:12px var(--space-5);border-radius:var(--radius-md);background:var(--attention-tint);color:var(--ink);font-size:14px;line-height:20px;display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.pf-banner b{font-weight:600}
.pf-acts{display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.pf-form{display:grid;gap:10px;padding:4px var(--space-5) 18px;max-width:460px}
.pf-form label{display:grid;gap:4px;font-size:12.5px;color:var(--ink-3)}
.pf-form .hs-in{max-width:none}
.pf-form select.hs-in{appearance:auto}
.pf-form .pf-acts{justify-content:flex-start}
.hl-sec-panel .hl-table.pf-table thead{display:table-header-group}
.hl-sec-panel .hl-table.pf-table td{height:60px}
.pf-table td{vertical-align:middle}
.hl-table.pf-table td.hl-go.pf-acts{width:1%;white-space:nowrap}      /* hilda.css gives the 'go' cell 28px, which a button spilled out of (and, at 390, out of its panel) */
.pf-only-s{display:none;font-size:13px;line-height:19px;margin-top:3px}
.pf-role .hl-ink3{font-size:12.5px;white-space:normal;max-width:210px;margin-top:2px}
.pf-table .pf-who{min-width:0;overflow-wrap:anywhere}
.pf-role{font-size:13.5px;color:var(--ink-2);white-space:nowrap}
.pf-people{display:flex;gap:6px;flex-wrap:wrap;font-size:13.5px;color:var(--ink-2)}
.pf-mark{display:inline-block;font-style:normal;font-weight:400;font-size:12px;line-height:18px;padding:0 6px;border-radius:var(--radius-xs);background:var(--stamp-tint);color:var(--ok);margin-left:6px;vertical-align:1px}
.pf-tabs{display:flex;gap:4px;flex-wrap:wrap}
.pf-dates{display:grid;gap:1px;margin-top:4px;font-size:13px;line-height:19px;color:var(--ink-3)}
.pf-when{white-space:nowrap;color:var(--ink-3);font-size:13px;width:1%}
.pf-lock{display:grid;gap:6px;padding:var(--space-5)}
.pf-dialog{border:0;border-radius:var(--radius-md);padding:0;max-width:min(420px,calc(100vw - 32px));width:100%;background:var(--surface);color:var(--ink);box-shadow:var(--shadow-menu)}
.pf-dialog::backdrop{background:color-mix(in srgb,var(--ink) 40%,transparent)}
.pf-dialog form{display:grid;gap:12px;padding:var(--space-5)}
.pf-dialog h2{margin:0;font-size:18px;line-height:24px;font-weight:600}
.pf-dialog p{margin:0;font-size:14px;line-height:20px;color:var(--ink-2)}
.pf-dialog label{display:grid;gap:4px;font-size:12.5px;color:var(--ink-3)}
.pf-dialog .hs-in{max-width:none;height:40px;font-size:18px;letter-spacing:.18em}
.pf-dialog .pf-acts{justify-content:flex-start}
.pf-gone{max-width:460px;margin:12vh auto;padding:0 16px;display:grid;gap:10px}
.pf-gone h1{margin:0;font-size:26px;line-height:32px;font-weight:600}
.pf-gone p{margin:0;color:var(--ink-2);line-height:22px}
.pf-gone a.hl-btn{text-decoration:none;display:inline-flex;align-items:center;justify-self:start}
@media (max-width:760px){
  .pf-main{padding:16px 16px 48px}
  .pf-head h1{font-size:30px;line-height:34px}
  .pf-table td{height:auto}
  .pf-hide-s{display:none}
  .pf-only-s{display:block}
  .pf-acts{justify-content:flex-start}
  .au-codes{grid-template-columns:1fr}
  .pf-body .hl-btn,.pf-body .hs-in,.pf-body select.hs-in{min-height:44px}
  .pf-body .hl-icon-btn{min-width:44px;min-height:44px}
}

/* P4 (2026-10-13, carried from P3): the firm's page stacks its sections (team, clients, devices) and at 1440 they touched */
body.pf-body .hl-sec + .hl-sec{margin-top:var(--space-4)}