/* ===========================================================================
   Righto agent portal
   ===========================================================================
   Rebuilt from ~/Desktop/RIGHTO/Veroly/Agent portal design/portal-design.html.
   Colours, radii and spacing are taken from that file rather than guessed.

   Self-contained on purpose. main.css is built for a marketing site with a
   cream page and huge hero type, and fighting it here would cost more than
   the handful of rules this needs.
   =========================================================================== */

:root {
  --navy:   #01001C;
  --cream:  #F3EFE6;
  --pink:   #FF8FAE;   /* on navy only */
  --rasp:   #C7295F;   /* accents on white */
  --slate:  #6B7280;
  --border: #DCD8CF;
  --border-soft: #E6E2DA;
  --page:   #FAF9F6;
  --pink-fill: #FFF5F8;
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-caps: "Oswald", "Arial Narrow", sans-serif;
}

/* HIDDEN MEANS HIDDEN.
   The browser's own rule for the hidden attribute is display:none, and any
   class that sets display beats it. .gate sets display:grid, so the access
   overlay stayed painted over a working portal every time the code was
   accepted: gate.hidden = true did nothing a person could see. Ned hit a
   portal that "doesn't open to anything" three times because of this one
   line. !important so no later rule can take it back. */
[hidden] { display: none !important; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--page); color: var(--navy);
  font-family: var(--font-body); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; }

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

.hd { background: #fff; border-bottom: 1px solid var(--border-soft); }
.hd__in {
  max-width: 1100px; margin: 0 auto; padding: 0.95rem 1.5rem;
  display: flex; align-items: center; gap: 1.1rem;
}
.hd__logo { height: 34px; width: auto; display: block; }
.hd__x { color: var(--slate); font-size: 1.1rem; }
.hd__agency {
  border: 1.5px dashed var(--border); border-radius: 6px;
  padding: 0.7rem 1.6rem;
  font-family: var(--font-caps); font-size: 0.92rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate);
  white-space: nowrap; background: #fff;
}
.hd__agency img { max-height: 34px; width: auto; display: block; }
.hd__title {
  margin-left: auto;
  font-family: var(--font-caps); font-size: 0.95rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate);
}

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

.wrap { max-width: 1100px; margin: 0 auto; padding: 1.8rem 1.5rem 3.5rem; }
.crumbs { font-size: 0.88rem; color: var(--slate); margin: 0 0 0.35rem; }
.crumbs a { color: var(--slate); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
h1 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.6rem, 1.6vw + 0.9rem, 2.1rem);
  line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 1.3rem;
}

.cols { display: grid; gap: 1.25rem; align-items: start; }
/* A grid item's default min-width is auto, so it refuses to go narrower than
   its content and pushes out of the column instead. On a phone that put the
   form card 46px past the page. */
.cols > * { min-width: 0; }
@media (min-width: 1000px) { .cols { grid-template-columns: minmax(0, 1fr) 340px; } }

/* --- the five numbered sections ------------------------------------------ */

.card {
  background: #fff; border: 1px solid var(--border-soft);
  border-radius: 10px; padding: 1.15rem 1.25rem 1.3rem; margin-bottom: 0.85rem;
}
.card__hd { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem; }
.card__n {
  width: 23px; height: 23px; flex: 0 0 23px; border-radius: 50%;
  background: var(--navy); color: var(--pink);
  display: grid; place-items: center;
  font-family: var(--font-body); font-size: 0.76rem; font-weight: 700;
}
/* A count beside a heading, not a step number, so none of the circle. */
.card__n--plain {
  width: auto; height: auto; flex: 0 0 auto; border-radius: 0;
  background: none; color: var(--slate); margin-left: auto;
  font-size: 0.86rem; font-weight: 600;
}
.card__t {
  font-family: var(--font-caps); font-size: 0.9rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; margin: 0;
}

.row { display: grid; gap: 0.8rem; }
.row + .row { margin-top: 0.8rem; }
@media (min-width: 640px) {
  .row--addr { grid-template-columns: 1fr 190px 150px; }
  .row--prop { grid-template-columns: 1.3fr 1fr 1fr 1fr; }
  .row--2 { grid-template-columns: 1fr 1fr; }
  .row--3 { grid-template-columns: 1fr 1fr 1fr; }
}

label, .lbl {
  display: block; font-size: 0.95rem; color: var(--slate); margin-bottom: 0.45rem;
}
.in {
  width: 100%; padding: 0.58rem 0.75rem;
  border: 1px solid var(--border); border-radius: 6px; background: #fff;
  font-family: var(--font-body); font-size: 0.93rem; color: var(--navy);
}
.in:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; }
.in--unit { padding-right: 3rem; }
.unit-wrap { position: relative; }
.unit {
  position: absolute; right: 0.95rem; top: 50%; transform: translateY(-50%);
  color: var(--slate); font-size: 0.95rem; pointer-events: none;
}
select.in { appearance: none; background-image: none; cursor: pointer; }
.sel-wrap { position: relative; }
.sel-wrap::after {
  content: ""; position: absolute; right: 1rem; top: 50%;
  width: 9px; height: 9px; margin-top: -6px; pointer-events: none;
  border-right: 2px solid var(--navy); border-bottom: 2px solid var(--navy);
  transform: rotate(45deg);
}

/* steppers */
.step { display: flex; align-items: center; gap: 0.5rem; }
.step__b {
  width: 42px; height: 46px; flex: 0 0 42px;
  border: 1px solid var(--border); border-radius: 6px; background: var(--cream);
  font-size: 1.1rem; color: var(--navy); cursor: pointer;
}
.step__b:disabled { opacity: 0.4; cursor: default; }
.step__v {
  min-width: 42px; text-align: center; font-size: 1.05rem; font-weight: 600;
}

/* No / Yes */
.toggle {
  display: inline-flex; border: 1px solid var(--border);
  border-radius: 6px; overflow: hidden; background: #fff;
}
.toggle button {
  padding: 0.78rem 1.4rem; border: 0; background: #fff;
  font-size: 1rem; color: var(--navy); cursor: pointer;
}
.toggle button[aria-pressed="true"] { background: var(--navy); color: #fff; font-weight: 600; }

/* --- extras --------------------------------------------------------------- */

.extra {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.6rem 0.8rem; border: 1px solid var(--border);
  border-radius: 7px; margin-bottom: 0.45rem; background: #fff;
  cursor: pointer; width: 100%; text-align: left;
}
.extra[aria-pressed="true"] { border-color: var(--rasp); background: var(--pink-fill); }
.extra__box {
  width: 21px; height: 21px; flex: 0 0 21px; border-radius: 5px;
  border: 1.5px solid var(--border); background: #fff;
  display: grid; place-items: center; color: transparent; font-size: 0.85rem;
}
.extra[aria-pressed="true"] .extra__box {
  background: var(--rasp); border-color: var(--rasp); color: #fff;
}
.extra__name { flex: 1; font-size: 0.93rem; }
.extra__qty {
  display: flex; align-items: center; gap: 0.3rem;
  background: var(--cream); border-radius: 999px; padding: 0.2rem 0.3rem;
}
.extra__qty input {
  width: 46px; border: 0; background: transparent; text-align: center;
  font-family: inherit; font-size: 0.92rem; font-weight: 600; color: var(--navy);
}
.extra__qty span { font-size: 0.92rem; font-weight: 600; padding-right: 0.5rem; }
.extra__qty button {
  width: 26px; height: 26px; border: 0; border-radius: 50%;
  background: #fff; color: var(--navy); cursor: pointer; font-size: 0.95rem;
}

/* --- the navy quote panel ------------------------------------------------- */

@media (min-width: 1000px) { .panel-hold { position: sticky; top: 1.75rem; } }
.panel {
  background: var(--navy); color: #fff;
  border-radius: 10px; padding: 1.35rem 1.4rem 1.45rem;
}
.pill {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: rgba(255, 143, 174, 0.18); color: var(--pink);
  border-radius: 999px; padding: 0.42rem 0.95rem;
  font-family: var(--font-caps); font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.pill__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pink); }
.panel h2 {
  font-family: var(--font-display); font-weight: 800; font-size: 1.45rem;
  margin: 0.8rem 0 0.9rem; letter-spacing: -0.015em;
}
.ln {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.7rem 0; border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.ln:first-of-type { border-top: 0; padding-top: 0; }
.ln__sub { font-size: 0.9rem; color: rgba(255, 255, 255, 0.55); margin-top: 0.2rem; }
.ln__amt { white-space: nowrap; font-size: 1.05rem; }
.tot-k {
  font-family: var(--font-caps); font-size: 0.82rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  margin: 1.3rem 0 0.35rem; padding-top: 1.3rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.tot-v {
  font-family: var(--font-display); font-weight: 800;
  font-size: 2.2rem; line-height: 1; letter-spacing: -0.02em;
}
.tot-v sup { color: var(--pink); font-size: 1.05rem; top: -0.7rem; position: relative; }
.tot-gst { font-size: 0.85rem; color: rgba(255, 255, 255, 0.55); margin-top: 0.5rem; }

.btn {
  display: block; width: 100%; text-align: center;
  padding: 0.72rem 1.1rem; border-radius: 7px; border: 1.5px solid transparent;
  font-family: var(--font-body); font-size: 0.95rem; font-weight: 700;
  cursor: pointer; margin-top: 0.65rem;
}
.btn--send { background: var(--pink); color: var(--navy); }
.btn--send:disabled { opacity: 0.45; cursor: not-allowed; }
.btn--pdf { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.4); }

.thumb { display: flex; gap: 1.1rem; align-items: flex-start; margin-top: 1.6rem; }
.thumb__img {
  width: 96px; flex: 0 0 96px; background: #fff; border-radius: 5px;
  padding: 0.6rem; aspect-ratio: 1 / 1.3;
}
.thumb__img img { width: 60%; height: auto; display: block; }
.thumb__bar { height: 7px; background: var(--pink); border-radius: 2px; margin: 0.7rem 0 0.5rem; }
.thumb__lines span {
  display: block; height: 5px; background: var(--cream); border-radius: 2px; margin-bottom: 0.3rem;
}
.thumb p { margin: 0; font-size: 0.98rem; color: rgba(255, 255, 255, 0.78); line-height: 1.45; }

.foot {
  font-size: 0.9rem; color: rgba(255, 255, 255, 0.55);
  margin: 1.6rem 0 0; line-height: 1.5;
}

/* --- messages ------------------------------------------------------------- */

.msg { margin-top: 1rem; padding: 0.85rem 1rem; border-radius: 7px; font-size: 0.95rem; }
.msg--ok { background: rgba(255, 255, 255, 0.1); color: #fff; }
.msg--bad { background: rgba(255, 143, 174, 0.16); color: var(--pink); }

/* --- the access gate ------------------------------------------------------ */

.gate {
  position: fixed; inset: 0; background: var(--page);
  display: grid; place-items: center; padding: 1.5rem; z-index: 50;
}
.gate__box {
  background: #fff; border: 1px solid var(--border-soft); border-radius: 10px;
  padding: 2rem; max-width: 380px; width: 100%; text-align: center;
}
.gate__box img { height: 42px; margin-bottom: 1.4rem; }
.gate__box h2 { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; margin: 0 0 0.4rem; }
.gate__box p { color: var(--slate); font-size: 0.95rem; margin: 0 0 1.4rem; }
.gate__box .in { text-align: center; letter-spacing: 0.1em; }
/* Two boxes since 2 November 2026, when the email joined the PIN. They sat
   flush on each other, because the PIN box had never needed a gap above it.
   Ned, 4 November 2026, with a picture of them touching: "fix the login",
   then "the boxes are right on top of each other". The gap is the same one
   the button has under them, so the three stack evenly. */
.gate__box .in + .in { margin-top: 0.85rem; }
/* The spacing is for a PIN's digits. An email address is not a PIN. */
.gate__box input[type="email"] { letter-spacing: 0; }
.gate__go {
  width: 100%; margin-top: 0.85rem; padding: 0.9rem; border: 0; border-radius: 7px;
  background: var(--rasp); color: #fff; font-size: 1rem; font-weight: 700; cursor: pointer;
}
.gate__err { color: var(--rasp); font-size: 0.9rem; margin-top: 0.8rem; min-height: 1.2em; }

/* ===========================================================================
   The portal home page, the login and Righto's admin page
   ===========================================================================
   Added 28 October 2026, when the shared access code became real logins. The
   quote-row rules (.q, .tag, .empty) used to sit in a <style> block inside
   index.html. They are here now because three pages draw those rows, and a
   rule that lives in one page is a rule the other two quietly lose.
   =========================================================================== */

/* --- header extras ------------------------------------------------------- */

/* A real logo does not want the dashed "your logo here" box around it. */
.hd__agency--real { border: 0; padding: 0.3rem 0; background: none; }
/* Their logo gets a fixed box: 140 x 34. The admin page tells them 320 x 80,
   which is the same 4:1 shape at a size that still looks sharp on a retina
   screen. Without the max-width a long wordmark pushes Log out off the end. */
.hd__agency--real img { max-height: 34px; max-width: 140px; object-fit: contain; }

.hd__out {
  margin-left: 1rem; padding: 0.5rem 0.95rem;
  border: 1px solid var(--border); border-radius: 6px; background: #fff;
  font-family: var(--font-body); font-size: 0.88rem; font-weight: 600;
  color: var(--slate); cursor: pointer;
}
.hd__out:hover { color: var(--navy); border-color: var(--slate); }
/* Righto inside the demo: Back to Righto sits beside Log out. On a phone
   both would otherwise claim the auto margin and float apart. */
.hd__out--back + .hd__out { margin-left: 0; }

/* --- the greeting -------------------------------------------------------- */

.hello {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.65rem, 2.4vw + 0.5rem, 2.2rem); line-height: 1.1;
  margin: 0 0 0.3rem; color: var(--navy);
}
.hello__sub { margin: 0 0 1.4rem; color: var(--slate); font-size: 0.98rem; }

/* --- the big "new quote" button ------------------------------------------ */

.big {
  display: flex; align-items: center; gap: 1.1rem;
  background: var(--navy); color: #fff; text-decoration: none;
  border-radius: 10px; padding: 1rem 1.25rem; margin-bottom: 1.5rem;
}
.big:hover { background: #0b0a33; }
.big__plus {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  background: var(--rasp); color: #fff; display: grid; place-items: center;
  font-size: 1.5rem; line-height: 1;
}
.big__t { display: block; font-size: 1.02rem; font-weight: 700; }
.big__s { display: block; font-size: 0.93rem; color: rgba(255, 255, 255, 0.72); margin-top: 0.15rem; }

/* --- a row of quotes ----------------------------------------------------- */

.q { display: grid; gap: 0.25rem 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--border-soft); }
.q:last-child { border-bottom: 0; }
@media (min-width: 760px) { .q { grid-template-columns: minmax(0, 1fr) 150px 150px 110px; align-items: center; } }
/* The address is the long one and it is the column that has to give, so it
   gets the flexible track and permission to break a long street name rather
   than push the total off the end. */
.q__a { overflow-wrap: anywhere; }
/* These are spans, not divs: the row is a <button> now so you can open the
   quote, and a <div> inside a <button> is invalid HTML that the parser lifts
   straight back out. Spans are inline, so they need telling to stack. */
.q__a { display: block; font-weight: 600; }
.q__m { display: block; font-size: 0.92rem; color: var(--slate); }
.q__t { display: block; font-weight: 600; }
@media (min-width: 760px) { .q__t { text-align: right; } }

.tag {
  display: inline-block; font-size: 0.78rem; font-weight: 700;
  border-radius: 999px; padding: 0.25rem 0.7rem; background: var(--cream); color: var(--slate);
}
.tag--sent { background: #EAF1FB; color: #1B4F9C; }
/* Accepted is the one Ned scans for, so it is the one with colour in it. */
.tag--accepted { background: #E6F6EC; color: #176B37; }
/* A practice quote. Loud on purpose: nothing it says is real. */
.tag--demo { background: var(--navy); color: var(--pink); }
.empty { color: var(--slate); padding: 2.5rem 0; }

/* --- login and forgot ---------------------------------------------------- */

.gate__alt { margin: 1.1rem 0 0; font-size: 0.92rem; }
.gate__alt a { color: var(--slate); }
.gate__alt a:hover { color: var(--rasp); }
.gate__ok {
  margin-top: 0.9rem; font-size: 0.93rem; line-height: 1.45;
  color: #1B4F9C; background: #EAF1FB; border-radius: 7px; padding: 0.75rem 0.9rem;
}

/* --- Righto's admin page ------------------------------------------------- */

.ag {
  display: grid; gap: 0.5rem 1rem; align-items: center;
  padding: 1.05rem 0; border-bottom: 1px solid var(--border-soft);
  grid-template-columns: 56px 1fr;
}
.ag:last-child { border-bottom: 0; }
/* The buttons get their own line and the name gets the rest. The media
   query asks the VIEWPORT how wide it is, but this card sits in a column, so
   at 1280px the rule fired inside a 660px card and five buttons squeezed the
   agency name down to one letter per line. A column that can shrink has to
   be minmax(0, 1fr), and a row of buttons that grows has to be on its own
   row. Found 28 October 2026, the moment the page went back to two columns. */
@media (min-width: 860px) { .ag { grid-template-columns: 56px minmax(0, 1fr) auto; } }
.ag .q__a { overflow-wrap: anywhere; }
.ag--off { opacity: 0.5; }
.ag__logo {
  width: 56px; height: 44px; border-radius: 6px; background: var(--cream);
  display: grid; place-items: center; overflow: hidden;
}
.ag__logo img { max-width: 48px; max-height: 36px; width: auto; height: auto; display: block; }
.ag__logo--letter {
  font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; color: var(--slate);
}
.ag__acts { display: flex; gap: 0.5rem; flex-wrap: wrap; grid-column: 1 / -1; }

.mini {
  padding: 0.45rem 0.8rem; border: 1px solid var(--border); border-radius: 6px;
  background: #fff; font-family: var(--font-body); font-size: 0.85rem; font-weight: 600;
  color: var(--slate); cursor: pointer; white-space: nowrap;
}
.mini:hover { color: var(--navy); border-color: var(--slate); }

.pinrow { display: flex; gap: 0.5rem; align-items: stretch; }
.pinrow .in { flex: 1; }

.logo-prev {
  margin: 0.6rem 0 0; padding: 0.75rem; background: var(--cream);
  border-radius: 7px; display: grid; place-items: center;
}
.logo-prev img { max-height: 54px; max-width: 100%; width: auto; display: block; }

.hint { margin: 0.35rem 0 0; font-size: 0.85rem; color: var(--slate); }
.opt { font-weight: 400; color: var(--slate); text-transform: none; letter-spacing: 0; }

/* --- the header on a phone ----------------------------------------------- */
/* Two logos, a separator and a log out button do not fit across 375px at
   desktop sizes: the agency's own logo was cut in half and Log out was off
   the screen entirely. The marks shrink, the "Agent portal" label goes (the
   page title says it anyway) and the button keeps its place. */
@media (max-width: 760px) {
  .hd__in { padding: 0.85rem 1rem; gap: 0.7rem; }
  .hd__logo { height: 30px; }
  .hd__agency--real img { max-height: 30px; max-width: 120px; object-fit: contain; }
  .hd__agency { padding: 0.75rem 1.1rem; font-size: 0.78rem; letter-spacing: 0.06em; }
  .hd__agency--real { padding: 0; }
  .hd__title { display: none; }
  .hd__out { margin-left: auto; padding: 0.42rem 0.7rem; font-size: 0.82rem; }
}

/* ===========================================================================
   OPENING A QUOTE                                     28 October 2026
   ===========================================================================
   Ned: "I actually can't go in and see the actual quotes, which is what I
   want to do... it should be each individual person, not just overall
   quotes." So the quotes sit under the agency that sent them, and a row
   opens into the quote itself.

   Every row that opens something is a <button>, and the things inside it are
   spans. A <div> inside a <button> is invalid HTML, the parser lifts it out,
   and what is left throws and takes the rest of the page's script with it.
   That is twice this portal has shipped dead.
   =========================================================================== */

.mini--lead { border-color: var(--navy); color: var(--navy); font-weight: 700; }

.ql-wrap { grid-column: 1 / -1; margin-top: 0.9rem; }
.ql { border-top: 1px solid var(--border-soft); }

.ql__row {
  display: grid; gap: 0.2rem 1rem; width: 100%; text-align: left;
  padding: 0.85rem 0.2rem; background: none; border: 0;
  border-bottom: 1px solid var(--border-soft); cursor: pointer;
  font: inherit; color: inherit;
}
.ql__row:hover { background: var(--cream); }
.ql__row[aria-expanded="true"] { background: var(--cream); }
@media (min-width: 760px) {
  .ql__row { grid-template-columns: minmax(0, 1fr) 150px 110px; align-items: center; }
}
.ql__left { display: block; min-width: 0; }
.ql__a { display: block; font-weight: 600; overflow-wrap: anywhere; }
.ql__m { display: block; font-size: 0.88rem; color: var(--slate); }
.ql__t { font-weight: 600; }
@media (min-width: 760px) { .ql__t { text-align: right; } }

/* The quote itself, under the row that opened it. */
.qd {
  background: var(--cream); padding: 1.1rem 1.2rem 1.25rem;
  border-bottom: 1px solid var(--border-soft);
}
.qd__wait { margin: 0; color: var(--slate); font-size: 0.92rem; }
.qd__hd { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.35rem; }
.qd__num { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em;
           text-transform: uppercase; color: var(--slate); }
.qd__addr { margin: 0 0 0.9rem; font-weight: 600; font-size: 1.02rem; }

.qd__items { background: #fff; border: 1px solid var(--border-soft); padding: 0.3rem 0.9rem; }
.qd__ln { display: flex; justify-content: space-between; gap: 1rem;
          padding: 0.55rem 0; border-bottom: 1px solid var(--border-soft); font-size: 0.94rem; }
.qd__ln:last-child { border-bottom: 0; }
.qd__ln--total { font-weight: 700; }
.qd__amt { white-space: nowrap; }

.qd__rows { margin-top: 0.9rem; }
.qd__row { display: flex; gap: 1rem; padding: 0.35rem 0; font-size: 0.92rem; }
.qd__k { flex: 0 0 38%; color: var(--slate); }
.qd__v { flex: 1 1 auto; overflow-wrap: anywhere; }

/* An agency's own list on the home page: the same row, already a grid. */
.q--open {
  width: 100%; text-align: left; background: none; border: 0;
  border-bottom: 1px solid var(--border-soft); cursor: pointer; font: inherit; color: inherit;
}
.q--open:hover, .q--open[aria-expanded="true"] { background: var(--cream); }

.empty--tight { padding: 1.2rem 0; font-size: 0.92rem; }

/* Making a portal happens once per agency, so it gets the narrow side and
   the portals keep the width a quote needs to read well. */
@media (min-width: 980px) {
  .cols--admin { grid-template-columns: minmax(0, 1fr) 340px; }
}

/* The top of the home page: the quote button and the team on the left, the
   form that adds to the team on the right. Ned, 30 October 2026, from a
   mock-up: the add card runs the full height of the left column, so its top
   is level with the quote button and its bottom with Your team.

   `.team` becomes display:contents at that width, so its two cards are
   items of THIS grid rather than a grid of their own. That is what lets the
   add card span both rows while #people-card stays the single thing the
   page hides from everybody who is not an agency admin. */
.top { display: grid; gap: 1.5rem; margin-bottom: 0.85rem; }
.top > *, .top .card { min-width: 0; }
.top .big, .top .card { margin-bottom: 0; }

.team { display: grid; gap: 1.5rem; align-items: start; }

@media (min-width: 900px) {
  .top { grid-template-columns: minmax(0, 1fr) 340px; gap: 1.25rem; margin-bottom: 1.25rem; }
  .top .team { display: contents; }
  .top .big { grid-column: 1; grid-row: 1; }
  .top .team > .card:first-child { grid-column: 1; grid-row: 2; }
  .top .team > .card:last-child {
    grid-column: 2; grid-row: 1 / span 2;
    display: flex; flex-direction: column;
  }
  /* The holder the form is built into, so the form can fill the card. */
  .top .team > .card:last-child > #people-add { flex: 1; display: flex; flex-direction: column; }
}
/* display:contents replaces the hidden attribute's own display:none, so the
   one element the page hides has to say it again. */
#people-card[hidden] { display: none; }

/* The add form, on the HOME PAGE ONLY. `addForm()` builds the same markup
   for Righto's admin page, which is not part of this change, so every rule
   here hangs off .pp-add--own. */
.pp-add--own { margin: 0; padding: 0; border-top: 0; max-width: none;
               flex: 1; display: flex; flex-direction: column; }
.pp-add--own .pinrow { margin-bottom: 0.7rem; }
/* The tick box and the button share the bottom line, and any spare height in
   the card sits above them rather than under them. */
.pp-add--own .pp-add__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-top: auto; padding-top: 0.9rem;
}
.pp-add--own .pp-add__row .pp-add__chk { margin: 0; }
.pp-add--own .pp-add__row .gate__go { width: auto; margin-top: 0; padding: 0.72rem 1.3rem; }

/* A chooser sitting in a card heading rather than on a line of its own. */
.in--inline {
  width: auto; margin-left: auto; padding: 0.42rem 2rem 0.42rem 0.7rem;
  font-size: 0.88rem;
}

/* --- the people at an agency --------------------------------------------- */
/* 28 October 2026. An agency row used to be one person; it holds a list of
   them now, and this is that list wherever it appears: under an agency on
   Righto's page, and on an agency admin's own home page. */

.pp {
  display: grid; gap: 0.2rem 1rem; padding: 0.85rem 0.2rem;
  border-bottom: 1px solid var(--border-soft); align-items: center;
}
@media (min-width: 760px) { .pp { grid-template-columns: minmax(0, 1fr) 110px auto; } }
.pp__n { font-weight: 600; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

.pp__badge {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  border-radius: 999px; padding: 0.15rem 0.5rem; background: var(--navy); color: var(--pink);
}
.pp__badge--off { background: var(--cream); color: var(--slate); }

.pp-add { margin-top: 1.2rem; padding-top: 1.1rem; border-top: 1px solid var(--border-soft); max-width: 420px; }
.pp-add__t { margin: 0 0 0.7rem; font-weight: 700; font-size: 0.86rem;
             letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate); }
.pp-add__chk { display: flex; align-items: center; gap: 0.5rem; margin: 0.8rem 0 1rem;
               font-size: 0.92rem; }
.pp-add__chk input { width: 18px; height: 18px; }

/* The little i on an extra. 28 Oct 2026: agents were ticking an oven clean
   for an oven that only needed what the bond clean already covers. */
.extra__i {
  display: inline-grid; place-items: center; width: 18px; height: 18px;
  margin-left: 0.45rem; vertical-align: middle;
  border: 1px solid var(--slate); border-radius: 50%; background: none;
  color: var(--slate); font: 700 0.68rem/1 var(--font-body); cursor: pointer;
}
.extra__i:hover { border-color: var(--navy); color: var(--navy); }
.extra__i[aria-expanded="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.extra__info {
  grid-column: 1 / -1; margin: 0.55rem 0 0;
  font-size: 0.86rem; line-height: 1.45; color: var(--slate);
}

/* ===========================================================================
   A job the cleaner could not make
   ===========================================================================
   29 October 2026. The cleaner's page can now say no, with times they CAN
   do, and this is the panel where Ned picks one. It sits inside an open
   quote, below everything else, because it is the only part of that panel
   that does something rather than reporting something.

   Raspberry rather than the quiet cream the rest of the panel uses: it is
   the one block in the portal that means somebody has to act. */

.rs {
  margin-top: 1.1rem; padding: 1rem 1.1rem 1.15rem;
  background: var(--pink-fill); border: 1px solid var(--rasp); border-radius: 8px;
}
.rs__t {
  margin: 0 0 0.3rem; font-family: var(--font-display); font-size: 1.05rem;
  font-weight: 800; color: var(--navy);
}
.rs__says { margin: 0 0 0.6rem; font-size: 0.92rem; color: var(--navy); }
.rs__k {
  margin: 1rem 0 0.5rem; font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate);
}

/* One per time they offered. Full width and tall enough to hit on a phone,
   because Ned reads the alert on his phone and taps straight through. */
.rs__time {
  display: flex; justify-content: space-between; align-items: center; gap: 0.8rem;
  width: 100%; min-height: 48px; margin-bottom: 0.5rem; padding: 0.6rem 0.9rem;
  background: #fff; border: 1px solid var(--border); border-radius: 7px;
  font: inherit; font-size: 0.94rem; color: var(--navy); text-align: left; cursor: pointer;
}
.rs__time:hover:not(:disabled) { border-color: var(--navy); }
.rs__time:disabled { opacity: 0.55; cursor: default; }
.rs__time-d { font-weight: 600; }
/* A time past the agent's must-be-done-by date. Shown, never blocked: it may
   still be the best of a bad set and Ned is the one deciding. */
.rs__time-w {
  font-size: 0.78rem; font-weight: 700; color: var(--rasp); white-space: nowrap;
}
.rs__time--warn { border-color: var(--rasp); }

.rs__own { display: flex; gap: 0.5rem; align-items: stretch; flex-wrap: wrap; }
.rs__own .in { flex: 1 1 8rem; min-width: 0; }

.rs__reassign {
  width: 100%; min-height: 44px; margin-top: 1rem;
  background: none; border: 1px solid var(--border); border-radius: 7px;
  font: inherit; font-size: 0.9rem; font-weight: 600; color: var(--slate); cursor: pointer;
}
.rs__reassign:hover:not(:disabled) { color: var(--navy); border-color: var(--slate); }
.rs__reassign:disabled { opacity: 0.55; cursor: default; }

.rs__msg { margin: 0.7rem 0 0; font-size: 0.9rem; color: var(--slate); min-height: 1.2em; }
.rs__msg--bad { color: var(--rasp); font-weight: 600; }
.rs__note { margin: 0.5rem 0 0; font-size: 0.85rem; color: var(--slate); }

/* The list of them, at the top of the home page. Ned, 29 October 2026: this
   is the thing he opens the portal to deal with, so it goes above the quotes
   rather than being something to scroll for. */
.card--alert { border-color: var(--rasp); }
.card--alert .card__t { color: var(--rasp); }
.rs-count {
  display: inline-block; margin-left: 0.5rem; padding: 0.1rem 0.5rem;
  background: var(--rasp); color: #fff; border-radius: 999px;
  font-size: 0.78rem; font-weight: 700;
}
.tag--needs { background: #FDE8EF; color: #A11D4B; }
.tag--awaiting { background: var(--cream); color: var(--slate); }

/* ===========================================================================
   Address suggestions (2 November 2026)
   ===========================================================================
   The same list as on quote.html, in the portal's own tokens. The rules are
   written twice on purpose: the two stylesheets name their colours
   differently (--ink here is --navy, --line is --border) and a shared block
   would have to invent a third set to sit between them. */

.addr-suggest__wrap { position: relative; }

.addr-suggest {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(1, 0, 28, 0.12);
  max-height: 16rem;
  overflow-y: auto;
}

.addr-suggest__row {
  padding: 0.65rem 0.8rem;
  font-size: 0.9375rem;
  line-height: 1.35;
  cursor: pointer;
  border-bottom: 1px solid var(--border-soft);
}

.addr-suggest__row:last-child { border-bottom: 0; }
.addr-suggest__row strong { font-weight: 600; color: var(--navy); }
.addr-suggest__row span { color: var(--slate); }
.addr-suggest__row:hover,
.addr-suggest__row.is-on { background: var(--page); }