/* Najmify — the family's design system, shared with ~/GIT/rentify. Token names
   follow rentify/ui/portal, which is the superset; see components/ui/DESIGN.md. */

:root {
  --bg-page: #f4f6f9;
  --bg-card: #ffffff;
  --bg-input: #ffffff;
  --bg-hover: rgba(27, 42, 74, 0.04);
  --bg-badge: #eef1f6;
  --bg-table-head: #f4f6f9;
  --bg-table-row-hover: #f8f9fb;

  --border: #d5dbe5;
  --border-light: #e8ecf2;

  --text-primary: #1a2138;
  --text-secondary: #5a6478;
  --text-muted: #8b95a8;

  /* Orange is interaction and emphasis, and nothing else competes with it:
     every primary button, every active state, every focus ring. */
  --accent: #e87e04;
  --accent-hover: #d06f00;
  --accent-soft: rgba(232, 126, 4, 0.08);

  /* Navy is structure: headings, the identity column, the sign-in backdrop. */
  --primary: #1b2a4a;
  --primary-light: #2d4373;
  --primary-soft: rgba(27, 42, 74, 0.06);

  --success: #16a34a;
  --success-bg: rgba(22, 163, 74, 0.08);
  --error: #dc2626;
  --error-bg: rgba(220, 38, 38, 0.06);
  --warning: #ca8a04;
  --warning-bg: rgba(202, 138, 4, 0.08);

  /* Lifts are tinted, never grey — which is why hover reads warm, not dirty. */
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-card-hover: 0 10px 25px rgba(27, 42, 74, 0.10);
  --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.15);

  --radius: 12px;
  --radius-sm: 8px;
  --radius-xs: 6px;

  --font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
}

html.dark {
  --bg-page: #0f1218;
  --bg-card: #1a1f2e;
  --bg-input: #232a3c;
  --bg-hover: rgba(232, 126, 4, 0.06);
  --bg-badge: #232a3c;
  --bg-table-head: #1a1f2e;
  --bg-table-row-hover: #1f2536;

  --border: #2d3548;
  --border-light: #252d40;

  --text-primary: #e4e8f0;
  --text-secondary: #8b95a8;
  --text-muted: #5a6478;

  /* One step brighter, so the accent still carries against the dark ground. */
  --accent: #f59e0b;
  --accent-hover: #e87e04;
  --accent-soft: rgba(245, 158, 11, 0.12);

  --primary: #2d4373;
  --primary-light: #3d5a9e;
  --primary-soft: rgba(45, 67, 115, 0.20);

  --success: #22c55e;
  --success-bg: rgba(34, 197, 94, 0.10);
  --error: #ef4444;
  --error-bg: rgba(239, 68, 68, 0.10);
  --warning: #eab308;
  --warning-bg: rgba(234, 179, 8, 0.10);

  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.2);
  --shadow-card-hover: 0 10px 25px rgba(0, 0, 0, 0.3);
  --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.5);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  background: var(--bg-page);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}

/* `hidden` has to win over whatever display a component sets. An author rule beats
   the browser's own `[hidden] { display: none }` whatever the specificity, and
   `a.btn` sets `display: inline-flex` — so without this the panel shows a PANEL
   account an "Administracja" link that only bounces them back. Found by
   components/ui/browser, which is the kind of thing only a real browser shows. */
[hidden] { display: none !important; }

/* rentify has no focus styling at all. Keeping ours: a keyboard user has to be able
   to see where they are, and the orange ring is the same device the inputs use. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px 64px;
}

.muted { color: var(--text-secondary); }

/* ---- masthead ---- */

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 72px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  text-decoration: none;
}

.masthead .wordmark svg { display: block; }

/* Najm navy, ify orange — the family's wordmark, the same split as the logo. */
.wordmark-accent { color: var(--accent); }

body.gate-page .wordmark-accent { color: #f59e0b; }

.build {
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.masthead-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

.inline-form { display: inline; margin: 0; }

/* ---- buttons ---- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: var(--bg-card);
  color: var(--text-primary);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
}

a.btn { text-decoration: none; }

.btn:hover { border-color: var(--border); }

/* Orange is the only primary. Lift by a pixel on hover — the family's whole
   motion vocabulary for a button. */
.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  transform: translateY(-1px);
}

/* A control that cannot be used has to look it — the register greys the delete on an
   account something still points at, and a button that looked live would be a
   refusal nobody saw coming. */
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn:disabled:hover { border-color: transparent; }

.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.btn-quiet {
  background: none;
  color: var(--text-secondary);
  padding: 8px 12px;
}

.btn-quiet:hover {
  background: var(--bg-hover);
  border-color: transparent;
  color: var(--accent);
}

.btn-block { width: 100%; }

.btn-lg {
  padding: 14px 32px;
  font-size: 0.95rem;
  border-radius: var(--radius);
}

/* ---- register header ---- */

.register-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 24px 0 20px;
}

.register-head h1 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.register-head p {
  margin: 6px 0 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
  max-width: 60ch;
}

.figures {
  display: flex;
  gap: 32px;
  align-items: flex-end;
}

/* Bipolar type, the family's signature: an 800-weight figure with negative
   tracking over a small, wide, uppercase label. */
.figure .value {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.figure .label {
  margin-top: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}

/* ---- sections ---- */

.section-title {
  margin: 0 0 12px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
}

.footnote {
  margin: 12px 0 0;
  font-size: 0.82rem;
  color: var(--text-secondary);
  max-width: 80ch;
}

/* ---- the register ---- */

/* A card that clips, so the table's header corners follow the radius. */
.register {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);

  /* Clipped vertically so the rounded corners cut the header and the last row, and
     scrollable horizontally rather than clipped. `overflow: hidden` on both axes is
     what it was, and it silently ate the last button in the actions column once a
     register grew past the page width — a control nobody could see and nobody could
     reach. A scrollbar is worse-looking and better. */
  overflow-x: auto;
  overflow-y: hidden;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

thead th {
  text-align: left;
  padding: 12px 20px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  background: var(--bg-table-head);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

tbody td {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-primary);
  vertical-align: middle;
}

tbody tr:last-child td { border-bottom: none; }

tbody tr:hover { background: var(--bg-table-row-hover); }

/* The row's anchor — a flat code, an account name, a number. Navy and heavier
   rather than a coloured bar: the family spends its one loud colour on action,
   not on decoration. */
tbody td.code {
  font-weight: 600;
  color: var(--primary);
  white-space: nowrap;
}

html.dark tbody td.code { color: var(--text-primary); }

td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

th.num { text-align: right; }

td.muted { color: var(--text-secondary); }

td.actions { text-align: right; white-space: nowrap; padding-left: 8px; }

td.actions .btn + .btn { margin-left: 2px; }

/* A register's actions are a row of quiet verbs, not a row of buttons competing
   with the primary one above the table — and a wide register has four of them. The
   button padding is what a form's footer needs; here it is what decides whether the
   last one fits on the card at all. Still 34px tall, so still a target. */
td.actions .btn { padding: 8px 10px; }



@keyframes flash {
  from { background: var(--accent-soft); }
  to { background: transparent; }
}

tr.added { animation: flash 1.4s ease-out; }

/* rentify guards nothing against reduced motion. Keeping ours. */
@media (prefers-reduced-motion: reduce) {
  tr.added { animation: none; }
  * { transition: none !important; }
}

/* ---- empty and error states ---- */

.state {
  padding: 60px 24px;
  text-align: center;
  color: var(--text-secondary);
}

.state h2 {
  margin: 0 0 8px;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.state p {
  margin: 0 auto;
  font-size: 0.88rem;
  max-width: 44ch;
  line-height: 1.5;
}

.banner {
  margin: 16px 0 0;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--error);
  background: var(--error-bg);
  color: var(--error);
  font-size: 0.85rem;
  font-weight: 500;
}

/* ---- state chips ---- */

/* A tinted pill, not a bordered one: the fill is the text colour at 8%, which is
   the rule every coloured surface in this system follows. */
.chip {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: var(--bg-badge);
  color: var(--text-secondary);
}

.chip-on { background: var(--success-bg); color: var(--success); }

.chip-off { background: var(--error-bg); color: var(--error); }

.chip-plain { background: var(--bg-badge); color: var(--text-secondary); }

.chip-admin { background: var(--accent-soft); color: var(--accent); }

.chip-in { background: var(--success-bg); color: var(--success); }

.chip-out { background: var(--primary-soft); color: var(--primary); }

html.dark .chip-out { color: var(--primary-light); }

/* ---- tabs ---- */

/* Pills rather than an underline: rentify has no tab component, and the toggle
   pill is the family's horizontal selector. */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 0;
}

.tab {
  font-family: var(--font);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 6px 16px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.tab:hover { border-color: var(--accent); color: var(--accent); }

.tab.is-active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

/* ---- dialog ---- */

dialog {
  /* The blanket `* { margin: 0 }` reset takes the UA's `margin: auto` with it, and
     that is what centres a modal dialog. Put it back explicitly. */
  margin: auto;
  border: none;
  border-radius: var(--radius);
  background: var(--bg-card);
  color: var(--text-primary);
  padding: 0;
  width: min(520px, calc(100vw - 32px));
  box-shadow: var(--shadow-modal);
}

dialog::backdrop {
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(2px);
}

dialog h2 {
  margin: 0;
  padding: 24px 28px 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
}

.form-body { padding: 20px 28px 4px; }

.form-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 8px 28px 24px;
}

/* ---- forms ---- */

.field { margin-bottom: 14px; }

.field:last-child { margin-bottom: 0; }

.field label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  margin-bottom: 5px;
}

/* The hint stays sentence case — uppercasing a whole clause would be unreadable. */
.field .hint {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-secondary);
}

.field input,
.field textarea,
.field select {
  font-family: inherit;
  font-size: 0.92rem;
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  color: var(--text-primary);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.field input::placeholder { color: var(--text-muted); }

.field textarea { resize: vertical; min-height: 68px; }

.field select { cursor: pointer; }

.row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* A hint long enough to wrap would otherwise drop its own input half a line below
   the one beside it. Stretching the label keeps the pair on one line. */
.row-2 .field {
  display: flex;
  flex-direction: column;
}

.row-2 .field label { flex: 1 0 auto; }

.check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: var(--text-secondary);
}

.check input { width: auto; }

/* ---- toast ---- */

.toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 500;
  box-shadow: var(--shadow-card-hover);
  z-index: 60;
}

/* ---- identity facts ---- */

/* Who you are sits in the masthead beside the way out. Hidden on a narrow screen:
   it is a reassurance, not a control, and the buttons need the room. */
.who {
  margin-right: 8px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
}

@media (max-width: 900px) {
  .who { display: none; }
}

.fact {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
}

.fact + .fact { margin-left: 16px; }

.fact-label {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

/* ---- cards ---- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}

/* The family's signature detail: a 3px orange bar under `overflow: hidden`,
   revealed on hover along with an accent border and a two-pixel lift. */
.card {
  position: relative;
  overflow: hidden;
  padding: 22px 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.25s, border-color 0.25s, transform 0.2s;
}

.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--accent);
  opacity: 0;
  transition: opacity 0.25s;
}

.card:hover {
  box-shadow: var(--shadow-card-hover);
  border-color: var(--accent);
  transform: translateY(-2px);
}

.card:hover::before { opacity: 1; }

.card h2 {
  margin: 0 0 8px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
}

.card p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ---- landing page ---- */

.hero {
  padding: 88px 0 72px;
  max-width: 62ch;
}

/* The one uppercase eyebrow in the system, and the only place it earns its keep:
   a pill on the accent tint, which is how this family opens a page. */
.hero-kicker {
  display: inline-block;
  padding: 6px 16px;
  margin-bottom: 24px;
  border-radius: 20px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.hero h1 {
  margin: 0 0 16px;
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.2rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
  text-wrap: balance;
  color: var(--text-primary);
}

.hero-lead {
  margin: 0 0 32px;
  max-width: 56ch;
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
}

.footer {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  font-size: 0.82rem;
  color: var(--text-muted);
}

/* ---- sign-in ---- */

/* The one full-bleed navy surface in the product. Every Najmify sign-in looks like
   this, so arriving here from any of them should feel like the same door. */
body.gate-page {
  background: linear-gradient(135deg, #1b2a4a 0%, #2d4373 100%);
  min-height: 100vh;
}

body.gate-page .masthead {
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

body.gate-page .wordmark { color: #fff; }

body.gate-page .build { color: rgba(255, 255, 255, 0.4); }

body.gate-page .btn-quiet { color: rgba(255, 255, 255, 0.75); }

body.gate-page .btn-quiet:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* The one full-bleed surface in the product: navy, the way every Najmify sign-in
   looks, with the card floating on it. */
.gate {
  max-width: 440px;
  margin: 56px auto;
  padding: 48px 40px;
  background: var(--bg-card);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.gate h1 {
  margin: 0 0 12px;
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.gate p {
  margin: 0 0 24px;
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.6;
}

.btn-google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px;
  font-size: 0.95rem;
}

.btn-google svg { display: block; }

.or {
  margin: 20px 0;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

/* ---- documents ---- */

/* The document's name is the row's anchor, but it is prose rather than a code, so
   it wraps where a flat code does not. */
tbody td.code.doc-name {
  white-space: normal;
  min-width: 18ch;
}

/* A cell that is also a control: it reads as the row's text, and says so only on
   hover. */
.link-cell {
  font-family: var(--font);
  font-size: inherit;
  font-weight: inherit;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.link-cell:hover { color: var(--accent); }

.row-note {
  display: block;
  margin-top: 3px;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--text-secondary);
  max-width: 52ch;
}

td.day {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---- tag filter ---- */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.chip-filter {
  font-family: var(--font);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 6px 16px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--bg-card);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.chip-filter:hover { border-color: var(--accent); color: var(--accent); }

.chip-filter-on {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

.chip-count {
  margin-left: 6px;
  font-weight: 500;
  opacity: 0.75;
  font-variant-numeric: tabular-nums;
}

/* ---- preview ---- */

.preview-dialog { width: min(980px, calc(100vw - 32px)); }

.preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
}

.preview-head h2 {
  margin: 0;
  padding: 0;
  font-size: 1rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.preview-tools {
  display: flex;
  gap: 6px;
  flex: none;
}

/* Recessed, so the document itself is the lit surface inside the frame. */
.preview-body {
  background: var(--bg-table-head);
  height: min(72vh, 760px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
}

.preview-body iframe {
  width: 100%;
  height: 100%;
  border: none;
  background: var(--bg-table-head);
}

.preview-body img {
  max-width: 100%;
  max-height: 100%;
  display: block;
}

/* ---- money ---- */

/* Balance is charges less payments, so a positive figure is a debt. The colour
   only repeats what the sign already says — nobody has to see red to read a
   minus — which is the same rule the state chips follow. */
.money-owed {
  color: var(--error);
  font-weight: 600;
}

.money-ahead { color: var(--success); }

/* A date already gone by, in the terms register. */
.day-overdue {
  color: var(--error);
  font-weight: 600;
}

/* The year's row under the twelve, separated by a full rule rather than the
   light one the months use: it is a different kind of number. */
tfoot td {
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  background: var(--bg-table-head);
  font-weight: 600;
  color: var(--text-primary);
}

/* ---- the bookings dialog ---- */

/* Wider than a form dialog, because it carries a register: a booking log with a
   running balance does not fit in 520px without the figures wrapping. */
.wide-dialog { width: min(920px, calc(100vw - 32px)); }

.wide-body {
  padding: 20px 24px 24px;
  max-height: min(72vh, 760px);
  overflow: auto;
}

/* `dialog h2` indents a form dialog's title; a section heading inside the body is
   not that title and lines up with the register under it. */
.wide-body .section-title { padding: 0; }

/* The head's own heading is the lease, so the section heading inside sits tight
   against the form it introduces. */
.register-head-tight {
  padding: 0 0 12px;
  border: none;
}

/* The booking form is one line at desk width: what kind, how much, when, and what
   it was for. The button sits on the baseline of the fields rather than below
   them, because it belongs to the row. */
.booking {
  display: grid;
  grid-template-columns: minmax(130px, 0.9fr) minmax(110px, 0.7fr) minmax(140px, 0.8fr) minmax(160px, 1.4fr) auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 16px;
}

.booking .field { margin-bottom: 0; }

/* A control that lives among the figures — the year picker — keeps its label but
   not a form's full width. */
.field-tight { min-width: 110px; }

.figures .field { margin-bottom: 0; }

/* ---- registers with several things in a cell ---- */

/* A tab carrying four registers needs a control per register, so the heading and
   its button share a line — the page head above holds only what belongs to the
   whole tab. */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 28px 0 12px;
}

.section-head .section-title { margin: 0; }

/* A heading that follows another register's footnote needs the same air the section
   head above gives itself — otherwise the last register's small print reads as this
   one's subtitle. */
.footnote + .section-title { margin-top: 28px; }

/* An account's numbers are on the row, because the whole point is that one person
   rings from several — so this cell wraps where a code never does. */
tbody td.code.person {
  white-space: normal;
  min-width: 16ch;
}

/* The type and the state share a cell, and the sentence explaining a switched-off
   account goes under them. It wraps: two chips side by side is the ordinary case,
   and forcing them to stay there is what pushed the row's last control off the
   card. */
tbody td.access { white-space: normal; }

/* A lease names as many people as signed it, and a second line for anybody who only
   lives there. Both need room to wrap; neither is a code. */
tbody td.people {
  white-space: normal;
  min-width: 18ch;
}

.row-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

/* A phone number is digits, not a word: uppercasing it would do nothing, and
   tabular figures line the chips up under one another. */
.row-chips .chip {
  text-transform: none;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

/* A number in a cell of its own lines up with the ones above it. */
td.tel {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* A rule whose customer is switched off cannot fire, and must not look like one
   that can: the row gives up its navy anchor and drops to normal weight. The word
   in the state column is what actually says so — greying alone would leave
   somebody guessing, which is the same reason state is never only a colour. */
tr.is-inert td,
tr.is-inert td.code {
  color: var(--text-secondary);
  font-weight: 400;
}

/* Two fields and a button: what the number is, what it is for, and the control on
   their baseline, because it belongs to the row. */
.booking-2 {
  grid-template-columns: minmax(150px, 1fr) minmax(160px, 1.4fr) auto;
}

/* `.check` sets display:flex, and an author rule beats the user agent's own
   `[hidden] { display: none }` whatever the specificity — the same trap that once
   showed a PANEL account an "Administracja" link. A checkbox row only some dialogs
   offer has to be hideable. */
.check[hidden] { display: none; }

/* ---- tab groups ---- */

/* Seven tabs are not seven of one thing: the work, the registers it hangs on, and
   the machinery. A hairline between the groups says so without a second level of
   navigation, and costs nothing to a screen reader — the tablist is still flat. */
.tab-divider {
  align-self: stretch;
  width: 1px;
  margin: 4px 6px;
  background: var(--border);
}

/* ---- the tenant's lease ---- */

/* /panel shows one or two leases, not a register of them. A card can carry the five
   facts a contract states plus the figure that matters, and reads as a document
   rather than a row — which is what a tenant is actually looking at. */
.leases {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 18px;
  margin-bottom: 8px;
}

.lease {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 22px 24px;
}

.lease-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.lease-head h2 {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.lease-head p { font-size: 0.85rem; margin-top: 2px; }

.lease-state {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-end;
  flex: none;
}

/* What the tenant came for, on its own line with the one action beside it. */
.lease-figure {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin: 18px 0;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border-light);
}

/* The five things a contract states, as discrete labelled facts rather than a
   run-together line. */
.lease-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.lease-facts .fact { margin-left: 0; }

.lease-others {
  margin-top: 14px;
  font-size: 0.85rem;
}

/* ---- picking several of something ---- */

/* A select and the button that adds what it names, on one line. The chips it builds
   sit under it, because the list is the answer and the picker is only the way in. */
.picker {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.picker select { flex: 1 1 auto; }

.picker .btn { flex: none; }

.row-chips:empty { display: none; }

.field .row-chips { margin-top: 8px; }

/* A chip somebody put there on purpose, and can take away again. The × is a real
   button so a keyboard reaches it, and carries its own accessible name — "×" alone
   would be read out as nothing useful. */
.chip-removable {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-transform: none;
  letter-spacing: 0;
}

.chip-drop {
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  cursor: pointer;
  opacity: 0.6;
}

.chip-drop:hover { opacity: 1; color: var(--error); }

/* ---- responsive ---- */


/* Two breakpoints, as the rest of the family has. */
@media (max-width: 768px) {
  .page { padding: 0 20px 48px; }
  .register-head { padding-top: 16px; }
  .figures { gap: 24px; }
  .row-2 { grid-template-columns: 1fr; }
  .hero { padding: 48px 0 32px; }
  .preview-body { height: 60vh; }
  .leases { grid-template-columns: 1fr; }
  .picker { flex-direction: column; }
  td.actions { white-space: normal; }
  .booking { grid-template-columns: 1fr 1fr; }
  .booking button { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
  .page { padding: 0 16px 40px; }
  .fact + .fact { margin-left: 0; }
  .fact { display: flex; }
  .cards { grid-template-columns: 1fr; }
  .gate { margin: 24px auto; padding: 28px 24px; }
}