/* Warm sand, a bright sea teal, and a little sun. Light only.
   Fonts stay on the machine so the content policy can remain self-only. */

:root {
    /* Surfaces & ink */
    --bg: #fff7ef;
    --paper: #ffffff;
    --surface-2: #fff1e2;
    --ink: #2c241c;
    --ink-soft: #4a4036;
    --muted: #7a6d60;
    --line: #f0e2d2;
    --line-strong: #e4d0ba;

    /* Brand */
    --accent: #0e9a90;
    --accent-strong: #0b756e;
    --accent-soft: #e4f7f4;
    --on-accent: #ffffff;

    /* Signals */
    --coral: #d4533a;
    --coral-soft: #fff0ea;
    --amber: #c4841d;
    --hold: #ffe8bf;
    --info: #3d6f99;
    --info-soft: #e7f2fb;

    /* Form control surface */
    --field-bg: #fffdfb;

    /* Shape */
    --radius: 24px;
    --radius-sm: 12px;
    --radius-xs: 9px;
    --pill: 999px;

    /* Elevation */
    --shadow-sm: 0 1px 2px rgb(21 32 28 / 6%);
    --shadow-md: 0 2px 4px rgb(21 32 28 / 5%), 0 14px 32px rgb(21 32 28 / 7%);
    --shadow-lg: 0 10px 24px rgb(21 32 28 / 9%), 0 30px 60px rgb(21 32 28 / 11%);

    --font-sans: "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-display: "Iowan Old Style", Palatino, "Palatino Linotype", Georgia, serif;

    --page: 72rem;
    color-scheme: light;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    color: var(--ink);
    background:
        radial-gradient(ellipse 70% 42% at 100% -8%, #ffe4b8 0%, transparent 58%),
        radial-gradient(ellipse 52% 38% at -8% -6%, #d7f3ee 0%, transparent 52%),
        var(--bg);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    letter-spacing: -0.006em;
}

::selection { background: var(--accent-soft); color: var(--accent-strong); }

a {
    color: var(--accent-strong);
    text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent);
    text-underline-offset: 0.18em;
}
a:hover { text-decoration-color: currentColor; }

/* Typography -------------------------------------------------------------- */
h1, h2, h3 { font-family: var(--font-display); font-weight: 560; color: var(--ink); }
h1 {
    font-size: clamp(2.1rem, 1.3rem + 3.2vw, 3.1rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0.2rem 0 0.7rem;
}
h2 {
    font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.6rem);
    line-height: 1.15;
    letter-spacing: -0.015em;
    margin: 2rem 0 0.6rem;
}
h3 {
    font-family: var(--font-sans);
    font-weight: 650;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--muted);
    margin: 1.1rem 0 0.4rem;
}
p { margin: 0 0 0.7rem; }

/* Header & footer --------------------------------------------------------- */
.top, .site-foot {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    padding: 0.85rem clamp(1rem, 4vw, 2.5rem);
}
.top {
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--paper) 82%, transparent);
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    position: sticky;
    top: 0;
    z-index: 20;
}
.top nav { display: flex; gap: 0.35rem; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.top nav a {
    color: var(--ink-soft);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    padding: 0.4rem 0.7rem;
    border-radius: var(--pill);
    transition: background-color .15s ease, color .15s ease;
}
.top nav a:hover { background: var(--surface-2); color: var(--ink); }
.top nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-strong); }

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.12rem;
    letter-spacing: -0.02em;
    color: var(--ink);
    text-decoration: none;
}
.brand .brand-mark {
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 7px;
    flex: none;
    box-shadow: var(--shadow-sm);
}

main { max-width: var(--page); margin: 0 auto; padding: clamp(1.25rem, 3vw, 2.5rem) clamp(1rem, 4vw, 2.5rem) 3.5rem; }

.site-foot {
    color: var(--muted);
    font-size: 0.85rem;
    border-top: 1px solid var(--line);
    margin-top: 2rem;
}
.site-foot p { margin: 0; max-width: 60rem; }

/* Text helpers ------------------------------------------------------------ */
.eyebrow {
    margin: 0 0 0.3rem;
    color: var(--accent-strong);
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.lede { font-size: clamp(1.02rem, 0.98rem + 0.3vw, 1.15rem); max-width: 44rem; color: var(--ink-soft); }
.note, .meta { color: var(--muted); font-size: 0.92rem; }
.banner {
    background: var(--accent-soft);
    color: var(--accent-strong);
    border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
    border-radius: var(--radius-sm);
    padding: 0.7rem 0.95rem;
    font-size: 0.92rem;
}
.error {
    color: var(--coral);
    font-weight: 600;
    background: var(--coral-soft);
    border: 1px solid color-mix(in srgb, var(--coral) 28%, transparent);
    border-radius: var(--radius-sm);
    padding: 0.6rem 0.85rem;
}

/* Hero & home directory --------------------------------------------------- */
.hero { max-width: 40rem; margin-bottom: 1.5rem; }

.finder {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 0.7fr 0.7fr auto;
    gap: 0.35rem;
    align-items: end;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0.45rem 0.45rem 0.45rem 1rem;
    box-shadow: var(--shadow-lg);
    margin: 0 0 1.25rem;
}
.finder label {
    display: grid;
    gap: 0.15rem;
    font-size: 0.68rem;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}
.finder input {
    border: 0;
    background: transparent;
    padding: 0.35rem 0 0.55rem;
    border-radius: 0;
    box-shadow: none;
    min-width: 0;
}
.finder input:focus { box-shadow: none; }
.finder button { align-self: stretch; padding-inline: 1.3rem; }

.empty { color: var(--ink-soft); margin-top: 0.5rem; }
.price { font-family: var(--font-display); font-size: 1.25rem; margin: 0.45rem 0 0.2rem; }
.price span { font-family: var(--font-sans); color: var(--muted); font-size: 0.85rem; }

.nav-label {
    margin: 0.9rem 0.7rem 0.15rem;
    font-size: 0.68rem;
    font-weight: 650;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.directory {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
    gap: 1.25rem;
}

.card, .sheet, .book-card, .score-card, .review, .quote {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.card {
    display: block;
    color: inherit;
    text-decoration: none;
    padding: 0.7rem;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: var(--line-strong);
}
.card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.card .eyebrow { margin-top: 0.85rem; }
.card h2 { margin: 0.1rem 0 0.35rem; font-size: 1.35rem; }
.card p { margin: 0 0 0.25rem; }
.plain-card { padding: 1.1rem 1.15rem; }
.plain-card .eyebrow { margin-top: 0; }

.sheet {
    padding: 1.25rem 1.35rem;
    margin-top: 1.25rem;
    box-shadow: var(--shadow-md);
}
.sheet.narrow { max-width: 30rem; margin: 2.5rem auto; padding: 1.75rem; }
.sheet.signin { max-width: 24.5rem; margin: 2.75rem auto 1rem; padding: 1.6rem 1.45rem 1.25rem; }
.sheet.signin h1 { font-size: clamp(1.85rem, 1.5rem + 1vw, 2.25rem); margin-bottom: 0.35rem; }
.sheet.signin .lede { margin-bottom: 1rem; }
.signin button[type="submit"] { width: 100%; margin-top: 0.15rem; }
.signin-alt {
    margin: 1.05rem 0 0;
    padding-top: 0.95rem;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.95rem;
}
.sheet.narrow > h2 { font-size: 1.2rem; margin: 0 0 0.45rem; }
.door-choices { display: grid; gap: 1rem; margin-top: 1.15rem; }
.door-choices a.button { display: block; text-align: center; }
.door-choices .note { margin: 0.45rem 0 0; }
a.button.secondary {
    background: var(--paper);
    color: var(--ink);
    border: 1px solid var(--line-strong);
}
a.button.secondary:hover { background: var(--surface-2); filter: none; }
.qr { margin: 0.35rem 0 0.85rem; }
.qr svg {
    width: 12.5rem;
    height: 12.5rem;
    display: block;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}
.manual-key {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    letter-spacing: 0.06em;
    color: var(--ink);
    overflow-wrap: anywhere;
}

/* Illustrated "marks" (no photos on file) --------------------------------- */
.mark {
    display: block;
    height: 10rem;
    border-radius: var(--radius-sm);
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 74% 30%, #fff8e6 0 0.75rem, rgb(255 248 230 / 0) 0.85rem),
        linear-gradient(180deg, #bfe3dd 0%, #d8efe9 46%, #f3ead9 46%, #f6f0e2 100%);
}
.mark::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 36%;
    height: 2px;
    background: rgb(255 255 255 / 55%);
}
.mark.large { height: 20rem; border-radius: var(--radius); }

.card.shore-haven .mark, .cover.shore-haven .mark {
    background:
        radial-gradient(circle at 26% 28%, #ffffff 0 1.3rem, rgb(255 255 255 / 0) 1.45rem),
        linear-gradient(180deg, #c7dcee 0%, #dcebf6 52%, #eef2e6 52%, #f4efe4 100%);
}
.card.sun-place .mark, .cover.sun-place .mark {
    background:
        radial-gradient(circle at 78% 26%, #fff2c6 0 1.5rem, rgb(255 242 198 / 0) 1.65rem),
        linear-gradient(180deg, #f6c7a6 0%, #fbe0cb 50%, #f6ddc9 50%, #fbeadd 100%);
}

.cover {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-sm);
}
.cover img, .card img.photo {
    display: block;
    width: 100%;
    height: 16rem;
    object-fit: cover;
}
.card img.photo {
    height: 9rem;
}
.photo-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
    gap: 0.5rem;
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
}
.photo-row img {
    display: block;
    width: 100%;
    height: 6rem;
    object-fit: cover;
    border-radius: var(--radius);
}
.photo-library {
    display: grid;
    gap: 0.85rem;
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
}
.photo-library > li {
    display: grid;
    grid-template-columns: 8rem minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
}
.photo-library img {
    display: block;
    width: 8rem;
    height: 6rem;
    object-fit: cover;
    border-radius: var(--radius);
}
.photo-library .meta {
    margin: 0 0 0.25rem;
}
.cover-note {
    position: absolute;
    left: 0.9rem;
    bottom: 0.9rem;
    margin: 0;
    background: color-mix(in srgb, var(--paper) 90%, transparent);
    backdrop-filter: blur(4px);
    border: 1px solid var(--line);
    border-radius: var(--pill);
    padding: 0.25rem 0.7rem;
    font-size: 0.78rem;
    color: var(--muted);
}

/* Stat & score rows ------------------------------------------------------- */
.stat-row, .score-row, .amenity-grid, .legend, .pager {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0;
    margin: 0.75rem 0;
    list-style: none;
}
.stat-row { gap: 0.6rem; }
.stat-row li {
    flex: 1 1 6rem;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 0.7rem 0.85rem;
    text-align: center;
}
.score-row li, .amenity-grid li {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.75rem;
}
.amenity-grid li { background: var(--surface-2); font-size: 0.92rem; }
.stat-row strong { display: block; font-family: var(--font-display); font-size: 1.5rem; line-height: 1; }
.stat-row span { color: var(--muted); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.05em; }
.score-row strong { display: block; font-size: 1.1rem; font-weight: 650; }
.score-row span { color: var(--muted); font-size: 0.78rem; }
.score-row em { color: var(--muted); font-style: normal; font-size: 0.78rem; }
.score-row.compact { gap: 0.4rem; margin-top: 0.85rem; }
.score-row.compact li { font-size: 0.76rem; padding: 0.3rem 0.55rem; color: var(--muted); }
.score-row.compact strong { display: inline; font-size: 0.85rem; color: var(--ink); }

/* Profile + booking layout ------------------------------------------------ */
.profile { display: grid; grid-template-columns: minmax(0, 1fr) 23rem; gap: 2rem; align-items: start; }
.profile-main > section { padding-top: 0.5rem; }
.profile-main > section + section { border-top: 1px solid var(--line); margin-top: 1.5rem; }

.book-card {
    position: sticky;
    top: 5rem;
    padding: 1.25rem;
    box-shadow: var(--shadow-md);
}
.book-card h2 { margin-top: 0.2rem; font-size: 1.3rem; }
.book { display: grid; gap: 0.7rem; }
.book label, .detail div { display: grid; gap: 0.25rem; }
.book label { font-size: 0.82rem; font-weight: 550; color: var(--ink-soft); }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }

/* Form controls ----------------------------------------------------------- */
input, select, textarea, button { font: inherit; color: inherit; }
input, select, textarea {
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-xs);
    background: var(--field-bg);
    font-weight: 450;
    transition: border-color .15s ease, box-shadow .15s ease;
}
input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--muted) 80%, transparent); }
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.book label.check {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-size: 1rem;
    font-weight: 550;
    color: var(--ink);
}
.book label.check input {
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.15rem;
    padding: 0;
    accent-color: #0e9a90;
}
.finder input {
    border: 0;
    background: transparent;
    padding: 0.35rem 0 0.55rem;
    border-radius: 0;
    box-shadow: none;
}
.finder input:focus { border-color: transparent; box-shadow: none; }
textarea { resize: vertical; min-height: 4.5rem; }

button {
    border: 1px solid transparent;
    border-radius: var(--pill);
    padding: 0.6rem 1.15rem;
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 600;
    cursor: pointer;
    transition: filter .15s ease, background-color .15s ease, transform .05s ease, box-shadow .15s ease;
}
button:hover { filter: brightness(1.06); box-shadow: var(--shadow-sm); }
button:active { transform: translateY(1px); }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
a.button {
    display: inline-block;
    border-radius: var(--pill);
    padding: 0.6rem 1.15rem;
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 600;
    text-decoration: none;
}
a.button:hover { filter: brightness(1.06); }

button.secondary {
    background: var(--paper);
    color: var(--ink);
    border-color: var(--line-strong);
}
button.secondary:hover { background: var(--surface-2); filter: none; }
button.linkish {
    background: transparent;
    color: var(--coral);
    border-color: transparent;
    padding: 0.1rem 0.2rem;
    font-weight: 550;
    border-radius: var(--radius-xs);
}
button.linkish:hover { background: var(--coral-soft); filter: none; box-shadow: none; }
button.danger { background: var(--coral); color: #fff; }
.editor { max-width: 42rem; }
.editor h2 { margin: 1.15rem 0 0; font-size: 1.15rem; }
.actions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }

.inline { display: inline; }
.inline-form { margin-bottom: 0.8rem; }

/* Quote / folio ----------------------------------------------------------- */
.quote { padding: 0.9rem 1.1rem; background: var(--surface-2); margin-top: 0.4rem; }
.quote p, .total { display: flex; justify-content: space-between; gap: 1rem; margin: 0.3rem 0; }
.quote p span:first-child { color: var(--ink-soft); }
.quote em { font-style: normal; color: var(--muted); font-size: 0.8rem; margin-left: 0.3rem; }
.total {
    font-weight: 700;
    border-top: 1px solid var(--line-strong);
    margin-top: 0.5rem;
    padding-top: 0.55rem;
    font-size: 1.05rem;
}
.code {
    font-size: 1.05rem;
    background: var(--accent-soft);
    color: var(--accent-strong);
    border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
    border-radius: var(--radius-sm);
    padding: 0.7rem 0.95rem;
    margin-top: 1rem;
}
.code strong { font-family: var(--font-display); font-size: 1.4rem; letter-spacing: 0.04em; }
.code > p { margin: 0 0 0.3rem; font-size: 0.85rem; font-weight: 600; }
.code > strong {
    display: block;
    margin-bottom: 0.6rem;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 1.15rem;
    overflow-wrap: anywhere;
}

/* Definition lists -------------------------------------------------------- */
.detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem 1.5rem;
    margin: 1.25rem 0;
    padding: 1.1rem 1.25rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.detail dt { color: var(--muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; }
.detail dd { margin: 0; font-weight: 500; }

/* Score cards / meters ---------------------------------------------------- */
.score-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.score-card { padding: 1.1rem 1.2rem; box-shadow: var(--shadow-sm); }
.score-main { font-family: var(--font-display); font-size: 2.2rem; margin: 0.15rem 0 0.3rem; letter-spacing: -0.03em; line-height: 1; }
.score-main small { font-size: 1rem; color: var(--muted); font-family: var(--font-sans); }
.meter-row { display: grid; grid-template-columns: 8rem 1fr 3rem; gap: 0.5rem; align-items: center; font-size: 0.85rem; margin: 0.35rem 0; }
.meter-row span { color: var(--ink-soft); }
.meter-row em { font-style: normal; color: var(--muted); text-align: right; }
meter {
    width: 100%;
    height: 0.5rem;
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    border-radius: var(--pill);
    background: var(--surface-2);
    overflow: hidden;
}
meter::-webkit-meter-bar { background: var(--surface-2); border: 0; border-radius: var(--pill); height: 0.5rem; }
meter::-webkit-meter-optimum-value { background: var(--accent); border-radius: var(--pill); }
meter::-moz-meter-bar { background: var(--accent); border-radius: var(--pill); }

.review { padding: 1rem 1.15rem; margin-top: 0.75rem; box-shadow: var(--shadow-sm); }
.review p:last-child { margin-bottom: 0; }
.score-form { margin-bottom: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--line); }
.score-form:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }

/* Plain lists ------------------------------------------------------------- */
.plain { list-style: none; padding: 0; margin: 0.5rem 0; }
.plain li {
    padding: 0.65rem 0.2rem;
    border-bottom: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}
.plain li:last-child { border-bottom: 0; }

/* Calendar ---------------------------------------------------------------- */
.pager { gap: 0.5rem; align-items: center; }
.pager a {
    text-decoration: none;
    color: var(--ink);
    border: 1px solid var(--line-strong);
    border-radius: var(--pill);
    padding: 0.35rem 0.85rem;
    font-size: 0.9rem;
    font-weight: 500;
    background: var(--paper);
    transition: background-color .15s ease;
}
.pager a:hover { background: var(--surface-2); }

.legend { margin: 1rem 0; align-items: center; }
.weekdays, .month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.4rem; }
.weekdays {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 1rem;
    padding: 0 0.1rem;
}
.month { margin-top: 0.5rem; }
.day {
    min-height: 5.4rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 0.4rem;
    overflow: hidden;
    transition: border-color .15s ease;
}
.day:hover { border-color: var(--line-strong); }
.day.outside { opacity: 0.45; background: var(--surface-2); }
.day .num { font-size: 0.82rem; font-weight: 600; color: var(--ink-soft); }

.chip {
    display: inline-block;
    margin-top: 0.2rem;
    padding: 0.08rem 0.5rem;
    border-radius: var(--pill);
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.5;
    background: var(--surface-2);
    color: var(--ink-soft);
    border: 1px solid var(--line);
    text-transform: capitalize;
}
.chip.direct, .chip.confirmed {
    background: var(--accent-soft);
    color: var(--accent-strong);
    border-color: color-mix(in srgb, var(--accent) 25%, transparent);
}
.chip.hold, .chip.held {
    background: var(--hold);
    color: var(--amber);
    border-color: color-mix(in srgb, var(--amber) 30%, transparent);
}
.chip.block, .chip.cancelled {
    background: var(--coral-soft);
    color: var(--coral);
    border-color: color-mix(in srgb, var(--coral) 25%, transparent);
}
.chip.other, .chip.airbnb, .chip.vrbo, .chip.booking {
    background: var(--info-soft);
    color: var(--info);
    border-color: color-mix(in srgb, var(--info) 25%, transparent);
}
.chip.ical { background: var(--hold); color: var(--amber); border-color: color-mix(in srgb, var(--amber) 30%, transparent); }
.chip.review { background: var(--paper); }
.day.conflict { outline: 2px solid var(--coral); outline-offset: -2px; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }

/* Ask and guest book ------------------------------------------------------ */
.chat { margin-top: 1.15rem; }
#reply { scroll-margin-top: 7.5rem; }
.chat h2 { font-size: 1.35rem; }
.ask-starters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.85rem; }
.ask-starters button {
    background: var(--paper);
    color: var(--accent-strong);
    border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
    font-size: 0.92rem;
    text-align: left;
}
form.book.chat-form {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 0.55rem;
}
@media (max-width: 640px) {
    form.book.chat-form { grid-template-columns: 1fr; }
    form.book.chat-form > button { justify-self: start; }
    .ask-starters { flex-direction: column; align-items: flex-start; }
}
.chat textarea { min-height: 3.25rem; }
.chat-form button:disabled { opacity: 0.72; cursor: progress; }
.home-picks {
    list-style: none;
    padding: 0;
    margin: 0.4rem 0 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 0.55rem;
}
.home-picks li {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}
.home-picks a {
    display: block;
    padding: 0.75rem 0.9rem;
    color: inherit;
    text-decoration: none;
}
.home-picks .name { display: block; font-weight: 650; font-size: 1.05rem; color: var(--accent-strong); }
.home-picks a:hover .name { text-decoration: underline; }
.home-picks a span:last-child { display: block; margin-top: 0.15rem; color: var(--ink-soft); font-size: 0.92rem; }
.ask-fab {
    position: fixed;
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
    z-index: 40;
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: var(--accent);
    color: var(--on-accent);
    box-shadow: var(--shadow-lg);
    text-decoration: none;
    cursor: pointer;
}
.ask-fab svg { width: 1.55rem; height: 1.55rem; fill: currentColor; }
.ask-fab-name {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
}
.ask-fab:hover { filter: brightness(1.06); }
.ask-fab:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.ask-toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
}
.ask-panel {
    display: none;
    position: fixed;
    right: max(1rem, env(safe-area-inset-right));
    bottom: calc(5.1rem + env(safe-area-inset-bottom));
    z-index: 40;
    width: min(26rem, calc(100vw - 1.5rem));
    max-height: min(32rem, calc(100dvh - 7.5rem));
    overflow: auto;
    margin: 0;
    padding: 0.85rem 1rem 1rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
}
.ask-toggle:checked ~ .ask-panel { display: block; }
.ask-panel-bar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.ask-panel h2 { margin: 0; font-size: 1.25rem; }
.ask-close {
    color: var(--accent-strong);
    font-size: 0.92rem;
    font-weight: 650;
    cursor: pointer;
}
.ask-panel .chat-log { max-height: min(20rem, 42dvh); overflow: auto; }
.ask-panel form.book.chat-form { grid-template-columns: 1fr; }
.ask-panel textarea { min-height: 3.25rem; }
.chat-log { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 0.65rem; }
.chat-log li { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.75rem 0.9rem; background: var(--paper); }
.chat-log li.you { margin-left: 14%; background: var(--accent-soft); border-color: transparent; }
.chat-log li.agent { border-left: 3px solid var(--accent); }
.chat-log .who { display: block; font-weight: 650; font-size: 0.75rem; color: var(--muted); margin-bottom: 0.25rem; }
.chat-log p { white-space: pre-wrap; margin: 0; }
.chat-log a { font-weight: 650; }
.pre { white-space: pre-wrap; margin: 0 0 0.7rem; }

/* Tables ------------------------------------------------------------------ */
.stays {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    display: block;
    overflow-x: auto;
}
.stays th, .stays td { text-align: left; padding: 0.7rem 0.75rem; border-bottom: 1px solid var(--line); vertical-align: top; white-space: nowrap; }
.stays thead th {
    background: var(--surface-2);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    font-weight: 650;
    position: sticky;
    top: 0;
}
.stays tbody tr:last-child td { border-bottom: 0; }
.stays tbody tr:hover td { background: color-mix(in srgb, var(--accent-soft) 45%, transparent); }
.stays a { font-weight: 600; }

/* Office shell ------------------------------------------------------------ */
body.office-body {
    --bg: #f4f6f8;
    --paper: #ffffff;
    --surface-2: #eef2f5;
    --ink: #1b2430;
    --ink-soft: #3d4856;
    --muted: #667385;
    --line: #e3e8ee;
    --line-strong: #d3dae3;
    --accent: #0c7f78;
    --accent-strong: #0a655f;
    --accent-soft: #e6f5f3;
    --field-bg: #ffffff;
    --radius: 12px;
    --radius-sm: 10px;
    --radius-xs: 8px;
    --pill: 8px;
    --font-display: var(--font-sans);
    --shadow-sm: 0 1px 2px rgb(16 24 40 / 5%);
    --shadow-md: 0 8px 24px rgb(16 24 40 / 8%);
    height: 100dvh;
    overflow: hidden;
    color: var(--ink);
    background: var(--bg);
    letter-spacing: 0;
}
.nav-toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
}
.shell {
    display: grid;
    grid-template-columns: 12.5rem minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
        "bar bar"
        "side canvas";
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
}
.shell-wide {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "bar"
        "canvas";
}
.nav-open, .nav-backdrop, .drawer, .phone-bar { display: none; }
.drawer, .nav-backdrop { grid-area: bar; }
.app-bar {
    grid-area: bar;
    position: relative;
    z-index: 20;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.75rem;
    min-height: 3.15rem;
    min-width: 0;
    padding: 0 0.85rem 0 1rem;
    border-bottom: 1px solid var(--line);
    background: var(--paper);
}
.app-bar .brand,
.app-meta,
.guest-jump,
.head-out {
    display: flex;
    align-items: center;
    flex: none;
}
.app-bar .brand {
    font-family: var(--font-sans);
    font-size: 0.98rem;
    font-weight: 650;
}
.head-nav {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.1rem;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.head-nav::-webkit-scrollbar { display: none; }
.head-nav > a {
    display: inline-flex;
    align-items: center;
    flex: none;
    color: var(--ink-soft);
    text-decoration: none;
    padding: 0 0.72rem;
    border-radius: 0;
    box-shadow: inset 0 -2px 0 transparent;
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
}
.head-nav > a:hover { color: var(--ink); }
.head-nav > a[aria-current="page"] {
    color: var(--accent-strong);
    box-shadow: inset 0 -2px 0 var(--accent);
}
.guest-jump {
    gap: 0.1rem;
}
.guest-jump a {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    color: var(--muted);
    text-decoration: none;
    padding: 0.3rem 0.45rem;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 550;
    white-space: nowrap;
}
.guest-jump a:hover { background: var(--surface-2); color: var(--ink); }
.app-meta {
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    margin-left: auto;
}
.app-title {
    display: none;
    margin: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.92rem;
    font-weight: 650;
    letter-spacing: -0.01em;
}
.app-who {
    margin: 0;
    max-width: 9rem;
    overflow: hidden;
    color: var(--muted);
    font-size: 0.82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.head-out { margin: 0; }
.head-out button {
    padding: 0.4rem 0.8rem;
    font-size: 0.86rem;
}
.side {
    grid-area: side;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    padding: 0.55rem 0.45rem 0.7rem;
    border-right: 1px solid var(--line);
    background: var(--paper);
    overflow: hidden;
}
.side nav, .drawer nav {
    display: grid;
    align-content: start;
    gap: 0.12rem;
    flex: 1;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
}
.side nav a, .drawer nav a {
    display: flex;
    align-items: center;
    min-height: 1.85rem;
    color: var(--ink-soft);
    text-decoration: none;
    padding: 0.28rem 0.55rem;
    border-radius: 6px;
    font-weight: 500;
    font-size: 0.86rem;
}
.side nav a:hover, .drawer nav a:hover { background: var(--surface-2); color: var(--ink); }
.side nav a[aria-current="page"], .drawer nav a[aria-current="page"] {
    background: var(--accent-soft);
    color: var(--accent-strong);
    font-weight: 650;
    box-shadow: inset 2px 0 0 var(--accent);
}
.side .nav-label:first-child { margin-top: 0.15rem; }
.drawer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 0.85rem 0.35rem;
}
.drawer-top p {
    margin: 0;
    font-weight: 650;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nav-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0 0.85rem;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--paper);
    font-weight: 650;
    cursor: pointer;
}
.side-foot {
    flex: none;
    margin: 0;
    padding: 0.7rem 0.15rem 0.15rem;
    border-top: 1px solid var(--line);
}
.side-foot button { width: 100%; }
.canvas {
    grid-area: canvas;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    height: 100%;
    background: var(--bg);
}
.app-scroll {
    flex: 1;
    min-height: 0;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
}
.office-body .app-scroll main {
    max-width: 76rem;
    margin: 0;
    padding: 1.15rem 1.35rem 2.5rem;
}
.office-body .app-scroll h1 {
    font-family: var(--font-sans);
    font-weight: 650;
    font-size: 1.35rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 0 0 0.35rem;
}
.office-body .app-scroll h2 {
    font-family: var(--font-sans);
    font-weight: 650;
    font-size: 0.98rem;
    line-height: 1.25;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--ink);
    margin: 0 0 0.55rem;
}
.office-body .app-scroll .note {
    font-size: 0.84rem;
    line-height: 1.45;
}
.office-body .app-scroll main > section:not(.directory),
.office-body .app-scroll .split > section,
.office-body .app-scroll .ops-board > section {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 0.95rem 1.05rem 1rem;
    margin: 0 0 0.8rem;
    box-shadow: var(--shadow-sm);
}
.office-body .app-scroll .sheet {
    margin-top: 0;
    box-shadow: var(--shadow-sm);
}
.office-body .app-scroll .split { align-items: stretch; }
.status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 0.65rem;
    list-style: none;
    padding: 0;
    margin: 0.85rem 0 1rem;
}
.status-grid li {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 0.75rem 0.85rem;
    box-shadow: var(--shadow-sm);
    color: var(--ink);
    font-size: 0.92rem;
    line-height: 1.35;
}
.status-grid span {
    display: block;
    margin-bottom: 0.2rem;
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.home-summary {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    gap: 0.95rem;
    align-items: center;
}
.home-summary img,
.home-summary .mark {
    width: 7.5rem;
    height: 5.5rem;
    object-fit: cover;
    border-radius: 12px;
}
.home-summary .meta,
.home-summary .home-links { margin: 0.15rem 0 0; }
.home-summary .home-links { font-size: 0.92rem; }
.section-tabs {
    position: sticky;
    top: 0;
    z-index: 4;
    display: flex;
    gap: 0.15rem;
    overflow-x: auto;
    margin: 0;
    padding: 0 1.15rem;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    scrollbar-width: thin;
}
.section-tabs a {
    flex: none;
    display: inline-flex;
    align-items: center;
    min-height: 2.55rem;
    margin-bottom: -1px;
    text-decoration: none;
    color: var(--muted);
    border-bottom: 2px solid transparent;
    padding: 0.35rem 0.7rem;
    font-size: 0.86rem;
    font-weight: 650;
    white-space: nowrap;
}
.section-tabs a:hover { color: var(--ink); }
.section-tabs a[aria-current="page"] {
    color: var(--accent-strong);
    border-bottom-color: var(--accent);
}
.office-body .book,
.office-body form.module-card {
    max-width: 36rem;
}
.office-body form.book.editor { max-width: 44rem; }
.office-body section .module {
    background: var(--surface-2);
    box-shadow: none;
}
.office-body .book > button,
.office-body form.book button,
.office-body .module button {
    width: fit-content;
    max-width: 100%;
    justify-self: start;
}
.module {
    max-width: 36rem;
    margin: 0.85rem 0 0;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
}
.module > summary {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 2.75rem;
    padding: 0.55rem 0.9rem;
    cursor: pointer;
    font-weight: 650;
    list-style: none;
}
.module > summary::-webkit-details-marker { display: none; }
.office-body details.module:not([open]) > :not(summary) { display: none; }
.module > summary::before {
    content: "";
    width: 0.7rem;
    height: 0.7rem;
    flex: none;
    background:
        linear-gradient(var(--accent), var(--accent)) center / 2px 0.7rem no-repeat,
        linear-gradient(var(--accent), var(--accent)) center / 0.7rem 2px no-repeat;
}
.module[open] > summary::before {
    background: linear-gradient(var(--muted), var(--muted)) center / 0.7rem 2px no-repeat;
}
.module > .book,
.office-body .module > form.book {
    margin: 0;
    padding: 0 0.9rem 0.95rem;
    max-width: none;
    background: transparent;
    border: 0;
    box-shadow: none;
}
.office-body form.module-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 0.95rem 1rem 1rem;
    margin: 0 0 0.75rem;
    box-shadow: var(--shadow-sm);
}
.office-body .action-grid {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    max-width: 36rem;
}
.office-body .action-grid form.module-card {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.55rem 0.75rem;
    max-width: none;
    margin: 0;
    padding: 0.75rem 0.85rem;
    background: transparent;
    border-style: dashed;
    box-shadow: none;
}
.office-body .action-grid form.module-card .note,
.office-body .action-grid form.module-card label {
    flex: 1 1 14rem;
    margin: 0;
}
.office-body .action-grid form.module-card button { margin-left: auto; }
.work-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr));
    gap: 0.65rem;
    list-style: none;
    padding: 0;
    margin: 0.85rem 0 0;
}
.work-grid a {
    display: block;
    height: 100%;
    text-decoration: none;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 0.8rem 0.9rem 0.9rem;
    box-shadow: var(--shadow-sm);
}
.work-grid a:hover { border-color: var(--accent); }
.work-grid strong {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.98rem;
}
.work-grid span {
    color: var(--muted);
    font-size: 0.84rem;
    line-height: 1.35;
}

/* Sign-in & guest entry --------------------------------------------------- */
.auth-head { text-align: center; margin-bottom: 0.9rem; }
.auth-mark {
    display: block;
    width: 2.75rem;
    height: 2.75rem;
    margin: 0 auto 0.7rem;
    border-radius: 12px;
    box-shadow: var(--shadow-md);
}
.auth-head h1 { margin: 0.1rem 0 0; }
.auth-steps {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0 0 1.1rem;
}
.auth-steps li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.7rem 0.25rem 0.3rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 600;
}
.auth-steps li span {
    display: grid;
    place-items: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background: var(--surface-2);
    font-size: 0.75rem;
}
.auth-steps li.active { color: var(--accent-strong); border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: var(--accent-soft); }
.auth-steps li.active span { background: var(--accent); color: var(--on-accent); }
.auth-steps li.done { color: var(--accent-strong); }
.auth-steps li.done span { background: var(--accent-soft); color: var(--accent-strong); }
.auth-guide { margin: 0 0 0.9rem; padding-left: 1.2rem; color: var(--ink-soft); }
.auth-guide li { margin-bottom: 0.35rem; }
.auth-guide li::marker { color: var(--accent-strong); font-weight: 700; }
.signin .qr svg { margin: 0 auto; }
.auth-manual {
    margin: 0 0 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 0.55rem 0.8rem;
    background: var(--surface-2);
}
.auth-manual summary { cursor: pointer; font-weight: 600; color: var(--accent-strong); font-size: 0.92rem; }
.auth-manual .manual-key { margin: 0.6rem 0; font-size: 1.02rem; }
.auth-manual-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.auth-manual-actions button, .auth-manual-actions .button { padding: 0.4rem 0.9rem; font-size: 0.9rem; }
.key-copy.ok { color: var(--accent-strong); border-color: var(--accent); }
.otp-input {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 1.65rem;
    font-weight: 600;
    letter-spacing: 0.45em;
    text-align: center;
    padding: 0.6rem 0.4rem 0.6rem 0.85rem;
}
.otp-input::placeholder { letter-spacing: 0.45em; color: var(--line-strong); }
.code-input {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.code-input::placeholder { text-transform: none; letter-spacing: 0.02em; font-family: var(--font-sans); font-size: 1rem; }
.pw-field { position: relative; display: block; }
.pw-field input { padding-right: 4.2rem; }
.pw-field .pw-toggle {
    position: absolute;
    top: 50%;
    right: 0.35rem;
    transform: translateY(-50%);
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
    background: transparent;
    color: var(--accent-strong);
    font-size: 0.82rem;
    font-weight: 650;
}
.pw-field .pw-toggle:hover { background: var(--accent-soft); filter: none; box-shadow: none; }
.pw-field .pw-toggle:active { transform: translateY(-50%); }
.field-hint { display: block; color: var(--muted); font-size: 0.8rem; font-weight: 450; }
.field-row { margin: -0.2rem 0 0; text-align: right; font-size: 0.88rem; }
.optional { color: var(--muted); font-weight: 450; font-size: 0.78rem; }
.auth-back { margin: 0.9rem 0 0; text-align: center; font-size: 0.92rem; }
.auth-or {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.1rem 0 0.9rem;
    color: var(--muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
a.button.auth-alt-button { display: block; text-align: center; }
.auth-alt-hint { text-align: center; margin: 0.5rem 0 0; }
.site-foot { flex-wrap: wrap; }

/* Guest stay -------------------------------------------------------------- */
.guest-answers { max-width: 44rem; margin: 2rem auto 0; }
.trip { display: grid; gap: 1rem; max-width: 44rem; margin: 0.5rem auto 0; }
.trip-hero {
    position: relative;
    padding: 1.4rem 1.4rem 1.2rem;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: linear-gradient(165deg, #ffe4b8 0%, #fff1e2 48%, #d7f3ee 100%);
    box-shadow: var(--shadow-md);
}
.trip-hero h1 { margin: 0.15rem 0 0.35rem; }
.trip-dates { margin: 0 0 0.6rem; font-size: 1.08rem; font-weight: 600; color: var(--ink); }
.trip-dates span { color: var(--ink-soft); font-weight: 500; white-space: nowrap; }
.trip-hero .chip { font-size: 0.78rem; padding: 0.15rem 0.65rem; }
.trip-times { display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem; margin-top: 1rem; }
.trip-times > div {
    background: color-mix(in srgb, var(--paper) 82%, transparent);
    border: 1px solid color-mix(in srgb, var(--paper) 60%, var(--line));
    border-radius: var(--radius-sm);
    padding: 0.7rem 0.85rem;
}
.trip-times span { display: block; color: var(--muted); font-size: 0.72rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.06em; }
.trip-times strong { display: block; font-family: var(--font-display); font-size: 1.5rem; line-height: 1.15; }
.trip-times em { display: block; font-style: normal; color: var(--ink-soft); font-size: 0.82rem; margin-top: 0.15rem; }
.todo {
    display: block;
    padding: 0.85rem 1rem;
    border-radius: var(--radius-sm);
    background: var(--hold);
    border: 1px solid color-mix(in srgb, var(--amber) 30%, transparent);
    color: var(--ink);
    text-decoration: none;
}
.todo strong { display: block; }
.todo strong::after { content: " →"; color: var(--amber); }
.todo span { color: var(--ink-soft); font-size: 0.88rem; }
.todo:hover { border-color: var(--amber); }
.trip-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.15rem 1.25rem 1.2rem;
    box-shadow: var(--shadow-sm);
    scroll-margin-top: 5rem;
}
.trip-card h2 { margin: 0 0 0.7rem; font-size: 1.3rem; }
.trip-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem 1.25rem; margin: 0 0 0.8rem; }
.trip-list div { display: grid; gap: 0.15rem; }
.trip-list dt { color: var(--muted); font-size: 0.72rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.06em; }
.trip-list dd { margin: 0; font-weight: 550; }
.trip-card .chat-log { margin-bottom: 0.9rem; }
.trip-card .book > button { justify-self: start; }
.profile-form fieldset {
    margin: 0;
    padding: 0.85rem 0 0.2rem;
    border: 0;
    border-top: 1px solid var(--line);
    display: grid;
    gap: 0.7rem;
}
.profile-form fieldset:first-of-type { border-top: 0; padding-top: 0.2rem; }
.profile-form legend {
    padding: 0;
    margin-bottom: 0.15rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--accent-strong);
}
@media (max-width: 560px) {
    .trip-list { grid-template-columns: 1fr; }
    .trip-hero { padding: 1.15rem 1rem 1rem; }
    .otp-input { font-size: 1.4rem; letter-spacing: 0.35em; }
}

/* Office roles ------------------------------------------------------------ */
.office-body .role-card { max-width: 44rem; }
.role-card .role-count { margin-left: auto; color: var(--muted); font-weight: 500; font-size: 0.84rem; }
.role-body { padding: 0 0.9rem 0.95rem; }
.role-body > .note { margin: 0 0 0.6rem; }
.office-body .role-body form.role-form { max-width: none; }
.perm-group {
    display: grid;
    gap: 0.55rem;
    margin: 0.35rem 0 0;
    padding: 0.7rem 0 0.25rem;
    border: 0;
    border-top: 1px solid var(--line);
}
.perm-group legend {
    padding: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--accent-strong);
}
.book label.check.perm { font-size: 0.92rem; }
.perm span { display: grid; gap: 0.1rem; }
.perm strong { font-weight: 600; }
.perm small { color: var(--muted); font-weight: 450; font-size: 0.8rem; }
.perm.locked { opacity: 0.55; }
.perm-later {
    margin-left: 0.45rem;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--muted);
    font-style: normal;
    font-weight: 600;
    font-size: 0.7rem;
    vertical-align: 1px;
}
.role-list dd { color: var(--ink-soft); }
.role-tag {
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent-strong);
    font-size: 0.7rem;
    font-weight: 650;
}
.role-rename {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem 0.75rem;
    margin: 0 0 0.6rem;
}
.role-rename label {
    display: grid;
    gap: 0.25rem;
    flex: 1 1 14rem;
    font-size: 0.82rem;
    font-weight: 550;
    color: var(--ink-soft);
}
.role-delete { margin-top: 0.85rem; padding-top: 0.75rem; border-top: 1px solid var(--line); }
.office-body form.assistant-switch {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
}
.assistant-switch p { margin: 0; }
.people-role { display: flex; gap: 0.4rem; align-items: center; }
.people-role select { width: auto; min-width: 9rem; padding: 0.3rem 0.5rem; font-size: 0.86rem; }
.people-role button { padding: 0.3rem 0.7rem; font-size: 0.82rem; }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 1080px) {
    .office-body .app-who { display: none; }
}

@media (max-width: 960px) {
    .profile, .score-grid, .split, .detail, .ops-board { grid-template-columns: 1fr; }
    .book-card { position: static; }
    .finder { grid-template-columns: 1fr 1fr; border-radius: 24px; padding: 0.8rem; }
    .finder label:first-child, .finder button { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
    .shell, .shell-wide {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "bar"
            "canvas"
            "phone";
    }
    .side, .head-nav, .head-out, .guest-jump, .app-who { display: none; }
    .app-title { display: block; }
    .drawer { overflow: auto; }
    .drawer nav { overflow: visible; flex: none; }
    .drawer nav a { min-height: 2.75rem; font-size: 0.95rem; }
    .nav-open {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 2.75rem;
        min-height: 2.75rem;
        padding: 0 0.8rem;
        border: 1px solid var(--line-strong);
        border-radius: 999px;
        background: var(--paper);
        font-weight: 650;
        font-size: 0.86rem;
        cursor: pointer;
    }
    .app-bar {
        align-items: center;
        flex-wrap: nowrap;
        gap: 0.55rem;
        padding: max(0.4rem, env(safe-area-inset-top)) 0.75rem 0.4rem;
    }
    .app-meta { margin-left: 0; flex: 1; }
    .drawer {
        display: flex;
        flex-direction: column;
        position: fixed;
        z-index: 40;
        top: 0;
        bottom: 0;
        left: 0;
        width: min(20rem, calc(100vw - 3.25rem));
        padding: max(0.35rem, env(safe-area-inset-top)) 0.7rem max(0.7rem, env(safe-area-inset-bottom));
        background: var(--paper);
        border-right: 1px solid var(--line);
        transform: translateX(-105%);
        visibility: hidden;
        transition: transform .18s ease;
    }
    .nav-toggle:checked ~ .shell .drawer {
        transform: translateX(0);
        visibility: visible;
    }
    .nav-toggle:checked ~ .shell .nav-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 30;
        background: rgb(44 36 28 / 38%);
    }
    .phone-bar {
        display: grid;
        grid-area: phone;
        position: static;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        border-top: 1px solid var(--line);
        background: var(--paper);
        padding-bottom: env(safe-area-inset-bottom);
        z-index: 15;
    }
    .phone-bar a, .phone-bar label {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 3.35rem;
        padding: 0.35rem 0.15rem;
        color: var(--ink-soft);
        font-size: 0.78rem;
        font-weight: 650;
        text-align: center;
        text-decoration: none;
        cursor: pointer;
    }
    .phone-bar a[aria-current="page"], .nav-toggle:checked ~ .shell .phone-bar label {
        color: var(--accent-strong);
        box-shadow: inset 0 2px 0 var(--accent);
    }
    .office-body .app-scroll main { padding: 1rem 0.9rem 2rem; }
    .home-summary { grid-template-columns: 1fr; }
    .meter-row { grid-template-columns: 7rem 1fr 2.5rem; }
    .day { min-height: 3.6rem; }
    .day .chip { display: block; margin-top: 0.15rem; }
}

@media (max-width: 560px) {
    .top { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
    .top nav { flex-wrap: wrap; }
    .top nav a { display: inline-flex; align-items: center; min-height: 2.75rem; }
    .pair { grid-template-columns: 1fr; }
    .weekdays { font-size: 0.62rem; }
    .day .num { font-size: 0.72rem; }
}

/* Answers ----------------------------------------------------------------- */
.answers { margin-top: 2rem; }
.answers h3 {
    font-family: var(--font-display);
    font-weight: 560;
    font-size: 1.2rem;
    text-transform: none;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin: 1.25rem 0 0.35rem;
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Guest assistant, alerts, and money approvals */
.chip.waiting, .chip.pending { background: var(--hold); color: var(--amber); border-color: color-mix(in srgb, var(--amber) 30%, transparent); text-transform: none; }
.chip.urgent, .chip.declined, .chip.failed { background: var(--coral-soft); color: var(--coral); border-color: color-mix(in srgb, var(--coral) 25%, transparent); text-transform: none; }
.chip.approved { background: var(--accent-soft); color: var(--accent-strong); border-color: color-mix(in srgb, var(--accent) 25%, transparent); text-transform: none; }
.chip.withdrawn { text-transform: none; }
.module-card.escalation { border-left: 4px solid var(--amber); background: color-mix(in srgb, var(--hold) 45%, var(--surface, transparent)); }
.module-card.escalation.urgent { border-left-color: var(--coral); background: color-mix(in srgb, var(--coral-soft) 60%, var(--surface, transparent)); }
.module-card.escalation p { margin: 0 0 0.5rem; }
.assist-note { margin-top: 0.25rem; font-style: italic; }
.table-scroll { overflow-x: auto; max-width: 100%; margin: 0 0 1rem; }
.alert-table td { vertical-align: middle; }
.alert-table td:nth-child(n+3), .alert-table th:nth-child(n+3) { text-align: center; }
.alert-table input[type="checkbox"] { width: 1.15rem; height: 1.15rem; }
.alert-table input:not([type]) { min-width: 10rem; }
.alert-table .note { white-space: normal; }
.knowledge-card summary { cursor: pointer; }
.knowledge-answer { white-space: pre-line; }
.approval-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.approval-list li { margin-bottom: 0.5rem; }
form.inline input[name="reason"] { max-width: 14rem; padding: 0.3rem 0.5rem; }