/* Coasties Client Portal - design pass to the client's vision board (s5),
   in Jen's Coasties Connect colours (UI-1, 21 Oct 2026): deep brown and
   cobalt on a cream ground, white cards with cobalt icon chips and soft
   cobalt CTAs; terracotta is reserved for actions-required, always with
   dark text. Inter and Plus Jakarta Sans are served from Core itself
   (../fonts/), never from another site (CSP). */

/* ---- tokens (UI-1 owns this block) --------------------------------------
   Jen's Coasties Connect theme, spec 03 section 16.2, mapped per spec 01
   section 12.13. The token NAMES are the old ones so every rule already
   written keeps working; the VALUES are Jen's:
     --navy  = her heading brown     --teal and --accent = her cobalt
     --teal-ice and --orange = her terracotta (always with dark text)
   Status colours (--ok, --warn, --error) keep their old values: Jen's
   green, amber and red do not reach 4.5:1 as text.
   Tests: tests/ui_1_test.php checks every value and every text pair. */
:root {
    --ink: #23180f;           /* foreground */
    --muted: #605248;         /* muted-foreground: 7.2:1 on cream */
    --line: #e6dcd2;          /* border */
    --paper: #fff9f1;         /* background, cream */
    --card: #ffffff;
    --navy: #2d1a0a;          /* heading brown: headings, active menu */
    --navy-soft: #372414;     /* sand-foreground */
    --teal: #1f48c5;          /* cobalt: links, icons, buttons */
    --teal-deep: #1f2899;     /* deep cobalt */
    --teal-soft: #e3efff;     /* primary-soft: CTA fill */
    --teal-soft-hover: #cbdeff;
    --teal-chip: #e3efff;     /* primary-soft */
    --teal-ice: #f0834e;      /* terracotta, accents on brown */
    --orange: #f0834e;        /* terracotta: actions required, dark text only */
    --orange-deep: #401f0a;   /* accent-foreground: text on --orange-soft */
    --orange-soft: #fde2ce;   /* accent */
    --orange-soft-hover: #f6e1c9; /* sand */
    --accent: #1f48c5;        /* cobalt */
    --soft-fill: #faecdd;     /* secondary: plain pills */
    --quiet-fill: #f7ede2;    /* muted: quiet pills */
    --ok: #1c7a3d;
    --warn: #9a6a00;
    /* Jen's warning-foreground: words on the pale amber warning box. */
    --warn-ink: #3e2104;
    --error: #a3272f;
    /* Menu numbers on the brown active row, and the inert "coming soon"
       rows: the old blue-grey tints at the same lightness in Jen's warm hue. */
    --side-num-active: #c4b7a9;
    --soon: #b1a496;
    --soon-icon: #cdc2b6;
    --step-line: #ddd5cd;
    --radius: 16px;
    --shadow: 0 1px 2px rgba(45, 26, 10, 0.06), 0 4px 14px rgba(45, 26, 10, 0.04);
    --font-body: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-heading: "Plus Jakarta Sans", "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Self-hosted, open-licence fonts (SIL OFL 1.1, licences in ../fonts/).
   Variable weight, Latin and Latin Extended only; the extended file is
   fetched only when a page holds one of its letters. swap: the words show
   at once in the system font, then change when the font arrives. */
@font-face {
    font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
    src: url("../fonts/inter-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
    src: url("../fonts/inter-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap;
    src: url("../fonts/plus-jakarta-sans-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap;
    src: url("../fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* ---- end of tokens ------------------------------------------------------ */

* { box-sizing: border-box; }

body {
    margin: 0;
    font: 16px/1.55 var(--font-body);
    color: var(--ink);
    background: var(--paper);
}
h1, h2, h3, .side-brand, .topbar .brand { font-family: var(--font-heading); }

/* ---- app shell: left sidebar + content ---------------------------------- */

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

.sidebar {
    width: 17rem;
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: var(--card);
    border-right: 1px solid var(--line);
    padding: 1.1rem 0.9rem;
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100vh;
    overflow-y: auto;
}

.side-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.1rem 0.35rem;
    color: var(--navy);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.25;
}
.brand-mark { display: block; flex: none; }

/* PRT-2: the building open now, for a login with several, and the way back to the picker. */
.side-client {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.55rem 0.6rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
    font-size: 0.88rem;
}
.side-client-name { font-weight: 700; color: var(--navy); overflow-wrap: anywhere; }
.side-client-change { font-weight: 600; }

.side-nav { display: flex; flex-direction: column; gap: 2px; }

/* Phone menu: a <details> twin of the menu above, shown only under 900px. */
.side-menu { display: none; }
.side-menu-toggle {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
    color: var(--navy);
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}
.side-menu-toggle::-webkit-details-marker { display: none; }
.side-menu-toggle::after {
    content: "";
    margin-left: auto;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid var(--teal);
    border-bottom: 2px solid var(--teal);
    transform: rotate(45deg);
    flex: none;
}
.side-menu[open] > .side-menu-toggle::after { transform: rotate(-135deg); }
.side-menu-current {
    font-weight: 600;
    color: var(--muted);
    padding-left: 0.6rem;
    border-left: 1px solid var(--line);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.side-menu > .side-nav { margin-top: 0.4rem; }
.side-menu-toggle:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

.side-link {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.48rem 0.6rem;
    border-radius: 8px;
    color: var(--ink);
    text-decoration: none;
    font-size: 0.9rem;
}
.side-link .ico { width: 18px; height: 18px; color: var(--teal); }
.side-ico { display: inline-flex; flex: none; }
.side-num {
    flex: none;
    width: 1.15rem;
    text-align: center;
    font-size: 0.78rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.side-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-link:hover { background: var(--paper); }
.side-link.active { background: var(--navy); color: #fff; font-weight: 600; }
.side-link.active .ico { color: var(--teal-ice); }
.side-link.active .side-num { color: var(--side-num-active); }
.side-link.soon { color: var(--soon); cursor: default; }
.side-link.soon .ico { color: var(--soon-icon); }

.side-foot {
    margin-top: auto;
    border-top: 1px solid var(--line);
    padding-top: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.85rem;
}
.who-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.signout { color: var(--teal); font-weight: 600; text-decoration: none; }
.side-help { color: var(--teal); font-weight: 600; text-decoration: none; }
.side-help:hover, .side-help[aria-current="page"] { text-decoration: underline; }
.signout:hover { text-decoration: underline; }

.avatar {
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 50%;
    background: var(--teal-chip);
    color: var(--teal-deep);
    font-weight: 700;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

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

main {
    width: 100%;
    max-width: 68rem;
    margin: 0 auto;
    padding: 1.6rem 1.8rem;
    flex: 1;
}

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

.page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 1.3rem;
}
h1 { font-size: 1.55rem; margin: 0; color: var(--navy); letter-spacing: -0.01em; }
.page-sub { margin: 0.25rem 0 0; color: var(--muted); font-size: 0.92rem; }
h2 { font-size: 1.05rem; margin: 0 0 0.6rem; color: var(--navy); }

/* ---- cards and dashboard tiles ------------------------------------------ */

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }

.tile, .card, .login-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.1rem 1.2rem;
    box-shadow: var(--shadow);
}
.card { margin-bottom: 1rem; overflow-x: auto; }
.tile { display: flex; flex-direction: column; }
.tile h2 { color: var(--navy); }
.tile .big { font-size: 1.15rem; font-weight: 700; margin: 0.2rem 0; color: var(--navy); }
.muted { color: var(--muted); font-size: 0.9rem; }

.tile-head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.55rem; }
.tile-head h2 { margin: 0; font-size: 1rem; }
.tile-chip {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: var(--teal);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.tile-chip .ico { width: 19px; height: 19px; }
.tile-list { margin: 0.25rem 0 0; padding-left: 1.15rem; }
.tile-list li { margin: 0.25rem 0; font-size: 0.92rem; }

.tile-ctas { margin-top: auto; padding-top: 0.95rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cta {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: var(--teal-soft);
    color: var(--teal-deep);
    padding: 0.5rem 0.9rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.88rem;
}
.cta .ico { width: 15px; height: 15px; }
.cta:hover { background: var(--teal-soft-hover); }

.tile-orange .tile-chip { background: var(--orange); color: var(--ink); }
.tile-orange .cta { background: var(--orange-soft); color: var(--orange-deep); }
.tile-orange .cta:hover { background: var(--orange-soft-hover); }

/* feedback module route cards share the tile skeleton */
.route-card .route-action { margin-top: auto; padding-top: 0.95rem; }
.route-action a, .route-action button {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: var(--teal-soft);
    color: var(--teal-deep);
    padding: 0.5rem 0.9rem;
    border: 0;
    border-radius: 8px;
    text-decoration: none;
    font: inherit;
    font-weight: 600;
    font-size: 0.88rem;
    margin-top: 0;
    cursor: pointer;
}
.route-action a:hover, .route-action button:hover { background: var(--teal-soft-hover); color: var(--teal-deep); }

/* ---- login and signed-link pages ---------------------------------------- */

.login-page main, .login-page { display: block; }
.login-card { max-width: 26.5rem; margin: 4rem auto; padding: 2rem 2rem 1.6rem; }
.login-card h1 { margin: 0 0 0.35rem; font-size: 1.3rem; }
.login-brand { margin-bottom: 0.9rem; }

/* standalone header used by the signed-link viewer (link.php) */
.topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.8rem 1.2rem;
    padding: 0.75rem 1.2rem;
    background: var(--navy);
    color: #fff;
}
.topbar .brand { font-weight: 700; font-size: 1.05rem; letter-spacing: 0.02em; }
.topbar ~ main, .top ~ main { max-width: 60rem; }

/* acceptance page header (accept.php) */
.top {
    display: block;
    padding: 0.75rem 1.2rem;
    background: var(--navy);
    color: #fff;
    font-weight: 700;
}

/* ---- forms -------------------------------------------------------------- */

form label { display: block; margin: 0.7rem 0; font-weight: 600; font-size: 0.92rem; color: var(--navy); }
form input[type="email"],
form input[type="password"],
form input[type="text"],
form input[type="date"],
form textarea {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    font: inherit;
    font-weight: 400;
    background: var(--card);
    color: var(--ink);
}
form input:focus, form textarea:focus {
    outline: 2px solid var(--teal);
    outline-offset: 1px;
    border-color: var(--teal);
}
button {
    margin-top: 0.8rem;
    padding: 0.6rem 1.2rem;
    background: var(--teal);
    color: #fff;
    border: 0;
    border-radius: 8px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
button:hover { background: var(--teal-deep); }

.choice-set { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0; }
.choice-set a {
    display: inline-flex;
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--card);
    color: var(--teal-deep);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 600;
}
.choice-set a:hover { background: var(--teal-soft); border-color: var(--teal-soft); }

/* ---- notices, flashes, misc -------------------------------------------- */

.flash { padding: 0.7rem 1rem; border-radius: 8px; margin-bottom: 1rem; }
.flash-ok { background: #e6f3ea; color: var(--ok); }
.flash-error { background: #f8e8e9; color: var(--error); }
.flash-warn { background: #f7efdd; color: var(--warn-ink); }

.notice {
    background: var(--teal-chip);
    border: 1px solid var(--teal-soft);
    border-radius: 8px;
    padding: 0.7rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.92rem;
}
.error, .problem { color: var(--error); }
.hash { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.82rem; word-break: break-all; color: var(--muted); }
.attest { font-size: 0.92rem; }

/* ---- tables, records, lists --------------------------------------------- */

table { width: 100%; border-collapse: collapse; background: var(--card); }
th, td { text-align: left; padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--line); font-size: 0.92rem; }
th { color: var(--muted); font-weight: 600; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; }
tr:last-child td { border-bottom: 0; }

/* Wide tables scroll sideways inside their box instead of pushing the page. */
.table-wrap { overflow-x: auto; max-width: 100%; }

.record dl { display: grid; grid-template-columns: 11rem 1fr; gap: 0.3rem 1rem; margin: 0; }
.record dt { color: var(--muted); }
.record dd { margin: 0; }

.photo-list, .doc-list { list-style: none; padding: 0; display: grid; gap: 0.5rem; }
.photo-list li, .doc-list li {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0.5rem 0.8rem;
    background: var(--card);
}
.photo-list img { max-width: 100%; border-radius: 6px; }

a { color: var(--teal); }
a:hover { color: var(--teal-deep); }

footer {
    text-align: center;
    color: var(--muted);
    font-size: 0.82rem;
    padding: 1.5rem 1rem 2rem;
}

/* ---- focus visibility --------------------------------------------------- */

a:focus-visible, button:focus-visible, .side-link:focus-visible, .cta:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: 2px;
    border-radius: 8px;
}
.side-link.active:focus-visible { outline-color: var(--teal); }

/* ---- small screens: sidebar collapses to a top bar ---------------------- */

@media (max-width: 900px) {
    .shell { display: block; }
    .sidebar {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        border-right: 0;
        border-bottom: 1px solid var(--line);
        padding: 0.7rem 1rem;
        gap: 0.6rem;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }
    /* Compact phone header: brand and sign-out on one line, then the folded menu. */
    .side-brand { flex: 1; min-width: 0; font-size: 0.95rem; }
    .side-brand .brand-mark { width: 30px; height: 30px; }
    .side-foot { order: 2; margin: 0; padding: 0; border-top: 0; }
    .side-foot .who-name, .side-foot .avatar { display: none; }
    .side-client { order: 3; flex: 0 0 100%; flex-direction: row; flex-wrap: wrap; justify-content: space-between; }
    .side-nav-full { display: none; }
    .side-menu { display: block; order: 3; flex: 0 0 100%; }
    .side-link { padding: 0.55rem 0.6rem; }
    .side-num { display: none; }
    .avatar-top { display: none; }
    main { padding: 1rem; }
    .login-card { margin: 2rem auto; }
    /* Tables not already in a wrapper still scroll sideways on a phone. */
    main table { display: block; overflow-x: auto; max-width: 100%; }
    .table-wrap table { display: table; }
}

@media (max-width: 600px) {
    .record dl { grid-template-columns: 1fr; gap: 0 1rem; }
    .record dt { margin-top: 0.5rem; }
    .page-head { flex-direction: column; gap: 0.3rem; }
}

/* ---- status pills (vision board p5: "Active", "Clean") ------------------ */
.pill {
    display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px;
    font-size: 0.82rem; font-weight: 600; line-height: 1.4; vertical-align: middle;
    background: var(--soft-fill); color: var(--navy);
}
.pill-ok   { background: #dff3ea; color: #146c43; }
.pill-warn { background: var(--orange-soft); color: var(--orange-deep); }
.pill-info { background: var(--teal-chip); color: var(--accent); }
.pill-muted { background: var(--quiet-fill); color: var(--muted); }
.tile .big .pill { font-size: 0.95rem; }

/* ---- issue status stepper (vision board p7) ----------------------------- */
.stepper { list-style: none; margin: 0.2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem 0; }
.stepper .step { display: flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; color: var(--muted); }
.stepper .step + .step::before { content: ""; display: inline-block; width: 1.1rem; height: 2px; background: var(--step-line); margin: 0 0.2rem; }
.stepper .step-dot { width: 0.7rem; height: 0.7rem; border-radius: 50%; border: 2px solid var(--step-line); background: #fff; }
.stepper .done, .stepper .current { color: var(--navy); }
.stepper .done .step-dot { background: var(--accent); border-color: var(--accent); }
.stepper .current .step-dot { background: var(--orange); border-color: var(--orange-deep); }
.stepper .current .step-label { font-weight: 700; }
.stepper .done + .step::before, .stepper .current + .step::before { background: var(--step-line); }
.stepper .done + .done::before, .stepper .done + .current::before { background: var(--accent); }

/* ---- UI-2: the three-door sign-in page (sign-in.php) --------------------
   Jen's /portal page: Office, Clients and Staff side by side, one under the
   other on a phone. Built from the tile, chip and CTA rules above; tokens
   only, never a raw colour. */
.doors-page main { max-width: 60rem; padding-top: 3rem; }
.doors-head { text-align: center; margin: 0 0 1.8rem; }
.doors-head .brand-mark { margin: 0 auto 0.9rem; }
.doors-head .page-sub { margin-top: 0.35rem; }
.doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }
.door .door-lead { margin: 0 0 0.5rem; color: var(--ink); }
.door .muted { margin: 0; }
@media (max-width: 600px) {
    .doors-page main { padding-top: 1.6rem; }
    .doors-head { margin-bottom: 1.2rem; }
}

/* ---- API-3: the join page (app/join) -----------------------------------
   One card: the invite code in large type, the Open the Coasties app button
   and the install steps for iPhone and Android. Built on the login card;
   tokens only, never a raw colour. */
.join-card { max-width: 30rem; }
.join-card h2 { margin: 1.3rem 0 0.4rem; }
.join-code { margin: 0.1rem 0 0.9rem; font-size: 2.2rem; font-weight: 700; letter-spacing: 0.1em; color: var(--navy); overflow-wrap: anywhere; }
.join-open {
    display: block;
    padding: 0.85rem 1.2rem;
    border-radius: 8px;
    background: var(--teal);
    color: var(--card);
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}
.join-open:hover { background: var(--teal-deep); color: var(--card); }
.join-steps { margin: 0; padding-left: 1.2rem; }
.join-steps li { margin: 0.4rem 0; }
@media (max-width: 600px) {
    .join-card { margin: 1rem auto; padding: 1.4rem 1.1rem 1.2rem; }
    .join-code { font-size: 1.9rem; }
}