/* ==========================================================================
   Site Equipment Details — Design System
   ==========================================================================
   This page is almost always opened one way: someone standing at the foot of
   a tower, in daylight, on a phone, having just scanned a sticker. Every
   decision below follows from that — mobile-first layout, large tap targets,
   high contrast, quantities set in a mono face so they read as data, and a
   lattice motif in the header that echoes the structure being inspected.

   The palette is the same one the claim system uses, so both internal tools
   look like they come from the same company.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  color-scheme: light;

  /* Core */
  --ink:        #101E36;
  --ink-2:      #1A2C4C;
  --ink-3:      #24395E;
  --slate:      #55637A;
  --slate-soft: #8B96A6;
  --paper:      #F3F5F8;
  --card:       #FFFFFF;
  --line:       #E1E6EC;
  --line-soft:  #EDF0F4;

  /* Signals */
  --amber:      #E2993A;
  --amber-soft: #FCF3E4;
  --amber-ink:  #7A4E12;
  --teal:       #1C8C7C;
  --teal-soft:  #E3F3F0;
  --teal-ink:   #0E4F46;
  --red:        #C4463B;
  --red-soft:   #FBEBE9;
  --red-ink:    #7A2A23;
  --blue:       #2F6FED;
  --blue-soft:  #EAF1FE;
  --blue-ink:   #1B4494;

  /* Telco accents — assigned by a hash of the owner name, so any telco
     (including one this app has never seen) gets a stable colour. */
  --t0: #1C8C7C;
  --t1: #E2993A;
  --t2: #2F6FED;
  --t3: #7C5CBF;
  --t4: #C4553B;
  --t5: #3F8F45;

  /* Type */
  --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body:    'Inter', 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', 'Courier New', monospace;

  /* Form */
  --radius-sm: 7px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --shadow:    0 1px 2px rgba(16, 30, 54, .05), 0 10px 28px -16px rgba(16, 30, 54, .22);
  --shadow-lg: 0 2px 6px rgba(16, 30, 54, .06), 0 24px 48px -24px rgba(16, 30, 54, .30);
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.015em;
  margin: 0;
}

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* --------------------------------------------------------------------------
   Layout shell
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: 940px;
  margin: 0 auto;
  padding: 0 16px;
}
@media (min-width: 720px) { .wrap { padding: 0 28px; } }

.page { padding-bottom: 56px; }

/* --------------------------------------------------------------------------
   Top bar
   -------------------------------------------------------------------------- */
.topbar {
  background: var(--ink);
  color: #DCE4EF;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.topbar a { color: #DCE4EF; }

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.brand:hover { text-decoration: none; }

/* The mast: three stacked bars of decreasing width, read as a tower profile. */
.brand__mast {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5px;
  flex: none;
}
.brand__mast span {
  display: block;
  height: 2.5px;
  border-radius: 2px;
  background: var(--amber);
}
.brand__mast span:nth-child(1) { width: 8px;  opacity: .55; }
.brand__mast span:nth-child(2) { width: 13px; opacity: .8; }
.brand__mast span:nth-child(3) { width: 18px; }

.brand__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .02em;
  color: #FFF;
  line-height: 1.2;
  white-space: nowrap;
}
.brand__name small {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #8FA0B8;
}

.topbar__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

/* "Another site" — the way back to the lookup without rescanning a sticker
   or retyping the URL. Present on every page that is about one specific
   site, and absent on the lookup page itself. */
.topbar__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  min-height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .06);
  font-size: 12.5px;
  font-weight: 500;
  color: #DCE4EF;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease;
}
.topbar__back:hover {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .32);
  text-decoration: none;
}

.topbar__user {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: #9FB0C6;
  min-width: 0;
}
.topbar__user strong {
  color: #FFF;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 24vw;
}
.topbar__user a { color: #9FB0C6; text-decoration: underline; text-underline-offset: 2px; }
.topbar__user a:hover { color: #FFF; }

/* On a phone the bar has to hold the brand, the back button and the account.
   The signed-in name is already shown on the hero of the editor, so it is the
   one thing that can drop out here without losing information. */
@media (max-width: 620px) {
  .topbar__actions { gap: 8px; }
  .topbar__user strong { display: none; }
  .brand__name small { display: none; }
}

/* --------------------------------------------------------------------------
   Hero — the site's identity card
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 140% at 12% 0%, var(--ink-3) 0%, var(--ink) 62%);
  color: #EAF0F8;
  padding: 30px 0 28px;
}

/* Lattice: two crossed diagonal families, like a tower's bracing. Sits
   behind the text at low opacity so it reads as texture, never as noise. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(  62deg, rgba(226, 153, 58, .10) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(-62deg, rgba(226, 153, 58, .10) 0 1px, transparent 1px 26px);
  -webkit-mask-image: linear-gradient(105deg, transparent 38%, #000 100%);
          mask-image: linear-gradient(105deg, transparent 38%, #000 100%);
  pointer-events: none;
}
.hero > * { position: relative; }

.hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--amber);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.hero__eyebrow::after {
  content: '';
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, rgba(226, 153, 58, .45), transparent);
}

.hero h1 {
  font-size: clamp(24px, 6.4vw, 38px);
  line-height: 1.12;
  color: #FFF;
  margin-bottom: 14px;
  overflow-wrap: anywhere;
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .04em;
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .16);
  color: #EAF0F8;
  white-space: nowrap;
}
.chip__key {
  font-family: var(--font-body);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #93A6C0;
}
.chip--live {
  background: rgba(28, 140, 124, .20);
  border-color: rgba(28, 140, 124, .45);
  color: #9FE3D6;
}
.chip--live .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3FCBB4;
  box-shadow: 0 0 0 3px rgba(63, 203, 180, .22);
}

/* --------------------------------------------------------------------------
   Stat strip
   -------------------------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  /* Sits clearly BELOW the hero. An earlier version pulled this card up with
     a negative margin so it straddled the boundary; at these proportions that
     read as a layout fault rather than a deliberate overlap, so the card now
     gets its own breathing room. */
  margin-top: 32px;
  box-shadow: var(--shadow);
}
.stat {
  background: var(--card);
  padding: 14px 12px;
  text-align: center;
}
.stat__value {
  font-family: var(--font-display);
  font-size: clamp(20px, 5.5vw, 26px);
  font-weight: 700;
  line-height: 1.1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stat__label {
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--slate-soft);
  margin-top: 3px;
}

/* --------------------------------------------------------------------------
   Section heading
   -------------------------------------------------------------------------- */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 32px 0 14px;
}
.section-head h2 { font-size: 17px; }
.section-head p {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--slate);
}
.section-head__count {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--slate-soft);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Telco group
   -------------------------------------------------------------------------- */
.telco {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  margin-bottom: 14px;
  overflow: hidden;
}

.telco__head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-soft);
  border-left: 4px solid var(--accent, var(--slate));
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent, #888) 7%, transparent), transparent 55%);
}
.telco__badge {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .01em;
  color: #FFF;
  background: var(--accent, var(--slate));
  overflow: hidden;
}

/* Short names vary from 4 to 8 characters ("Digi", "DHTI", "Celcom",
   "UMobile"), so the type scales to whatever the badge actually has to hold
   rather than clipping the long ones. */
.telco__badge[data-len="5"] { font-size: 11.5px; }
.telco__badge[data-len="6"] { font-size: 10px; letter-spacing: -.01em; }
.telco__badge[data-len="7"] { font-size: 8.5px; letter-spacing: -.02em; }
.telco__badge[data-len="8"] { font-size: 8px;   letter-spacing: -.03em; }
.telco__name {
  min-width: 0;
  flex: 1;
}
.telco__name strong {
  display: block;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.telco__name span {
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--slate-soft);
}
.telco__tally {
  flex: none;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--slate);
  line-height: 1.4;
}

/* Equipment rows: stacked on a phone, a two-column grid once there is room. */
.eq {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--line-soft);
}
.eq:first-of-type { border-top: 0; }
.eq__main { min-width: 0; }
.eq__name {
  font-weight: 500;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.eq__name em {
  font-style: normal;
  color: var(--slate-soft);
}
.eq__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 5px;
}
.tag {
  font-size: 10.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--slate);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1.5px 6px;
  white-space: nowrap;
}
.eq__stamp {
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--slate-soft);
}

/* The readouts on the right of a row: quantity, then height above ground.
   Side by side in a fixed-width pair so every row's cards line up down the
   page whatever the numbers are. Each card carries its own colour so the two
   readings never get mistaken for one another at a glance. */
.eq__metrics {
  flex: none;
  display: flex;
  flex-direction: row;
  gap: 6px;
  width: 134px;
}

.qty, .agl {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  background: var(--paper);
  border: 1px solid var(--line);
}
.qty__value, .agl__value {
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.qty__label, .agl__label {
  font-size: 9.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
}

/* Quantity reads blue, height reads teal. */
.qty { background: var(--blue-soft); border-color: #CBDDFB; }
.qty__value { color: var(--blue-ink); }
.qty__label { color: var(--blue-ink); opacity: .65; }

.agl { background: var(--teal-soft); border-color: #C0E1DB; }
.agl__value { color: var(--teal-ink); }
.agl__label { color: var(--teal-ink); opacity: .65; }

.qty--zero { background: var(--red-soft); border-color: #F0C9C4; }
.qty--zero .qty__value { color: var(--red-ink); }
.qty--zero .qty__label { color: var(--red-ink); }

/* A long height ("27.5") needs to shrink a little to stay on one line. */
.agl__value { font-size: 15px; }
.agl__unit {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--teal);
  margin-left: 1px;
}
/* Nothing recorded — muted, so it reads as absent rather than as a value. */
.agl--none { background: var(--paper); border-color: var(--line); }
.agl--none .agl__value { color: var(--slate-soft); font-size: 17px; }
.agl--none .agl__label { color: var(--slate-soft); opacity: 1; }

/* --------------------------------------------------------------------------
   Backhaul group

   The transmission links feeding a site. Deliberately built on the same card
   as a telco group — same header, same accent stripe — so the page reads as
   one continuous list rather than two unrelated modules. What differs is what
   a row carries: a link has no quantity and no height, only a customer and
   whether it is live, so the right-hand tiles are replaced by a status pill.
   -------------------------------------------------------------------------- */

/* The provider's mark is an icon rather than initials, so the badge holds a
   centred glyph instead of scaled type. */
.telco__badge--icon { display: grid; place-items: center; }
.telco__badge--icon svg { display: block; }

/* Two rows: the customer and its status pill share the first, and the contract
   detail spans the full width underneath. A phone therefore keeps the status
   next to the name it belongs to — the one thing a reader looks for — while
   the tags still get the whole card to wrap across. */
.bh {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 5px 12px;
  padding: 12px 16px;
}
/* The header already draws a bottom border, so only the gaps BETWEEN rows are
   ruled — otherwise the first row sits under a double line. */
.bh + .bh { border-top: 1px solid var(--line-soft); }

.bh__name {
  font-weight: 500;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.bh__meta { grid-column: 1 / -1; min-width: 0; }
.bh__note {
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--slate);
  overflow-wrap: anywhere;
}

/* A terminated link stays on the page — it is part of the site's history —
   but recedes so the live ones read first. */
.bh--off .bh__name { color: var(--slate); }

.bh-status {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--slate);
  background: var(--paper);
  border: 1px solid var(--line);
}
.bh-status__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--slate-soft);
}
.bh-status--on {
  color: var(--teal-ink);
  background: var(--teal-soft);
  border-color: #C0E1DB;
}
.bh-status--on .bh-status__dot {
  background: var(--teal);
  box-shadow: 0 0 0 3px rgba(28, 140, 124, .16);
}

/* --------------------------------------------------------------------------
   Call to action
   -------------------------------------------------------------------------- */
.cta {
  margin-top: 26px;
  padding: 20px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: var(--shadow);
  text-align: center;
}
.cta h3 { font-size: 16px; margin-bottom: 5px; }
.cta p {
  margin: 0 0 16px;
  font-size: 13.5px;
  color: var(--slate);
  max-width: 46ch;
  margin-inline: auto;
}
@media (min-width: 720px) {
  .cta { text-align: left; }
  .cta p { margin-inline: 0; }
  .cta__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }
  .cta p { margin-bottom: 0; }
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  min-height: 46px;                 /* comfortable tap target on a phone */
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .06s ease;
  white-space: nowrap;
  text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--ink); color: #FFF; }
.btn--primary:hover { background: var(--ink-3); }

.btn--accent { background: var(--amber); color: #43290A; }
.btn--accent:hover { background: #D08C2F; }

.btn--ghost {
  background: var(--card);
  color: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover { background: var(--paper); border-color: #CFD6E0; }

.btn--danger-ghost {
  background: transparent;
  color: var(--red-ink);
  border-color: #EBC7C2;
}
.btn--danger-ghost:hover { background: var(--red-soft); }

.btn--block { width: 100%; }
.btn--sm { min-height: 38px; padding: 8px 14px; font-size: 13px; }

/* --------------------------------------------------------------------------
   Flash messages
   -------------------------------------------------------------------------- */
.flash {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid;
  font-size: 13.5px;
  line-height: 1.5;
  margin-bottom: 16px;
}
.flash__icon { flex: none; font-size: 15px; line-height: 1.35; }
.flash--success { background: var(--teal-soft);  border-color: #B6DED6; color: var(--teal-ink); }
.flash--info    { background: var(--blue-soft);  border-color: #C4D8FB; color: var(--blue-ink); }
.flash--error   { background: var(--red-soft);   border-color: #EEC5C0; color: var(--red-ink); }
.flash--warn    { background: var(--amber-soft); border-color: #EFD6AB; color: var(--amber-ink); }

/* --------------------------------------------------------------------------
   Auth screen
   -------------------------------------------------------------------------- */
.auth {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--ink);
}
.auth__body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 16px 44px;
}
.auth__card {
  width: 100%;
  max-width: 420px;
  background: var(--card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 28px 24px 26px;
}
@media (min-width: 480px) { .auth__card { padding: 34px 32px 30px; } }

.auth__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--amber-ink);
  background: var(--amber-soft);
  border: 1px solid #F0DCB8;
  border-radius: 999px;
  padding: 3px 10px;
  display: inline-block;
  margin-bottom: 14px;
}
.auth__card h1 { font-size: 22px; margin-bottom: 6px; }
.auth__lede {
  margin: 0 0 20px;
  font-size: 13.5px;
  color: var(--slate);
}

.auth__site {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border-radius: var(--radius-sm);
  background: var(--paper);
  border: 1px solid var(--line);
  margin-bottom: 20px;
}
.auth__site .brand__mast span { background: var(--ink-3); }
.auth__site div { min-width: 0; }
.auth__site strong {
  display: block;
  font-size: 13.5px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.auth__site code {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--slate);
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.field { margin-bottom: 15px; }
.field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 6px;
}
.field__hint {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--slate-soft);
}

input[type="text"],
input[type="password"],
input[type="number"],
input[type="search"],
select {
  width: 100%;
  padding: 11px 13px;
  min-height: 46px;
  font-family: var(--font-body);
  font-size: 15px;              /* 16px-ish keeps iOS from zooming on focus */
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-soft);
}
input::placeholder { color: #AAB4C2; }
input.mono { font-family: var(--font-mono); }

.form-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}
@media (min-width: 480px) {
  .form-actions { flex-direction: row-reverse; }
  .form-actions .btn { flex: 1; }
}

.auth__note {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
  font-size: 12.5px;
  color: var(--slate-soft);
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   Access code field (the gate)
   -------------------------------------------------------------------------- */

/* The Show/Hide button sits inside the box rather than beside it, so the
   field keeps the full width of every other input on these screens. */
.code-field { position: relative; }

.code-field__input {
  padding-right: 68px;
  font-size: 18px;
  letter-spacing: .18em;
  text-align: center;
}
.code-field__input::placeholder { letter-spacing: .12em; }

.code-field__toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  padding: 6px 10px;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--slate);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.code-field__toggle:hover {
  background: var(--card);
  border-color: #CFD6E0;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   Editor
   -------------------------------------------------------------------------- */
.editor-bar {
  position: sticky;
  bottom: 0;
  z-index: 20;
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
  padding: 12px 0;
  margin-top: 24px;
  box-shadow: 0 -8px 24px -18px rgba(16, 30, 54, .5);
}
.editor-bar__inner {
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
}
@media (min-width: 560px) {
  .editor-bar__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .editor-bar__inner .btn { min-width: 150px; }
}
.editor-bar__status {
  font-size: 12.5px;
  color: var(--slate);
  text-align: center;
}
@media (min-width: 560px) { .editor-bar__status { text-align: left; } }
.editor-bar__status strong { color: var(--amber-ink); }

/* One editable equipment row */
.erow {
  padding: 13px 16px;
  border-top: 1px solid var(--line-soft);
  transition: background .15s ease;
}
.erow:first-of-type { border-top: 0; }
.erow--changed { background: var(--amber-soft); }
.erow--removing { background: var(--red-soft); }
.erow--removing .erow__grid { opacity: .5; }
.erow--removing input { text-decoration: line-through; }

.erow__grid {
  display: grid;
  grid-template-columns: 1fr 88px;
  gap: 10px;
  align-items: end;
}
.erow__grid label {
  font-size: 10.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--slate-soft);
  margin-bottom: 4px;
  display: block;
}
.erow__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.erow__stamp {
  font-size: 11.5px;
  color: var(--slate-soft);
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Remove toggle: a real checkbox, styled as a small button. */
.remove-toggle { flex: none; }
.remove-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.remove-toggle span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  min-height: 34px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--card);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--slate);
  cursor: pointer;
  user-select: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.remove-toggle span:hover { border-color: #EBC7C2; color: var(--red-ink); }
.remove-toggle input:checked + span {
  background: var(--red);
  border-color: var(--red);
  color: #FFF;
}
.remove-toggle input:focus-visible + span {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* Add-equipment panel */
.adder {
  background: var(--card);
  border: 1px dashed #C9D2DE;
  border-radius: var(--radius-md);
  padding: 16px;
  margin-top: 14px;
}
.adder h3 {
  font-size: 14px;
  margin-bottom: 3px;
}
.adder__lede {
  margin: 0 0 14px;
  font-size: 12.5px;
  color: var(--slate);
}
.adder__row {
  display: grid;
  gap: 10px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  margin-bottom: 10px;
}
@media (min-width: 640px) {
  .adder__row { grid-template-columns: 1.2fr 1.4fr 1fr 84px; align-items: end; }
}
.adder__row label {
  font-size: 10.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--slate-soft);
  margin-bottom: 4px;
  display: block;
}
.adder__row input, .adder__row select { background: var(--card); }

/* --------------------------------------------------------------------------
   Landing / lookup / empty states
   -------------------------------------------------------------------------- */
.panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  padding: 22px 18px;
}
@media (min-width: 720px) { .panel { padding: 28px 26px; } }

.lookup {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media (min-width: 560px) {
  .lookup { flex-direction: row; }
  .lookup input { flex: 1; }
}

.result-list { list-style: none; margin: 20px 0 0; padding: 0; }
.result-list li { border-top: 1px solid var(--line-soft); }
.result-list li:first-child { border-top: 0; }
.result-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 4px;
  color: var(--ink);
}
.result-list a:hover { text-decoration: none; background: var(--paper); }
.result-list strong { font-weight: 500; overflow-wrap: anywhere; }
.result-list code {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--slate);
  display: block;
  margin-top: 2px;
}
.result-list .count {
  flex: none;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--slate-soft);
}

.empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--slate);
}
.empty__mark {
  width: 54px;
  height: 54px;
  margin: 0 auto 14px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--paper);
  border: 1px solid var(--line);
  font-size: 22px;
}
.empty h2 { font-size: 18px; margin-bottom: 6px; }
.empty p { margin: 0 auto 18px; max-width: 42ch; font-size: 13.5px; }
.empty code {
  font-family: var(--font-mono);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 12.5px;
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer {
  margin-top: 36px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--slate-soft);
}
.footer__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  justify-content: space-between;
}
.footer .mono { font-family: var(--font-mono); }

/* --------------------------------------------------------------------------
   IT Department credit
   --------------------------------------------------------------------------
   Sits inline against the "internal system" line, small enough to read as a
   mark rather than as a second heading. It stays faded so it never competes
   with the line it belongs to; pointing at it floats it up and names the
   department in full. Not clickable by design — the tooltip is the whole
   payload.
   -------------------------------------------------------------------------- */
.it-credit {
  --tip-bg: #101E36;
  --tip-fg: #E7ECF4;
  display: inline-flex;
  vertical-align: middle;
}
/* On the dark brand panels the artwork is the light variant, so the tooltip
   flips too — an ink bubble on an ink panel would disappear. */
.it-credit--light {
  --tip-bg: #EDF1F7;
  --tip-fg: #101E36;
}

.it-credit__mark {
  position: relative;
  display: inline-flex;
  outline: none;
  cursor: default;
}
.it-credit__mark img {
  display: block;
  height: 26px;
  width: auto;
  opacity: .7;
  transition: transform .28s cubic-bezier(.22, .68, .3, 1.02),
              opacity .28s ease,
              filter .28s ease;
}
.it-credit__mark:hover img,
.it-credit__mark:focus-visible img {
  transform: translateY(-4px) scale(1.07);
  opacity: 1;
  filter: drop-shadow(0 7px 11px rgba(16, 30, 54, .28));
}
.it-credit--light .it-credit__mark img { opacity: .82; }
.it-credit--light .it-credit__mark:hover img,
.it-credit--light .it-credit__mark:focus-visible img {
  filter: drop-shadow(0 7px 12px rgba(0, 0, 0, .45));
}

.it-credit__tip {
  position: absolute;
  top: calc(100% + 9px);
  left: 50%;
  width: max-content;
  max-width: min(72vw, 290px);
  text-align: center;
  background: var(--tip-bg);
  color: var(--tip-fg);
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: .03em;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  box-shadow: 0 10px 24px -8px rgba(16, 30, 54, .45);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -5px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  z-index: 40;
}
.it-credit__tip::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-bottom-color: var(--tip-bg);
}
.it-credit__mark:hover .it-credit__tip,
.it-credit__mark:focus-visible .it-credit__tip {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/* --up: open above instead, for a credit that sits at the bottom of a panel
   with nothing below it to open into. */
.it-credit--up .it-credit__tip {
  top: auto;
  bottom: calc(100% + 9px);
  transform: translate(-50%, 5px);
}
.it-credit--up .it-credit__tip::after {
  bottom: auto;
  top: 100%;
  border-bottom-color: transparent;
  border-top-color: var(--tip-bg);
}
.it-credit--up .it-credit__mark:hover .it-credit__tip,
.it-credit--up .it-credit__mark:focus-visible .it-credit__tip { transform: translate(-50%, 0); }

/* --start: hang the bubble from the mark's left edge. A centred bubble on a
   mark this close to the left margin would run off the page. */
.it-credit--start .it-credit__tip {
  left: 0;
  text-align: left;
  transform: translate(0, -5px);
}
.it-credit--start .it-credit__tip::after { left: 18px; transform: none; }
.it-credit--start .it-credit__mark:hover .it-credit__tip,
.it-credit--start .it-credit__mark:focus-visible .it-credit__tip { transform: translate(0, 0); }
.it-credit--up.it-credit--start .it-credit__tip { transform: translate(0, 5px); }
.it-credit--up.it-credit--start .it-credit__mark:hover .it-credit__tip,
.it-credit--up.it-credit--start .it-credit__mark:focus-visible .it-credit__tip { transform: translate(0, 0); }

@media (prefers-reduced-motion: reduce) {
  .it-credit__mark:hover img,
  .it-credit__mark:focus-visible img { transform: none; }
}

/* The footer's first line: the mark, then the words it stands for. */
.footer__org {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

/* Same lockup at the foot of the sign-in card, which never renders a footer. */
.auth__org {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
  font-size: 11.5px;
  color: var(--slate-soft);
}

/* Print: a scanned page is sometimes printed for a site file. */
@media print {
  .topbar, .cta, .editor-bar, .footer { display: none; }
  body { background: #FFF; }
  .hero { background: #FFF; color: #000; padding: 0 0 16px; }
  .hero::before { display: none; }
  .hero h1 { color: #000; }
  .chip { border-color: #999; color: #000; background: #FFF; }
  .telco, .stats { box-shadow: none; break-inside: avoid; }
}