/* Qiri site-theme plugin / Studio calendar.
   UI/UX Pro Max: separate content and chrome; readable selected states.
   Apple Design: restrained material, immediate press feedback, optical type.
   Work-card dimensions, contents and interactions stay upstream; date surfaces form one compact grid. */
html[data-site-theme=studio][data-theme] .app-shell {
  --bg: #e8eaee;
  --surface: #ffffff;
  --surface-soft: #f1f2f5;
  --surface-raised: #f7f8fa;
  --panel: #ffffff;
  --ink: #24262d;
  --muted: #606571;
  --line: #d6d9e0;
  --soft: #eef0f4;
  --qiri-accent: #b72950;
  --qiri-on-accent: #fff;
  --qiri-tint: #fbeaf0;
  --qiri-day: #fff;
  --qiri-weekend: #f8f9fb;
  --qiri-outside: #e5e7ed;
  --qiri-today: #fff5f7;
  --qiri-chrome: #ffffffda;
  --qiri-field: #e9ebf0;
  --qiri-segment: #dddfe6;
  --qiri-control: #ffffff;
  --qiri-shadow: 0 1px 3px #1e263418, 0 8px 22px #1e26340a;
  --qiri-sheet-shadow: 0 24px 80px #19223238, 0 2px 8px #1922321a;
  --qiri-inset: inset 0 1px 0 #ffffffcf, inset 0 0 0 1px #ffffff60;
  --today-ink: #b72950;
  --today-border: #b72950;
  --today-surface: #fff5f7;
  --today-fill: #fff5f7;
  background: var(--bg);
  color: var(--ink);
}
html[data-site-theme=studio][data-theme=dark] .app-shell {
  --bg: #14161b;
  --surface: #292c34;
  --surface-soft: #20232a;
  --surface-raised: #343842;
  --panel: #292c34;
  --ink: #f5f6f8;
  --muted: #b8beca;
  --line: #494f5c;
  --soft: #343944;
  --qiri-accent: #ff9db6;
  --qiri-on-accent: #411221;
  --qiri-tint: #49313d;
  --qiri-day: #292d35;
  --qiri-weekend: #242831;
  --qiri-outside: #1b1e25;
  --qiri-today: #3b2b35;
  --qiri-chrome: #2b2f39e8;
  --qiri-field: #1e222b;
  --qiri-segment: #191d25;
  --qiri-control: #424856;
  --qiri-shadow: 0 1px 4px #0004, 0 8px 22px #0002;
  --qiri-sheet-shadow: 0 24px 80px #0009;
  --qiri-inset: inset 0 1px 0 #ffffff14, inset 0 0 0 1px #ffffff0a;
  --today-ink: #ff9db6;
  --today-border: #ff9db6;
  --today-surface: #3b2b35;
  --today-fill: #3b2b35;
}
html[data-site-theme=studio][data-theme=dark][data-tone=gray] .app-shell {
  --bg: #2a2c32; --surface: #3a3d45; --panel: #3a3d45;
  --qiri-day: #3a3d45; --qiri-weekend: #353840; --qiri-outside: #30333a;
  --qiri-chrome: #3d4049ed; --qiri-field: #30343d;
}
html[data-site-theme=studio][data-theme=dark][data-tone=green] .app-shell {
  --bg: #19241f; --surface: #2b3931; --panel: #2b3931;
  --qiri-day: #2b3931; --qiri-weekend: #26342d; --qiri-outside: #202d26;
  --qiri-chrome: #2f3e35ed; --qiri-field: #213028;
}
html[data-site-theme=studio][data-theme] .app-shell .topbar {
  background: var(--qiri-chrome);
  border-bottom-color: transparent;
  box-shadow: var(--qiri-inset), 0 4px 24px #161e3210;
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
}
html[data-site-theme=studio][data-theme] .app-shell .topbar :is(.home-link,.breadcrumb strong,.mobile-menu) { color: var(--ink); }
html[data-site-theme=studio][data-theme] .app-shell .breadcrumb { color: var(--muted); }
html[data-site-theme=studio][data-theme] .app-shell .topbar-right > button:not(.profile-trigger),
html[data-site-theme=studio][data-theme] .app-shell .mobile-menu {
  background: var(--qiri-control);
  border-color: transparent;
  border-radius: 50%;
  color: var(--ink);
  box-shadow: 0 1px 4px #17203112, var(--qiri-inset);
}
html[data-site-theme=studio][data-theme] .app-shell .topbar-right > .sync-status-button { border-radius: 14px; }
html[data-site-theme=studio][data-theme] .app-shell .site-logo { background: transparent; border-radius: 0; box-shadow: none; }
html[data-site-theme=studio][data-theme] .app-shell .site-logo img { object-fit: contain; }
html[data-site-theme=studio][data-theme] .app-shell .sidebar {
  background: var(--qiri-chrome);
  border-right-color: transparent;
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}
html[data-site-theme=studio][data-theme] .app-shell .sidebar :is(nav button,.sidebar-bottom > button) {
  color: var(--muted); background: transparent; border-radius: 12px; box-shadow: none;
}
html[data-site-theme=studio][data-theme] .app-shell .sidebar :is(nav button.current,.sidebar-bottom > button.current) {
  color: var(--ink); background: var(--qiri-control); box-shadow: var(--qiri-shadow);
}
html[data-site-theme=studio][data-theme] .app-shell .sidebar :is(.workspace-dot,button.current > svg) { color: var(--qiri-accent); }
html[data-site-theme=studio][data-theme] .app-shell :is(.sidebar nav,.topbar,.calendar-heading-actions,.calendar-month-navigation) svg { stroke-width: 1.8; }

/* Same controls, expressed as native segmented switches and removable chips. */
html[data-site-theme=studio][data-theme] .calendar-view .calendar-page-heading h1 { color: var(--ink); font-weight: 700; }
html[data-site-theme=studio][data-theme] .calendar-view :is(.calendar-source-filters,.work-kind-filters,.calendar-selection-mode) {
  background: var(--qiri-segment);
  border-color: transparent;
  border-radius: 10px;
  box-shadow: inset 0 1px 2px #1720310c;
}
html[data-site-theme=studio][data-theme] .calendar-view :is(.calendar-source-filters,.work-kind-filters,.calendar-selection-mode) button {
  background: transparent; color: var(--muted); border-color: transparent; border-radius: 8px;
}
html[data-site-theme=studio][data-theme] .calendar-view :is(.calendar-source-filters,.work-kind-filters,.calendar-selection-mode) button[aria-pressed=true] {
  background: var(--qiri-control) !important; color: var(--ink) !important;
  border-color: transparent !important; box-shadow: 0 1px 4px #151e3426 !important;
}
html[data-site-theme=studio][data-theme] .calendar-view :is(.calendar-choice,.calendar-select-all,.category-filters button,.subcategory-filters button) {
  border-radius: 7px; background: transparent; color: var(--muted); border-color: transparent; box-shadow: none;
}
html[data-site-theme=studio][data-theme] .calendar-view :is(.calendar-choice,.calendar-select-all,.category-filters button,.subcategory-filters button,.calendar-source-filters button,.work-kind-filters button)[aria-pressed=true] {
  background: var(--qiri-tint) !important; color: var(--qiri-accent) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--qiri-accent) 20%,transparent) !important;
}
html[data-site-theme=studio][data-theme] .calendar-view .filter-row-label { color: var(--muted); }
html[data-site-theme=studio][data-theme] .calendar-view .calendar-heading-actions button:not(.primary) {
  border-color: transparent; border-radius: 10px; background: var(--qiri-control); color: var(--ink);
  box-shadow: 0 1px 3px #17203116;
}
html[data-site-theme=studio][data-theme] .calendar-view .calendar-heading-actions .calendar-selection-mode button {
  background: transparent; box-shadow: none;
}
html[data-site-theme=studio][data-theme] .calendar-view .new-task-button,
html[data-site-theme=studio][data-theme] .calendar-mobile-module-actions .primary {
  border-color: transparent; border-radius: 10px;
  background: var(--green); color: var(--accent-ink);
  box-shadow: inset 0 1px 0 #ffffff30, 0 3px 8px color-mix(in srgb,var(--green) 24%,transparent);
}

/* Calendar controls float above a quiet content plane, not a dark table bar. */
html[data-site-theme=studio][data-theme] .calendar-view .calendar-panel {
  background: transparent; border-color: transparent; border-radius: 20px; box-shadow: none;
}
html[data-site-theme=studio][data-theme] .calendar-view .calendar-fixed-heading {
  background: var(--qiri-chrome); border-radius: 18px 18px 12px 12px;
  box-shadow: var(--qiri-inset), var(--qiri-shadow);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
}
html[data-site-theme=studio][data-theme] .calendar-view .calendar-toolbar-compact {
  background: transparent; border-color: transparent; border-radius: 18px 18px 0 0;
  box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
html[data-site-theme=studio][data-theme] .calendar-view .calendar-toolbar-compact h2 {
  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI','Microsoft JhengHei',sans-serif;
  font-size: 24px; line-height: 1; font-weight: 700; letter-spacing: -.7px; color: var(--ink);
}
html[data-site-theme=studio][data-theme] .calendar-view :is(.search-field,.person-select,.people-filter-trigger,.platform-filter-trigger) {
  border-color: transparent; border-radius: 10px; background: var(--qiri-field); color: var(--ink);
  box-shadow: inset 0 1px 2px #18203410;
}
html[data-site-theme=studio][data-theme] .calendar-view :is(.search-field input,.person-select select) {
  background: transparent; color: var(--ink); box-shadow: none;
}
html[data-site-theme=studio][data-theme] .calendar-view .search-field input::placeholder { color: var(--muted); }
html[data-site-theme=studio][data-theme] .calendar-view :is(.search-field,.person-select) > svg { color: var(--muted); }
html[data-site-theme=studio][data-theme] .calendar-view .calendar-month-navigation {
  background: var(--qiri-field); border-radius: 10px; box-shadow: inset 0 1px 2px #18203410;
}
html[data-site-theme=studio][data-theme] .calendar-view .calendar-month-navigation button {
  color: var(--ink); border-color: transparent; border-radius: 8px; background: transparent; box-shadow: none;
}
html[data-site-theme=studio][data-theme] .calendar-view .calendar-month-navigation button:nth-child(2) {
  background: var(--qiri-control); box-shadow: 0 1px 4px #17203116;
}
html[data-site-theme=studio][data-theme] .calendar-view .calendar-weekday-heading {
  background: transparent; color: var(--muted); border-color: transparent; box-shadow: none;
}
html[data-site-theme=studio][data-theme] .calendar-view .calendar-weekday-heading > span {
  border-color: transparent; font-weight: 600;
}
html[data-site-theme=studio][data-theme] .calendar-view .calendar-weekday-heading .day-off { color: var(--qiri-accent); }

/* Continuous date surfaces: no painted insets, rounded week strips or date gaps. */
html[data-site-theme=studio][data-theme] .calendar-view :is(.calendar-grid,.calendar-week,.mobile-overview-week,.mobile-month-grid) { gap: 0; }
html[data-site-theme=studio][data-theme] .calendar-view .calendar-week { border-bottom-color: var(--line); }
html[data-site-theme=studio][data-theme] .calendar-view .mobile-overview-week { border-top-color: var(--line); }
html[data-site-theme=studio][data-theme] .calendar-view .calendar-wide .calendar-week > .calendar-cell { border-bottom: 0; border-right-color: var(--line); }
html[data-site-theme=studio][data-theme] .calendar-view .mobile-overview-day { border-right-color: var(--line); }
html[data-site-theme=studio][data-theme] .calendar-view .calendar-mobile .mobile-date-cell { border-radius: 0; }
html[data-site-theme=studio][data-theme] .calendar-view .calendar-wide .calendar-week > .calendar-cell,
html[data-site-theme=studio][data-theme] .calendar-view .mobile-overview-day {
  position: relative; isolation: isolate; background: transparent; box-shadow: none;
}
html[data-site-theme=studio][data-theme] .calendar-view .calendar-wide .calendar-week > .calendar-cell::before,
html[data-site-theme=studio][data-theme] .calendar-view .mobile-overview-day::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--qiri-day); border-radius: 0;
  box-shadow: none; pointer-events: none;
}
html[data-site-theme=studio][data-theme] .calendar-view .calendar-wide .calendar-week > .calendar-cell.day-off::before,
html[data-site-theme=studio][data-theme] .calendar-view .mobile-overview-day.day-off::before { background: var(--qiri-weekend); }
html[data-site-theme=studio][data-theme] .calendar-view .calendar-wide .calendar-week > .calendar-cell.outside::before,
html[data-site-theme=studio][data-theme] .calendar-view .mobile-overview-day.outside::before { background: var(--qiri-outside); box-shadow: none; }
html[data-site-theme=studio][data-theme] .calendar-view .calendar-wide .calendar-week > .calendar-cell.today::before,
html[data-site-theme=studio][data-theme] .calendar-view .mobile-overview-day[aria-current=date]::before {
  background: var(--qiri-today); box-shadow: inset 0 0 0 1.5px var(--qiri-accent);
}
html[data-site-theme=studio][data-theme] .calendar-view .calendar-cell > header .calendar-date-number {
  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size: 21px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.8px;
  color: var(--ink);
}
html[data-site-theme=studio][data-theme] .calendar-view .calendar-cell.day-off > header .calendar-date-number { color: var(--qiri-accent); }
html[data-site-theme=studio][data-theme] .calendar-view .calendar-cell.today > header .calendar-date-number {
  font-size: 20px; border-radius: 50%; background: var(--qiri-accent);
  border-color: transparent; color: var(--qiri-on-accent);
  box-shadow: 0 2px 6px color-mix(in srgb,var(--qiri-accent) 20%,transparent);
}
html[data-site-theme=studio][data-theme] .calendar-view .today-label { color: var(--qiri-accent); }
html[data-site-theme=studio][data-theme] .calendar-view .calendar-holiday-label { font-weight: 400; }
html[data-site-theme=studio][data-theme] .calendar-view .overview-date {
  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.7px;
}
html[data-site-theme=studio][data-theme] .calendar-view .mobile-overview-day[aria-current=date] .overview-date { color: var(--qiri-accent); }
html[data-site-theme=studio][data-theme] .calendar-view .calendar-mobile-module-actions {
  background: transparent;
}
html[data-site-theme=studio][data-theme] .calendar-view .calendar-mobile-module-actions button {
  border-color: transparent; border-radius: 12px; background: var(--qiri-control);
  color: var(--ink); box-shadow: var(--qiri-shadow);
}
html[data-site-theme=studio][data-theme] .calendar-view .calendar-mobile-module-actions button[aria-label="新增工作"] {
  position: relative; background: var(--green); color: var(--accent-ink);
}
/* Expand into the existing left gutter without moving the visible button. */
html[data-site-theme=studio][data-theme] .calendar-view .calendar-mobile-module-actions button[aria-label="新增工作"]::after {
  content: ''; position: absolute; width: max(100%,44px); height: max(100%,44px);
  right: -1px; top: -1px;
}
html[data-site-theme=studio][data-theme] .app-shell .modal {
  border-color: color-mix(in srgb,var(--line) 75%,transparent); border-radius: 20px;
  background: var(--surface); color: var(--ink); box-shadow: var(--qiri-sheet-shadow);
}
html[data-site-theme=studio][data-theme] .app-shell .modal::backdrop { background: #17203452; backdrop-filter: blur(8px); }
html[data-site-theme=studio][data-theme] .app-shell .modal :is(input:not([type=checkbox]):not([type=radio]):not([type=color]),select,textarea) {
  background: var(--surface-soft); border-color: var(--line); border-radius: 10px; color: var(--ink);
}
html[data-site-theme=studio][data-theme] .app-shell .modal .modal-head .icon-button {
  border-radius: 50%; background: var(--surface-soft); border-color: transparent; color: var(--muted);
}
html[data-site-theme=studio][data-theme] .app-shell .modal .primary { background: var(--green); color: var(--accent-ink); border-radius: 10px; }
html[data-site-theme=studio][data-theme] .app-shell .modal .button-row button { border-radius: 10px; }

/* No transform on controls: pressed feedback is immediate and preserves targets. */
html[data-site-theme=studio][data-theme] .calendar-view :is(.calendar-heading-actions,.calendar-month-navigation,.calendar-source-filters,.calendar-buttons,.category-filters,.work-kind-filters,.calendar-mobile-module-actions) button,
html[data-site-theme=studio][data-theme] .app-shell .topbar button {
  transition: background-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}
@media(hover:hover) and (pointer:fine) {
  html[data-site-theme=studio][data-theme] .calendar-view :is(.calendar-source-filters,.work-kind-filters,.calendar-month-navigation) button:hover {
    background: var(--qiri-control); color: var(--ink);
  }
  html[data-site-theme=studio][data-theme] .calendar-view :is(.calendar-choice,.calendar-select-all,.category-filters button):hover { box-shadow: inset 0 0 0 1px var(--line); }
  html[data-site-theme=studio][data-theme] .calendar-view .calendar-wide .calendar-week > .calendar-cell:hover::before { box-shadow: inset 0 0 0 1px var(--line); }
}
html[data-site-theme=studio][data-theme] .calendar-view :is(.calendar-heading-actions,.calendar-month-navigation,.calendar-source-filters,.calendar-buttons,.category-filters,.work-kind-filters,.calendar-mobile-module-actions) button:active,
html[data-site-theme=studio][data-theme] .app-shell .topbar button:active {
  filter: brightness(.92); transition-duration: 0s;
}
html[data-site-theme=studio][data-theme] .app-shell :is(button,input,select,textarea):focus-visible {
  outline: 2px solid var(--qiri-accent); outline-offset: 2px;
}
@media(max-width:900px) {
  html[data-site-theme=studio][data-theme] .calendar-view .calendar-toolbar-compact h2 { font-size: 22px; }

  html[data-site-theme=studio][data-theme] .calendar-view .calendar-panel { border-radius: 16px; }
}
@media(max-width:400px) {
  html[data-site-theme=studio][data-theme] .calendar-view .calendar-toolbar-compact h2 { font-size: 20px; }
}
@media(prefers-reduced-motion:reduce) {
  html[data-site-theme=studio][data-theme] .app-shell :is(.topbar,.calendar-heading-actions,.calendar-month-navigation,.calendar-source-filters,.calendar-buttons,.category-filters,.work-kind-filters,.calendar-mobile-module-actions) button { transition: none; }
}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more) {
  html[data-site-theme=studio][data-theme] .app-shell :is(.topbar,.sidebar,.calendar-fixed-heading) {
    background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  html[data-site-theme=studio][data-theme] .app-shell .modal::backdrop { backdrop-filter: none; background: #10131ccc; }
}
@media(prefers-contrast:more) {
  html[data-site-theme=studio][data-theme] .calendar-view :is(.calendar-choice,.calendar-select-all,.category-filters button,.calendar-source-filters button,.calendar-month-navigation button) { border-color: var(--muted); }
  html[data-site-theme=studio][data-theme] .calendar-view :is(.calendar-cell,.mobile-overview-day)::before { box-shadow: inset 0 0 0 1px var(--muted); }
}