/* CalibraytAI V1 visual refinement (Joel, 15 Oct 2026).
   One coordinated layer over app.css: typography, spacing, hierarchy, buttons, tables, forms,
   Home, Clients and the collapsible Calculators group. Behaviour and navigation are unchanged. */

:root {
    --radius-sm: 8px;
    --radius-md: 12px;
    --ink-soft: #3a3f47;
    --row-hover: #faf7f0;
    --focus-ring: 0 0 0 3px rgba(199, 154, 43, 0.28);
    --surface-line: #ece7dd;
}

/* ---------- Typography and rhythm ---------- */
body.app-shell {
    font-size: 15px;
    line-height: 1.55;
    color: var(--text);
    -webkit-font-smoothing: antialiased;
}

.shell-workspace h2,
.page-title {
    letter-spacing: -0.015em;
}

.page-purpose,
.muted-copy {
    line-height: 1.55;
}

.eyebrow {
    letter-spacing: 0.12em;
}

table td,
table th {
    font-variant-numeric: tabular-nums;
}

/* ---------- Buttons ---------- */
.button,
button,
.button-link,
.button-primary,
.home-start {
    border-radius: var(--radius-sm);
    font-weight: 600;
    line-height: 1.25;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.button,
button,
.button-link {
    padding: 10px 16px;
}

.button:hover,
button:hover,
.button-link:hover {
    opacity: 1;
    background-color: #b98d22;
}

.button-quiet:hover,
.button-secondary:hover,
a.button-secondary:hover,
.button-destructive:hover,
button.button-destructive:hover {
    background-color: #f7f4ee;
}

button:disabled,
button[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
}

.header-icon-btn,
.header-icon-btn:hover {
    background-color: transparent;
}

.sidebar-collapse-btn,
.sidebar-collapse-btn:hover {
    background-color: transparent;
}

/* ---------- Forms ---------- */
label {
    font-weight: 600;
    color: var(--ink-soft);
}

input,
select,
textarea {
    border-radius: var(--radius-sm);
    border-color: #d9d3c7;
    padding: 11px 12px;
    color: var(--text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: var(--focus-ring);
}

input[type="checkbox"],
input[type="radio"] {
    width: auto;
    margin-top: 0;
    box-shadow: none;
}

.form-panel,
.empty-state {
    border-radius: var(--radius-md);
}

/* ---------- Tables ---------- */
.data-table,
.register-table,
.shell-workspace table:not(.home-month):not([class*="calendar"]) {
    border-collapse: collapse;
}

.data-table th,
.shell-workspace table th {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--muted);
}

.data-table tbody tr:hover,
.register-table tbody tr:hover {
    background: var(--row-hover);
}

/* A register in a card: Clients and similar lists. */
.register-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
    margin-top: 8px;
}

.register-card .register-table th,
.register-card .register-table td {
    padding: 14px 18px;
}

.register-card .register-table th {
    background: #faf8f4;
    border-bottom: 1px solid var(--border);
}

.register-card .register-table tbody tr:last-child td {
    border-bottom: 0;
}

.register-card .register-table td a {
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    border-bottom: 1px solid var(--gold-soft);
}

.register-card .register-table td a:hover {
    border-bottom-color: var(--gold);
}

.register-table td.is-number,
.register-table th.is-number {
    text-align: right;
}

.register-table .is-empty {
    color: #a3a7ad;
}

.register-count {
    margin: 0 0 6px;
    color: var(--muted);
    font-size: 0.85rem;
}

@media (max-width: 720px) {
    /* Each client becomes a small card: name first, the rest labelled underneath. */
    .register-card .register-table thead {
        display: none;
    }

    .register-card .register-table,
    .register-card .register-table tbody,
    .register-card .register-table tr,
    .register-card .register-table td {
        display: block;
        width: 100%;
    }

    .register-card .register-table tr {
        padding: 14px 16px;
        border-bottom: 1px solid var(--border);
    }

    .register-card .register-table tbody tr:last-child {
        border-bottom: 0;
    }

    .register-card .register-table td {
        padding: 2px 0;
        border: 0;
        text-align: left;
    }

    .register-card .register-table td[data-label]::before {
        content: attr(data-label) " ";
        color: var(--muted);
        font-size: 0.78rem;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        margin-right: 6px;
    }

    .register-card .register-table td:first-child {
        font-size: 1.02rem;
        margin-bottom: 4px;
    }
}

/* ---------- Home ---------- */
.home-greeting {
    letter-spacing: -0.025em;
}

.home-briefing {
    gap: 18px;
    margin: 6px 0 26px;
}

.home-briefing > div {
    background: var(--white);
    border: 1px solid var(--border);
    border-top: 3px solid var(--gold);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    padding: 18px 20px 16px;
    min-width: 0;
}

.home-briefing h2 {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 4px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.home-briefing-count {
    min-width: 26px;
    padding: 1px 9px;
    border-radius: 999px;
    background: #f3ead2;
    color: #6d5310;
    font-size: 0.78rem;
    letter-spacing: 0;
    text-align: center;
}

.home-briefing-count.is-zero {
    background: #f1efea;
    color: var(--muted);
}

.home-briefing p {
    margin: 6px 0 0;
}

.home-briefing .muted-copy {
    font-size: 0.86rem;
}

.home-briefing ul {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
}

.home-briefing li {
    padding: 8px 0;
    border-top: 1px solid var(--surface-line);
}

.home-briefing li:first-child {
    border-top: 0;
}

.home-briefing li a {
    color: var(--text);
    text-decoration: none;
    font-weight: 500;
}

.home-briefing li a:hover {
    color: #8a6a14;
}

.home-briefing h3 {
    margin: 12px 0 2px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.home-briefing-empty {
    color: var(--muted);
}

.home-counts {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0 18px;
    max-width: 30rem;
    box-shadow: var(--shadow-soft);
}

.home-counts li:last-child a {
    border-bottom: 0;
}

.home-counts a:hover span {
    color: #8a6a14;
}

.home-start {
    text-align: center;
}

.home-actions .home-calendar {
    background: var(--white);
    border-radius: var(--radius-sm);
    font-weight: 600;
}

.home-actions .home-calendar:hover {
    background: #faf7f0;
}

@media (max-width: 960px) {
    .home-briefing {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- Sidebar: approved logo and the collapsible Calculators group ---------- */
.sidebar-logo {
    aspect-ratio: 2500 / 1251;
}

.sidebar-collapsible > summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 8px 12px;
    margin: 0 0 4px;
    border-radius: var(--radius-sm);
    user-select: none;
}

.sidebar-collapsible > summary::-webkit-details-marker {
    display: none;
}

.sidebar-collapsible > summary:hover {
    color: #d7dbe2;
    background: var(--sidebar-elevated);
}

.sidebar-collapsible > summary:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 1px;
}

.sidebar-group-icon {
    display: none;
    font-size: 1.1rem;
    width: 1.25rem;
    text-align: center;
}

.sidebar-group-title {
    flex: 1;
}

.sidebar-group-chevron {
    font-size: 0.7rem;
    transition: transform 0.15s ease;
}

.sidebar-collapsible[open] > summary .sidebar-group-chevron {
    transform: rotate(180deg);
}

/* Icon-only sidebar: the group stays reachable through its calculator icon. */
body[data-sidebar-collapsed="true"] .sidebar-collapsible > summary {
    opacity: 1;
    height: auto;
    overflow: visible;
    justify-content: center;
    padding: 11px 0;
    margin: 0 0 4px;
}

body[data-sidebar-collapsed="true"] .sidebar-collapsible .sidebar-group-icon {
    display: inline-block;
    color: #d7dbe2;
}

body[data-sidebar-collapsed="true"] .sidebar-collapsible .sidebar-group-title,
body[data-sidebar-collapsed="true"] .sidebar-collapsible .sidebar-group-chevron {
    display: none;
}

@media (max-width: 900px) {
    body[data-sidebar-collapsed="true"] .sidebar-collapsible > summary {
        justify-content: flex-start;
        padding: 8px 12px;
    }

    body[data-sidebar-collapsed="true"] .sidebar-collapsible .sidebar-group-title,
    body[data-sidebar-collapsed="true"] .sidebar-collapsible .sidebar-group-chevron {
        display: inline;
    }
}

/* ---------- Project hub and pages ---------- */
.hub-heading-actions {
    gap: 10px;
}

.hub-heading-actions .button-link,
.hub-heading-actions .button,
.hub-heading-actions button {
    padding: 9px 14px;
    font-size: 0.92rem;
}

.form-panel + .form-panel {
    margin-top: 18px;
}

/* ---------- Small screens ---------- */
@media (max-width: 640px) {
    .shell-workspace {
        width: calc(100% - 32px);
    }

    .form-panel,
    .empty-state {
        padding: 20px 18px;
    }

    .form-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 0 16px;
    }

    .hub-heading-actions {
        justify-content: flex-start;
    }
}

/* ---------- Final bounded polish (Joel, 16 Oct 2026) ---------- */

/* Quiet secondary actions: same shape as the primary gold button, white with a fine border. */
.button.button-secondary,
a.button.button-secondary {
    background: var(--white);
    color: var(--text);
    border: 1px solid #d9d3c7;
    box-shadow: none;
}

.button.button-secondary:hover,
a.button.button-secondary:hover {
    background: #faf7f0;
    border-color: var(--gold);
    color: var(--text);
}

/* Project hub and estimate: one primary next action, then quieter groups. */
.hub-heading-actions {
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.action-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.action-group:empty {
    display: none;
}

.action-group-primary .button {
    padding: 11px 20px;
    font-size: 0.98rem;
}

.estimate-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.estimate-actions form {
    margin: 0;
}

.estimate-actions .action-divider {
    width: 1px;
    align-self: stretch;
    background: var(--border);
    margin: 0 4px;
}

.estimate-next-step {
    margin: 14px 0 0;
    padding: 10px 14px;
    border-left: 3px solid var(--gold);
    background: #faf7f0;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: 0.92rem;
}

.estimate-next-step a {
    font-weight: 600;
}

/* Estimate totals: the customer total reads first. */
.estimate-totals {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 1px;
    margin-top: 14px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.estimate-total {
    padding: 14px 16px;
    background: var(--white);
    min-width: 0;
}

.estimate-total .eyebrow {
    margin: 0 0 6px;
}

.estimate-total-value {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    color: var(--text);
}

.estimate-total.is-grand {
    background: #fbf6e8;
}

.estimate-total.is-grand .estimate-total-value {
    font-size: 1.55rem;
    color: #6d5310;
}

/* Projects register: matches the Clients register. */
.projects-empty {
    text-align: center;
    padding: 44px 24px;
}

.projects-empty h2 {
    margin: 0 0 6px;
}

.projects-empty p {
    margin: 0 auto 18px;
    max-width: 30rem;
}

@media (max-width: 900px) {
    .hub-heading-actions,
    .action-group {
        align-items: stretch;
        justify-content: flex-start;
        width: 100%;
    }

    .estimate-totals {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .estimate-total.is-grand:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

@media (max-width: 720px) {
    /* Phones: wide tables scroll inside their own box instead of widening the page. */
    .shell-workspace table:not(.register-table):not(.home-month):not([class*="calendar"]) {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .shell-workspace input,
    .shell-workspace select,
    .shell-workspace textarea {
        max-width: 100%;
        min-width: 0;
    }

    /* Grid and flex children may shrink, so a wide table scrolls inside its panel. */
    .shell-workspace .grid > *,
    .shell-workspace .form-grid > *,
    .shell-workspace .panel,
    .shell-workspace .form-panel,
    .shell-workspace section,
    .shell-workspace article {
        min-width: 0;
        max-width: 100%;
    }

    /* Touch targets: at least 44 px, and buttons share the row in even columns rather than squeezing. */
    .shell-workspace .button,
    .shell-workspace .button-link,
    .shell-workspace button:not(.contextual-help-ask-btn):not(.contextual-help-voice-btn):not(.contextual-help-speak-btn):not(.contextual-help-stop-btn) {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .action-group,
    .estimate-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .action-group .button,
    .estimate-actions .button,
    .estimate-actions form,
    .estimate-actions form button {
        width: 100%;
    }

    .action-group-primary {
        grid-template-columns: minmax(0, 1fr);
    }

    .estimate-actions .action-divider {
        display: none;
    }

    .estimate-actions .is-primary {
        grid-column: 1 / -1;
    }
}

/* Projects register in a card, like Clients. Markup and links unchanged. */
.projects-workspace {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
    margin-top: 14px;
}

.projects-workspace .projects-head {
    padding: 12px 20px;
    background: #faf8f4;
    border-bottom: 1px solid var(--border);
}

.projects-workspace .projects-row {
    padding: 16px 20px;
}

.projects-workspace .projects-row:last-child {
    border-bottom: 0;
}

.projects-workspace .projects-row:hover {
    background: var(--row-hover);
}

.projects-workspace .projects-row-name {
    font-weight: 600;
}

.projects-workspace .projects-row-stage {
    justify-self: start;
    padding: 3px 10px;
    border-radius: 999px;
    background: #f3eee4;
    color: var(--ink-soft);
    font-size: 0.82rem;
    font-weight: 600;
}

.projects-empty {
    margin-top: 14px;
}

@media (max-width: 720px) {
    .projects-workspace .projects-head {
        display: none;
    }

    .projects-workspace .projects-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        padding: 14px 16px;
    }
}

@media (max-width: 720px) {
    /* An odd last action takes the full row instead of leaving a gap. */
    .action-group > :last-child:nth-child(odd),
    .estimate-actions > :last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

button.button-secondary {
    background: var(--white);
    color: var(--text);
    border: 1px solid #d9d3c7;
}

.action-group,
.estimate-actions {
    align-items: stretch;
}

.estimate-actions form {
    display: flex;
}

/* Supplier Hub delivery schedule on office pages (Joel, 17 Oct 2026). */
.delivery-flag { color: #8a4b00; font-weight: 600; }
.delivery-change.is-pending { border-left: 4px solid #c8871a; padding: 8px 14px; background: #fbf6ec; border-radius: 6px; }
.delivery-history { margin: 6px 0 0; padding-left: 18px; }
.home-band.accent-delivery { border-left-color: #2f6f4f; background: #eef6f1; }
.home-band.accent-delivery-pending { border-left-color: #c8871a; background: #fbf3e4; }

/* Company Calendar workspace (Joel, 18 Oct 2026): toolbar, full-width calendar, activity colours,
   Week and Day lists, folded lower sections. Scoped to .cal-workspace; Home is unchanged. */
.cal-workspace { --cal-gap: 10px; }
.cal-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cal-gap) 14px; margin: 0 0 12px; }
.cal-toolbar details > summary { cursor: pointer; list-style: none; }
.cal-toolbar details > summary::-webkit-details-marker { display: none; }
.cal-selected-day { position: relative; }
.cal-selected-day > summary { display: inline-flex; align-items: baseline; gap: 8px; padding: 8px 12px; min-height: 40px; border: 1px solid var(--border); border-radius: 8px; background: var(--white); }
.cal-chip-label { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.cal-chip-count { font-size: 12px; color: var(--muted); }
.cal-selected-panel { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; width: min(380px, 92vw); padding: 14px 16px; background: var(--white); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 28px rgba(26, 31, 40, 0.14); }
.cal-nav { display: flex; align-items: center; gap: 10px; }
.cal-period-title { margin: 0; font-size: 1.35rem; font-weight: 500; letter-spacing: -0.02em; white-space: nowrap; }
.cal-nav-step { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 36px; text-decoration: none; font-size: 1.2rem; color: var(--text); border-radius: 6px; }
.cal-nav-step:hover { background: rgba(26, 31, 40, 0.06); }
.cal-today { font-size: 13px; color: var(--text); border-bottom: 1px solid var(--gold); text-decoration: none; }
.cal-views { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.cal-views a { padding: 7px 12px; min-height: 36px; display: inline-flex; align-items: center; font-size: 13px; text-decoration: none; color: var(--text); }
.cal-views a + a { border-left: 1px solid var(--border); }
.cal-views a[aria-current="page"] { background: var(--text); color: #fff; }
.cal-project-filter select { min-height: 38px; max-width: 220px; }
.cal-period { position: relative; }
.cal-period > summary { padding: 8px 12px; min-height: 38px; display: inline-flex; align-items: center; font-size: 13px; border: 1px solid var(--border); border-radius: 8px; background: var(--white); }
.cal-period-form { position: absolute; z-index: 20; top: calc(100% + 6px); right: 0; width: min(340px, 92vw); display: grid; gap: 10px; padding: 14px; background: var(--white); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 28px rgba(26, 31, 40, 0.14); }
.cal-period-form label { display: grid; gap: 4px; font-size: 13px; }
.cal-period-form p { margin: 0; font-size: 12px; }
.cal-toolbar .cal-set-dates { margin-left: auto; }
/* Help as a compact icon: the same Help panel and content, opening as a dropdown. */
.cal-help { position: relative; }
.cal-help .contextual-help { margin: 0; border: 0; background: transparent; }
.cal-help .contextual-help > summary { width: 38px; height: 38px; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: var(--white); font-size: 0; display: inline-flex; align-items: center; justify-content: center; }
.cal-help .contextual-help > summary::after { content: "?"; float: none; font-size: 16px; font-weight: 700; color: var(--text); }
.cal-help .contextual-help[open] > summary::after { content: "?"; }
.cal-help .contextual-help-body { position: absolute; z-index: 20; top: 44px; right: 0; width: min(420px, 92vw); padding: 14px 16px; background: var(--white); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 28px rgba(26, 31, 40, 0.14); }

/* Full-width month with taller rows. */
.cal-workspace .home-planning { display: block; }
.cal-workspace .home-week, .cal-workspace .home-day { min-height: 128px; }
/* Scrolling months (Joel, 20 Oct 2026): about five weeks on screen; weeks run on across months. */
.home-month.is-scrolling .cal-month-scroll { position: relative; max-height: min(calc(128px * 5.5), 72vh); overflow-y: auto; overscroll-behavior: contain; }
.home-month.is-scrolling .cal-month-scroll:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
/* Month heading inside the scrolling calendar (Joel, 20 Oct 2026): compact, understated, and sticky, so the
   month in view is always named; the next month's heading slides over it at the boundary. */
.cal-month-band { position: sticky; top: 0; z-index: 4; padding: 6px 14px 6px 60px; font-size: 14px; font-weight: 600; letter-spacing: 0.01em; color: var(--text); background: #f3efe7; border-top: 1px solid #d9d2c4; border-bottom: 1px solid #d9d2c4; box-shadow: 0 1px 0 rgba(28, 31, 36, 0.04); }
.home-month.is-scrolling .home-day.is-alt-month { background: #f6f3ee; }
.home-month.is-scrolling .home-day.is-alt-month.is-weekend { background: #f1ede6; }
.home-month.is-scrolling .home-day.is-first .home-day-num { font-weight: 700; }
.cal-month-edge { display: block; padding: 10px 14px; font-size: 13px; color: var(--muted); text-align: center; text-decoration: none; background: #fbfaf8; border-bottom: 1px solid var(--border); }
.cal-month-edge[data-month-later] { border-top: 1px solid var(--border); border-bottom: 0; }
.cal-month-edge:hover, .cal-month-edge:focus-visible { color: var(--text); background: rgba(199, 154, 43, 0.10); }
.cal-workspace .home-bands { grid-auto-rows: 20px; row-gap: 4px; }
.cal-workspace .home-band { height: 20px; font-size: 12px; line-height: 18px; border-left-width: 4px; }

/* Activity colours: light tint, dark text, strong left edge. The label always carries the meaning. */
.cal-cat-concrete { --cat: #4f5a65; --cat-tint: #e9edf1; }
.cal-cat-foundation { --cat: #8a4a12; --cat-tint: #f6e8da; }
.cal-cat-framing { --cat: #9a7a2c; --cat-tint: #f7efd9; }
.cal-cat-roofing { --cat: #6a2a2a; --cat-tint: #f3e1e1; }
.cal-cat-electrical { --cat: #a8870f; --cat-tint: #fbf3cf; }
.cal-cat-plumbing { --cat: #1f4f78; --cat-tint: #e1ecf6; }
.cal-cat-interiors { --cat: #5a4380; --cat-tint: #ece6f5; }
.cal-cat-general { --cat: #6b6b6b; --cat-tint: #eeeeec; }
.cal-cat-delivery { --cat: #2f6f4f; --cat-tint: #eef6f1; }
.cal-cat-delivery-pending { --cat: #c8871a; --cat-tint: #fbf3e4; }
.cal-workspace .home-band[class*="cal-cat-"] { background: var(--cat-tint); border-color: color-mix(in srgb, var(--cat) 35%, transparent); border-left-color: var(--cat); }
.cal-workspace .home-band.is-conflict { box-shadow: inset 0 -2px 0 #8a3b32; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; list-style: none; margin: 12px 0 18px; padding: 0; font-size: 12px; color: var(--muted); }
.cal-legend li { display: inline-flex; align-items: center; gap: 6px; }
.cal-swatch { width: 14px; height: 14px; border-radius: 3px; background: var(--cat-tint); border: 1px solid var(--cat); border-left-width: 4px; }

/* Week and Day lists. */
.cal-week-view { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--text); background: #fffcf8; }
.cal-week-day { min-height: 220px; padding: 8px; border-left: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.cal-week-day:first-child { border-left: 0; }
.cal-week-day.is-selected { box-shadow: inset 0 2px 0 var(--gold); }
.cal-week-date { display: inline-block; margin-bottom: 6px; font-weight: 600; text-decoration: none; color: var(--text); }
.cal-week-day.is-today .cal-week-date { border-bottom: 1px solid var(--gold); }
.cal-none { color: var(--muted); margin: 0; }
.cal-entries { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cal-entry { padding: 6px 8px; background: var(--cat-tint); border: 1px solid color-mix(in srgb, var(--cat) 30%, transparent); border-left: 4px solid var(--cat); border-radius: 4px; overflow-wrap: anywhere; }
.cal-entry.is-conflict { box-shadow: inset 0 -2px 0 #8a3b32; }
.cal-entry-title { display: block; font-weight: 600; font-size: 13px; color: var(--text); text-decoration: none; }
.cal-entry-meta { display: block; font-size: 12px; color: var(--muted); }
.cal-day-view { border-top: 1px solid var(--text); padding: 12px 0; }
.cal-entries.is-day .cal-entry { padding: 10px 12px; }
.cal-entries.is-day .cal-entry-title { font-size: 15px; }

/* Folded lower sections. */
.cal-fold { margin: 0 0 14px; }
.cal-fold > summary { cursor: pointer; list-style: none; }
.cal-fold > summary::-webkit-details-marker { display: none; }
.cal-fold > summary h2 { display: inline; font-size: 1.05rem; }
.cal-fold > summary::before { content: "▸ "; color: var(--muted); }
.cal-fold[open] > summary::before { content: "▾ "; }
.cal-project-card { border-top: 1px solid var(--border); padding: 10px 0; }
.cal-project-card > summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.cal-warning-count { font-size: 12px; font-weight: 600; color: #8a3b32; }
.cal-bar-caption { margin: 6px 0 4px; font-size: 12px; }
.cal-sub { margin-top: 10px; }
.cal-sub > summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.cal-table-wrap { overflow-x: auto; }
.cal-when-week { display: none; }

/* Phone: no choice made = week list (month bars cannot be read at this width). */
@media (max-width: 700px) {
    .cal-toolbar { gap: 8px; }
    .cal-toolbar .cal-set-dates { margin-left: 0; }
    .cal-project-filter select { max-width: 100%; }
    .cal-workspace[data-calendar-view="auto"] .cal-month-view { display: none; }
    .cal-workspace[data-calendar-view="auto"] .cal-when-month { display: none; }
    .cal-workspace[data-calendar-view="auto"] .cal-when-week { display: inline; }
    .cal-week-view { grid-template-columns: 1fr; }
    .cal-week-day { min-height: 0; border-left: 0; display: grid; grid-template-columns: 64px 1fr; gap: 8px; }
    .cal-period-title { font-size: 1.1rem; }
    /* On a phone the dropdowns open in place under their button, so the button stays tappable. */
    .cal-selected-day, .cal-period, .cal-help:has(details[open]) { flex-basis: 100%; }
    .cal-selected-day[open] > summary, .cal-period[open] > summary { width: 100%; }
    .cal-selected-panel, .cal-period-form, .cal-help .contextual-help-body { position: static; width: auto; margin-top: 6px; box-shadow: none; }
    .cal-workspace .home-band .home-band-ttl { display: none; }
    .cal-workspace .home-band { height: 8px; margin: 0 2px; padding: 0; border-left-width: 3px; }
    .cal-workspace .home-bands { grid-auto-rows: 8px; row-gap: 3px; }
    .cal-workspace .home-week, .cal-workspace .home-day { min-height: 76px; }
    .home-month.is-scrolling .home-day-mon { display: block; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; }
    .cal-month-band { padding: 4px 10px; font-size: 13px; }
}
@media (min-width: 701px) {
    .cal-workspace[data-calendar-view="auto"] .cal-week-view { display: none; }
}
/* Company Calendar business appointments and hourly Day / Week (Joel, 19 Oct 2026).
   Visual direction: Joel's approved CalibraytAI calendar concept (19 Oct). Generous white space,
   clear type, simple pill controls, a gold New Appointment button, rounded appointment cards with an
   icon and a soft type colour. Construction activities keep their approved colours (All day row). */

/* Toolbar: arrows + calendar + title · Today / Month / Week / Day · New Appointment */
.cal-workspace .cal-toolbar { gap: 12px 18px; margin: 0 0 8px; }
.cal-workspace .cal-nav { gap: 6px; }
.cal-workspace .cal-nav-step { min-width: 40px; min-height: 40px; border: 1px solid var(--border); background: var(--white); border-radius: 9px; color: var(--text); font-size: 1.15rem; cursor: pointer; }
.cal-workspace .cal-nav-step:hover { background: #f6f5f2; }
.cal-goto { position: relative; }
.cal-goto > summary { list-style: none; }
.cal-goto > summary::-webkit-details-marker { display: none; }
.cal-goto-form { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; display: flex; gap: 8px; align-items: end; padding: 12px; background: var(--white); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 28px rgba(26, 31, 40, 0.14); white-space: nowrap; }
.cal-goto-form label { display: grid; gap: 4px; font-size: 13px; }
.cal-workspace .cal-period-title { margin: 0 0 0 10px; font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; }
.cal-viewbar { display: flex; align-items: center; gap: 10px; }
.cal-workspace .cal-today { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--border); border-bottom: 1px solid var(--border); border-radius: 9px; background: var(--white); font-size: 14px; font-weight: 500; }
.cal-workspace .cal-today:hover { background: #f6f5f2; }
.cal-workspace .cal-views { display: inline-flex; gap: 6px; border: 0; border-radius: 0; overflow: visible; }
.cal-workspace .cal-views a { min-height: 40px; padding: 0 16px; border: 1px solid var(--border); border-radius: 9px; background: var(--white); font-size: 14px; font-weight: 500; }
.cal-workspace .cal-views a + a { border-left: 1px solid var(--border); }
.cal-workspace .cal-views a:hover { background: #f6f5f2; }
.cal-workspace .cal-views a[aria-current="page"] { background: #17202e; border-color: #17202e; color: #fff; }
.cal-new-appt { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 18px; border-radius: 9px; background: var(--gold); color: #1c1f24; font-weight: 600; font-size: 14px; text-decoration: none; box-shadow: 0 1px 2px rgba(28, 31, 36, 0.12); }
.cal-new-appt span { font-size: 20px; font-weight: 500; line-height: 1; }
.cal-new-appt:hover, .cal-new-appt:focus-visible { background: #b98d22; }
.cal-subbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 14px; }
.cal-subbar details > summary { cursor: pointer; list-style: none; }
.cal-subbar details > summary::-webkit-details-marker { display: none; }
.cal-subbar .cal-set-dates { margin-left: auto; min-height: 38px; }
.cal-subbar .cal-selected-day > summary, .cal-subbar .cal-period > summary { min-height: 38px; }

.cal-subbar .cal-set-dates.button { background: var(--white); color: var(--text); border: 1px solid var(--border); box-shadow: none; font-weight: 500; }
.cal-subbar .cal-set-dates.button:hover { background: #f6f5f2; }
.cal-legend-break { flex-basis: 100%; height: 0; }
.cal-appt-swatch { background: var(--appt-tint); border: 1px solid var(--appt); border-left-width: 4px; border-radius: 4px; }

/* Appointment type colours: soft, and clear of the construction activity colours. */
.cal-type-site_visit { --appt: #3f7fd0; --appt-tint: #e6f0fc; --appt-ink: #1d3c66; }
.cal-type-client_meeting { --appt: #3f7fd0; --appt-tint: #e6f0fc; --appt-ink: #1d3c66; }
.cal-type-supplier_meeting { --appt: #8b6bd0; --appt-tint: #efe9fb; --appt-ink: #3d2a6b; }
.cal-type-estimate_consultation { --appt: #2f8f84; --appt-tint: #e2f3f0; --appt-ink: #164a44; }
.cal-type-general { --appt: #6f7c8c; --appt-tint: #eef1f5; --appt-ink: #2c3440; }
.cal-cat-appointment { --cat: #3f7fd0; --cat-tint: #e6f0fc; }
.cal-workspace .home-band.cal-cat-appointment { background: var(--appt-tint, #e6f0fc); border: 1px solid color-mix(in srgb, var(--appt, #3f7fd0) 45%, transparent); border-left: 4px solid var(--appt, #3f7fd0); border-radius: 5px; color: var(--appt-ink, #1d3c66); }
.cal-entry-appt { background: var(--appt-tint); border: 1px solid color-mix(in srgb, var(--appt) 40%, transparent); border-left: 4px solid var(--appt); border-radius: 7px; }
.cal-entry-appt .cal-entry-title { color: var(--appt-ink); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cal-entry-time { font-weight: 500; color: color-mix(in srgb, var(--appt-ink, #1c1f24) 75%, transparent); font-variant-numeric: tabular-nums; }
.cal-appt-icon { flex: none; }

/* Hourly grid */
.cal-hours { --hour-h: 48px; --gutter: 84px; margin: 0 0 18px; background: var(--white); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.cal-hours-caption { margin: 0 0 8px; font-size: 14px; color: var(--muted); }
.cal-hours-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 12px; padding: 6px 10px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--border); background: #fbfaf8; }
.cal-hours-range { font-variant-numeric: tabular-nums; }
.cal-hours-step, .cal-hours-reset { color: var(--text); text-decoration: none; padding: 3px 8px; border-radius: 6px; min-height: 30px; display: inline-flex; align-items: center; }
.cal-hours-step:hover { background: rgba(28, 31, 36, 0.06); }
.cal-hours-reset { border-bottom: 1px solid var(--gold); border-radius: 0; padding: 3px 0; }
.cal-hours-row, .cal-hours-body { display: grid; grid-template-columns: var(--gutter) repeat(var(--cal-cols), minmax(0, 1fr)); }
/* All 24 hours scroll inside the grid (Joel, 20 Oct 2026); about 11 hours show at a time. The header and
   all-day rows leave room for the scrollbar (measured by calendar-hours.js) so the day columns line up. */
.cal-hours-body { max-height: min(calc(var(--hour-h) * var(--cal-visible, 11)), 70vh); overflow-y: auto; overscroll-behavior: contain; }
.cal-hours-row { padding-right: var(--cal-scrollbar, 0px); }
.cal-hours-body:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.cal-hours-gutter { background: #f5f6f7; font-size: 13px; font-weight: 500; color: #2c3440; text-align: right; padding-right: 14px; border-right: 1px solid var(--border); }
.cal-hours-head { border-bottom: 1px solid var(--border); }
.cal-hours-time { display: flex; align-items: center; justify-content: center; padding: 0; font-size: 14px; }
.cal-hours-day { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 9px 4px; text-decoration: none; color: var(--text); border-left: 1px solid var(--border); }
.cal-hours-head .cal-hours-day:nth-child(2) { border-left: 0; }
.cal-hours-dow { font-size: 15px; font-weight: 600; }
.cal-hours-num { font-size: 14px; color: #3a414b; }
.cal-hours-day.is-today { background: #e9f1fb; color: #2a5ea3; }
.cal-hours-day.is-today .cal-hours-num { color: #2a5ea3; }
.cal-hours-day.is-selected:not(.is-today) { box-shadow: inset 0 -2px 0 var(--gold); }
.cal-hours-allday { border-bottom: 1px solid var(--border); }
.cal-hours-allday > .cal-hours-gutter { padding-top: 10px; font-size: 12px; color: var(--muted); }
.cal-hours-allday-cell { position: relative; min-width: 0; min-height: 34px; padding: 6px 6px 18px; border-left: 1px solid var(--border); display: grid; gap: 4px; align-content: start; }
.cal-hours-allday-cell:nth-child(2) { border-left: 0; }
.cal-entries.is-compact { gap: 4px; }
.cal-entries.is-compact .cal-entry { padding: 3px 7px; }
.cal-entries.is-compact .cal-entry-title { font-size: 12px; }
.cal-entries.is-compact .cal-entry-meta { font-size: 11px; }
.cal-hours.is-week .cal-entries.is-compact .cal-entry-meta { display: none; }
.cal-hours.is-week .cal-entries.is-compact .cal-entry-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.cal-add-allday { position: absolute; right: 4px; bottom: 1px; justify-self: start; font-size: 11px; color: var(--muted); text-decoration: none; padding: 2px 5px; border-radius: 4px; opacity: 0; }
.cal-hours-allday-cell:hover .cal-add-allday, .cal-add-allday:focus { opacity: 1; }
@media (hover: none) { .cal-add-allday { opacity: 0.8; } }
.cal-add-allday:hover, .cal-add-allday:focus { background: rgba(199, 154, 43, 0.14); color: var(--text); }
.cal-hours-labels { display: grid; grid-template-rows: repeat(var(--cal-rows), var(--hour-h)); }
.cal-hour-label { padding-top: 6px; font-variant-numeric: tabular-nums; border-top: 1px solid #ebedf0; }
.cal-hour-label:first-child { border-top: 0; }
.cal-hours-col { position: relative; min-width: 0; display: grid; grid-template-rows: repeat(calc(var(--cal-rows) * 2), calc(var(--hour-h) / 2)); border-left: 1px solid #ebedf0; }
.cal-hours-labels + .cal-hours-col { border-left: 0; }
.cal-hours-col.is-today { background: #f6f9fd; }
.cal-slot { display: block; border-top: 1px solid #ebedf0; text-decoration: none; }
.cal-slot:first-child { border-top: 0; }
.cal-slot.is-half { border-top: 1px solid #f5f6f7; }
.cal-slot:hover, .cal-slot:focus-visible { background: rgba(199, 154, 43, 0.10); outline: none; }
.cal-slot:hover::after, .cal-slot:focus-visible::after { content: "+ New"; display: block; padding: 4px 8px; font-size: 11px; color: var(--muted); }
.cal-appt { position: absolute; z-index: 2; box-sizing: border-box; overflow: hidden; display: flex; align-items: flex-start; gap: 8px; padding: 6px 10px; margin: 2px 3px; width: calc(100% - 6px); background: var(--appt-tint); border: 1px solid color-mix(in srgb, var(--appt) 45%, transparent); border-left: 4px solid var(--appt); border-radius: 7px; text-decoration: none; color: var(--appt-ink); font-size: 13px; line-height: 1.3; }
.cal-appt:hover, .cal-appt:focus-visible { box-shadow: 0 4px 14px rgba(28, 31, 36, 0.14); z-index: 3; }
.cal-appt .cal-appt-icon { margin-top: 1px; }
.cal-appt-text { min-width: 0; display: flex; flex-direction: column; }
.cal-appt-title { font-weight: 600; overflow-wrap: break-word; hyphens: auto; }
.cal-appt-meta { font-size: 12px; opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-appt.is-overlap .cal-appt-title { overflow-wrap: normal; hyphens: manual; }
.cal-hours.is-week .cal-appt.is-overlap { font-size: 11px; padding: 4px 5px; }
.cal-appt.is-short { padding-top: 3px; padding-bottom: 2px; }
.cal-appt.is-short .cal-appt-meta { display: none; }
.cal-hours.is-week .cal-appt { padding: 5px 7px; gap: 0; font-size: 12px; }
.cal-hours.is-week .cal-appt .cal-appt-icon { display: none; }
.cal-hours.is-week .cal-appt-time { display: none; }
.cal-more { position: absolute; z-index: 2; left: 6px; right: 6px; text-align: center; font-size: 11px; color: var(--text); background: #eef0f3; border-radius: 10px; padding: 1px 6px; text-decoration: none; }
.cal-more.is-earlier { top: 3px; }
.cal-more.is-later { bottom: 3px; }
.cal-day-empty { margin: 4px 0 0; font-size: 13px; }
.cal-day-view { padding-top: 0; border-top: 0; }
.cal-week-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.cal-week-add { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; border-radius: 50%; text-decoration: none; color: var(--muted); font-size: 18px; line-height: 1; }
.cal-week-add:hover, .cal-week-add:focus { background: rgba(199, 154, 43, 0.14); color: var(--text); }

/* My Calendar | Company Calendar, Company / Personal */
.cal-scope { display: inline-flex; padding: 3px; gap: 2px; background: #eceae5; border-radius: 10px; }
.cal-scope a { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--text); text-decoration: none; }
.cal-scope a[aria-current="page"] { background: var(--white); box-shadow: 0 1px 3px rgba(28, 31, 36, 0.14); font-weight: 600; }
.cal-personal-tag { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 8px; font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; background: rgba(28, 31, 36, 0.08); color: #3f444b; vertical-align: 1px; }
.cal-appt.is-personal, .cal-entry-appt.is-personal { border-style: dashed; border-left-style: solid; }
.cal-lock { vertical-align: -1px; opacity: 0.8; }
.appt-page .button.secondary { background: var(--white); color: var(--text); border: 1px solid var(--border); box-shadow: none; }
.appt-page .button.secondary:hover { background: #f6f5f2; }
.appt-cancel-form .button.secondary { color: #8a3b32; border-color: #e6cfcb; }
.appt-visibility, .appt-attendees { border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px 12px; margin: 0; }
.appt-visibility legend, .appt-attendees legend { font-size: 13px; font-weight: 600; padding: 0 4px; }
.appt-visibility { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.appt-choice { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.appt-attendee-list { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.appt-attendees[hidden] { display: none; }

/* Calendar connection */
.cal-connect { font-size: 13px; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--gold); margin-left: auto; }
.cal-connect + .cal-set-dates { margin-left: 0 !important; }
.appt-add-to-cal { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 14px 0 0; }
.appt-add-to-cal .muted-copy { font-size: 13px; }
.feed-address { margin: 16px 0; padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px; background: #fbfaf8; }
.feed-address h3 { margin: 6px 0 6px; font-size: 1rem; }
.feed-copy { display: flex; gap: 8px; margin: 8px 0 12px; }
.feed-copy input { flex: 1 1 auto; min-width: 0; font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
.feed-steps { margin: 6px 0; padding-left: 18px; display: grid; gap: 6px; font-size: 14px; }
.feed-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.feed-actions form { margin: 0; }

/* Appointment page */
.appt-page { max-width: 760px; }
.appt-back { margin: 0 0 10px; font-size: 13px; }
.appt-back a { color: var(--text); }
.appt-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.appt-form .appt-wide, .appt-form .appt-times { grid-column: 1 / -1; }
.appt-times { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.appt-times[hidden] { display: none; }
.appt-allday { align-self: end; }
.appt-form .button { background: var(--gold); border-color: var(--gold); color: #1c1f24; }
.appt-cancel-form { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.appt-facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 10px 0; }
.appt-facts dt { color: var(--muted); font-size: 13px; }
.appt-facts dd { margin: 0; }
.appt-notes { white-space: pre-wrap; }
.appt-history { margin-top: 14px; font-size: 13px; }
.appt-history ul { margin: 8px 0 0; padding-left: 18px; }

@media (min-width: 701px) {
    .cal-workspace[data-calendar-view="week"] .cal-week-view { display: none; }
}
@media (max-width: 700px) {
    .cal-hours.is-week { display: none; }
    .cal-hours { --gutter: 58px; --hour-h: 52px; }
    .cal-hours-gutter { padding-right: 8px; font-size: 12px; }
    .cal-workspace .cal-period-title { flex-basis: 100%; margin: 4px 0 0; font-size: 1.3rem; }
    .cal-workspace .cal-nav { flex-wrap: wrap; }
    .cal-viewbar { flex-wrap: wrap; }
    .cal-workspace .cal-today, .cal-workspace .cal-views a { padding: 0 12px; }
    .cal-new-appt { margin-left: 0; }
    .cal-goto-form { left: -46px; }
    .cal-subbar .cal-set-dates { margin-left: 0; }
    .cal-connect { margin-left: 0; }
    .cal-subbar .cal-selected-day, .cal-subbar .cal-period, .cal-subbar .cal-help:has(details[open]) { flex-basis: 100%; }
    .cal-subbar .cal-project-filter { flex: 1 1 auto; }
    .cal-subbar .cal-project-filter select { width: 100%; max-width: 100%; }
    .appt-form, .appt-times { grid-template-columns: 1fr; }
    .cal-week-day { grid-template-columns: 1fr; }
}

.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }