/* QuPID design foundation. See docs/DESIGN_PRINCIPLES.md for intent.
   Semantic tokens are shared; each service keeps authority over its content layout. */
:root {
 --qupid-font:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR",sans-serif;
 --qupid-space-1:4px;--qupid-space-2:8px;--qupid-space-3:12px;--qupid-space-4:16px;--qupid-space-6:24px;--qupid-space-8:32px;
 --qupid-radius-control:8px;--qupid-radius-surface:12px;--qupid-control-height:34px;
 --qupid-shadow-overlay:0 12px 36px #18243420,0 2px 6px #1824340a;
 --suite-paper:#fff;--suite-panel:#fff;--suite-soft:#f5f6f8;
 --suite-ink:#202630;--suite-muted:#515d6d;--suite-line:#e4e7ec;--suite-line-strong:#778498;
}
html[data-theme="dark"] {
 --suite-paper:#15171b;--suite-panel:#1b1e23;--suite-soft:#23272d;
 --suite-ink:#eef0f4;--suite-muted:#c1cbd8;--suite-line:#383e47;--suite-line-strong:#8494a9;
 --qupid-shadow-overlay:0 12px 40px #0006,0 2px 6px #0004;
}
html body[data-service]{font-family:var(--qupid-font);text-rendering:optimizeLegibility}
body[data-service] :is(button,input,select,textarea){font-family:inherit}
body[data-service] :is(.button,.input,.secondary-action){border-radius:var(--qupid-radius-control);font-weight:400;font-size:.875rem;line-height:1.45}
body[data-service] .button{min-height:var(--qupid-control-height);padding:7px 12px;box-shadow:none}
body[data-service] .button.primary{font-weight:500}
body[data-service] .input{padding:7px 10px}
body[data-service] :is(.form-help,.helptext,.muted){line-height:1.55}
body[data-service] :is(.card-title,.page-heading h1){font-weight:600;letter-spacing:-.02em}
body[data-service] :is(.card,.workspace-onboarding-card){box-shadow:none}
body[data-service] :is(button,a,input,select,textarea,summary):focus-visible{outline:2px solid var(--suite-action);outline-offset:3px}
body[data-service] :is(button,input,select,textarea):disabled{cursor:not-allowed;opacity:1}
body[data-service] :is(.row-actions,.card-actions,.form-actions,.dialog-actions){gap:var(--qupid-space-2)}
body[data-service] .qupid-service-header{gap:16px}
body[data-service] .qupid-service-header-end{gap:8px}
body[data-service] .qupid-service-header :is(.qupid-profile-link,.qupid-support-link,.service-settings-button){border-color:transparent!important;border-radius:8px!important;background:transparent!important;box-shadow:none!important}
body[data-service] .qupid-service-header :is(.qupid-profile-link,.qupid-support-link,.service-settings-button):hover{background:var(--suite-soft)!important}
body[data-service] .qupid-service-header .qupid-language-switch select{border-color:transparent!important;background:transparent!important;font-size:13px!important;border-radius:8px!important;min-height:34px!important}
body[data-service] .qupid-service-header .service-switcher a{box-shadow:none!important}
body[data-service] .qupid-service-header .workspace-top-search{border-color:transparent!important;border-radius:9px!important}
body[data-service] .qupid-service-header .workspace-top-search:focus-within{outline:2px solid var(--suite-action);outline-offset:0}
body[data-service] :is(.workspace-channel-detail-popover,.workspace-member-menu-popover,.workspace-room-tools-popover,.qupid-layout-options){border:1px solid var(--suite-line);border-radius:12px;box-shadow:var(--qupid-shadow-overlay);background:var(--suite-panel);color:var(--suite-ink)}
body[data-service] :is(.workspace-room-tools-popover,.workspace-member-menu-popover) button{font-size:13px;min-height:34px;border-radius:6px;padding:7px 10px}
@media(pointer:coarse){
 :root{--qupid-control-height:44px}
 body[data-service] :is(.workspace-icon-button,.workspace-rail-button,.workspace-rail-add,.qupid-layout-menu summary){min-width:44px;min-height:44px}
 body[data-service] .qupid-service-header .service-switcher a{min-width:44px!important;min-height:44px!important}
}
@media(prefers-reduced-motion:reduce){
 body[data-service] :is(.button,.workspace-quick-link,.workspace-room-link,.qupid-service-header a){transition:none!important}
}

body[data-service] [hidden]{display:none!important}

/* A filter row may wrap; it must never cover the month navigation. */
@media(min-width:48rem){
 body[data-service="calendar"] .calendar-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
 body[data-service="calendar"] .calendar-toolbar .month-nav{flex:0 0 auto;max-width:100%}
 body[data-service="calendar"] .calendar-toolbar .month-nav h2{white-space:nowrap}
 body[data-service="calendar"] .calendar-toolbar .filters{flex:1 1 38rem;flex-wrap:wrap;justify-content:flex-start;gap:8px}
}

/* Bounded labels shrink inside flex/grid tracks. Full text stays in the DOM.
   Body copy, editors and form input values retain their normal reading behavior. */
body[data-service] :is(.workspace-room-heading-copy,.workspace-room-main,.workspace-library-copy,.workspace-home-row-main,.workspace-member-copy,.project-main-link,.filehub-item-name,.filehub-path){min-width:0;max-width:100%}
body[data-service] :is(.workspace-channel-name,.workspace-project-title,.workspace-room-title,.workspace-library-copy>strong,.workspace-home-row-main>strong,.workspace-home-row-main>span,.project-main-link>strong,.project-main-link>span,.filehub-item-name>strong,.filehub-item-name>small,.filehub-path>a,.filehub-path>strong,.filehub-quick-preview-bar>strong){display:block;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;overflow-wrap:normal}
body[data-service] .workspace-channel-details{min-width:0;max-width:100%}
body[data-service] .workspace-channel-details>summary{display:flex;min-width:0;max-width:100%;align-items:center}
body[data-service] .workspace-channel-details .workspace-channel-name{flex:1 1 auto}
body[data-service] :is(.workspace-room-mark,.workspace-channel-chevron,.workspace-unread,.filehub-item-icon){flex-shrink:0}
body[data-service] :is(.project-row-actions,.filehub-item-actions){flex-shrink:0}
body[data-service] select:not([multiple]){min-width:0;max-width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
body[data-service] .filehub-quick-preview-bar{min-width:0}
body[data-service] .filehub-quick-preview-bar>strong{flex:1}
body[data-service] .filehub-quick-preview-bar>button{flex-shrink:0}

.reservation-category-chip,.equipment-tag-chip{background:var(--surface-2,#eef2f6);color:var(--text,#25324a);border-color:var(--line)}
html[data-theme="dark"] .reservation-category-chip,html[data-theme="dark"] .equipment-tag-chip,body[data-theme="dark"] .reservation-category-chip,body[data-theme="dark"] .equipment-tag-chip{background:#e5e7eb;color:#374151;border-color:#9ca3af}
html[data-theme="dark"] select.input,body[data-theme="dark"] select.input{background-color:#1f2937;color:#edf2f8;color-scheme:dark}
html[data-theme="dark"] select.input option,body[data-theme="dark"] select.input option{background:#1f2937;color:#edf2f8}
.equipment-resource-row{display:flex;align-items:center;gap:10px;padding:14px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.equipment-resource-row>div:first-child{flex:1 1 240px;min-width:0;overflow-wrap:anywhere}
.equipment-resource-row p{margin:.35rem 0;font-size:.875rem}
.equipment-resource-row>a{flex:0 0 auto}
.equipment-contribution-add{margin-top:16px;border:1px dashed var(--line);border-radius:10px;padding:12px 16px}
.equipment-contribution-add>summary{font-weight:600;cursor:pointer}
.equipment-contribution-add .stack-form{padding-top:16px;max-width:680px}
.equipment-contribution-editor{max-width:760px;margin:24px auto;padding:24px}
.equipment-contribution-editor input,.equipment-contribution-editor textarea{box-sizing:border-box;width:100%}
.equipment-remove-confirm{margin-top:24px;padding-top:16px;border-top:1px solid var(--line)}
.equipment-remove-confirm>summary{cursor:pointer;color:var(--danger,#b42318)}

/* Reservation details and editing share the new-booking dialog geometry. */
.reservation-detail-dialog { width:min(720px,calc(100vw - 32px)); max-height:90dvh; padding:0; }
.reservation-detail-dialog > .dialog-heading { position:sticky; top:0; z-index:2; padding:16px 24px; margin:0; background:var(--surface,#fff); border-bottom:1px solid var(--border,#d9dee7); }
.reservation-detail-dialog > .dialog-heading h2 { font-size:1.2rem; margin:0; }
.reservation-dialog-content { padding:20px 24px; min-width:0; }
.reservation-dialog-content > .page-heading { display:none; }
.reservation-dialog-content > .card { border:0; box-shadow:none; margin:0; padding:0; background:transparent; }
.reservation-dialog-content .detail-list > div { min-width:0; }
.reservation-dialog-content .detail-list dd { overflow-wrap:anywhere; }
.reservation-dialog-content .reservation-cancel-section { margin-top:24px; border-top:1px solid var(--border,#d9dee7); padding-top:16px; }
.reservation-dialog-content .reservation-cancel-section summary { cursor:pointer; font-weight:600; }
.reservation-dialog-status { padding:12px 24px; margin:0; }
html[data-theme="dark"] .reservation-detail-dialog > .dialog-heading { background:#1f2937; color:#edf2f8; }
@media(max-width:600px) { .reservation-detail-dialog { width:calc(100vw - 16px); max-height:94dvh; } .reservation-dialog-content { padding:16px; } .reservation-dialog-content .two-col { grid-template-columns:1fr; } }

.equipment-photo-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:160px;padding:24px;border:2px dashed var(--line-strong,#8793a5);border-radius:12px;background:var(--surface-2);color:var(--text);text-align:center;cursor:pointer;position:relative}
.equipment-photo-drop:hover,.equipment-photo-drop:focus-visible,.equipment-photo-drop.drag-over{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--surface));outline-offset:3px}
.equipment-photo-drop-icon{font-size:28px;font-weight:400}.equipment-photo-drop small{color:var(--muted);font-weight:400}
[data-equipment-photo-preview] img{display:block;max-width:100%;max-height:240px;object-fit:contain;border-radius:8px}
[data-equipment-photo-selection]{overflow-wrap:anywhere}

/* Compact secondary actions in equipment details, including the dialog. */
.equipment-detail-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:6px;width:auto;flex:0 0 auto}
body[data-service] .equipment-detail-actions .button{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:auto;min-width:0;min-height:32px;padding:5px 10px;font-size:.8125rem;line-height:1.3;font-weight:400;white-space:nowrap}

.qupid-pdf-preview{width:min(1050px,96vw);height:92dvh;max-height:94dvh;padding:0;border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:12px}
.qupid-pdf-preview[open]{display:flex;flex-direction:column}.qupid-pdf-preview::backdrop{background:#0007}
.qupid-pdf-preview header,.qupid-pdf-preview nav{display:flex;gap:10px;align-items:center;padding:10px 16px;flex-shrink:0;flex-wrap:wrap}
.qupid-pdf-preview header span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qupid-pdf-preview button{font:inherit;font-weight:400;color:inherit;background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:5px 10px;cursor:pointer}
.qupid-pdf-preview [data-pdf-stage]{flex:1;min-height:0;overflow:auto;background:#45494f;padding:12px;text-align:center}.qupid-pdf-preview canvas{display:block;margin:auto;max-width:none}.qupid-pdf-preview [role=status]{padding:0 16px}

.equipment-comments{padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.equipment-comments h2{font-size:1rem;font-weight:400}.equipment-comments textarea{width:100%;resize:vertical;min-height:64px}.equipment-comment-compose-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0 16px;font-size:.8125rem}.equipment-comment{padding:12px 0;border-top:1px solid var(--line);overflow-wrap:anywhere}.equipment-comment header{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;font-size:.8125rem;margin-bottom:6px;font-weight:400}.equipment-comment time{color:var(--muted)}.equipment-comment header a{margin-left:auto;font-size:.75rem}.equipment-comment>div{line-height:1.5;font-weight:400}

.qupid-pdf-preview [data-pdf-reading]{font:inherit;font-weight:400;color:inherit;background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:5px 8px;max-width:100%}
.qupid-pdf-preview [data-pdf-stage]{position:relative;overflow-anchor:none}
.qupid-pdf-preview .qupid-pdf-page{position:relative;margin:0 auto 16px;background:white;color:#444;flex-shrink:0}
.qupid-pdf-preview .qupid-pdf-page:last-child{margin-bottom:0}

/* Dialogs are opaque even where equipment-only surface aliases are unavailable. */
:root{--qupid-overlay-surface:#fff;--qupid-overlay-text:#182230}
html[data-theme="dark"],body[data-theme="dark"]{--qupid-overlay-surface:#24272b;--qupid-overlay-text:#eef1f5}
body[data-service]{--surface:var(--panel,var(--qupid-overlay-surface));--surface-2:var(--panel-soft,var(--qupid-overlay-surface))}
dialog{background-color:var(--qupid-overlay-surface,#fff)!important;color:var(--text,var(--qupid-overlay-text,#182230));opacity:1;isolation:isolate}
dialog[open]{pointer-events:auto!important;overscroll-behavior:contain}
dialog::backdrop{background:rgba(15,23,42,.52);pointer-events:auto!important}
html.qupid-modal-open,html.qupid-modal-open body{overflow:hidden!important;overscroll-behavior:none}

.qupid-pdf-window{position:fixed;inset:auto;margin:0;width:min(680px,calc(100vw - 16px));height:min(740px,calc(100dvh - 90px));min-width:280px;min-height:220px;max-width:calc(100vw - 8px);max-height:calc(100dvh - 8px);overflow:hidden;box-sizing:border-box;background:var(--qupid-overlay-surface,#fff)!important;pointer-events:auto;box-shadow:0 14px 44px #0005}
.qupid-pdf-window[open]{display:flex;flex-direction:column}.qupid-pdf-window[hidden]{display:none}
.qupid-pdf-window>header{cursor:move;touch-action:none;user-select:none;background:var(--panel-soft,var(--qupid-overlay-surface,#fff))}
.qupid-pdf-window-grip{position:absolute;right:0;bottom:0;width:24px;height:24px;cursor:nwse-resize;touch-action:none;z-index:2;background:linear-gradient(135deg,transparent 45%,#8993a7 46%,#8993a7 52%,transparent 53%)}

.qupid-pdf-window::backdrop{background:transparent;pointer-events:none}

/* Compact event editing, including the dashboard's fetched modal form. */
.calendar-event-form .calendar-event-mode { display:flex; align-items:center; justify-content:flex-end; }
.calendar-event-form .calendar-event-all-day { min-height:32px; padding:5px 15px; border-radius:999px; font-weight:400; }
.calendar-event-form .calendar-event-all-day[aria-pressed="true"] { background:var(--accent-soft,#e7eef9); border-color:var(--accent,#5272aa); color:var(--text,#243247); }
.calendar-event-form .calendar-event-pair { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; }
.calendar-event-form .calendar-event-pair[hidden] { display:none; }
.calendar-event-form .calendar-event-field { display:grid; min-width:0; gap:6px; }
.calendar-event-form .calendar-event-field label { font-weight:400; }
.calendar-event-form .calendar-event-field .input { width:100%; min-width:0; box-sizing:border-box; }
.calendar-event-form input[type="date"],.calendar-event-form input[type="time"] { color:var(--text,#243247); background:var(--surface,#fff); }
.calendar-event-form textarea { min-height:88px; resize:vertical; }
html[data-theme="dark"] .calendar-event-form .calendar-event-all-day[aria-pressed="true"] { background:color-mix(in srgb,var(--accent,#7395cf) 25%,#1f2937); color:#edf2f8; }
html[data-theme="dark"] .calendar-event-form input[type="time"] { background:#111827; color:#edf2f8; color-scheme:dark; }

/* Date help spans both inputs; computed range stays with its start date. */
#reservationDialog .reservation-date-fields { align-items:start; }
#reservationDialog .reservation-start-field { display:grid; min-width:0; gap:6px; }
#reservationDialog .reservation-start-field .derived-reservation-range { margin:0; font-weight:400; line-height:1.4; }
#reservationDialog .reservation-date-help { margin:0; font-weight:400; line-height:1.5; }

/* Interface text stays readable in both appearances, including inactive controls.
   Identity colors inside reservation bars and authored document colors are data. */
html body[data-service] {
 --surface:var(--suite-panel);--surface-2:var(--suite-soft);
 --text-subtle:var(--suite-muted);--placeholder:var(--suite-muted);
}
html body[data-service] :is(.muted,.form-help,.helptext,.empty-state,.workspace-empty-hint) {color:var(--suite-muted)}
html body[data-service] :is(input,textarea)::placeholder {color:var(--suite-muted);opacity:1}
html body[data-service] :is(input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]),select,textarea):not(.monaco-editor *) {border-color:var(--suite-line-strong)}
html body[data-service] :is(button,input,select,textarea):disabled:not(.monaco-editor *) {
 opacity:1;color:var(--suite-muted);background-color:var(--suite-soft);border-color:var(--suite-line-strong);border-style:dashed;
}
html body[data-service] :is(.button,.secondary-action)[aria-disabled=true] {opacity:1;color:var(--suite-muted);background:var(--suite-soft);border-style:dashed}
html body[data-service] :is(button,a,input,select,textarea,summary):focus-visible {outline-color:var(--suite-action)}

/* Fixed-color legacy announcement and holiday labels need semantic pairing. */
html body[data-service="calendar"] .compact-announcement p {color:var(--suite-muted)}
html body[data-service="calendar"] .compact-announcement.important strong {color:var(--suite-danger)}
html[data-theme="dark"] body[data-service="calendar"] .calendar-day.holiday .day-number {color:var(--suite-danger)}
html body[data-service="calendar"] .google-event-switch[data-active="1"] .google-event-switch-box {color:var(--suite-on-action);background:var(--suite-action);border-color:var(--suite-action)}

html body[data-service] .workspace-menu-danger{color:var(--suite-danger)}

html body[data-service]:not(.code-page) :is(input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]),select,textarea):not(.monaco-editor *) {background-color:var(--suite-panel);color:var(--suite-ink);border-color:var(--suite-line-strong)}

html body .diagnostic-button.error{color:#fff;background:#a52a38}