:root { --font-sans: "Space Grotesk", "Trebuchet MS", sans-serif; --font-display: "Fraunces", "Georgia", serif; --bg-canvas: #f5efe7; --bg-canvas-soft: #fcf8f4; --bg-canvas-deep: #efe4d7; --surface: rgba(255, 255, 255, 0.92); --surface-strong: #ffffff; --surface-soft: #faf5ef; --surface-tint: #fff4e8; --ink-strong: #241912; --ink: #4b392e; --ink-muted: #766355; --ink-soft: #a28c7c; --accent: #d06f37; --accent-strong: #ab531f; --accent-soft: #fff0e2; --line-soft: rgba(80, 54, 37, 0.11); --line: rgba(80, 54, 37, 0.18); --line-strong: rgba(80, 54, 37, 0.26); --transport: #b95c28; --flight: #c77533; --stay: #9b5128; --success: #12775b; --danger: #b42318; --danger-soft: #ffe7e2; --radius-xs: 10px; --radius-sm: 14px; --radius-md: 20px; --radius-lg: 28px; --shadow-xs: 0 8px 18px rgba(53, 35, 25, 0.06); --shadow-sm: 0 16px 34px rgba(53, 35, 25, 0.09); --shadow-md: 0 24px 60px rgba(53, 35, 25, 0.12); --shadow-lg: 0 28px 80px rgba(53, 35, 25, 0.16); --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-7: 1.75rem; --space-8: 2rem; --space-9: 2.5rem; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { min-height: 100vh; font-family: var(--font-sans); color: var(--ink); background: radial-gradient(circle at 10% 0%, rgba(208, 111, 55, 0.18), transparent 30%), radial-gradient(circle at 90% 10%, rgba(223, 166, 124, 0.2), transparent 34%), linear-gradient(180deg, #fffaf6 0%, var(--bg-canvas-soft) 18%, var(--bg-canvas) 60%, var(--bg-canvas-deep) 100%); } a { color: var(--accent-strong); text-decoration-color: rgba(171, 83, 31, 0.35); } [hidden] { display: none !important; } .icon-definitions { position: absolute; width: 0; height: 0; overflow: hidden; } .icon { width: 1rem; height: 1rem; display: inline-block; flex-shrink: 0; } h1, h2, h3, h4 { margin: 0; color: var(--ink-strong); letter-spacing: -0.03em; } h1, h2, h3 { font-family: var(--font-display); } h1 { font-size: clamp(2.35rem, 4vw, 4rem); line-height: 0.98; } h2 { font-size: clamp(1.45rem, 2.3vw, 2.2rem); line-height: 1.05; } h3 { font-size: clamp(1.05rem, 1.6vw, 1.4rem); line-height: 1.12; } p { margin: 0; } .eyebrow, .section-eyebrow, .mini-map-kicker, .day-group-kicker { font-size: 0.73rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; color: var(--ink-soft); } .hero-subtitle, .aux-text, .field-helper { color: var(--ink-muted); font-size: 0.95rem; line-height: 1.55; } .field-helper { font-size: 0.78rem; } .field-helper-strong { color: var(--accent-strong); font-weight: 600; } .reveal { opacity: 0; transform: translateY(14px); animation: panel-rise 320ms ease forwards; } @keyframes panel-rise { to { opacity: 1; transform: translateY(0); } } .app-header { position: sticky; top: 0; z-index: 40; backdrop-filter: blur(16px); background: rgba(252, 247, 242, 0.76); border-bottom: 1px solid var(--line-soft); } .app-header-inner { width: min(1280px, calc(100% - 2rem)); margin: 0 auto; min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); } .app-header-left { display: flex; align-items: center; gap: var(--space-6); min-width: 0; } .brand { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; color: inherit; } .brand-mark { width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center; font-weight: 800; font-size: 0.9rem; letter-spacing: 0.08em; color: #ffffff; background: linear-gradient(150deg, var(--accent), var(--accent-strong)); box-shadow: 0 14px 28px rgba(171, 83, 31, 0.28); } .brand-meta { display: grid; gap: 0.15rem; } .brand-title { font-family: var(--font-display); font-size: 1.2rem; line-height: 1; color: var(--ink-strong); } .brand-subtitle { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); } .app-nav { display: flex; align-items: center; gap: var(--space-2); } .app-nav-link { padding: 0.45rem 0.8rem; border-radius: 999px; font-size: 0.87rem; font-weight: 600; color: var(--ink-muted); text-decoration: none; transition: background-color 140ms ease, color 140ms ease; } .app-nav-link:hover { color: var(--ink-strong); background: rgba(255, 255, 255, 0.66); } .app-nav-link.is-active { color: var(--ink-strong); background: #ffffff; box-shadow: var(--shadow-xs); } .account-cluster, .account-pill { display: flex; align-items: center; gap: var(--space-3); } .account-pill { padding: 0.45rem 0.55rem; border-radius: 999px; background: rgba(255, 255, 255, 0.76); border: 1px solid var(--line-soft); } .account-avatar { width: 2rem; height: 2rem; border-radius: 999px; display: grid; place-items: center; background: linear-gradient(140deg, #f5d2b8, #eec0a1); color: var(--ink-strong); font-weight: 800; font-size: 0.82rem; } .account-meta { display: grid; gap: 0.12rem; } .account-label { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-soft); } .logout-form { margin: 0; } .app-page, .page-shell { width: min(1480px, calc(100% - 2rem)); margin: 1.75rem auto 3rem; } .app-page { display: grid; gap: var(--space-6); } .page-shell { display: grid; gap: var(--space-5); } .page-shell-compact { width: min(760px, calc(100% - 1.5rem)); justify-content: center; } .trip-summary, .panel, .trip-hero-card, .builder-form-card, .builder-preview-card, .workspace-hero, .workspace-main, .aside-card, .stats-strip { border: 1px solid var(--line-soft); border-radius: var(--radius-lg); background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(251, 246, 240, 0.94)), var(--surface); box-shadow: var(--shadow-sm); } .trip-summary, .panel { padding: var(--space-7); } .panel-head { display: grid; gap: 0.35rem; } .page-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); padding: var(--space-2) 0; } .page-intro-copy { display: grid; gap: var(--space-3); max-width: 58rem; } .page-intro-actions { display: flex; align-items: center; gap: var(--space-3); } .stats-strip { padding: var(--space-4); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-3); } .stat-card, .overview-stat, .overview-mix-item { border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 0.95rem 1rem; background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 242, 236, 0.92)); } .stat-card { display: grid; gap: 0.2rem; } .stat-label { color: var(--ink-soft); font-size: 0.78rem; font-weight: 600; } .stat-value { color: var(--ink-strong); font-size: 1.2rem; font-weight: 800; } .button-primary, .button-secondary, .ghost-button, .chip-button, button[type="submit"] { border-radius: 999px; border: 1px solid transparent; padding: 0.68rem 1rem; font: inherit; font-size: 0.9rem; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; text-decoration: none; transition: transform 140ms ease, box-shadow 140ms ease, background-color 140ms ease, border-color 140ms ease, color 140ms ease; } .button-primary, button[type="submit"] { color: #ffffff; background: linear-gradient(145deg, var(--accent), var(--accent-strong)); box-shadow: 0 16px 28px rgba(171, 83, 31, 0.22); } .button-primary:hover, button[type="submit"]:hover { transform: translateY(-1px); box-shadow: 0 18px 34px rgba(171, 83, 31, 0.28); } .button-secondary, .chip-button { color: var(--ink); background: rgba(255, 255, 255, 0.84); border-color: var(--line-soft); } .button-secondary:hover, .chip-button:hover { color: var(--ink-strong); border-color: var(--line); background: #ffffff; } .button-block { width: 100%; } .is-disabled, button:disabled, a.is-disabled { opacity: 0.55; pointer-events: none; } .ghost-button { padding: 0.45rem 0.75rem; color: var(--ink-muted); background: transparent; border-color: transparent; } .ghost-button:hover { color: var(--ink-strong); background: rgba(255, 255, 255, 0.72); border-color: var(--line-soft); } .ghost-button.danger, .danger-button { color: #ffffff; background: linear-gradient(145deg, #d14b42, #ab231e); border-color: transparent; } .status-badge, .meta-pill, .city-chip, .reservation-type-pill, .price-badge { display: inline-flex; align-items: center; gap: 0.35rem; border-radius: 999px; border: 1px solid var(--line-soft); padding: 0.28rem 0.7rem; background: rgba(255, 255, 255, 0.82); color: var(--ink); font-size: 0.75rem; font-weight: 700; line-height: 1; } .meta-pill-soft, .city-chip-muted { background: var(--surface-soft); color: var(--ink-muted); } .price-badge { color: var(--ink-strong); background: var(--accent-soft); border-color: rgba(208, 111, 55, 0.18); } .status-upcoming { color: #965123; background: #fff0e4; border-color: #f0c9ab; } .status-ongoing { color: #8b431c; background: #ffe6d5; border-color: #efba94; } .status-past { color: #7b6658; background: #f4ece5; border-color: #e4d6ca; } .city-chip-row, .trip-hero-meta, .hero-actions, .day-group-cities { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; } .section-heading { display: flex; align-items: end; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); } .section-heading-compact { margin-bottom: var(--space-3); } .section-count { min-width: 2.2rem; height: 2.2rem; border-radius: 999px; display: grid; place-items: center; background: #ffffff; border: 1px solid var(--line-soft); color: var(--ink-strong); font-weight: 800; } .feedback { min-height: 1.2rem; font-size: 0.88rem; } .feedback[data-state="ok"] { color: var(--success); } .feedback[data-state="error"] { color: var(--danger); } .empty-state, .empty-state-card, .empty-state-block { color: var(--ink-muted); } .empty-state { padding: var(--space-3) 0; } .empty-state-card, .empty-state-block { border: 1px dashed var(--line); border-radius: var(--radius-md); background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(253, 244, 236, 0.96)); padding: var(--space-8); display: grid; gap: var(--space-3); justify-items: start; } .empty-state-card strong, .empty-state-block strong { color: var(--ink-strong); font-size: 1.08rem; } .empty-state-card-large { justify-items: center; text-align: center; } button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid rgba(208, 111, 55, 0.22); outline-offset: 2px; } input, select, textarea { width: 100%; border-radius: 14px; border: 1px solid var(--line-soft); background: rgba(255, 255, 255, 0.9); color: var(--ink-strong); font: inherit; padding: 0.78rem 0.88rem; transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease; } input::placeholder, textarea::placeholder { color: #af9b8d; } input:hover, select:hover, textarea:hover { border-color: var(--line); } input:focus, select:focus, textarea:focus { border-color: rgba(208, 111, 55, 0.46); box-shadow: 0 0 0 4px rgba(208, 111, 55, 0.12); } textarea { min-height: 108px; resize: vertical; } .form-field { display: grid; gap: 0.42rem; font-size: 0.92rem; } .field-label { color: var(--ink); font-size: 0.82rem; font-weight: 700; } .date-preview { color: var(--ink-soft); font-size: 0.74rem; } .full-span { grid-column: 1 / -1; } .native-select-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap; pointer-events: none; } .segmented-control, .workspace-tabs { display: inline-flex; align-items: center; gap: 0.2rem; padding: 0.25rem; border-radius: 999px; border: 1px solid var(--line-soft); background: rgba(255, 255, 255, 0.76); } .segment, .workspace-tab { border: 0; border-radius: 999px; background: transparent; color: var(--ink-muted); padding: 0.52rem 0.92rem; font: inherit; font-size: 0.84rem; font-weight: 700; cursor: pointer; } .segment.is-active, .workspace-tab.is-active { color: #ffffff; background: linear-gradient(145deg, var(--accent), var(--accent-strong)); box-shadow: 0 12px 22px rgba(171, 83, 31, 0.22); } .dynamic-fields { padding-top: var(--space-4); border-top: 1px dashed var(--line-soft); } .type-specific-grid, .field-advanced-grid, .builder-grid, .reservation-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); } .reservation-form { margin-top: var(--space-4); } .type-fields-intro { display: grid; gap: 0.25rem; } .type-fields-intro strong { color: var(--ink-strong); font-size: 0.95rem; } .field-advanced { border: 1px dashed var(--line); border-radius: var(--radius-sm); padding: 0.8rem 0.95rem; background: rgba(250, 244, 237, 0.76); } .field-advanced > summary { cursor: pointer; font-size: 0.82rem; font-weight: 700; color: var(--ink-muted); } .field-advanced[open] > summary { margin-bottom: 0.8rem; } .city-choice-card { padding: 0.92rem; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 242, 236, 0.9)); } .city-choice-select { background: var(--surface-soft); } .trip-hero-card { padding: var(--space-8); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr); gap: var(--space-7); overflow: hidden; position: relative; } .trip-hero-card::before, .workspace-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at top left, rgba(208, 111, 55, 0.14), transparent 30%), radial-gradient(circle at bottom right, rgba(205, 156, 120, 0.16), transparent 34%); pointer-events: none; } .trip-hero-main, .trip-hero-visual { position: relative; z-index: 1; } .trip-hero-main { display: grid; gap: var(--space-4); } .trip-hero-copy { display: grid; gap: var(--space-3); } .trip-hero-dates, .trip-card-dates, .workspace-date-range { font-size: 0.98rem; color: var(--ink-muted); } .mini-map-card { min-height: 180px; padding: var(--space-5); border-radius: calc(var(--radius-md) + 2px); border: 1px solid rgba(208, 111, 55, 0.12); background: radial-gradient(circle at 0% 0%, rgba(208, 111, 55, 0.12), transparent 32%), linear-gradient(180deg, rgba(255, 247, 239, 0.98), rgba(250, 240, 230, 0.96)); display: grid; gap: var(--space-4); } .mini-map-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); } .mini-map-status { color: var(--ink-soft); font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; } .route-track { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; } .route-track-preview { min-height: 2.4rem; } .route-track-stop { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.7rem; border-radius: 999px; background: rgba(255, 255, 255, 0.78); border: 1px solid var(--line-soft); } .route-track-dot { width: 0.56rem; height: 0.56rem; border-radius: 999px; background: linear-gradient(145deg, var(--accent), var(--accent-strong)); box-shadow: 0 0 0 4px rgba(208, 111, 55, 0.12); } .route-track-name, .route-track-more, .route-track-empty { font-size: 0.78rem; font-weight: 600; } .route-track-more, .route-track-empty { color: var(--ink-muted); } .dashboard-sections { display: grid; gap: var(--space-8); } .trip-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-4); } .trip-grid-past { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .trip-card { position: relative; display: grid; gap: var(--space-4); min-height: 250px; padding: var(--space-5); border: 1px solid var(--line-soft); border-radius: var(--radius-md); background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(249, 243, 236, 0.94)), var(--surface); box-shadow: var(--shadow-xs); overflow: hidden; transition: transform 160ms ease, box-shadow 180ms ease, border-color 180ms ease; } .trip-card-action, .trip-card-body { position: relative; z-index: 2; } .trip-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); border-color: var(--line); } .trip-card-link { position: absolute; inset: 0; z-index: 1; } .trip-card-top, .trip-card-meta-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; position: relative; z-index: 2; } .trip-card-body { display: grid; gap: var(--space-3); position: relative; z-index: 2; } .builder-step-list { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; } .builder-step { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.5rem 0.75rem; border-radius: 999px; background: rgba(255, 255, 255, 0.78); border: 1px solid var(--line-soft); color: var(--ink-muted); font-size: 0.82rem; font-weight: 700; } .builder-step-number { width: 1.6rem; height: 1.6rem; border-radius: 999px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-strong); font-size: 0.76rem; } .builder-layout, .workspace-layout { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(340px, 0.78fr); gap: var(--space-5); align-items: start; } .builder-form-card, .builder-preview-card, .workspace-main { padding: var(--space-7); } .builder-form-card, .builder-preview-card { display: grid; gap: var(--space-6); } .builder-preview-card { position: sticky; top: 96px; align-self: start; } .builder-section { display: grid; gap: var(--space-4); } .builder-section + .builder-section { padding-top: var(--space-5); border-top: 1px solid var(--line-soft); } .builder-section-head { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start; } .section-number, .preview-stop-index, .route-stack-index, .route-stop-number { width: 2.2rem; height: 2.2rem; border-radius: 999px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-strong); font-size: 0.8rem; font-weight: 800; } .route-stops-card, .builder-review-card { border: 1px solid var(--line-soft); border-radius: var(--radius-md); background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(249, 243, 236, 0.92)); padding: var(--space-5); display: grid; gap: var(--space-4); } .route-stops-head, .builder-action-row, .builder-preview-head, .workspace-section-head, .day-group-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; } .route-stop-list, .preview-stop-list, .route-stack, .city-list { display: grid; gap: var(--space-3); } .route-stop-card { position: relative; padding-left: 1rem; } .route-stop-card::before { content: ""; position: absolute; left: 0.3rem; top: 0; bottom: -0.75rem; width: 2px; background: linear-gradient(180deg, rgba(208, 111, 55, 0.24), rgba(208, 111, 55, 0.04)); } .route-stop-card:last-child::before { bottom: 50%; } .route-stop-card-inner { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: start; padding: var(--space-4); border-radius: var(--radius-sm); border: 1px solid var(--line-soft); background: rgba(255, 255, 255, 0.92); box-shadow: var(--shadow-xs); } .route-stop-card[data-match-kind="saved"] .route-stop-card-inner { border-color: rgba(208, 111, 55, 0.24); } .route-stop-card[data-match-kind="manual"] .route-stop-card-inner { background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(250, 244, 238, 0.95)); } .route-stop-card-ghost { opacity: 0.45; } .route-stop-handle { width: 2.3rem; height: 2.3rem; padding: 0; border-radius: 12px; border: 1px solid var(--line-soft); background: var(--surface-soft); display: grid; place-items: center; cursor: grab; } .route-stop-handle span { display: block; width: 0.85rem; height: 2px; border-radius: 999px; background: var(--ink-soft); margin: 1px 0; } .route-stop-content, .preview-stop-copy, .route-stack-copy { display: grid; gap: 0.28rem; } .preview-stop-row, .route-stack-stop { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: center; } .workspace-hero { position: relative; padding: var(--space-8); display: grid; gap: var(--space-5); overflow: hidden; } .workspace-hero-copy, .workspace-main, .workspace-aside { position: relative; z-index: 1; } .workspace-hero-copy { display: grid; gap: var(--space-3); } .breadcrumb-link { width: fit-content; padding: 0.35rem 0.7rem; border-radius: 999px; background: rgba(255, 255, 255, 0.82); border: 1px solid var(--line-soft); font-size: 0.76rem; font-weight: 700; text-decoration: none; } .workspace-hero-actions, .day-group-actions, .reservation-card-top, .reservation-route-row, .reservation-meta-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; } .workspace-main { display: grid; gap: var(--space-5); } .workspace-view { display: grid; gap: var(--space-4); } .workspace-aside { display: grid; gap: var(--space-4); align-self: start; position: sticky; top: 96px; } .aside-card { padding: var(--space-5); display: grid; gap: var(--space-4); } .overview-stats-grid, .overview-mix-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); } .overview-stat, .overview-mix-item { display: grid; gap: 0.2rem; } .overview-stat span, .overview-mix-item span { color: var(--ink-soft); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; } .overview-stat strong, .overview-mix-item strong { color: var(--ink-strong); font-size: 1rem; } .day-group { border: 1px solid var(--line-soft); border-radius: var(--radius-md); background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(249, 243, 236, 0.92)); padding: var(--space-4); display: grid; gap: var(--space-4); } .day-group-anchor { display: flex; align-items: center; gap: var(--space-3); } .day-group-dot { width: 0.8rem; height: 0.8rem; border-radius: 999px; background: linear-gradient(145deg, var(--accent), var(--accent-strong)); box-shadow: 0 0 0 6px rgba(208, 111, 55, 0.12); } .day-group-toggle { border: 1px solid var(--line-soft); border-radius: 999px; background: #ffffff; color: var(--ink-muted); font: inherit; font-size: 0.77rem; font-weight: 700; padding: 0.38rem 0.72rem; cursor: pointer; } .day-group-list { position: relative; display: grid; gap: var(--space-3); padding-left: 1rem; } .day-group-list::before { content: ""; position: absolute; left: 0.2rem; top: 0; bottom: 0; width: 2px; border-radius: 999px; background: linear-gradient(180deg, rgba(208, 111, 55, 0.22), rgba(208, 111, 55, 0.04)); } .reservation-card { display: grid; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-sm); border: 1px solid var(--line-soft); border-left: 5px solid var(--transport); background: #ffffff; box-shadow: var(--shadow-xs); } .reservation-head-actions { display: inline-flex; gap: 0.2rem; } .reservation-route-copy { display: grid; gap: 0.3rem; } .reservation-route-label { color: var(--ink); font-size: 0.84rem; font-weight: 700; } .route-arrow { color: var(--accent-strong); font-weight: 800; } .reservation-title { font-size: 1rem; } .reservation-card.type-flight { border-left-color: var(--flight); } .reservation-card.type-accommodation { border-left-color: var(--stay); } .reservation-details-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); } .reservation-detail { display: grid; gap: 0.18rem; padding: 0.8rem; border-radius: 14px; background: var(--surface-soft); } .reservation-detail span { color: var(--ink-soft); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; } .reservation-detail strong { color: var(--ink-strong); font-size: 0.82rem; line-height: 1.35; } .reservation-notes { padding-top: var(--space-3); border-top: 1px dashed var(--line-soft); color: var(--ink-muted); font-size: 0.8rem; line-height: 1.55; } .skeleton-line, .reservation-card-skeleton { border-radius: 999px; background: linear-gradient(90deg, rgba(239, 229, 220, 0.45), rgba(255, 255, 255, 0.9), rgba(239, 229, 220, 0.45)); background-size: 200% 100%; animation: pulse 1.3s ease-in-out infinite; } .skeleton-line { height: 0.9rem; } .skeleton-line-short { width: 28%; } .skeleton-line-medium { width: 40%; } .reservation-card-skeleton { height: 144px; border-radius: var(--radius-sm); } @keyframes pulse { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .map-view { display: grid; gap: var(--space-4); } .map-layer-filters { display: inline-flex; gap: var(--space-2); flex-wrap: wrap; } .map-layer-chip { border: 1px solid var(--line-soft); border-radius: 999px; background: #ffffff; color: var(--ink-muted); font: inherit; font-size: 0.82rem; font-weight: 700; padding: 0.36rem 0.7rem; display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer; } .map-layer-chip.is-active { color: var(--ink-strong); background: var(--accent-soft); } .legend-dot { width: 0.58rem; height: 0.58rem; border-radius: 999px; display: inline-block; } .legend-dot.stay { background: var(--stay); } .legend-dot.transport { background: var(--transport); } .legend-dot.flight { background: var(--flight); } .trip-globe, .trip-tile-map { width: 100%; min-height: 420px; border-radius: var(--radius-md); border: 1px solid var(--line-soft); overflow: hidden; } .trip-tile-map { position: relative; background: #dce7ef; } .trip-tile-map.is-no-tiles { background: repeating-linear-gradient(0deg, rgba(19, 35, 56, 0.06) 0, rgba(19, 35, 56, 0.06) 1px, transparent 1px, transparent 56px), repeating-linear-gradient(90deg, rgba(19, 35, 56, 0.06) 0, rgba(19, 35, 56, 0.06) 1px, transparent 1px, transparent 56px), linear-gradient(170deg, #efe1d3, #dcc8b6); } .tile-map-tiles, .tile-map-points, .tile-map-arcs { position: absolute; inset: 0; } .tile-map-tile { position: absolute; width: 256px; height: 256px; } .tile-map-point { position: absolute; transform: translate(-50%, -50%); display: inline-flex; flex-direction: column; align-items: center; } .tile-map-dot { width: 12px; height: 12px; border-radius: 999px; border: 2px solid rgba(255, 255, 255, 0.95); } .tile-map-label, .map-info { font-size: 0.75rem; color: var(--ink-soft); } .tile-map-controls { position: absolute; top: 0.65rem; right: 0.65rem; display: grid; gap: 0.4rem; z-index: 7; } .tile-map-control { width: 2.1rem; height: 2.1rem; border: 1px solid rgba(19, 35, 56, 0.22); border-radius: 12px; background: rgba(255, 255, 255, 0.9); color: var(--ink-strong); font: inherit; font-weight: 800; line-height: 1; cursor: pointer; } .tile-map-control.wide { width: auto; min-width: 3rem; padding: 0 0.5rem; } .tile-map-overlay { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-muted); font-size: 0.92rem; background: linear-gradient(170deg, rgba(255, 246, 236, 0.78), rgba(244, 229, 214, 0.76)); } .edit-dialog, .confirm-dialog { padding: 0; border: 0; background: transparent; } .edit-dialog::backdrop, .confirm-dialog::backdrop { background: rgba(24, 18, 13, 0.42); } .edit-dialog { width: min(520px, calc(100vw - 1rem)); height: 100vh; margin: 0 0 0 auto; } .edit-dialog-compact { width: min(720px, calc(100vw - 1rem)); height: auto; margin: auto; } .inline-editor-dialog { width: min(1120px, calc(100vw - 2rem)); max-width: 1120px; height: auto; max-height: calc(100vh - 2rem); margin: auto; } .edit-dialog form, .confirm-dialog-card { padding: var(--space-6); border-radius: var(--radius-lg); border: 1px solid var(--line-soft); background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 244, 237, 0.96)); box-shadow: var(--shadow-lg); } .confirm-dialog-card { display: grid; gap: var(--space-4); } .dialog-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); flex-wrap: wrap; } .header-logout { padding: 0.5rem 0.8rem; } .auth-form { display: grid; gap: var(--space-3); margin-top: var(--space-4); } @media (max-width: 1180px) { .stats-strip, .builder-layout, .workspace-layout, .trip-hero-card { grid-template-columns: 1fr; } .builder-preview-card, .workspace-aside { position: static; } } @media (max-width: 760px) { .app-header-inner, .app-header-left, .account-cluster, .account-pill, .page-intro, .route-stops-head, .builder-action-row, .workspace-section-head, .day-group-header { flex-direction: column; align-items: flex-start; } .trip-summary, .panel, .trip-hero-card, .builder-form-card, .builder-preview-card, .workspace-hero, .workspace-main, .aside-card { padding: var(--space-5); } .stats-strip, .type-specific-grid, .field-advanced-grid, .builder-grid, .reservation-form, .overview-stats-grid, .overview-mix-grid, .reservation-details-grid, .trip-grid, .trip-grid-past { grid-template-columns: 1fr; } .route-stop-card-inner { grid-template-columns: 1fr; } } .route-inline { display: flex; flex-wrap: wrap; gap: 0.55rem; } .route-inline-stop { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 0.9rem; color: var(--ink-strong); } .route-inline-stop::after { content: "->"; color: var(--ink-soft); } .route-inline-stop:last-child::after, .route-inline-stop.is-muted::after { content: ""; } .trip-workspace-page { display: grid; gap: var(--space-6); } .trip-topbar, .route-stage, .map-panel, .map-panel-card { border: 1px solid var(--line-soft); border-radius: var(--radius-lg); background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 244, 237, 0.96)); box-shadow: var(--shadow-sm); } .trip-topbar, .route-stage, .map-panel { padding: var(--space-6); } .trip-topbar { display: grid; gap: var(--space-5); } .trip-topbar-main, .trip-topbar-heading, .trip-topbar-meta, .trip-topbar-actions, .route-stage-head, .route-stage-legend, .transport-connector-card, .workspace-reservation-actions, .trip-mini-stats { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; } .trip-topbar-main { justify-content: space-between; } .trip-topbar-copy { display: grid; gap: 0.85rem; max-width: 58rem; } .trip-topbar-heading h1 { font-size: clamp(2rem, 3.5vw, 3rem); } .trip-meta-item { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--ink-muted); font-size: 0.92rem; } .trip-mini-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); } .trip-workspace-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(320px, 0.95fr); gap: var(--space-6); align-items: start; } .route-stage { display: grid; gap: var(--space-5); } .route-stage-head { justify-content: space-between; } .route-stage-legend { gap: 0.6rem; } .state-pill { display: inline-flex; align-items: center; justify-content: center; min-height: 1.9rem; padding: 0.2rem 0.7rem; border-radius: 999px; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.02em; } .state-booked, .state-pill.state-booked { color: #fffaf5; background: linear-gradient(135deg, #ca6e36, #b55320); } .state-planned, .state-pill.state-planned { color: var(--accent-strong); background: rgba(208, 111, 55, 0.12); border: 1px dashed rgba(208, 111, 55, 0.45); } .state-idea, .state-pill.state-idea { color: var(--ink-muted); background: rgba(75, 57, 46, 0.08); border: 1px solid rgba(75, 57, 46, 0.12); } .route-table-shell { display: grid; gap: var(--space-3); } .route-table-head, .route-row { display: grid; grid-template-columns: 68px minmax(220px, 1.2fr) 110px repeat(3, minmax(0, 1fr)); gap: var(--space-3); } .route-table-head { padding: 0 var(--space-3); color: var(--ink-soft); font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; } .route-stop-block { border: 1px solid transparent; border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.58); transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .route-row-skeleton { min-height: 6.5rem; border-radius: var(--radius-md); background: linear-gradient(90deg, rgba(255, 255, 255, 0.72), rgba(248, 240, 231, 0.96), rgba(255, 255, 255, 0.72)); } .route-stop-block:hover, .route-stop-block.is-selected { border-color: rgba(208, 111, 55, 0.26); box-shadow: var(--shadow-xs); } .route-row { padding: var(--space-4); cursor: pointer; } .route-row-index, .route-row-nights { display: grid; place-items: center; } .route-row-index span, .preview-stop-index { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 0.9rem; background: rgba(208, 111, 55, 0.12); color: var(--accent-strong); font-weight: 800; } .route-row-city, .route-row-cell, .route-row-details, .map-panel, .map-panel-card, .city-picker-card, .route-map-empty { display: grid; gap: var(--space-3); } .route-row-city { align-content: start; } .route-city-copy strong, .route-cell-transport-copy strong, .transport-connector-copy strong, .workspace-reservation-copy h4 { color: var(--ink-strong); } .route-city-copy span, .route-cell-empty span, .route-cell-transport-copy span, .transport-connector-copy span, .workspace-reservation-meta, .route-detail-empty p, .city-picker-status { color: var(--ink-muted); font-size: 0.88rem; } .route-row-cell { align-content: start; min-height: 6.8rem; padding: var(--space-3); border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(80, 54, 37, 0.08); } .route-cell-empty strong, .route-cell-metric strong { font-size: 1rem; color: var(--ink-strong); } .route-cell-metric { display: grid; justify-items: center; gap: 0.25rem; } .route-cell-stack { display: flex; flex-wrap: wrap; gap: 0.5rem; } .cell-reservation-pill, .inline-add-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 0.45rem; min-height: 2.2rem; padding: 0.35rem 0.7rem; border-radius: 999px; border: 1px solid rgba(80, 54, 37, 0.12); background: rgba(255, 255, 255, 0.92); color: var(--ink-strong); font: inherit; cursor: pointer; } .cell-reservation-pill.booked { border-color: rgba(208, 111, 55, 0.3); } .cell-reservation-pill.planned { border-style: dashed; } .inline-add-button { color: var(--accent-strong); justify-self: flex-start; } .route-cell-transport { display: flex; justify-content: space-between; gap: var(--space-3); padding: 0.8rem 0.9rem; border-radius: var(--radius-sm); background: rgba(208, 111, 55, 0.08); } .route-cell-transport.type-flight { background: rgba(199, 117, 51, 0.1); } .route-cell-transport.type-transport { background: rgba(185, 92, 40, 0.1); } .route-row-details { padding: 0 var(--space-4) var(--space-4); } .route-detail-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); } .route-detail-list { display: grid; gap: var(--space-3); } .transport-connector { display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: var(--space-3); padding: 0 var(--space-4) var(--space-4); } .transport-connector-line { justify-self: center; width: 2px; min-height: 2.5rem; border-radius: 999px; background: linear-gradient(180deg, rgba(208, 111, 55, 0.45), rgba(208, 111, 55, 0.08)); } .transport-connector-card { justify-content: space-between; padding: 0.95rem 1rem; border-radius: var(--radius-sm); border: 1px solid rgba(80, 54, 37, 0.1); background: rgba(255, 255, 255, 0.82); } .transport-connector-card.type-flight { border-color: rgba(199, 117, 51, 0.26); } .transport-connector-card.type-transport { border-color: rgba(185, 92, 40, 0.24); } .transport-connector-card.is-empty { border-style: dashed; } .transport-connector-icon { display: grid; place-items: center; width: 2.7rem; height: 2.7rem; border-radius: 1rem; color: var(--accent-strong); background: rgba(208, 111, 55, 0.12); } .workspace-reservation-card { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-4); border-radius: var(--radius-md); border: 1px solid rgba(80, 54, 37, 0.1); background: rgba(255, 255, 255, 0.88); } .workspace-reservation-copy, .workspace-reservation-side, .workspace-reservation-kicker { display: grid; gap: 0.6rem; } .workspace-reservation-kicker { display: flex; align-items: center; flex-wrap: wrap; } .workspace-reservation-route { color: var(--ink-strong); font-weight: 600; } .workspace-reservation-side { justify-items: end; min-width: 12rem; } .price-badge { display: inline-flex; align-items: center; min-height: 2rem; padding: 0.28rem 0.75rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong); font-weight: 700; } .type-pill { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 1.9rem; padding: 0.2rem 0.7rem; border-radius: 999px; font-size: 0.78rem; font-weight: 700; } .type-pill.type-transport { color: var(--transport); background: rgba(185, 92, 40, 0.1); } .type-pill.type-flight { color: var(--flight); background: rgba(199, 117, 51, 0.12); } .type-pill.type-accommodation { color: var(--stay); background: rgba(155, 81, 40, 0.11); } .map-panel { position: sticky; top: 5.5rem; gap: var(--space-4); } .map-panel-head, .city-list-item, .city-picker-head, .city-picker-grid, .inline-editor-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); } .map-panel-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; } .map-panel-head, .city-picker-head, .inline-editor-head { align-items: flex-start; } .map-panel-card { padding: var(--space-4); } .route-map-panel, .builder-route-map { min-height: 22rem; border-radius: var(--radius-md); overflow: hidden; border: 1px solid rgba(80, 54, 37, 0.1); background: linear-gradient(160deg, #fbf4ec, #efe0d2); } .builder-route-map { min-height: 16rem; margin-bottom: var(--space-3); } .route-map-surface, .route-map-svg { width: 100%; height: 100%; display: block; } .route-map-bg { fill: rgba(255, 250, 245, 0.98); } .route-map-grid line { stroke: rgba(80, 54, 37, 0.08); stroke-width: 1; } .route-map-route { fill: none; stroke-width: 4.5; stroke-linecap: round; opacity: 0.78; } .route-map-leg { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 8 7; opacity: 0.85; } .route-map-leg.type-flight { stroke: var(--flight); } .route-map-leg.type-transport { stroke: var(--transport); } .route-map-leg.status-planned { opacity: 0.55; } .route-map-leg.status-idea { opacity: 0.35; } .route-map-node-ring { fill: rgba(208, 111, 55, 0.14); } .route-map-node-core { fill: var(--accent); stroke: rgba(255, 255, 255, 0.92); stroke-width: 3; } .route-map-node.is-auxiliary .route-map-node-core { fill: #bf9472; } .route-map-node.is-selected .route-map-node-ring { fill: rgba(208, 111, 55, 0.26); } .route-map-label-bg { fill: rgba(255, 255, 255, 0.92); stroke: rgba(80, 54, 37, 0.08); } .route-map-label { font-size: 12px; font-weight: 700; fill: var(--ink-strong); } .route-map-empty { place-items: center; min-height: inherit; text-align: center; } .map-caption { color: var(--ink-muted); font-size: 0.88rem; } .city-picker-card, .inline-editor-form { border-radius: var(--radius-md); } .city-picker-card { padding: var(--space-3); background: rgba(255, 255, 255, 0.76); border: 1px solid rgba(80, 54, 37, 0.08); } .city-picker-grid, .editor-support-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); } .editor-support-grid { width: 100%; } .inline-checkbox { align-self: end; display: inline-flex; align-items: center; gap: 0.55rem; } .chip-button-danger { color: var(--danger); } .route-inline-dashboard { margin-top: 0.35rem; } @media (max-width: 1180px) { .trip-workspace-layout, .trip-mini-stats { grid-template-columns: 1fr; } .map-panel { position: static; } } @media (max-width: 900px) { .route-table-head { display: none; } .route-row, .transport-connector { grid-template-columns: 1fr; } .workspace-reservation-card, .city-picker-grid, .editor-support-grid { grid-template-columns: 1fr; } .workspace-reservation-card, .map-panel-head, .city-list-item, .city-picker-grid, .inline-editor-head, .trip-topbar-main, .trip-mini-stats { flex-direction: column; align-items: flex-start; } } /* Compact redesign */ .app-header-inner { min-height: 3.6rem; } .brand-subtitle { font-size: 0.65rem; letter-spacing: 0.12em; } .account-pill { padding: 0.3rem 0.65rem 0.3rem 0.35rem; gap: 0.55rem; } .account-meta strong { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .compact-page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid rgba(80, 54, 37, 0.08); } .compact-page-header-copy { display: grid; gap: 0.35rem; } .compact-page-header h1 { font-size: clamp(2rem, 3.1vw, 2.9rem); line-height: 0.96; } .compact-page-meta, .trip-meta-text, .route-stage-hint, .map-caption { color: var(--ink-muted); font-size: 0.92rem; } .compact-page-meta { display: inline-flex; flex-wrap: wrap; gap: 0.45rem; margin: 0; } .status-dot { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 999px; flex-shrink: 0; } .status-dot.booked { background: var(--accent-strong); } .status-dot.planned { border: 1px solid rgba(171, 83, 31, 0.55); background: rgba(255, 255, 255, 0.9); } .status-dot.watching, .status-dot.idea { background: repeating-linear-gradient( 135deg, rgba(171, 83, 31, 0.16) 0, rgba(171, 83, 31, 0.16) 2px, rgba(255, 255, 255, 0.9) 2px, rgba(255, 255, 255, 0.9) 4px ); border: 1px solid rgba(80, 54, 37, 0.18); } .status-badge-quiet { min-height: 1.55rem; padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.72rem; letter-spacing: 0.06em; } .cost-pill { display: inline-flex; align-items: center; min-height: 1.85rem; padding: 0.2rem 0.7rem; border-radius: 999px; background: rgba(208, 111, 55, 0.1); color: var(--accent-strong); font-size: 0.82rem; font-weight: 700; } .minimal-empty-state { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5); border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.74); border: 1px solid rgba(80, 54, 37, 0.08); } .minimal-empty-state h2, .minimal-empty-state h3 { font-size: 1.15rem; } .minimal-empty-state p { margin: 0.3rem 0 0; color: var(--ink-muted); } .minimal-empty-state-inline { padding: var(--space-4); } .trips-library-page { display: grid; gap: var(--space-5); } .compact-page-header-library { align-items: center; } .trip-library { display: grid; gap: var(--space-5); } .trip-library-group { display: grid; gap: var(--space-3); } .trip-library-label { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); } .trip-library-label h2 { font-family: var(--font-sans); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; } .trip-library-label span { color: var(--ink-soft); font-size: 0.82rem; } .trip-library-list { display: grid; gap: 0.75rem; } .trip-list-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.78); border: 1px solid rgba(80, 54, 37, 0.08); box-shadow: 0 8px 20px rgba(53, 35, 25, 0.04); transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; } .trip-list-row:hover { transform: translateY(-1px); border-color: rgba(171, 83, 31, 0.22); box-shadow: 0 14px 28px rgba(53, 35, 25, 0.06); } .trip-list-row-main { min-width: 0; display: grid; gap: 0.6rem; color: inherit; text-decoration: none; } .trip-list-row-heading, .trip-list-row-meta, .trip-state-summary, .trip-list-row-actions { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .trip-list-row-heading { justify-content: space-between; } .trip-list-row-copy { min-width: 0; } .trip-list-row-copy h2 { font-family: var(--font-sans); font-size: 1.05rem; font-weight: 700; line-height: 1.2; } .trip-list-row-dates { margin: 0.16rem 0 0; color: var(--ink-muted); font-size: 0.88rem; } .trip-list-row-meta { color: var(--ink-muted); font-size: 0.84rem; } .trip-inline-meta, .trip-state-item { display: inline-flex; align-items: center; gap: 0.42rem; white-space: nowrap; } .route-inline-library .route-inline-stop, .route-inline-workspace .route-inline-stop { font-size: 0.9rem; } .builder-page-compact { display: grid; gap: var(--space-5); } .compact-builder-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 0.35fr); gap: var(--space-5); align-items: start; } .compact-builder-form, .builder-summary-card, .trip-workspace-page-compact .trip-topbar, .trip-workspace-page-compact .route-stage, .trip-workspace-page-compact .map-panel, .trip-workspace-page-compact .map-panel-card { border-radius: var(--radius-md); border: 1px solid rgba(80, 54, 37, 0.08); background: rgba(255, 255, 255, 0.78); box-shadow: 0 10px 24px rgba(53, 35, 25, 0.05); } .compact-builder-form { display: grid; gap: var(--space-4); padding: var(--space-4); } .builder-basics-row { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 0.8fr)); gap: var(--space-3); align-items: start; } .builder-title-field { min-width: 0; } .compact-route-builder { display: grid; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); background: rgba(252, 248, 244, 0.92); border: 1px solid rgba(80, 54, 37, 0.07); } .compact-section-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); } .compact-section-header h2 { font-family: var(--font-sans); font-size: 1rem; font-weight: 700; } .compact-section-header p { margin: 0.18rem 0 0; color: var(--ink-muted); font-size: 0.84rem; } .compact-section-header-quiet { padding-bottom: 0.2rem; border-bottom: 1px solid rgba(80, 54, 37, 0.07); } .compact-route-stop-list { display: grid; gap: 0.7rem; } .route-stop-card { border-radius: var(--radius-sm); border: 1px solid rgba(80, 54, 37, 0.08); background: rgba(255, 255, 255, 0.95); } .route-stop-card[data-match-kind="saved"] { border-color: rgba(18, 119, 91, 0.2); } .route-stop-card[data-match-kind="catalog"] { border-color: rgba(171, 83, 31, 0.18); } .route-stop-card[data-match-kind="manual"] { border-style: dashed; } .route-stop-card-inner { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 0.7rem; align-items: center; padding: 0.75rem 0.85rem; } .route-stop-handle { width: 2rem; height: 2rem; border-radius: 0.8rem; } .route-stop-field { display: grid; gap: 0.35rem; margin: 0; } .route-stop-field .field-label { display: none; } .route-stop-field input { min-height: 2.65rem; } .route-stop-meta { color: var(--ink-muted); font-size: 0.78rem; } .route-stop-suggestion-list { margin-top: 0; } .route-stop-remove { min-height: 2rem; padding-inline: 0.65rem; } .builder-footer-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-2); border-top: 1px solid rgba(80, 54, 37, 0.07); } .builder-summary-rail { position: sticky; top: 5rem; } .builder-summary-card { display: grid; gap: var(--space-4); padding: var(--space-4); } .builder-summary-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); } .builder-summary-head h2 { font-size: 1.2rem; line-height: 1.05; } .builder-summary-kicker { color: var(--ink-soft); font-size: 0.82rem; white-space: nowrap; } .builder-summary-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; } .builder-summary-stat { display: grid; gap: 0.25rem; padding: 0.8rem 0.9rem; border-radius: var(--radius-sm); background: rgba(252, 248, 244, 0.92); border: 1px solid rgba(80, 54, 37, 0.07); } .builder-summary-stat span, .builder-summary-label, .workspace-side-meta span { color: var(--ink-muted); font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; } .builder-summary-stat strong, .workspace-side-meta strong { color: var(--ink-strong); font-size: 1rem; } .builder-summary-route { display: grid; gap: 0.55rem; } .route-track-minimal { display: flex; flex-wrap: wrap; gap: 0.4rem 0.55rem; } .route-track-minimal .route-track-stop, .route-track-minimal .route-track-empty { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--ink); font-size: 0.88rem; } .route-track-minimal .route-track-stop::after { content: "->"; color: var(--ink-soft); } .route-track-minimal .route-track-stop:last-child::after { content: ""; } .route-track-minimal .route-track-dot { width: 0.35rem; height: 0.35rem; border-radius: 999px; background: var(--accent); } .trip-workspace-page-compact { display: grid; gap: var(--space-4); } .trip-workspace-page-compact .trip-topbar, .trip-workspace-page-compact .route-stage, .trip-workspace-page-compact .map-panel, .trip-workspace-page-compact .map-panel-card { padding: var(--space-4); background: rgba(255, 255, 255, 0.8); } .trip-topbar-compact { display: grid; gap: 0.9rem; } .trip-topbar-compact .trip-topbar-main, .trip-topbar-side, .trip-status-cluster, .trip-compact-meta, .map-panel-head-compact, .route-stop-head, .route-stop-actions, .reservation-row-kicker, .reservation-row-actions, .transport-connector-left, .transport-connector-actions { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .trip-topbar-compact .trip-topbar-main { justify-content: space-between; } .trip-topbar-heading-compact { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; } .trip-topbar-heading-compact h1 { font-size: clamp(2rem, 3vw, 2.7rem); } .trip-topbar-copy { display: grid; gap: 0.45rem; } .trip-topbar-side { justify-content: flex-end; } .trip-status-text, .trip-compact-meta span { display: inline-flex; align-items: center; gap: 0.42rem; color: var(--ink-muted); font-size: 0.84rem; } .trip-compact-meta { padding-top: 0.65rem; border-top: 1px solid rgba(80, 54, 37, 0.07); } .trip-workspace-layout-compact { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(260px, 0.72fr); gap: var(--space-4); align-items: start; } .route-stage-compact, .workspace-side-rail { display: grid; gap: var(--space-4); } .route-stage-head-compact h2, .map-panel-head-compact h2 { font-family: var(--font-sans); font-size: 1rem; font-weight: 700; } .route-stage-head-compact { padding-bottom: 0.65rem; border-bottom: 1px solid rgba(80, 54, 37, 0.07); } .route-table-body { display: grid; gap: 0.9rem; } .route-row-skeleton { min-height: 4.2rem; border-radius: var(--radius-sm); } .route-stop-block { border-radius: var(--radius-md); border: 1px solid rgba(80, 54, 37, 0.08); background: rgba(252, 248, 244, 0.72); transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; cursor: pointer; } .route-stop-block:hover, .route-stop-block.is-selected { border-color: rgba(171, 83, 31, 0.22); box-shadow: 0 12px 26px rgba(53, 35, 25, 0.05); } .route-stop-head, .route-stop-body { padding: 0.95rem 1rem; } .route-stop-head { justify-content: space-between; border-bottom: 1px solid rgba(80, 54, 37, 0.07); } .route-stop-index span { display: grid; place-items: center; width: 2.15rem; height: 2.15rem; border-radius: 0.85rem; background: rgba(208, 111, 55, 0.1); color: var(--accent-strong); font-size: 0.82rem; font-weight: 800; } .route-stop-main { min-width: 0; flex: 1 1 16rem; display: grid; gap: 0.35rem; } .route-stop-title-line { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; } .route-stop-title-line strong { color: var(--ink-strong); } .route-stop-title-line span { color: var(--ink-muted); font-size: 0.84rem; } .route-stop-meta-line { display: flex; flex-wrap: wrap; gap: 0.45rem 0.65rem; color: var(--ink-muted); font-size: 0.82rem; } .route-stop-body { display: grid; gap: 0.65rem; } .route-stop-empty { display: grid; gap: 0.2rem; padding: 0.5rem 0; } .route-stop-empty strong { font-size: 0.92rem; } .route-stop-empty span { color: var(--ink-muted); font-size: 0.84rem; } .inline-add-button { min-height: 1.95rem; padding: 0.18rem 0.62rem; border-radius: 999px; background: rgba(255, 255, 255, 0.9); font-size: 0.78rem; } .reservation-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: 0.8rem 0.9rem; border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.94); border: 1px solid rgba(80, 54, 37, 0.07); } .reservation-row-main, .reservation-row-side { display: grid; gap: 0.45rem; } .reservation-row-main h3 { font-family: var(--font-sans); font-size: 0.98rem; font-weight: 700; line-height: 1.2; } .reservation-row-type, .reservation-row-state, .reservation-row-tag { display: inline-flex; align-items: center; gap: 0.38rem; min-height: 1.45rem; padding: 0.1rem 0.46rem; border-radius: 999px; font-size: 0.73rem; font-weight: 700; } .reservation-row-type svg { width: 0.85rem; height: 0.85rem; } .reservation-row-type.type-transport { color: var(--transport); background: rgba(185, 92, 40, 0.09); } .reservation-row-type.type-flight { color: var(--flight); background: rgba(199, 117, 51, 0.11); } .reservation-row-type.type-accommodation { color: var(--stay); background: rgba(155, 81, 40, 0.11); } .reservation-row-state { color: var(--ink); background: rgba(80, 54, 37, 0.05); } .reservation-row-state.status-booked { color: var(--accent-strong); background: rgba(208, 111, 55, 0.12); } .reservation-row-state.status-planned { color: var(--accent-strong); background: rgba(255, 255, 255, 0.9); border: 1px dashed rgba(171, 83, 31, 0.34); } .reservation-row-state.status-idea { color: var(--ink-muted); background: rgba(80, 54, 37, 0.05); } .reservation-row-tag { color: var(--ink-muted); background: rgba(80, 54, 37, 0.05); font-weight: 600; } .reservation-row-meta { margin: 0; color: var(--ink-muted); font-size: 0.84rem; line-height: 1.4; } .reservation-row-side { justify-items: end; min-width: 9rem; } .reservation-row-actions .chip-button, .transport-connector-actions .chip-button { min-height: 1.85rem; padding-inline: 0.62rem; } .transport-connector { display: grid; grid-template-columns: 2.15rem minmax(0, 1fr); gap: 0.85rem; align-items: start; padding-left: 1rem; margin-top: -0.2rem; } .transport-connector-line { justify-self: center; width: 2px; min-height: 1.6rem; border-radius: 999px; background: linear-gradient(180deg, rgba(208, 111, 55, 0.35), rgba(208, 111, 55, 0.08)); } .transport-connector-card { display: flex; align-items: center; justify-content: space-between; gap: 0.9rem; padding: 0.75rem 0.9rem; border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(80, 54, 37, 0.07); } .transport-connector-card.is-empty { border-style: dashed; } .transport-connector-icon { width: 2rem; height: 2rem; border-radius: 0.8rem; } .map-panel-compact { position: sticky; top: 5rem; display: grid; gap: var(--space-3); } .map-panel-head-compact { justify-content: space-between; align-items: flex-start; } .map-panel-badges { gap: 0.5rem; } .route-map-panel-compact { min-height: 15rem; } .workspace-side-meta { display: grid; gap: 0.2rem; padding-top: 0.25rem; } .map-panel-card-compact { display: grid; gap: 0.75rem; } .city-list-compact { display: grid; gap: 0.65rem; } .city-list-item { padding: 0.1rem 0; } .city-list-copy { display: grid; gap: 0.12rem; } .city-list-copy span { color: var(--ink-muted); font-size: 0.82rem; } .inline-editor-head-compact { align-items: center; } .segmented-control-compact { gap: 0.4rem; } .segmented-control-compact .segment { min-height: 2rem; padding: 0.3rem 0.75rem; } .inline-editor-form { margin-top: 0; gap: 0.85rem; } .inline-editor-form .dynamic-fields { padding-top: 0.75rem; } .inline-editor-form textarea { min-height: 5rem; } .city-picker-card { padding: 0.8rem; } .city-picker-grid, .editor-support-grid { gap: 0.75rem; } @media (max-width: 1120px) { .compact-builder-layout, .trip-workspace-layout-compact { grid-template-columns: 1fr; } .builder-summary-rail, .map-panel-compact { position: static; } } @media (max-width: 780px) { .compact-page-header, .trip-topbar-compact .trip-topbar-main, .trip-topbar-side, .builder-footer-bar, .compact-section-header, .trip-list-row, .reservation-row, .transport-connector-card { grid-template-columns: 1fr; flex-direction: column; align-items: flex-start; } .builder-basics-row, .builder-summary-metrics, .city-picker-grid, .editor-support-grid { grid-template-columns: 1fr; } .route-stop-card-inner { grid-template-columns: auto auto minmax(0, 1fr); } .route-stop-remove { grid-column: 1 / -1; } .trip-list-row-actions, .reservation-row-side { width: 100%; justify-items: start; } } /* Trip itinerary workspace */ .trip-itinerary-page { padding-top: var(--space-4); } .trip-itinerary-shell { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(360px, 0.85fr); gap: var(--space-4); align-items: start; } .trip-itinerary-main, .trip-map-panel, .trip-map-missing { border-radius: var(--radius-md); border: 1px solid rgba(80, 54, 37, 0.08); background: rgba(255, 255, 255, 0.86); box-shadow: 0 12px 26px rgba(53, 35, 25, 0.05); } .trip-itinerary-main { padding: var(--space-4); display: grid; gap: var(--space-4); } .trip-itinerary-header, .trip-itinerary-toolbar, .trip-itinerary-summary, .trip-status-cluster, .trip-toolbar-actions, .trip-map-panel-head, .trip-map-panel-meta { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; } .trip-itinerary-header, .trip-itinerary-toolbar, .trip-map-panel-head { justify-content: space-between; } .trip-itinerary-title { display: grid; gap: 0.25rem; } .trip-itinerary-title h1 { font-size: clamp(2rem, 3vw, 2.8rem); } .trip-itinerary-dates, .trip-itinerary-status { margin: 0; color: var(--ink-muted); } .trip-itinerary-summary { justify-content: flex-end; } .trip-summary-metric { display: grid; gap: 0.25rem; padding: 0.85rem 1rem; border-radius: 1.15rem; border: 1px solid rgba(80, 54, 37, 0.08); background: rgba(252, 248, 244, 0.9); } .trip-summary-metric span { color: var(--ink-muted); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; } .trip-summary-metric strong { color: var(--ink-strong); font-size: 1rem; } .trip-summary-metric-status { min-width: 15rem; } .trip-view-tabs { display: flex; align-items: center; gap: 0.45rem; } .trip-view-tab { min-height: 2rem; padding: 0.3rem 0.8rem; border: 0; border-radius: 999px; background: rgba(80, 54, 37, 0.05); color: var(--ink-muted); font: inherit; font-weight: 700; } .trip-view-tab.is-active { background: rgba(16, 185, 129, 0.12); color: #0f766e; } .route-table-board { display: grid; gap: 0; overflow: hidden; border-radius: var(--radius-md); border: 1px solid rgba(80, 54, 37, 0.08); background: rgba(255, 255, 255, 0.94); } .route-table-head-itinerary, .itinerary-stop-row { display: grid; grid-template-columns: 58px minmax(170px, 1.1fr) 110px minmax(180px, 1fr) minmax(180px, 1fr) minmax(200px, 1.1fr); gap: 0; align-items: stretch; } .route-table-head-itinerary { padding: 0.95rem 0; border-bottom: 1px solid rgba(80, 54, 37, 0.08); color: #0f3d4a; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .route-table-head-itinerary > span, .itinerary-cell { padding-inline: 1rem; } .route-table-body-itinerary { display: grid; } .itinerary-stop-block { border-bottom: 1px solid rgba(80, 54, 37, 0.08); } .itinerary-stop-block:last-child { border-bottom: 0; } .itinerary-stop-block.is-selected { background: rgba(16, 185, 129, 0.04); } .itinerary-stop-row { min-height: 5.2rem; } .itinerary-cell { display: flex; align-items: center; min-height: inherit; } .itinerary-cell + .itinerary-cell { border-left: 0; } .itinerary-cell-index { justify-content: center; } .itinerary-order { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 999px; border: 1.5px solid #10b981; color: #0f766e; font-size: 0.88rem; font-weight: 800; } .itinerary-cell-destination { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.15rem; } .itinerary-cell-destination strong { font-size: 1rem; } .itinerary-cell-destination span, .table-item-button span, .table-cell-placeholder, .itinerary-row-details-head span { color: var(--ink-muted); font-size: 0.82rem; } .itinerary-cell-nights { justify-content: center; } .itinerary-nights-badge { display: grid; place-items: center; width: 2.35rem; height: 2.35rem; border-radius: 999px; border: 1px solid rgba(80, 54, 37, 0.1); background: #ffffff; color: var(--ink-strong); font-weight: 800; box-shadow: 0 6px 14px rgba(53, 35, 25, 0.08); } .itinerary-cell-stack { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.7rem; } .table-item-button { display: grid; gap: 0.15rem; padding: 0; border: 0; background: transparent; color: var(--ink-strong); font: inherit; text-align: left; min-width: 0; cursor: pointer; } .table-item-button strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .table-item-button.is-plan strong { color: #0f766e; } .table-item-button.is-transport strong { color: #db2777; } .table-cell-placeholder { display: inline-flex; align-items: center; } .table-add-button { width: 2rem; height: 2rem; border: 0; border-radius: 999px; background: linear-gradient(145deg, #ffbe55, #f59e0b); color: #ffffff; font: inherit; font-size: 1.3rem; font-weight: 700; line-height: 1; box-shadow: 0 8px 18px rgba(245, 158, 11, 0.28); cursor: pointer; } .itinerary-cell-transport .table-add-button { background: linear-gradient(145deg, #fb7185, #ec4899); box-shadow: 0 8px 18px rgba(236, 72, 153, 0.24); } .itinerary-cell-stay .table-add-button { background: linear-gradient(145deg, #34d399, #10b981); box-shadow: 0 8px 18px rgba(16, 185, 129, 0.24); } .itinerary-row-details { padding: 0.9rem 1rem 1rem 4.6rem; border-top: 1px solid rgba(80, 54, 37, 0.06); background: rgba(252, 248, 244, 0.8); } .itinerary-row-details-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: 0.8rem; } .itinerary-row-detail-list { display: grid; gap: 0.7rem; } .route-destination-add { display: flex; align-items: center; gap: 0.7rem; min-height: 4rem; padding: 0 1.1rem; border: 0; border-top: 1px solid rgba(80, 54, 37, 0.08); background: rgba(241, 248, 249, 0.9); color: #7f9ba3; font: inherit; font-size: 1.05rem; font-weight: 700; cursor: pointer; } .trip-itinerary-map { position: sticky; top: 5rem; display: grid; gap: var(--space-4); } .trip-map-panel { display: grid; gap: var(--space-3); padding: var(--space-4); } .route-map-panel-live { min-height: 36rem; border-radius: var(--radius-md); overflow: hidden; } .trip-map-panel-meta { padding-top: 0.2rem; color: var(--ink-muted); font-size: 0.84rem; } .trip-map-panel-meta span { display: inline-flex; gap: 0.35rem; } .trip-map-missing { display: grid; gap: 0.8rem; padding: var(--space-4); } .trip-map-total-cost { color: var(--ink-strong); font-size: 1rem; } .mapbox-stop-marker { display: grid; justify-items: center; gap: 0.38rem; padding: 0; border: 0; background: transparent; color: #0f766e; font: inherit; cursor: pointer; } .mapbox-stop-marker-pin { display: inline-grid; place-items: center; width: 2.15rem; height: 2.15rem; border-radius: 999px; background: linear-gradient(180deg, #ffffff 0%, #f6fffb 100%); border: 2px solid #24c58a; color: #0f766e; font-size: 0.88rem; font-weight: 800; box-shadow: 0 12px 28px rgba(15, 118, 110, 0.18); } .mapbox-stop-marker-label { display: inline-block; max-width: 7rem; padding: 0.18rem 0.48rem; border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: #31515f; font-size: 0.68rem; font-weight: 700; line-height: 1.1; box-shadow: 0 8px 18px rgba(35, 26, 20, 0.1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mapbox-stop-marker.is-selected .mapbox-stop-marker-pin { background: linear-gradient(180deg, #22c58b 0%, #11b889 100%); border-color: #ffffff; color: #ffffff; box-shadow: 0 14px 30px rgba(17, 184, 137, 0.26); } .mapbox-stop-marker.is-selected .mapbox-stop-marker-label { background: rgba(17, 184, 137, 0.92); color: #ffffff; } .mapbox-stop-marker.is-auxiliary .mapbox-stop-marker-pin { width: 1.55rem; height: 1.55rem; border-color: #f05493; color: #f05493; } .mapbox-stop-marker.is-auxiliary .mapbox-stop-marker-label { font-size: 0.62rem; } .inline-editor-form-light { margin-top: 0; } .inline-editor-head-light { align-items: flex-start; } .inline-editor-meta-row, .inline-editor-quick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); } .destination-form { margin-top: 0; } .destination-panel-head { display: flex; align-items: center; justify-content: space-between; } .destination-panel-head h2 { margin: 0; } .destination-panel-copy { margin: -0.2rem 0 0.3rem; color: #7b6a5d; } .destination-primary-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.55rem; align-items: end; } .destination-city-field { min-width: 0; } .destination-save-button { align-self: end; margin-bottom: 0.05rem; } @media (max-width: 1080px) { .trip-itinerary-shell { grid-template-columns: 1fr; } .trip-itinerary-map { position: static; } .route-map-panel-live { min-height: 24rem; } } @media (max-width: 980px) { .route-table-head-itinerary { display: none; } .itinerary-stop-row { grid-template-columns: 1fr; } .itinerary-cell { min-height: auto; padding: 0.8rem 1rem; border-left: 0; border-top: 1px solid rgba(80, 54, 37, 0.05); } .itinerary-cell:first-child { border-top: 0; } .itinerary-row-details { padding-left: 1rem; } } @media (max-width: 720px) { .trip-itinerary-header, .trip-itinerary-toolbar, .trip-itinerary-summary, .trip-status-cluster, .trip-toolbar-actions, .trip-map-panel-head, .trip-map-panel-meta { align-items: flex-start; flex-direction: column; } .inline-editor-meta-row, .inline-editor-quick-grid { grid-template-columns: 1fr; } } /* Final compact workspace overrides */ .app-header { background: rgba(251, 247, 242, 0.88); } .app-header-inner { min-height: 3.45rem; } .brand-mark { width: 2.15rem; height: 2.15rem; border-radius: 0.8rem; box-shadow: 0 10px 18px rgba(171, 83, 31, 0.18); } .brand-title { font-size: 1.08rem; } .brand-subtitle { font-size: 0.61rem; letter-spacing: 0.14em; } .account-pill { gap: 0.45rem; padding: 0.22rem 0.5rem 0.22rem 0.3rem; } .account-avatar { width: 1.8rem; height: 1.8rem; } .compact-page-header { padding-bottom: 0.75rem; } .compact-page-header h1 { font-size: clamp(1.6rem, 2.2vw, 2.2rem); } .trips-library-page, .builder-page-compact, .trip-itinerary-page { gap: 1.1rem; } .trip-library-flat .trip-library-list { gap: 0.55rem; } .trip-list-row { padding: 0.9rem 1rem; border-radius: 1rem; background: rgba(255, 255, 255, 0.88); box-shadow: 0 6px 18px rgba(53, 35, 25, 0.035); } .trip-list-row-main { gap: 0.45rem; } .trip-list-row-copy h2 { font-size: 1rem; } .trip-list-row-dates, .trip-list-row-meta, .trip-state-summary, .trip-inline-meta, .trip-state-item { font-size: 0.82rem; } .compact-builder-layout { grid-template-columns: minmax(0, 1fr) minmax(220px, 0.32fr); gap: 1rem; } .compact-builder-form, .builder-summary-card { border-radius: 1rem; box-shadow: 0 8px 22px rgba(53, 35, 25, 0.04); } .compact-builder-form { gap: 1rem; padding: 1rem; } .builder-basics-row { grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 0.72fr)); } .compact-route-builder { gap: 0.75rem; padding: 0.85rem; background: rgba(252, 248, 244, 0.72); } .compact-section-header p { margin-top: 0.08rem; font-size: 0.8rem; } .compact-route-stop-list { gap: 0.55rem; } .route-stop-card-inner { grid-template-columns: auto auto minmax(0, 1fr) auto; padding: 0.65rem 0.75rem; } .route-stop-handle, .route-stop-number { width: 1.85rem; height: 1.85rem; } .route-stop-field input { min-height: 2.35rem; padding-block: 0.55rem; } .route-stop-meta { font-size: 0.74rem; } .builder-summary-card { gap: 0.85rem; padding: 0.95rem; } .builder-summary-head h2 { font-size: 1.05rem; } .trip-itinerary-shell { grid-template-columns: minmax(0, 1.7fr) minmax(300px, 0.72fr); gap: 1rem; } .trip-itinerary-main, .trip-map-panel, .trip-map-missing { border-radius: 1rem; background: rgba(255, 255, 255, 0.9); box-shadow: 0 8px 24px rgba(53, 35, 25, 0.04); } .trip-itinerary-main { padding: 1rem; gap: 0.9rem; } .trip-itinerary-header { align-items: flex-start; gap: 0.8rem; } .trip-itinerary-title h1 { font-size: clamp(1.9rem, 2.6vw, 2.4rem); line-height: 0.92; } .trip-itinerary-routebar { display: grid; gap: 0.28rem; } .route-inline-workspace { min-height: 1.4rem; gap: 0.35rem; } .route-inline-workspace .route-inline-stop { font-size: 0.82rem; } .trip-itinerary-dates, .trip-itinerary-status, .map-caption { font-size: 0.84rem; } .trip-itinerary-summary { gap: 0.55rem; } .trip-summary-metric { min-width: 0; padding: 0.55rem 0.7rem; border-radius: 0.9rem; background: rgba(252, 248, 244, 0.72); } .trip-summary-metric span { font-size: 0.66rem; letter-spacing: 0.08em; } .trip-summary-metric strong { font-size: 0.92rem; } .trip-summary-metric-status { min-width: 13.5rem; } .trip-status-cluster { gap: 0.55rem; } .trip-status-text { font-size: 0.8rem; } .trip-itinerary-toolbar { padding-bottom: 0.1rem; } .route-table-board { border-radius: 1rem; } .route-table-head-itinerary, .itinerary-stop-row { grid-template-columns: 50px minmax(165px, 1.15fr) 84px minmax(150px, 0.95fr) minmax(150px, 0.95fr) minmax(170px, 1fr); } .route-table-head-itinerary { padding: 0.72rem 0; font-size: 0.72rem; } .route-table-head-itinerary > span, .itinerary-cell { padding-inline: 0.8rem; } .itinerary-stop-row { min-height: 4.3rem; } .itinerary-order { width: 1.6rem; height: 1.6rem; font-size: 0.78rem; } .itinerary-cell-destination strong { font-size: 0.98rem; } .itinerary-cell-destination span, .table-item-button span, .table-cell-placeholder, .itinerary-row-details-head span { font-size: 0.76rem; } .itinerary-nights-badge { width: 2rem; height: 2rem; box-shadow: 0 4px 10px rgba(53, 35, 25, 0.07); } .itinerary-cell-stack { gap: 0.5rem; } .table-item-button strong { font-size: 0.86rem; } .table-add-button { width: 1.7rem; height: 1.7rem; font-size: 1.12rem; box-shadow: 0 6px 14px rgba(245, 158, 11, 0.18); } .itinerary-row-details { padding: 0.7rem 0.8rem 0.8rem 3.7rem; } .itinerary-row-detail-list { gap: 0.55rem; } .reservation-row { padding: 0.8rem 0.9rem; border-radius: 0.95rem; } .reservation-row-kicker, .reservation-row-meta, .reservation-row-actions { gap: 0.45rem; } .reservation-row h3 { font-size: 0.94rem; } .reservation-row-meta { font-size: 0.78rem; } .reservation-row-tag, .reservation-row-state, .reservation-row-type { font-size: 0.72rem; } .price-badge { min-height: 1.75rem; padding: 0.15rem 0.62rem; font-size: 0.74rem; } .route-destination-add { min-height: 3.25rem; padding: 0 0.95rem; font-size: 0.94rem; } .trip-itinerary-map { gap: 0.85rem; } .trip-map-panel, .trip-map-missing { padding: 0.9rem; } .trip-map-panel-head h2, .trip-map-missing h2 { font-size: 1.05rem; } .route-map-panel-live { min-height: 29rem; border-radius: 0.9rem; } .trip-map-panel-meta { font-size: 0.78rem; } .mapbox-stop-marker { width: 1.95rem; height: 1.95rem; box-shadow: 0 8px 18px rgba(15, 118, 110, 0.14); } .mapbox-stop-marker.is-auxiliary { width: 1.3rem; height: 1.3rem; } @media (max-width: 1040px) { .compact-builder-layout, .trip-itinerary-shell { grid-template-columns: 1fr; } .builder-summary-rail, .trip-itinerary-map { position: static; } } @media (max-width: 900px) { .trip-list-row { grid-template-columns: 1fr; } .trip-list-row-actions { justify-content: flex-start; } .builder-basics-row { grid-template-columns: 1fr; } .route-table-head-itinerary { display: none; } .itinerary-stop-row { grid-template-columns: 1fr; } .itinerary-cell { min-height: auto; padding: 0.65rem 0.8rem; border-left: 0; border-top: 1px solid rgba(80, 54, 37, 0.05); } .itinerary-cell:first-child { border-top: 0; } .itinerary-row-details { padding-left: 0.8rem; } .route-map-panel-live { min-height: 20rem; } } /* Stippl-like trip workspace pass */ .trip-itinerary-page { padding-top: 0.75rem; } .trip-itinerary-shell { grid-template-columns: minmax(0, 1.72fr) minmax(280px, 0.7fr); gap: 0; border: 1px solid rgba(80, 54, 37, 0.08); border-radius: 1.3rem; background: rgba(255, 255, 255, 0.9); box-shadow: 0 18px 42px rgba(53, 35, 25, 0.06); overflow: hidden; } .trip-itinerary-main, .trip-map-panel { border: 0; border-radius: 0; background: transparent; box-shadow: none; } .trip-itinerary-main { gap: 0; padding: 0; border-right: 1px solid rgba(80, 54, 37, 0.08); } .trip-itinerary-header { padding: 1rem 1.35rem 0.9rem; justify-content: space-between; } .trip-itinerary-title h1 { font-family: var(--font-sans); font-size: clamp(1.85rem, 2.4vw, 2.3rem); font-weight: 700; line-height: 0.95; } .trip-itinerary-dates { font-size: 0.9rem; font-weight: 600; } .trip-itinerary-routebar { gap: 0.2rem; } .route-inline-workspace .route-inline-stop { font-size: 0.88rem; font-weight: 600; } .trip-itinerary-status { font-size: 0.86rem; } .trip-itinerary-summary-compact { gap: 0.8rem; } .trip-summary-inline { display: grid; gap: 0.12rem; min-width: 5.8rem; } .trip-summary-inline strong { color: var(--ink-strong); font-size: 1rem; font-weight: 700; } .trip-summary-inline-label { color: var(--ink-muted); font-size: 0.72rem; font-weight: 600; } .trip-summary-inline-ring { display: inline-grid; place-items: center; width: 4.7rem; height: 4.7rem; border-radius: 999px; border: 4px solid #19c58f; } .trip-status-cluster-compact { align-items: center; gap: 0.7rem; padding-left: 0.2rem; } .trip-status-text { font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.04em; } .trip-status-text strong { font-size: 0.92rem; } .trip-itinerary-toolbar-primary, .trip-itinerary-subnav { padding: 0 1.35rem; min-height: 4rem; border-top: 1px solid rgba(80, 54, 37, 0.08); } .trip-itinerary-toolbar-primary { display: flex; align-items: center; justify-content: space-between; } .trip-itinerary-subnav { display: flex; align-items: center; justify-content: space-between; background: rgba(248, 251, 252, 0.78); } .trip-view-tabs, .trip-subnav-tabs { display: flex; align-items: center; gap: 1.15rem; } .trip-view-tab, .trip-subnav-tab, .trip-subnav-action { min-height: auto; padding: 0; border: 0; border-radius: 0; background: transparent; color: #7d98a3; font: inherit; font-size: 0.9rem; font-weight: 700; box-shadow: none; } .trip-view-tab, .trip-subnav-tab { font-size: 0.96rem; letter-spacing: -0.01em; } .trip-view-tab.is-active, .trip-subnav-tab.is-active { color: #11b889; } .trip-view-tab[disabled], .trip-subnav-tab[disabled], .trip-subnav-action[disabled] { opacity: 1; } .trip-toolbar-actions { gap: 0.7rem; } .trip-toolbar-actions .button-secondary, .trip-toolbar-actions .button-primary { min-height: 2.6rem; padding-inline: 1rem; border-radius: 999px; } .route-table-board { border: 0; border-radius: 0; background: transparent; } .route-table-head-itinerary { padding: 0.9rem 0; border-top: 1px solid rgba(80, 54, 37, 0.08); border-bottom: 1px solid rgba(80, 54, 37, 0.08); color: #143847; font-size: 0.74rem; letter-spacing: 0.08em; } .route-table-head-itinerary, .itinerary-stop-row { grid-template-columns: 56px minmax(230px, 1.2fr) 170px minmax(150px, 0.9fr) minmax(150px, 0.9fr) minmax(160px, 0.95fr); } .itinerary-stop-block { border-bottom: 1px solid rgba(80, 54, 37, 0.08); } .itinerary-stop-block.is-selected { background: rgba(236, 250, 245, 0.66); } .itinerary-stop-row { min-height: 6.55rem; } .itinerary-cell { padding-inline: 1rem; } .itinerary-cell + .itinerary-cell { border-left: 0; } .itinerary-order { width: 1.8rem; height: 1.8rem; border-width: 1px; font-size: 0.88rem; } .itinerary-cell-destination { gap: 0.28rem; } .itinerary-cell-destination strong { font-size: 1.05rem; } .itinerary-cell-destination span { font-size: 0.78rem; } .itinerary-nights-badge { width: 3rem; height: 3rem; font-size: 1.15rem; box-shadow: 0 6px 12px rgba(53, 35, 25, 0.05); } .itinerary-cell-stack { gap: 0.65rem; } .table-item-button strong { font-size: 0.96rem; } .table-item-button span, .table-cell-placeholder { font-size: 0.82rem; } .table-add-button { width: 2rem; height: 2rem; font-size: 1.2rem; } .itinerary-row-details { padding: 0 1.35rem 1rem 4.6rem; background: rgba(255, 255, 255, 0.62); } .itinerary-row-detail-list { gap: 0.45rem; } .reservation-row { padding: 0.62rem 0.75rem; border-radius: 0.9rem; background: rgba(255, 255, 255, 0.88); } .reservation-row h3 { font-size: 0.88rem; } .reservation-row-meta, .reservation-row-tag, .reservation-row-state, .reservation-row-type { font-size: 0.72rem; } .reservation-row-side { gap: 0.55rem; } .price-badge { min-height: 1.8rem; } .route-destination-add { min-height: 4.6rem; justify-content: flex-start; padding-inline: 1.25rem; background: rgba(255, 255, 255, 0.84); color: #8aa0ab; font-size: 0.96rem; border-top: 0; } .trip-itinerary-map { position: static; display: block; } .trip-map-panel { height: 100%; padding: 0; } .trip-map-panel-head { padding: 1rem 1rem 0.8rem; } .trip-map-panel-head h2 { font-family: var(--font-sans); font-size: 1rem; font-weight: 700; } .map-panel-badges { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; color: var(--ink-muted); font-size: 0.82rem; } .route-map-panel-live { min-height: 46rem; border-radius: 0; } .trip-map-panel-meta { padding: 0.8rem 1rem; border-top: 1px solid rgba(80, 54, 37, 0.08); } .trip-map-missing-inline { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0 1rem 0.85rem; color: var(--ink-muted); font-size: 0.8rem; } .trip-map-total-cost { display: block; padding: 0 1rem 1rem; font-size: 1rem; } .city-list-compact { padding: 0 1rem; } @media (max-width: 1040px) { .trip-itinerary-shell { grid-template-columns: 1fr; } .trip-itinerary-main { border-right: 0; border-bottom: 1px solid rgba(80, 54, 37, 0.08); } .route-map-panel-live { min-height: 24rem; } } /* Final route-workspace compression pass */ .trip-itinerary-page { width: min(1720px, calc(100% - 1.25rem)); } .trip-itinerary-header { padding: 1rem 1.1rem 0.7rem; display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; } .trip-itinerary-title { min-width: 0; } .trip-itinerary-title-row { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .trip-itinerary-title h1 { font-size: clamp(2.25rem, 4vw, 3.2rem); line-height: 0.96; } .trip-title-edit { display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: #8c5f3b; font-size: 1rem; text-decoration: none; box-shadow: 0 10px 20px rgba(45, 29, 20, 0.08); } .trip-title-edit:hover { background: #ffffff; color: #bb6a2f; } .trip-buddies-bar { display: inline-flex; align-items: center; gap: 0.55rem; margin-left: 0.15rem; } .trip-buddy-stack { display: flex; align-items: center; padding-left: 0.45rem; } .trip-buddy-stack .trip-buddy-avatar { margin-left: -0.45rem; border: 2px solid rgba(255, 253, 249, 0.96); } .trip-buddy-avatar { width: 2rem; height: 2rem; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.04em; } .trip-buddy-avatar-list { width: 1.35rem; height: 1.35rem; font-size: 0.52rem; } .trip-buddy-add { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 999px; border: 1px dashed rgba(187, 106, 47, 0.4); background: rgba(255, 255, 255, 0.92); color: #bb6a2f; font-size: 1.05rem; font-weight: 700; cursor: pointer; box-shadow: 0 8px 16px rgba(45, 29, 20, 0.08); transition: transform 160ms ease, background 160ms ease, color 160ms ease; } .trip-buddy-add:hover { background: #fff7ef; color: #a85a24; transform: translateY(-1px); } .trip-buddy-current-list { display: grid; gap: 0.35rem; min-width: 0; } .trip-buddy-dialog-shell { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.35rem; width: min(624px, calc(100vw - 1rem)); max-height: min(74vh, 564px); overflow: auto; padding: 0.38rem 0.42rem 0.42rem; background: rgba(255, 252, 247, 0.98); border-radius: 0.8rem; box-shadow: 0 12px 24px rgba(39, 25, 17, 0.14); border: 1px solid rgba(187, 106, 47, 0.12); box-sizing: border-box; } .trip-buddy-panel-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 0.01rem; border-bottom: 1px solid rgba(187, 106, 47, 0.08); } .trip-buddy-panel-head h2 { margin: 0; font-size: 1.12rem; line-height: 1.05; } .trip-buddy-close { display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; border: 0; border-radius: 999px; background: transparent; color: #8a7666; font-size: 1rem; cursor: pointer; } .trip-buddy-close:hover { background: rgba(187, 106, 47, 0.08); color: #5c493c; } .trip-buddy-list-label { color: #7a6a5c; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .trip-buddy-list { display: grid; gap: 0.28rem; min-width: 0; } .trip-buddy-list-item { display: flex; align-items: center; gap: 0.32rem; padding: 0.28rem 0.34rem; border-radius: 0.62rem; background: #ffffff; box-shadow: 0 3px 8px rgba(45, 29, 20, 0.03), inset 0 0 0 1px rgba(187, 106, 47, 0.08); } .trip-buddy-list-item.is-owner { background: linear-gradient(180deg, rgba(255, 250, 244, 0.98), rgba(255, 246, 238, 0.98)); } .trip-buddy-edit-form { align-items: start; } .trip-buddy-edit-fields { min-width: 0; flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 0.18rem; } .trip-buddy-edit-fields .form-field { margin: 0; min-width: 0; } .trip-buddy-edit-fields .field-label { margin-bottom: 0.03rem; font-size: 0.59rem; letter-spacing: 0.04em; } .trip-buddy-edit-actions { display: flex; align-items: center; gap: 0.14rem; margin-left: auto; align-self: center; } .trip-buddy-icon-button { width: 1.2rem; height: 1.2rem; display: inline-grid; place-items: center; border-radius: 999px; border: 1px solid rgba(187, 106, 47, 0.14); background: #fffaf5; cursor: pointer; font-size: 0.7rem; line-height: 1; transition: transform 160ms ease, background 160ms ease, border-color 160ms ease; } .trip-buddy-icon-button:hover { transform: translateY(-1px); } .trip-buddy-save:hover { background: #f4fff8; border-color: rgba(30, 171, 104, 0.28); } .trip-buddy-delete:hover { background: #fff5f5; border-color: rgba(196, 71, 71, 0.25); } .trip-buddy-add-form { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 0.18rem; padding: 0.28rem 0.34rem; border-radius: 0.62rem; background: #ffffff; box-shadow: 0 3px 8px rgba(45, 29, 20, 0.03), inset 0 0 0 1px rgba(187, 106, 47, 0.08); width: 100%; min-width: 0; box-sizing: border-box; } .trip-buddy-add-span { grid-column: 1 / -1; } .trip-buddy-add-head { display: grid; gap: 0.05rem; } .trip-buddy-add-head strong { color: #271f19; font-size: 0.75rem; } .trip-buddy-add-form .dialog-actions { margin-top: 0; justify-content: flex-end; } .trip-buddy-add-actions { align-self: end; margin-left: 0; } .trip-buddy-add-head span { color: #7a6a5c; font-size: 0.92rem; } #buddy-dialog::backdrop { background: rgba(39, 25, 17, 0.36); backdrop-filter: blur(4px); } #buddy-dialog { border: 0; padding: 0; background: transparent; } @media (max-width: 820px) { .trip-buddy-edit-fields, .trip-buddy-add-form { grid-template-columns: 1fr; } .trip-buddy-list-item, .trip-buddy-edit-form { flex-wrap: wrap; } .trip-buddy-edit-actions { margin-left: 0; } } .trip-buddy-list-copy { min-width: 0; display: grid; gap: 0.12rem; } .trip-buddy-list-copy strong { font-size: 0.76rem; color: #271f19; } .trip-buddy-list-copy span { color: #7a6a5c; font-size: 0.62rem; } .trip-buddy-owner-chip { margin-left: auto; padding: 0.12rem 0.22rem; border-radius: 999px; background: rgba(187, 106, 47, 0.12); color: #bb6a2f; font-size: 0.55rem; font-weight: 700; } #buddy-dialog input { min-width: 0; padding: 0.3rem 0.42rem; font-size: 0.73rem; } #buddy-dialog .button-primary, #buddy-dialog .button-secondary { min-height: 1.45rem; padding: 0.2rem 0.42rem; font-size: 0.7rem; } .trip-itinerary-summary-hero { display: flex; align-items: center; gap: 2rem; margin-left: auto; padding-top: 0.15rem; } .trip-cost-eur { display: grid; gap: 0.15rem; justify-items: end; min-width: 11rem; } .trip-cost-eur strong { font-size: 2rem; line-height: 1; } .trip-nights-planned { display: flex; align-items: center; gap: 1rem; padding-left: 1.8rem; border-left: 1px solid rgba(80, 54, 37, 0.1); } .trip-nights-ring { --progress: 0deg; display: grid; place-items: center; width: 5.3rem; height: 5.3rem; border-radius: 999px; background: conic-gradient(#1fc58d 0deg var(--progress), rgba(31, 197, 141, 0.18) var(--progress) 360deg); } .trip-nights-ring::before { content: ""; width: calc(100% - 8px); height: calc(100% - 8px); border-radius: 999px; background: #fffdf9; box-shadow: inset 0 0 0 1px rgba(80, 54, 37, 0.04); grid-area: 1 / 1; } .trip-nights-ring span { grid-area: 1 / 1; position: relative; z-index: 1; color: #1bbf89; font-size: 1.28rem; font-weight: 800; } .trip-nights-copy { display: grid; gap: 0.08rem; } .trip-nights-copy strong, .trip-nights-copy span { color: var(--ink-strong); font-size: 1.5rem; font-weight: 700; line-height: 1.02; } .trip-itinerary-toolbar-primary { min-height: 3.2rem; padding: 0 1.1rem; border-top: 1px solid rgba(80, 54, 37, 0.08); } .trip-itinerary-subnav { padding-inline: 1.1rem; padding-block: 0.9rem; border-top: 1px solid rgba(80, 54, 37, 0.08); } .route-table-body-itinerary { overflow: hidden; } .itinerary-stop-row { min-height: 6rem; padding-inline: 1.1rem; } .itinerary-stop-block { background: transparent; border-bottom: 0; } .itinerary-stop-block.is-selected { background: rgba(239, 249, 246, 0.88); } .itinerary-destination-main { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.9rem; } .itinerary-destination-main > div { display: grid; gap: 0.24rem; } .row-menu-button { min-width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 999px; background: transparent; color: #92a3ac; font: inherit; font-size: 0.95rem; letter-spacing: 0.08em; } .row-menu-button:hover { background: rgba(17, 184, 137, 0.1); color: #11b889; } .nights-control { display: inline-flex; align-items: center; gap: 0.75rem; } .nights-step { min-width: 1.6rem; height: 1.6rem; padding: 0; border: 0; background: transparent; color: #123848; font: inherit; font-size: 1.5rem; line-height: 1; } .itinerary-cell-stack { min-height: 2rem; align-items: flex-start; justify-content: center; } .table-item-button { max-width: 100%; align-items: flex-start; gap: 0.18rem; } .table-item-button strong { line-height: 1.2; } .itinerary-leg-row { display: grid; grid-template-columns: 56px 1fr; align-items: center; min-height: 3.2rem; padding-inline: 1.1rem; border-bottom: 1px solid rgba(80, 54, 37, 0.06); } .itinerary-leg-line { justify-self: center; width: 2px; height: 100%; background: linear-gradient(180deg, rgba(17, 184, 137, 0.14), rgba(17, 184, 137, 0.42)); } .itinerary-leg-content { display: flex; align-items: center; min-height: 100%; padding-left: 0.15rem; } .itinerary-leg-summary, .itinerary-leg-empty { display: inline-flex; align-items: center; gap: 0.7rem; min-height: 2.25rem; padding: 0; border: 0; background: transparent; color: #e55a8b; font: inherit; text-align: left; } .itinerary-leg-empty { justify-content: center; width: 1.9rem; height: 1.9rem; min-height: 1.9rem; border-radius: 999px; background: #f36b98; color: #ffffff; box-shadow: 0 10px 20px rgba(243, 107, 152, 0.22); } .itinerary-leg-empty strong { display: none; } .itinerary-leg-summary.type-transport { color: #dc7e2a; } .itinerary-leg-icon { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 999px; background: rgba(236, 89, 138, 0.12); font-size: 0.9rem; } .itinerary-leg-summary.type-transport .itinerary-leg-icon { background: rgba(220, 126, 42, 0.12); } .itinerary-leg-text { display: grid; gap: 0.08rem; } .itinerary-leg-text strong { font-size: 0.95rem; line-height: 1.2; } .itinerary-leg-text span { color: #8b9da5; font-size: 0.8rem; } .itinerary-leg-empty strong { color: #8b9da5; font-size: 0.88rem; font-weight: 600; } .itinerary-row-details { padding: 0.2rem 1.1rem 1rem 4.6rem; } .reservation-row { border: 1px solid rgba(80, 54, 37, 0.06); box-shadow: none; } .route-destination-add { min-height: 4rem; padding-inline: 1.1rem; border-top: 0; border-radius: 0 0 1.65rem 1.65rem; } .trip-map-panel { display: flex; flex-direction: column; } .trip-map-panel-head { padding: 0.9rem 1rem 0.7rem; } .route-map-panel-live { min-height: 47rem; } .trip-map-panel-footer { display: grid; gap: 0.55rem; padding: 0.8rem 1rem 0.95rem; border-top: 1px solid rgba(80, 54, 37, 0.08); } .trip-map-panel-inline { display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: var(--ink-muted); font-size: 0.84rem; } .trip-map-panel-inline strong { color: var(--ink-strong); font-size: 0.95rem; } .trip-map-panel-meta { padding: 0; border-top: 0; } .trip-itinerary-toolbar-primary .trip-toolbar-actions, .route-inline-workspace, .trip-itinerary-status, .trip-status-cluster-compact, .table-cell-placeholder { display: none !important; } .itinerary-cell-transport .itinerary-cell-stack { min-height: 0; } .itinerary-cell-transport .table-add-button { display: none; } .itinerary-cell-stay .itinerary-cell-stack, .itinerary-cell-plans .itinerary-cell-stack { align-items: center; } .itinerary-cell-stay .table-add-button, .itinerary-cell-plans .table-add-button { width: 1.9rem; height: 1.9rem; border-radius: 999px; color: #ffffff; font-size: 1.1rem; box-shadow: 0 10px 20px rgba(35, 26, 20, 0.12); } .itinerary-cell-stay .table-add-button { background: #1fc58d; } .itinerary-cell-plans .table-add-button { background: #f5b63f; } @media (max-width: 1180px) { .trip-itinerary-header { flex-direction: column; gap: 1rem; } .trip-itinerary-summary-hero { width: 100%; justify-content: flex-start; margin-left: 0; } } .route-map-panel-live .leaflet-container { width: 100%; height: 100%; background: #dceff0; } .leaflet-stop-icon-wrap { background: transparent; border: 0; } .leaflet-stop-icon { display: inline-grid; place-items: center; width: 1.95rem; height: 1.95rem; border-radius: 999px; background: linear-gradient(180deg, #ffffff 0%, #f7fffb 100%); border: 2px solid #27c38a; color: #0f766e; font-size: 0.86rem; font-weight: 700; box-shadow: 0 12px 22px rgba(44, 30, 21, 0.14); } .leaflet-stop-icon.is-selected { background: linear-gradient(180deg, #22c58b 0%, #11b889 100%); border-color: #ffffff; color: #ffffff; } .leaflet-stop-icon.is-auxiliary { width: 1.5rem; height: 1.5rem; border-width: 1px; border-color: #f05493; color: #f05493; font-size: 0.74rem; opacity: 0.86; } /* Final trip table alignment and map marker cleanup */ .trip-itinerary-title h1 { font-size: clamp(2rem, 3.2vw, 2.8rem); line-height: 0.98; letter-spacing: -0.03em; } .trip-itinerary-dates { color: #6d7e87; font-size: 0.96rem; font-weight: 600; letter-spacing: -0.01em; } .trip-cost-eur strong { font-size: 1.8rem; line-height: 1; letter-spacing: -0.03em; } .trip-summary-inline-label { font-size: 0.78rem; } .trip-nights-copy strong, .trip-nights-copy span { font-size: 1.24rem; line-height: 1.04; } .route-table-head-itinerary { text-align: center; } .route-table-head-itinerary > span { justify-self: center; text-align: center; display: inline-flex; align-items: center; gap: 0.38rem; } .route-table-head-itinerary > span:first-child { justify-self: center; text-align: center; } .route-table-head-itinerary > span:nth-child(2) { justify-self: start; text-align: left; } .account-menu { position: relative; } .account-menu summary { list-style: none; } .account-menu summary::-webkit-details-marker { display: none; } .account-menu-trigger { min-height: 2.85rem; padding: 0.35rem 0.55rem 0.35rem 0.4rem; border: 1px solid rgba(121, 98, 77, 0.08); border-radius: 999px; background: rgba(255, 255, 255, 0.82); display: inline-flex; align-items: center; gap: 0.7rem; cursor: pointer; user-select: none; box-shadow: 0 10px 28px rgba(53, 35, 25, 0.04); } .account-menu[open] .account-menu-trigger { border-color: rgba(207, 110, 47, 0.24); box-shadow: 0 12px 30px rgba(207, 110, 47, 0.09); } .account-menu-copy { display: grid; gap: 0.08rem; min-width: 0; } .account-menu-copy strong { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.94rem; font-weight: 700; color: #302920; } .account-menu-caret { color: #8f7868; font-size: 0.8rem; } .account-dropdown { position: absolute; right: 0; top: calc(100% + 0.55rem); z-index: 50; width: min(20rem, calc(100vw - 1.5rem)); padding: 0.8rem; border-radius: 1.2rem; border: 1px solid rgba(121, 98, 77, 0.08); background: rgba(255, 255, 255, 0.98); box-shadow: 0 28px 60px rgba(53, 35, 25, 0.12); display: grid; gap: 0.75rem; } .account-dropdown-identity { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.8rem; align-items: center; padding: 0.4rem; border-radius: 1rem; background: linear-gradient(180deg, rgba(251, 247, 242, 0.96), rgba(245, 237, 228, 0.88)); } .account-dropdown-meta { display: grid; gap: 0.12rem; min-width: 0; } .account-dropdown-meta strong { font-size: 0.98rem; color: #241912; } .account-dropdown-meta span { color: #8f7868; font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .account-dropdown-link, .account-dropdown-logout { min-height: 2.8rem; padding: 0.75rem 0.9rem; border-radius: 0.95rem; border: 1px solid rgba(121, 98, 77, 0.08); background: #ffffff; color: #302920; font: inherit; font-size: 0.92rem; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; justify-content: flex-start; transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease; } .account-dropdown-link:hover, .account-dropdown-logout:hover { border-color: rgba(207, 110, 47, 0.18); background: #fff8f1; color: #cf6e2f; } .account-dropdown-link.is-active { background: #fff4ea; color: #cf6e2f; } .account-dropdown-form { margin: 0; } .profile-avatar { position: relative; overflow: hidden; border-radius: 999px; background: var(--avatar-gradient); color: #ffffff; display: inline-grid; place-items: center; flex: 0 0 auto; box-shadow: 0 10px 24px rgba(53, 35, 25, 0.1); } .profile-avatar::after { content: ""; position: absolute; inset: 0; background: var(--avatar-decoration); pointer-events: none; } .profile-avatar span, .profile-avatar img { position: relative; z-index: 1; } .profile-avatar img { width: 100%; height: 100%; object-fit: cover; } .profile-avatar-header { width: 2.15rem; height: 2.15rem; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.04em; } .profile-avatar-dropdown { width: 3rem; height: 3rem; font-size: 1rem; font-weight: 800; } .profile-avatar-hero { width: 6.75rem; height: 6.75rem; font-size: 2rem; font-weight: 800; letter-spacing: -0.04em; } .profile-page-shell { width: min(1320px, calc(100% - 2rem)); } .profile-page-grid { display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); gap: 1.25rem; align-items: start; } .profile-hero-card, .profile-settings-card { background: rgba(255, 255, 255, 0.9); } .profile-hero-card { display: grid; gap: 1.2rem; position: sticky; top: 5.4rem; } .profile-hero-avatar-wrap { display: flex; align-items: flex-end; gap: 0.8rem; } .profile-hero-copy { display: grid; gap: 0.45rem; } .profile-hero-copy h1 { margin: 0; font-size: clamp(2rem, 3vw, 2.8rem); line-height: 0.96; letter-spacing: -0.05em; } .profile-hero-copy .hero-subtitle { margin: 0; } .profile-hero-bio { margin: 0.35rem 0 0; color: #6f6054; line-height: 1.6; } .profile-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .profile-form textarea { min-height: 8.5rem; resize: vertical; } @media (max-width: 980px) { .profile-page-grid { grid-template-columns: 1fr; } .profile-hero-card { position: static; } } .itinerary-stop-row { min-height: 2.1rem; padding-block: 0.15rem; } .route-table-head-itinerary, .itinerary-stop-row { grid-template-columns: 48px minmax(175px, 1.24fr) 104px minmax(112px, 0.82fr) minmax(112px, 0.82fr) minmax(124px, 0.88fr); } .itinerary-cell-destination strong { font-size: 1rem; letter-spacing: -0.02em; } .itinerary-cell-destination span { color: #7b8d96; font-size: 0.84rem; } .itinerary-leg-row { display: grid; grid-template-columns: 48px minmax(175px, 1.24fr) 104px minmax(112px, 0.82fr) minmax(112px, 0.82fr) minmax(124px, 0.88fr); align-items: center; min-height: 0.75rem; padding-inline: 1.1rem; border-bottom: 0; } .itinerary-leg-spine { justify-self: center; width: 1px; height: 100%; background: rgba(240, 84, 147, 0.48); } .itinerary-leg-rule { grid-column: 2 / 7; grid-row: 1; height: 1px; background: rgba(240, 84, 147, 0.42); } .itinerary-leg-transport-slot { grid-column: 6; grid-row: 1; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; } .itinerary-leg-slot { min-height: 0; } .itinerary-leg-add-wrap { display: grid; justify-items: center; row-gap: 0.03rem; } .itinerary-leg-distance { color: #f05493; font-size: 0.62rem; font-weight: 700; line-height: 1; } .itinerary-cell { padding-top: 0.16rem; padding-bottom: 0.16rem; padding-inline: 0.74rem; } .itinerary-cell-index, .itinerary-cell-nights, .itinerary-cell-stay, .itinerary-cell-plans, .itinerary-cell-transport { align-items: center; } .itinerary-cell-stack { min-height: 1.2rem; } .itinerary-order { width: 1.7rem; height: 1.7rem; font-size: 0.82rem; } .itinerary-nights-badge { width: 2.55rem; height: 2.55rem; font-size: 1rem; } .table-add-button, .itinerary-leg-empty { width: 1.42rem; height: 1.42rem; min-height: 1.42rem; } .mapbox-stop-marker { display: grid; justify-items: center; gap: 0; } .mapbox-stop-marker-pin { width: 2.25rem; height: 2.25rem; } .mapbox-stop-marker-label { display: none; } .leaflet-stop-icon { width: 2.15rem; height: 2.15rem; } /* Final compact density and column colors */ .trip-nights-copy strong, .trip-nights-copy span, .route-table-head-itinerary > span:nth-child(3) { color: #243b7a; } .route-table-head-itinerary > span:nth-child(4) { color: #1fc58d; } .route-table-head-itinerary > span:nth-child(5) { color: #f5b63f; } .route-table-head-itinerary > span:nth-child(6) { color: #f05493; } .route-table-head-itinerary { padding-top: 0.55rem; padding-bottom: 0.55rem; } .itinerary-stop-row { min-height: 3.55rem; padding-block: 0.02rem; } .itinerary-cell { padding-top: 0.02rem; padding-bottom: 0.02rem; } .itinerary-destination-main > div { gap: 0.05rem; } .itinerary-cell-stack { min-height: 1rem; gap: 0.16rem; } .nights-control { gap: 0.45rem; } .itinerary-nights-badge { width: 2.4rem; height: 2.4rem; } .itinerary-leg-row { min-height: 0.28rem; } .itinerary-leg-add-wrap { row-gap: 0; } .itinerary-leg-empty { width: 1.3rem; height: 1.3rem; min-height: 1.3rem; box-shadow: 0 6px 12px rgba(243, 107, 152, 0.18); } .itinerary-leg-distance { margin-top: -0.08rem; } /* Final button parity and heading color fix */ .trip-nights-copy strong, .trip-nights-copy span, .route-table-head-itinerary > span:nth-child(3) { color: #243b7a !important; } .trip-nights-ring { --ring-track: rgba(31, 197, 141, 0.14); --ring-fill: #d94654; background: conic-gradient(var(--ring-fill) 0deg var(--progress), var(--ring-track) var(--progress) 360deg) !important; } .trip-nights-ring.is-match { --ring-track: rgba(31, 197, 141, 0.14); --ring-fill: #1fc58d; } .trip-nights-ring.is-mismatch { --ring-track: rgba(217, 70, 84, 0.12); --ring-fill: #d94654; } .trip-nights-ring span { color: var(--ring-fill) !important; } .itinerary-cell-stay .table-add-button, .itinerary-cell-plans .table-add-button, .itinerary-leg-empty { width: 1.9rem !important; height: 1.9rem !important; min-height: 1.9rem !important; font-size: 1.1rem !important; } .itinerary-leg-empty { box-shadow: 0 10px 20px rgba(243, 107, 152, 0.22) !important; } .itinerary-leg-distance { font-size: 0.76rem !important; font-weight: 700 !important; } /* Final typography, header, and nights control pass */ html, body, button, input, select, textarea { font-family: "Manrope", system-ui, sans-serif !important; } h1, h2, .brand-title { font-family: "Manrope", system-ui, sans-serif !important; } .app-header { position: sticky; top: 0; z-index: 40; backdrop-filter: blur(14px); background: rgba(251, 247, 242, 0.88); border-bottom: 1px solid rgba(121, 98, 77, 0.08); } .app-header-inner { width: min(1560px, calc(100% - 1.8rem)); min-height: 4.2rem; gap: 1rem; } .app-header-left { gap: 1rem; } .brand { gap: 0.7rem; text-decoration: none; } .brand-mark, .account-avatar { display: none !important; } .brand-mark-dot { width: 0.65rem; height: 0.65rem; border-radius: 999px; background: linear-gradient(135deg, #d96a2f, #ef9b59); box-shadow: 0 0 0 6px rgba(217, 106, 47, 0.08); flex: 0 0 auto; } .brand-title { font-size: 1.18rem; font-weight: 800; letter-spacing: -0.03em; color: #1f242d; } .brand-subtitle { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: #927f70; } .app-nav-link { border-radius: 999px; padding: 0.52rem 0.95rem; font-weight: 700; background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(121, 98, 77, 0.08); } .account-cluster { gap: 0.7rem; } .account-pill { min-height: 2.6rem; padding: 0.55rem 0.95rem; border-radius: 999px; background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(121, 98, 77, 0.08); box-shadow: none; } .account-meta { gap: 0.1rem; } .account-label { font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: #b39a87; } .account-meta strong { font-size: 0.94rem; font-weight: 700; color: #302920; } .header-logout { min-height: 2.6rem; border-radius: 999px; padding-inline: 1rem; background: #cf6e2f; color: #fff; border-color: transparent; box-shadow: none; } .trip-itinerary-dates { letter-spacing: -0.01em; } .trip-nights-copy strong, .trip-nights-copy span, .route-table-head-itinerary > span:nth-child(3) { color: #243b7a !important; } .itinerary-stop-row { min-height: 2.85rem !important; padding-block: 0 !important; } .itinerary-cell { padding-top: 0 !important; padding-bottom: 0 !important; } .itinerary-cell-index, .itinerary-cell-destination, .itinerary-cell-nights, .itinerary-cell-stay, .itinerary-cell-plans, .itinerary-cell-transport { min-height: 2.85rem; } .itinerary-destination-main > div { gap: 0.02rem !important; } .itinerary-cell-destination strong { line-height: 1.02; } .itinerary-cell-destination span { line-height: 1.05; } .nights-control { gap: 0.34rem !important; } .nights-step { width: 1.2rem; height: 1.2rem; min-height: 1.2rem; padding: 0; border: 0; background: transparent; color: #243b7a; font-size: 1.15rem; font-weight: 800; line-height: 1; box-shadow: none; } .nights-step:hover { color: #0f264f; background: transparent; transform: none; } .itinerary-nights-badge { width: 2.18rem !important; height: 2.18rem !important; } .itinerary-leg-row { min-height: 0.2rem !important; } .itinerary-leg-add-wrap { row-gap: 0.14rem !important; } .itinerary-leg-distance { margin-top: 0 !important; } .day-by-day-board { padding: 0 1.1rem 1rem; } .day-by-day-head { display: grid; grid-template-columns: 170px minmax(0, 1.15fr) minmax(220px, 0.9fr); align-items: center; gap: 1rem; min-height: 3.35rem; padding: 0 0.2rem; border-top: 1px solid rgba(121, 98, 77, 0.08); border-bottom: 1px solid rgba(121, 98, 77, 0.08); } .day-by-day-head span { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #214958; display: inline-flex; align-items: center; gap: 0.38rem; } .day-by-day-body { display: grid; } .day-row-card { display: grid; grid-template-columns: 170px minmax(0, 1.15fr) minmax(220px, 0.9fr); gap: 1rem; align-items: center; min-height: 6.2rem; padding: 0.35rem 0.2rem; border-bottom: 1px solid rgba(121, 98, 77, 0.08); } .day-row-col { min-width: 0; } .day-row-col-day { display: grid; grid-template-columns: 1.2rem minmax(0, 1fr); gap: 0.55rem; align-items: start; } .day-row-chevron { border: 0; background: transparent; color: #8fa1ac; font-size: 1.55rem; line-height: 1; padding: 0; } .day-row-day-copy { display: grid; gap: 0.14rem; } .day-row-day-copy strong { display: flex; align-items: center; gap: 0.45rem; font-size: 1.2rem; line-height: 1; color: #143a47; } .day-row-day-copy span { font-size: 0.92rem; color: #6f8190; display: block; line-height: 1.2; } .day-row-travel-flag { font-size: 0.78rem; font-weight: 700; color: #d94654; } .day-row-col-destination { display: grid; gap: 0.38rem; } .day-row-destination-stack { display: grid; gap: 0.38rem; } .day-row-destination-block { display: grid; gap: 0.18rem; } .day-row-destination-line { display: flex; align-items: center; gap: 0.48rem; flex-wrap: nowrap; white-space: nowrap; } .day-row-destination-line strong { font-size: 1rem; color: #133f50; } .day-row-connector { color: #f05493; font-size: 1rem; font-weight: 800; } .day-row-weather-line { display: flex; align-items: flex-start; gap: 1.2rem; flex-wrap: wrap; } .day-row-weather-city { display: inline-flex; } .day-weather { display: inline-flex; align-items: center; gap: 0.38rem; min-height: 1.4rem; color: #143a47; padding-left: 0; } .day-weather-icon { font-size: 1rem; } .day-weather-temp { font-size: 0.94rem; font-weight: 700; } .day-weather-loading, .day-weather-empty { color: #8d9aa3; font-size: 0.86rem; } .day-row-notes { display: grid; gap: 0.18rem; } .day-row-notes strong { font-size: 1rem; color: #123847; } .day-row-notes span { font-size: 0.9rem; color: #6f8190; } .trip-itinerary-header { grid-template-columns: minmax(0, 1fr) auto !important; align-items: start !important; } .trip-itinerary-title { justify-self: start; align-self: start; } .trip-itinerary-summary-hero { justify-self: end !important; margin-left: auto !important; align-items: center !important; column-gap: 1.7rem !important; } .trip-cost-eur { min-width: 11rem; text-align: right; } .trip-nights-planned { margin-left: 0.4rem; } .trip-itinerary-dates { text-align: left; } .itinerary-cell-destination span { font-size: 0.76rem !important; line-height: 1.05 !important; white-space: nowrap; } .destination-suggestion-list { display: grid; gap: 0.22rem; max-height: 18rem; overflow: auto; margin-top: -0.35rem; padding: 0.45rem; border: 1px solid rgba(80, 54, 37, 0.08); border-radius: 1rem; background: #fffdfa; box-shadow: 0 18px 38px rgba(43, 28, 20, 0.12); } .destination-suggestion-item { display: grid; gap: 0.16rem; width: 100%; padding: 0.72rem 0.82rem; border: 0; border-radius: 0.8rem; background: transparent; text-align: left; cursor: pointer; } .destination-suggestion-item:hover, .destination-suggestion-item:focus-visible { background: rgba(222, 109, 35, 0.08); outline: none; } .destination-suggestion-item strong { font-size: 1rem; line-height: 1.2; color: #1f1712; font-weight: 700; } .destination-suggestion-item span { font-size: 0.84rem; line-height: 1.2; color: #7b6f68; } #destination-city-input, .country-flag-inline, .destination-suggestion-item span, .destination-suggestion-item strong { font-family: "Plus Jakarta Sans", "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; } .country-flag-inline { font-weight: 600; } #destination-city-meta[hidden] { display: none; } #destination-city-meta { margin-top: -0.15rem; color: #7b6f68; } .destination-meta-inline { display: inline-flex; align-items: center; gap: 0.42rem; font-size: 0.92rem; line-height: 1.2; } .country-flag-icon { width: 1rem; height: 0.75rem; border-radius: 0.12rem; object-fit: cover; box-shadow: 0 0 0 1px rgba(31, 23, 18, 0.08); vertical-align: middle; } .itinerary-group { position: relative; z-index: 0; transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease; will-change: transform; } .itinerary-group:has(.itinerary-stop-block.is-menu-open) { z-index: 30; } .itinerary-group.drag-ghost { pointer-events: none; opacity: 1 !important; transform: none !important; filter: drop-shadow(0 22px 34px rgba(37, 25, 18, 0.18)); } .itinerary-stop-block { cursor: grab; } .itinerary-stop-block:active { cursor: grabbing; } .itinerary-group.is-dragging { opacity: 0.44; transform: scale(0.995); } .itinerary-group.is-drop-target .itinerary-stop-block { background: rgba(239, 249, 246, 0.72); } .itinerary-cell-destination { position: relative; } .itinerary-stop-block.is-zero-nights .itinerary-cell-destination .itinerary-destination-main { padding-left: 1.15rem; } .itinerary-stop-block.is-zero-nights .itinerary-cell-destination strong { color: #6c90a0; } .itinerary-stop-block.is-menu-open { position: relative; z-index: 20; isolation: isolate; } .stop-action-menu { position: absolute; top: calc(100% + 0.2rem); left: 0; z-index: 8; min-width: 13rem; padding: 0.4rem; border: 1px solid rgba(80, 54, 37, 0.08); border-radius: 0.9rem; background-color: #ffffff !important; background: #ffffff !important; background-image: none !important; opacity: 1 !important; box-shadow: 0 18px 32px rgba(43, 28, 20, 0.14); backdrop-filter: none; filter: none !important; mix-blend-mode: normal; isolation: isolate; } .stop-action-menu::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: #ffffff; background-image: none; opacity: 1; } .stop-action-delete { display: inline-flex; align-items: center; gap: 0.55rem; width: 100%; padding: 0.72rem 0.78rem; border: 0; border-radius: 0.7rem; background: #ffffff; opacity: 1; color: #b23a3a; font: inherit; font-size: 0.92rem; font-weight: 700; text-align: left; cursor: pointer; } .stop-action-edit { display: inline-flex; align-items: center; gap: 0.55rem; width: 100%; padding: 0.72rem 0.78rem; border: 0; border-radius: 0.7rem; background: #ffffff; opacity: 1; color: #235069; font: inherit; font-size: 0.92rem; font-weight: 700; text-align: left; cursor: pointer; } .date-display-control { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; } .date-display-control input[name$="_display"] { padding-right: 3rem; } .date-picker-trigger { position: absolute; right: 0.72rem; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--ink-strong); font: inherit; font-size: 1rem; line-height: 1; cursor: pointer; z-index: 2; } .native-date-proxy { position: absolute; inset: 0; opacity: 0; pointer-events: none; width: 0; height: 0; } .stop-action-edit:hover { background: rgba(35, 80, 105, 0.08); } .stop-action-delete:hover:not(:disabled) { background: rgba(226, 76, 76, 0.08); } .stop-action-delete:disabled { color: #b7aaa3; cursor: not-allowed; } /* Final destination + map rail fixes */ .route-table-board, .route-table-body-itinerary, .itinerary-group { overflow: visible !important; } .trip-itinerary-shell { align-items: stretch; } .trip-itinerary-main { min-width: 0; } .trip-itinerary-map { position: sticky; top: 5rem; align-self: stretch; min-height: 100%; display: flex; } .trip-map-panel { width: 100%; height: 100%; min-height: 100%; padding: 0; overflow: hidden; } .route-map-panel-live { flex: 1 1 auto; width: 100%; min-height: 100%; height: 100%; } .route-map-panel-live .mapboxgl-map, .route-map-panel-live .leaflet-container, .route-map-panel-live .route-map-surface { width: 100%; height: 100%; min-height: 100%; } .destination-form { position: relative; display: grid !important; grid-template-columns: 1fr !important; gap: 0.9rem; } .destination-panel-head { position: relative; display: block; padding-right: 2.8rem; } .destination-panel-head h2 { margin: 0; } .destination-form .trip-buddy-close { position: absolute; top: 0; right: 0; } .destination-panel-copy { display: block; margin: -0.15rem 0 0.4rem; } .destination-primary-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.7rem; align-items: end; } .destination-save-button { justify-self: end; } .reservation-composer { display: grid !important; grid-template-columns: 1fr !important; gap: 1rem; width: min(1120px, calc(100vw - 2rem)); max-width: 1120px; max-height: calc(100vh - 2rem); overflow: auto; } .reservation-composer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .reservation-composer-head h2 { margin: 0; } .reservation-context-line { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; } .reservation-context-chip { display: inline-flex; align-items: center; min-height: 1.9rem; padding: 0.28rem 0.72rem; border-radius: 999px; background: rgba(208, 111, 55, 0.08); border: 1px solid rgba(208, 111, 55, 0.14); color: var(--accent-strong); font-size: 0.8rem; font-weight: 700; } .reservation-mode-tabs { gap: 0.25rem; padding: 0.25rem; } .reservation-mode-tabs .segment { min-height: 2rem; padding: 0.55rem 0.85rem; font-size: 0.83rem; } .reservation-composer-grid, .reservation-type-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; } .reservation-composer-grid { align-items: end; } .reservation-composer-field { gap: 0.38rem; } .reservation-place-field { position: relative; } .reservation-composer-field.is-title { grid-column: 1 / -1; } .reservation-composer .date-display-control { width: 100%; } .reservation-composer .date-display-control input[readonly] { background: rgba(255, 255, 255, 0.92); } .reservation-composer-price-field { max-width: 220px; } .reservation-eur-field { position: relative; } .reservation-eur-field input { padding-right: 4rem; } .reservation-eur-badge { position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); min-height: 1.8rem; padding: 0.2rem 0.6rem; display: inline-flex; align-items: center; border-radius: 999px; background: rgba(208, 111, 55, 0.1); color: var(--accent-strong); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; } .reservation-composer-type-fields { display: grid; gap: 0.9rem; padding-top: 0.95rem; border-top: 1px solid rgba(80, 54, 37, 0.08); } .reservation-type-stack { display: grid; gap: 0.9rem; } .reservation-context-card, .reservation-route-card { display: grid; gap: 0.32rem; padding: 0.9rem 1rem; border-radius: 1rem; border: 1px solid rgba(80, 54, 37, 0.08); background: rgba(255, 255, 255, 0.82); } .reservation-place-suggestions { position: absolute; left: 0; right: 0; top: calc(100% + 0.35rem); z-index: 35; display: grid; gap: 0.28rem; max-height: 16rem; overflow: auto; padding: 0.45rem; border-radius: 1rem; border: 1px solid rgba(80, 54, 37, 0.1); background: #fffdfa; box-shadow: 0 18px 40px rgba(43, 28, 20, 0.14); } .reservation-place-suggestion-item { display: grid; gap: 0.16rem; width: 100%; padding: 0.72rem 0.8rem; border: 0; border-radius: 0.82rem; background: transparent; text-align: left; cursor: pointer; color: var(--ink); } .reservation-place-suggestion-item:hover, .reservation-place-suggestion-item:focus-visible { background: rgba(208, 111, 55, 0.08); outline: none; } .reservation-place-suggestion-item strong { color: var(--ink-strong); font-size: 0.95rem; } .reservation-place-suggestion-item span { color: var(--ink-muted); font-size: 0.82rem; } .reservation-place-suggestion-item small { color: var(--ink-soft); font-size: 0.74rem; } .reservation-context-kicker { color: var(--ink-soft); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .reservation-context-card strong, .reservation-route-card strong { color: var(--ink-strong); font-size: 0.95rem; } .reservation-route-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; margin-top: 0.25rem; } .reservation-time-range { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; } .reservation-composer input[data-time-field] { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; } .activity-reserved-fields { display: grid; } .reservation-participants { display: grid; gap: 0.45rem; padding: 0.85rem 0.95rem; border-radius: 1rem; border: 1px solid rgba(80, 54, 37, 0.08); background: rgba(255, 255, 255, 0.84); } .reservation-participants-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; } .reservation-participants-head small { color: var(--ink-muted); font-size: 0.76rem; } .reservation-participant-list { display: flex; flex-wrap: wrap; gap: 0.55rem; } .reservation-participant-chip { position: relative; display: inline-flex; align-items: center; } .reservation-participant-chip input { position: absolute; opacity: 0; pointer-events: none; } .reservation-participant-chip span { display: inline-flex; align-items: center; min-height: 2rem; padding: 0.36rem 0.82rem; border-radius: 999px; border: 1px solid rgba(80, 54, 37, 0.1); background: rgba(255, 255, 255, 0.95); color: var(--ink); font-size: 0.82rem; font-weight: 700; cursor: pointer; transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease; } .reservation-participant-chip input:checked + span { background: rgba(208, 111, 55, 0.11); border-color: rgba(208, 111, 55, 0.28); color: var(--accent-strong); } .reservation-participant-chip span:hover { transform: translateY(-1px); } .reservation-composer-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; } .reservation-composer textarea { min-height: 5.8rem; } .inline-editor-dialog { width: min(1160px, calc(100vw - 1.5rem)); max-width: 1160px; padding: 0; border: 0; background: transparent; overflow: visible; } .inline-editor-dialog::backdrop { background: rgba(24, 18, 13, 0.46); backdrop-filter: blur(4px); } .stop-action-menu.is-upward { top: auto; bottom: calc(100% + 0.2rem); } @media (max-width: 1080px) { .trip-itinerary-map { position: static; min-height: 24rem; } .trip-map-panel, .route-map-panel-live, .route-map-panel-live .mapboxgl-map, .route-map-panel-live .leaflet-container, .route-map-panel-live .route-map-surface { min-height: 24rem; height: 24rem; } .reservation-composer-grid, .reservation-type-grid, .reservation-time-range, .reservation-route-grid { grid-template-columns: 1fr; } .reservation-composer-price-field { max-width: none; } } /* Product refinement: trip library, planner, lists, calendar */ .trip-library-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.35rem; } .trip-library-card { position: relative; min-height: 22rem; border-radius: 1.5rem; overflow: hidden; border: 1px solid rgba(80, 54, 37, 0.12); box-shadow: 0 20px 48px rgba(36, 25, 18, 0.12); background: #f4ede5; isolation: isolate; transition: transform 180ms ease, box-shadow 180ms ease; } .compact-page-header-library { align-items: end; margin-bottom: 1.25rem; } .compact-page-header-library .compact-page-header-copy h1 { font-size: clamp(2.4rem, 3.2vw, 3.4rem); line-height: 0.95; letter-spacing: -0.04em; } .trip-library-card:hover { transform: translateY(-4px); box-shadow: 0 26px 58px rgba(36, 25, 18, 0.18); } .trip-library-card-link { position: absolute; inset: 0; z-index: 4; } .trip-library-card-media { position: absolute; inset: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; } .trip-library-cover-panel { position: relative; width: 100%; height: 100%; overflow: hidden; } .trip-library-cover-image, .trip-library-cover-placeholder { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transition: transform 220ms ease; } .trip-library-cover-image { z-index: 0; object-fit: cover; object-position: center; filter: saturate(0.94) contrast(1.03) brightness(0.92); } .trip-library-cover-placeholder { z-index: -1; background: radial-gradient(circle at 18% 18%, rgba(255, 233, 206, 0.32), transparent 30%), linear-gradient(140deg, #d5ac7f, #2b4d62 58%, #17242d); } .trip-library-card-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(12, 10, 9, 0.22), rgba(12, 10, 9, 0.08) 38%, rgba(12, 10, 9, 0.22) 100%), linear-gradient(180deg, rgba(18, 16, 14, 0.02), rgba(18, 16, 14, 0.16) 34%, rgba(18, 16, 14, 0.76) 100%); transition: background 180ms ease; } .trip-library-card:hover .trip-library-cover-image, .trip-library-card:hover .trip-library-cover-placeholder { transform: scale(1.04); } .trip-library-card:hover .trip-library-card-overlay { background: linear-gradient(90deg, rgba(12, 10, 9, 0.32), rgba(12, 10, 9, 0.12) 38%, rgba(12, 10, 9, 0.3) 100%), linear-gradient(180deg, rgba(18, 16, 14, 0.06), rgba(18, 16, 14, 0.22) 34%, rgba(18, 16, 14, 0.84) 100%); } .trip-library-card-body { position: absolute; inset: auto 0 0; z-index: 2; display: grid; gap: 0.85rem; padding: 1.4rem; color: #fffdf8; } .trip-library-card-topline { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; } .trip-library-state, .trip-library-budget { padding: 0.36rem 0.68rem; border-radius: 999px; background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(10px); } .trip-library-budget { text-transform: none; letter-spacing: 0; } .trip-library-card-copy { display: grid; gap: 0.3rem; } .trip-library-card-copy h2, .trip-library-card-copy p { color: inherit; } .workspace-panel { display: grid; gap: 1rem; } .planner-board-head, .trip-map-header, .calendar-side-head, .day-plan-card-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .packing-board, .calendar-board, .day-by-day-board { padding: 1rem 1.1rem 1.2rem; border-radius: 1.25rem; border: 1px solid rgba(80, 54, 37, 0.08); background: rgba(255, 255, 255, 0.72); } .day-by-day-body { display: grid; gap: 0.9rem; } .day-plan-card { border: 1px solid rgba(80, 54, 37, 0.08); border-radius: 1rem; overflow: hidden; background: rgba(255, 255, 255, 0.88); } .day-plan-card-head { width: 100%; display: grid; grid-template-columns: minmax(160px, 0.9fr) minmax(0, 1.1fr) auto; gap: 1rem; align-items: center; padding: 1rem 1.1rem; border: 0; background: transparent; text-align: left; cursor: pointer; } .day-plan-head-day { display: flex; align-items: center; gap: 0.8rem; } .day-plan-head-day strong, .day-plan-head-route, .day-plan-head-summary, .day-plan-entry-copy strong, .packing-category-card h3, .calendar-grid-header strong { color: var(--ink-strong); } .day-plan-head-day small, .day-plan-entry-copy small, .calendar-grid-header span, .trip-map-inline-notice { color: var(--ink-muted); } .day-plan-chevron { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 999px; background: rgba(208, 111, 55, 0.1); color: var(--accent-strong); font-size: 1.1rem; font-weight: 800; } .day-plan-card-body { display: grid; gap: 0.9rem; padding: 0 1.1rem 1.1rem; border-top: 1px solid rgba(80, 54, 37, 0.08); } .day-plan-toolbar-copy { display: grid; gap: 0.18rem; } .day-plan-linked-strip { display: flex; flex-wrap: wrap; gap: 0.55rem; } .day-plan-linked-chip { border: 1px solid rgba(80, 54, 37, 0.08); border-radius: 999px; background: rgba(255, 255, 255, 0.94); padding: 0.45rem 0.8rem; display: inline-flex; align-items: center; gap: 0.45rem; cursor: pointer; } .day-plan-table-wrap { overflow: auto; } .day-plan-table { width: 100%; border-collapse: collapse; } .day-plan-table th, .day-plan-table td { padding: 0.82rem 0.7rem; border-bottom: 1px solid rgba(80, 54, 37, 0.08); vertical-align: top; text-align: left; } .day-plan-table th { font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); } .day-plan-entry-actions { display: flex; gap: 0.45rem; justify-content: flex-end; flex-wrap: wrap; } .day-plan-empty { display: grid; gap: 0.18rem; color: var(--ink-muted); } .packing-list-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; } .packing-category-card { padding: 1rem; border-radius: 1rem; border: 1px solid rgba(80, 54, 37, 0.08); background: rgba(255, 255, 255, 0.9); display: grid; gap: 0.8rem; } .packing-items { display: grid; gap: 0.55rem; } .packing-item-row { display: grid; grid-template-columns: auto 1fr auto; gap: 0.65rem; align-items: center; } .packing-item-row input { width: 1rem; height: 1rem; } .packing-add-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.6rem; } .calendar-board-shell { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.7fr); gap: 1rem; } .calendar-grid, .calendar-side-panel { border: 1px solid rgba(80, 54, 37, 0.08); border-radius: 1rem; background: rgba(255, 255, 255, 0.9); } .calendar-grid { padding: 1rem; display: grid; gap: 0.9rem; } .calendar-grid-weekdays, .calendar-week-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.5rem; } .calendar-grid-weekdays span { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); } .calendar-day-cell { min-height: 8rem; border: 1px solid rgba(80, 54, 37, 0.08); border-radius: 0.9rem; background: #fffdfa; padding: 0.75rem; display: grid; align-content: start; gap: 0.6rem; text-align: left; cursor: pointer; } .calendar-day-cell.is-muted { opacity: 0.48; } .calendar-day-cell.is-selected { border-color: rgba(208, 111, 55, 0.34); box-shadow: inset 0 0 0 1px rgba(208, 111, 55, 0.22); } .calendar-day-number { font-weight: 800; color: var(--ink-strong); } .calendar-day-events, .calendar-side-list { display: grid; gap: 0.4rem; } .calendar-event-pill, .calendar-side-item { padding: 0.42rem 0.56rem; border-radius: 0.7rem; font-size: 0.78rem; line-height: 1.35; } .calendar-event-pill { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .calendar-side-panel { padding: 1rem; display: grid; align-content: start; gap: 0.8rem; } .calendar-side-item { border: 0; background: rgba(255, 255, 255, 0.94); text-align: left; cursor: pointer; } .calendar-side-empty { display: grid; gap: 0.28rem; color: var(--ink-muted); } .type-stay { background: rgba(39, 195, 138, 0.14); color: #0f6b4f; } .type-activity { background: rgba(244, 196, 60, 0.16); color: #8a5d00; } .type-transport { background: rgba(240, 84, 147, 0.14); color: #b02864; } .trip-map-badges { display: flex; flex-wrap: wrap; gap: 0.45rem; } .trip-map-inline-notice { padding: 0.8rem 1rem 0; } .missing-coords-list { display: grid; gap: 0.6rem; padding: 0 1rem 1rem; } @media (max-width: 1080px) { .calendar-board-shell, .day-plan-card-head { grid-template-columns: 1fr; } .packing-add-form { grid-template-columns: 1fr; } } .trip-inbox-banner{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:.95rem 1.1rem;border:1px solid rgba(208,111,55,.14);border-radius:1.1rem;background:linear-gradient(180deg,rgba(255,248,241,.95),rgba(255,241,230,.88));box-shadow:0 16px 34px rgba(53,35,25,.08)}.trip-inbox-banner-copy{display:grid;gap:.22rem}.trip-inbox-banner-copy strong{color:var(--ink-strong);font-size:.94rem}.trip-inbox-banner-copy span{font-family:var(--font-sans);font-size:.98rem;font-weight:700;color:var(--accent-strong);word-break:break-word}.trip-inbox-banner-meta{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}.trip-inbox-banner-meta span{display:inline-flex;align-items:center;min-height:1.9rem;padding:.28rem .72rem;border-radius:999px;background:rgba(255,255,255,.82);border:1px solid rgba(80,54,37,.08);font-size:.78rem;font-weight:700;color:var(--ink)}@media (max-width:720px){.trip-inbox-banner{align-items:flex-start}.trip-inbox-banner-meta{width:100%}} .trip-workspace-shell{align-items:start}.trip-workspace-main{display:grid;gap:1.25rem}.trip-workspace-hero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(320px,.9fr);gap:1.25rem;padding:1.5rem;border:1px solid rgba(80,54,37,.08);border-radius:1.75rem;background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(249,241,233,.94));box-shadow:0 20px 48px rgba(53,35,25,.08);position:relative;overflow:hidden}.trip-workspace-hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at top left,rgba(208,111,55,.16),transparent 32%),radial-gradient(circle at bottom right,rgba(219,178,145,.16),transparent 34%);pointer-events:none}.trip-workspace-hero-main,.trip-workspace-hero-side{position:relative;z-index:1}.trip-workspace-hero-main{display:grid;gap:1rem}.trip-workspace-eyebrow-row,.trip-workspace-title-row,.trip-workspace-actions,.trip-workspace-progress-head,.trip-workspace-section-head,.trip-workspace-tab-strip,.trip-workspace-map-head,.trip-workspace-floating-head,.timeline-item-head,.timeline-item-meta,.imported-item-detail-row,.imported-item-actions,.trip-workspace-section-tools{display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap}.trip-workspace-title-row{align-items:flex-start}.trip-workspace-title-copy{display:grid;gap:.35rem}.trip-workspace-summary-copy{display:grid;gap:1rem;max-width:48rem}.trip-workspace-actions{justify-content:flex-start}.trip-workspace-hero-side{display:grid;gap:1rem}.trip-workspace-progress-card,.trip-workspace-metric-card,.imported-item-card,.timeline-item-card,.trip-day-agenda,.route-board-stop,.trip-workspace-side-card,.trip-workspace-loading-card,.trip-workspace-map-context,.trip-calendar-cell,.trip-workspace-floating-card,.route-board-reservation,.route-board-suggested,.trip-day-agenda-item,.trip-draft-chip{border:1px solid rgba(80,54,37,.08);border-radius:1.15rem;background:rgba(255,255,255,.88);box-shadow:0 12px 28px rgba(53,35,25,.05)}.trip-workspace-progress-card{display:grid;gap:.8rem;padding:1rem 1.1rem;background:linear-gradient(180deg,rgba(255,248,241,.95),rgba(255,255,255,.92))}.trip-workspace-progress-value{font-family:var(--font-display);font-size:2.4rem;line-height:1;color:var(--ink-strong)}.trip-workspace-progress-bar{height:.65rem;border-radius:999px;background:rgba(80,54,37,.08);overflow:hidden}.trip-workspace-progress-bar span{display:block;height:100%;width:16%;background:linear-gradient(145deg,var(--accent),var(--accent-strong));border-radius:999px}.trip-workspace-metrics-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem}.trip-workspace-metric-card{display:grid;gap:.28rem;padding:1rem}.trip-workspace-metric-label{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-soft)}.trip-workspace-metric-card strong{color:var(--ink-strong);font-size:1.1rem}.trip-workspace-metric-card small{color:var(--ink-muted)}.trip-workspace-metric-card-nights{grid-template-columns:auto 1fr;align-items:center;gap:.9rem}.trip-workspace-inbox,.trip-workspace-planner{display:grid;gap:1rem}.trip-workspace-forward-pill{min-width:min(100%,28rem)}.trip-workspace-inbox-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem}.imported-item-card{display:grid;gap:.8rem;padding:1rem;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}.imported-item-card.is-unassigned{border-style:dashed}.imported-item-card.is-assigned{background:linear-gradient(180deg,rgba(241,251,246,.96),rgba(255,255,255,.92))}.imported-item-card.is-needs-review{background:linear-gradient(180deg,rgba(255,244,235,.96),rgba(255,255,255,.92))}.imported-item-card:hover,.timeline-item-card:hover,.trip-day-agenda:hover,.route-board-stop:hover,.trip-workspace-floating-card:hover,.trip-calendar-cell:hover{transform:translateY(-1px);box-shadow:0 16px 34px rgba(53,35,25,.08)}.imported-item-main,.timeline-item-card,.route-board-stop-head,.trip-day-agenda-head,.trip-calendar-cell,.trip-workspace-floating-card,.route-board-reservation,.route-board-suggested,.trip-day-agenda-item,.trip-draft-chip,.trip-workspace-side-card.is-clickable{width:100%;border:0;background:transparent;text-align:left;cursor:pointer}.imported-item-main{display:grid;grid-template-columns:auto 1fr auto;gap:.85rem;align-items:start;padding:0}.imported-item-type{display:inline-flex;align-items:center;justify-content:center;min-width:4.6rem;height:2rem;border-radius:999px;background:rgba(208,111,55,.12);color:var(--accent-strong);font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.imported-item-copy{display:grid;gap:.18rem}.imported-item-copy strong,.timeline-item-card strong,.route-board-stop-copy strong,.trip-day-agenda-item strong,.trip-workspace-side-card strong,.trip-workspace-loading-card strong{color:var(--ink-strong)}.imported-item-copy p,.timeline-item-sub,.route-board-empty,.trip-workspace-side-card span,.trip-workspace-side-empty p{color:var(--ink-muted)}.imported-item-meta{display:grid;gap:.35rem;justify-items:end}.imported-item-detail-row{justify-content:flex-start;color:var(--ink-soft);font-size:.82rem}.imported-item-actions,.imported-item-quick-grid{justify-content:flex-start}.imported-item-quick-grid{display:flex;gap:.55rem;flex-wrap:wrap}.trip-workspace-section-head{align-items:flex-end}.trip-workspace-section-head-sticky{position:sticky;top:4.85rem;z-index:6;padding-bottom:.85rem;background:linear-gradient(180deg,rgba(250,244,237,.98),rgba(250,244,237,.86),rgba(250,244,237,0))}.trip-workspace-tab-strip{padding:.28rem;border:1px solid rgba(80,54,37,.08);border-radius:999px;background:rgba(255,255,255,.78)}.trip-workspace-board-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);gap:1rem}.trip-workspace-primary-board,.trip-workspace-side-panel,.trip-workspace-calendar-side{display:grid;gap:1rem}.trip-workspace-board-intro,.trip-workspace-side-head,.trip-workspace-side-empty,.trip-workspace-side-group,.trip-workspace-side-stack,.route-board-cluster,.trip-day-agenda-section,.trip-workspace-map-context,.trip-workspace-loading-card{display:grid;gap:.55rem}.trip-workspace-side-panel,.trip-workspace-calendar-side{padding:1rem;border-radius:1.25rem;border:1px solid rgba(80,54,37,.08);background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(250,244,237,.94))}.trip-workspace-timeline,.trip-workspace-route-board,.trip-workspace-day-board{display:grid;gap:1rem}.trip-workspace-floating-rail{display:grid;gap:.75rem;padding:1rem;border-radius:1.2rem;background:linear-gradient(180deg,rgba(255,248,241,.92),rgba(255,255,255,.88));border:1px solid rgba(208,111,55,.12)}.trip-workspace-floating-list{display:flex;gap:.75rem;overflow:auto;padding-bottom:.15rem}.trip-workspace-floating-card{display:grid;gap:.2rem;min-width:220px;padding:.85rem}.trip-workspace-floating-hint{font-size:.82rem;color:var(--ink-soft)}.trip-workspace-timeline-days{display:grid;gap:1rem}.timeline-day-group{display:grid;grid-template-columns:minmax(136px,.24fr) minmax(0,1fr);gap:1rem;padding:1rem;border-radius:1.25rem;background:rgba(255,255,255,.75);border:1px solid rgba(80,54,37,.08)}.timeline-day-group.is-selected,.trip-day-agenda.is-selected,.route-board-stop.is-selected,.trip-calendar-cell.is-selected{border-color:rgba(208,111,55,.34);box-shadow:0 0 0 1px rgba(208,111,55,.14),0 16px 34px rgba(53,35,25,.08)}.timeline-day-label{display:grid;gap:.22rem;align-content:start;border:0;background:transparent;text-align:left;cursor:pointer}.timeline-day-number{font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-soft)}.timeline-day-lane,.timeline-day-items,.timeline-day-unresolved{display:grid;gap:.75rem}.timeline-day-dropzone{border:1px dashed rgba(208,111,55,.26);border-radius:1rem;padding:.7rem .9rem;background:rgba(255,248,241,.75);color:var(--ink-muted);font-size:.84rem}.timeline-day-dropzone.is-drop-target,.timeline-day-group.is-drop-target .timeline-day-dropzone{border-color:rgba(208,111,55,.46);background:rgba(255,239,226,.94)}.timeline-day-empty{padding:.9rem 1rem;border-radius:1rem;background:rgba(247,240,233,.88);color:var(--ink-muted)}.timeline-item-card{display:grid;gap:.55rem;padding:.95rem}.timeline-item-card.type-transport{border-left:4px solid #cf7a3d}.timeline-item-card.type-stay{border-left:4px solid #237f68}.timeline-item-card.type-activity{border-left:4px solid #cc9a12}.timeline-item-kind{font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-soft)}.timeline-item-route{font-weight:700;color:var(--ink)}.timeline-item-meta{justify-content:flex-start;color:var(--ink-soft);font-size:.82rem}.route-board-stop{display:grid;gap:.9rem;padding:1rem}.route-board-stop-head{display:flex;align-items:center;gap:.85rem;padding:0}.route-board-stop-index{width:2.1rem;height:2.1rem;border-radius:999px;display:grid;place-items:center;background:rgba(208,111,55,.12);color:var(--accent-strong);font-weight:800}.route-board-stop-copy{display:grid;gap:.18rem}.route-board-cluster-items{display:grid;gap:.55rem}.route-board-reservation,.route-board-suggested{padding:.75rem .85rem;border-radius:.95rem;border:1px solid rgba(80,54,37,.08);background:rgba(255,255,255,.92)}.route-board-suggested{border-style:dashed;color:var(--ink-muted)}.route-board-connector{padding-top:.15rem;color:var(--ink-soft);font-size:.82rem}.trip-day-agenda{display:grid;gap:.9rem;padding:1rem}.trip-day-agenda-head{display:grid;grid-template-columns:auto 1fr auto;gap:.8rem;align-items:center;padding:0}.trip-day-agenda-day{display:inline-flex;align-items:center;justify-content:center;min-width:4.2rem;height:2rem;border-radius:999px;background:rgba(208,111,55,.12);color:var(--accent-strong);font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.trip-day-agenda-date{font-weight:700;color:var(--ink-strong)}.trip-day-agenda-overnight{color:var(--ink-muted);font-size:.88rem}.trip-day-agenda-body{display:grid;gap:.9rem}.trip-day-agenda-item{display:grid;gap:.2rem;padding:.7rem .85rem;border:1px solid rgba(80,54,37,.08);border-radius:.95rem;background:rgba(255,255,255,.92)}.trip-day-agenda-item small{color:var(--ink-soft)}.trip-day-agenda-inline-list{display:flex;flex-wrap:wrap;gap:.55rem}.trip-draft-chip{display:grid;gap:.1rem;min-width:150px;padding:.7rem .8rem;border-style:dashed;background:rgba(255,248,241,.88)}.trip-workspace-calendar-shell{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.68fr);gap:1rem}.trip-workspace-calendar-board{display:grid;gap:.85rem;padding:1rem;border-radius:1.2rem;border:1px solid rgba(80,54,37,.08);background:rgba(255,255,255,.88)}.trip-calendar-weekdays,.trip-calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.7rem}.trip-calendar-weekdays span{font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-soft)}.trip-calendar-cell{display:grid;align-content:start;gap:.35rem;min-height:8.6rem;padding:.85rem}.trip-calendar-cell-empty{border:1px dashed rgba(80,54,37,.08);background:rgba(247,240,233,.3);box-shadow:none}.trip-calendar-date{font-size:1rem;font-weight:800;color:var(--ink-strong)}.trip-calendar-label,.trip-calendar-count,.trip-calendar-unresolved{font-size:.78rem;color:var(--ink-muted)}.trip-calendar-unresolved{display:inline-flex;width:max-content;padding:.18rem .55rem;border-radius:999px;background:rgba(255,244,235,.96);border:1px solid rgba(208,111,55,.15);color:var(--accent-strong);font-weight:700}.trip-workspace-map{position:sticky;top:5.6rem}.trip-workspace-map-panel{display:grid;gap:.9rem}.trip-workspace-map-context{padding:1rem}.trip-workspace-legacy{display:none!important}.trip-workspace-loading-card{padding:1rem 1.1rem}.trip-workspace-side-card{padding:.8rem .9rem}.trip-workspace-side-card small{color:var(--ink-soft)}.trip-workspace-side-actions{display:grid;gap:.55rem}.is-dragging{opacity:.6}@media (max-width:1180px){.trip-workspace-hero,.trip-workspace-board-grid,.trip-workspace-calendar-shell{grid-template-columns:1fr}.trip-workspace-map{position:static}}@media (max-width:820px){.trip-workspace-metrics-grid,.trip-workspace-inbox-grid,.timeline-day-group,.trip-day-agenda-head,.trip-calendar-weekdays,.trip-calendar-grid{grid-template-columns:1fr}.timeline-day-label{padding-bottom:.2rem}.trip-workspace-tab-strip{width:100%;justify-content:space-between}.trip-workspace-tab-strip .trip-subnav-tab{flex:1 1 0;justify-content:center}.imported-item-main{grid-template-columns:1fr}.imported-item-meta{justify-items:start}}@media (max-width:620px){.trip-workspace-hero,.trip-workspace-inbox,.trip-workspace-planner{padding:1rem}.trip-workspace-actions,.imported-item-actions,.imported-item-quick-grid,.trip-workspace-floating-list{flex-direction:column;align-items:stretch}.trip-workspace-floating-card{min-width:0}.trip-workspace-tab-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-radius:1.2rem}} .trip-workspace-hero,.trip-workspace-inbox,.trip-workspace-planner{display:none!important}.trip-workspace-legacy{display:block!important} /* Roadmap reset */ .trip-workspace-page { width: min(1600px, calc(100% - 2rem)); } .trip-roadmap-shell { display: grid; grid-template-columns: minmax(0, 1.58fr) minmax(380px, 1fr); gap: 1.35rem; align-items: start; } .trip-roadmap-planner, .trip-roadmap-map-card { border: 1px solid rgba(80, 54, 37, 0.08); border-radius: 1.8rem; background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(249, 243, 236, 0.94)), var(--surface); box-shadow: 0 22px 54px rgba(53, 35, 25, 0.08); } .trip-roadmap-planner { padding: 1.15rem 1.15rem 1.2rem; display: grid; gap: 1rem; } .trip-roadmap-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem 1.1rem; align-items: center; padding: 0.15rem 0.15rem 0.85rem; border-bottom: 1px solid rgba(80, 54, 37, 0.08); } .trip-roadmap-title, .trip-roadmap-title-row, .trip-roadmap-header-actions, .trip-roadmap-lane-head, .trip-roadmap-surface-head, .trip-roadmap-view-head, .trip-roadmap-map-head { display: flex; align-items: center; justify-content: space-between; gap: 0.85rem; flex-wrap: wrap; } .trip-roadmap-title { display: grid; gap: 0.3rem; justify-items: start; } .trip-roadmap-title h1 { font-size: clamp(2rem, 3vw, 3rem); line-height: 0.96; } .trip-roadmap-dates { color: var(--ink-muted); font-size: 0.96rem; } .trip-roadmap-header-meta { display: flex; align-items: stretch; gap: 0.7rem; flex-wrap: wrap; justify-content: flex-end; } .trip-roadmap-meta-pill { min-height: 5rem; min-width: 10rem; padding: 0.85rem 1rem; border: 1px solid rgba(80, 54, 37, 0.08); border-radius: 1.2rem; background: rgba(255, 255, 255, 0.82); display: grid; gap: 0.25rem; align-content: center; } .trip-roadmap-meta-pill strong { color: var(--ink-strong); font-size: 1rem; } .trip-roadmap-meta-label { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); } .trip-roadmap-meta-pill-ring { grid-template-columns: 1fr; align-content: start; gap: 0.32rem; min-width: 12rem; } .trip-roadmap-meta-pill-ring > div { display: grid; gap: 0.28rem; justify-items: center; } .trip-nights-ring { --progress: 0deg; width: 54px; height: 54px; display: grid; place-items: center; border-radius: 999px; background: radial-gradient(circle at center, #fffdf9 58%, transparent 59%), conic-gradient(var(--ring-color, #d94b3d) 0deg var(--progress), rgba(217, 75, 61, 0.12) var(--progress) 360deg); } .trip-nights-ring[data-state="complete"] { --ring-color: #10B981; } .trip-nights-ring[data-state="incomplete"] { --ring-color: #d94b3d; } .trip-nights-ring span { font-size: 0.72rem; font-weight: 800; color: var(--ring-color, #d94b3d); } .trip-roadmap-meta-pill-ring .trip-nights-ring[data-state="complete"] { background: radial-gradient(circle at center, #fffdf9 58%, transparent 59%), conic-gradient(#10b981 0deg var(--progress), rgba(16, 185, 129, 0.12) var(--progress) 360deg) !important; } .trip-roadmap-meta-pill-ring .trip-nights-ring[data-state="complete"] span { color: #10b981 !important; } .trip-roadmap-meta-pill-ring .trip-nights-ring[data-state="incomplete"] { background: radial-gradient(circle at center, #fffdf9 58%, transparent 59%), conic-gradient(#d94b3d 0deg var(--progress), rgba(217, 75, 61, 0.12) var(--progress) 360deg) !important; } .trip-roadmap-meta-pill-ring .trip-nights-ring[data-state="incomplete"] span { color: #d94b3d !important; } .trip-roadmap-header-actions { grid-column: 1 / -1; justify-content: space-between; } .trip-roadmap-surface { display: grid; gap: 1rem; } .trip-roadmap-tabs { display: inline-flex; align-items: center; gap: 0.2rem; padding: 0.28rem; border-radius: 999px; border: 1px solid rgba(80, 54, 37, 0.08); background: rgba(255, 255, 255, 0.84); } .trip-roadmap-tab { border: 0; border-radius: 999px; background: transparent; color: var(--ink-muted); padding: 0.62rem 1rem; font: inherit; font-size: 0.86rem; font-weight: 800; cursor: pointer; } .trip-roadmap-tab.is-active { color: #fff; background: linear-gradient(145deg, var(--accent), var(--accent-strong)); box-shadow: 0 12px 24px rgba(171, 83, 31, 0.22); } .trip-roadmap-summary { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; } .trip-roadmap-summary-chip { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2rem; padding: 0.3rem 0.75rem; border-radius: 999px; background: rgba(255, 255, 255, 0.86); border: 1px solid rgba(80, 54, 37, 0.08); color: var(--ink); font-size: 0.78rem; font-weight: 700; } .trip-roadmap-board { display: grid; gap: 1rem; } .trip-roadmap-inbox-lane, .trip-roadmap-canvas, .trip-roadmap-inspector { border: 1px solid rgba(80, 54, 37, 0.08); border-radius: 1.35rem; background: rgba(255, 255, 255, 0.84); } .trip-roadmap-inbox-lane { padding: 0.95rem; display: grid; gap: 0.85rem; background: linear-gradient(180deg, rgba(255, 248, 241, 0.86), rgba(255, 255, 255, 0.86)); } .trip-roadmap-forward { display: grid; gap: 0.12rem; justify-items: end; } .trip-roadmap-forward span { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); } .trip-roadmap-forward strong { color: var(--accent-strong); font-size: 0.92rem; } .trip-roadmap-inbox-list { display: flex; gap: 0.85rem; overflow: auto; padding-bottom: 0.2rem; } .trip-roadmap-main-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(300px, 0.66fr); gap: 1rem; } .trip-roadmap-main-grid-single { grid-template-columns: minmax(0, 1fr); } .trip-roadmap-canvas, .trip-roadmap-inspector { padding: 1rem; display: grid; gap: 0.95rem; } .trip-roadmap-view-head { align-items: end; } .trip-roadmap-view-head p { color: var(--ink-muted); font-size: 0.9rem; } .trip-roadmap-timeline, .trip-roadmap-route, .trip-roadmap-day, .trip-roadmap-calendar { display: grid; gap: 0.95rem; } .trip-roadmap-empty { display: grid; gap: 0.35rem; padding: 1rem 1.05rem; border-radius: 1.05rem; border: 1px dashed rgba(80, 54, 37, 0.14); background: rgba(249, 243, 236, 0.72); color: var(--ink-muted); } .trip-roadmap-empty strong { color: var(--ink-strong); } .imported-item-card { min-width: 292px; max-width: 360px; flex: 0 0 auto; } .timeline-day-group { background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(247, 241, 235, 0.78)); } .timeline-day-dropzone { background: rgba(255, 247, 239, 0.94); } .timeline-item-card { border-radius: 1rem; background: rgba(255, 255, 255, 0.94); } .trip-roadmap-inspector { align-content: start; min-height: 20rem; background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(250, 244, 237, 0.94)); } .trip-roadmap-map { position: sticky; top: 5.25rem; } .trip-roadmap-map-card { padding: 0.9rem; display: grid; gap: 0.8rem; } .trip-roadmap-map-canvas, .trip-roadmap-map-canvas .mapboxgl-map, .trip-roadmap-map-canvas .leaflet-container, .trip-roadmap-map-canvas .route-map-surface { min-height: 44rem; height: calc(100vh - 10.5rem); border-radius: 1.3rem; overflow: hidden; background: radial-gradient(circle at top left, rgba(208, 111, 55, 0.16), transparent 26%), linear-gradient(180deg, rgba(249, 238, 225, 0.96), rgba(244, 228, 212, 0.92)); } .trip-roadmap-map-overlay { margin-top: -5.7rem; margin-left: auto; width: min(100%, 18rem); padding: 0.9rem 1rem; border-radius: 1.05rem; background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(80, 54, 37, 0.08); backdrop-filter: blur(14px); box-shadow: 0 16px 34px rgba(53, 35, 25, 0.1); position: relative; z-index: 2; } .trip-roadmap-engine-host { display: none !important; } @media (max-width: 1240px) { .trip-roadmap-shell, .trip-roadmap-main-grid { grid-template-columns: 1fr; } .trip-roadmap-map { position: static; } .trip-roadmap-map-canvas, .trip-roadmap-map-canvas .mapboxgl-map, .trip-roadmap-map-canvas .leaflet-container, .trip-roadmap-map-canvas .route-map-surface { min-height: 28rem; height: 28rem; } } @media (max-width: 820px) { .trip-roadmap-header { grid-template-columns: 1fr; } .trip-roadmap-header-meta, .trip-roadmap-header-actions, .trip-roadmap-surface-head { justify-content: flex-start; } .trip-roadmap-meta-pill { min-width: 0; flex: 1 1 12rem; } .trip-roadmap-tabs { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 1.1rem; } .trip-roadmap-tab { justify-content: center; } } /* Workspace hard reset */ .trip-roadmap-shell { grid-template-columns: minmax(0, 1.52fr) minmax(420px, 1fr); gap: 1.5rem; } .trip-roadmap-planner, .trip-roadmap-map-card { border-radius: 2rem; background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 241, 235, 0.96)), var(--surface); box-shadow: 0 24px 64px rgba(53, 35, 25, 0.1); } .trip-roadmap-planner { padding: 1.2rem 1.2rem 1.3rem; gap: 1.1rem; } .trip-roadmap-header { grid-template-columns: minmax(0, 1fr) auto; align-items: start; padding: 0.1rem 0.1rem 0.9rem; } .trip-roadmap-title { gap: 0.45rem; } .trip-roadmap-title-badge-group { display: inline-flex; align-items: center; gap: 0.55rem; min-width: 0; flex-wrap: wrap; } .trip-roadmap-title-row { justify-content: flex-start; } .trip-roadmap-title h1 { font-size: clamp(2rem, 3.2vw, 3.2rem); line-height: 0.92; } .trip-verified-badge { appearance: none; display: inline-flex; align-items: center; justify-content: center; width: 1.95rem; height: 1.95rem; min-height: 1.95rem; padding: 0; border-radius: 999px; border: 1px solid rgba(18, 119, 91, 0.16); background: linear-gradient(145deg, rgba(18, 119, 91, 0.1), rgba(23, 149, 108, 0.16)); color: var(--success); box-shadow: 0 12px 28px rgba(18, 119, 91, 0.14); flex-shrink: 0; cursor: pointer; transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease; } .trip-verified-badge:hover, .trip-verified-badge:focus-visible { transform: translateY(-1px); box-shadow: 0 16px 30px rgba(18, 119, 91, 0.18); border-color: rgba(18, 119, 91, 0.28); outline: none; } .trip-verified-badge[data-state="pending"] { border-color: rgba(164, 124, 40, 0.2); background: linear-gradient(145deg, rgba(164, 124, 40, 0.08), rgba(213, 158, 47, 0.16)); color: #8f670f; box-shadow: 0 12px 28px rgba(164, 124, 40, 0.14); } .trip-verified-badge[data-state="pending"] .trip-verified-badge-icon { background: linear-gradient(145deg, #d09a16, #e1b64f); } .trip-verified-badge[hidden] { display: none !important; } .trip-verified-badge-icon { width: 1.25rem; height: 1.25rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(145deg, var(--success), #17956c); color: #fff; font-size: 0.76rem; line-height: 1; box-shadow: 0 6px 14px rgba(18, 119, 91, 0.2); } .trip-roadmap-country-row { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; } .trip-roadmap-country-flags { display: flex; align-items: center; gap: 0.42rem; flex-wrap: wrap; margin: 0; color: var(--ink-soft); line-height: 1; } .trip-roadmap-country-emoji { display: inline-block; font-size: 1.28rem; line-height: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif; } .trip-roadmap-country-flag-icon { width: 20px; height: 15px; display: inline-block; flex: 0 0 auto; border-radius: 3px; box-shadow: 0 0 0 1px rgba(80, 54, 37, 0.08); object-fit: cover; vertical-align: middle; } .flatpickr-calendar { z-index: 10040; box-shadow: 0 24px 56px rgba(53, 35, 25, 0.18); border: 1px solid rgba(80, 54, 37, 0.12); } .flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover { background: var(--accent); border-color: var(--accent); } .trip-roadmap-button-count { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2rem; padding: 0.32rem 0.72rem; border-radius: 999px; background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(80, 54, 37, 0.08); font-size: 0.8rem; font-weight: 700; color: var(--ink); } .trip-roadmap-button-count { min-width: 1.9rem; justify-content: center; padding-inline: 0.5rem; background: rgba(208, 111, 55, 0.12); color: var(--accent-strong); } .trip-roadmap-header-meta { justify-content: flex-start; } .trip-roadmap-meta-pill { min-height: 4.35rem; min-width: 9rem; } .trip-roadmap-header-actions { justify-content: flex-start; gap: 0.75rem; } .trip-roadmap-canvas { min-height: 0; padding: 0.9rem; border-radius: 1.6rem; background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 242, 236, 0.92)), #fff; } .trip-roadmap-inline-button { border: 1px solid rgba(80, 54, 37, 0.08); border-radius: 999px; background: rgba(255, 255, 255, 0.88); color: var(--ink); padding: 0.62rem 0.95rem; font: inherit; font-size: 0.84rem; font-weight: 700; cursor: pointer; } .trip-roadmap-inline-button:hover { background: #fff; color: var(--ink-strong); } .trip-roadmap-callout { display: flex; align-items: center; justify-content: space-between; gap: 0.9rem; padding: 0.95rem 1rem; border-radius: 1.1rem; border: 1px solid rgba(208, 111, 55, 0.16); background: linear-gradient(180deg, rgba(255, 245, 235, 0.96), rgba(255, 255, 255, 0.9)); } .trip-roadmap-callout > div { display: grid; gap: 0.25rem; } .trip-roadmap-callout strong { color: var(--ink-strong); } .trip-workspace-timeline-days { gap: 1.15rem; } .timeline-day-group { grid-template-columns: minmax(124px, 0.18fr) minmax(0, 1fr); gap: 1.15rem; padding: 0; border: 0; background: transparent; box-shadow: none; } .timeline-day-label { position: sticky; top: 6.6rem; align-self: start; gap: 0.18rem; padding-top: 0.3rem; } .timeline-day-number { color: var(--accent-strong); } .timeline-day-lane { position: relative; gap: 0.8rem; padding-left: 1.1rem; } .timeline-day-lane::before { content: ""; position: absolute; left: 0.2rem; top: 0; bottom: 0; width: 2px; border-radius: 999px; background: linear-gradient(180deg, rgba(208, 111, 55, 0.22), rgba(208, 111, 55, 0.04)); } .timeline-item-card { padding: 1rem; border-radius: 1.1rem; box-shadow: 0 16px 36px rgba(53, 35, 25, 0.06); } .trip-roadmap-map { position: sticky; top: 5.15rem; } .trip-roadmap-map-card { padding: 0.8rem; gap: 0.65rem; } .trip-roadmap-map-canvas, .trip-roadmap-map-canvas .mapboxgl-map, .trip-roadmap-map-canvas .leaflet-container, .trip-roadmap-map-canvas .route-map-surface { min-height: calc(100vh - 8.2rem); height: calc(100vh - 8.2rem); border-radius: 1.45rem; background: radial-gradient(circle at top left, rgba(208, 111, 55, 0.14), transparent 28%), linear-gradient(180deg, rgba(240, 230, 220, 0.92), rgba(232, 223, 213, 0.92)); } .trip-roadmap-map-overlay { margin-top: -5rem; width: min(100%, 16rem); } .trip-import-dialog { width: min(1080px, calc(100vw - 2rem)); max-width: 1080px; padding: 0; border: 0; border-radius: 1.7rem; background: transparent; } .trip-import-dialog::backdrop { background: rgba(24, 18, 13, 0.46); backdrop-filter: blur(5px); } .trip-import-dialog-shell { display: grid; gap: 1rem; padding: 1.15rem; border-radius: 1.7rem; border: 1px solid rgba(80, 54, 37, 0.08); background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 243, 236, 0.96)), var(--surface); box-shadow: 0 28px 70px rgba(24, 18, 13, 0.18); } .trip-add-dialog { width: min(720px, calc(100vw - 2rem)); max-width: 720px; } .trip-add-dialog-shell { gap: 1.25rem; } .trip-add-type-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem; } .trip-add-type-card { display: grid; justify-items: start; gap: 0.35rem; min-height: 7rem; padding: 1rem 1.05rem; border-radius: 1.1rem; border: 1px solid rgba(80, 54, 37, 0.1); background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,242,236,0.96)); color: var(--ink-strong); font: inherit; cursor: pointer; transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease; } .trip-add-type-card:hover { transform: translateY(-1px); border-color: rgba(208, 111, 55, 0.26); box-shadow: 0 14px 28px rgba(53, 35, 25, 0.08); } .trip-add-type-card span { font-size: 1.2rem; } .trip-add-type-card strong { font-size: 1rem; } .trip-import-dialog-head { display: flex; align-items: start; justify-content: space-between; gap: 1rem; } .trip-roadmap-inbox-list-dialog { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; max-height: 72vh; overflow: auto; padding-right: 0.2rem; } .imported-item-card { min-width: 0; max-width: none; } /* Trip builder reset */ .trip-builder-page { width: min(1320px, calc(100% - 2rem)); } .trip-builder-shell { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr); gap: 1.4rem; align-items: start; } .trip-builder-card, .trip-builder-summary-card { border: 1px solid rgba(80, 54, 37, 0.08); border-radius: 1.8rem; background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(249, 243, 236, 0.94)), var(--surface); box-shadow: 0 24px 64px rgba(53, 35, 25, 0.08); } .trip-builder-card { padding: 1.3rem; display: grid; gap: 1.2rem; } .trip-builder-head { display: flex; align-items: start; justify-content: space-between; gap: 1rem; } .trip-builder-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; } .trip-country-picker { display: grid; gap: 0.9rem; padding-top: 1rem; border-top: 1px solid rgba(80, 54, 37, 0.08); } .trip-country-chip-list { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; min-height: 2.5rem; } .trip-country-chip { border: 1px solid rgba(80, 54, 37, 0.08); border-radius: 999px; background: rgba(255, 255, 255, 0.92); display: inline-flex; align-items: center; gap: 0.55rem; min-height: 2.3rem; padding: 0.4rem 0.82rem; font: inherit; font-size: 0.84rem; font-weight: 700; color: var(--ink); cursor: pointer; } .trip-country-chip-copy, .trip-country-option-copy { display: inline-flex; align-items: center; gap: 0.45rem; min-width: 0; } .trip-country-flag-icon { width: 16px; height: 12px; flex: 0 0 auto; border-radius: 2px; box-shadow: 0 0 0 1px rgba(80, 54, 37, 0.1); object-fit: cover; } .trip-country-chip strong { font-size: 0.95rem; color: var(--ink-soft); } .trip-country-option-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; } .trip-country-option { border: 1px solid rgba(80, 54, 37, 0.08); border-radius: 1rem; background: rgba(255, 255, 255, 0.86); color: var(--ink); padding: 0.8rem 0.9rem; display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; text-align: left; cursor: pointer; font: inherit; } .trip-country-option:hover, .trip-country-chip:hover { background: #fff; border-color: rgba(208, 111, 55, 0.18); } .trip-country-option small, .trip-country-empty { color: var(--ink-muted); } .trip-country-empty { padding: 0.8rem 0; } .trip-builder-summary { position: sticky; top: 5.4rem; } .trip-builder-summary-card { padding: 1.25rem; display: grid; gap: 1rem; } .trip-builder-summary-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; } .trip-builder-summary-stats div { display: grid; gap: 0.22rem; padding: 0.9rem 1rem; border-radius: 1rem; border: 1px solid rgba(80, 54, 37, 0.08); background: rgba(255, 255, 255, 0.86); } .trip-builder-summary-stats span { font-size: 0.78rem; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.08em; } .trip-builder-summary-stats strong { color: var(--ink-strong); font-size: 1.1rem; } @media (max-width: 1240px) { .trip-roadmap-shell, .trip-builder-shell { grid-template-columns: 1fr; } .trip-roadmap-map, .trip-builder-summary, .timeline-day-label { position: static; } .trip-roadmap-map-canvas, .trip-roadmap-map-canvas .mapboxgl-map, .trip-roadmap-map-canvas .leaflet-container, .trip-roadmap-map-canvas .route-map-surface { min-height: 24rem; height: 24rem; } } @media (max-width: 820px) { .trip-builder-grid, .trip-country-option-list, .trip-roadmap-inbox-list-dialog { grid-template-columns: 1fr; } .trip-roadmap-callout, .trip-builder-head, .trip-import-dialog-head { flex-direction: column; align-items: stretch; } .timeline-day-group { grid-template-columns: 1fr; } } /* Schedule timeline + visible map */ .timeline-schedule { display: grid; gap: 0.55rem; } .timeline-schedule-scroll { overflow-x: auto; overflow-y: hidden; padding-bottom: 0.2rem; } .timeline-schedule-head, .timeline-schedule-row { display: grid; grid-template-columns: 125px minmax(1152px, 1fr); gap: 0.75rem; } .timeline-schedule-day-label, .timeline-schedule-day { display: grid; align-content: start; gap: 0.18rem; } .timeline-schedule-day { border: 0; background: transparent; text-align: left; cursor: pointer; padding: 0.55rem 0 0; } .timeline-schedule-hours, .timeline-schedule-grid { display: grid; grid-template-columns: repeat(24, minmax(48px, 1fr)); gap: 0; } .timeline-schedule-hours { align-items: end; min-height: 1.6rem; cursor: grab; } .timeline-schedule-scroll.is-dragging .timeline-schedule-hours { cursor: grabbing; } .timeline-schedule-hours span { transform: translateX(-50%); font-size: 0.68rem; color: var(--ink-soft); } .timeline-schedule-hours span.is-minor { opacity: 0.45; } .timeline-schedule-track { display: grid; gap: 0.7rem; } .timeline-schedule-all-day { display: flex; flex-wrap: wrap; gap: 0.65rem; } .timeline-schedule-grid { position: relative; align-items: start; min-height: 4.8rem; padding: 0.45rem 0.5rem 0.5rem; border-radius: 1.3rem; border: 1px solid rgba(80, 54, 37, 0.08); background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 242, 236, 0.9)); overflow: hidden; } .timeline-selection-preview { position: absolute; top: 0.35rem; bottom: 0.35rem; left: calc((100% / 24) * var(--select-start)); width: calc((100% / 24) * (var(--select-end) - var(--select-start))); border-radius: 0.9rem; background: rgba(208, 111, 55, 0.16); border: 1px solid rgba(208, 111, 55, 0.34); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45); pointer-events: none; z-index: 2; } .timeline-schedule-hour-slot { min-height: 100%; border-left: 1px solid rgba(80, 54, 37, 0.06); } .timeline-schedule-hour-slot:first-child { border-left: 0; } .timeline-schedule-lane, .timeline-schedule-unresolved { grid-column: 1 / -1; position: relative; display: block; } .timeline-schedule-lane { min-height: 2.9rem; } .timeline-schedule-empty { grid-column: 1 / -1; align-self: center; color: var(--ink-muted); font-size: 0.88rem; padding: 0.5rem 0.2rem; } .timeline-schedule-card { position: absolute; left: calc((100% / 24) * var(--start)); width: calc((100% / 24) * (var(--end) - var(--start))); min-width: 7.5rem; top: 0; display: grid; gap: 0.16rem; padding: 0.42rem 0.5rem; border: 1px solid rgba(80, 54, 37, 0.1); border-left-width: 4px; border-radius: 1rem; background: rgba(255, 255, 255, 0.96); box-shadow: 0 14px 28px rgba(53, 35, 25, 0.08); text-align: left; cursor: pointer; } .timeline-schedule-card.is-all-day { position: relative; left: auto; width: auto; min-width: 13rem; } .timeline-schedule-card.type-transport { border-left-color: #cf7a3d; } .timeline-schedule-card.type-stay { border-left-color: #237f68; } .timeline-schedule-card.type-activity { border-left-color: #cc9a12; } .timeline-schedule-card strong { color: var(--ink-strong); font-size: 0.78rem; } .timeline-schedule-card span, .timeline-schedule-card small { color: var(--ink-muted); } .timeline-schedule-card small { font-size: 0.66rem; } .timeline-schedule-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.55rem; } .timeline-schedule-unresolved { display: flex; gap: 0.55rem; flex-wrap: wrap; padding-top: 0.45rem; } .trip-roadmap-map-canvas { display: block; } .trip-roadmap-map-canvas .route-map-surface { width: 100%; height: 100%; min-height: inherit; } .trip-roadmap-map-canvas .route-map-svg { width: 100%; height: 100%; display: block; } .trip-roadmap-map-canvas .route-map-empty { display: grid; place-items: center; height: 100%; padding: 1.5rem; text-align: center; color: var(--ink-muted); } @media (max-width: 900px) { .timeline-schedule-head, .timeline-schedule-row { grid-template-columns: 1fr; } .timeline-schedule-hours { display: none; } .timeline-schedule-day { padding-top: 0; } } /* Final production hotfix: restore Mapbox-first rail and tighten roadmap density */ .trip-roadmap-shell { grid-template-columns: minmax(0, 1.42fr) minmax(460px, 1.08fr); gap: 1.1rem; } .trip-roadmap-planner { padding: 1rem 1rem 1.05rem; gap: 0.9rem; } .trip-roadmap-header { gap: 0.8rem 1rem; padding-bottom: 0.7rem; } .trip-roadmap-header-actions { gap: 0.55rem; } .trip-roadmap-surface { gap: 0.75rem; } .trip-roadmap-canvas { padding: 0.8rem; gap: 0.75rem; } .trip-roadmap-view-head { align-items: center; } .trip-roadmap-view-head p { display: none; } .trip-roadmap-inline-button { padding: 0.5rem 0.8rem; font-size: 0.8rem; } .trip-roadmap-callout { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.8rem; padding: 0.9rem 1rem; border-radius: 1.15rem; border: 1px solid rgba(80, 54, 37, 0.08); background: linear-gradient(180deg, rgba(255, 252, 248, 0.98), rgba(247, 240, 233, 0.94)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8); } .timeline-schedule { gap: 0.75rem; } .timeline-schedule-head, .timeline-schedule-row { grid-template-columns: 104px minmax(1120px, 1fr); gap: 0.85rem; } .timeline-schedule-hours, .timeline-schedule-grid { grid-template-columns: repeat(24, minmax(52px, 1fr)); } .timeline-schedule-hours span { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.04em; color: rgba(118, 99, 85, 0.8); } .timeline-schedule-head { position: sticky; top: 5.05rem; z-index: 4; padding: 0.2rem 0 0.25rem; background: linear-gradient(180deg, rgba(250, 244, 237, 0.98), rgba(250, 244, 237, 0.78), rgba(250, 244, 237, 0)); } .timeline-schedule-day-label { align-self: end; padding-left: 0.4rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); } .timeline-schedule-day { padding: 0.6rem 0 0; padding-left: 0.35rem; min-height: 100%; align-content: start; border-left: 2px solid rgba(208, 111, 55, 0.14); } .timeline-schedule-day strong { font-size: 0.95rem; color: var(--ink-strong); } .timeline-schedule-day span:last-child { font-size: 0.75rem; color: var(--ink-muted); } .timeline-day-number { color: var(--accent-strong); font-size: 0.7rem; } .timeline-schedule-row { position: relative; } .timeline-schedule-row.is-selected .timeline-schedule-day { border-left-color: rgba(208, 111, 55, 0.5); } .timeline-schedule-track { gap: 0.7rem; } .timeline-schedule-all-day { display: flex; flex-wrap: wrap; gap: 0.65rem; padding-left: 0.15rem; } .timeline-schedule-grid { min-height: 5.6rem; padding: 0.65rem 0.6rem 0.75rem; border: 1px solid rgba(80, 54, 37, 0.08); border-radius: 1.4rem; background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 239, 232, 0.96)), repeating-linear-gradient( 90deg, rgba(116, 96, 82, 0.025) 0, rgba(116, 96, 82, 0.025) calc(100% / 24), rgba(255, 255, 255, 0) calc(100% / 24), rgba(255, 255, 255, 0) calc((100% / 24) * 2) ); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 14px 30px rgba(53, 35, 25, 0.05); } .timeline-schedule-card { min-width: 8.75rem; padding: 0.6rem 0.68rem; border: 1px solid rgba(80, 54, 37, 0.08); border-left-width: 0; border-radius: 1rem; background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(252, 248, 244, 0.96)); box-shadow: 0 10px 22px rgba(53, 35, 25, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.92); } .timeline-schedule-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; border-radius: 1rem 0 0 1rem; background: rgba(80, 54, 37, 0.14); } .timeline-schedule-card strong { font-size: 0.82rem; line-height: 1.15; } .timeline-schedule-card span, .timeline-schedule-card small { font-size: 0.69rem; line-height: 1.25; } .timeline-schedule-card small { color: rgba(75, 57, 46, 0.78); } .timeline-schedule-card .status-badge { padding: 0.22rem 0.52rem; font-size: 0.64rem; background: rgba(255, 255, 255, 0.86); } .timeline-schedule-card.type-transport { background: linear-gradient(180deg, rgba(255, 247, 241, 0.99), rgba(255, 241, 232, 0.96)); } .timeline-schedule-card.type-transport::before { background: linear-gradient(180deg, #d06f37, #b95c28); } .timeline-schedule-card.type-stay { background: linear-gradient(180deg, rgba(241, 250, 246, 0.99), rgba(232, 246, 240, 0.96)); } .timeline-schedule-card.type-stay::before { background: linear-gradient(180deg, #2a9074, #237f68); } .timeline-schedule-card.type-activity { background: linear-gradient(180deg, rgba(255, 251, 236, 0.99), rgba(255, 245, 214, 0.96)); } .timeline-schedule-card.type-activity::before { background: linear-gradient(180deg, #d9a11f, #c78912); } .timeline-schedule-card.is-all-day { min-width: 14rem; } .timeline-schedule-empty { display: grid; place-items: center start; min-height: 3.25rem; padding-left: 0.35rem; font-size: 0.82rem; color: rgba(118, 99, 85, 0.82); } .trip-roadmap-map { top: 5rem; } .trip-roadmap-map-card { padding: 0.7rem; gap: 0.55rem; min-width: 0; } .trip-roadmap-map-head { align-items: center; } .trip-roadmap-map-canvas, .trip-roadmap-map-canvas .mapboxgl-map, .trip-roadmap-map-canvas .leaflet-container, .trip-roadmap-map-canvas .route-map-surface { min-height: clamp(25rem, calc(100vh - 12rem), 34rem); height: clamp(25rem, calc(100vh - 12rem), 34rem); background: #f6efe6; } .trip-roadmap-map-canvas .mapboxgl-canvas { width: 100% !important; height: 100% !important; } @media (max-width: 900px) { .trip-roadmap-callout { grid-template-columns: 1fr; } } /* Mobiscroll scheduler surfaces */ .trip-mobi-shell { display: grid; gap: 0.9rem; } .trip-mobi-shell-day { grid-template-columns: minmax(0, 1fr) minmax(260px, 0.34fr); align-items: start; } .trip-mobi-shell-timeline .trip-mobi-host { min-height: 40rem; } .trip-vis-roadmap { display: grid; gap: 1rem; } .trip-vis-unresolved-lane, .trip-vis-host { border: 1px solid rgba(80, 54, 37, 0.08); border-radius: 1.35rem; background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 240, 233, 0.96)); box-shadow: 0 18px 36px rgba(53, 35, 25, 0.06); } .trip-vis-unresolved-lane { display: grid; gap: 0.85rem; padding: 0.9rem; } .trip-vis-unresolved-head { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; } .trip-vis-unresolved-head > div { display: grid; gap: 0.2rem; } .trip-vis-unresolved-strip { display: flex; gap: 0.65rem; overflow-x: auto; } .trip-vis-host { min-height: 34rem; overflow: hidden; padding: 0.35rem 0; } .trip-vis-host .vis-timeline { border: 0; background: transparent; font-family: var(--font-sans); } .trip-vis-host .vis-panel.vis-left, .trip-vis-host .vis-panel.vis-center, .trip-vis-host .vis-panel.vis-top, .trip-vis-host .vis-panel.vis-bottom { border-color: rgba(80, 54, 37, 0.08); } .trip-vis-host .vis-time-axis .vis-text { color: rgba(118, 99, 85, 0.82); font-size: 0.7rem; font-weight: 700; } .trip-vis-host .vis-grid.vis-minor { border-color: rgba(80, 54, 37, 0.05); } .trip-vis-host .vis-grid.vis-vertical.vis-major { border-color: rgba(80, 54, 37, 0.1); } .trip-vis-host .vis-labelset .vis-label { border-bottom: 1px solid rgba(80, 54, 37, 0.08); background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(247, 240, 233, 0.86)); padding: 0.85rem 0.9rem; } .trip-vis-day-label { display: grid; gap: 0.18rem; } .trip-vis-day-kicker { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-strong); } .trip-vis-day-label strong { color: var(--ink-strong); font-size: 1rem; } .trip-vis-day-label span, .trip-vis-day-label small { color: var(--ink-muted); } .trip-vis-host .vis-item { border: 0; background: transparent; box-shadow: none; padding: 0; } .trip-vis-card { position: relative; border: 1px solid rgba(80, 54, 37, 0.08); border-radius: 1rem; background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(252, 248, 244, 0.96)); box-shadow: 0 10px 24px rgba(53, 35, 25, 0.08); padding: 0.55rem 0.65rem; text-align: left; display: grid; gap: 0.16rem; overflow: hidden; } .trip-vis-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; border-radius: 1rem 0 0 1rem; background: rgba(80, 54, 37, 0.12); } .trip-vis-card.type-transport { background: linear-gradient(180deg, rgba(255, 247, 241, 0.99), rgba(255, 239, 227, 0.96)); } .trip-vis-card.type-transport::before { background: linear-gradient(180deg, #d06f37, #b95c28); } .trip-vis-card.type-stay { background: linear-gradient(180deg, rgba(241, 250, 246, 0.99), rgba(230, 245, 238, 0.96)); } .trip-vis-card.type-stay::before { background: linear-gradient(180deg, #237f68, #1f6b58); } .trip-vis-card.type-activity { background: linear-gradient(180deg, rgba(255, 251, 237, 0.99), rgba(255, 244, 214, 0.96)); } .trip-vis-card.type-activity::before { background: linear-gradient(180deg, #d19a12, #bd8610); } .trip-vis-card-top { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; } .trip-vis-card-kind { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); } .trip-vis-card strong, .trip-vis-card span, .trip-vis-card small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .trip-vis-card strong { color: var(--ink-strong); font-size: 0.82rem; line-height: 1.15; } .trip-vis-card span, .trip-vis-card small { color: var(--ink-muted); font-size: 0.7rem; line-height: 1.25; } .trip-vis-host .vis-item.vis-selected .trip-vis-card, .trip-vis-host .vis-item:hover .trip-vis-card { box-shadow: 0 0 0 2px rgba(208, 111, 55, 0.14), 0 12px 28px rgba(53, 35, 25, 0.1); } @media (max-width: 980px) { .trip-vis-host .vis-labelset { width: 132px !important; } } .trip-mobi-shell-calendar { display: grid; gap: 0.85rem; } .trip-mobi-host, .trip-mobi-side-panel, .trip-mobi-unresolved-strip { border: 1px solid rgba(80, 54, 37, 0.08); border-radius: 1.35rem; background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 240, 233, 0.96)); box-shadow: 0 18px 36px rgba(53, 35, 25, 0.06); } .trip-mobi-host { min-height: 38rem; overflow: hidden; } .trip-mobi-side-panel { padding: 1rem; display: grid; gap: 0.8rem; align-content: start; } .trip-mobi-unresolved-strip { display: flex; gap: 0.65rem; overflow: auto; padding: 0.8rem; } .trip-mobi-draft-pill { min-width: 13rem; display: grid; gap: 0.15rem; text-align: left; padding: 0.7rem 0.82rem; border: 1px dashed rgba(208, 111, 55, 0.28); border-radius: 1rem; background: rgba(255, 247, 240, 0.98); cursor: pointer; } .trip-mobi-draft-type { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-strong); } .trip-mobi-draft-pill strong { color: var(--ink-strong); font-size: 0.88rem; } .trip-mobi-draft-pill small { color: var(--ink-muted); font-size: 0.74rem; } .trip-mobi-fallback { display: grid; place-items: center; min-height: 18rem; color: var(--ink-muted); text-align: center; padding: 2rem; font-size: 0.92rem; } .trip-mobi-host .toastui-calendar-layout, .trip-mobi-host .toastui-calendar-panel, .trip-mobi-host .toastui-calendar-time, .trip-mobi-host .toastui-calendar-weekday, .trip-mobi-host .toastui-calendar-weekday-grid, .trip-mobi-host .toastui-calendar-daygrid { background: transparent; } .trip-mobi-host .toastui-calendar-layout { height: 100%; color: var(--ink); background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 240, 233, 0.96)); } .trip-mobi-host .toastui-calendar-template-monthDayName, .trip-mobi-host .toastui-calendar-day-name__name, .trip-mobi-host .toastui-calendar-timegrid-hourmarker, .trip-mobi-host .toastui-calendar-time-date { color: rgba(118, 99, 85, 0.84); font-size: 0.73rem; font-weight: 700; } .trip-mobi-host .toastui-calendar-day-name-container, .trip-mobi-host .toastui-calendar-timegrid-hourmarker-grid-line, .trip-mobi-host .toastui-calendar-daygrid-cell, .trip-mobi-host .toastui-calendar-timegrid-gridline { border-color: rgba(80, 54, 37, 0.06) !important; } .trip-mobi-host .toastui-calendar-grid-cell, .trip-mobi-host .toastui-calendar-timegrid { background: #fffdf9; } .trip-mobi-host .toastui-calendar-panel-resize-handle, .trip-mobi-host .toastui-calendar-weekday-event, .trip-mobi-host .toastui-calendar-allday { min-width: 0; } .trip-mobi-host .trip-toast-event-shell { border-radius: 1rem; } .trip-mobi-host .trip-toast-event-card { min-height: 100%; display: grid; gap: 0.18rem; padding: 0.72rem 0.78rem; border-radius: 1rem; border: 1px solid rgba(80, 54, 37, 0.08); background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(252, 248, 244, 0.96)); box-shadow: 0 12px 24px rgba(53, 35, 25, 0.08); overflow: hidden; } .trip-mobi-host .trip-toast-event-card.type-transport { background: linear-gradient(180deg, rgba(255, 247, 241, 0.99), rgba(255, 239, 227, 0.96)); box-shadow: inset 4px 0 0 #d06f37, 0 12px 24px rgba(53, 35, 25, 0.08); } .trip-mobi-host .trip-toast-event-card.type-stay { background: linear-gradient(180deg, rgba(241, 250, 246, 0.99), rgba(230, 245, 238, 0.96)); box-shadow: inset 4px 0 0 #237f68, 0 12px 24px rgba(53, 35, 25, 0.08); } .trip-mobi-host .trip-toast-event-card.type-activity { background: linear-gradient(180deg, rgba(255, 251, 237, 0.99), rgba(255, 244, 214, 0.96)); box-shadow: inset 4px 0 0 #d19a12, 0 12px 24px rgba(53, 35, 25, 0.08); } .trip-mobi-host .trip-toast-event-card.type-imported { background: linear-gradient(180deg, rgba(255, 247, 240, 0.99), rgba(255, 243, 235, 0.96)); border-style: dashed; box-shadow: inset 4px 0 0 #c98a60, 0 12px 24px rgba(53, 35, 25, 0.06); } .trip-toast-event-top { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; } .trip-toast-event-type, .trip-toast-event-badge { display: inline-flex; align-items: center; min-height: 1.45rem; padding: 0.16rem 0.44rem; border-radius: 999px; font-size: 0.64rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .trip-toast-event-type { background: rgba(255, 255, 255, 0.7); color: var(--ink-soft); } .trip-toast-event-badge { background: rgba(255, 255, 255, 0.82); color: var(--ink); } .trip-mobi-host .trip-toast-event-card strong { color: var(--ink-strong); font-size: 0.84rem; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .trip-mobi-host .trip-toast-event-card span, .trip-mobi-host .trip-toast-event-card small { color: var(--ink-muted); font-size: 0.72rem; line-height: 1.28; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .trip-mobi-host .toastui-calendar-weekday-event:hover .trip-toast-event-card, .trip-mobi-host .toastui-calendar-allday:hover .trip-toast-event-card { box-shadow: inset 4px 0 0 #d06f37, 0 0 0 2px rgba(208, 111, 55, 0.14), 0 12px 24px rgba(53, 35, 25, 0.08); } @media (max-width: 1080px) { .trip-mobi-shell-day { grid-template-columns: 1fr; } .trip-mobi-host { min-height: 32rem; } } .trip-roadmap-map-overlay { display: none; } .trip-map-inline-notice { padding: 0.15rem 0.15rem 0; font-size: 0.78rem; } .missing-coords-list { padding: 0 0.15rem 0.15rem; } @media (max-width: 1240px) { .trip-roadmap-map-canvas, .trip-roadmap-map-canvas .mapboxgl-map, .trip-roadmap-map-canvas .leaflet-container, .trip-roadmap-map-canvas .route-map-surface { min-height: 24rem; height: 24rem; } } /* Workspace repair: stabilize legacy route/day/calendar inside the newer shell. */ .trip-roadmap-canvas > .route-table-board, .trip-roadmap-canvas > .day-by-day-board, .trip-roadmap-canvas > .calendar-board { padding: 0; border: 0; background: transparent; box-shadow: none; } .trip-roadmap-canvas .route-table-head-itinerary { position: sticky; top: 0; z-index: 2; background: rgba(255, 250, 246, 0.96); backdrop-filter: blur(10px); } .trip-roadmap-canvas .route-table-body-itinerary { padding-top: 0.75rem; } .trip-roadmap-canvas .itinerary-stop-block.is-derived-route + .itinerary-stop-block.is-derived-route { margin-top: -1px; } .trip-roadmap-canvas .nights-control.is-static { justify-content: center; } .trip-roadmap-canvas .route-cell-empty { color: var(--ink-soft); font-size: 0.82rem; line-height: 1.2; } .trip-roadmap-canvas .day-by-day-body { gap: 1rem; } .trip-roadmap-canvas .day-plan-card { box-shadow: none; } .trip-roadmap-canvas .day-plan-card-head { grid-template-columns: minmax(180px, 0.8fr) minmax(0, 1fr) auto; padding: 1rem 1.15rem; } .trip-roadmap-canvas .day-plan-card-body { padding: 0 1.15rem 1.15rem; } .trip-roadmap-canvas .day-plan-table-wrap { overflow-x: auto; } .trip-roadmap-canvas .calendar-board-actions { display: flex; justify-content: flex-end; gap: 0.75rem; margin-bottom: 1rem; } .trip-roadmap-view-head-actions { display: flex; justify-content: flex-end; align-items: center; } .calendar-print-summary { display: none; } .calendar-board-shell-solo { display: block; } .trip-roadmap-canvas .calendar-grid { min-height: 46rem; padding: 1rem; } .trip-roadmap-canvas .calendar-day-cell { min-height: 9.5rem; } .trip-roadmap-timeline-shell { display: grid; gap: 1rem; } .trip-roadmap-timeline-inbox { display: grid; gap: 0.85rem; padding: 1rem 1.1rem; border: 1px dashed rgba(80, 54, 37, 0.18); border-radius: 1.1rem; background: linear-gradient(180deg, rgba(255, 247, 240, 0.94), rgba(255, 251, 247, 0.96)); } .trip-roadmap-timeline-inbox-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .trip-roadmap-timeline-inbox-strip { display: flex; gap: 0.7rem; overflow-x: auto; padding-bottom: 0.15rem; } .trip-roadmap-timeline-shell .timeline-schedule { border: 1px solid rgba(80, 54, 37, 0.08); border-radius: 1.25rem; background: rgba(255, 255, 255, 0.9); overflow: hidden; } .trip-roadmap-timeline-shell .timeline-schedule-scroll { overflow-x: auto; padding: 0.4rem 0 0.8rem; } .trip-roadmap-timeline-shell .timeline-schedule-head, .trip-roadmap-timeline-shell .timeline-schedule-row { min-width: 1200px; grid-template-columns: 170px minmax(980px, 1fr); } .trip-roadmap-timeline-shell .timeline-schedule-head { position: sticky; top: 0; z-index: 1; background: rgba(255, 252, 248, 0.96); backdrop-filter: blur(10px); } .trip-roadmap-timeline-shell .timeline-schedule-hours { display: grid; grid-template-columns: repeat(25, minmax(52px, 1fr)); align-items: end; } .trip-roadmap-timeline-shell .timeline-schedule-hours span { font-size: 0.72rem; color: var(--ink-soft); } .trip-roadmap-timeline-shell .timeline-schedule-grid { min-height: 7rem; } .trip-roadmap-timeline-shell .timeline-schedule-card { box-shadow: 0 10px 24px rgba(53, 35, 25, 0.08); } .trip-roadmap-timeline-shell .timeline-schedule-empty { color: var(--ink-muted); } @media (max-width: 1080px) { .trip-roadmap-canvas .day-plan-card-head { grid-template-columns: 1fr; } } /* Timeline horizontal layout repair */ .trip-roadmap-timeline-shell { --timeline-day-column: 180px; --timeline-hour-width: 80px; --timeline-hours: 24; --timeline-grid-width: calc(var(--timeline-hour-width) * var(--timeline-hours)); } .trip-roadmap-timeline-shell .timeline-schedule { overflow: hidden; } .trip-roadmap-timeline-shell .timeline-schedule-scroll { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; padding-bottom: 0.4rem; } .trip-roadmap-timeline-shell .timeline-schedule-head, .trip-roadmap-timeline-shell .timeline-schedule-row { display: grid; grid-template-columns: var(--timeline-day-column) var(--timeline-grid-width); gap: 0; min-width: calc(var(--timeline-day-column) + var(--timeline-grid-width)); width: calc(var(--timeline-day-column) + var(--timeline-grid-width)); } .trip-roadmap-timeline-shell .timeline-schedule-head { position: sticky; top: 0; z-index: 3; } .trip-roadmap-timeline-shell .timeline-schedule-day-label, .trip-roadmap-timeline-shell .timeline-schedule-day { position: sticky; left: 0; z-index: 2; width: var(--timeline-day-column); min-width: var(--timeline-day-column); padding: 0.85rem 1rem; background: rgba(255, 252, 248, 0.98); border-right: 1px solid rgba(80, 54, 37, 0.08); } .trip-roadmap-timeline-shell .timeline-schedule-row.is-selected .timeline-schedule-day { background: rgba(255, 244, 235, 0.98); } .trip-roadmap-timeline-shell .timeline-schedule-hours, .trip-roadmap-timeline-shell .timeline-schedule-grid { width: var(--timeline-grid-width); min-width: var(--timeline-grid-width); grid-template-columns: repeat(24, minmax(var(--timeline-hour-width), var(--timeline-hour-width))); } .trip-roadmap-timeline-shell .timeline-schedule-hours { align-items: stretch; } .trip-roadmap-timeline-shell .timeline-schedule-hours span { min-width: var(--timeline-hour-width); width: var(--timeline-hour-width); transform: none; display: flex; align-items: end; justify-content: flex-start; padding: 0 0 0.45rem 0.35rem; border-left: 1px solid rgba(80, 54, 37, 0.06); } .trip-roadmap-timeline-shell .timeline-schedule-hours span:first-child { border-left: 0; } .trip-roadmap-timeline-shell .timeline-schedule-track { width: var(--timeline-grid-width); min-width: var(--timeline-grid-width); } .trip-roadmap-timeline-shell .timeline-schedule-grid { overflow: visible; } .trip-roadmap-timeline-shell .timeline-schedule-hour-slot, .trip-roadmap-timeline-shell .timeline-schedule-lane, .trip-roadmap-timeline-shell .timeline-schedule-unresolved { pointer-events: none; } .trip-roadmap-timeline-shell .timeline-schedule-hour-slot { min-width: var(--timeline-hour-width); } .trip-roadmap-timeline-shell .timeline-schedule-card { min-width: calc(var(--timeline-hour-width) - 8px); pointer-events: auto; } /* Timeline vertical sizing repair */ .trip-roadmap-timeline-shell .timeline-schedule-row { min-height: 144px; align-items: stretch; } .trip-roadmap-timeline-shell .timeline-schedule-day { min-height: 144px; align-self: stretch; } .trip-roadmap-timeline-shell .timeline-schedule-track { min-height: 144px; height: auto; align-content: start; } .trip-roadmap-timeline-shell .timeline-schedule-all-day { min-height: 0; height: auto; } .trip-roadmap-timeline-shell .timeline-schedule-grid { min-height: 120px; height: auto; align-content: start; } .trip-roadmap-timeline-shell .timeline-schedule-lane, .trip-roadmap-timeline-shell .timeline-schedule-unresolved { min-height: 40px; height: auto; } .trip-roadmap-timeline-shell .timeline-schedule { height: auto; min-height: 0; } .trip-roadmap-timeline-shell .timeline-schedule-scroll, .trip-roadmap-timeline-shell .timeline-schedule-body { height: auto; min-height: 0; } /* Timeline item type differentiation */ .timeline-card-title-row { display: flex; align-items: flex-start; gap: 0.5rem; } .timeline-card-emoji { flex: 0 0 auto; font-size: 1rem; line-height: 1.1; } .timeline-schedule-card, .timeline-item-card, .trip-draft-chip, .trip-mobi-draft-pill { border-left-width: 4px; border-left-style: solid; border-radius: 12px; padding: 12px; } .timeline-schedule-card strong, .timeline-item-card strong, .trip-draft-chip strong, .trip-mobi-draft-pill strong { font-weight: 800; } .timeline-schedule-card span, .timeline-schedule-card small, .timeline-item-route, .timeline-item-sub, .timeline-item-meta span, .trip-draft-chip span, .trip-mobi-draft-pill small { color: var(--ink-muted); } .timeline-schedule-card.type-transport, .timeline-item-card.type-transport { border-left-color: #F97316; background: rgba(249, 115, 22, 0.08); } .timeline-schedule-card.type-stay, .timeline-item-card.type-stay { border-left-color: #3B82F6; background: rgba(59, 130, 246, 0.08); } .timeline-schedule-card.type-activity, .timeline-item-card.type-activity { border-left-color: #10B981; background: rgba(16, 185, 129, 0.08); } .trip-draft-chip, .trip-mobi-draft-pill { border-left-color: #9CA3AF; background: rgba(156, 163, 175, 0.12); } .trip-mobi-draft-pill { display: grid; gap: 0.22rem; min-width: 220px; text-align: left; } /* Map height repair */ .trip-roadmap-shell { align-items: stretch; } .trip-roadmap-map { align-self: stretch; min-height: 100%; } .trip-roadmap-map-card { display: flex; flex-direction: column; align-items: stretch; height: 100%; min-height: 500px; } .trip-roadmap-map-canvas, .trip-roadmap-map-canvas .mapboxgl-map, .trip-roadmap-map-canvas .leaflet-container, .trip-roadmap-map-canvas .route-map-surface, #route-map-panel.route-map-panel-live { flex: 1 1 auto; height: 100%; min-height: 500px; } .trip-roadmap-map-canvas { align-self: stretch; } /* Timeline card polish */ .trip-roadmap-timeline-shell .timeline-schedule-card, .trip-roadmap-timeline-shell .timeline-item-card { border-radius: 12px; padding: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease, background-color 140ms ease; overflow: hidden; } .trip-roadmap-timeline-shell .timeline-schedule-card:hover, .trip-roadmap-timeline-shell .timeline-item-card:hover { box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08); border-color: rgba(80, 54, 37, 0.22); } .trip-roadmap-timeline-shell .timeline-schedule-day { display: grid; align-content: start; gap: 0.18rem; } .trip-roadmap-timeline-shell .timeline-schedule-day-trigger { display: grid; gap: 0.12rem; width: 100%; padding: 0; border: 0; background: transparent; text-align: left; cursor: pointer; } .trip-roadmap-timeline-shell .timeline-card-title-row { align-items: flex-start; min-width: 0; } .trip-roadmap-timeline-shell .timeline-card-title-row strong, .trip-roadmap-timeline-shell .timeline-schedule-card strong, .trip-roadmap-timeline-shell .timeline-item-card strong { min-width: 0; font-size: 15px; line-height: 1.28; font-weight: 800; color: var(--ink-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .trip-roadmap-timeline-shell .timeline-schedule-card span, .trip-roadmap-timeline-shell .timeline-schedule-card small, .trip-roadmap-timeline-shell .timeline-item-route, .trip-roadmap-timeline-shell .timeline-item-sub, .trip-roadmap-timeline-shell .timeline-item-meta span { display: block; min-width: 0; font-size: 12px; line-height: 1.4; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .trip-roadmap-timeline-shell .timeline-item-head, .trip-roadmap-timeline-shell .timeline-schedule-card-head, .trip-roadmap-timeline-shell .timeline-item-meta { min-width: 0; } .trip-roadmap-timeline-shell .timeline-card-emoji { margin-top: 1px; } /* Map curtain */ .trip-roadmap-shell { --map-pane-width: 280px; grid-template-columns: minmax(0, 1fr) 18px minmax(260px, var(--map-pane-width)); align-items: stretch; min-height: calc(100vh - 6rem); height: calc(100vh - 6rem); overflow: hidden; } .trip-roadmap-shell[data-map-state="wide"] { --map-pane-width: 400px; } .trip-roadmap-shell[data-map-state="full"] { --map-pane-width: 540px; } .trip-roadmap-shell[data-map-state="hidden"] { --map-pane-width: 0px; grid-template-columns: minmax(0, 1fr) 18px 0px; } .trip-roadmap-map-rail { position: relative; display: flex; align-items: center; justify-content: center; cursor: col-resize; user-select: none; } .trip-roadmap-map-rail::before { content: ""; width: 2px; height: 100%; border-radius: 999px; background: rgba(80, 54, 37, 0.12); } .trip-roadmap-map-toggle { position: absolute; top: 1rem; left: 50%; transform: translateX(-50%); width: 18px; height: 54px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.94); color: var(--ink-soft); box-shadow: 0 10px 24px rgba(53, 35, 25, 0.08); cursor: pointer; display: grid; place-items: center; padding: 0; font-size: 0.95rem; } .trip-roadmap-map-toggle:hover { color: var(--ink); } .trip-roadmap-map { position: static; align-self: stretch; display: flex; flex-direction: column; gap: 1rem; min-width: 0; overflow-x: hidden; overflow-y: auto; width: 100%; height: 100%; max-height: 100%; } .trip-roadmap-shell[data-map-state="hidden"] .trip-roadmap-map { width: 0; min-width: 0; opacity: 0; pointer-events: none; } .trip-roadmap-map-card { flex: 0 0 auto; height: auto; min-height: 0; padding: 0; overflow: hidden; } .trip-roadmap-planner { min-width: 0; min-height: 0; height: 100%; overflow-x: hidden; overflow-y: auto; } .trip-roadmap-map.is-day-split .trip-roadmap-map-card { min-height: 0; } .trip-roadmap-map.is-day-split { height: auto; max-height: 100%; } .trip-roadmap-map.is-day-split .trip-roadmap-map-card:first-child { flex: 0 0 auto; } .trip-roadmap-map.is-day-split .trip-roadmap-day-route-card { flex: 0 0 auto; min-height: 0; } .trip-roadmap-day-route-card { display: grid; gap: 0.85rem; padding: 0.9rem; background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 242, 235, 0.96)); } .trip-roadmap-day-route-head { display: grid; gap: 0.35rem; } .trip-roadmap-day-route-badge { justify-self: start; display: inline-flex; align-items: center; min-height: 1.9rem; padding: 0.32rem 0.78rem; border-radius: 999px; background: rgba(208, 111, 55, 0.1); border: 1px solid rgba(208, 111, 55, 0.16); color: var(--accent-strong); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em; } .trip-roadmap-map-canvas-day, .trip-roadmap-map-canvas-day .mapboxgl-map, .trip-roadmap-map-canvas-day .leaflet-container, .trip-roadmap-map-canvas-day .route-map-surface { min-height: 300px; height: 300px; } .trip-roadmap-map:not(.is-day-split) .trip-roadmap-map-canvas, .trip-roadmap-map:not(.is-day-split) .trip-roadmap-map-canvas .mapboxgl-map, .trip-roadmap-map:not(.is-day-split) .trip-roadmap-map-canvas .leaflet-container, .trip-roadmap-map:not(.is-day-split) .trip-roadmap-map-canvas .route-map-surface, .trip-roadmap-map:not(.is-day-split) #route-map-panel.route-map-panel-live { min-height: clamp(360px, 58vh, 620px); height: clamp(360px, 58vh, 620px); } .trip-roadmap-map.is-day-split .trip-roadmap-map-canvas, .trip-roadmap-map.is-day-split .trip-roadmap-map-canvas .mapboxgl-map, .trip-roadmap-map.is-day-split .trip-roadmap-map-canvas .leaflet-container, .trip-roadmap-map.is-day-split .trip-roadmap-map-canvas .route-map-surface, .trip-roadmap-map.is-day-split #route-map-panel.route-map-panel-live { min-height: clamp(220px, 34vh, 320px); height: clamp(220px, 34vh, 320px); } .trip-roadmap-map.is-day-split .trip-roadmap-map-canvas-day, .trip-roadmap-map.is-day-split .trip-roadmap-map-canvas-day .mapboxgl-map, .trip-roadmap-map.is-day-split .trip-roadmap-map-canvas-day .leaflet-container, .trip-roadmap-map.is-day-split .trip-roadmap-map-canvas-day .route-map-surface { min-height: clamp(180px, 24vh, 240px); height: clamp(180px, 24vh, 240px); } .trip-day-route-badges { display: flex; flex-wrap: wrap; gap: 0.55rem; max-height: 5.25rem; overflow: hidden; } .trip-day-route-chip { display: grid; gap: 0.12rem; min-width: 0; padding: 0.58rem 0.72rem; border-radius: 0.95rem; border: 1px solid rgba(80, 54, 37, 0.08); background: rgba(255, 255, 255, 0.88); } .trip-day-route-chip strong { color: var(--ink-strong); font-size: 0.8rem; line-height: 1.25; } .trip-day-route-chip span { color: var(--ink-muted); font-size: 0.73rem; line-height: 1.25; } .trip-roadmap-map-head, .trip-roadmap-map-overlay, .trip-map-inline-notice, .missing-coords-list, .trip-map-badges, #route-map-caption, #map-panel-badges, #map-inline-notice, #missing-coords-list { display: none !important; } .trip-roadmap-map-canvas, .trip-roadmap-map-canvas .mapboxgl-map, .trip-roadmap-map-canvas .leaflet-container, .trip-roadmap-map-canvas .route-map-surface { border-radius: 1.4rem; } @media (max-width: 1180px) { .trip-roadmap-shell { grid-template-columns: minmax(0, 1fr); min-height: auto; height: auto; overflow: visible; } .trip-roadmap-map-rail { display: none; } .trip-roadmap-map { position: static; max-height: none; height: auto; overflow: visible; gap: 0.85rem; } .trip-roadmap-planner { height: auto; overflow: visible; } .trip-roadmap-map-canvas-day, .trip-roadmap-map-canvas-day .mapboxgl-map, .trip-roadmap-map-canvas-day .leaflet-container, .trip-roadmap-map-canvas-day .route-map-surface { min-height: 260px; height: 260px; } } /* Timeline axis and grid refinement */ .trip-roadmap-timeline-shell .timeline-schedule-head { top: 0; z-index: 5; background: rgba(255, 252, 248, 0.98); box-shadow: 0 1px 0 rgba(80, 54, 37, 0.06); } .trip-roadmap-timeline-shell .timeline-schedule-hours span { color: rgba(118, 99, 85, 0.88); border-left: 1px solid rgba(80, 54, 37, 0.045); } .trip-roadmap-timeline-shell .timeline-schedule-hours span.is-minor { opacity: 0.72; } .trip-roadmap-timeline-shell .timeline-schedule-hours span.is-current-hour { color: var(--ink); border-left-color: rgba(80, 54, 37, 0.16); } .trip-roadmap-timeline-shell .timeline-schedule-grid { overflow: visible; } .trip-roadmap-timeline-shell .timeline-schedule-hour-slot { border-left-color: rgba(80, 54, 37, 0.045); } .trip-roadmap-timeline-shell .timeline-schedule-hour-slot.is-current-hour { border-left-color: rgba(80, 54, 37, 0.16); } /* Compact workspace pass */ .trip-roadmap-shell { font-size: 0.73rem; } .trip-roadmap-planner { padding: 0.85rem 0.9rem 0.95rem; gap: 0.75rem; } .trip-roadmap-header { gap: 0.7rem 0.85rem; padding: 0.05rem 0.05rem 0.65rem; } .trip-roadmap-title-row { align-items: center; gap: 0.45rem; justify-content: flex-start; flex-wrap: wrap; } .trip-roadmap-title-row .trip-buddies-bar { display: inline-flex; align-items: center; gap: 0.4rem; } .trip-roadmap-title h1 { font-size: clamp(1.34rem, 2.05vw, 2rem); } .trip-roadmap-dates, .trip-meta-text { font-size: 0.78rem; } .trip-roadmap-header-meta { gap: 0.5rem; } .trip-roadmap-meta-pill { min-height: 3rem; min-width: 6.8rem; padding: 0.45rem 0.58rem; border-radius: 0.95rem; } .trip-roadmap-meta-pill strong { font-size: 0.84rem; } .trip-roadmap-meta-pill-button { border: 1px solid rgba(80, 54, 37, 0.08); background: rgba(255, 255, 255, 0.92); text-align: left; cursor: pointer; } .trip-roadmap-meta-pill-button:hover { border-color: rgba(80, 54, 37, 0.16); box-shadow: 0 8px 18px rgba(53, 35, 25, 0.08); } .trip-roadmap-meta-pill-button.trip-roadmap-meta-pill-ring { padding: 0.9rem 1rem; } .trip-roadmap-meta-copy { display: block; margin-top: 0.18rem; font-size: 0.56rem; line-height: 1.2; color: var(--ink-soft); } .trip-roadmap-meta-label { font-size: 0.6rem; } .trip-roadmap-header-actions { gap: 0.5rem; justify-content: flex-start; align-items: center; flex-wrap: wrap; margin-top: 0.15rem; } .trip-roadmap-header-actions .button-primary, .trip-roadmap-header-actions .button-secondary, .trip-roadmap-inline-button { height: 2.2rem; min-height: 2.2rem; padding: 0 0.72rem; font-size: 0.68rem; line-height: 1; white-space: nowrap; align-self: stretch; flex-shrink: 0; } .trip-roadmap-delete-button { color: var(--danger); background: linear-gradient(180deg, rgba(255, 251, 250, 0.98), rgba(255, 238, 233, 0.96)); border-color: rgba(180, 35, 24, 0.16); box-shadow: 0 10px 24px rgba(180, 35, 24, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.72); } .trip-roadmap-delete-button span[aria-hidden="true"] { display: inline-flex; align-items: center; justify-content: center; line-height: 1; } .statistics-page-shell { gap: var(--space-6); } .statistics-hero, .statistics-map-shell, .statistics-country-list, .statistics-overview-cards, .statistics-mix-grid, .statistics-detail-grid, .statistics-overview-grid, .statistics-metrics-grid { display: grid; } .statistics-hero { grid-template-columns: minmax(0, 1.8fr) minmax(240px, 320px); gap: var(--space-6); align-items: end; } .statistics-hero-copy { display: grid; gap: var(--space-3); } .statistics-year-picker { justify-self: end; width: min(100%, 18rem); } .statistics-metrics-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-3); } .statistics-metric-card { border: 1px solid var(--line-soft); border-radius: var(--radius-md); padding: 1rem 1.05rem; background: radial-gradient(circle at top right, rgba(208, 111, 55, 0.12), transparent 38%), linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(250, 242, 235, 0.94)); box-shadow: var(--shadow-xs); display: grid; gap: 0.28rem; } .statistics-metric-label, .statistics-metric-detail { font-size: 0.82rem; } .statistics-metric-label { color: var(--ink-soft); font-weight: 700; } .statistics-metric-value { color: var(--ink-strong); font-size: 1.35rem; line-height: 1.1; } .statistics-metric-detail { color: var(--ink-muted); line-height: 1.45; } .statistics-overview-grid, .statistics-detail-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--space-5); } .statistics-map-panel, .statistics-overview-panel { display: grid; gap: var(--space-5); } .statistics-map-shell { position: relative; min-height: 23rem; border-radius: calc(var(--radius-lg) - 6px); overflow: hidden; border: 1px solid var(--line-soft); background: radial-gradient(circle at 20% 18%, rgba(208, 111, 55, 0.16), transparent 30%), linear-gradient(180deg, #fffaf6 0%, #f4ede6 100%); } .statistics-country-map, .statistics-map-fallback { width: 100%; height: 100%; } .statistics-map-fallback { display: grid; gap: var(--space-2); place-items: center; align-content: center; text-align: center; padding: var(--space-8); color: var(--ink-muted); } .statistics-country-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); } .statistics-country-chip { border: 1px solid var(--line-soft); border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.86); padding: 0.95rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); } .statistics-country-chip-main { display: flex; align-items: center; gap: 0.8rem; min-width: 0; } .statistics-country-chip-main strong, .statistics-country-chip-main span { display: block; } .statistics-country-chip-main span:last-child, .statistics-country-chip-meta { color: var(--ink-muted); font-size: 0.82rem; } .statistics-country-flag { width: 2.25rem; height: 2.25rem; border-radius: 999px; display: grid; place-items: center; background: var(--surface-soft); border: 1px solid var(--line-soft); overflow: hidden; flex-shrink: 0; } .statistics-country-flag img { width: 1.25rem; height: auto; display: block; } .statistics-overview-cards, .statistics-mix-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); } .statistics-months-block { display: grid; gap: var(--space-4); } .statistics-month-bars { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0.7rem; align-items: end; min-height: 12rem; } .statistics-month-column { display: grid; gap: 0.55rem; justify-items: center; } .statistics-month-column strong { color: var(--ink-strong); font-size: 0.9rem; } .statistics-month-column span { color: var(--ink-soft); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .statistics-month-track { width: 100%; min-height: 8.5rem; border-radius: 999px; background: rgba(80, 54, 37, 0.08); position: relative; overflow: hidden; display: flex; align-items: end; } .statistics-month-fill { width: 100%; min-height: 0.5rem; border-radius: 999px; background: linear-gradient(180deg, #efb17e 0%, var(--accent) 100%); } .statistics-bar-list { display: grid; gap: var(--space-3); } .statistics-bar-card { display: grid; gap: 0.75rem; } .statistics-bar-copy { display: flex; align-items: end; justify-content: space-between; gap: var(--space-4); } .statistics-bar-copy strong { color: var(--ink-strong); } .statistics-bar-copy span { color: var(--ink-muted); font-size: 0.85rem; } .statistics-bar-track { width: 100%; height: 0.8rem; border-radius: 999px; background: rgba(199, 117, 51, 0.12); overflow: hidden; } .statistics-bar-track.is-stay { background: rgba(18, 119, 91, 0.12); } .statistics-bar-fill { height: 100%; min-width: 0.8rem; border-radius: 999px; background: linear-gradient(90deg, #efb17e 0%, var(--flight) 100%); } .statistics-bar-fill.is-stay { background: linear-gradient(90deg, #98dbc6 0%, var(--success) 100%); } .statistics-map-marker { width: 2.4rem; height: 2.4rem; border: 0; border-radius: 999px; background: linear-gradient(145deg, var(--accent), var(--accent-strong)); color: #fff; font: inherit; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; box-shadow: 0 14px 32px rgba(171, 83, 31, 0.32); cursor: pointer; } .statistics-map-popup-shell .mapboxgl-popup-content { border-radius: 18px; padding: 0; box-shadow: var(--shadow-md); } .statistics-map-popup { display: grid; gap: 0.15rem; padding: 0.8rem 0.9rem; color: var(--ink-strong); } .statistics-map-popup span { color: var(--ink-muted); font-size: 0.82rem; } @media (max-width: 1180px) { .statistics-metrics-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .statistics-overview-grid, .statistics-detail-grid { grid-template-columns: 1fr; } } @media (max-width: 860px) { .statistics-hero, .statistics-country-list, .statistics-overview-cards, .statistics-mix-grid, .statistics-metrics-grid { grid-template-columns: 1fr; } .statistics-year-picker { justify-self: stretch; width: 100%; } .statistics-month-bars { gap: 0.4rem; } .statistics-bar-copy { align-items: start; flex-direction: column; } } .trip-library-card-title-row { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; } .trip-library-verified-badge { width: 1.7rem; height: 1.7rem; min-height: 1.7rem; padding: 0; border-color: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.14); color: #fffdf8; box-shadow: 0 10px 24px rgba(17, 60, 48, 0.18); backdrop-filter: blur(10px); cursor: default; pointer-events: none; transform: none !important; } .trip-library-verified-badge .trip-verified-badge-icon { background: linear-gradient(145deg, #ffffff, #e9fff6); color: var(--success); box-shadow: 0 6px 14px rgba(255, 255, 255, 0.22); } .trip-roadmap-delete-button:hover { transform: translateY(-1px); color: #8f1f17; border-color: rgba(180, 35, 24, 0.24); background: linear-gradient(180deg, rgba(255, 246, 244, 0.99), rgba(255, 230, 224, 0.98)); box-shadow: 0 14px 28px rgba(180, 35, 24, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.82); } .trip-roadmap-delete-button:focus-visible { outline: none; border-color: rgba(180, 35, 24, 0.32); box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.12), 0 14px 28px rgba(180, 35, 24, 0.12); } .trip-roadmap-button-count, .trip-buddy-add { font-size: 0.76rem; } .trip-roadmap-header-actions .trip-buddies-bar { font-size: 0.76rem; } .trip-roadmap-header-actions .trip-roadmap-button-count { min-width: 1.5rem; min-height: 1.35rem; padding-inline: 0.38rem; font-size: 0.64rem; } .cost-receipt-dialog { width: min(92vw, 560px); max-width: none; margin: auto; padding: 0; border: 0; background: transparent; inset: 0; overflow: visible; } .cost-receipt-dialog::backdrop { background: rgba(32, 24, 18, 0.42); } .cost-receipt-sheet { width: min(92vw, 560px); padding: 1.1rem 1rem 1rem; border-radius: 1rem; background: #fffdf9; color: #251b14; font-family: "IBM Plex Mono", "Courier New", monospace; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18); display: grid; gap: 0.8rem; overflow: visible; } .cost-receipt-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; border-bottom: 1px dashed rgba(37, 27, 20, 0.18); padding-bottom: 0.65rem; } .cost-receipt-head strong, .cost-receipt-total strong, .cost-receipt-line strong { font-family: inherit; } .cost-receipt-head div { display: grid; gap: 0.18rem; } .cost-receipt-head span, .cost-receipt-meta, .cost-receipt-line-copy span { color: rgba(37, 27, 20, 0.72); } .trip-verification-sheet { gap: 1rem; } .trip-verification-summary { display: grid; gap: 0.75rem; } .trip-verification-summary p { margin: 0; color: rgba(37, 27, 20, 0.78); } .trip-verification-status-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; } .trip-verification-status-card { display: grid; gap: 0.18rem; padding: 0.8rem 0.85rem; border-radius: 0.9rem; border: 1px solid rgba(37, 27, 20, 0.1); background: rgba(37, 27, 20, 0.03); } .trip-verification-status-card strong { font-size: 0.82rem; letter-spacing: 0.04em; } .trip-verification-status-card span { color: rgba(37, 27, 20, 0.72); font-size: 0.78rem; } .trip-verification-status-card[data-state="complete"] { border-color: rgba(18, 119, 91, 0.2); background: rgba(18, 119, 91, 0.08); } .trip-verification-checklist { display: grid; gap: 0.75rem; } .trip-verification-checklist-head { display: grid; gap: 0.16rem; } .trip-verification-checklist-head span, .trip-verification-feedback, .trip-verification-empty { color: rgba(37, 27, 20, 0.7); font-size: 0.78rem; } .trip-verification-items { display: grid; gap: 0.55rem; } .trip-verification-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.7rem; align-items: center; padding: 0.7rem 0.8rem; border-radius: 0.9rem; border: 1px solid rgba(37, 27, 20, 0.08); background: rgba(255, 255, 255, 0.72); } .trip-verification-item input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--success); } .trip-verification-item-copy { min-width: 0; overflow-wrap: anywhere; } .trip-verification-item-remove { appearance: none; border: 0; background: transparent; color: rgba(37, 27, 20, 0.54); font-size: 1.15rem; line-height: 1; cursor: pointer; } .trip-verification-add-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.65rem; } .trip-verification-add-input { width: 100%; min-height: 2.8rem; padding: 0.8rem 0.9rem; border-radius: 0.9rem; border: 1px solid rgba(37, 27, 20, 0.14); background: rgba(255, 255, 255, 0.92); font: inherit; color: inherit; } .trip-verification-feedback { min-height: 1.05rem; } @media (max-width: 640px) { .trip-verification-status-grid, .trip-verification-add-row { grid-template-columns: 1fr; } } .cost-receipt-meta { display: grid; gap: 0.18rem; font-size: 0.78rem; } .cost-receipt-items { display: grid; gap: 0.5rem; } .cost-receipt-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.8rem; align-items: start; padding-bottom: 0.45rem; border-bottom: 1px dotted rgba(37, 27, 20, 0.16); } .cost-receipt-line-copy { display: grid; gap: 0.12rem; min-width: 0; } .cost-receipt-line-copy strong { font-size: 0.86rem; } .cost-receipt-line-copy span { font-size: 0.72rem; line-height: 1.25; } .cost-receipt-line.is-empty { grid-template-columns: 1fr; } .cost-receipt-total { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 0.25rem; border-top: 2px double rgba(37, 27, 20, 0.22); } .cost-receipt-total-stack { display: grid; gap: 0.45rem; } .cost-receipt-total-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .cost-receipt-total-copy { display: grid; gap: 0.15rem; color: rgba(37, 27, 20, 0.72); font-size: 0.74rem; } .cost-receipt-actions { display: flex; justify-content: flex-end; } .trip-roadmap-tabs { padding: 0.18rem; } .reservation-delete-button { color: var(--danger); border-color: rgba(180, 35, 24, 0.18); background: var(--danger-soft); } .reservation-delete-button:hover { color: #fff; background: var(--danger); border-color: var(--danger); } .trip-roadmap-tab { padding: 0.38rem 0.66rem; font-size: 0.66rem; } .trip-roadmap-canvas, .trip-roadmap-inspector { padding: 0.68rem; gap: 0.62rem; border-radius: 1rem; } .trip-roadmap-view-head h2 { font-size: clamp(0.95rem, 1.45vw, 1.25rem); } .trip-roadmap-timeline-shell { --timeline-day-column: 148px; --timeline-hour-width: 84px; gap: 0.7rem; } .trip-roadmap-board[data-workspace-board="timeline"] .trip-roadmap-canvas { padding: 0; background: transparent; border: 0; box-shadow: none; } .trip-roadmap-timeline-shell .timeline-schedule-head, .trip-roadmap-timeline-shell .timeline-schedule-row { grid-template-columns: var(--timeline-day-column) var(--timeline-grid-width); min-width: calc(var(--timeline-day-column) + var(--timeline-grid-width)); width: calc(var(--timeline-day-column) + var(--timeline-grid-width)); } .trip-roadmap-timeline-shell .timeline-schedule-day-label, .trip-roadmap-timeline-shell .timeline-schedule-day { width: var(--timeline-day-column); min-width: var(--timeline-day-column); padding: 0.5rem 0.4rem; } .trip-roadmap-timeline-shell .timeline-schedule-day strong { font-size: 0.68rem; } .trip-roadmap-timeline-shell .timeline-schedule-day span:last-child { font-size: 0.5rem; } .trip-roadmap-timeline-shell .timeline-day-number { font-size: 0.44rem; } .trip-roadmap-timeline-shell .timeline-day-weather, .trip-roadmap-timeline-shell .timeline-day-stay-link, .trip-roadmap-timeline-shell .timeline-day-stay-placeholder { margin-top: 0.1rem; } .trip-roadmap-timeline-shell .timeline-day-weather { display: grid; gap: 0.18rem; justify-items: start; } .trip-roadmap-timeline-shell .timeline-schedule-day .timeline-schedule-card.is-day-rail-card { position: relative; inset: auto; width: 100%; min-width: 0; margin-top: 0.14rem; padding: 7px 8px; align-self: stretch; justify-self: stretch; z-index: 1; } .trip-roadmap-timeline-shell .timeline-schedule-day .timeline-schedule-card.is-day-rail-card .timeline-schedule-card-head { margin-top: 0.12rem; } .trip-roadmap-timeline-shell .timeline-schedule-day .timeline-schedule-card.is-day-rail-card strong { font-size: 10px; } .trip-roadmap-timeline-shell .timeline-schedule-day .timeline-schedule-card.is-day-rail-card span, .trip-roadmap-timeline-shell .timeline-schedule-day .timeline-schedule-card.is-day-rail-card small { font-size: 8px; } .trip-roadmap-timeline-shell .timeline-day-meme { display: block; width: 100%; max-width: 72px; height: auto; margin-top: 0.16rem; border-radius: 10px; border: 1px solid rgba(80, 54, 37, 0.08); object-fit: cover; } .trip-roadmap-timeline-shell .timeline-weather-badge { display: inline-flex; align-items: center; gap: 0.26rem; width: fit-content; max-width: 100%; padding: 0.18rem 0.42rem; border-radius: 999px; background: rgba(255, 255, 255, 0.82); border: 1px solid rgba(80, 54, 37, 0.08); color: var(--ink); font-size: 0.5rem; font-weight: 700; line-height: 1.2; white-space: nowrap; } .trip-roadmap-timeline-shell .timeline-weather-badge.is-loading, .trip-roadmap-timeline-shell .timeline-weather-badge.is-empty { color: var(--ink-soft); } .trip-roadmap-timeline-shell .timeline-weather-badge strong { color: var(--ink-strong); font-size: 0.5rem; font-weight: 800; } .trip-roadmap-timeline-shell .timeline-weather-badge span { display: inline-block; } .trip-roadmap-timeline-shell .timeline-weather-text { display: inline-block; font-size: 0.48rem; line-height: 1.2; color: var(--ink-muted); } .trip-roadmap-timeline-shell .timeline-weather-text.is-loading { color: var(--ink-soft); } .trip-roadmap-timeline-shell .timeline-day-stay-link { display: block; width: 100%; padding: 0; border: 0; background: transparent; text-align: left; color: var(--accent-strong); font: inherit; font-size: 0.54rem; font-weight: 700; line-height: 1.25; cursor: pointer; } .trip-roadmap-timeline-shell .timeline-day-stay-placeholder { display: block; color: var(--ink-soft); font-size: 0.5rem; line-height: 1.25; } .trip-roadmap-timeline-shell .timeline-schedule-hours span { min-width: var(--timeline-hour-width); width: var(--timeline-hour-width); padding-left: 0.18rem; font-size: 0.6rem; letter-spacing: 0.01em; } .trip-roadmap-timeline-shell .timeline-schedule-card { min-width: 0; padding: 8px 9px; background-image: none; backdrop-filter: none; z-index: 6; pointer-events: auto; } .trip-roadmap-timeline-shell .timeline-schedule-day .timeline-schedule-card.is-day-rail-card { min-width: 0; } .trip-roadmap-timeline-shell .timeline-card-title-row strong, .trip-roadmap-timeline-shell .timeline-schedule-card strong, .trip-roadmap-timeline-shell .timeline-item-card strong { font-size: 11px; } .trip-roadmap-timeline-shell .timeline-schedule-card span, .trip-roadmap-timeline-shell .timeline-schedule-card small, .trip-roadmap-timeline-shell .timeline-item-route, .trip-roadmap-timeline-shell .timeline-item-sub, .trip-roadmap-timeline-shell .timeline-item-meta span { font-size: 9px; } .trip-roadmap-timeline-shell .timeline-schedule-card, .trip-roadmap-timeline-shell .timeline-schedule-card * { overflow: hidden; text-overflow: ellipsis; } .trip-roadmap-timeline-shell .timeline-schedule-card { gap: 0.18rem; } .trip-roadmap-timeline-shell .timeline-schedule-card-head, .trip-roadmap-timeline-shell .timeline-item-head, .trip-roadmap-timeline-shell .timeline-item-meta { gap: 0.2rem; } .trip-roadmap-timeline-shell .timeline-schedule-card .status-badge, .trip-roadmap-timeline-shell .timeline-item-card .status-badge, .trip-roadmap-timeline-shell .timeline-item-kind { font-size: 0.46rem; } .trip-roadmap-timeline-shell .is-flight-card { align-content: start; } .trip-roadmap-timeline-shell .is-flight-card .timeline-card-title-row { margin-bottom: 0.05rem; align-items: center; } .trip-roadmap-timeline-shell .timeline-flight-time-row { display: flex; align-items: center; gap: 0.22rem; min-width: 0; } .trip-roadmap-timeline-shell .timeline-tz-badge { margin-left: auto; padding: 0.12rem 0.32rem; border-radius: 999px; background: rgba(255, 255, 255, 0.82); border: 1px solid rgba(249, 115, 22, 0.22); color: var(--accent-strong); font-size: 0.46rem; font-weight: 800; line-height: 1; } .trip-roadmap-timeline-shell .timeline-flight-ref, .trip-roadmap-timeline-shell .timeline-flight-route, .trip-roadmap-timeline-shell .is-flight-card small { display: block; white-space: nowrap; } .trip-roadmap-timeline-shell .timeline-flight-ref { font-size: 0.5rem; color: var(--ink-soft); font-weight: 700; order: 4; } .trip-roadmap-timeline-shell .timeline-flight-route { font-size: 0.5rem; color: var(--ink-muted); } .trip-roadmap-timeline-shell .is-flight-card small { font-size: 0.48rem; color: var(--ink-soft); } .trip-roadmap-timeline-shell .timeline-schedule-card::before, .trip-roadmap-timeline-shell .timeline-item-card::before, .trip-roadmap-timeline-shell .trip-draft-chip::before { display: none; } .trip-roadmap-timeline-shell .timeline-schedule-card.type-transport, .trip-roadmap-timeline-shell .timeline-item-card.type-transport { background: rgba(249, 115, 22, 0.16) !important; border-left-color: #F97316 !important; } .trip-roadmap-timeline-shell .timeline-schedule-card.type-stay, .trip-roadmap-timeline-shell .timeline-item-card.type-stay { background: rgba(59, 130, 246, 0.16) !important; border-left-color: #3B82F6 !important; } .trip-roadmap-timeline-shell .timeline-schedule-card.type-activity, .trip-roadmap-timeline-shell .timeline-item-card.type-activity { background: rgba(16, 185, 129, 0.16) !important; border-left-color: #10B981 !important; } .trip-roadmap-timeline-shell .trip-draft-chip, .trip-roadmap-timeline-shell .trip-mobi-draft-pill { background: rgba(156, 163, 175, 0.16) !important; border-left-color: #9CA3AF !important; } .trip-roadmap-timeline-shell .timeline-schedule-card .status-badge, .trip-roadmap-timeline-shell .timeline-item-card .status-badge { background: rgba(255, 255, 255, 0.72); border-color: rgba(80, 54, 37, 0.08); } /* Final timeline row density + overlap stacking pass */ .trip-roadmap-timeline-shell .timeline-schedule { gap: 0.3rem; } .trip-roadmap-timeline-shell .timeline-schedule-row { position: relative; min-height: max(138px, calc((var(--lane-count, 1) * 74px) + (var(--unresolved-lane-count, 0) * 44px) + 16px)); border-top: 1px solid rgba(80, 54, 37, 0.08); } .trip-roadmap-timeline-shell .timeline-schedule-row:first-child { border-top: 0; } .trip-roadmap-timeline-shell .timeline-schedule-day { min-height: 100%; padding-top: 0.55rem; padding-bottom: 0.55rem; background: linear-gradient(180deg, rgba(255, 252, 248, 0.98), rgba(251, 247, 242, 0.96)); } .trip-roadmap-timeline-shell .timeline-schedule-track { min-height: 100%; gap: 0.1rem; padding: 0.18rem 0 0.24rem; } .trip-roadmap-timeline-shell .timeline-schedule-grid { min-height: calc((var(--lane-count, 1) * 74px) + (var(--unresolved-lane-count, 0) * 44px)); padding: 0; border: 0; border-radius: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.06)), repeating-linear-gradient( 90deg, rgba(116, 96, 82, 0.04) 0, rgba(116, 96, 82, 0.04) 1px, transparent 1px, transparent var(--timeline-hour-width) ); box-shadow: none; align-content: start; overflow: visible; } .trip-roadmap-timeline-shell .timeline-schedule-lane { position: relative; min-height: 74px; border-top: 1px dashed rgba(80, 54, 37, 0.06); } .trip-roadmap-timeline-shell .timeline-schedule-lane:first-of-type { border-top: 0; } .trip-roadmap-timeline-shell .timeline-schedule-hour-slot { min-height: 100%; border-left-color: rgba(80, 54, 37, 0.03); } .trip-roadmap-timeline-shell .timeline-schedule-card { top: 8px; min-height: 58px; padding: 8px 10px; box-shadow: 0 6px 14px rgba(53, 35, 25, 0.08); } .trip-roadmap-timeline-shell .timeline-schedule-empty { align-self: start; padding: 0.85rem 0.6rem 0.4rem; font-size: 0.76rem; } .trip-roadmap-timeline-shell .timeline-schedule-unresolved { margin-top: 0.18rem; padding-top: 0.28rem; border-top: 1px dashed rgba(80, 54, 37, 0.08); } /* Final timeline polish: zebra rows, no day-column tint, lane separation, round map markers */ .trip-roadmap-timeline-shell .timeline-schedule-row { min-height: max(142px, calc((var(--lane-count, 1) * 86px) + (var(--unresolved-lane-count, 0) * 48px) + 12px)); background: transparent; } .trip-roadmap-timeline-shell .timeline-schedule-row:nth-child(even) { background: rgba(80, 54, 37, 0.025); } .trip-roadmap-timeline-shell .timeline-schedule-day { background: transparent; } .trip-roadmap-timeline-shell .timeline-schedule-row.is-selected .timeline-schedule-day { background: transparent; } .trip-roadmap-timeline-shell .timeline-schedule-grid { min-height: calc((var(--lane-count, 1) * 86px) + (var(--unresolved-lane-count, 0) * 48px)); } .trip-roadmap-timeline-shell .timeline-schedule-lane { min-height: 80px; } .trip-roadmap-timeline-shell .timeline-schedule-card { top: 2px; min-height: 64px; } .trip-roadmap-timeline-shell .timeline-schedule-track { padding-top: 0; } .mapbox-stop-marker { display: grid; place-items: center; position: relative; z-index: 2; width: 34px; height: 34px; padding: 0; border: 0; background: transparent; cursor: pointer; } .mapbox-stop-marker.is-stay-marker { z-index: 1; } .mapbox-stop-marker.is-selected { z-index: 3; } .mapbox-stop-marker.is-time-label { width: auto; height: 34px; } .mapbox-stop-marker-pin { display: inline-grid; place-items: center; width: 30px; height: 30px; min-width: 30px; padding: 0; border-radius: 999px; background: #ffffff; color: #10B981; font-size: 0.76rem; font-weight: 800; line-height: 1; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14); border: 2px solid #10B981; } .mapbox-stop-marker.is-time-label .mapbox-stop-marker-pin { width: auto; min-width: 30px; height: 30px; padding: 0 0.55rem; border-radius: 999px; font-size: 0.72rem; } .mapbox-stop-marker.is-selected .mapbox-stop-marker-pin { background: #10B981; color: #ffffff; border-color: #10B981; } .mapbox-stop-marker.is-stay-marker .mapbox-stop-marker-pin { color: #237f68; border-color: #237f68; background: #ffffff; font-weight: 900; } .mapbox-stop-marker.is-stay-marker .mapbox-stop-marker-pin .icon, .mapbox-stop-marker.is-stay-marker .mapbox-stop-marker-pin .stay-marker-icon { width: 15px; height: 15px; display: block; } .mapbox-stop-marker.is-stay-marker .mapbox-stop-marker-pin .stay-marker-icon { transform: translateY(-0.25px); } .mapbox-stop-marker.is-stay-marker.is-selected .mapbox-stop-marker-pin { color: #ffffff; background: #237f68; border-color: #237f68; } .leaflet-stop-icon.is-time-label { width: auto; min-width: 30px; padding: 0 0.55rem; border-radius: 999px; font-size: 0.72rem; } .leaflet-stop-icon.is-stay-marker { color: #237f68; border-color: #237f68; } .leaflet-stop-icon.is-stay-marker .icon { width: 14px; height: 14px; } .trip-roadmap-timeline-shell .timeline-schedule-day-label, .trip-roadmap-timeline-shell .timeline-schedule-day { z-index: 8; background: #fffaf6; box-shadow: 10px 0 18px rgba(245, 239, 231, 0.96); } .trip-roadmap-timeline-shell .timeline-schedule-row.is-selected .timeline-schedule-day { background: #fffaf6; } /* Final lane geometry lock */ .trip-roadmap-timeline-shell { --timeline-card-height: 72px; --timeline-lane-height: 72px; --timeline-unresolved-height: 44px; } .trip-roadmap-timeline-shell .timeline-schedule-row { min-height: max(142px, calc((var(--lane-count, 1) * var(--timeline-lane-height)) + (var(--unresolved-lane-count, 0) * var(--timeline-unresolved-height)) + 6px)); } .trip-roadmap-timeline-shell .timeline-schedule-grid { min-height: calc((var(--lane-count, 1) * var(--timeline-lane-height)) + (var(--unresolved-lane-count, 0) * var(--timeline-unresolved-height))); } .trip-roadmap-timeline-shell .timeline-schedule-lane { min-height: var(--timeline-lane-height); } .trip-roadmap-timeline-shell .timeline-schedule-card { top: 0; height: var(--timeline-card-height); min-height: var(--timeline-card-height); max-height: var(--timeline-card-height); overflow: hidden; } .trip-roadmap-timeline-shell .timeline-schedule-card { align-content: start; gap: 0.12rem; } .trip-roadmap-timeline-shell .timeline-card-title-row { align-items: flex-start; gap: 0.32rem; } .trip-roadmap-timeline-shell .timeline-card-title-row strong { flex: 1 1 auto; min-width: 0; font-size: 0.72rem; line-height: 1.18; white-space: normal; overflow-wrap: anywhere; } .trip-roadmap-timeline-shell .timeline-schedule-card .status-badge { grid-column: 1 / -1; justify-self: start; margin-top: 0.04rem; padding: 0.1rem 0.3rem; font-size: 0.46rem; line-height: 1.1; white-space: nowrap; } .trip-roadmap-timeline-shell .timeline-schedule-card span, .trip-roadmap-timeline-shell .timeline-schedule-card small { font-size: 0.52rem; line-height: 1.18; white-space: normal; overflow-wrap: anywhere; } .trip-roadmap-timeline-shell .timeline-flight-route, .trip-roadmap-timeline-shell .timeline-flight-ref, .trip-roadmap-timeline-shell .is-flight-card small { white-space: normal; overflow-wrap: anywhere; } /* Global timeline card formatting: keep card content readable for every trip */ .trip-roadmap-timeline-shell { --timeline-card-height: 78px; --timeline-lane-height: 78px; } .trip-roadmap-timeline-shell .timeline-schedule-row { min-height: max(142px, calc((var(--lane-count, 1) * var(--timeline-lane-height)) + (var(--unresolved-lane-count, 0) * var(--timeline-unresolved-height)) + 8px)); } .trip-roadmap-timeline-shell .timeline-schedule-grid { min-height: calc((var(--lane-count, 1) * var(--timeline-lane-height)) + (var(--unresolved-lane-count, 0) * var(--timeline-unresolved-height))); } .trip-roadmap-timeline-shell .timeline-schedule-lane { min-height: var(--timeline-lane-height); } .trip-roadmap-timeline-shell .timeline-schedule-card { display: grid; align-content: start; gap: 0.12rem; height: var(--timeline-card-height); min-height: var(--timeline-card-height); max-height: var(--timeline-card-height); overflow: hidden; padding: 8px 10px; } .trip-roadmap-timeline-shell .timeline-schedule-day .timeline-schedule-card.is-day-rail-card, .trip-roadmap-timeline-shell .timeline-schedule-card.is-all-day { height: auto; min-height: 0; max-height: none; } .trip-roadmap-timeline-shell .timeline-schedule-card *, .trip-roadmap-timeline-shell .timeline-item-card * { min-width: 0; } .trip-roadmap-timeline-shell .timeline-card-title-row strong, .trip-roadmap-timeline-shell .timeline-schedule-card strong, .trip-roadmap-timeline-shell .timeline-item-card strong { font-size: 0.72rem; line-height: 1.15; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; } .trip-roadmap-timeline-shell .timeline-schedule-card span, .trip-roadmap-timeline-shell .timeline-schedule-card small, .trip-roadmap-timeline-shell .timeline-item-route, .trip-roadmap-timeline-shell .timeline-item-sub, .trip-roadmap-timeline-shell .timeline-item-meta span { font-size: 0.52rem; line-height: 1.18; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; } .trip-roadmap-timeline-shell .timeline-card-primary { color: var(--ink); } .trip-roadmap-timeline-shell .timeline-card-secondary, .trip-roadmap-timeline-shell .timeline-card-meta, .trip-roadmap-timeline-shell .timeline-flight-ref, .trip-roadmap-timeline-shell .timeline-flight-route, .trip-roadmap-timeline-shell .timeline-flight-time-row small { color: var(--ink-muted); } .trip-roadmap-timeline-shell .timeline-card-title-row { align-items: flex-start; gap: 0.28rem; } .trip-roadmap-timeline-shell .timeline-card-title-row strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .trip-roadmap-timeline-shell .timeline-card-emoji { font-size: 0.68rem; line-height: 1; margin-top: 0.06rem; } .trip-roadmap-timeline-shell .timeline-card-primary, .trip-roadmap-timeline-shell .timeline-card-secondary, .trip-roadmap-timeline-shell .timeline-card-meta, .trip-roadmap-timeline-shell .timeline-flight-route, .trip-roadmap-timeline-shell .timeline-flight-ref, .trip-roadmap-timeline-shell .timeline-flight-time-row { display: block; } .trip-roadmap-timeline-shell .timeline-card-primary { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; white-space: normal; overflow-wrap: anywhere; } .trip-roadmap-timeline-shell .timeline-schedule-day .timeline-schedule-card.is-day-rail-card .timeline-card-primary { -webkit-line-clamp: 3; } .trip-roadmap-timeline-shell .timeline-card-secondary, .trip-roadmap-timeline-shell .timeline-card-meta { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; white-space: normal; } @media print { body.print-calendar-view { background: #ffffff !important; color: #111111 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } body.print-calendar-view .app-header, body.print-calendar-view .trip-roadmap-header, body.print-calendar-view .trip-roadmap-surface-head, body.print-calendar-view [data-workspace-board="timeline"], body.print-calendar-view [data-workspace-board="route"], body.print-calendar-view [data-workspace-board="day"], body.print-calendar-view .trip-roadmap-map-rail, body.print-calendar-view .trip-roadmap-map, body.print-calendar-view .trip-roadmap-engine-host, body.print-calendar-view .trip-import-dialog, body.print-calendar-view .trip-add-dialog, body.print-calendar-view .cost-receipt-dialog, body.print-calendar-view .calendar-board-actions, body.print-calendar-view .trip-roadmap-view-head-actions, body.print-calendar-view .trip-meta-text { display: none !important; } body.print-calendar-view .app-page, body.print-calendar-view .trip-roadmap-shell, body.print-calendar-view .trip-roadmap-planner, body.print-calendar-view .trip-roadmap-surface, body.print-calendar-view .trip-roadmap-board[data-workspace-board="calendar"], body.print-calendar-view .trip-roadmap-main-grid, body.print-calendar-view .trip-roadmap-canvas, body.print-calendar-view .calendar-board, body.print-calendar-view .calendar-board-shell { display: block !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: #ffffff !important; box-shadow: none !important; } body.print-calendar-view .trip-roadmap-view-head { margin: 0 0 1rem; padding: 0; } body.print-calendar-view .trip-roadmap-view-head .section-eyebrow, body.print-calendar-view .trip-roadmap-view-head h2 { display: none !important; } body.print-calendar-view .calendar-print-summary { display: grid !important; gap: 0.45rem; margin: 0 0 1.1rem; padding: 0 0 0.9rem; border-bottom: 1px solid rgba(0, 0, 0, 0.12); } body.print-calendar-view .calendar-print-summary h1 { font-size: 2rem; line-height: 1.02; } body.print-calendar-view .calendar-print-summary p { font-size: 0.95rem; color: #444444; } body.print-calendar-view .trip-roadmap-country-row { gap: 0.4rem; } body.print-calendar-view .trip-roadmap-country-chip { background: #ffffff !important; border: 1px solid rgba(0, 0, 0, 0.14) !important; color: #111111 !important; } body.print-calendar-view .trip-roadmap-canvas .calendar-grid { min-height: 0 !important; padding: 0 !important; } body.print-calendar-view .calendar-grid, body.print-calendar-view .calendar-day-cell, body.print-calendar-view .calendar-event-chip, body.print-calendar-view .calendar-date-chip { break-inside: avoid; page-break-inside: avoid; } } .day-plan-ledger { display: grid; gap: 1rem; padding: 1rem 1.05rem 1.15rem; border: 1px solid rgba(80, 54, 37, 0.08); border-radius: 1.1rem; background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(250, 245, 239, 0.94)); } .day-plan-ledger-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .day-plan-ledger-actions { display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap; } .day-plan-ledger-copy { display: grid; gap: 0.16rem; } .day-plan-ledger-copy strong { color: var(--ink-strong); font-size: 1rem; } .day-plan-ledger-copy span { color: var(--ink-muted); font-size: 0.84rem; } .day-plan-ledger-wrap { overflow-x: auto; border: 1px solid rgba(80, 54, 37, 0.08); border-radius: 0.95rem; background: rgba(255, 255, 255, 0.92); } .day-plan-ledger-table { width: 100%; min-width: 980px; border-collapse: collapse; } .day-plan-ledger-table thead th { position: sticky; top: 0; z-index: 1; padding: 0.78rem 0.72rem; text-align: left; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); background: rgba(252, 247, 241, 0.96); border-bottom: 1px solid rgba(80, 54, 37, 0.1); white-space: nowrap; } .day-plan-ledger-table tbody td { padding: 0.82rem 0.72rem; border-bottom: 1px solid rgba(80, 54, 37, 0.07); vertical-align: top; color: var(--ink); font-size: 0.9rem; line-height: 1.3; } .day-plan-ledger-row { transition: background-color 140ms ease; } .day-plan-ledger-row:nth-child(even) { background: rgba(247, 241, 235, 0.34); } .day-plan-ledger-row.is-clickable { cursor: pointer; } .day-plan-ledger-row.is-clickable:hover { background: rgba(208, 111, 55, 0.08); } .day-plan-ledger-day-index { display: inline-flex; min-width: 2rem; justify-content: center; padding: 0.16rem 0.5rem; border-radius: 999px; background: rgba(208, 111, 55, 0.1); color: var(--accent-strong); font-weight: 800; font-size: 0.78rem; } .day-plan-ledger-descr { display: grid; gap: 0.16rem; } .day-plan-ledger-descr strong { color: var(--ink-strong); font-size: 0.92rem; } .day-plan-ledger-descr small { color: var(--ink-soft); font-size: 0.74rem; line-height: 1.2; } .day-plan-ledger-empty-row td { padding: 1rem 0.9rem; } .day-plan-ledger-legend { display: flex; flex-wrap: wrap; gap: 0.75rem; } .day-plan-ledger-legend-item { display: grid; gap: 0.08rem; min-width: 120px; padding: 0.6rem 0.72rem; border: 1px solid rgba(80, 54, 37, 0.08); border-radius: 0.9rem; background: rgba(255, 255, 255, 0.84); text-align: left; cursor: pointer; transition: border-color 140ms ease, background-color 140ms ease, transform 140ms ease, box-shadow 140ms ease; } .day-plan-ledger-legend-item:hover { transform: translateY(-1px); border-color: rgba(208, 111, 55, 0.22); background: rgba(255, 255, 255, 0.96); } .day-plan-ledger-legend-item.is-active { border-color: rgba(208, 111, 55, 0.34); background: rgba(255, 240, 226, 0.92); box-shadow: inset 0 0 0 1px rgba(208, 111, 55, 0.16); } .day-plan-ledger-legend-item strong { color: var(--ink-strong); font-size: 0.82rem; } .day-plan-ledger-legend-item span, .day-plan-ledger-legend-item small { color: var(--ink-muted); font-size: 0.72rem; } .day-plan-card-focus { margin-top: 0.1rem; } .day-plan-card-head-static { cursor: default; } .day-plan-card-head-static .day-plan-chevron { font-size: 0.82rem; } .day-plan-linked-chip { align-items: flex-start; padding: 0.58rem 0.82rem; } .day-plan-linked-chip strong, .day-plan-linked-chip span { display: block; line-height: 1.25; text-align: left; } .day-plan-linked-chip strong { font-size: 0.84rem; } .day-plan-linked-chip span { max-width: 30ch; color: var(--ink-muted); font-size: 0.75rem; white-space: normal; } @media print { body.print-day-plan-view { background: #ffffff !important; color: #111111 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } body.print-day-plan-view .app-header, body.print-day-plan-view .trip-roadmap-header, body.print-day-plan-view .trip-roadmap-surface-head, body.print-day-plan-view [data-workspace-board="timeline"], body.print-day-plan-view [data-workspace-board="route"], body.print-day-plan-view [data-workspace-board="calendar"], body.print-day-plan-view .trip-roadmap-map-rail, body.print-day-plan-view .trip-roadmap-map, body.print-day-plan-view .trip-roadmap-engine-host, body.print-day-plan-view .trip-import-dialog, body.print-day-plan-view .trip-add-dialog, body.print-day-plan-view .cost-receipt-dialog, body.print-day-plan-view .day-plan-ledger-actions, body.print-day-plan-view .trip-meta-text { display: none !important; } body.print-day-plan-view .app-page, body.print-day-plan-view .trip-roadmap-shell, body.print-day-plan-view .trip-roadmap-planner, body.print-day-plan-view .trip-roadmap-surface, body.print-day-plan-view .trip-roadmap-board[data-workspace-board="day"], body.print-day-plan-view .trip-roadmap-main-grid, body.print-day-plan-view .trip-roadmap-canvas, body.print-day-plan-view .day-by-day-board, body.print-day-plan-view .day-plan-ledger { display: block !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: #ffffff !important; box-shadow: none !important; } } .route-map-node { cursor: pointer; } .route-map-node.is-stay .route-map-node-core { fill: #ebfff6; stroke: #27c38a; stroke-width: 2.5; } .route-map-node.is-stay .route-map-node-ring { fill: rgba(39, 195, 138, 0.15); } .route-map-node.is-stay .route-map-label-bg { fill: rgba(39, 195, 138, 0.16); stroke: rgba(18, 119, 91, 0.22); stroke-width: 1.2; } .route-map-node-glyph { fill: #7a6351; font-size: 12px; font-weight: 800; pointer-events: none; } .route-map-node-glyph-stay { fill: #12775b; font-size: 13px; }