/* ADDVER — shared styles.

   This is a government-adjacent trust product, so the visual language is
   deliberately institutional rather than fashionable: a deep ink green that
   reads as official without reaching for the national flag, generous
   whitespace, one accent used sparingly.

   The one place it spends any boldness is the Yardcode display. A Yardcode has
   real internal structure — a grid cell plus a four-letter spoken word — and
   setting those two parts differently is what makes it read as an address
   rather than a random string.
*/

:root{
  /* YardCode: golden yellow, a little red, a little black.
     Yellow is a foreground colour here, not a background one — it has almost
     no contrast against white, so it carries buttons and accents with BLACK
     text on top, never yellow text on light. Red is reserved for destruction
     and failure, so it keeps its meaning. */
  --ink:#161310; --ink-soft:#5a534a; --ink-faint:#928a7e;
  --surface:#ffffff; --sunk:#faf7f1; --line:#e8e1d5;

  --brand:#e0a213;              /* golden yellow */
  --brand-deep:#b57c00;         /* for text on light — the yellow itself fails contrast */
  --brand-soft:#fdf4dd;
  --brand-ink:#161310;          /* what sits ON yellow */

  --accent:#c0392b;             /* red: failure, danger, nothing else */
  --accent-soft:#fbeae7;

  --ok:#1d7a4c; --ok-soft:#e7f5ed;
  --warn:#9a6b00; --warn-soft:#fdf3dc;
  --bad:#c0392b; --bad-soft:#fbeae7;
  --info:#2b5f8b; --info-soft:#e9f1f8;

  --radius:12px; --radius-sm:8px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono",Menlo,Consolas,monospace;
}

*{box-sizing:border-box}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--sunk);
     -webkit-font-smoothing:antialiased;line-height:1.5}
a{color:var(--brand-deep)}

.wrap{max-width:1180px;margin:0 auto;padding:24px}
.narrow{max-width:680px}

/* Black bar with a yellow rule under it. Yellow as a full background would
   leave the nav unreadable; as a 3px edge it reads as brand without fighting. */
.topbar{background:var(--ink);color:#fff;padding:13px 0;
        border-bottom:3px solid var(--brand)}
.topbar .wrap{display:flex;align-items:center;gap:14px;padding-top:0;padding-bottom:0}
.topbar .mark{font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:13px}
.topbar .logo{height:26px;width:auto;max-width:150px;object-fit:contain;display:block}
.topbar .org{font-weight:640;font-size:15px;letter-spacing:-.01em;color:#fff}
.topbar .by{font-size:11px;color:rgba(255,255,255,.55);letter-spacing:.1em;
            text-transform:uppercase}
.topbar nav{margin-left:auto;display:flex;gap:18px;font-size:14px;align-items:center}
.topbar nav a{color:rgba(255,255,255,.82);text-decoration:none}
.topbar nav a:hover{color:#fff}
.topbar nav a.on{color:var(--brand);font-weight:600}

/* Institution identity band. Their name is the largest thing on their page. */
.orgband{background:var(--surface);border-bottom:1px solid var(--line);padding:20px 0}
.orgband .wrap{display:flex;align-items:center;gap:18px;padding-top:0;padding-bottom:0}
.orgband img{height:44px;width:auto;max-width:190px;object-fit:contain}
.orgband h1{font-size:23px;margin:0;letter-spacing:-.02em}
.orgband .meta{font-size:12.5px;color:var(--ink-faint);margin-top:2px}
.orgband .powered{margin-left:auto;text-align:right;font-size:11px;
                  color:var(--ink-faint);letter-spacing:.08em;text-transform:uppercase}
.orgband .powered strong{display:block;font-size:13px;letter-spacing:.14em;
                         color:var(--ink);margin-top:3px}

h1{font-size:26px;font-weight:650;letter-spacing:-.02em;margin:0 0 6px}
h2{font-size:18px;font-weight:640;margin:0 0 12px;letter-spacing:-.01em}
.sub{color:var(--ink-soft);margin:0 0 22px}

.card{background:var(--surface);border:1px solid var(--line);
      border-radius:var(--radius);padding:22px;margin-bottom:18px}
.grid{display:grid;gap:18px}
.grid.c2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid.c4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}

/* the code display — the one loud element */
.code{font-family:var(--mono);display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.code .cell{font-size:30px;font-weight:620;letter-spacing:.06em}
.code .spot{font-size:19px;color:var(--brand-deep);background:var(--brand-soft);
            padding:2px 10px;border-radius:999px}
.code.small .cell{font-size:19px}
.code.small .spot{font-size:14px}

.label{font-size:10.5px;font-weight:660;letter-spacing:.14em;text-transform:uppercase;
       color:var(--ink-faint);margin-bottom:8px}
.stat{font-size:29px;font-weight:640;letter-spacing:-.02em}
.stat small{display:block;font-size:12.5px;font-weight:400;color:var(--ink-soft);
            letter-spacing:0;margin-top:2px}

.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 11px;border-radius:999px;
      font-size:12px;font-weight:600}
.pill.completed{background:var(--ok-soft);color:var(--ok)}
.pill.failed{background:var(--bad-soft);color:var(--bad)}
.pill.retest_required{background:var(--warn-soft);color:var(--warn)}
.pill.pending{background:var(--info-soft);color:var(--info)}

table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
   color:var(--ink-faint);padding:10px 12px;border-bottom:1px solid var(--line)}
td{padding:12px;border-bottom:1px solid var(--line)}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--sunk)}
td.mono,.mono{font-family:var(--mono);font-size:12.5px}

.btn{display:inline-block;padding:11px 18px;border-radius:var(--radius-sm);
     border:1px solid transparent;font:inherit;font-size:14px;font-weight:600;
     cursor:pointer;text-decoration:none}
.btn-primary{background:var(--brand);color:var(--brand-ink);font-weight:650}
.btn-primary:hover{background:var(--brand-deep);color:#fff}
.btn-danger{background:var(--accent);color:#fff}
.btn-danger:hover{opacity:.9}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--ink-soft)}
.btn-ghost:hover{background:var(--sunk);color:var(--ink)}
.btn:disabled{opacity:.5;cursor:not-allowed}

.field{margin-bottom:15px}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-soft);
             margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;padding:11px 13px;font:inherit;
  font-size:15px;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:#fff;color:var(--ink)}
.field input:focus,.field select:focus{outline:none;border-color:var(--brand-deep);
  box-shadow:0 0 0 3px var(--brand-soft)}
.field .hint{font-size:12px;color:var(--ink-faint);margin-top:6px}

.notice{padding:13px 15px;border-radius:var(--radius-sm);font-size:13.5px;margin-bottom:16px}
.notice.warn{background:var(--warn-soft);color:var(--warn)}
.notice.bad{background:var(--bad-soft);color:var(--bad)}
.notice.ok{background:var(--ok-soft);color:var(--ok)}
.notice.info{background:var(--info-soft);color:var(--info)}

/* presence timeline — the whole 48 hours at a glance.
   A genuine resident shows solid night blocks; a failure shows scatter; a
   phone-off gap looks like a gap rather than an absence. That distinction is
   why no_data has its own colour and is never drawn as absence. */
.timeline{display:flex;gap:1px;height:46px;border-radius:6px;overflow:hidden;
          background:var(--line);margin:14px 0}
.timeline i{flex:1;min-width:2px;display:block}
.timeline i.present{background:var(--ok)}
.timeline i.absent{background:var(--bad)}
.timeline i.unusable{background:#c9b27a}
.timeline i.no_data{background:#dfe5e2}

.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--ink-soft)}
.legend span{display:flex;align-items:center;gap:6px}
.legend b{width:11px;height:11px;border-radius:3px;display:inline-block}

.chart{width:100%;height:210px}
.muted{color:var(--ink-soft)}
.right{text-align:right}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.spacer{margin-left:auto}

dl.facts{display:grid;grid-template-columns:150px 1fr;gap:9px 14px;font-size:14px;margin:0}
dl.facts dt{color:var(--ink-faint)}
dl.facts dd{margin:0}

:focus-visible{outline:2px solid var(--brand-deep);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;
  transition-duration:.01ms!important}}

/* --- statistics ------------------------------------------------------- */
.bars{display:flex;flex-direction:column;gap:9px}
.bar{display:grid;grid-template-columns:150px 1fr 62px;gap:12px;align-items:center;
     font-size:13.5px}
.bar .track{background:var(--sunk);border-radius:5px;height:22px;overflow:hidden}
.bar .fill{height:100%;background:var(--brand);border-radius:5px}
.bar .fill.ok{background:var(--ok)}
.bar .fill.bad{background:var(--bad)}
.bar .fill.warn{background:var(--warn)}
.bar .n{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink-soft)}

.donut{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.donut svg{flex:0 0 auto}
.donut .key{display:flex;flex-direction:column;gap:7px;font-size:13.5px}
.donut .key span{display:flex;align-items:center;gap:9px}
.donut .key b{width:11px;height:11px;border-radius:3px;display:inline-block}

.swatch{width:34px;height:34px;border-radius:8px;border:1px solid var(--line);
        display:inline-block;vertical-align:middle}
.logo-preview{max-height:64px;max-width:220px;object-fit:contain;
              background:var(--sunk);padding:10px;border-radius:8px}

/* [hidden] must win.
   .btn sets display:inline-flex, which beats the browser's own
   [hidden]{display:none} because a class outranks a UA style. The result was a
   pair of certificate buttons that were "hidden", fully visible, and pointing
   nowhere. */
[hidden]{display:none !important}

/* --- loading skeletons -------------------------------------------------
   Shown while a table or card waits on data. A skeleton that matches the
   shape of what is coming stops the layout jumping when it arrives, which
   reads as faster than a spinner even when it is not. */
@keyframes shimmer{0%{background-position:-420px 0}100%{background-position:420px 0}}
.sk{background:var(--sunk);border-radius:5px;display:inline-block;
    background-image:linear-gradient(90deg,var(--sunk) 0,#f2ede3 42%,var(--sunk) 84%);
    background-size:420px 100%;animation:shimmer 1.25s linear infinite}
.sk-line{height:12px;width:100%}
.sk-cell{height:12px}
.sk-stat{height:30px;width:64%;margin-top:6px}
tr.sk-row td{padding:14px 12px}

/* Motion is decoration. Anyone who has asked the system to stop moving
   things gets a static block instead. */
@media (prefers-reduced-motion:reduce){
  .sk{animation:none;background-image:none}
}

/* --- clickable rows ----------------------------------------------------
   The whole row is the target, not a link at the end of it. A four-pixel
   word is a hard thing to hit on a phone. */
tbody tr.rowlink{cursor:pointer}
tbody tr.rowlink:hover{background:var(--brand-soft)}
tbody tr.rowlink:focus-visible{outline:2px solid var(--brand-deep);outline-offset:-2px}
tbody tr.rowlink td:last-child{color:var(--ink-faint);text-align:right;
                               font-size:16px;line-height:1}

/* --- window progress ---------------------------------------------------- */
.prog{display:grid;grid-template-columns:1fr 54px;gap:11px;align-items:center}
.prog .track{background:var(--sunk);border-radius:999px;height:8px;overflow:hidden}
.prog .fill{height:100%;background:var(--brand);border-radius:999px;
            transition:width .4s ease}
.prog .fill.done{background:var(--ok)}
.prog .pct{font-size:12.5px;color:var(--ink-soft);text-align:right;
           font-variant-numeric:tabular-nums}

.refresh-note{font-size:12px;color:var(--ink-faint);display:flex;
              align-items:center;gap:7px}
.refresh-note .dot{width:6px;height:6px;border-radius:50%;
                   background:var(--ok);display:inline-block}

/* --- navigation --------------------------------------------------------
   Seven flat items plus a name plus Sign out overflowed on a laptop, which
   is how Sign out became unreachable. Grouped into three top-level items
   with dropdowns, and the account menu holds Sign out. */
.topbar nav{position:relative}
.navgroup{position:relative}
.navgroup>button{background:none;border:0;color:rgba(255,255,255,.82);
  font:inherit;font-size:14px;cursor:pointer;padding:6px 2px;display:flex;
  align-items:center;gap:6px}
.navgroup>button:hover,.navgroup.open>button{color:#fff}
.navgroup.on>button{color:var(--brand);font-weight:600}
.navgroup>button::after{content:"";width:5px;height:5px;border-right:1.5px solid;
  border-bottom:1.5px solid;transform:rotate(45deg) translateY(-2px);opacity:.7}
.navmenu{position:absolute;top:calc(100% + 11px);right:0;min-width:216px;
  background:var(--surface);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 12px 34px rgba(22,19,16,.17);padding:6px;z-index:60;display:none}
.navgroup.open .navmenu{display:block}
/* Scoped under .topbar nav on purpose.
   `.topbar nav a` sets white text for the links ON the dark bar, and the
   dropdown links sit inside that same nav — so at equal-or-lower specificity
   they inherited white on a white panel and vanished. These selectors carry
   one more class each so the dark text wins. */
.topbar nav .navmenu a,
.topbar nav .navmenu button{display:block;width:100%;text-align:left;
  padding:9px 12px;border-radius:7px;color:var(--ink);text-decoration:none;
  font-size:14px;background:none;border:0;font:inherit;cursor:pointer}
.topbar nav .navmenu a:hover,
.topbar nav .navmenu button:hover{background:var(--sunk);color:var(--ink)}
.topbar nav .navmenu a.on{color:var(--brand-deep);font-weight:600;
  background:var(--brand-soft)}
.topbar nav .navmenu .sep{height:1px;background:var(--line);margin:6px 4px}
.topbar nav .navmenu .who{padding:9px 12px 5px;font-size:12px;
  color:var(--ink-faint);line-height:1.4}
.topbar nav .navmenu .who strong{display:block;color:var(--ink);font-size:13.5px}
.topbar nav .navmenu .danger{color:var(--accent)}
.topbar nav .navmenu .danger:hover{background:var(--accent-soft);
  color:var(--accent)}

.avatar{width:27px;height:27px;border-radius:50%;background:var(--brand);
  color:var(--brand-ink);font-weight:700;font-size:12px;display:inline-flex;
  align-items:center;justify-content:center;letter-spacing:.02em}

@media (max-width:760px){
  .topbar nav{gap:12px}
  .navgroup>button{font-size:13px}
  .navmenu{right:auto;left:0}
}

/* ======================================================================
   MOBILE
   ======================================================================
   Most people who open a institution page in Nigeria will do it on a phone,
   often on a slow connection and one-handed. Three things had to change.

   1. TABLES. A seven-column table cannot be made to fit 360px, and
      horizontal scrolling inside a page that also scrolls vertically is
      miserable. Below 720px every table becomes a stack of cards, with the
      column name as a label on each line. The markup does not change — the
      header text is carried in a data attribute.

   2. TAP TARGETS. 44px minimum on anything tappable. The chevron at the end
      of a row was a four-pixel target; now the whole card is one.

   3. NAVIGATION. Three dropdowns plus an avatar fit; eight flat links never
      did. The menus open full-width from the bottom of the bar so a thumb
      can reach them.
   ====================================================================== */

@media (max-width: 720px) {

  .wrap { padding: 20px 14px 40px; }
  h1 { font-size: 25px; }
  h2 { font-size: 18px; }
  .sub { font-size: 14.5px; }

  /* --- tables become cards --- */
  table, thead, tbody, tr, th, td { display: block; }
  thead { position: absolute; left: -9999px; }   /* read by screen readers, not shown */

  tbody tr {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 10px;
  }
  tbody tr:last-child { margin-bottom: 0; }

  tbody td {
    border: 0;
    padding: 5px 0;
    display: flex;
    gap: 12px;
    align-items: baseline;
    font-size: 14px;
  }
  tbody td::before {
    content: attr(data-label);
    flex: 0 0 40%;
    max-width: 40%;
    color: var(--ink-faint);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
  }
  /* A cell with no label spans the full width — the first cell of a card is
     its title, and the chevron column is meaningless once the whole card is
     the tap target. */
  tbody td:not([data-label])::before { content: none; }
  tbody td:first-child {
    font-size: 15.5px;
    font-weight: 640;
    padding-bottom: 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--line);
  }
  tbody td:first-child::before { content: none; }
  tbody td.right { text-align: left; }

  /* The chevron column carried no information; the card is the target. */
  tbody tr.rowlink td:last-child { display: none; }
  tbody tr.rowlink { position: relative; padding-right: 30px; }
  tbody tr.rowlink::after {
    content: "›";
    position: absolute; right: 13px; top: 13px;
    color: var(--ink-faint); font-size: 20px; line-height: 1;
  }
  tbody tr.rowlink:active { background: var(--brand-soft); }

  tbody tr td[colspan] { text-align: center; }

  /* --- layout --- */
  .grid.c2, .grid.c3, .grid.c4 { grid-template-columns: 1fr; }
  .card { padding: 16px 15px; }
  .stat { font-size: 26px; }

  .row { flex-wrap: wrap; gap: 10px; }
  .row .spacer { display: none; }

  /* 44px minimum on anything tappable. */
  .btn, .field input, .field select, .field textarea {
    min-height: 44px;
    font-size: 16px;   /* below 16px, iOS Safari zooms the whole page on focus */
  }
  .btn { padding: 12px 18px; }
  .row .btn { flex: 1 1 auto; }

  /* --- navigation --- */
  .topbar { padding: 10px 0; }
  .topbar .wrap { padding: 0 14px; gap: 10px; }
  .topbar .logo { height: 22px; }
  .topbar nav { gap: 14px; }
  .navgroup > button { font-size: 13.5px; padding: 8px 2px; min-height: 40px; }

  /* Menus open across the full width, anchored under the bar, so a thumb
     reaches them without stretching to a corner. */
  .navmenu {
    position: fixed;
    left: 10px; right: 10px;
    top: 58px;
    min-width: 0;
    border-radius: 12px;
    max-height: calc(100vh - 78px);
    overflow-y: auto;
  }
  .navmenu a, .navmenu button { padding: 13px 14px; font-size: 15px; }

  /* --- specific components --- */
  .prog { grid-template-columns: 1fr 46px; }
  .bar { grid-template-columns: 1fr; gap: 4px; }
  .bar .n { text-align: left; }
  .chart { height: 190px; }
  .code .val { font-size: 27px; word-break: break-word; }
  .code .spot { font-size: 16px; }
  dl.facts { grid-template-columns: 1fr; gap: 2px 0; }
  dl.facts dt { color: var(--ink-faint); font-size: 12px;
                text-transform: uppercase; letter-spacing: .06em; margin-top: 10px; }
  .orgband .wrap { flex-wrap: wrap; gap: 12px; }
  .orgband h1 { font-size: 19px; }
  .orgband .powered { margin-left: 0; text-align: left; width: 100%; }
  .donut { justify-content: center; }
  .logo-preview { max-width: 100%; }
}

@media (max-width: 400px) {
  tbody td { flex-direction: column; gap: 1px; }
  tbody td::before { max-width: none; flex: none; }
  .topbar nav { gap: 10px; }
  .navgroup > button { font-size: 12.5px; }
}

/* Tables that genuinely need to stay tabular can opt out with .keep-table. */
@media (max-width: 720px) {
  table.keep-table { display: table; }
  table.keep-table thead { position: static; display: table-header-group; }
  table.keep-table tbody { display: table-row-group; }
  table.keep-table tr { display: table-row; border: 0; padding: 0; margin: 0; }
  table.keep-table th, table.keep-table td { display: table-cell; padding: 8px; }
  table.keep-table td::before { content: none; }
}

/* Code blocks in documentation panels. */
.code-block{background:var(--ink);color:#e8e1d5;border-radius:9px;padding:15px 17px;
  font-family:var(--mono);font-size:12.5px;line-height:1.6;overflow-x:auto;
  white-space:pre;margin:0 0 6px}
@media (max-width:720px){ .code-block{font-size:11.5px;padding:12px} }

/* --- dialog -------------------------------------------------------------
   A form that appears in place at the bottom of a long page is a form nobody
   finds: the button is at the top, the form is below the fold, and nothing
   moves. A dialog puts it where the person is looking. */
dialog.sheetbox{
  border:0;border-radius:14px;padding:0;max-width:620px;width:calc(100% - 32px);
  box-shadow:0 24px 70px rgba(22,19,16,.28);color:var(--ink);
  background:var(--surface);
}
dialog.sheetbox::backdrop{background:rgba(22,19,16,.46)}
dialog.sheetbox .dhead{
  padding:20px 24px 14px;border-bottom:1px solid var(--line);
  display:flex;align-items:flex-start;gap:16px;
}
dialog.sheetbox .dhead h2{margin:0;font-size:19px;letter-spacing:-.01em}
dialog.sheetbox .dhead p{margin:5px 0 0;font-size:13.5px;color:var(--ink-soft);
                         line-height:1.55}
dialog.sheetbox .dclose{
  margin-left:auto;background:none;border:0;font-size:24px;line-height:1;
  color:var(--ink-faint);cursor:pointer;padding:0 2px;
}
dialog.sheetbox .dclose:hover{color:var(--ink)}
dialog.sheetbox .dbody{padding:20px 24px;max-height:66vh;overflow-y:auto}
dialog.sheetbox .dfoot{
  padding:14px 24px 18px;border-top:1px solid var(--line);
  display:flex;gap:10px;align-items:center;
}
dialog.sheetbox .dfoot .spacer{flex:1}
dialog.sheetbox .optional{
  font-size:12.5px;color:var(--ink-faint);font-weight:400;margin-left:6px;
}
dialog.sheetbox fieldset{border:0;padding:0;margin:0 0 4px}
dialog.sheetbox legend{
  font-size:13px;font-weight:640;padding:0;margin:14px 0 10px;
  color:var(--ink-soft);
}
@media (max-width:620px){
  dialog.sheetbox{width:100%;max-width:none;margin:0;border-radius:14px 14px 0 0;
                  position:fixed;bottom:0;top:auto;max-height:92vh}
  dialog.sheetbox .dbody{max-height:none}
}

/* --- legal documents ------------------------------------------------------
   Long, and meant to be read rather than scrolled past. Narrow measure,
   generous leading, and headings that let somebody find one clause again. */
.legal{max-width:720px;margin:0 auto;padding:28px 20px 60px}
.legal h1{font-size:32px;letter-spacing:-.025em;margin:0 0 6px}
.legal .version{font-size:13px;color:var(--ink-faint);margin:0 0 26px}
.legal .lead{font-size:17px;line-height:1.65;color:var(--ink-soft);
             margin:0 0 30px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.legal h2{font-size:19px;letter-spacing:-.01em;margin:34px 0 10px}
.legal h3{font-size:15.5px;margin:22px 0 8px}
.legal p{font-size:15px;line-height:1.72;margin:0 0 14px}
.legal ul{font-size:15px;line-height:1.72;padding-left:22px;margin:0 0 16px}
.legal li{margin-bottom:7px}
.legal table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:14.5px}
.legal th{text-align:left;font-size:12.5px;color:var(--ink-faint);
          border-bottom:1px solid var(--line);padding:0 12px 7px 0}
.legal td{padding:9px 12px 9px 0;border-bottom:1px solid var(--line);
          vertical-align:top;line-height:1.6}
.legal .callout{background:var(--sunk);border-left:3px solid var(--brand);
                border-radius:0 10px 10px 0;padding:18px 20px;margin:0 0 20px}
.legal .callout p:last-child{margin-bottom:0}
.legal .accept{background:var(--surface);border:1.5px solid var(--ink);
               border-radius:12px;padding:22px 24px;margin-top:38px}
.legal .check{display:flex;gap:11px;align-items:flex-start;font-size:15px;
              line-height:1.6;cursor:pointer}
.legal .check input{width:20px;height:20px;margin-top:2px;flex:0 0 auto}

/* --- field dashboard extras ---------------------------------------------- */
.sosbar{display:flex;gap:10px;margin:0 0 16px}
.sosbtn{flex:2;min-height:52px;background:var(--accent);color:#fff;
        border-color:var(--accent);font-weight:700;font-size:15px}
.sosbtn:hover{background:#a02c1a}
.sosbar .talk{flex:1;min-height:52px}

/* The fix quality, shown while it converges. A verifier waiting for a good
   position should be able to see it improving rather than guessing. */
.gps{font-size:13px;padding:10px 12px;border-radius:9px;margin:0 0 14px;
     line-height:1.5}
.gps.good{background:var(--ok-soft);color:#0f5132}
.gps.poor{background:var(--brand-soft);color:#8a5a00}

/* --- site footer ----------------------------------------------------------
   A privacy policy nobody can reach is not a privacy policy. Every signed-in
   page carries these. */
.sitefoot{border-top:1px solid var(--line);margin-top:48px;padding:20px 0 34px;
          font-size:13px;color:var(--ink-faint)}
.sitefoot .wrap{display:flex;gap:22px;flex-wrap:wrap;align-items:center}
.sitefoot a{color:var(--ink-soft)}
.sitefoot a:hover{color:var(--ink)}
@media (max-width:600px){ .sitefoot .wrap{gap:12px} }

/* password show / hide */
.pw-wrap{position:relative}
.pw-wrap input{padding-right:70px}
.pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  border:0;background:transparent;color:var(--brand-deep);font:inherit;font-size:13px;
  font-weight:600;padding:6px 10px;border-radius:6px;cursor:pointer}
.pw-toggle:hover{background:rgba(0,0,0,.05)}
.pw-toggle:focus-visible{outline:2px solid var(--brand-deep);outline-offset:1px}

/* searchable picker (state / LGA) */
.picker{position:relative}
.picker-list{position:absolute;left:0;right:0;top:100%;z-index:40;margin-top:4px;
  max-height:260px;overflow:auto;background:#fff;border:1px solid var(--line);
  border-radius:8px;box-shadow:0 10px 28px rgba(0,0,0,.12);padding:4px}
.picker-list[hidden]{display:none}
.picker-opt{padding:9px 11px;border-radius:6px;cursor:pointer;font-size:14.5px}
.picker-opt.on,.picker-opt:hover{background:var(--brand-soft,#fdf4dd)}
.picker-opt mark{background:none;color:inherit;font-weight:700}
.picker-empty{padding:9px 11px;color:#7a7268;font-size:13.5px}

/* locate-and-pin */
.yc-locator{border:1px solid var(--line);border-radius:10px;padding:14px;margin-top:8px}
.yc-map{height:320px;border-radius:8px;overflow:hidden;margin-top:12px;background:#e8e4dc}
.yc-pano{height:280px;border-radius:8px;overflow:hidden;margin-top:10px;background:#e8e4dc}
.yc-readout{margin-top:12px;font-size:14px;line-height:1.6}
.yc-readout .code{font-family:ui-monospace,Menlo,monospace;font-size:20px;font-weight:700}
.yc-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.badge-count{display:inline-block;min-width:18px;padding:1px 6px;margin-left:6px;border-radius:9px;
  background:#c0392b;color:#fff;font-size:11px;font-weight:700;text-align:center;line-height:16px}
.hint.ok{color:var(--ok)}
.hint.warn{color:var(--warn)}
.timeline i.asleep{background:repeating-linear-gradient(135deg,var(--ok) 0 2px,#bfe3cf 2px 4px)}

/* agreement gate: text scrolls, the tick box and button never leave the screen */
dialog.sheetbox.gate[open]{display:flex;flex-direction:column;max-height:calc(100dvh - 24px)}
dialog.sheetbox.gate #ag-text{flex:1 1 auto;min-height:120px;max-height:none;overflow-y:auto}
dialog.sheetbox.gate .ag-controls{flex:0 0 auto;padding:14px 24px 4px;border-top:1px solid var(--line)}
dialog.sheetbox.gate .legal h1{font-size:20px;margin:0 0 4px}
dialog.sheetbox.gate .legal .lead{font-size:15px}
dialog.sheetbox.gate .legal h2{font-size:16px}
@media (max-width:520px){dialog.sheetbox.gate .dhead,dialog.sheetbox.gate #ag-text,
  dialog.sheetbox.gate .ag-controls,dialog.sheetbox.gate .dfoot{padding-left:16px;padding-right:16px}}

/* SOS follow-up: message, photo, voice */
.sos-more{margin-top:14px;border-top:1px solid rgba(0,0,0,.08);padding-top:12px}
.sos-more textarea{width:100%;padding:10px 12px;font:inherit;border:1px solid var(--line);border-radius:8px;resize:vertical}
.sos-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.sos-actions .btn{min-height:44px}
.rec-live{display:flex;align-items:center;gap:10px;margin-top:10px;padding:10px 12px;
  background:#fff;border-radius:8px;border:1px solid #e8c4bb}
.rec-dot{width:12px;height:12px;border-radius:50%;background:#d32f2f;animation:recpulse 1s infinite}
@keyframes recpulse{0%,100%{opacity:1}50%{opacity:.25}}
.rec-meter{flex:1;height:8px;background:#eee;border-radius:4px;overflow:hidden;min-width:60px}
.rec-meter span{display:block;height:100%;width:0;background:#d32f2f;transition:width .08s}
.rec-review{margin-top:10px}
.rec-review audio{width:100%}
.sos-log{list-style:none;margin:10px 0 0;padding:0;font-size:13.5px}
.sos-log li{padding:6px 0;border-bottom:1px solid rgba(0,0,0,.06)}
.sos-log .ok{color:var(--ok)}.sos-log .wait{color:#8a5a00}.sos-log .bad{color:#b3261e}

/* inline form errors */
.steps{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--brand-deep);margin-bottom:6px}
.field input.bad,.field select.bad,.field textarea.bad{border-color:#b3261e;background:#fff6f5}
.field .err{color:#b3261e;font-size:13px;margin-top:5px;font-weight:600}
.field .err:before{content:"\26A0";margin-right:6px}

/* field verifier: top bar and job lines */
.fvtop{display:flex;align-items:center;gap:10px;margin:0 0 12px}
.fvtop .btn{min-height:38px;padding:8px 14px}
.jobline{display:flex;gap:10px;align-items:center;margin-top:6px;font-size:13px}
.jobline .dist{font-weight:700;color:var(--brand-deep)}
.jobline .pays{margin-left:auto;font-weight:700}
.pill.ok{background:var(--ok-soft);color:var(--ok)}
.pill.info{background:#e9f1f8;color:#2b5f8b}

/* Maps own the touch gestures inside their box: one finger pans, two zoom.
   Without this the browser treats a one-finger drag as a page scroll and the
   map only moves with two fingers, which feels broken on a phone. */
.yc-map,.yc-pano,#map,#pano{touch-action:none}
.yc-map *,.yc-pano *{touch-action:none}

/* address page: mode switch and verdict */
.modeswitch{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.modeswitch button{border:0;background:#fff;font:inherit;font-weight:600;font-size:14px;
  padding:11px 16px;cursor:pointer;color:#6b6358;min-height:44px}
.modeswitch button.on{background:var(--brand);color:#161310}
.modeswitch button:disabled{opacity:.45;cursor:not-allowed}
@media (max-width:520px){.modeswitch{display:flex;width:100%}.modeswitch button{flex:1}}
.verdict{border-radius:10px;padding:16px 18px;line-height:1.6}
.verdict .big{font-size:20px;font-weight:700;margin-bottom:6px}
.verdict.yes{background:var(--ok-soft);color:var(--ok)}
.verdict.no{background:var(--warn-soft);color:#7a4b00}
.verdict .nextsteps{margin-top:12px;background:#fff;border-radius:8px;padding:12px 14px;color:var(--ink)}
.verdict .nextsteps ol{margin:8px 0 0;padding-left:20px}
.verdict .nextsteps li{margin-bottom:8px}