/* HOAMilestones — self-contained stylesheet.
   No CDN, no Bootstrap: the whole surface is a handful of forms and one dense table, and a
   framework would be more bytes than the app. Palette is deliberately sober — this is a
   compliance record, and urgency colour has to mean something when it appears. */

:root {
    --ink:        #12232e;
    --ink-soft:   #4a5c68;
    --ink-faint:  #7b8b96;
    --line:       #dfe6ea;
    --paper:      #ffffff;
    --canvas:     #f4f7f9;

    --brand:      #14506b;
    --brand-dark: #0d3a4f;
    --brand-tint: #e7f0f4;

    --overdue:    #b3261e;
    --overdue-bg: #fdeceb;
    --soon:       #a8580a;
    --soon-bg:    #fdf1e3;
    --upcoming:   #6b5b00;
    --upcoming-bg:#fbf6df;
    --ok:         #1c6b45;
    --ok-bg:      #e7f4ed;

    --radius: 8px;
    --shadow: 0 1px 2px rgba(18, 35, 46, .06), 0 4px 14px rgba(18, 35, 46, .05);
}

* { box-sizing: border-box; }

/* The UA stylesheet's [hidden] rule loses to any author-level `display`, so a .btn carrying
   the hidden attribute stays visible. The product tour relies on toggling `hidden` to swap
   Next for Get started on its last page — without this, both buttons showed on every panel. */
[hidden] { display: none !important; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink);
    background: var(--canvas);
}

a { color: var(--brand); }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .4em; font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; }
p  { margin: 0 0 1rem; }

/* ---- app shell ------------------------------------------------------------------ */

.shell { display: flex; min-height: 100vh; }

.sidebar {
    width: 236px;
    flex: 0 0 236px;
    background: var(--brand-dark);
    color: #cfe0e8;
    padding: 20px 14px;
    display: flex;
    flex-direction: column;
}

.brand { display: block; text-decoration: none; margin-bottom: 22px; }
.brand__name { display: block; color: #fff; font-weight: 700; font-size: 1.05rem; letter-spacing: -.02em; }
.brand__tag  { display: block; color: #8fb2c2; font-size: .74rem; margin-top: 2px; }

.nav__section {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .09em;
    color: #7ea3b5; margin: 18px 0 6px 8px;
}
.nav__link {
    display: block; padding: 7px 10px; border-radius: 6px;
    color: #cfe0e8; text-decoration: none; font-size: .9rem;
}
.nav__link:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.nav__link.active { background: rgba(255, 255, 255, .14); color: #fff; font-weight: 600; }

.sidebar__foot { margin-top: auto; padding-top: 18px; font-size: .76rem; color: #8fb2c2; }

.main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.topbar {
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: 14px 26px;
    display: flex; align-items: center; gap: 16px;
}
.topbar__title { margin: 0; font-size: 1.25rem; }
.topbar__sub { margin: 2px 0 0; color: var(--ink-soft); font-size: .85rem; }
.topbar__spacer { flex: 1 1 auto; }
.topbar__who { text-align: right; font-size: .8rem; color: var(--ink-soft); }
.topbar__who strong { display: block; color: var(--ink); font-size: .88rem; }

.content { padding: 22px 26px 60px; }

/* ---- cards, tables, forms ------------------------------------------------------- */

.card {
    background: var(--paper); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 18px 20px; margin-bottom: 18px;
}
.card__title { margin: 0 0 12px; font-size: .95rem; text-transform: uppercase;
               letter-spacing: .06em; color: var(--ink-faint); }

.stats { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.stat {
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 14px 18px; min-width: 150px; box-shadow: var(--shadow);
}
.stat__n { font-size: 1.9rem; font-weight: 680; line-height: 1; }
.stat__l { font-size: .78rem; color: var(--ink-soft); margin-top: 5px; }
.stat--overdue  .stat__n { color: var(--overdue); }
.stat--soon     .stat__n { color: var(--soon); }
.stat--upcoming .stat__n { color: var(--upcoming); }

.table-wrap { overflow-x: auto; }
table.grid { width: 100%; border-collapse: collapse; font-size: .88rem; }
table.grid th {
    text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .07em;
    color: var(--ink-faint); border-bottom: 1px solid var(--line); padding: 8px 10px;
    white-space: nowrap;
}
table.grid td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.grid tr:last-child td { border-bottom: 0; }
table.grid tbody tr:hover { background: var(--brand-tint); }
.grid__name { font-weight: 600; }
.grid__sub  { color: var(--ink-faint); font-size: .8rem; }

/* Sortable headers (wwwroot/js/sortable-grid.js). The button inherits the th's own type so the
   column heading looks unchanged until it is hovered — the affordance is the caret, not a
   restyled header. Without JavaScript no button is ever inserted and this all sits unused. */
table.grid th.is-sortable { padding: 0; }
.grid__sort {
    display: flex; align-items: center; gap: 6px; width: 100%;
    background: none; border: 0; margin: 0; padding: 8px 10px;
    font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
    text-align: left; cursor: pointer; border-radius: 4px;
}
.grid__sort:hover { color: var(--brand); background: var(--brand-tint); }
.grid__sort:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

/* Three states in one glyph: idle shows a faint double caret, a sorted column shows the
   direction it is sorted in. Reserving the width stops the header shifting on click. */
.grid__caret { flex: 0 0 auto; width: 8px; opacity: .35; }
.grid__caret::after { content: "\2195"; }                       /* up-down arrow */
th[aria-sort="ascending"]  .grid__caret::after { content: "\2191"; }
th[aria-sort="descending"] .grid__caret::after { content: "\2193"; }
th[aria-sort="ascending"]  .grid__caret,
th[aria-sort="descending"] .grid__caret { opacity: 1; }
th[aria-sort="ascending"]  .grid__sort,
th[aria-sort="descending"] .grid__sort { color: var(--brand); }

.badge {
    display: inline-block; padding: 2px 9px; border-radius: 999px;
    font-size: .73rem; font-weight: 650; white-space: nowrap;
}
.badge--overdue      { background: var(--overdue-bg);  color: var(--overdue); }
.badge--duesoon      { background: var(--soon-bg);     color: var(--soon); }
.badge--upcoming     { background: var(--upcoming-bg); color: var(--upcoming); }
.badge--scheduled    { background: var(--ok-bg);       color: var(--ok); }
.badge--notapplicable{ background: #eef1f3;            color: var(--ink-faint); }
.badge--rule         { background: var(--brand-tint);  color: var(--brand); }

.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); font-size: .82rem; }
.basis { color: var(--ink-soft); font-size: .8rem; margin-top: 3px; max-width: 46ch; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.form-grid .span-2 { grid-column: 1 / -1; }
@media (max-width: 760px) { .form-grid { grid-template-columns: 1fr; } }

.field label { display: block; font-size: .8rem; font-weight: 600; margin-bottom: 4px; }
.field input, .field select, .field textarea {
    width: 100%; padding: 8px 10px; font: inherit; font-size: .9rem;
    border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus {
    outline: 2px solid var(--brand); outline-offset: -1px; border-color: var(--brand);
}
.field .hint { display: block; color: var(--ink-faint); font-size: .76rem; margin-top: 4px; }
.field .err  { display: block; color: var(--overdue); font-size: .78rem; margin-top: 4px; }

.btn {
    display: inline-block; padding: 8px 16px; border-radius: 6px; border: 1px solid transparent;
    font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; text-decoration: none;
}
.btn--primary, .btn--primary:hover, .btn--primary:focus { background: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-dark); }
.btn--ghost, .btn--ghost:hover, .btn--ghost:focus { background: #fff; color: var(--brand); }
.btn--ghost { border-color: var(--line); }
.btn--ghost:hover { border-color: var(--brand); background: var(--brand-tint); }
.btn--danger, .btn--danger:hover, .btn--danger:focus { background: var(--overdue); color: #fff; }

/* Keyboard users get the same affordance a mouse hover gives. */
.btn:focus-visible { outline: 2px solid var(--brand-dark); outline-offset: 2px; }
.btn-row { display: flex; gap: 10px; align-items: center; margin-top: 18px; }

.alert { border-radius: var(--radius); padding: 11px 15px; margin-bottom: 16px; font-size: .88rem; }
.alert--ok    { background: var(--ok-bg);      color: var(--ok);      border: 1px solid #bfe0ce; }
.alert--warn  { background: var(--soon-bg);    color: var(--soon);    border: 1px solid #f0d3ac; }
.alert--error { background: var(--overdue-bg); color: var(--overdue); border: 1px solid #f2c3bf; }

.validation-summary ul { margin: 0; padding-left: 18px; }

/* ---- public marketing ----------------------------------------------------------- */

.public { max-width: 1080px; margin: 0 auto; padding: 0 24px 70px; }
.public-nav {
    display: flex; align-items: center; gap: 18px;
    padding: 18px 0; border-bottom: 1px solid var(--line); margin-bottom: 44px;
}
.public-nav .brand__name { color: var(--brand); }
.public-nav .brand__tag  { color: var(--ink-faint); }
.public-nav__spacer { flex: 1 1 auto; }
/* The nav is a segmented control. Exactly one item carries the filled highlight — the page
   you are on — and the rest are quiet links.

   There is deliberately no .btn in here any more. The previous markup mixed .btn--primary
   into the nav, and `.public-nav a` (0-1-1) outranked `.btn--primary` (0-1-0), so the nav's
   colour won over the button's own and the call to action rendered grey on teal. One class
   owning all four items removes the conflict rather than working around it. */

.public-nav a.nav-pill {
    color: var(--ink-soft);
    text-decoration: none;
    font-size: .9rem;
    font-weight: 600;
    padding: 8px 15px;
    border-radius: 6px;
    white-space: nowrap;
    transition: background .12s ease, color .12s ease;
}

.public-nav a.nav-pill:hover { color: var(--brand-dark); background: var(--canvas); }

/* Pressed. Without it a click reads as nothing happening until the next page paints, which on
   a cold App Service request is long enough for someone to click a second time. */
.public-nav a.nav-pill:active { background: var(--line); }

/* Selected. Stated on :hover and :focus too, so no later rule can take one state and leave
   the label mid-transition against a dark fill. */
.public-nav a.nav-pill--on,
.public-nav a.nav-pill--on:hover,
.public-nav a.nav-pill--on:focus {
    background: var(--brand);
    color: #fff;
}

.public-nav a.nav-pill--on:hover { background: var(--brand-dark); }

.public-nav a.nav-pill:focus-visible { outline: 2px solid var(--brand-dark); outline-offset: 2px; }

.hero { max-width: 720px; margin-bottom: 46px; }
.hero h1 { font-size: 2.3rem; letter-spacing: -.025em; }
.hero p.lede { font-size: 1.08rem; color: var(--ink-soft); }

.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 860px) { .tiles { grid-template-columns: 1fr; } }

.plan { display: flex; flex-direction: column; }
.plan__price { font-size: 1.9rem; font-weight: 680; }
.plan__price span { font-size: .85rem; font-weight: 500; color: var(--ink-faint); }
.plan ul { margin: 12px 0 18px; padding-left: 18px; font-size: .88rem; color: var(--ink-soft); }
.plan ul li { margin-bottom: 5px; }
.plan .btn { margin-top: auto; text-align: center; }

.disclaimer {
    border-left: 3px solid var(--soon); background: var(--soon-bg); color: #6b3d05;
    padding: 12px 16px; border-radius: 0 var(--radius) var(--radius) 0; font-size: .86rem;
}

.auth-shell { max-width: 460px; margin: 60px auto; padding: 0 20px; }
.auth-shell.wide { max-width: 620px; }

/* ---- demonstration chrome (TDD v1.1 §6.9) -------------------------------------- */

.demo-ribbon {
    background: var(--soon-bg);
    color: #6b3d05;
    border-bottom: 1px solid #f0d3ac;
    padding: 7px 20px;
    font-size: .82rem;
    text-align: center;
}
.demo-ribbon a { color: inherit; margin-left: 10px; }

.persona-switch { display: flex; align-items: center; gap: 8px; }
.persona-switch label { font-size: .76rem; color: var(--ink-faint); white-space: nowrap; }
.persona-switch select {
    padding: 6px 10px; font: inherit; font-size: .82rem;
    border: 1px solid var(--line); border-radius: 6px; background: #fff;
}

.persona-focus {
    margin: 0 0 16px; padding: 9px 14px;
    background: var(--brand-tint); border-left: 3px solid var(--brand);
    border-radius: 0 6px 6px 0; font-size: .85rem; color: var(--brand-dark);
}

/* ---- product tour ------------------------------------------------------------------
   A horizontal scroll-snap strip. The scroll position is the only source of truth for which
   page is showing, so there is no index variable to drift out of step with the view.

   The backdrop deliberately carries NO click handler: the tour closes through Get started,
   the × or Escape. A stray click must not lose someone's place. */

.wt-backdrop {
    position: fixed; inset: 0; z-index: 80;
    background: rgba(13, 58, 79, .62);
    display: flex; align-items: center; justify-content: center;
    padding: 1.25rem;
}
.wt-backdrop[hidden] { display: none; }

.wt-modal {
    background: var(--paper);
    border-radius: 12px;
    box-shadow: 0 18px 50px rgba(9, 26, 38, .38);
    width: min(920px, 100%);
    max-height: min(680px, 92vh);
    display: flex; flex-direction: column; overflow: hidden;
}

.wt-head {
    background: var(--brand-dark); color: #fff;
    padding: .85rem 1.1rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    flex: 0 0 auto;
}
.wt-head__brand { font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em; }
.wt-head__tag { font-size: .73rem; color: #8fb2c2; margin-top: 1px; }

.wt-x {
    background: none; border: 0; color: rgba(255,255,255,.82);
    font-size: 1.5rem; line-height: 1; padding: 0 .25rem; cursor: pointer;
}
.wt-x:hover { color: #fff; }

/* Without JavaScript the panels stack and stay readable — the tour degrades to a long page
   rather than to nothing. walkthrough.js adds --paged to turn it into a carousel. */
.wt-track { display: flex; flex-direction: column; flex: 1 1 auto; overflow-y: auto; outline: none; }

.wt-track--paged {
    flex-direction: row;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.wt-track--paged::-webkit-scrollbar { display: none; }

.wt-track--paged .wt-page {
    flex: 0 0 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    overflow-y: auto;
    min-width: 0;
}

.wt-page { display: flex; flex-direction: column; }

/* Auto block margins centre a short page without stranding it at the top, and — unlike
   justify-content:center — a page taller than the track still scrolls to its own first line
   instead of having the overflow clipped above the scroll origin. */
.wt-page__inner { margin-block: auto; padding: 1.5rem 1.9rem 1.6rem; }

.wt-icon { font-size: 1.9rem; line-height: 1; color: var(--brand); margin-bottom: .6rem; }
.wt-h { font-size: 1.16rem; font-weight: 700; letter-spacing: -.01em; margin: 0 0 .55rem; }
.wt-p { font-size: .88rem; line-height: 1.58; color: var(--ink); max-width: 68ch; margin: 0 0 .9rem; }

.wt-list { margin: 0; padding-left: 1.05rem; max-width: 74ch; }
.wt-list li { font-size: .85rem; line-height: 1.52; color: var(--ink-soft); margin-bottom: .42rem; }
.wt-list li em { color: var(--ink); font-style: normal; font-weight: 600; }

.wt-pills { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1rem; }

/* wt- prefixed like everything else in this block. It was `.pill` — the only unnamespaced
   class in the stylesheet — and a bare generic name in a sheet that applies to every page is
   a trap for anything injected into the DOM later: overlays authored elsewhere that happened
   to use `.pill` inherited these rules and rendered as blank capsules. */
.wt-pill {
    display: inline-block; padding: 2px 10px; border-radius: 999px;
    background: var(--brand-tint); color: var(--brand);
    font-size: .72rem; font-weight: 650;
}

.wt-stats { display: flex; flex-wrap: wrap; gap: .6rem; }
.wt-stat {
    flex: 1 1 150px; background: var(--brand-tint);
    border: 1px solid var(--line); border-radius: 8px; padding: .65rem .75rem;
}
.wt-stat b { display: block; font-size: 1.22rem; color: var(--brand-dark); line-height: 1.1; }
.wt-stat span { display: block; font-size: .68rem; color: var(--ink-soft); margin-top: 3px; line-height: 1.35; }

/* ---- final page: take it with you ---- */

.wt-docs { display: flex; flex-direction: column; gap: .5rem; }

.wt-doc {
    display: flex; align-items: center; gap: .75rem;
    padding: .7rem .85rem;
    border: 1px solid var(--line); border-radius: 8px;
    background: var(--paper); text-decoration: none; color: inherit;
    transition: border-color .15s ease, background .15s ease;
}
.wt-doc:hover { border-color: var(--brand); background: var(--brand-tint); }

.wt-doc__icon {
    flex: 0 0 34px; height: 34px; border-radius: 7px;
    background: var(--brand-tint); color: var(--brand-dark);
    display: flex; align-items: center; justify-content: center; font-size: .95rem;
}
.wt-doc--video .wt-doc__icon { background: var(--brand); color: #fff; }

.wt-doc__text { min-width: 0; }
.wt-doc__text b { display: block; font-size: .86rem; }
.wt-doc__text span { display: block; font-size: .73rem; color: var(--ink-soft); margin-top: 1px; }

/* ---- paging dots ---- */

.wt-dots { flex: 0 0 auto; display: flex; justify-content: center; gap: 6px; padding: .55rem 0 .15rem; }
.wt-dot { width: 7px; height: 7px; border-radius: 50%; border: 0; padding: 0; background: var(--line); cursor: pointer; }
.wt-dot.is-active { background: var(--brand); }

/* ---- footer ---- */

.wt-foot {
    flex: 0 0 auto; border-top: 1px solid var(--line);
    padding: .7rem 1.1rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.wt-optout {
    display: flex; align-items: center; gap: .4rem;
    font-size: .78rem; color: var(--ink-soft); margin: 0; cursor: pointer;
}
.wt-optout input { width: auto; }
.wt-controls { display: flex; gap: .4rem; }
.wt-controls .btn { padding: 6px 14px; font-size: .84rem; }

@media (max-width: 576px) {
    .wt-backdrop { padding: 0; }
    .wt-modal { max-height: 100vh; border-radius: 0; width: 100%; }
    .wt-page__inner { padding: 1.1rem 1.1rem 1.3rem; }
    .wt-foot { justify-content: center; }
}

/* ---------------------------------------------------------------------------------------
   Identity, seats and inspections (items #1-#6). Same token vocabulary as everything above;
   no new colours, only new arrangements of the existing ones.
   --------------------------------------------------------------------------------------- */

/* Auth pages rendered inside the public layout — sign-in, reset, invite acceptance. */
.auth__title { font-size: 1.5rem; margin: 0 0 6px; }
.auth__sub { color: var(--ink-soft); margin: 0 0 20px; font-size: .95rem; }
.auth__alt { margin-top: 18px; font-size: .9rem; }
.auth__alt a { color: var(--brand); }

.btn--block { display: block; width: 100%; text-align: center; }
.btn--sm { padding: 4px 10px; font-size: .8rem; }

/* .btn--danger is already defined above and used by the existing delete buttons; redefining
   it here would silently restyle all of them. Only the card wrapper is new. */
.card--danger { border-color: color-mix(in srgb, var(--overdue) 35%, var(--line)); }

/* Manage sub-navigation. */
.tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 18px;
        border-bottom: 1px solid var(--line); }
.tabs__link {
    padding: 8px 14px; text-decoration: none; color: var(--ink-soft);
    font-size: .9rem; font-weight: 600; border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.tabs__link:hover { color: var(--brand); }
.tabs__link.active { color: var(--brand); border-bottom-color: var(--brand); }

/* Policy switches. The whole row is the label, so the hit target is the sentence and not a
   14px square. */
.toggle { display: flex; align-items: center; gap: 10px; cursor: pointer;
          font-weight: 600; font-size: .95rem; }
.toggle input { width: 18px; height: 18px; accent-color: var(--brand); cursor: pointer; }

/* Authenticator enrolment. */
.enroll { display: flex; gap: 26px; flex-wrap: wrap; align-items: flex-start; margin-top: 16px; }
.enroll__qr { border: 1px solid var(--line); border-radius: 10px; padding: 8px; background: #fff; }
.enroll__manual { flex: 1; min-width: 260px; }
.enroll__key {
    display: inline-block; margin-top: 6px; padding: 8px 12px;
    background: var(--brand-tint); color: var(--brand);
    border-radius: 8px; font-size: .95rem; letter-spacing: .06em;
    /* Selectable in one gesture for anyone typing it into a desktop authenticator. */
    user-select: all;
}

/* Recovery codes — shown once, and printed often, so they get a print-friendly grid. */
.codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
         gap: 10px; margin-bottom: 18px; }
.codes__item {
    padding: 10px 12px; background: var(--bg-soft); border: 1px solid var(--line);
    border-radius: 8px; font-size: .95rem; text-align: center; letter-spacing: .04em;
    user-select: all;
}

@media print {
    /* Printing this page should yield the codes and nothing else. */
    .shell > .sidebar, .topbar, .btn-row, .nav, .demo-ribbon { display: none !important; }
    .codes__item { border-color: #999; }
}