/* ===========================================================================
 * The server-rendered pages: login, logout and the refusal pages (M5.C).
 *
 * THE SIGN-IN FRAME (M5.M, owner 2026-10-01: "make sign in and out more like theme
 * used", then "take inspiration from the above login" — the reference's sign-in):
 *
 *   phone   a hero banner across the top (about 30% of the screen) — the theme's
 *           dark teal and the platform's own drawing (/assets/login-hero.svg) —
 *           with the platform's title in its corner; under it the language pill
 *           at the start side; the crest, the municipality's name large, the
 *           platform line; the form full width; the product's credit.
 *   desk    the hero is the side pane (46%), the form centred beside it, at most
 *           420px wide. `flex-direction: row` and no side named, so `dir="rtl"`
 *           puts the hero on the other side for free.
 *
 * WHAT DRAWS THE CONTROLS. The published build's own stylesheets come before this
 * one (`PageShell::themeStylesheets`): the fonts, the tokens and the admin forms'
 * kit (`kt-field`, `kt-input`, `kt-btn`, `kt-alert`). This sheet lays the frame out
 * and says what the kit does not: the primary button in the municipality's own
 * colour (/branding/theme.css, loaded last), the information notice. With no build
 * published the same markup still reads on the tokens and the fallbacks below.
 *
 * RTL AND LTR FROM ONE SHEET: logical properties only. Nothing inline (the CSP).
 * ======================================================================== */

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

html { -webkit-text-size-adjust: 100%; }

body.tp-web {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--s-1);
  color: var(--ink-900);
  font-family: var(--la);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
html[lang="ar"] body.tp-web { font-family: var(--ar); }

/* ---- the frame ------------------------------------------------------------ */
body.tp-auth { display: flex; flex-direction: column; }

/* THE HERO — product chrome, the same for every municipality: the theme's teal, the
   platform's drawing, a scrim from the block-end so the title has a solid ground. */
.tp-hero {
  position: relative;
  overflow: hidden;
  flex: none;
  min-block-size: 180px;
  block-size: 30vh;
  block-size: 30dvh;
  display: flex;
  align-items: flex-end;
  padding: 20px 20px 22px;
  background-color: var(--acc-700);
  background-image: url("/assets/login-hero.svg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.tp-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, color-mix(in srgb, var(--ink-900) 55%, transparent), transparent 70%);
}
.tp-hero-title {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--s-0);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

/* THE FORM PANE */
.tp-auth-pane {
  flex: 1 1 auto;
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 20px 28px;
}
.tp-panel {
  inline-size: 100%;
  max-inline-size: 420px;
}

/* the language pill: under the hero on a phone, at the end side as the reference's (its phone: the left in Arabic) */
.tp-lang-pill {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-block-size: 40px;
  padding-inline: 16px;
  border: 1px solid var(--s-line);
  border-radius: 999px;
  background: var(--s-0);
  color: var(--ink-700);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}
.tp-lang-pill[lang="ar"] { font-family: var(--ar); }
.tp-lang-pill[lang="en"] { font-family: var(--la); }
.tp-lang-pill:hover { border-color: var(--acc-500); color: var(--acc-700); }
.tp-lang-pill:focus-visible { outline: 2px solid var(--acc-500); outline-offset: 2px; }

/* the municipality: its crest, its name large, the platform line */
.tp-lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  margin-block: 8px 24px;
}
.tp-logo { inline-size: 82px; block-size: 82px; object-fit: contain; display: block; margin-block-end: 6px; }
.tp-name {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink-900);
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.tp-sub { margin: 0; font-size: 14px; color: var(--ink-500); }

.tp-title {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink-900);
  text-align: center;
}
/* the sign-in page's own heading is for a screen reader: the municipality's name is what the eye reads */
.tp-title-quiet {
  position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0;
}
.tp-note { margin: 0 0 16px; font-size: 14px; line-height: 1.6; color: var(--ink-500); text-align: center; }

/* ---- the notices (the app's alert) -------------------------------------- */
.tp-alert { margin: 0 0 16px; }
.tp-alert-info { border-color: var(--acc-500); color: var(--acc-700); background: var(--acc-050); }
.tp-alert:not(.kt-alert) { padding: 10px 12px; border: 1px solid var(--st-late); border-radius: var(--r-md); color: var(--st-late); }

/* ---- the form (the admin's kit fields and buttons) ----------------------- */
.tp-form { display: grid; gap: 18px; }
.tp-form .kt-field { gap: 8px; }
.tp-form .kt-field__label { font-size: 14px; font-weight: 500; }
.tp-form .kt-input { min-block-size: 48px; font-size: 15px; }
.tp-form .kt-input::placeholder { color: var(--ink-400); }
[dir="rtl"] .tp-form .kt-input::placeholder { direction: rtl; }
.tp-form .kt-input:focus-visible { outline: none; border-color: var(--acc-500); box-shadow: 0 0 0 3px var(--acc-100); }
.tp-form .kt-btn--primary,
.tp-panel .kt-btn--primary {
  /* the municipality's own colour, as before; the design system's accent when it has none */
  background: var(--brand-primary, var(--acc-600));
  border-color: var(--brand-primary, var(--acc-600));
  color: var(--s-0);
  min-block-size: 50px;
  font-size: 16px;
}
.tp-form .kt-btn--primary { inline-size: 100%; margin-block-start: 4px; }
.tp-form .kt-btn--primary:hover,
.tp-panel .kt-btn--primary:hover { filter: brightness(0.94); }
.tp-form .kt-btn--primary:focus-visible { outline: 2px solid var(--acc-500); outline-offset: 2px; }
.tp-form-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.tp-form-actions .kt-btn { flex: 1 1 140px; }
/* Usernames and passwords are identifiers: typed left to right in either language. */
.tp-form input[dir="ltr"] { text-align: left; }
[dir="rtl"] .tp-form input[dir="ltr"]:placeholder-shown { text-align: right; }

/* Without the build's kit (nothing published): the same controls on the tokens alone. */
.tp-form input:not(.kt-input) { min-height: 44px; padding: 10px 12px; border: 1px solid var(--s-line); border-radius: var(--r-md); font: inherit; }
.tp-panel a.kt-btn, .tp-panel .tp-button { text-decoration: none; }

/* the product's credit */
.tp-foot { margin: 28px 0 0; text-align: center; font-size: 14px; color: var(--ink-500); }
.tp-foot bdi { font-family: var(--la); font-weight: 600; }

/* ---- at a desk: the hero is the side pane, the form centred beside it ---- */
@media (min-width: 900px) {
  body.tp-auth { flex-direction: row; }
  .tp-hero { flex: 0 0 46%; block-size: auto; min-block-size: 100vh; min-block-size: 100dvh; padding: 48px; }
  .tp-hero-title { font-size: 30px; max-inline-size: 18ch; }
  .tp-auth-pane { justify-content: center; position: relative; padding: 48px; }
  .tp-lang-pill { position: absolute; inset-block-start: 24px; inset-inline-end: 24px; }
}
@media (max-width: 420px) {
  .tp-hero-title { font-size: 20px; }
  .tp-name { font-size: 24px; }
}

/* ===========================================================================
 * THE WIDE PAGES — the Field landing (M5.H). The reference's landing, drawn with
 * tokens: a header row in flow (back, lockup, language), a title with the count,
 * one line of lede, and each group as a grid of 64px rows with a 48px photograph.
 * Sized for the phone the application is for; the grid stops being one column
 * when there is room for more. Logical properties only (RTL and LTR from one sheet).
 * ======================================================================== */
body.tp-web.tp-web-wide {
  display: block;
  padding: 0;
  min-height: 100dvh;
}
.tp-top {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
  padding: 10px 16px;
  padding-block-start: max(10px, env(safe-area-inset-top));
  border-block-end: 1px solid var(--s-line);
  background: var(--s-0);
}
/* THE WAY BACK — the reference's `hub-back` (assets/hub-back.css), header form. */
.tp-top-back {
  min-block-size: 44px;
  min-inline-size: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: none;
  box-sizing: border-box;
  padding-inline: 12px;
  border: 1px solid var(--s-line);
  border-radius: var(--r-md);
  background: var(--s-0);
  color: var(--ink-700);
  font-family: var(--ar);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
:lang(en) .tp-top-back { font-family: var(--la); }
.tp-top-back:hover { background: var(--acc-050); border-color: var(--acc-500); color: var(--acc-700); }
.tp-top-back:active { background: var(--acc-100); }
.tp-top-back:focus-visible { outline: 2px solid var(--acc-500); outline-offset: 2px; }
.tp-top-back-icon { flex: none; }
[dir='rtl'] .tp-top-back-icon { transform: scaleX(-1); }
@media (max-width: 640px) {
  .tp-top-back { padding-inline: 0; inline-size: 44px; gap: 0; }
  .tp-top-back-label { display: none; }
}
.tp-top-lang:focus-visible { outline: 3px solid var(--acc-100); outline-offset: 2px; }
/* THE LOCKUP — the reference's `brandmark` (assets/brand-mark.css), header form: compact by
   default (crest 32px, name 12.5px on at most two balanced lines, the screen's name under it),
   full when its own box has room (a container query, as the reference argues: the viewport does
   not say how wide a header's lockup is). */
.tp-top-brand {
  container-type: inline-size;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-inline-size: 44px;
  -webkit-user-select: none;
  user-select: none;
}
.tp-top-logo { block-size: 32px; inline-size: auto; flex: none; display: block; object-fit: contain; }
.tp-top-lang { flex-shrink: 0; }
.tp-top-lines { min-inline-size: 0; display: flex; flex-direction: column; justify-content: center; gap: 0; }
.tp-top-name {
  font-family: var(--ar);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink-900);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
:lang(en) .tp-top-name { font-family: var(--la); font-weight: 600; }
.tp-top-context {
  font-family: var(--ar);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
:lang(en) .tp-top-context { font-family: var(--la); }
@container (min-width: 336px) {
  .tp-top-logo { block-size: 40px; }
  .tp-top-name { font-size: 15px; line-height: 1.25; }
  .tp-top-context { font-size: 11.5px; }
}
.tp-top-lang {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  color: var(--acc-700);
  text-decoration: none;
}
.tp-top-lang[lang="ar"] { font-family: var(--ar); }
.tp-top-lang[lang="en"] { font-family: var(--la); }
.tp-wide { max-inline-size: 960px; margin-inline: auto; padding: 16px 16px 48px; }
.tp-field-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-block: 8px 4px; }
.tp-field-title { font-size: 20px; font-weight: 700; margin: 0; }
.tp-field-count { color: var(--ink-500); font-size: 13px; font-variant-numeric: tabular-nums; }
.tp-field-lede { color: var(--ink-500); font-size: 14px; margin-block: 0 18px; }
.tp-field-group { margin-block-start: 22px; }
.tp-field-gname { font-size: 13px; font-weight: 650; color: var(--ink-500); margin: 0 0 8px; }
.tp-field-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.tp-field-asset {
  display: flex;
  align-items: center;
  gap: 12px;
  min-block-size: 64px;
  padding-inline: 10px;
  border-radius: var(--r-lg);
  background: var(--s-0);
  border: 1px solid var(--s-line);
  color: inherit;
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
}
.tp-field-asset:hover { border-color: var(--acc-500); background: var(--s-2); }
.tp-field-asset:focus-visible { outline: 2px solid var(--acc-700); outline-offset: 2px; }
.tp-field-img { inline-size: 48px; block-size: 48px; flex: 0 0 48px; border-radius: var(--r-md); object-fit: cover; background: var(--s-2); }
.tp-field-img-none { display: inline-block; }
.tp-field-none { padding: 24px; border-radius: var(--r-lg); background: var(--s-0); border: 1px solid var(--s-line); color: var(--ink-500); }