/* ===========================================================================
   Ops console and sign in. Dense, plain, fast to scan.
   This is a working surface, not a marketing page.
   =========================================================================== */

.ops{padding-top:2rem}
.ops__head{
  display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-end;justify-content:space-between;
  padding-bottom:1.25rem;margin-bottom:1.5rem;border-bottom:1px solid var(--border);
}

.ops__flash{
  display:flex;align-items:center;gap:.5rem;
  padding:.875rem 1.125rem;border-radius:var(--r-card);
  margin-bottom:1.5rem;font-size:.9375rem;
}
.ops__flash--ok{background:rgba(0,120,109,.10);color:var(--ok)}
.ops__flash--error{background:#fff5f5;color:#5a1b1b;border:1px solid #ffd9d9}
.ops__flash .ico{flex:none}

.ops__panel{
  border:1px solid var(--border);border-radius:var(--r-card);
  background:#fff;padding:1.5rem;margin-bottom:1rem;
}
.ops__panel h2{margin-bottom:.25rem}

.ops__table{width:100%;border-collapse:collapse;margin-top:1rem;font-size:.875rem}
.ops__table th{
  text-align:left;font-family:var(--font-mono);font-size:.6875rem;
  text-transform:uppercase;letter-spacing:.08em;color:var(--muted-foreground);
  font-weight:500;padding:.5rem .75rem .5rem 0;border-bottom:1px solid var(--border);
}
.ops__table td{padding:.75rem .75rem .75rem 0;border-bottom:1px solid var(--border);vertical-align:middle}
.ops__table tr:last-child td{border-bottom:0}
.mono{font-family:var(--font-mono);font-size:.8125rem}

/* Wide tables scroll inside their own box, never the page. */
.ops__panel{overflow-x:auto}

.tag{
  display:inline-block;font-size:.6875rem;font-weight:500;
  padding:.25rem .55rem;border-radius:var(--r-full);white-space:nowrap;
}
.tag--ok{background:rgba(0,120,109,.12);color:var(--ok)}
.tag--warn{background:rgba(252,187,0,.20);color:#8a5c00}
.tag--danger{background:#ffe5e8;color:#a3000f}
.tag--muted{background:var(--secondary);color:var(--muted-foreground)}

/* --- a vetting card ------------------------------------------------------- */

.vet__head{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-start;justify-content:space-between}
.vet__meta{display:flex;flex-wrap:wrap;gap:2rem;margin:1rem 0 1.5rem}
.vet__meta dt{
  font-family:var(--font-mono);font-size:.6875rem;text-transform:uppercase;
  letter-spacing:.08em;color:var(--muted-foreground);margin-bottom:.2rem;
}
.vet__meta dd{font-size:.9375rem}
.vet__sub{font-family:var(--font-display);font-weight:600;font-size:1rem;margin-top:1.25rem}

.vet__rowactions{display:flex;gap:.375rem;flex-wrap:wrap}
.btn--sm{padding:.4375rem .75rem;font-size:.8125rem;min-height:36px}
.btn--ghostlight{background:transparent;color:var(--muted-foreground);border:1px solid var(--border)}
.btn--ghostlight:hover{color:var(--danger);border-color:var(--danger)}

.vet__blockers{
  margin-top:1.25rem;padding:1rem 1.25rem;
  border-radius:var(--r-card);background:#fff5f5;border:1px solid #ffd9d9;
}
.vet__blockers ul{display:grid;gap:.4rem;margin:.5rem 0 .75rem}
.vet__blockers li{display:flex;gap:.5rem;align-items:flex-start;font-size:.875rem;color:#5a1b1b}
.vet__blockers .ico{color:var(--danger);flex:none;margin-top:.15rem}

.vet__actions{margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--border)}
.vet__verify{display:flex;gap:.5rem;flex-wrap:wrap}
.vet__verify .field{flex:1;min-width:14rem}
.btn[disabled]{opacity:.4;cursor:not-allowed}
.btn[disabled]:hover{transform:none}

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

.signin{display:grid;gap:.375rem;margin-top:1.5rem;max-width:22rem}
.signin label{font-size:.875rem;font-weight:500;margin-top:.75rem}
.signin button{margin-top:1.25rem}

/* --- quiz editor ---------------------------------------------------------- */

.qedit{display:grid;gap:1rem;margin-top:1.25rem;max-width:46rem}
.qedit label{display:grid;gap:.3rem;font-size:.875rem;font-weight:500}
.qedit label .small{font-weight:400}
.qedit__grid{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:640px){.qedit__grid{grid-template-columns:2fr 1fr}}
.qedit__check{display:flex;align-items:center;gap:.5rem;max-width:12rem}
.qedit textarea{font-size:.8125rem;line-height:1.5;resize:vertical}
.qedit textarea.is-bad{border-color:var(--danger);background:#fff8f8}
.qedit__reorder{margin-top:.5rem}
.qedit__help{margin-top:1.5rem;border-top:1px solid var(--border);padding-top:1rem}
.qedit__help summary{cursor:pointer;font-size:.875rem;font-weight:500}
.qedit__help pre{
  margin-top:.75rem;padding:1rem;border-radius:var(--r-base);
  background:var(--secondary);font-size:.75rem;line-height:1.6;overflow-x:auto;
}
tr.is-off{opacity:.45}

/* --- dispatch board ------------------------------------------------------- */

.board__meta{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;font-size:.875rem}
.board__stat strong{font-family:var(--font-display);font-size:1.25rem;font-weight:600}
.board__stat--warn strong{color:var(--danger)}
.board__live{display:flex;align-items:center;gap:.4rem;font-size:.75rem;color:var(--ok)}
.board__live.is-stale{color:var(--danger)}
.board__filter{margin-bottom:1.25rem;max-width:14rem}
.board__note{margin-top:1.5rem}

.board__lanes{
  display:grid;gap:.75rem;
  grid-template-columns:repeat(7, minmax(180px, 1fr));
  overflow-x:auto;padding-bottom:.75rem;align-items:start;
}
@media(max-width:1200px){.board__lanes{grid-template-columns:repeat(7, 200px)}}

.lane{background:var(--secondary);border-radius:var(--r-card);padding:.625rem;min-height:8rem}
.lane--ops{background:#fff5f5}
.lane__head{display:flex;align-items:center;gap:.4rem;padding:.25rem .25rem .625rem}
.lane__name{
  font-family:var(--font-mono);font-size:.625rem;text-transform:uppercase;
  letter-spacing:.08em;color:var(--muted-foreground);flex:1;
}
.lane__count{
  font-size:.6875rem;font-weight:600;background:#fff;
  border-radius:var(--r-full);padding:.1rem .4rem;min-width:1.25rem;text-align:center;
}
.lane__alert{color:var(--danger);display:flex}
.lane__cards{display:grid;gap:.5rem}
.lane__empty{font-size:.6875rem;color:var(--muted-foreground);text-align:center;padding:.75rem 0}

.card2{
  display:grid;gap:.3rem;background:#fff;border-radius:var(--r-chip);
  padding:.625rem;border:1px solid var(--border);
  transition:border-color .15s,transform .15s;
}
.card2:hover{border-color:var(--foreground);transform:translateY(-1px)}
.card2.is-breached{border-color:var(--danger);background:#fff8f8}
.card2__cat{font-weight:600;font-size:.8125rem;line-height:1.25}
.card2__zone,.card2__band,.card2__who{
  display:flex;align-items:center;gap:.25rem;
  font-size:.6875rem;color:var(--muted-foreground);
}
.card2__band{font-family:var(--font-mono)}
.card2__foot{
  display:flex;align-items:center;justify-content:space-between;gap:.4rem;
  margin-top:.2rem;padding-top:.35rem;border-top:1px solid var(--border);
}
.card2__clock{
  display:flex;align-items:center;gap:.25rem;
  font-family:var(--font-mono);font-size:.6875rem;font-variant-numeric:tabular-nums;
}
.card2__clock.is-over{color:var(--danger);font-weight:600}
.card2__clock--none{color:var(--warn);font-weight:600}
.card2__attempt{font-size:.625rem;color:var(--muted-foreground)}

/* Job type badges */
.jt{
  font-family:var(--font-mono);font-size:.5625rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.06em;
  padding:.15rem .35rem;border-radius:.25rem;justify-self:start;
}
.jt--emergency{background:#ffe5e8;color:#a3000f}
.jt--standard{background:var(--secondary);color:var(--muted-foreground)}
.jt--recurring{background:rgba(0,120,109,.12);color:var(--ok)}
.jt--project{background:rgba(16,78,100,.12);color:var(--info)}
.jt--build,.jt--buildout{background:rgba(252,187,0,.20);color:#8a5c00}
.jt--new{background:var(--secondary);color:var(--muted-foreground)}

.opsact{display:grid;gap:.625rem;margin-top:1rem}
.opsact__inline{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}
.opsact__inline .field{max-width:16rem}
.opsact__inline input[type=number]{max-width:5rem}

.timeline{display:grid;gap:.35rem;margin-top:1rem;font-size:.8125rem}
.timeline li{display:flex;gap:.75rem;align-items:baseline;padding:.3rem 0;border-bottom:1px solid var(--border)}
.timeline li:last-child{border-bottom:0}
.timeline__when{color:var(--muted-foreground);flex:none;font-size:.6875rem}
.timeline__what{font-weight:500;flex:1}

/* --- moderation and disputes desk ----------------------------------------- */

.desk__row{
  display:grid;gap:.75rem;padding:1rem 0;border-top:1px solid var(--border);
}
.desk__row:first-of-type{border-top:0}
@media(min-width:900px){
  .desk__row{grid-template-columns:1.2fr 1fr;align-items:start}
  .desk__row:has(.desk__figures){grid-template-columns:1fr .8fr 1.2fr}
}
.desk__facts{display:grid;gap:.25rem;align-content:start}
.desk__figures{display:grid;gap:.25rem;font-size:.875rem;align-content:start}
.desk__detail{
  margin-top:.35rem;padding:.5rem .625rem;border-radius:var(--r-base);
  background:var(--secondary);color:var(--body-on-white);
}
.desk__actions{display:grid;gap:.5rem;align-content:start}
.desk__form{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}
.desk__form .field{flex:1;min-width:9rem}
.desk__form select.field{max-width:14rem}

/* --- ops navigation ------------------------------------------------------- */

.opsnav{
  display:flex;gap:.375rem;align-items:center;flex-wrap:wrap;
  padding-bottom:1rem;margin-bottom:1.25rem;border-bottom:1px solid var(--border);
}
.opsnav__tab{
  display:flex;align-items:center;gap:.4rem;
  padding:.5rem .875rem;min-height:44px;border-radius:var(--r-full);
  font-size:.875rem;color:var(--muted-foreground);transition:.15s;
}
.opsnav__tab:hover{color:var(--foreground);background:var(--secondary)}
.opsnav__tab.is-active{background:var(--foreground);color:#fff}
.opsnav__count{
  font-size:.625rem;font-weight:600;line-height:1;
  padding:.2rem .4rem;border-radius:var(--r-full);min-width:1.1rem;text-align:center;
}
.opsnav__count--danger{background:var(--danger);color:#fff}
.opsnav__count--warn{background:var(--warn);color:#4a3200}
.opsnav__count--muted{background:var(--border);color:var(--muted-foreground)}
.opsnav__tab.is-active .opsnav__count--muted{background:rgba(255,255,255,.2);color:#fff}
.opsnav__out{margin-left:auto}
.opsnav__signout{font-size:.875rem;color:var(--muted-foreground);min-height:44px;padding-inline:.5rem}
.opsnav__signout:hover{color:var(--foreground)}

/* ===========================================================================
   Sign in, split panel.

   The form on its own left a wide empty right half on desktop, which reads as
   an unfinished page rather than a calm one. A photograph balances it and says
   who the page is for, which is trades rather than customers.

   The panel is display:none below 900px, not stacked. On a phone a decorative
   image sitting between the heading and the password field is one more thing
   to scroll past on the way to the only task on the page.
   =========================================================================== */

.auth__wrap{max-width:64rem}

.authcard{
  display:grid;
  grid-template-columns:1fr;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r-slab);
  box-shadow:var(--shadow-lg);
  overflow:hidden;                    /* the photo corners follow the card */
}

.authcard__form{padding:2rem 1.5rem}

@media(min-width:900px){
  /* The form column is fixed and the photo takes the rest, so the fields keep
     a comfortable measure on a wide screen instead of stretching. */
  .authcard{grid-template-columns:minmax(0,26rem) 1fr}
  .authcard__form{padding:3rem 2.75rem}
}

.authcard__title{font-size:clamp(2rem,4vw,2.75rem)}
.authcard .signin{max-width:none}
.authcard__note{display:flex;align-items:flex-start;gap:.5rem;margin-top:1.5rem}
.authcard__note .ico{flex:none;margin-top:.15rem;color:var(--accent-deep)}

.authcard__alt{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border)}
.authcard__alt a{font-weight:500;text-decoration:underline;text-underline-offset:3px}

/* --- the photo panel ------------------------------------------------------ */

.authcard__aside{display:none}

@media(min-width:900px){
  .authcard__aside{
    display:block;
    position:relative;
    isolation:isolate;
    background:var(--panel);
    min-height:34rem;
  }

  .authcard__aside img{
    position:absolute;inset:0;
    width:100%;height:100%;
    object-fit:cover;
    /* Pulls the window left so the electrician's face sits inside the panel
       rather than being sliced by the card edge where the form meets it. */
    object-position:42% 32%;
  }

  /* Two stops rather than one. A single flat scrim greys the whole photo; this
     leaves the top of the image alone and only darkens where the text sits. */
  .authcard__aside::after{
    content:"";position:absolute;inset:0;z-index:1;
    background:linear-gradient(
      180deg,
      rgba(10,10,10,.10) 0%,
      rgba(10,10,10,.30) 45%,
      rgba(10,10,10,.86) 100%
    );
  }

  .authcard__overlay{
    position:absolute;z-index:2;
    inset:auto 0 0 0;
    padding:2rem 2.25rem 2.25rem;
    color:var(--panel-fg);
  }
}

/* A filled pill, not amber text.
   --accent on a photograph measured 1.82:1, which fails at any size. It is a
   fill colour: as a background with the dark ink on top it reads at 8:1 and
   still puts the brand colour on the panel. Same rule as the landing page. */
.authcard__eyebrow{display:flex}
.authcard__eyebrow .eyebrow{
  /* --accent-ink on --accent is only 3.36:1, which fails at 11px. On the soft
     tint it is 8:1. Measured, not assumed: the two pairings look similar in a
     mockup and are on opposite sides of the line. */
  background:var(--accent-soft);
  color:var(--accent-ink);
  padding:.375rem .625rem;
  border-radius:var(--r-full);
  letter-spacing:.08em;
}

.authcard__quote{
  font-family:var(--font-display);
  font-size:1.5rem;line-height:1.15;letter-spacing:-.02em;
  margin-top:.75rem;
  text-wrap:balance;
}

.authcard__facts{
  margin-top:1.25rem;
  display:grid;gap:.5rem;
  font-size:.8125rem;
  color:var(--panel-fg-dim);
}
.authcard__facts li{display:flex;align-items:center;gap:.5rem}
.authcard__facts .ico{flex:none;color:var(--accent)}