/* Paper theme — the whole app (index.html sets body.paper). Loaded after styles.css.
The idea: a marked-up page. Warm off-white paper with grain, near-black ink, and pastel
highlighter colours for anything that carries meaning or can be pressed. A highlight at
rest is pastel; pressed, selected or active it becomes the saturated version of the same
hue. Text on every highlight stays the dark ink, which keeps contrast above 4.5:1 on
both the pastel and the saturated tone.
Everything is re-tokened first; the rules below cover what the tokens cannot reach
(hardcoded colours, condensed-uppercase headings, photo backgrounds). */
@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Inter:wght@300..600&display=swap");
html:has(body.paper) { background: #fbf5ec; }
body.paper {
--ink: #26221d;
--night: #26221d;
--paper: #fbf5ec;
--paper-bright: #fffaf2;
--citrus: #f8e3a0;
--citrus-deep: #f2cc55;
--blue: #4b3f8f;
--blue-soft: #ece6f7;
--aurora-pink: #f3b9b1;
--aurora-lilac: #d6cdee;
--muted: #655c50;
--line: #ece3d5;
--line-dark: #b5a996;
--shadow: 0 1px 2px rgba(70, 52, 30, 0.14), 0 16px 36px rgba(70, 52, 30, 0.12);
--display: "Inter", "Google Sans Flex", system-ui, sans-serif;
--body: "Inter", "Google Sans Flex", system-ui, sans-serif;
--mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;
--key: linear-gradient(180deg, #fffbf4 0%, #f5ede0 100%);
--key-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(70, 52, 30, 0.08), 0 1px 2px rgba(70, 52, 30, 0.2), 0 5px 12px rgba(70, 52, 30, 0.08);
--sheet-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 1px 2px rgba(70, 52, 30, 0.12), 0 14px 34px rgba(70, 52, 30, 0.1);
background: var(--paper);
letter-spacing: -0.005em;
}
body.paper, body.paper * { scrollbar-color: var(--line-dark) transparent; }
/* Paper grain over everything, dialogs included. */
body.paper::after {
content: "";
position: fixed;
inset: 0;
z-index: 200;
pointer-events: none;
opacity: 0.4;
mix-blend-mode: multiply;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .27 0 0 0 0 .17 0 0 0 .55 -.18'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* ---------- Type ---------- */
body.paper :is(.brand-word, .topline h1, .panel-title, .setup-main h1, .owner-header h1, .month-title, .month-picker-trigger, .month-static, .setup-range-month h3, .agenda-day h3, .mobile-day strong, .mobile-agenda-body h3, .calendar-empty h3, .owner-event-overview h2, .bookings-empty h2, .stat-line strong, .dialog h2, .source-option strong, .event-date span) {
font-family: var(--display);
font-weight: 400;
line-height: 1.08;
letter-spacing: -0.035em;
text-transform: none;
}
body.paper :is(.field label, .label, .party-field legend, .weekday, .sync-line, .legend, .utility-meta, .range-trigger small, .setup-range-selects label, .setup-range-summary small, .setup-range-weekdays span, .quick-add span, .owner-side-section h2, .stat-line span, .event-date, .privacy-line, .landing-meta, .setup-range-head strong) {
font-family: var(--mono);
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
}
body.paper .brand-word { font-size: 20px; font-weight: 600; }
body.paper .brand-stamp { padding: 4px 8px; border: 1px solid var(--line-dark); border-radius: 999px; background: transparent; color: var(--muted); font: 500 9px/1 var(--mono); letter-spacing: 0.1em; transform: none; }
body.paper .owner-header h1 { font-size: clamp(34px, 4.2vw, 54px); font-weight: 300; letter-spacing: -0.045em; }
body.paper .owner-header p { font-size: 14px; }
body.paper :is(.month-title, .month-picker-trigger, .month-static) { font-size: 22px; font-weight: 500; }
body.paper .setup-main h1 { font-size: clamp(40px, 5vw, 64px); font-weight: 300; letter-spacing: -0.045em; }
body.paper .dialog h2 { font-size: 30px; }
body.paper .owner-event-overview h2 { font-size: 30px; margin-bottom: 14px; }
body.paper :is(.calendar-empty h3, .bookings-empty h2) { font-size: 26px; }
body.paper .booking-host-overview h2 { font-size: 28px; }
body.paper .source-option strong { font-size: 20px; font-weight: 500; }
body.paper .setup-range-month h3 { font-size: 18px; font-weight: 500; }
body.paper .agenda-day h3 { font-size: 16px; font-weight: 500; letter-spacing: -0.01em; }
body.paper .mobile-day strong { font-size: 20px; }
body.paper .mobile-agenda-body h3 { font-size: 22px; }
/* ---------- Keys: anything pressable ---------- */
body.paper .btn { border-radius: 11px; border-color: rgba(70, 52, 30, 0.22); background: var(--key); box-shadow: var(--key-shadow); font-weight: 500; padding-inline: 15px; }
body.paper .btn:hover { background: linear-gradient(180deg, #fffdf8, #f6eee2); color: var(--ink); transform: translateY(-1px); }
body.paper .btn:active { transform: translateY(1px); box-shadow: inset 0 1px 3px rgba(70, 52, 30, 0.22); }
body.paper .btn-primary { background: linear-gradient(180deg, #b0ba4a, #96a136); border-color: rgba(70, 52, 30, 0.35); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(70, 52, 30, 0.16), 0 1px 2px rgba(70, 52, 30, 0.28), 0 6px 14px rgba(70, 52, 30, 0.1); }
body.paper .btn-primary:hover { background: linear-gradient(180deg, #b9c353, #9da83b); }
body.paper .btn-dark { background: var(--ink); color: var(--paper-bright); }
body.paper .btn-dark:hover { background: #3a342c; color: var(--paper-bright); }
body.paper .btn-quiet { background: transparent; border-color: transparent; box-shadow: none; }
body.paper .btn-quiet:hover { background: rgba(70, 52, 30, 0.08); }
body.paper .btn-danger { border-color: #e9a59b; }
body.paper .btn-danger:hover { background: var(--error); color: #fff; }
body.paper .btn[disabled] { transform: none; }
body.paper .icon-btn { border-radius: 10px; border-color: rgba(70, 52, 30, 0.2); background: var(--key); box-shadow: var(--key-shadow); }
body.paper .icon-btn:hover { background: linear-gradient(180deg, #fffdf8, #f6eee2); color: var(--ink); }
/* ---------- Top bar ---------- */
body.paper .utility { background: transparent; color: var(--ink); border-bottom: 1px solid rgba(70, 52, 30, 0.2); }
body.paper .role-switch { background: rgba(70, 52, 30, 0.1); box-shadow: inset 0 1px 2px rgba(70, 52, 30, 0.16); }
body.paper .role-switch button { color: var(--muted); font-weight: 500; }
body.paper .role-switch button.active { background: var(--key); color: var(--ink); box-shadow: var(--key-shadow); }
body.paper .utility-meta { color: var(--ink); font-size: 11px; letter-spacing: 0.06em; }
body.paper .utility-meta small { color: var(--muted); }
body.paper .utility-meta .icon { color: var(--ink); }
body.paper .owner-menu-trigger { border-color: rgba(70, 52, 30, 0.22); border-radius: 10px; background: var(--key); box-shadow: var(--key-shadow); }
body.paper .owner-menu-trigger:hover, body.paper .owner-menu-trigger[aria-expanded="true"] { background: linear-gradient(180deg, #fffdf8, #f6eee2); }
body.paper .owner-menu-backdrop, body.paper .dialog-backdrop, body.paper .setup-range-backdrop { background: rgba(70, 52, 30, 0.42); }
/* Drawer motion: a longer, decelerating slide with a slight fade, the backdrop easing in
alongside it, and the menu items settling a beat after the panel. */
body.paper .owner-menu-backdrop { transition: opacity 0.36s ease-out; }
body.paper .owner-menu-panel { border-right-color: var(--line-dark); opacity: 0; transition: transform 0.46s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease-out, visibility 0s linear 0.46s; visibility: hidden; box-shadow: 0 0 0 rgba(70, 52, 30, 0); }
body.paper .owner-menu-panel.open { opacity: 1; visibility: visible; transition-delay: 0s; box-shadow: 18px 0 44px rgba(70, 52, 30, 0.16); }
body.paper .owner-menu-panel > button, body.paper .owner-menu-panel > .nav-divider { opacity: 0; transform: translateX(-10px); transition: opacity 0.3s ease-out, transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.16s ease-out; }
body.paper .owner-menu-panel.open > button, body.paper .owner-menu-panel.open > .nav-divider { opacity: 1; transform: none; transition-delay: 0.1s, 0.1s, 0s; }
/* The close button is an icon button, not a full-width menu row. */
body.paper .owner-menu-head .icon-btn { width: 40px; min-height: 40px; padding: 0; justify-content: center; }
body.paper .owner-menu-panel button { border-radius: 10px; font-weight: 500; }
/* ---------- Sign-in ---------- */
body.paper .auth-shell { display: flex; flex-direction: column; min-height: 100vh; padding: clamp(20px, 3vw, 36px) clamp(20px, 4vw, 52px); background: transparent; }
body.paper .landing-meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--muted); font-size: 11px; }
body.paper .landing-meta .brand { color: var(--ink); }
body.paper .landing-body { flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: 48px 0; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; gap: clamp(32px, 6vw, 96px); }
body.paper .landing-copy h1 { margin: 16px 0 18px; font: 300 clamp(44px, 6.2vw, 86px) / 1 var(--display); letter-spacing: -0.05em; text-wrap: balance; }
body.paper .landing-copy > p:not(.label):not(.privacy-line) { max-width: 34ch; margin: 0; color: var(--muted); font-size: 17px; line-height: 1.5; }
body.paper .landing-copy .label { margin: 0; color: var(--muted); font-size: 11px; }
body.paper .google-btn { width: auto; min-height: 56px; margin-top: 34px; padding: 0 24px 0 18px; border: 1px solid rgba(70, 52, 30, 0.22); border-radius: 14px; background: var(--key); box-shadow: var(--key-shadow); font-weight: 500; font-size: 16px; }
body.paper .google-btn:hover { transform: translateY(-1px); background: linear-gradient(180deg, #fffdf8, #f6eee2); box-shadow: var(--key-shadow); }
body.paper .google-btn:active { transform: translateY(1px); box-shadow: inset 0 1px 3px rgba(70, 52, 30, 0.22); }
body.paper .google-mark { border-width: 3px; }
body.paper .privacy-line { margin-top: 16px; text-align: left; font-size: 10px; }
/* A stair of calendar keys: open evenings in olive, leading up to "Join". */
body.paper .landing-keys { width: min(100%, 470px); aspect-ratio: 4 / 3; justify-self: center; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); }
body.paper .key { position: relative; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, 0.75); border-radius: 9px; background: #f4ecdf; box-shadow: 0 1px 2px rgba(70, 52, 30, 0.25), 0 12px 26px rgba(70, 52, 30, 0.12); color: #26221d; font: 400 clamp(17px, 2.3vw, 28px) / 1 var(--display); letter-spacing: -0.03em; }
body.paper .key::before { content: ""; position: absolute; inset: 13%; border-radius: 12px; background: linear-gradient(180deg, #fffbf4, #f3eadc); box-shadow: inset 0 1px 0 #fff, 0 2px 3px rgba(70, 52, 30, 0.2), 0 -1px 0 rgba(255, 255, 255, 0.85); }
body.paper .key span { position: relative; }
body.paper .key.olive { background: #8e992d; border-color: rgba(255, 255, 255, 0.22); color: #26221d; }
body.paper .key.olive::before { background: linear-gradient(180deg, #a9b447, #939e31); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 2px 3px rgba(70, 52, 30, 0.3), 0 -1px 0 rgba(255, 255, 255, 0.25); }
body.paper .key-join { grid-area: 1 / 3 / 3 / 5; place-items: start; padding: 20% 0 0 22%; font-size: clamp(26px, 3.8vw, 46px); }
body.paper .key-join::before { inset: 7%; border-radius: 14px; }
body.paper .key-open { grid-area: 2 / 2; }
body.paper .key-d1 { grid-area: 3 / 1; }
body.paper .key-d2 { grid-area: 3 / 2; }
body.paper .key-d3 { grid-area: 3 / 3; }
body.paper .key-d4 { grid-area: 3 / 4; }
/* ---------- Trip setup ---------- */
body.paper .setup-side { background: transparent; color: var(--ink); border-right: 1px solid rgba(70, 52, 30, 0.2); }
body.paper .setup-main > p { color: var(--muted); font-size: 16px; }
body.paper .source-option { border-radius: 16px; border-color: rgba(70, 52, 30, 0.2); background: var(--key); box-shadow: var(--key-shadow); }
body.paper .source-option:hover { background: linear-gradient(180deg, #fffdf8, #f6eee2); border-color: rgba(70, 52, 30, 0.4); }
body.paper .source-option.selected { background: var(--blue-soft); border-color: var(--ink); box-shadow: inset 0 -5px 0 var(--citrus), 0 1px 2px rgba(70, 52, 30, 0.2); }
body.paper .source-option.selected .source-icon { background: var(--citrus); color: var(--ink); }
body.paper .trip-title-field { border-radius: 14px; border-color: var(--line-dark); background: rgba(255, 250, 242, 0.55); }
body.paper :is(.trip-range-input, .linked-calendar, .check-row) { border-radius: 11px; border-color: #cfc4b3; }
body.paper .trip-range-input { background: var(--key); box-shadow: var(--key-shadow); }
/* ---------- Fields ---------- */
body.paper :is(.field label, .label, .party-field legend) { font-size: 10px; color: var(--muted); }
body.paper :is(.field input, .field textarea, .field select, .setup-range-selects select) { border-radius: 10px; border-color: #cfc4b3; background: #fffdf9; box-shadow: inset 0 1px 2px rgba(70, 52, 30, 0.1); }
body.paper .trip-title-field input { border-color: #cfc4b3; }
body.paper .field input::placeholder, body.paper .field textarea::placeholder { color: #7d7366; }
body.paper .field input:focus, body.paper .field textarea:focus, body.paper .field select:focus { border-color: var(--blue); outline: 3px solid rgba(168, 149, 220, 0.5); }
body.paper .field input:disabled { color: #8a8073; background: #f1e9dd; border-color: var(--line); }
body.paper .timezone-auto input[readonly] { background: #f6efe4; }
body.paper :is(.timezone-results, .country-results, .city-results, .place-results, .month-menu) { border-color: var(--line-dark); border-radius: 12px; }
body.paper .format-hint { font-weight: 500; }
/* ---------- Host console ---------- */
body.paper .sync-line { font-size: 10px; margin-bottom: 10px; }
body.paper .sync-line.is-disconnected { color: #7a5a1a; }
body.paper :is(.calendar-wrap, .event-list) { border-top: 0; border-radius: 16px; box-shadow: var(--sheet-shadow); }
body.paper .event-list { overflow: hidden; margin-top: 24px; }
body.paper .calendar-wrap > .event-list { margin-top: 0; border-radius: 0 0 16px 16px; background: transparent; box-shadow: none; }
body.paper .icon-btn.active, body.paper .icon-btn.active:hover { background: var(--ink); color: var(--paper-bright); border-color: var(--ink); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35); }
body.paper .view-overview-btn { width: 38px; height: 38px; }
body.paper .view-overview-btn::after { border-radius: 7px; color: var(--paper-bright); font: 500 10px/1.2 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
body.paper .calendar-toolbar { border-bottom-color: var(--line); }
body.paper .month-picker-trigger[aria-expanded="true"] { color: var(--blue); }
body.paper .month-menu button { font-weight: 500; }
body.paper .range-trigger { border-radius: 11px; border-color: rgba(70, 52, 30, 0.2); background: var(--key); box-shadow: var(--key-shadow); }
body.paper .range-trigger:hover, body.paper .range-trigger[aria-expanded="true"] { background: linear-gradient(180deg, #fffdf8, #f6eee2); border-color: rgba(70, 52, 30, 0.4); }
body.paper .range-trigger strong { font-weight: 500; }
body.paper .range-trigger .range-change { font-weight: 500; }
body.paper .calendar-view-switch { border-radius: 10px; border-color: rgba(70, 52, 30, 0.2); overflow: hidden; }
body.paper .calendar-view-switch button { font-weight: 500; }
body.paper .calendar-view-switch button.active { color: var(--paper-bright); }
body.paper .legend { background: transparent; font-size: 10px; }
body.paper .legend-swatch { border-radius: 4px; border-color: rgba(70, 52, 30, 0.35); }
body.paper .legend-swatch.booked { background: #d6cdee; }
body.paper .legend-swatch.busy { background: repeating-linear-gradient(-45deg, #ece3d5 0 3px, #fffaf2 3px 6px); }
body.paper .weekday { font-size: 10px; }
body.paper .day-cell { background: transparent; }
body.paper .day-cell.muted { color: #a2978a; background: rgba(236, 227, 213, 0.3); }
body.paper .day-cell.out-of-range { background: rgba(236, 227, 213, 0.5); }
body.paper .calendar-week:last-child .day-cell { border-bottom: 0; }
body.paper .calendar-week:last-child .day-cell:first-child { border-bottom-left-radius: 16px; }
body.paper .calendar-week:last-child .day-cell:last-child { border-bottom-right-radius: 16px; }
body.paper .date-num { font-weight: 500; }
body.paper .slot { border-radius: 6px; font-weight: 600; }
body.paper .slot-open[data-owner-event], body.paper .agenda-slot.open[data-owner-event] { background: linear-gradient(180deg, #b0ba4a, #99a438); border-color: rgba(70, 52, 30, 0.25); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4); color: var(--ink); }
body.paper :is(.slot-booked, .agenda-slot.booked), body.paper .slot-booked[data-owner-event], body.paper .agenda-slot.booked[data-owner-event] { background: #d6cdee; color: #655c50; border-color: #a895dc; opacity: 0.9; }
body.paper :is(.slot-busy, .agenda-slot.busy) { color: #655c50; background: repeating-linear-gradient(-45deg, #ece3d5 0 4px, #fffaf2 4px 8px); }
body.paper .slot-overflow { border-radius: 6px; border-color: var(--line-dark); }
body.paper .quick-add { border-radius: 8px; }
body.paper .day-cell:hover .quick-add, body.paper .quick-add:focus-visible { background: rgba(248, 227, 160, 0.4); }
body.paper .agenda-slot { border-radius: 10px; font-weight: 500; }
body.paper .agenda-quick-add { border-radius: 10px; font-weight: 500; }
body.paper .mobile-day.active { color: var(--paper-bright); }
body.paper .calendar-empty-desktop { background: rgba(255, 250, 242, 0.96); border-radius: 0 0 16px 16px; }
body.paper .event-row { grid-template-columns: 56px 1fr auto; }
body.paper .event-date { font-size: 10px; }
body.paper .event-date span { margin-top: 4px; font-size: 26px; font-weight: 300; letter-spacing: -0.04em; }
body.paper .event-info strong { font-weight: 500; }
body.paper .event-row:last-child, body.paper .booking-row:last-child { border-bottom: 0; }
/* Trip pulse reads as a small data panel: mono label over a large light numeral. */
body.paper .owner-side-section h2 { margin: 0 0 4px; padding-bottom: 10px; border-bottom: 1px solid rgba(70, 52, 30, 0.2); font-size: 11px; color: var(--ink); }
body.paper .owner-side-section:has(.stat-line) { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; }
body.paper .owner-side-section:has(.stat-line) h2 { grid-column: 1 / -1; }
body.paper .stat-line { display: grid; gap: 6px; align-content: start; padding: 14px 0; border-bottom-color: rgba(70, 52, 30, 0.14); }
body.paper .stat-line span { font-size: 10px; color: var(--muted); }
body.paper .stat-line strong { font-size: 40px; font-weight: 300; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
body.paper .activity { border-bottom-color: rgba(70, 52, 30, 0.14); }
body.paper .link-inline { font-weight: 500; }
/* The floating notepad card is one piece of paper: fine grain plus a soft, low-frequency
mottle (both olive-tinted and faint), ending in a torn bottom edge.
The paper is painted on ::before, which extends 27px below the card and is cut by a mask
(a solid block plus a roughened torn strip), so the card and its torn edge share one
continuous fill with no seam. ::after sits behind it: a paler fibrous under-layer peeking
out below the tear, carrying the drop shadow. */
body.paper :is(.owner-event-overview, .booking-overview) {
--note-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .27 0 0 0 0 .17 0 0 0 .5 -.14'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E") 0 0 / 160px 160px, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .03' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .38 0 0 0 0 .22 0 0 0 .22 -.04'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E") 0 0 / 420px 420px, #fff8ec;
--note-tear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='28' viewBox='0 0 340 28'%3E%3Cfilter id='r' x='-5%25' y='-40%25' width='110%25' height='180%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.09' numOctaves='3' seed='4' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='5' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Cpath filter='url(%23r)' fill='%23000' d='M-10-8H350V10L338 12 331 9 322 13 312 11 305 15 296 12 284 14 277 10 266 13 258 16 247 12 236 14 229 10 218 12 207 15 198 11 186 13 178 9 166 12 155 15 147 12 136 14 124 10 115 13 104 16 95 12 83 13 76 9 64 12 53 15 44 11 33 13 22 10 12 14 0 11 -10 12Z'/%3E%3C/svg%3E");
border-top: 0;
border-radius: 16px 16px 0 0;
background: none;
margin-bottom: 65px; /* 27px torn edge + 38px clear gap before the next section */
}
body.paper :is(.owner-event-overview, .booking-overview)::before {
content: "";
position: absolute;
inset: 0 0 -27px 0;
z-index: -1;
border-radius: 16px 16px 0 0;
background: var(--note-paper);
-webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - 27px) no-repeat, var(--note-tear) bottom left / 340px 28px repeat-x;
mask: linear-gradient(#000, #000) top / 100% calc(100% - 27px) no-repeat, var(--note-tear) bottom left / 340px 28px repeat-x;
pointer-events: none;
}
body.paper :is(.owner-event-overview, .booking-overview).receipt-card::after {
bottom: -27px;
height: 28px;
z-index: -2;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='28' viewBox='0 0 340 28'%3E%3Cfilter id='r' x='-5%25' y='-40%25' width='110%25' height='180%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.11' numOctaves='3' seed='11' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='6' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Cpath filter='url(%23r)' fill='%23fffefb' d='M-10-8H350V15L340 17 329 14 320 19 309 16 301 20 290 17 281 19 272 15 262 18 251 21 243 17 232 19 222 15 213 18 203 20 193 16 183 18 173 14 163 17 153 20 143 17 133 19 122 15 112 18 102 21 92 17 82 18 72 14 62 17 52 20 42 16 32 18 21 15 11 19 0 16 -10 17Z'/%3E%3C/svg%3E") 0 0 / 340px 100% repeat-x;
filter: drop-shadow(0 7px 7px rgba(70, 52, 30, 0.12));
}
body.paper .going-person strong, body.paper .meta-line strong { font-weight: 500; }
body.paper .mini-avatar { font-family: var(--mono); font-weight: 500; }
body.paper .bookings-empty { border-top: 1px solid rgba(70, 52, 30, 0.2); }
body.paper .booking-row { background: transparent; }
body.paper .booking-list { background: var(--paper-bright); }
/* ---------- Dialogs, toasts ---------- */
body.paper :is(.dialog, .setup-range-dialog) { border-top: 0; border-radius: 18px; box-shadow: 0 2px 4px rgba(70, 52, 30, 0.18), 0 30px 80px rgba(70, 52, 30, 0.3); }
body.paper .setup-range-head { border-radius: 18px 18px 0 0; }
body.paper .setup-range-grid button { border-radius: 8px; }
body.paper .setup-range-grid button.in-range { border-radius: 0; }
body.paper .setup-range-grid button.range-endpoint { background: var(--ink); color: var(--paper-bright); font-weight: 500; }
body.paper .setup-range-grid button:disabled { color: #c2b8aa; }
body.paper .setup-range-grid button.outside { color: #a2978a; }
body.paper :is(.choice-card, .day-event-option, .warning-panel, .conflict-warning) { border-radius: 12px; }
body.paper .day-event-option.unavailable { background: #f1e9dd; }
body.paper .toast { border-radius: 12px; color: var(--paper-bright); }
/* ---------- Narrow screens ---------- */
@media (max-width: 760px) {
body.paper .brand-word { font-size: 19px; }
/* Mono caps are too wide for the clock and timezone to share one phone-width line. */
body.paper .utility-meta { border-top-color: rgba(70, 52, 30, 0.16); font-family: var(--body); letter-spacing: 0; text-transform: none; }
body.paper .utility-clock-row time { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
body.paper .landing-body { grid-template-columns: 1fr; gap: 44px; padding: 40px 0; }
body.paper .landing-copy h1 { font-size: clamp(42px, 13vw, 60px); }
body.paper .landing-keys { width: min(92%, 380px); }
body.paper .google-btn { width: 100%; }
body.paper .key::before { border-radius: 9px; }
body.paper .setup-side { border-right: 0; border-bottom: 1px solid rgba(70, 52, 30, 0.2); }
body.paper .setup-main h1 { font-size: 40px; }
body.paper .owner-header h1 { font-size: 34px; }
body.paper .event-row { grid-template-columns: 50px 1fr; }
/* Full-screen overlay on phones: it scrolls, so the paper goes back on the card itself. */
body.paper :is(.owner-event-overview, .booking-overview) { border-radius: 0; background: var(--note-paper); margin-bottom: 0; }
body.paper :is(.owner-event-overview, .booking-overview)::before, body.paper :is(.owner-event-overview, .booking-overview).receipt-card::after { display: none; }
body.paper .dialog { border-radius: 18px 18px 0 0; }
body.paper :is(.month-title, .month-picker-trigger, .month-static) { font-size: 20px; }
}
@media (max-width: 520px) {
body.paper .setup-range-dialog { border-radius: 18px 18px 0 0; }
}
/* ====================================================================================
Highlighter colours
Rest = pastel, pressed / selected / active = the saturated tone of the same hue.
Ink (#26221d) on every tone below is at least 6:1.
==================================================================================== */
body.paper {
--hl-yellow: #f8e3a0; --hl-yellow-on: #f2cc55;
--hl-orange: #f6cfa3; --hl-orange-on: #f0aa62;
--hl-coral: #f3b9b1; --hl-coral-on: #e58279;
--hl-lilac: #d6cdee; --hl-lilac-on: #a895dc;
--hl-blue: #c4deed; --hl-blue-on: #86bfe0;
/* Marker grain, layered over a highlight colour so the fill looks drawn, not printed. */
--hl-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='h'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.3' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .2 0 0 0 0 .12 0 0 0 .42 -.13'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23h)'/%3E%3C/svg%3E");
}
/* Buttons: quiet paper keys; the primary action is a yellow highlight. */
body.paper .btn { border-radius: 9px; }
body.paper .btn-icon-collapse { width: 44px; padding-inline: 0; }
body.paper .btn-primary { background: var(--hl-grain), var(--hl-yellow); border-color: rgba(70, 52, 30, 0.28); box-shadow: 0 1px 2px rgba(70, 52, 30, 0.16); color: var(--ink); }
body.paper .btn-primary:hover { background: var(--hl-grain), color-mix(in srgb, var(--hl-yellow) 55%, var(--hl-yellow-on)); color: var(--ink); }
body.paper .btn-primary:active { background: var(--hl-grain), var(--hl-yellow-on); box-shadow: inset 0 1px 2px rgba(70, 52, 30, 0.25); }
body.paper .btn-danger { color: #a3283f; }
body.paper .btn-danger:hover { background: var(--hl-grain), var(--hl-coral); color: var(--ink); }
body.paper .btn-danger:active { background: var(--hl-grain), var(--hl-coral-on); color: var(--ink); }
body.paper .booking-overview .btn-primary { background: var(--hl-grain), var(--hl-yellow); }
body.paper .confirm-btn:active { background: var(--hl-grain), var(--hl-yellow-on); }
/* Active tabs, toggles and chosen dates: blue. */
body.paper :is(.calendar-view-switch button.active, .role-switch button.active, .mobile-day.active, .owner-menu-panel button.active, .month-menu button.selected, .setup-range-grid button.range-endpoint),
body.paper .icon-btn.active, body.paper .icon-btn.active:hover, body.paper .owner-menu-panel button.active:hover {
background: var(--hl-grain), var(--hl-blue-on);
color: var(--ink);
border-color: rgba(70, 52, 30, 0.3);
box-shadow: none;
}
body.paper .calendar-view-switch button:not(.active):hover, body.paper .role-switch button:not(.active):hover { background: var(--hl-blue); color: var(--ink); }
body.paper .setup-range-grid button.in-range { background: var(--hl-blue); }
body.paper .setup-range-grid button:hover:not(:disabled), body.paper .setup-range-grid button:focus-visible { background: var(--hl-yellow); }
body.paper .day-cell.today .date-num { background: var(--hl-coral-on); color: var(--ink); }
body.paper .day-cell.selected { box-shadow: inset 0 0 0 2px var(--hl-blue-on); }
body.paper .mobile-day.has-open { box-shadow: inset 0 -4px 0 0 var(--hl-yellow-on); }
/* Calendar: open = yellow, booked = lilac, itinerary/unavailable = hatched paper. */
body.paper :is(.slot-open, .agenda-slot.open), body.paper .slot-open[data-owner-event], body.paper .agenda-slot.open[data-owner-event] { background: var(--hl-grain), var(--hl-yellow); border-color: rgba(70, 52, 30, 0.22); box-shadow: none; color: var(--ink); }
body.paper :is(.slot-open, .agenda-slot.open):is(:hover, :focus-visible) { background: var(--hl-grain), color-mix(in srgb, var(--hl-yellow) 55%, var(--hl-yellow-on)); border-color: rgba(70, 52, 30, 0.5); box-shadow: 0 4px 10px rgba(70, 52, 30, 0.12); }
body.paper :is(.slot-open, .agenda-slot.open):active,
body.paper .slot-open.selected-slot, body.paper .agenda-slot.open.selected-slot { background: var(--hl-grain), var(--hl-yellow-on); color: var(--ink); border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
body.paper .slot-open.selected-slot.secondary-slot, body.paper .agenda-slot.open.selected-slot.secondary-slot { background: var(--hl-grain), var(--hl-lilac-on); color: var(--ink); border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
body.paper :is(.slot-booked, .agenda-slot.booked), body.paper .slot-booked[data-owner-event], body.paper .agenda-slot.booked[data-owner-event] { background: var(--hl-grain), var(--hl-lilac); color: #3d3557; border-color: rgba(70, 52, 30, 0.2); opacity: 1; }
body.paper :is(.slot, .agenda-slot)[data-owner-event]:hover, body.paper :is(.slot, .agenda-slot)[data-preview-event]:is(:hover, :focus-visible) { outline-color: var(--ink); color: var(--ink); }
body.paper :is(.slot, .agenda-slot)[data-preview-event].selected-slot { box-shadow: inset 0 0 0 2px var(--ink); }
body.paper .legend-swatch.open { background: var(--hl-grain), var(--hl-yellow); }
body.paper .legend-swatch.booked { background: var(--hl-grain), var(--hl-lilac); }
body.paper .empty-calendar-icon { background: var(--hl-yellow); }
/* Choices: pastel when chosen, saturated marker on the control itself. */
body.paper .source-option.selected { background: var(--hl-grain), var(--hl-yellow); border-color: rgba(70, 52, 30, 0.45); box-shadow: inset 0 -5px 0 var(--hl-yellow-on); }
body.paper .source-option.selected .source-icon { background: var(--hl-yellow-on); }
body.paper .source-icon { background: var(--hl-blue); color: var(--ink); }
body.paper .time-option.selected { background: var(--hl-grain), var(--hl-yellow); }
body.paper .selected .choice-dot { background: var(--ink); box-shadow: inset 0 0 0 4px var(--hl-yellow-on); }
body.paper .filled .choice-check-state { border-color: var(--hl-yellow-on); background: var(--hl-yellow-on); color: var(--ink); }
body.paper :is(.choice-card:hover, .choice-card.active) { box-shadow: inset 0 -5px var(--hl-yellow-on); }
body.paper .day-event-option.open:is(:hover, :focus-visible) { background: var(--hl-grain), var(--hl-yellow); }
body.paper .choice-clear:hover { background: var(--hl-coral); color: var(--ink); }
body.paper .booking-row:hover, body.paper .booking-row.selected { background: var(--hl-blue); box-shadow: inset 3px 0 var(--hl-blue-on); }
body.paper .trip-title-field { background: rgba(255, 250, 242, 0.7); }
body.paper .sim-dot { box-shadow: none; }
/* Sign-in: highlighted word, pastel keys. */
body.paper .landing-copy mark { padding: 0 0.12em; margin: 0 -0.06em; background: var(--hl-grain), var(--hl-yellow); color: inherit; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
body.paper .key { color: var(--ink); }
body.paper .key.olive { background: var(--hl-yellow-on); border-color: rgba(255, 255, 255, 0.5); color: var(--ink); }
body.paper .key.olive::before { background: var(--hl-grain), var(--hl-yellow); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 2px 3px rgba(70, 52, 30, 0.2); }
body.paper .key.key-open { background: var(--hl-coral-on); }
body.paper .key.key-open::before { background: var(--hl-grain), var(--hl-coral); }
body.paper .key-d3 { background: var(--hl-blue-on); }
body.paper .key-d3::before { background: var(--hl-grain), var(--hl-blue); }
body.paper .key-join { background: var(--hl-lilac-on); }
body.paper .key-join::before { background: var(--hl-grain), var(--hl-lilac); }
/* ====================================================================================
Guest pages
==================================================================================== */
body.paper :is(.overview h2, .identity-form h2, .booking-overview h2, .trip-title, .ticket-title, .ticket-time strong, .auth-title, .confirm-btn) {
font-family: var(--display);
font-weight: 400;
line-height: 1.1;
letter-spacing: -0.035em;
text-transform: none;
}
body.paper :is(.overview-label, .meta-role-label, .selection-status, .ticket-status, .ticket-time small, .ticket-grid small, .preview-badge, .choice-check-copy small, .time-index, .choice-check-number) { font-family: var(--mono); font-weight: 500; letter-spacing: 0.08em; }
body.paper .overview h2 { font-size: clamp(30px, 3vw, 40px); }
body.paper .identity-form h2, body.paper .identity-modal .identity-form h2 { font-size: 32px; }
body.paper .booking-overview h2 { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.08; }
body.paper .trip-title { font-size: 22px; font-weight: 500; }
body.paper .ticket-title { font-size: clamp(24px, 4vw, 30px); }
body.paper .ticket-time strong { font-size: 26px; font-weight: 300; }
body.paper .confirm-btn { font-size: 16px; font-weight: 500; letter-spacing: 0; }
body.paper :is(.time-index, .choice-check-number) { font-size: 12px; border-radius: 6px; }
/* No photo backdrops: the page is the paper. */
body.paper :is(.identity-onboard, .ticket-shell) { background: none; color: var(--ink); }
/* Guest details page, in the ticket pattern: trip summary on top, form as the stub below.
Two rounded pieces meeting edge to edge (the notches are the page showing through), a
dashed tear line on the seam, one shared soft shadow. Plain paper, no gradient. */
body.paper .identity-onboard { overflow: hidden; }
body.paper .identity-ticket { position: relative; isolation: isolate; width: min(100%, 480px); }
/* Only the real ticket gets the large, soft shadow (it follows both pieces as one outline);
the pile behind has just a hairline of shadow per sheet. */
body.paper .identity-main { filter: drop-shadow(0 22px 44px rgba(70, 52, 30, 0.2)) drop-shadow(0 3px 8px rgba(70, 52, 30, 0.06)); }
/* A loose scatter of other tickets behind the form, as if it had been dropped on a pile.
Decorative only (ticketStack() in app.js): six sample tickets built like the real one —
a top piece and a stub with rounded corners meeting at a dashed tear line — each with its
own offset, angle and size (--x, --y, --r, --s), fading with depth. On load they
start squared up behind the form and slide out to their places, staggered.
--spread scales every offset and angle at once (phones use a smaller value). */
body.paper .ticket-stack { --spread: 1; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
body.paper .stack-ticket {
--x: 0px; --y: 0px; --r: 0deg; --s: 1;
/* Each ticket stays a solid sheet. Depth shows in two ways:
--dim how far the paper is shaded: a little for the ticket nearest the form, more for
each one beneath it, so lower tickets sit in shadow.
--o how strong the printing is (text, rules, tear line, barcode): 36% on the
nearest ticket and 8% fainter per layer (28, 20, 12, 4, then 0). */
--o: 0.36;
--dim: 5%;
--st-ink: color-mix(in srgb, var(--ink) calc(var(--o) * 100%), transparent);
--st-paper: color-mix(in srgb, #fffdf9, #cdbfa9 var(--dim));
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
color: var(--st-ink);
transform: translate(calc(var(--x) * var(--spread)), calc(var(--y) * var(--spread))) rotate(calc(var(--r) * var(--spread))) scale(var(--s));
animation: ticket-scatter 0.9s cubic-bezier(0.2, 1.25, 0.35, 1) both;
}
@keyframes ticket-scatter { from { transform: translate(0, 0) rotate(0deg) scale(0.96); } }
body.paper .stack-ticket:nth-child(1) { --o: 0.00; --dim: 35%; --x: -30px; --y: 195px; --r: -31deg; --s: 0.9; animation-delay: 0.02s; }
body.paper .stack-ticket:nth-child(2) { --o: 0.04; --dim: 29%; --x: 56px; --y: 150px; --r: 25deg; --s: 0.93; animation-delay: 0.08s; }
body.paper .stack-ticket:nth-child(3) { --o: 0.12; --dim: 23%; --x: -96px; --y: 26px; --r: -16deg; --s: 0.97; animation-delay: 0.14s; }
body.paper .stack-ticket:nth-child(4) { --o: 0.20; --dim: 17%; --x: 104px; --y: -22px; --r: 13deg; --s: 1; animation-delay: 0.2s; }
body.paper .stack-ticket:nth-child(5) { --o: 0.28; --dim: 11%; --x: -40px; --y: -64px; --r: -6deg; --s: 0.98; animation-delay: 0.26s; }
body.paper .stack-ticket:nth-child(6) { --o: 0.36; --dim: 5%; --x: 34px; --y: -78px; --r: 5deg; --s: 0.95; animation-delay: 0.32s; }
body.paper :is(.st-top, .st-stub) { border: 1px solid rgba(70, 52, 30, 0.07); border-radius: 26px; background: var(--st-paper); box-shadow: 0 1px 3px rgba(70, 52, 30, 0.05); }
body.paper .st-top { flex: none; min-height: 176px; padding: 20px 24px 22px; display: flex; flex-direction: column; }
body.paper .st-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
body.paper .stack-ticket small { font: 500 9px/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--st-ink); }
body.paper .st-status { padding: 4px 8px; border: 1px solid color-mix(in srgb, var(--st-ink) 50%, transparent); border-radius: 999px; color: var(--st-ink); }
body.paper .st-top strong { font: 500 27px/1.02 var(--display); letter-spacing: -0.04em; }
body.paper .st-dates { margin-top: 8px; font: 500 14px/1.2 var(--display); letter-spacing: -0.01em; }
body.paper .st-zone { margin-top: auto; padding-top: 12px; }
body.paper .st-stub { position: relative; flex: 1; min-height: 0; overflow: hidden; padding: 26px 24px 24px; display: flex; flex-direction: column; margin-top: -1px; }
/* The tear line, on the seam between the two pieces, as on the real ticket. */
body.paper .st-stub::before { content: ""; position: absolute; left: 26px; right: 26px; top: 0; border-top: 2px dashed color-mix(in srgb, var(--st-ink) 55%, transparent); }
body.paper .st-row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 11px 0; border-bottom: 1px solid color-mix(in srgb, var(--st-ink) 16%, transparent); }
body.paper .st-row b { font: 500 13px/1.25 var(--display); text-align: right; }
body.paper .st-bars { --bar: color-mix(in srgb, var(--st-ink) 85%, transparent); margin-top: auto; height: 46px; background: repeating-linear-gradient(90deg, var(--bar) 0 2px, transparent 2px 5px, var(--bar) 5px 6px, transparent 6px 10px, var(--bar) 10px 13px, transparent 13px 15px); }
body.paper .trip-stops { width: 100%; padding: 34px 30px 26px; display: flex; flex-direction: column; gap: 0; border: 0; border-radius: 26px; background: #fffdf9; color: var(--ink); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; text-align: center; }
body.paper .trip-stops > div { display: block; }
body.paper .trip-stops > div:first-child strong { display: block; overflow: visible; white-space: normal; text-wrap: balance; overflow-wrap: anywhere; font: 500 clamp(32px, 8vw, 44px) / 1 var(--display); letter-spacing: -0.045em; text-transform: none; }
body.paper .trip-stops > div:first-child span { margin-top: 14px; color: var(--ink); font: 500 18px/1.2 var(--display); letter-spacing: -0.02em; }
body.paper .trip-stops > div + div { margin-top: 22px; padding-top: 0; border-top: 0; }
body.paper .trip-stops > div + div :is(strong, span) { display: inline; overflow: visible; white-space: normal; color: var(--muted); font: 500 11px/1.5 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
body.paper .trip-stops > div + div strong::after { content: " · "; }
body.paper .identity-modal { position: relative; width: 100%; border-top: 0; border-radius: 26px; background: #fffdf9; box-shadow: none; }
body.paper .identity-modal::before { content: ""; position: absolute; left: 26px; right: 26px; top: -1px; border-top: 2px dashed rgba(38, 34, 29, 0.55); }
body.paper .identity-modal .identity-form > p { font-weight: 400; }
body.paper .party-options label { border-radius: 11px; border-color: #cfc4b3; }
body.paper .party-options label:has(input:checked) { background: var(--hl-grain), var(--hl-yellow); border-color: rgba(70, 52, 30, 0.5); box-shadow: none; }
body.paper .party-options input, body.paper .check-row input, body.paper .booking-confirm-check input { accent-color: var(--ink); }
body.paper .booking-header { border-bottom-color: rgba(70, 52, 30, 0.2); }
body.paper .preview-badge { border-radius: 999px; border-color: var(--line-dark); background: var(--hl-blue); font-size: 10px; }
body.paper .booking-overview { border-top: 0; border-radius: 16px 16px 0 0; background: none; }
body.paper :is(.choice-checklist-item, .booking-confirm-check, .time-option, .selection-status, .unavailable-note, .guest-pill) { border-radius: 11px; }
/* overflow: hidden keeps the Clear button's hover fill inside the rounded corners. */
body.paper .choice-checklist-item { background: var(--paper-bright); border-color: #cfc4b3; overflow: hidden; }
/* The backup choice stays in the background until it is filled, so the primary reads first. */
body.paper .choice-checklist-item:nth-child(2).empty { opacity: 0.62; border-style: dashed; transition: opacity .16s ease-out; }
body.paper .choice-checklist-item:nth-child(2).empty:is(:hover, :focus-within) { opacity: 1; }
body.paper .choice-checklist-item:nth-child(2).empty.active { background: var(--paper-bright); border-color: rgba(70, 52, 30, 0.6); opacity: 0.78; }
body.paper .confirm-btn .smiley-icon { width: 22px; height: 22px; stroke-width: 2; }
body.paper .choice-checklist-item.filled { border-color: rgba(70, 52, 30, 0.45); }
body.paper .choice-checklist-item.active { background: var(--hl-blue); border-color: rgba(70, 52, 30, 0.5); box-shadow: none; }
body.paper .booking-confirm-check { background: var(--paper-bright); border-color: #cfc4b3; font-weight: 500; }
body.paper .booking-confirm-check:hover { background: var(--hl-blue); border-color: rgba(70, 52, 30, 0.45); }
body.paper .celebration-rule::after { background: linear-gradient(90deg, var(--hl-blue-on), var(--hl-lilac-on), var(--hl-coral-on)); }
body.paper .celebration-icon { background: var(--hl-lilac); color: var(--ink); box-shadow: none; }
body.paper .celebration-particle.p1 { background: var(--hl-blue-on); }
body.paper .celebration-particle.p2 { background: var(--hl-coral-on); }
body.paper .celebration-particle.p3 { background: var(--hl-yellow-on); }
body.paper .guest-initial { background: var(--hl-blue); }
/* Ticket: two rounded pieces that meet edge to edge, like a pass and its tear-off stub.
The side notches are simply where the two sets of rounded corners meet, so the page
shows through them — real gaps, not circles drawn on top. Nothing is embossed: the only
depth is one soft drop shadow that follows the combined outline.
top — the pass: grainy sky gradient, title large and centred, times along the foot.
bottom — the stub: plain paper, perforation line, boxed details, actions. */
body.paper .ticket { width: min(100%, 420px); background: none; box-shadow: none; filter: drop-shadow(0 14px 26px rgba(70, 52, 30, 0.14)); }
body.paper .ticket.receipt-card::after, body.paper .ticket-divider { display: none; }
body.paper .ticket-top {
position: relative;
min-height: 400px;
padding: 26px 26px 24px;
display: flex;
flex-direction: column;
border-top: 0;
border-radius: 26px;
overflow: hidden;
isolation: isolate;
background: #cfe0f4 url("assets/ticket-sky.webp") center / cover no-repeat;
color: #1c1f2a;
text-align: center;
}
/* Extra grain so the gradient reads as printed stock rather than a screen glow. */
body.paper .ticket-top::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--hl-grain); opacity: 0.9; mix-blend-mode: multiply; pointer-events: none; }
body.paper .ticket-top-head { margin: 0; }
body.paper .ticket-brand { font: 500 10px/1 var(--mono); letter-spacing: 0.14em; }
body.paper .ticket-status { padding: 6px 11px; border: 1px solid rgba(28, 31, 42, 0.55); border-radius: 999px; background: rgba(255, 255, 255, 0.55); color: #1c1f2a; font-size: 10px; }
body.paper .ticket-title { order: 1; margin: auto 0; padding: 30px 0; font-size: clamp(38px, 10vw, 54px); font-weight: 500; line-height: 0.98; letter-spacing: -0.05em; text-wrap: balance; overflow-wrap: anywhere; }
body.paper .ticket-route { order: 2; margin: 0; align-items: flex-end; text-align: left; }
/* Date on its own line, larger; timezone beneath it in the small mono caps. */
body.paper .ticket-date { order: 3; margin: 18px 0 0; color: #1c1f2a; }
body.paper .ticket-date-day { font: 500 20px/1.2 var(--display); letter-spacing: -0.025em; }
body.paper .ticket-date-zone { margin-top: 6px; font: 500 11px/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
body.paper .ticket-time strong { font-size: 30px; font-weight: 500; letter-spacing: -0.04em; }
body.paper .ticket-time small { color: #1c1f2a; }
body.paper .ticket-time.end { text-align: right; }
body.paper .ticket-path { align-self: center; color: #1c1f2a; }
body.paper .ticket-path::before { background: rgba(28, 31, 42, 0.5); }
body.paper .ticket-path .icon { width: 26px; height: 26px; padding: 5px; border: 1px solid rgba(28, 31, 42, 0.5); border-radius: 50%; background: rgba(255, 255, 255, 0.7); color: #1c1f2a; box-shadow: none; }
body.paper .ticket-bottom { position: relative; padding: 24px 26px 24px; border-radius: 26px; background: #fffdf9; }
/* Perforation: the dashed tear line sits exactly on the seam between pass and stub,
running between the two notches (inset by the corner radius). */
body.paper .ticket-bottom::before { content: ""; position: absolute; left: 26px; right: 26px; top: -1px; border-top: 2px dashed rgba(38, 34, 29, 0.55); }
body.paper .ticket-grid { gap: 0; margin-bottom: 20px; }
body.paper .ticket-grid > div { padding: 12px 14px; }
body.paper .ticket-grid > div:nth-child(odd) { padding-left: 0; }
body.paper .ticket-grid > div:nth-child(even) { padding-right: 0; }
body.paper .ticket-grid > div:nth-child(-n + 2) { padding-top: 4px; }
body.paper .ticket-grid > div:nth-child(odd) { border-right: 1px solid rgba(38, 34, 29, 0.25); }
body.paper .ticket-grid > div:nth-child(n + 3) { border-top: 1px solid rgba(38, 34, 29, 0.25); }
body.paper .ticket-grid small { font-size: 9px; margin-bottom: 5px; }
body.paper .ticket-grid strong { font-size: 15px; font-weight: 500; line-height: 1.3; }
body.paper .ticket-bottom .privacy-line { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid rgba(38, 34, 29, 0.75); text-align: left; line-height: 1.6; }
@media (max-width: 760px) {
body.paper .booking-overview { border-radius: 0; background: var(--note-paper); }
body.paper .booking-overview.review-open .booking-review { border-top: 0; }
body.paper .booking-overview.review-open .booking-review-backdrop { background: rgba(70, 52, 30, 0.42); }
body.paper .booking-overview h2 { font-size: 26px; }
}
/* ====================================================================================
Logo — see logo() in app.js. Everything is in em: set font-size on .logo to scale it.
==================================================================================== */
body.paper .logo { position: relative; display: inline-flex; align-items: flex-start; font-size: 15px; line-height: 1; padding: 0.35em 0 0.75em; }
body.paper .logo-word { position: relative; z-index: 1; padding: 0.42em 1.5em 0.4em 0.62em; /* right padding = room for the pill, so it never covers the last letter */ border-radius: 0.14em; background: var(--ink); color: #fffaf2; font: 800 1em/1 var(--display); letter-spacing: 0.035em; text-transform: uppercase; transform: rotate(-2deg); }
/* The pill is pulled left so about 20% of its width overlaps the block. */
body.paper .logo-badge { position: relative; z-index: 2; margin: 0.95em 0 0 -1.7em; padding: 0.42em 0.85em 0.4em; border-radius: 999px; background: var(--hl-grain), var(--hl-coral); color: var(--ink); font: 800 0.68em/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; transform: rotate(3deg); }
body.paper .logo-star { position: absolute; z-index: 3; top: -0.85em; right: -0.2em; width: 1.5em; height: 1.5em; fill: var(--hl-yellow-on); stroke: var(--ink); stroke-width: 0.9; stroke-linejoin: round; transform: rotate(8deg); }
body.paper .boot-loading .logo { font-size: 22px; }
body.paper .setup-side .logo { align-self: flex-start; }
@media (max-width: 760px) {
/* The top bar also has to fit the menu and the Host/Guest switch, so the pill drops out. */
body.paper .utility .logo { font-size: 14px; }
body.paper .utility .logo-badge { display: none; }
}
@media (max-width: 760px) {
/* Less room either side on phones: pull the scatter in. */
body.paper .ticket-stack { --spread: 0.38; }
}
/* ====================================================================================
Hover and press states
The paper keys' old hover was a near-identical off-white, so it could not be seen.
Every neutral pressable now follows the highlighter rule: hover = pastel blue, pressed =
saturated blue. Destructive controls use coral, the primary action keeps yellow (above).
Disabled controls never react. Placed last so it wins over the earlier key styles.
==================================================================================== */
body.paper :is(.btn:not(.btn-primary, .btn-danger, .btn-dark, .btn-quiet), .icon-btn:not(.active), .owner-menu-trigger, .range-trigger, .trip-range-input, .google-btn, .source-option:not(.selected)):not([disabled]):hover {
background: var(--hl-grain), var(--hl-blue);
border-color: rgba(70, 52, 30, 0.45);
color: var(--ink);
}
body.paper :is(.btn:not(.btn-primary, .btn-danger, .btn-dark, .btn-quiet), .icon-btn:not(.active), .owner-menu-trigger, .range-trigger, .trip-range-input, .google-btn, .source-option:not(.selected)):not([disabled]):active,
body.paper :is(.owner-menu-trigger, .range-trigger, .trip-range-input)[aria-expanded="true"] {
background: var(--hl-grain), var(--hl-blue-on);
border-color: rgba(70, 52, 30, 0.55);
box-shadow: inset 0 1px 2px rgba(70, 52, 30, 0.22);
transform: translateY(1px);
}
body.paper :is(.icon-btn, .owner-menu-trigger, .range-trigger, .trip-range-input, .source-option, .google-btn) { transition: background-color 0.16s ease-out, border-color 0.16s ease-out, box-shadow 0.16s ease-out, transform 0.16s ease-out; }
/* Quiet (text-only) buttons get a visible wash rather than a faint grey. */
body.paper .btn-quiet:not([disabled]):hover { background: var(--hl-blue); color: var(--ink); }
body.paper .btn-quiet:not([disabled]):active { background: var(--hl-blue-on); }
/* Destructive icon buttons (remove an event) warn in coral. */
body.paper .icon-btn[data-delete]:hover { background: var(--hl-grain), var(--hl-coral); color: var(--ink); }
body.paper .icon-btn[data-delete]:active { background: var(--hl-grain), var(--hl-coral-on); }
/* Other pressables that had no hover feedback. */
body.paper .choice-checklist-item > button:first-child:not(:disabled):hover { background: rgba(196, 222, 237, 0.55); }
body.paper .time-option:not(.selected):hover, body.paper .party-options label:not(:has(input:checked)):hover { background: var(--hl-blue); border-color: rgba(70, 52, 30, 0.45); }
body.paper .mobile-day:not(.active):hover { background: var(--hl-blue); }
body.paper .month-picker-trigger:hover { color: var(--blue); }
body.paper .owner-menu-panel > button:not(.active):hover, body.paper .owner-menu-panel > button:not(.active):focus-visible { background: var(--hl-blue); color: var(--ink); }
body.paper .btn[disabled], body.paper .btn[disabled]:hover { transform: none; cursor: not-allowed; }
/* Hover changes colour only: no lift. (A press still dips by 1px.) Covers every button
style, including the ones whose lift comes from styles.css. */
body.paper :is(.btn, .icon-btn, .google-btn, .source-option, .owner-menu-trigger, .range-trigger, .trip-range-input):hover:not(:active) { transform: none; }
body.paper .google-btn:hover { box-shadow: var(--key-shadow); }
/* ====================================================================================
Date-range picker — setupRangeCalendar() in app.js.
Two months side by side; the range is a blue band, its two ends are filled circles.
==================================================================================== */
body.paper .range-picker { width: min(720px, 100%); padding: 22px 24px 20px; overflow: visible; }
body.paper .range-picker-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
body.paper .range-picker-head strong { font: 500 22px/1.1 var(--display); letter-spacing: -0.03em; }
body.paper .range-picker-summary { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 14px; border: 1.5px solid var(--ink); border-radius: 11px; background: #fffdf9; font-weight: 500; font-variant-numeric: tabular-nums; }
body.paper .range-picker-summary .is-empty { color: #8a8073; font-weight: 400; }
body.paper .range-picker-summary .icon { margin-left: auto; }
body.paper .range-picker-months { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 34px; margin-top: 18px; }
body.paper .range-picker :is(.range-picker-prev, .range-picker-next) { position: absolute; top: 0; z-index: 1; width: 34px; height: 34px; background: transparent; border-color: transparent; box-shadow: none; }
body.paper .range-picker-prev { left: 0; }
body.paper .range-picker-next { right: 0; }
body.paper .range-picker .icon-btn[disabled] { opacity: 0.3; cursor: not-allowed; }
body.paper .range-picker .setup-range-month { padding: 0; }
body.paper .range-picker .setup-range-month h3 { margin: 0; height: 34px; display: grid; place-items: center; font: 500 16px/1 var(--display); letter-spacing: -0.02em; text-transform: none; }
body.paper .range-picker .setup-range-weekdays { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
body.paper .range-picker .setup-range-weekdays span { padding: 4px 0 8px; color: var(--muted); font: 500 10px/1 var(--mono); letter-spacing: 0.06em; }
body.paper .range-picker .setup-range-grid { row-gap: 4px; }
body.paper .range-picker .setup-range-grid button { position: relative; min-height: 0; height: 40px; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--ink); display: grid; place-items: center; cursor: pointer; font-size: 14px; font-variant-numeric: tabular-nums; outline: 0; }
body.paper .range-picker .rp-day { width: 38px; height: 38px; display: grid; place-items: center; border: 1.5px solid transparent; border-radius: 50%; transition: background-color 0.12s ease-out, border-color 0.12s ease-out; }
/* The band. */
body.paper .range-picker .setup-range-grid button:is(.in-range, .in-preview) { background: var(--hl-blue); }
body.paper .range-picker .setup-range-grid button.in-preview:not(.in-range) { background: rgba(196, 222, 237, 0.55); }
body.paper .range-picker .setup-range-grid button.cap-left { border-radius: 999px 0 0 999px; }
body.paper .range-picker .setup-range-grid button.cap-right { border-radius: 0 999px 999px 0; }
body.paper .range-picker .setup-range-grid button.cap-left.cap-right { border-radius: 999px; }
/* The band starts and stops at the centre of each endpoint, so the circle caps it. */
body.paper .range-picker .setup-range-grid button.range-start.in-range { background: linear-gradient(90deg, transparent 50%, var(--hl-blue) 50%); border-radius: 0; }
body.paper .range-picker .setup-range-grid button.range-end.in-range { background: linear-gradient(90deg, var(--hl-blue) 50%, transparent 50%); border-radius: 0; }
body.paper .range-picker .setup-range-grid button.range-start.range-end, body.paper .range-picker .setup-range-grid button.range-start.cap-right, body.paper .range-picker .setup-range-grid button.range-end.cap-left { background: transparent; }
body.paper .range-picker .setup-range-grid button.range-endpoint .rp-day { background: var(--hl-grain), var(--hl-blue-on); border-color: var(--ink); font-weight: 600; }
body.paper .range-picker .setup-range-grid button:not(:disabled):hover .rp-day, body.paper .range-picker .setup-range-grid button:focus-visible .rp-day { border-color: var(--ink); }
body.paper .range-picker .setup-range-grid button:not(:disabled):not(.in-range):not(.in-preview):hover { background: transparent; }
body.paper .range-picker .setup-range-grid button.is-today:not(.range-endpoint) .rp-day { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
body.paper .range-picker .setup-range-grid button:disabled { color: #b9afa1; cursor: not-allowed; text-decoration: none; }
body.paper .range-picker-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 18px -24px 0; padding: 16px 24px 0; border-top: 1px solid var(--line); }
body.paper .range-picker-count { color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }
body.paper .range-picker-actions { display: flex; gap: 10px; }
@media (max-width: 680px) {
/* One month at a time on narrow screens. */
body.paper .range-picker { padding: 18px 16px 16px; }
body.paper .range-picker-months { grid-template-columns: 1fr; }
body.paper .range-picker-months .setup-range-month:last-of-type { display: none; }
body.paper .range-picker-foot { margin-inline: -16px; padding-inline: 16px; }
}
/* ====================================================================================
Guest preview: desktop / mobile switch and the phone frame
==================================================================================== */
body.paper .utility-center { position: relative; }
body.paper .device-switch { position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(70, 52, 30, 0.1); box-shadow: inset 0 1px 2px rgba(70, 52, 30, 0.16); }
body.paper .device-switch button { width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; transition: background-color 0.16s ease-out, color 0.16s ease-out; }
body.paper .device-switch button .icon { width: 17px; height: 17px; }
body.paper .device-switch button:not(.active):hover { background: var(--hl-blue); color: var(--ink); }
body.paper .device-switch button.active { background: var(--hl-grain), var(--hl-blue-on); color: var(--ink); }
body.paper .preview-stage { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 26px 20px 36px; }
body.paper .preview-phone { position: relative; width: 410px; max-width: 100%; height: min(820px, calc(100vh - 170px)); min-height: 520px; padding: 10px; border-radius: 48px; background: var(--ink); box-shadow: 0 26px 60px rgba(70, 52, 30, 0.24), 0 4px 10px rgba(70, 52, 30, 0.12); }
body.paper .preview-phone::before { content: ""; position: absolute; z-index: 1; top: 20px; left: 50%; width: 92px; height: 22px; border-radius: 999px; background: var(--ink); transform: translateX(-50%); pointer-events: none; }
body.paper .preview-phone iframe { display: block; width: 100%; height: 100%; border: 0; border-radius: 38px; background: var(--paper); }
body.paper .preview-caption { margin: 0; color: var(--muted); font: 500 10px/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
/* Inside the phone frame: no visible scrollbar or reserved gutter, and room for the notch. */
html.embedded { scrollbar-gutter: auto; scrollbar-width: none; }
html.embedded::-webkit-scrollbar { display: none; }
html.embedded body.paper .utility { padding-top: 40px; }
@media (max-width: 760px) {
/* On a real phone the page already is the mobile view. */
body.paper .device-switch { display: none; }
}
/* ====================================================================================
Guest time picker at phone width: Calendar / List toggle, month grid, day list.
(guestMobilePicker() in app.js. Desktop uses the full calendar beside the card instead.)
==================================================================================== */
body.paper .guest-view-toggle { display: none; }
body.paper .mobile-cal-head { display: flex; align-items: center; justify-content: space-between; min-height: 40px; margin-top: 4px; }
body.paper .mobile-cal-head strong { font: 500 18px/1 var(--display); letter-spacing: -0.02em; }
body.paper .mobile-cal-head span { display: flex; gap: 6px; }
body.paper .mobile-cal-head .icon-btn { width: 36px; height: 36px; }
body.paper .mobile-cal-head .icon-btn[disabled] { opacity: 0.35; cursor: not-allowed; }
body.paper :is(.mobile-cal-weekdays, .mobile-cal-grid) { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
body.paper .mobile-cal-weekdays { margin-top: 8px; }
body.paper .mobile-cal-weekdays span { padding: 6px 0; text-align: center; color: var(--muted); font: 500 10px/1 var(--mono); letter-spacing: 0.06em; }
body.paper .mobile-cal-grid { row-gap: 4px; }
body.paper .mobile-cal-grid button { height: 44px; padding: 0; border: 0; background: transparent; display: grid; place-items: center; color: var(--ink); cursor: pointer; font-size: 15px; font-variant-numeric: tabular-nums; }
body.paper .mobile-cal-grid button span { width: 38px; height: 38px; display: grid; place-items: center; border: 1.5px solid transparent; border-radius: 50%; }
body.paper .mobile-cal-grid button:disabled { color: #c2b8aa; cursor: default; }
body.paper .mobile-cal-grid button.has-other span { border-color: rgba(70, 52, 30, 0.22); border-style: dashed; }
body.paper .mobile-cal-grid button.has-open span { background: var(--hl-grain), var(--hl-yellow); font-weight: 600; }
body.paper .mobile-cal-grid button.active span { background: var(--hl-grain), var(--hl-blue-on); border-color: var(--ink); font-weight: 600; }
body.paper .mobile-cal-grid button.active.has-open span { background: var(--hl-grain), var(--hl-yellow-on); }
body.paper .mobile-cal-key { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; color: var(--muted); font: 500 10px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
body.paper .mobile-cal-key i { width: 12px; height: 12px; border-radius: 50%; background: var(--hl-yellow); border: 1px solid rgba(70, 52, 30, 0.3); }
body.paper .mobile-cal .mobile-agenda-body { padding: 16px 0 0; margin-top: 14px; border-top: 1px solid rgba(70, 52, 30, 0.16); }
body.paper :is(.mobile-cal, .mobile-list) h3 { margin: 0 0 10px; font: 500 17px/1.2 var(--display); letter-spacing: -0.02em; text-transform: none; }
body.paper .mobile-list-day + .mobile-list-day { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(70, 52, 30, 0.16); }
@media (max-width: 760px) {
body.paper .guest-view-toggle { display: inline-flex; margin-bottom: 14px; }
body.paper .guest-view-toggle button { min-height: 38px; padding: 8px 16px; font-size: 13px; }
}
@media (max-width: 760px) {
/* Guest's phone top bar (no menu, no Host/Guest switch): the logo is centred and shown in
full, pill included. The host's phone bar keeps the compact logo, since it also has to
fit the menu button and the switch. */
body.paper .utility:not(:has(.role-switch, .owner-menu)) .utility-brand { grid-column: 1 / -1; justify-content: center; }
body.paper .utility:not(:has(.role-switch, .owner-menu)) .utility-center { display: none; }
body.paper .utility:not(:has(.role-switch, .owner-menu)) .logo { font-size: 15px; }
body.paper .utility:not(:has(.role-switch, .owner-menu)) .logo-badge { display: inline-block; }
}
/* "Select the backup →" on the empty secondary row, once a primary time is chosen. */
body.paper .choice-check-copy > .choice-cta { color: var(--blue); font-size: 13px; font-weight: 500; }
/* Guest's choices on the phone calendar: a small bubble above the date — coral for the
primary choice, lilac for the backup (both if they fall on the same day). */
body.paper .mobile-cal-grid button { position: relative; }
body.paper .day-marks { position: absolute; top: -3px; left: 50%; z-index: 1; display: flex; gap: 2px; transform: translateX(-50%); pointer-events: none; }
body.paper .day-marks b, body.paper .mobile-cal-key i:is(.mark-primary, .mark-backup) { width: 10px; height: 10px; border: 1.5px solid var(--ink); border-radius: 50%; }
body.paper .mark-primary { background: var(--hl-coral-on); }
body.paper .mark-backup { background: var(--hl-lilac-on); }
body.paper .mobile-cal-key { flex-wrap: wrap; gap: 6px 14px; }
body.paper .mobile-cal-key span { display: inline-flex; align-items: center; gap: 6px; }
body.paper .mobile-cal-key i.mark-primary { background: var(--hl-coral-on); }
body.paper .mobile-cal-key i.mark-backup { background: var(--hl-lilac-on); }
/* The review footer can now be empty (itinerary-only events have nothing to confirm). */
body.paper .booking-review-footer:empty { display: none; }
/* Before a primary time is chosen the backup row is locked: fainter still, and inert. */
body.paper .choice-checklist-item:nth-child(2).empty:has(> button:disabled) { opacity: 0.38; }
body.paper .choice-checklist-item:nth-child(2).empty:has(> button:disabled):is(:hover, :focus-within) { opacity: 0.38; }
body.paper .booking-overview.choices-ready .choice-checklist { margin: 16px 0 6px; }
/* ====================================================================================
Choice rows at phone width: condensed, side by side.
==================================================================================== */
body.paper .choice-detail-short, body.paper .choice-tick { display: none; }
@media (max-width: 760px) {
body.paper .choice-checklist { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin: 16px 0 0; }
body.paper .choice-checklist-item { grid-template-columns: minmax(0, 1fr) auto; }
body.paper .choice-checklist-item > button:first-child { min-height: 60px; padding: 8px 8px 8px 10px; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; }
/* Short detail instead of the long one; no status line; the tick replaces the number. */
body.paper .choice-check-copy :is(.choice-detail, small), body.paper .choice-check-state { display: none; }
body.paper .choice-detail-short { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
body.paper .choice-check-copy > .choice-detail-short.choice-cta { color: var(--blue); font-size: 12px; font-weight: 500; }
body.paper .choice-check-copy strong { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.paper .choice-checklist-item.filled .choice-num { display: none; }
body.paper .choice-checklist-item.filled .choice-tick { display: grid; place-items: center; }
body.paper .choice-checklist-item.filled .choice-check-number { background: var(--hl-yellow-on); color: var(--ink); }
body.paper .choice-checklist-item:nth-child(2).filled .choice-check-number { background: var(--hl-lilac-on); }
body.paper .choice-tick .icon { width: 15px; height: 15px; stroke-width: 2.6; }
/* Clear becomes a compact × so the card still fits half the width. */
body.paper .choice-clear { min-width: 0; width: 26px; padding: 0; font-size: 0; }
/* A filled card also carries the ×, so its text column gets every spare pixel. */
body.paper .choice-checklist-item.filled > button:first-child { padding: 8px 2px 8px 8px; gap: 7px; }
body.paper .choice-checklist-item.filled .choice-detail-short { font-size: 10.5px; letter-spacing: -0.01em; }
body.paper .choice-checklist-item.filled .choice-check-copy strong { font-size: 11.5px; letter-spacing: -0.015em; }
body.paper .choice-clear::before { content: "×"; font-size: 17px; line-height: 1; }
/* 36px between the picker's content blocks. */
body.paper .booking-overview .sheet-picker { margin-top: 36px; }
body.paper .booking-overview.choices-ready .choice-checklist { margin: 16px 0 0; }
body.paper .mobile-cal .mobile-agenda-body { margin-top: 36px; padding-top: 36px; }
body.paper .mobile-cal-key { margin-top: 14px; }
body.paper .mobile-list-day + .mobile-list-day { margin-top: 36px; padding-top: 36px; }
body.paper .booking-overview { padding-bottom: calc(36px + env(safe-area-inset-bottom)); }
}
/* The Calendar / List switch now lives on the picker's title line, pushed to the right
(month arrows, when a trip spans months, stay next to the month name). */
body.paper .mobile-cal-head { justify-content: flex-start; gap: 10px; }
body.paper .mobile-cal-head .guest-view-toggle { margin: 0 0 0 auto; }
body.paper .mobile-list .mobile-cal-head { margin-bottom: 18px; }
@media (max-width: 760px) {
body.paper .mobile-cal-head .guest-view-toggle { display: inline-flex; margin: 0 0 0 auto; }
body.paper .mobile-cal-head .guest-view-toggle button { min-height: 34px; padding: 6px 12px; font-size: 12px; }
}
/* Floating "Review" button on the phone picker: back to the review / confirm sheet. */
body.paper .review-fab { display: none; }
@media (max-width: 760px) {
body.paper .review-fab { position: fixed; right: 16px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 20; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 14px 0 16px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--hl-grain), var(--hl-yellow-on); color: var(--ink); box-shadow: 0 10px 24px rgba(70, 52, 30, 0.28); cursor: pointer; font: 600 14px/1 var(--body); }
body.paper .review-fab .icon { width: 19px; height: 19px; }
body.paper .review-fab b { min-width: 22px; height: 22px; padding: 0 6px; display: grid; place-items: center; border-radius: 999px; background: var(--ink); color: #fffaf2; font: 500 11px/1 var(--mono); }
body.paper .review-fab:active { transform: translateY(1px); box-shadow: 0 4px 10px rgba(70, 52, 30, 0.28); }
/* Room so the button never covers the last slot. */
body.paper .booking-overview.selected-plan:not(.review-open) { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
}
/* Host console at phone width: the same Calendar / List switch as the guest side, on the
month line and pushed right, with the Overview button after it. */
body.paper .calendar-wrap > .mobile-cal { padding: 4px 14px 18px; }
@media (max-width: 760px) {
body.paper .calendar-toolbar .calendar-controls { width: 100%; gap: 8px; }
body.paper .calendar-toolbar .month-picker { min-width: 0; flex: 0 1 auto; }
body.paper .calendar-toolbar .calendar-view-switch { display: flex; margin-left: auto; }
body.paper .calendar-toolbar .calendar-view-switch button { min-height: 34px; padding: 6px 12px; font-size: 12px; }
body.paper .calendar-toolbar .view-overview-btn { margin-left: 0; flex: none; }
body.paper .calendar-toolbar .month-static { min-width: 0; }
}
/* "Select →" is the guest's prompt; on the host's own events it would be misleading. */
body.paper .agenda-slot.open[data-owner-event]::after { content: none; }
/* ====================================================================================
Booking confirmed: the ticket slides down into place and confetti rises from below.
Only transforms and opacity are animated, on the ticket itself and on a fixed overlay,
so the layout never moves. Skipped under prefers-reduced-motion (styles.css).
==================================================================================== */
body.paper .ticket-shell.is-celebrating .ticket { animation: ticket-drop 1.1s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes ticket-drop {
from { transform: translateY(-70vh) rotate(-1.2deg); opacity: 0; }
60% { opacity: 1; }
to { transform: none; opacity: 1; }
}
body.paper .confetti { position: fixed; inset: 0; z-index: 40; overflow: hidden; pointer-events: none; }
body.paper .confetti i { position: absolute; left: 50%; bottom: -12px; width: 5px; height: 8px; border-radius: 1.5px; background: var(--hl-yellow-on); opacity: 0; animation: confetti-rise 3s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
body.paper .confetti i.round { width: 5px; height: 5px; border-radius: 50%; }
body.paper .confetti i.strip { width: 3px; height: 10px; }
body.paper .confetti .c-coral { background: var(--hl-coral-on); }
body.paper .confetti .c-blue { background: var(--hl-blue-on); }
body.paper .confetti .c-lilac { background: var(--hl-lilac-on); }
body.paper .confetti .c-orange { background: var(--hl-orange-on); }
@keyframes confetti-rise {
0% { transform: translate(var(--from), 0) rotate(0deg); opacity: 0; }
15% { opacity: 0.55; }
60% { opacity: 0.45; }
100% { transform: translate(var(--to), var(--rise)) rotate(var(--spin)); opacity: 0; }
}
/* Guest details form: everything centred, at every width, to match the centred trip
summary above it. Fields stay full width; their labels and text centre over them. */
body.paper .identity-modal .identity-form { text-align: center; }
body.paper .identity-modal .identity-form > p { margin-inline: auto; max-width: 38ch; }
body.paper .identity-modal .field { justify-items: stretch; }
body.paper .identity-modal .field label, body.paper .identity-modal .party-field legend { width: 100%; text-align: center; }
body.paper .identity-modal .field input { text-align: center; }
body.paper .identity-modal .field-error { text-align: center; }
/* The radio options read as a list, so they stay left-aligned inside their cards. */
body.paper .identity-modal .party-options label { justify-content: flex-start; text-align: left; }
/* The submit button spans the form's full width, like the fields above it. */
body.paper .identity-modal .identity-form > .btn { width: 100%; min-height: 50px; }
body.paper .identity-modal .privacy-line { text-align: center; }
/* Month with its < > arrows, as one group on the left of the picker's title line. */
body.paper .mobile-cal-month { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
body.paper .mobile-cal-month .icon-btn { width: 30px; height: 30px; background: transparent; border-color: transparent; box-shadow: none; }
body.paper .mobile-cal-month .icon-btn .icon { width: 16px; height: 16px; }
body.paper .mobile-cal-month strong { white-space: nowrap; }
@media (max-width: 760px) {
/* Guest's phone bar: a smaller logo, so the whole bar (with the phone's notch allowance)
stays within 120px. */
body.paper .utility:not(:has(.role-switch, .owner-menu)) .logo { font-size: 12px; padding: 0.3em 0 0.6em; }
body.paper .utility:not(:has(.role-switch, .owner-menu)) { min-height: 0; row-gap: 6px; }
/* "When should we meet?" at the same size as the month title below it. */
body.paper .booking-overview h2 { font-size: 18px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; margin: 4px 0 0; }
}
/* 18px between the choice cards and the divider that starts the event details. */
body.paper .booking-review-body .choice-checklist { margin-bottom: 18px; }
body.paper .booking-review-body .choice-checklist + .overview-section { margin-top: 0; }
@media (max-width: 760px) {
body.paper .booking-review-body .choice-checklist { margin-bottom: 18px; }
}
/* The "+" that stands in for the card's number while an open event can be added to it. */
body.paper .choice-num { display: grid; place-items: center; }
body.paper .choice-num .icon { width: 15px; height: 15px; stroke-width: 2.4; }
/* Ticket pages (confirmation, manage booking): the logo sits on the ticket itself, and the
guest's top bar (logo + clock) is dropped so the ticket starts at the top of the page.
The bar stays when it carries the host's Host / Guest switch. */
body.paper .ticket-brand { letter-spacing: 0; text-transform: none; line-height: 1; }
body.paper .ticket-brand .logo { font-size: 11px; padding: 0.35em 0 0.6em; }
body.paper .utility:not(:has(.role-switch, .owner-menu)):has(+ .ticket-shell) { display: none; }
body.paper .utility:not(:has(.role-switch, .owner-menu)) + .ticket-shell { min-height: 100vh; }
/* In the phone preview, keep the ticket clear of the notch. */
html.embedded body.paper .ticket-shell { padding-top: 52px; align-items: flex-start; }
/* Trip title: a plain field like the others, without its own box around it. */
body.paper .trip-title-field { padding: 0; border: 0; border-radius: 0; background: none; }
/* Sync: a small refresh button right after the calendar status in the page header. */
body.paper .sync-btn { width: 24px; height: 24px; margin-left: 2px; padding: 0; display: inline-grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; transition: background-color 0.16s ease-out; }
body.paper .sync-btn .icon { width: 13px; height: 13px; stroke-width: 2.2; }
body.paper .sync-btn:hover { background: var(--hl-blue); color: var(--ink); }
body.paper .sync-btn:active { background: var(--hl-blue-on); }
body.paper .sync-btn.is-syncing { cursor: progress; }
body.paper .sync-btn.is-syncing .icon { animation: sync-spin 0.9s linear infinite; }
@keyframes sync-spin { to { transform: rotate(360deg); } }
@media (max-width: 760px) {
/* Host calendar card at phone width: toolbar, legend, month grid and list all share the
same 14px inset from the card's edges. */
body.paper .calendar-wrap > .calendar-toolbar { padding: 14px; }
body.paper .calendar-wrap > .legend { padding: 11px 14px; }
body.paper .calendar-wrap > .mobile-cal { padding: 4px 14px 18px; }
body.paper .calendar-wrap > .list-agenda { padding: 14px; }
body.paper .calendar-wrap > .event-list .event-row { margin-inline: 14px; }
}
/* ====================================================================================
Event dialog: custom date picker, unboxed same-day row, full-screen on phones.
==================================================================================== */
body.paper .date-native { display: none !important; }
body.paper .date-trigger { min-width: 0; height: 46px; padding: 0 12px; display: flex; align-items: center; gap: 10px; border: 1px solid #cfc4b3; border-radius: 10px; background: #fffdf9; box-shadow: inset 0 1px 2px rgba(70, 52, 30, 0.1); color: var(--ink); cursor: pointer; font: inherit; text-align: left; transition: background-color 0.16s ease-out, border-color 0.16s ease-out; }
body.paper .date-trigger .icon { width: 17px; height: 17px; flex: none; color: var(--muted); }
body.paper .date-trigger span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
body.paper .date-trigger:hover { background: var(--hl-blue); border-color: rgba(70, 52, 30, 0.45); }
body.paper .date-picker { width: min(560px, 100%); }
body.paper .date-picker.time-only { width: min(300px, 100%); }
body.paper .date-picker .range-picker-months { grid-template-columns: 1fr; margin-top: 4px; }
body.paper .date-picker .range-picker-months .setup-range-month:last-of-type { display: block; }
/* "Same-day event" is a plain checkbox line, not a boxed card. */
body.paper .same-day-check { min-height: auto; padding: 0; border: 0; border-radius: 0; }
@media (max-width: 760px) {
/* Add / Edit event fills the screen; the form scrolls between a fixed title bar and a
fixed row of actions. */
body.paper .dialog[data-form="event"] { width: 100%; height: 100dvh; max-height: none; padding: 0; border-radius: 0; display: flex; flex-direction: column; overflow: hidden; }
body.paper .dialog[data-form="event"] .dialog-head { flex: none; margin: 0; padding: 16px 18px 12px; border-bottom: 1px solid var(--line); }
body.paper .dialog[data-form="event"] .dialog-grid { flex: 1 1 auto; min-height: 0; overflow-y: auto; align-content: start; grid-auto-rows: max-content; padding: 18px; }
body.paper .dialog[data-form="event"] .dialog-foot { flex: none; margin: 0; padding: 12px 18px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--paper-bright); box-shadow: 0 -8px 20px rgba(70, 52, 30, 0.06); }
body.paper .dialog[data-form="event"] .dialog-foot .btn-primary { flex: 1; }
}
/* One button per row for date + time (the native inputs are hidden behind it). */
body.paper .date-time-inputs, body.paper .date-time-inputs.same-day { grid-template-columns: minmax(0, 1fr); }
/* Date + time picker body: preset times on the left, calendar on the right. */
body.paper .dt-body { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 22px; margin-top: 6px; }
body.paper .date-picker.time-only .dt-body { grid-template-columns: 1fr; }
body.paper .dt-times { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
body.paper .dt-times .label { margin: 0; height: 34px; display: flex; align-items: center; }
body.paper .dt-time-list { flex: 1 1 0; min-height: 180px; max-height: 262px; overflow-y: auto; display: grid; gap: 4px; align-content: start; padding-right: 4px; }
body.paper .dt-time-list button { height: 36px; flex: none; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--ink); cursor: pointer; font: 500 14px/1 var(--body); font-variant-numeric: tabular-nums; text-align: left; padding: 0 12px; transition: background-color 0.12s ease-out; }
body.paper .dt-time-list button:hover { background: var(--hl-blue); }
body.paper .dt-time-list button.active { background: var(--hl-grain), var(--hl-blue-on); border-color: var(--ink); font-weight: 600; }
body.paper .dt-custom { display: grid; gap: 5px; padding-top: 10px; border-top: 1px solid var(--line); }
body.paper .dt-custom span { color: var(--muted); font: 500 10px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
body.paper .dt-custom input { width: 100%; height: 40px; padding: 0 10px; border: 1px solid #cfc4b3; border-radius: 9px; background: #fffdf9; color: var(--ink); font: inherit; font-variant-numeric: tabular-nums; }
body.paper .dt-custom.active input { border-color: var(--ink); background: var(--hl-blue); }
body.paper .date-picker .dt-calendar { margin-top: 0; }
@media (max-width: 680px) {
/* Calendar first, then the times as a second row: a sideways-scrolling strip of presets
with the custom time beside its label underneath. */
body.paper .dt-body { grid-template-columns: 1fr; gap: 14px; }
body.paper .dt-times { order: 2; padding-top: 14px; border-top: 1px solid var(--line); }
body.paper .dt-times .label { height: auto; }
body.paper .dt-time-list { flex: none; min-height: 0; max-height: none; display: flex; overflow-x: auto; overflow-y: hidden; gap: 6px; padding: 0 0 6px; }
body.paper .dt-time-list button { height: 38px; border-color: #cfc4b3; padding: 0 14px; }
body.paper .dt-custom { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; }
body.paper .date-picker.time-only .dt-times { border-top: 0; padding-top: 0; }
}
/* Wider screens: calendar on the left, the time column to its right. */
@media (min-width: 681px) {
body.paper .date-picker:not(.time-only) .dt-body { grid-template-columns: minmax(0, 1fr) 132px; }
body.paper .date-picker:not(.time-only) .dt-times { order: 2; padding-left: 22px; margin-left: -6px; border-left: 1px solid var(--line); }
body.paper .date-picker:not(.time-only) .dt-calendar { order: 1; }
}
/* The chosen date/time (or range length) at the foot of a picker is the result, so it reads
as such: ink colour, larger, medium weight. */
body.paper .range-picker-count { color: var(--ink); font-size: 16px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
/* Calendar chips are stacked at a fixed 27px pitch, so each must stay one line tall: a long
time range no longer wraps and pushes the chip into the one below. The attendee badge is
compact (one badge + a count), which leaves the time room to show in full. */
body.paper .slot { height: 23px; min-height: 23px; flex-wrap: nowrap; }
body.paper .slot .agenda-slot-time { flex: 0 1 auto; white-space: nowrap; }
body.paper .slot { gap: 4px; }
body.paper .slot .mini-people { flex: none; padding-left: 0; }
body.paper .slot .mini-capacity { margin-left: 2px; font-size: 8px; }
/* The time is the part that gives way if a cell is ever too narrow for both. */
body.paper .slot .agenda-slot-time { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
body.paper .slot > .icon { flex: none; }
/* ====================================================================================
Day popover — full list of a day's events, from the "+N events" card in a day cell.
==================================================================================== */
body.paper .slot-overflow { height: 23px; min-height: 23px; bottom: auto; top: calc(34px + 3 * 27px); padding: 0 7px; display: flex; align-items: center; border-style: dashed; background: transparent; font-weight: 600; }
body.paper .slot-overflow:hover, body.paper .slot-overflow:focus-visible { background: var(--hl-blue); border-color: rgba(70, 52, 30, 0.45); border-style: solid; color: var(--ink); }
body.paper .day-popover { position: fixed; z-index: 120; width: 300px; max-height: min(420px, calc(100vh - 24px)); display: flex; flex-direction: column; border: 1px solid var(--line-dark); border-radius: 16px; background: var(--paper-bright); box-shadow: 0 2px 4px rgba(70, 52, 30, 0.14), 0 22px 50px rgba(70, 52, 30, 0.24); animation: day-popover-in 0.16s ease-out; }
@keyframes day-popover-in { from { opacity: 0; transform: translateY(4px); } }
body.paper .day-popover header { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 14px 12px 16px; border-bottom: 1px solid var(--line); }
body.paper .day-popover header span { display: grid; gap: 2px; min-width: 0; }
body.paper .day-popover header strong { font: 500 16px/1.2 var(--display); letter-spacing: -0.02em; }
body.paper .day-popover header small { color: var(--muted); font: 500 10px/1.2 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
body.paper .day-popover header .icon-btn { width: 32px; height: 32px; flex: none; }
body.paper .day-popover-list { overflow-y: auto; padding: 8px; display: grid; gap: 6px; }
body.paper .day-popover-row { width: 100%; padding: 10px 12px; display: grid; gap: 2px; border: 1px solid rgba(70, 52, 30, 0.22); border-radius: 10px; background: var(--hl-grain), var(--hl-yellow); color: var(--ink); cursor: pointer; text-align: left; font: inherit; transition: background-color 0.14s ease-out; }
body.paper .day-popover-row:hover, body.paper .day-popover-row:focus-visible { background: var(--hl-grain), color-mix(in srgb, var(--hl-yellow) 55%, var(--hl-yellow-on)); border-color: rgba(70, 52, 30, 0.5); }
body.paper .day-popover-row.unavailable { background: repeating-linear-gradient(-45deg, #ece3d5 0 4px, #fffaf2 4px 8px); color: var(--muted); }
body.paper .day-popover-row strong { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.paper .day-popover-time { font: 500 11px/1.2 var(--mono); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
body.paper .day-popover-row small { font-size: 11px; color: var(--muted); }
/* Host console title: same heading style as the trip title on the guest's details ticket
(medium weight, tight tracking, up to 44px). */
body.paper .owner-header h1 { font-size: clamp(32px, 4.2vw, 44px); font-weight: 500; line-height: 1; letter-spacing: -0.045em; }
@media (max-width: 760px) {
body.paper .owner-header h1 { font-size: clamp(32px, 8vw, 44px); }
}
/* The title is clipped to two lines (overflow: hidden), so at line-height 1 the tails of
letters like "y" and "p" were cut off. A little more line height gives them room. */
body.paper .owner-header h1 { line-height: 1.18; }
/* Guest details ticket: both pieces carry a subtle pressed-paper texture (the reference
photo with its average lifted to near-white, multiplied over the ticket's cream so the
grain shows without greying the paper). One image stretched per piece, so no seams. */
body.paper .identity-main :is(.trip-stops, .identity-modal) {
background: url("assets/paper-texture.jpg") center / cover no-repeat, #fffdf9;
background-blend-mode: multiply, normal;
}
/* Host's floating event card: the same pressed-paper texture as the guest details ticket,
in place of the generated grain and mottle. --note-paper feeds the masked ::before layer
(and the card itself on phones), so the torn edge is still cut from this one fill. */
body.paper .owner-event-overview { --note-paper: url("assets/paper-texture.jpg") center / cover no-repeat, #fffdf9; }
body.paper .owner-event-overview::before { background-blend-mode: multiply, normal; }
@media (max-width: 760px) {
body.paper .owner-event-overview { background-blend-mode: multiply, normal; }
}
/* ====================================================================================
Toasts: drop in from the top centre, above dialogs, styled like the rest of the UI —
a paper pill with an ink outline and a pastel icon badge (yellow = done, coral = problem,
blue = information) instead of a solid green or red bar.
==================================================================================== */
body.paper .toast-region { top: calc(16px + env(safe-area-inset-top)); bottom: auto; z-index: 190; width: auto; max-width: min(92vw, 520px); display: flex; justify-content: center; }
body.paper .toast, body.paper .toast.success, body.paper .toast.error { min-height: 46px; padding: 8px 18px 8px 9px; gap: 10px; border: 1.5px solid var(--ink); border-radius: 999px; background: #fffdf9; color: var(--ink); box-shadow: 0 10px 28px rgba(70, 52, 30, 0.2); font-size: 14px; font-weight: 500; line-height: 1.3; animation: toast-drop 0.32s cubic-bezier(0.22, 1, 0.36, 1); }
body.paper .toast .icon { width: 28px; height: 28px; padding: 6px; flex: none; border-radius: 50%; background: var(--hl-grain), var(--hl-blue-on); color: var(--ink); stroke-width: 2.4; }
body.paper .toast.success .icon { background: var(--hl-grain), var(--hl-yellow-on); }
body.paper .toast.error .icon { background: var(--hl-grain), var(--hl-coral-on); }
@keyframes toast-drop { from { transform: translateY(-18px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 760px) {
/* Longer messages wrap on phones, so the pill relaxes into a rounded card. */
body.paper .toast, body.paper .toast.success, body.paper .toast.error { border-radius: 18px; }
}
html.embedded body.paper .toast-region { top: 48px; }
/* Ticket perforation, embossed: each dash is a small pressed slot — a soft dark groove with
a light lower lip, as if punched into the paper — instead of a flat printed dashed line.
Drawn as two rows of repeating dashes (groove, then highlight) on the seam. */
body.paper :is(.identity-modal, .ticket-bottom)::before {
top: -2px;
height: 4px;
border: 0;
background:
linear-gradient(90deg, rgba(38, 34, 29, 0.34) 0 6px, transparent 6px) 0 0 / 11px 2px repeat-x,
linear-gradient(90deg, rgba(38, 34, 29, 0.12) 0 6px, transparent 6px) 0 1px / 11px 2px repeat-x,
linear-gradient(90deg, rgba(255, 255, 255, 0.95) 0 6px, transparent 6px) 0 3px / 11px 1px repeat-x;
}
/* Guest / Events tabs on the host's booking detail card. */
body.paper .detail-tabs { display: inline-flex; margin: 14px 0 0; }
body.paper .detail-tabs button { min-height: 34px; padding: 6px 14px; font-size: 12px; }
body.paper .booking-host-overview .detail-tabs + .overview-section { margin-top: 14px; }
/* An event row in the guest's Events tab is a button that opens the event's own card. */
body.paper .meta-line-link { width: calc(100% + 20px); margin: 4px -10px; padding: 8px 10px; border: 0; border-radius: 11px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; align-items: flex-start; transition: background-color 0.16s ease-out; }
body.paper .meta-line-link p { flex: 1; min-width: 0; }
body.paper .meta-line-link > .icon:last-child { align-self: center; width: 16px; height: 16px; color: var(--muted); }
body.paper .meta-line-link:hover, body.paper .meta-line-link:focus-visible { background: var(--hl-blue); }
body.paper .meta-line-link:active { background: var(--hl-blue-on); }
/* Condensed desktop (the side column has dropped below the calendar): the event card opens
as a centred, wider popup over a 24% black overlay instead of appearing far down the page.
Clicking the overlay closes it. (Phones keep their full-screen card.) */
body.paper .event-overview-backdrop { display: none; }
@media (min-width: 761px) and (max-width: 1050px) {
body.paper .event-overview-backdrop { display: block; position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, 0.24); animation: overlay-in 0.18s ease-out; }
/* Same paper card as the side-column version, torn edge included: the fill stays on the
masked ::before layer, so the popup itself has no background, clip or box shadow — the
shadow is a drop-shadow that follows the torn outline. */
body.paper .owner-event-overview:not(.booking-host-overview) { position: fixed; z-index: 61; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(640px, calc(100vw - 48px)); margin: 0; padding: 24px 28px 30px; border-radius: 16px 16px 0 0; background: none; filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.26)); animation: popup-in 0.2s ease-out; }
}
@keyframes overlay-in { from { opacity: 0; } }
@keyframes popup-in { from { opacity: 0; transform: translate(-50%, calc(-50% + 8px)); } }
/* Trip settings: no helper lines under the fields. */
body.paper .settings-dialog .field-hint { display: none; }
/* Guest's Events tab: each chosen event as a block in the event-card format. */
body.paper .choice-event + .choice-event { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line-dark); }
body.paper .choice-event-head { width: calc(100% + 20px); margin: 0 -10px 4px; padding: 8px 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 0; border-radius: 11px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background-color 0.16s ease-out; }
body.paper .choice-event-head strong { display: block; font: 500 20px/1.15 var(--display); letter-spacing: -0.025em; }
body.paper .choice-event-head .icon { width: 16px; height: 16px; flex: none; color: var(--muted); }
body.paper .choice-event-head:hover, body.paper .choice-event-head:focus-visible { background: var(--hl-blue); }
body.paper .choice-event-head:active { background: var(--hl-blue-on); }
/* ====================================================================================
Condensed widths (1050px and below, phones included): a lighter top bar and page title.
==================================================================================== */
@media (max-width: 1050px) {
/* No date / time / timezone in the bar. */
body.paper .utility-meta { display: none; }
body.paper .utility { min-height: 60px; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); row-gap: 0; padding-top: 8px; padding-bottom: 8px; }
/* Smaller logo. */
body.paper .utility .logo { font-size: 12px; padding: 0.3em 0 0.6em; }
/* "Host / Guest" instead of "Host / Guest preview", so the switch stays on one line. */
body.paper .role-long { display: none; }
body.paper .role-switch button { white-space: nowrap; padding: 7px 12px; }
/* Page title at heading-3 size. */
body.paper .owner-header h1 { font-size: 28px; letter-spacing: -0.035em; line-height: 1.2; }
}
@media (max-width: 760px) {
body.paper .utility-center { justify-self: end; grid-column: 3; }
body.paper .utility:not(:has(.role-switch, .owner-menu)) { grid-template-columns: 1fr; }
body.paper .owner-header h1 { font-size: 28px; }
}
html.embedded body.paper .utility { padding-top: 40px; }