/* Shared component contracts. Page layouts belong in workspace.css or feature stylesheets. */
:root {
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 20px;
    --space-5: 28px;
    --text-body: 14px;
    --text-secondary: 12px;
    --control-height: 44px;
    --surface-soft: #f5f7fa;
    --layer-menu: 30;
    --layer-dialog: 100;
}
.ui-pagination {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 110px minmax(0, 1fr);
    align-items: center;
    gap: var(--space-3);
    min-height: 68px;
    padding: 12px 16px;
    font-size: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}
.ui-pagination > :first-child { justify-self: end; }
.ui-pagination > :last-child { justify-self: start; }
.ui-pagination .pagination-current { text-align: center; white-space: nowrap; }
.ui-pagination > a, .ui-pagination > .pagination-unavailable { display: inline-flex; align-items: center; min-height: var(--control-height); white-space: nowrap; }
.ui-pagination .pagination-unavailable { color: var(--muted); opacity: .6; }
.ui-tabs {
    display: flex;
    align-items: stretch;
    gap: var(--space-1);
    max-width: 100%;
    min-width: 0;
    margin: 0 0 var(--space-4);
    padding: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    border-bottom: 1px solid var(--line);
    scrollbar-width: thin;
}
.ui-tabs > a { display: flex; align-items: center; justify-content: center; flex-shrink: 0; min-height: var(--control-height); padding: 10px 14px; font-size: 13px; color: var(--muted); border-bottom: 3px solid transparent; white-space: nowrap; }
.ui-tabs > a[aria-current=page], .ui-tabs > a[aria-selected=true] { border-bottom-color: var(--accent); color: var(--accent-text); background: var(--accent-soft); }
.ui-tabs > a:hover { background: var(--surface-soft); }
.list-header > .ui-tabs { margin-bottom: 0; border-bottom: 0; }
.ui-tabs.ui-tabs-segmented { width: fit-content; padding: 4px; gap: 4px; border: 1px solid var(--line); border-radius: var(--control-radius); background: var(--surface-soft); }
.ui-tabs-segmented > a { border: 0; border-radius: 6px; }
.ui-tabs-segmented > a[aria-current=page] { background: #fff; box-shadow: 0 1px 4px #18243412; }
.ui-error-summary { outline: none; }
.ui-error-summary:focus-visible { outline: 2px solid var(--accent-focus); outline-offset: 3px; }
.ui-floating { display: inline-block; position: relative; min-width: 0; margin: 0; }
.ui-floating[open] { z-index: var(--layer-menu); }
.ui-floating > .ui-floating-trigger { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 9px 13px; border: 1px solid var(--line); border-radius: var(--control-radius); background: #fff; color: var(--accent-text); font-size: 12px; cursor: pointer; list-style: none; user-select: none; }
.ui-floating-trigger::-webkit-details-marker { display: none; }
.ui-floating > .ui-floating-trigger.button { font-weight: 600; }
.ui-floating > .ui-floating-trigger.button:not(.secondary) { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.ui-floating > .ui-floating-trigger.button:not(.secondary):hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.ui-floating > .ui-floating-trigger.button.secondary { background: #fff; border-color: #cdd8e5; color: #3e516b; }
.ui-floating > .ui-floating-trigger.button.secondary:hover { background: #f0f6fb; border-color: #a8bdcf; }
.ui-floating-trigger .nav-icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; transition: transform .15s; }
.ui-floating[open] > .ui-floating-trigger .nav-icon { transform: rotate(180deg); }
.ui-floating > .ui-floating-panel { position: absolute; top: calc(100% + 6px); left: var(--floating-offset, 0px); width: min(var(--floating-width, 480px), calc(100vw - 32px)); max-height: 65dvh; overflow: auto; overscroll-behavior: contain; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: 0 12px 32px #18243426; box-sizing: border-box; }
.ui-floating[data-floating-side=above] > .ui-floating-panel { top: auto; bottom: calc(100% + 6px); }
.ui-floating-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 12px; background: var(--surface-soft); border-bottom: 1px solid var(--line); }
.ui-floating-heading h3 { min-width: 0; margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.ui-floating-close { display: inline-flex; align-items: center; justify-content: center; width: 44px; min-height: 44px; flex-shrink: 0; padding: 10px; background: transparent; color: var(--muted); border: 0; border-radius: 6px; }
.ui-floating-close svg { width: 18px; height: 18px; }
.ui-floating-close:hover { background: var(--accent-soft); }
.ui-floating-panel > .stack { padding: 16px; margin: 0; min-width: 0; }
.ui-floating-body { display: grid; gap: 14px; padding: 14px 16px; font-size: 13px; }
.ui-floating-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.facts.facts-compact { gap: 12px 16px; }
.ui-floating-section { display: grid; gap: 8px; }
.ui-floating-section h4 { margin: 0; font-size: 12px; }
.ui-floating-notes > summary { display: inline-flex; align-items: center; min-height: 44px; }
.ui-floating-notes > p { margin: 4px 0 0; white-space: normal; overflow-wrap: anywhere; }
.ui-floating-footer { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); background: var(--surface-soft); }
.ui-floating-footer > .button { flex: 1; min-height: 44px; }
.ui-floating[open] > .ui-floating-structured { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.ui-floating-structured > .ui-floating-heading, .ui-floating-structured > .ui-floating-footer { flex-shrink: 0; }
.ui-floating-structured > .ui-floating-body { min-height: 0; overflow: auto; overscroll-behavior: contain; }
@media (max-width: 360px) {
    .ui-pagination { grid-template-columns: minmax(0, 1fr) 88px minmax(0, 1fr); gap: 6px; padding: 10px 6px; font-size: 11px; }
    .ui-tabs > a { padding: 10px; }
}
@media (prefers-reduced-motion: reduce) {
    .ui-tabs > a { scroll-behavior: auto; }
}
@media print {
    .ui-floating { display: none; }
}

/* Opt-in top-layer panels stay visible inside horizontally scrolling timelines. */
.ui-floating[data-floating-top-layer] > .ui-floating-panel,
.ui-floating > .ui-floating-panel.ui-floating-viewport { position: fixed; margin: 0; right: auto; bottom: auto; }

.ui-floating[data-floating-top-layer][open] { z-index: auto; }
.calendar-event-cell { min-width:0; }
.calendar-event { display:block; width:100%; pointer-events:auto; --floating-width:380px; }
.calendar-event-trigger { list-style:none; cursor:pointer; }
.calendar-event-trigger::-webkit-details-marker { display:none; }
.calendar-event-trigger > strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.calendar-event-kind { font-size:10px; align-self:start; }
.calendar-event-trigger > time { font-size:10px; color:var(--muted); }
.calendar-event-trigger.calendar-bar > time { display:none; }
/* Calendar bars keep their compact grid height, including native summary openers. */
.calendar-event-trigger.calendar-bar { min-height:0; }
.calendar-event-trigger.gig-link { display:flex; align-items:center; min-height:44px; }
.calendar-event-trigger.gig-link > strong { white-space:normal; overflow-wrap:anywhere; }
.calendar-event .ui-floating-panel { overflow-wrap:anywhere; }
.calendar-event-info .calendar-info-wide { grid-column:1 / -1; }
.badge.gig-status { gap:5px; max-width:100%; min-height:32px; margin:0; padding:5px 6px; border:1px solid color-mix(in srgb,currentColor 24%,transparent); border-radius:999px; font-size:10px; font-weight:650; line-height:1.25; }
.badge.gig-status::before { content:none; }
.gig-status-symbol { display:inline-flex; align-items:center; justify-content:center; flex:0 0 16px; width:16px; height:16px; border-radius:50%; background:color-mix(in srgb,white 76%,transparent); }
.gig-status-symbol svg { display:block; width:12px; height:12px; }
.gig-status-label { flex:0 0 auto; white-space:nowrap; overflow-wrap:normal; word-break:normal; text-align:left; }
.calendar-event-card { display:block; padding:14px; border:1px solid var(--line); border-left:3px solid var(--gig-type-color,var(--accent)); border-radius:10px; background:var(--paper,#fff); color:var(--ink); overflow-wrap:anywhere; }
.calendar-event-card:hover { border-color:var(--accent-border); background:var(--accent-soft); color:var(--ink); }
.calendar-event-card:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.calendar-event-card-meta { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-bottom:8px; }
.calendar-event-card-meta > span:first-child { color:var(--muted); font-size:11px; }
.calendar-event-card h4 { font-size:15px; line-height:1.4; margin:0 0 6px; }
.calendar-event-card p { font-size:12px; margin:4px 0 0; }
.calendar-event-card .calendar-event-card-time { font-weight:600; margin-top:10px; }

.calendar-mobile-calendar { display:none; }
@media(max-width:767px) {
    .calendar-mobile-calendar { display:block; }
    .calendar-mobile-week-nav { display:grid; grid-template-columns:44px minmax(0,1fr) 44px; align-items:center; gap:8px; padding:12px; background:var(--surface-soft); border-bottom:1px solid var(--line); }
    .calendar-mobile-week-nav .button { padding:8px; min-height:44px; font-size:20px; }
    .calendar-mobile-week-nav > div { text-align:center; }
    .calendar-mobile-week-nav strong { display:block; font-size:17px; }
    .calendar-mobile-week-nav small { font-size:11px; color:var(--muted); }
    .calendar-mobile-week-nav .calendar-mobile-today { display:flex; width:max-content; max-width:100%; margin:6px auto 0; padding:6px 14px; font-size:12px; }
    .calendar-mobile-day-picker { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:3px; padding:10px 8px; border-bottom:1px solid var(--line); }
    .calendar-mobile-day { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; min-width:0; min-height:80px; padding:6px 0; border:1px solid transparent; border-radius:8px; }
    .calendar-mobile-day > span:first-child { font-size:10px; color:var(--muted); }
    .calendar-mobile-day time { font-size:12px; font-weight:650; font-variant-numeric:tabular-nums; white-space:nowrap; }
    .calendar-mobile-day.is-today time { color:var(--accent-text); }
    .calendar-mobile-day[aria-current] { background:var(--accent-soft); border-color:var(--accent); }
    .calendar-mobile-day-count { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 3px; font-size:10px; line-height:1; background:#edf2f7; color:var(--muted); border-radius:999px; }
    .calendar-mobile-day[aria-current] .calendar-mobile-day-count { background:var(--accent); color:#102b3a; }
    .calendar-mobile-day-list { display:grid; gap:10px; min-height:130px; padding:12px; touch-action:pan-y; }
    .calendar-mobile-day-list > header { display:flex; align-items:center; justify-content:space-between; gap:8px; }
    .calendar-mobile-day-list h3 { margin:0; font-size:13px; }
    .calendar-mobile-day-list > header .button { min-height:44px; padding:8px 12px; }
}