.workspace-unread-badge { color: var(--page-accent-text); }
.workspace-page .workspace-layout { display: block; }
.workspace-page .workspace-main { min-width: 0; }
.workspace-demo-panel { padding: 24px; }
.workspace-demo-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.workspace-demo-options > a { padding: 24px; color: var(--page-text); text-decoration: none; }
.workspace-demo-options > a strong, .workspace-demo-options > a small { display: block; }
.workspace-demo-options > a small { margin-top: 8px; color: var(--page-body); }
.workspace-demo-options > a:focus-visible { outline: 2px solid var(--page-focus); outline-offset: 2px; }
@media (max-width: 640px) { .workspace-demo-options { grid-template-columns: 1fr; } }
.calendar-switch { display: flex; gap: 8px; margin: 0 0 20px; }
.calendar-switch a { min-height: 44px; display: flex; align-items: center; padding: 8px 14px; border: 1px solid var(--page-line); border-radius: 6px; background: transparent; color: var(--page-body); font-size: 13px; transition: background-color .2s; }
.calendar-switch a[aria-current], .calendar-switch a:hover { border-color: var(--page-accent); background: var(--page-soft); color: var(--page-text); }
.calendar-month .calendar-grid { grid-template-rows: 36px repeat(6,80px); }
.calendar-month .calendar-cell { min-height: 0; position: relative; }
.calendar-month .calendar-cell--event { background: var(--status-confirmed-bg); }
.calendar-month .calendar-cell--offer { background: var(--status-wait-bg); }
.calendar-cell .calendar-day-event { position: absolute; inset: 0; display: flex; align-items: end; gap: 6px; padding: 8px; color: var(--status-confirmed); border-radius: 0; margin: 0; font-size: 12px; }
.calendar-cell--offer .calendar-day-event { color: var(--status-wait); }
.calendar-day-event::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 6px; margin-bottom: 7px; }
.calendar-day-event:hover { box-shadow: inset 0 0 0 1px currentColor; }
.calendar-legend { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 16px; font-size: 12px; color: var(--page-body); }
.calendar-legend span { display: inline-flex; align-items: center; gap: 8px; }
.calendar-legend span::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--status-confirmed); }
.calendar-legend .calendar-legend-offer::before { background: var(--status-wait); }
.calendar-agenda-item { display: grid; grid-template-columns: 20px minmax(0,1fr) 18px; gap: 16px; padding: 20px 0; border-top: 1px solid var(--page-line); align-items: start; }
.calendar-agenda-item > img { filter: var(--icon-filter); margin-top: 4px; }
.calendar-agenda-item strong { display: block; font-size: 15px; font-weight: 600; }
.calendar-agenda-item small { display: block; margin-top: 6px; color: var(--page-body); font-size: 12px; }
.calendar-agenda-item:hover .link-arrow, .calendar-agenda-item:focus-visible .link-arrow { transform: translateX(3px) rotate(45deg); }
.calendar-state--event, .calendar-agenda-item .calendar-state--event { color: var(--status-confirmed); }
.calendar-state--offer, .calendar-agenda-item .calendar-state--offer { color: var(--status-wait); }
.calendar-state { font-size: 12px; font-weight: 600; }
.calendar-dialog { width: min(100% - 32px, 560px); padding: 32px; border: 1px solid var(--page-line); border-radius: 10px; background: var(--page-surface); color: var(--page-text); }
.calendar-dialog::backdrop { background: rgb(0 0 0 / .8); }
body:has(.calendar-dialog[open]) { overflow: hidden; }
.calendar-dialog { max-height: calc(100dvh - 32px); }
.calendar-dialog h3 { margin: 12px 44px 12px 0; }
.calendar-dialog p:not(.eyebrow) { color: var(--page-body); }
.calendar-dialog p.calendar-state--event { color: var(--status-confirmed); }
.calendar-dialog p.calendar-state--offer { color: var(--status-wait); }
.calendar-dialog-close { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 44px; min-height: 44px; border: 1px solid var(--page-line); border-radius: 6px; background: var(--page-soft); color: var(--page-text); font: inherit; font-size: 25px; cursor: pointer; }
.notification-section-title { flex-wrap: wrap; align-items: start; justify-content: space-between; gap: 12px 24px; }
.notification-section-title > div { flex: 1 1 360px; min-width: 0; }
.notification-section-title h2 { margin-top: 0; }
.notification-section-title p { margin-bottom: 0; }
.notification-section-title .status-tag { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; white-space: nowrap; padding: 6px 10px; font-size: 12px; }
.notification-list { display: grid; gap: 12px; }
.notification-list article { grid-template-columns: 24px minmax(0,1fr); gap: 16px 20px; padding: 24px; border: 1px solid var(--page-line); border-left-width: 2px; border-radius: 8px; }
.notification-list article.is-unread { border-left-color: var(--page-accent); background: color-mix(in srgb, var(--page-accent) 7%, transparent); }
.notification-copy { min-width: 0; }
.notification-copy p { margin: 12px 0 0; }
.notification-heading { display: flex; align-items: baseline; gap: 12px; }
.notification-heading h3 { overflow-wrap: anywhere; }
.notification-indicator { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--page-accent); animation: workspace-unread-pulse 1.2s ease-out 3; }
.notification-actions { grid-column: 2; display: flex; align-items: center; gap: 12px 28px; flex-wrap: wrap; margin: 0; }
.notification-actions > .text-link { min-height: 44px; gap: 12px; }
.notification-read { display: none; min-height: 44px; padding: 9px 12px; border: 1px solid var(--page-line); border-radius: 6px; background: transparent; color: var(--page-body); font: inherit; font-size: 13px; text-align: left; cursor: pointer; transition: border-color .2s, color .2s; }
.notification-read:not([hidden]) { display: inline-flex; align-items: center; gap: 10px; }
.notification-read img { filter: var(--icon-filter); flex: 0 0 18px; }
.notification-read:hover { color: var(--page-accent-text); }
.notification-list article:focus { outline: 2px solid var(--page-focus); outline-offset: 4px; }
@keyframes workspace-unread-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgb(var(--ambient-color) / 0); } 45% { box-shadow: 0 0 0 6px rgb(var(--ambient-color) / .22); } }
@media (max-width: 768px) {
  .notification-list article { grid-template-columns: 20px minmax(0,1fr); padding: 18px 16px; gap: 14px 12px; }
  .notification-list article > img { width: 20px; height: 20px; }
  .notification-heading h3 { font-size: 20px; line-height: 1.4; }
  .notification-actions { grid-column: 1 / -1; gap: 8px 20px; }
  .notification-actions > .text-link, .notification-read { font-size: 12px; }
  .calendar-dialog { padding: 24px 20px; }
  .calendar-month .calendar-grid { grid-template-rows: 32px repeat(6,56px); }
  .calendar-day-event span { display: none; }
  .calendar-cell .calendar-day-event { padding: 6px; }
  .calendar-day-event::before { margin-bottom: 0; }
}
@media (max-width: 390px) {
  .calendar-switch { display: grid; grid-template-columns: 1fr 1fr; }
  .calendar-switch a { padding-inline: 8px; font-size: 12px; justify-content: center; }
  .calendar-grid > * { padding: 4px; }
}
@media (prefers-reduced-motion: reduce) { .notification-indicator { animation: none; } .calendar-switch a, .notification-read { transition: none; } .calendar-agenda-item:hover .link-arrow, .calendar-agenda-item:focus-visible .link-arrow { transform: none; } }

.demo-calendar-intro { margin:0 0 16px; font-size:14px; color:var(--page-body); }
.demo-calendar-account { margin-bottom:24px; }
.demo-calendar-entry { display:block; width:100%; text-align:left; padding:18px 0; border:0; border-bottom:1px solid var(--page-line); background:none; color:var(--page-text); cursor:pointer; font:inherit; }
.demo-calendar-entry strong,.demo-calendar-entry span { display:block; }
.demo-calendar-entry span { margin-top:6px; font-size:13px; color:var(--page-body); }
.demo-calendar-entry:focus-visible { outline:2px solid var(--page-focus); outline-offset:3px; }
.demo-calendar-legend { margin:20px 0; }
.demo-calendar-legend span:last-child { margin-left:0; }
.workspace-main .demo-calendar-legend>span:last-child { margin-left:0; }
.workspace-main .demo-calendar-legend>span::before { width:8px; height:8px; border-radius:3px; }
.workspace-main .demo-calendar-legend .calendar-key-performance::before { background:var(--page-accent-text); }
.demo-calendar-legend .calendar-key-unavailable::before { background:var(--page-muted); }
#performance-calendar .calendar-offer { background:var(--page-surface); color:var(--page-text); border:1px dashed var(--page-accent-text); border-radius:6px; }
.workspace-main #performance-calendar { margin-top:20px; }
.workspace-main .calendar-toolbar { flex-wrap:wrap; gap:16px; }