/* Visual sources: Quely HTML Frames/Calendar-2026-10-06.html and orbit control.html.
 * Native tokens and surfaces. All work data and accounts are illustrative. */
.qcal-host {
  --qcal-fg:#111827; --qcal-muted:#4b5563; --qcal-border:#e5e7eb;
  --qcal-surface:#fff; --qcal-soft:#f9fafb; --qcal-purple:#5c28a4;
  --qcal-purple-soft:#e3d6f5; --qcal-purple-text:#532494;
  font-family:Inter,ui-sans-serif,system-ui,sans-serif;
  font-size:13px; color:var(--qcal-fg); line-height:1.4;
  width:100%; min-width:0; container-type:inline-size; container-name:qcal-ui;
}
.qcal-host *, .qcal-host *::before, .qcal-host *::after {box-sizing:border-box;}
.qcal-host svg {width:18px;height:18px;flex:none;display:inline-block;vertical-align:middle;}
.qcal-host button, .qcal-host select {font:inherit;color:inherit;}
.qcal-host button {cursor:pointer;}
.qcal-host button:focus-visible, .qcal-host select:focus-visible {outline:2px solid var(--qcal-purple);outline-offset:3px;}
.qcal-host ::selection {background:var(--qcal-purple-soft);color:var(--qcal-fg);}
.qcal-host .qcal-sr {position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}
.qcal-calendar {background:var(--qcal-surface);border:0;border-radius:0;overflow:hidden;}
.qcal-calendar-heading {display:flex;align-items:center;gap:10px;padding:17px 18px 12px;}
.qcal-calendar-heading strong {font-size:17px;font-weight:650;}
.qcal-title-icon {width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:var(--qcal-purple-soft);color:var(--qcal-purple);}
.qcal-heading-meta {color:var(--qcal-muted);font-size:12px;margin-top:2px;}
.qcal-heading-end {margin-left:auto;display:flex;align-items:center;gap:6px;color:var(--qcal-muted);font-size:12px;}
.qcal-calendar-tools {display:flex;align-items:center;gap:8px;padding:6px 18px 15px;}
.qcal-button {display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:34px;background:white;border:1px solid var(--qcal-border);border-radius:8px;padding:6px 12px;font-size:12px;}
.qcal-button:hover {background:var(--qcal-soft);}
.qcal-icon-button {width:32px;padding:5px;border:0;}
.qcal-icon-button span {position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);}
.qcal-arrows {display:flex;gap:0;}
.qcal-prev svg {transform:rotate(180deg);}
.qcal-date-range {display:flex;align-items:baseline;gap:7px;white-space:nowrap;}
.qcal-date-range b {font-size:14px;font-weight:600;}
.qcal-date-range span {font-size:12px;color:var(--qcal-muted);}
.qcal-view-label {position:relative;display:block;margin-left:auto;}
.qcal-view {appearance:none;border:1px solid var(--qcal-border);border-radius:8px;padding:8px 30px 8px 11px;background:white;min-height:34px;cursor:pointer;}
.qcal-view-label svg {pointer-events:none;position:absolute;right:8px;top:10px;width:14px;height:14px;}
.qcal-calendar-content {display:flex;border-top:1px solid var(--qcal-border);}
.qcal-calendar-rail {width:168px;padding:16px 12px;background:var(--qcal-soft);border-right:1px solid var(--qcal-border);flex:none;}
.qcal-mini-heading {font-weight:600;font-size:13px;margin-bottom:12px;}
.qcal-mini-grid {display:grid;grid-template-columns:repeat(7,1fr);gap:4px 0;text-align:center;font-size:12px;}
.qcal-mini-grid b {font-weight:500;color:var(--qcal-muted);padding-bottom:6px;}
.qcal-date {height:22px;display:flex;align-items:center;justify-content:center;}
.qcal-date-current {background:var(--qcal-purple);color:white;border-radius:50%;}
.qcal-date-muted {color:var(--qcal-muted);opacity:.8;}
.qcal-rail-label {font-size:12px;font-weight:600;margin-top:24px;margin-bottom:8px;}
.qcal-rail-row {display:flex;align-items:center;gap:7px;font-size:12px;color:var(--qcal-muted);}
.qcal-rail-row svg {width:15px;height:15px;color:var(--qcal-purple);}
.qcal-week {flex:1;min-width:0;}
.qcal-days {display:grid;grid-template-columns:48px repeat(7,minmax(0,1fr));border-bottom:1px solid var(--qcal-border);align-items:stretch;}
.qcal-zone {font-size:12px;color:var(--qcal-muted);align-self:end;text-align:center;padding-bottom:10px;}
.qcal-day {display:flex;flex-direction:column;align-items:center;gap:4px;padding:9px 2px 10px;background:white;border:0;min-width:0;}
.qcal-day:hover {background:var(--qcal-soft);}
.qcal-day>span {color:var(--qcal-muted);font-size:12px;}
.qcal-day b {display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;font-size:15px;font-weight:600;}
.qcal-day .qcal-current-day {color:white;background:var(--qcal-purple);}
.qcal-day small {color:var(--qcal-muted);font-size:12px;white-space:nowrap;}
.qcal-day-active {background:#faf7fd;}
.qcal-time-grid {--qcal-hour:48px;display:flex;position:relative;height:calc(8 * var(--qcal-hour));}
.qcal-hours {width:48px;flex:none;display:flex;flex-direction:column;background:white;}
.qcal-hours span {height:var(--qcal-hour);flex:none;font-size:12px;color:var(--qcal-muted);padding:8px 5px;text-align:right;white-space:nowrap;}
.qcal-event-grid {display:grid;grid-template-columns:repeat(7,minmax(0,1fr));position:relative;flex:1;min-width:0;}
.qcal-day-column {position:relative;border-left:1px solid var(--qcal-border);background:repeating-linear-gradient(to bottom,transparent 0,transparent calc(var(--qcal-hour) - 1px),#eef0f3 calc(var(--qcal-hour) - 1px),#eef0f3 var(--qcal-hour));}
.qcal-event {position:absolute;top:calc(var(--qcal-start) * var(--qcal-hour) + 4px);height:calc(var(--qcal-duration) * var(--qcal-hour) - 6px);left:3px;right:3px;padding:5px;border:0;border-radius:5px;display:flex;flex-direction:column;align-items:flex-start;text-align:left;overflow:hidden;transition:background .25s,box-shadow .25s;}
.qcal-event strong {font-weight:550;font-size:12px;line-height:1.25;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;flex:none;}
.qcal-event span {font-size:12px;line-height:1.1;margin-top:3px;flex:none;}
.qcal-event svg {position:absolute;right:5px;bottom:5px;width:13px;height:13px;}
.qcal-event-purple {background:#ede5f7;color:#532494;}
.qcal-event-blue {background:#e5ecfc;color:#1e4291;}
.qcal-event-selected {box-shadow:inset 0 0 0 1.5px #5c28a4;background:#e3d6f5;}
.qcal-now {position:absolute;left:0;right:0;top:calc(3.7 * var(--qcal-hour));height:1px;background:#dc2626;pointer-events:none;}
.qcal-now>span {position:absolute;left:-3px;top:-3px;width:7px;height:7px;border-radius:50%;background:#dc2626;}
.qcal-selected-meeting {display:flex;align-items:center;gap:10px;min-height:62px;padding:12px 16px;border-top:1px solid var(--qcal-border);background:white;}
.qcal-selected-meeting>span:first-child {color:var(--qcal-purple);}
.qcal-selected-meeting strong {font-size:13px;font-weight:600;}
.qcal-selected-meeting small {display:block;font-size:12px;color:var(--qcal-muted);margin-top:2px;}
.qcal-selected-tag {font-size:12px;color:var(--qcal-purple-text);margin-left:auto;white-space:nowrap;}
.qcal-day-view .qcal-days {grid-template-columns:48px 1fr;}
.qcal-day-view .qcal-day:not(.qcal-day-active), .qcal-day-view .qcal-day-column:not(.qcal-column-active) {display:none;}
.qcal-day-view .qcal-event-grid {grid-template-columns:1fr;}
.qcal-day-view .qcal-event {right:18%;padding:8px 12px;}
.qcal-day-view .qcal-event strong {font-size:13px;-webkit-line-clamp:1;}
.qcal-calendar-hero .qcal-calendar-rail {display:none;}
.qcal-calendar-hero .qcal-time-grid {--qcal-hour:52px;}
.qcal-calendar-hero .qcal-selected-meeting {display:none;}

.qcal-settings {overflow:hidden;background:white;border-radius:14px;border:0;}
.qcal-settings-heading {display:flex;align-items:center;gap:10px;padding:15px 18px;border-bottom:1px solid var(--qcal-border);background:var(--qcal-soft);}
.qcal-settings-heading strong {font-size:15px;font-weight:600;}
.qcal-settings-heading svg {color:var(--qcal-muted);}
.qcal-settings-layout {display:flex;}
.qcal-settings-nav {width:178px;flex:none;padding:12px 10px;border-right:1px solid var(--qcal-border);background:var(--qcal-soft);}
.qcal-settings-nav-item {display:flex;align-items:center;gap:9px;padding:10px 9px;border-radius:7px;font-size:12px;color:var(--qcal-muted);}
.qcal-settings-nav-item svg {width:15px;height:15px;}
.qcal-settings-nav-active {background:var(--qcal-purple-soft);color:var(--qcal-purple-text);font-weight:600;}
.qcal-settings-main {padding:22px 24px 24px;min-width:0;flex:1;}
.qcal-settings-main h3 {font-size:17px;font-weight:600;margin:0 0 8px;}
.qcal-setting-intro, .qcal-follow-help {font-size:12px;color:var(--qcal-muted);line-height:1.55;margin:0 0 15px;}
.qcal-workspace-note {display:flex;align-items:center;gap:9px;padding:10px 0 16px;color:var(--qcal-purple);}
.qcal-workspace-note p {margin:0;font-size:12px;color:var(--qcal-muted);line-height:1.55;}
.qcal-workspace-note strong {color:var(--qcal-fg);font-weight:600;}
.qcal-setting-row {display:flex;align-items:center;gap:12px;background:#fbf8fe;border:1px solid #ded0ef;border-radius:9px;padding:12px;margin-top:9px;}
.qcal-setting-copy {min-width:0;flex:1;}
.qcal-setting-copy strong {font-size:12.5px;font-weight:550;overflow-wrap:anywhere;}
.qcal-setting-copy p {font-size:12px;line-height:1.45;color:var(--qcal-muted);margin:4px 0 0;}
.qcal-switch {width:44px;height:44px;position:relative;flex:none;background:transparent;border:0;padding:0;}
.qcal-switch::before {content:'';position:absolute;left:4px;top:11px;width:36px;height:22px;border-radius:20px;background:#c4c9d0;transition:background .22s;}
.qcal-switch>span {position:absolute;left:7px;top:14px;width:16px;height:16px;border-radius:50%;background:white;transition:transform .22s;box-shadow:0 1px 2px rgba(3,7,18,.2);}
.qcal-switch[aria-checked="true"]::before {background:var(--qcal-purple);}
.qcal-switch[aria-checked="true"]>span {transform:translateX(14px);}
.qcal-settings-main h4 {font-size:13px;font-weight:600;margin:24px 0 6px;}
.qcal-account-row {background:white;border-color:var(--qcal-border);}
.qcal-account-icon {width:30px;height:30px;border-radius:8px;background:#f3f4f6;display:flex;align-items:center;justify-content:center;color:var(--qcal-purple);flex:none;}
.qcal-account-icon svg {width:16px;height:16px;}
.qcal-settings-footer {display:flex;gap:12px;justify-content:space-between;padding:14px 18px;font-size:12px;color:var(--qcal-muted);background:var(--qcal-soft);border-top:1px solid var(--qcal-border);}
.qcal-fixture-note {text-align:right;}

@container qcal-ui (max-width:760px) {
  .qcal-calendar-rail {display:none;}
  .qcal-days {grid-template-columns:44px repeat(5,minmax(0,1fr));}
  .qcal-event-grid {grid-template-columns:repeat(5,minmax(0,1fr));}
  .qcal-day-5,.qcal-day-6,.qcal-column-5,.qcal-column-6 {display:none;}
  .qcal-day-view .qcal-day-active,.qcal-day-view .qcal-column-active {display:flex;}
  .qcal-time-grid {--qcal-hour:54px;}
  .qcal-hours {width:44px;}
  .qcal-settings-nav {width:142px;}
  .qcal-settings-main {padding:18px;}
}
@container qcal-ui (max-width:560px) {
  .qcal-calendar-heading {padding:14px 12px 8px;}
  .qcal-calendar-tools {padding:6px 12px 12px;gap:4px;flex-wrap:wrap;}
  .qcal-heading-end {display:none;}
  .qcal-date-range {gap:5px;}
  .qcal-date-range b {font-size:13px;}
  .qcal-date-range span {display:none;}
  .qcal-button {padding:7px 9px;}
  .qcal-arrows .qcal-button {width:26px;}
  .qcal-days {grid-template-columns:40px repeat(3,minmax(0,1fr));}
  .qcal-event-grid {grid-template-columns:repeat(3,minmax(0,1fr));}
  .qcal-day-0,.qcal-day-1,.qcal-column-0,.qcal-column-1 {display:none;}
  .qcal-day-view .qcal-day-active,.qcal-day-view .qcal-column-active {display:flex;}
  .qcal-hours {width:40px;}
  .qcal-time-grid {--qcal-hour:60px;}
  .qcal-calendar-hero .qcal-time-grid {--qcal-hour:52px;}
  .qcal-event {padding:6px;}
  .qcal-selected-tag {display:none;}
  .qcal-settings-nav {display:none;}
  .qcal-settings-main {padding:18px 14px;}
  .qcal-setting-row {padding:10px;gap:8px;}
  .qcal-settings-footer {padding:12px 14px;}
}
@media (prefers-reduced-motion:reduce) {
  .qcal-host *, .qcal-host *::before,.qcal-host *::after {transition:none!important;}
}

/* Calendar hero: one editorial crop, followed by a native meeting fragment.
   Source: Calendar-2026-10-06.html. Work details are illustrative. */
.qcal-scene {position:relative;height:560px;isolation:isolate;overflow:visible;--qcal-arrive:cubic-bezier(.16,1,.3,1);}
.qcal-slice {position:absolute;inset:0 28px 0 0;background:#fff;border:1px solid var(--cal-ui-line,#b8a5cc);overflow:hidden;border-radius:12px 12px 0 0;mask-image:linear-gradient(#000 0%,#000 69%,transparent 100%);}
.qcal-slice-head {display:flex;align-items:center;gap:18px;padding:18px 20px;border-bottom:1px solid #e5e7eb;white-space:nowrap;}
.qcal-slice-title {display:flex;align-items:center;gap:9px;}
.qcal-slice-title svg {width:19px;height:19px;color:#5c28a4;}
.qcal-slice-title strong {font-size:17px;font-weight:600;letter-spacing:-.02em;}
.qcal-slice-range {font-size:13px;color:#4b5563;margin-left:auto;font-weight:500;}
.qcal-slice-view {display:flex;align-items:center;gap:7px;font-size:12px;border:1px solid #e5e7eb;border-radius:7px;padding:5px 9px;}
.qcal-slice-view svg {width:13px;height:13px;}
.qcal-slice-days {display:grid;grid-template-columns:44px repeat(3,minmax(0,1fr));border-bottom:1px solid #e5e7eb;padding-top:9px;padding-bottom:10px;}
.qcal-slice-zone {font-size:11px;color:#4b5563;align-self:end;text-align:center;padding-bottom:6px;}
.qcal-slice-day {display:flex;align-items:center;justify-content:center;gap:9px;font-size:12px;color:#4b5563;}
.qcal-slice-day b {display:flex;align-items:center;justify-content:center;border-radius:50%;width:29px;height:29px;font-size:14px;font-weight:600;color:#111827;}
.qcal-slice-day .qcal-slice-today {background:#5c28a4;color:#fff;}
.qcal-slice-grid {--qcal-slot:65px;display:flex;height:calc(var(--qcal-slot)*6);}
.qcal-slice-hours {width:44px;flex:none;display:flex;flex-direction:column;}
.qcal-slice-hours span {height:var(--qcal-slot);flex:none;padding-top:8px;text-align:center;font-size:11px;color:#4b5563;font-variant-numeric:tabular-nums;}
.qcal-slice-columns {flex:1;min-width:0;position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));}
.qcal-slice-column {position:relative;border-left:1px solid #e5e7eb;background:repeating-linear-gradient(to bottom,transparent 0,transparent calc(var(--qcal-slot) - 1px),#edf0f3 calc(var(--qcal-slot) - 1px),#edf0f3 var(--qcal-slot));}
.qcal-tile {position:absolute;top:calc(var(--start)*var(--qcal-slot));height:calc(var(--length)*var(--qcal-slot));left:5px;right:5px;display:flex;flex-direction:column;align-items:flex-start;padding:11px 10px;text-align:left;border:0;border-radius:6px;overflow:hidden;transition:background .2s,box-shadow .2s,filter .3s;}
.qcal-tile strong {display:block;font-size:13px;line-height:1.3;font-weight:550;letter-spacing:-.01em;max-width:100%;}
.qcal-tile span {display:block;font-size:12px;line-height:1.3;margin-top:5px;}
.qcal-tile svg {position:absolute;bottom:8px;right:8px;width:13px;height:13px;}
.qcal-tile-purple {background:#ede5f7;color:#532494;}
.qcal-tile-blue {background:#e5ecfc;color:#1e4291;}
.qcal-tile:hover {filter:brightness(.97);}
.qcal-tile[aria-pressed="true"] {background:#e3d6f5;box-shadow:inset 0 0 0 1.5px #5c28a4;}
.qcal-slice-now {position:absolute;left:0;right:0;top:calc(3.75*var(--qcal-slot));height:1px;background:#dc2626;}
.qcal-slice-now i {position:absolute;left:-3px;top:-3px;width:7px;height:7px;background:#dc2626;border-radius:50%;}
.qcal-meeting-fragment {position:absolute;z-index:3;bottom:10px;right:0;width:min(360px,71%);padding:21px 23px 0;background:#fff;border:1px solid var(--cal-ui-line,#b8a5cc);border-radius:12px;box-shadow:none;transform-origin:30% 0;}
.qcal-fragment-heading {display:flex;gap:12px;align-items:center;margin-bottom:19px;}
.qcal-fragment-calendar {width:37px;height:37px;display:flex;align-items:center;justify-content:center;flex:none;border-radius:9px;background:#f1e9fb;color:#5c28a4;}
.qcal-fragment-date {font-size:11px;color:#4b5563;}
.qcal-fragment-heading h3 {font:600 17px/1.2 Inter,ui-sans-serif,system-ui,sans-serif!important;letter-spacing:-.025em!important;margin:4px 0 0!important;color:#111827;}
.qcal-fragment-row {display:flex;align-items:center;gap:11px;margin-bottom:11px;font-size:12px;color:#374151;}
.qcal-fragment-row>svg {width:15px;height:15px;color:#4b5563;}
.qcal-fragment-row small {font-size:11px;color:#4b5563;margin-left:auto;}
.qcal-fragment-meet svg {color:#276a40;}
.qcal-fragment-people {display:flex;align-items:center;margin:19px 0 21px;font-size:12px;color:#4b5563;}
.qcal-person {display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;border:2px solid white;font-size:9px;font-weight:600;flex:none;}
.qcal-person-maya {background:#eadff8;color:#532494;}
.qcal-person-dev {background:#deebf5;color:#1e4291;margin-left:-7px;margin-right:9px;}
.qcal-fragment-work {display:flex;align-items:center;gap:11px;margin-inline:-23px;padding:14px 23px;background:#f9fafb;border-top:1px solid #e5e7eb;border-radius:0 0 12px 12px;color:#5c28a4;}
.qcal-fragment-work>svg {width:16px;height:16px;}
.qcal-fragment-work>svg:last-child {margin-left:auto;width:13px;height:13px;}
.qcal-fragment-work span {display:block;font-size:10px;color:#4b5563;margin-bottom:4px;}
.qcal-fragment-work strong {font-size:12px;line-height:1.3;font-weight:600;display:block;}
/* A selected event moves into the native meeting heading. The work row then
   resolves inside the same fragment. Geometry is measured once per resize. */
.qcal-event-transfer {position:absolute;z-index:4;pointer-events:none;opacity:0;padding:11px 10px;border-radius:6px;color:#532494;overflow:hidden;}
.qcal-event-transfer strong {display:block;font:550 13px/1.3 Inter,ui-sans-serif,system-ui,sans-serif;letter-spacing:-.01em;}
.qcal-event-transfer span {display:block;font-size:12px;line-height:1.3;margin-top:5px;}
.qcal-scene[data-motion-step="settled"] .qcal-event-transfer {display:none;}
@container qcal-ui (max-width:520px) {
 .qcal-scene {height:530px;}
 .qcal-slice {right:13px;}
 .qcal-slice-head {padding:16px 13px;gap:10px;}
 .qcal-slice-range {font-size:12px;}
 .qcal-slice-view {display:none;}
 .qcal-tile {padding:9px 7px;}
 .qcal-event-transfer {padding:9px 7px;}
 .qcal-event-transfer strong {font-size:12px;}
 .qcal-tile strong {font-size:12px;}
 .qcal-meeting-fragment {width:min(345px,86%);padding:19px 20px 0;bottom:0;}
 .qcal-fragment-work {margin-inline:-20px;padding-inline:20px;}
}
@container qcal-ui (max-width:390px) {
 .qcal-scene {height:520px;}
 .qcal-slice {right:0;}
 .qcal-slice-days {grid-template-columns:36px repeat(2,minmax(0,1fr));}
 .qcal-slice-column-0,.qcal-slice-day-0 {display:none;}
 .qcal-slice-columns {grid-template-columns:repeat(2,minmax(0,1fr));}
 .qcal-slice-hours {width:36px;}
 .qcal-slice-grid {--qcal-slot:62px;}
 .qcal-slice-days {padding-block:8px;}
 .qcal-slice-title strong {font-size:15px;}
 .qcal-slice-head {gap:7px;}
 .qcal-slice-title {gap:7px;}
 .qcal-slice-range {font-size:11px;}
 .qcal-slice-zone,.qcal-slice-hours span {font-size:10px;}
 .qcal-meeting-fragment {width:calc(100% - 15px);padding:17px 17px 0;}
 .qcal-fragment-heading {gap:10px;margin-bottom:15px;}
 .qcal-fragment-heading h3 {font-size:16px!important;}
 .qcal-fragment-people {margin:17px 0 18px;}
 .qcal-fragment-work {margin-inline:-17px;padding-inline:17px;}
}
@media(prefers-reduced-motion:reduce) {
 .qcal-scene .qcal-slice,.qcal-scene .qcal-tile,.qcal-scene .qcal-meeting-fragment,.qcal-scene .qcal-fragment-work,.qcal-scene .qcal-fragment-heading {animation:none!important;transform:none!important;clip-path:none!important;opacity:1!important;}
 .qcal-event-transfer {display:none;}
}

.qcal-person{object-fit:cover}