/* Record pages and dialogs share the dashboard's paper, ink, violet and lime palette. */
:is(#view[data-page]:not([data-page="Dashboard"]), dialog) {
  --module-ink: #191721;
  --module-muted: #635f6c;
  --module-border: #eae8ef;
  --module-violet: #6639ec;
  --module-violet-dark: #5030b4;
  --module-violet-soft: #f1edff;
  --module-lime: #d4ff60;
  color: var(--module-ink);

  & button, & .button {
    border: 1px solid var(--module-border);
    border-radius: 999px;
    background: #fff;
    color: var(--module-ink);
    font-size: .91rem;
    font-weight: 500;
    line-height: 1.3;
    padding: .68rem 1.05rem;
  }
  & :is(button, .button):hover {
    background-color: #f6f3ff;
    border-color: #d9d1f5;
    filter: none;
  }
  & .primary {
    background: var(--module-violet);
    color: white;
    border-color: var(--module-violet);
  }
  & .primary:hover { background: #5327d8; border-color: #5327d8; }
  & button:disabled { opacity: .55; cursor: wait; }
  & :is(button, .button, a, input, select, textarea):focus-visible {
    outline: 3px solid #8156f5;
    outline-offset: 2px;
  }
  & :is(input, select, textarea) {
    min-width: 0;
    padding: .7rem .9rem;
    border: 1px solid #d9d6e0;
    border-radius: 12px;
    background: #fff;
    color: var(--module-ink);
    font: inherit;
  }
  & input::placeholder, & textarea::placeholder { color: #76727e; }
  & .panel {
    min-width: 0;
    border: 0;
    border-radius: 22px;
    background: white;
    padding: clamp(16px, 1.7vw, 26px);
    margin: 0 0 8px;
    box-shadow: none;
  }
  & .panelhead { align-items: center; gap: 12px; margin-bottom: 16px; }
  & h2 {
    color: var(--module-ink);
    font-weight: 500;
    font-size: clamp(18px, 1.45vw, 24px);
    line-height: 1.2;
    letter-spacing: -.044em;
  }
  & :is(.panelhead, .line) button { font-size: .82rem; padding: .5rem .85rem; }
  & :is(.sub, .muted, .chart-intro, .report-footer, .axis) { color: var(--module-muted); }
  & .chart-intro { margin: -6px 0 20px; font-size: .85rem; line-height: 1.5; }
  & .badge {
    display: inline-block;
    max-width: 100%;
    padding: .3rem .62rem;
    border-radius: 99px;
    background: var(--module-violet-soft);
    color: #4d3794;
    font-size: .73rem;
    font-weight: 550;
    vertical-align: middle;
  }
  & .panelhead .badge { background: #e4ff9c; color: #394813; }
  & .empty {
    display: grid;
    place-items: center;
    min-height: 88px;
    padding: 18px;
    background: #faf9fc;
    border: 1px dashed #dedbe7;
    border-radius: 15px;
    color: var(--module-muted);
    text-align: center;
    line-height: 1.5;
  }
  & .track {
    height: 6px;
    min-width: 42px;
    border-radius: 99px;
    background: #efecf5;
  }
  & .track i { border-radius: inherit; background: var(--module-violet); }
  & .avatar { border-radius: 50%; background: var(--module-violet-soft); color: var(--module-violet-dark); }
}

#view[data-page]:not([data-page="Dashboard"]) {
  & .head {
    padding: clamp(14px, 1.6vw, 24px) clamp(8px, 1.4vw, 22px);
    margin: 0;
    align-items: center;
  }
  & .head h1 {
    font-size: clamp(28px, 2.45vw, 42px);
    line-height: 1.1;
    font-weight: 520;
    letter-spacing: -.055em;
    overflow-wrap: anywhere;
  }
  & .head .sub { max-width: 70ch; font-size: .92rem; line-height: 1.45; }
  & .eyebrow {
    font-size: .69rem;
    font-weight: 580;
    letter-spacing: .115em;
    color: #654e90;
  }
  & :is(.head, .filters) select { border-radius: 99px; width: auto; }
  & .tabs { gap: 5px; margin: 4px 0 10px; border: 0; }
  & .tabs:has(.sel) { width: fit-content; max-width: 100%; padding: 4px; background: white; border-radius: 22px; }
  & .tabs:has(.sel) button { border: 0; background: transparent; border-radius: 99px; }
  & .tabs button.sel { background: var(--module-violet); color: white; box-shadow: none; }
  & .filters { margin: 0 0 10px; gap: 6px; }
  & .filters input {
    width: min(20rem, 100%);
    background: white;
    border-radius: 99px;
  }
  & .filters select { background: white; max-width: 100%; }
  & table { font-variant-numeric: tabular-nums; }
  & th, & td { border: 0; text-align: start; }
  & th {
    background: #f6f5f9;
    color: #655f70;
    font-size: .72rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: .015em;
    padding: .78rem .9rem;
  }
  & th:first-child { border-radius: 12px 0 0 12px; }
  & th:last-child { border-radius: 0 12px 12px 0; }
  & td {
    padding: .9rem;
    background: white;
    font-size: .9rem;
    line-height: 1.4;
    border-bottom: 1px solid #efedf3;
  }
  & tr:last-child td { border-bottom: 0; }
  & tbody tr:hover td { background: #fcfbff; }
  & td small { color: var(--module-muted); }
  & td button {
    padding: .15rem 0;
    text-align: start;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--module-violet-dark);
    font-weight: 600;
  }
  & td button:hover { background: transparent; text-decoration: underline; }
  & .team-actions {
    display: flex;
    align-items: center;
    gap: .55rem;
    flex-wrap: wrap;
  }
  & td .team-actions button {
    padding: .42rem .8rem;
    border: 1px solid #d9d1f5;
    border-radius: 999px;
    background: #f7f4ff;
    color: var(--module-violet-dark);
    white-space: nowrap;
  }
  & td .team-actions .delete-action {
    border: 1px solid #ffb8b2;
    border-radius: 999px;
    background: #fff;
    color: #b42318;
  }
  & td .team-actions button:hover { background: #eee8ff; text-decoration: none; }
  & td .team-actions .delete-action:hover {
    border-color: #ef8f88;
    background: #fff7f6;
  }
  & .panel > .actions { margin-top: 18px; }
  & .stats { grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 8px; margin-bottom: 8px; }
  & .stats .stat {
    padding: clamp(18px, 2vw, 28px);
    border: 0;
    border-radius: 21px;
    background: white;
  }
  & .stats .stat span { color: var(--module-muted); font-size: .94rem; }
  & .stats .stat b { margin-top: 12px; font-weight: 500; }
  & .stats .stat:first-child { background: var(--module-violet); color: white; }
  & .stats .stat:first-child span { color: white; }
  & .facts {
    margin: 0;
    padding: 0;
    gap: 8px;
    border-radius: 0;
    background: none;
  }
  & .facts > div { min-width: 0; padding: 12px 14px; background: #f7f6fa; border-radius: 12px; }
  & .facts dt, & .line small { color: var(--module-muted); }
  & .facts dd { margin-top: 5px; font-size: .95rem; color: var(--module-ink); }
  & .line { border-color: #eeecf3; line-height: 1.5; padding: 12px 0; overflow-wrap: anywhere; }
  & .line:first-of-type { border-top: 0; }
  & .line.row { align-items: center; }
  & .line strong { font-weight: 560; }

  & .pipeline {
    gap: 8px;
    padding: 0 0 10px;
    margin: 0;
    grid-template-columns: repeat(5, minmax(178px, 1fr));
    scrollbar-width: thin;
    scrollbar-color: #cbc4df transparent;
  }
  & .lane {
    --stage-accent: #7950f0;
    background: #fcfbff;
    border: 1px solid #e9e5f3;
    border-radius: 20px;
    min-height: clamp(320px, 57vh, 660px);
    padding: 15px 10px 10px;
  }
  & .lane-1 { --stage-accent: #a285ee; }
  & .lane-2 { --stage-accent: #aaa1c0; }
  & .lane-3 { --stage-accent: #acba69; }
  & .lane-4 { --stage-accent: #a3bc46; background: #fbfcf6; }
  & .lane > .row { padding: 0 4px; gap: 5px; align-items: baseline; }
  & .lane > .row b:first-child { display: flex; align-items: center; gap: 6px; font-weight: 560; }
  & .lane > .row b:first-child::before {
    content: "";
    display: block;
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--stage-accent);
  }
  & .lane > .row b:last-child { color: var(--module-muted); font-weight: 500; }
  & .lane > small { margin: 5px 4px 15px; color: var(--module-muted); }
  & .deal {
    display: block;
    margin: 0 0 7px;
    padding: 13px;
    background: white;
    border: 1px solid #e9e6f0;
    border-radius: 15px;
    box-shadow: 0 2px 4px #20122d06;
  }
  & .deal:hover { border-color: #b7a1ec; background: white; }
  & .deal:active[draggable="true"] { cursor: grabbing; }
  & .deal > .row { flex-wrap: wrap; overflow-wrap: anywhere; }
  & .deal > .row b { font-weight: 600; }
  & .deal > span:nth-child(2), & .deal footer { color: var(--module-muted); }
  & .deal strong { font-weight: 540; }
  & .deal em { border-radius: 50%; background: #f1edfc; color: #48337a; font-size: 10px; font-weight: 600; }
  & .stage-track { background: #f0eef4; }
  & .stage-track i { background: var(--stage-accent); }
  & .lane-add { border: 1px dashed #c7bbdf; border-radius: 12px; background: transparent; color: var(--module-violet-dark); font-size: .8rem; }

  & :is(.analytics-top, .analytics-bottom, .report-layout, .report-grid) { gap: 8px; }
  & .report-grid .panel { margin-bottom: 0; }
  & .mix { gap: 16px; }
  & .legend i { width: 8px; height: 8px; border-radius: 50%; }
  & .legend b { white-space: nowrap; }
  & .shaft i, & .hbar u {
    border-radius: 9px;
    background: repeating-linear-gradient(135deg, #8054fa 0 7px, #7143f1 7px 14px);
  }
  & .columns > div:nth-child(even) i, & .hbar:nth-of-type(even) u {
    background: repeating-linear-gradient(135deg, #d2f966 0 7px, #ddff86 7px 14px);
  }
  & .columns > div:nth-child(3n) i { background: repeating-linear-gradient(135deg, #d2ceda 0 7px, #dedbe5 7px 14px); }
  & .hbar > i { height: 11px; background: #f1eff5; border-radius: 99px; }
  & .hbar u { border-radius: inherit; }
  & .shaft small, & .columns span { color: var(--module-muted); }
  & .week-matrix i, & .heat > div { border-radius: 7px; color: #22202a; }
  & .week-matrix i { padding: 7px 4px; }
  & .designer .chart-intro { margin: 6px 0 14px; }
  & .chart-picker { gap: 5px; }
  & .chart-picker button {
    padding: 10px 2px;
    border-radius: 14px;
    font-size: .78rem;
  }
  & .chart-picker i { background: #f1eff5; padding: 4px; border-radius: 8px; font-size: 16px; }
  & .chart-picker button.selected i { background: var(--module-violet); color: white; }
  & :is(.selected, .designer .selected) { background: var(--module-violet-soft); color: var(--module-violet-dark); border-color: #c7b5f9; }
  & .designer > button { border-radius: 12px; text-align: start; }
  & .report-footer { align-items: center; }
}

dialog {
  width: min(590px, calc(100vw - 24px));
  max-height: min(90dvh, 820px);
  margin: auto;
  padding: clamp(20px, 3vw, 34px);
  border: 0;
  border-radius: 24px;
  background: white;
  box-shadow: 0 22px 90px #16073735;
}
dialog::backdrop { background: #10062b99; }
dialog .eyebrow { color: var(--module-violet-dark); }
dialog h2 { margin-bottom: 8px; }
dialog .panelhead { margin-bottom: 15px; }
dialog .panelhead h2 { margin-bottom: 0; }
dialog .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; margin: 10px 0; }
dialog label { font-size: .82rem; font-weight: 580; color: #46404e; }
dialog [hidden] { display: none; }
dialog label :is(input, select, textarea) { font-size: .95rem; margin-top: 6px; }
dialog .fields textarea { resize: vertical; }
dialog .error { color: #ac2e45; }
dialog .actions { border-top: 1px solid var(--module-border); padding-top: 15px; }
dialog #results { max-height: 52dvh; overflow-y: auto; padding: 3px; }
dialog #results button { padding: 9px 13px; border-radius: 11px; text-align: start; }
dialog form > .panel { margin-top: 18px; padding: 13px; border-radius: 16px; background: #f7f5fc; }
dialog #form > button, dialog #form > .panel > button { margin-bottom: 4px; }
#toast { background: #241941; padding: 12px 18px; border-radius: 15px; box-shadow: 0 5px 30px #190d3120; }

@media (max-width: 730px) {
  #view[data-page]:not([data-page="Dashboard"]) {
    & .head { align-items: flex-start; padding: 14px 5px; }
    & .head h1 { font-size: 29px; }
    & .pipeline { grid-template-columns: repeat(5, minmax(210px, 72vw)); scroll-snap-type: x proximity; }
    & .lane { scroll-snap-align: start; min-height: 330px; }
    & :is(.head, .tabs) button { padding: .6rem .8rem; }
    & .filters input { width: min(240px, 100%); }
    & .stats { grid-template-columns: 1fr; }
    & :is(th, td) { padding: .66rem .55rem; }
    & .chart-picker { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    & :is(.head, .panelhead, .actions) { flex-wrap: wrap; }
  }
  dialog .fields { grid-template-columns: minmax(0, 1fr); }
  dialog input:not([type="file"]), dialog select, dialog textarea { font-size: 16px; }
}

@media print {
  #view[data-page] :is(.filters, .lane-add, .tabs:has(.sel)) { display: none; }
  #view[data-page] .pipeline { overflow: visible; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  #view[data-page] .lane { min-height: 0; }
}

.face-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:16px; }
.face-card { padding:20px; background:#f8f6ff; border:1px solid #eee8fc; border-radius:22px; overflow-wrap:anywhere; }
.face-card h3 { margin:10px 0; }
.face-card strong { color:#7143f1; font-size:30px; }
.face-card small,.face-card p { color:#696571; }

/* Report library: readable breakdowns and a compact builder. */
#view[data-page="Reports"] .report-layout { grid-template-columns:minmax(240px,300px) minmax(0,1fr); gap:20px; align-items:start; }
#view[data-page="Reports"] .report-table-wrap { overflow-x:auto; }
#view[data-page="Reports"] .report-library-table { width:100%; table-layout:fixed; }
#view[data-page="Reports"] .report-library-table th:first-child { width:25%; }
#view[data-page="Reports"] .report-library-table th:nth-child(2) { width:18%; }
#view[data-page="Reports"] .report-library-table tbody th { text-align:left; font-size:14px; font-weight:600; letter-spacing:normal; text-transform:none; background:transparent; vertical-align:top; padding:20px 14px; }
#view[data-page="Reports"] .report-library-table td { vertical-align:top; padding:20px 14px; }
.report-library-table tbody th small { display:block; color:#777180; font-size:11px; font-weight:400; margin-top:7px; }
.report-library-table tbody tr:hover { background:#fbfaff; }
.report-values { display:grid; grid-template-columns:repeat(auto-fit,minmax(135px,1fr)); gap:8px; margin:0; }
.report-values > div { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 11px; background:#f7f5fc; border-radius:10px; min-width:0; }
.report-values dt { color:#696172; font-size:12px; overflow-wrap:anywhere; }
.report-values dd { margin:0; color:#5832b7; font-weight:650; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.report-preview { border-top:1px solid #eee8f6; margin-top:20px; padding-top:18px; }
.report-preview h3 { font-size:16px; margin:0; }
.report-preview p { font-size:12px; color:#696172; }
@media(max-width:1100px){#view[data-page="Reports"] .report-layout { grid-template-columns:minmax(0,1fr); } }
@media(max-width:600px){#view[data-page="Reports"] .report-library-table { min-width:560px; } .report-values { grid-template-columns:1fr; } }

dialog fieldset { min-width:0; border:0; margin:0; padding:0; grid-column:1 / -1; }
dialog fieldset legend { font-size:.82rem; font-weight:580; color:#46404e; }
/* Workspace shortcut dialog */
dialog:has(.quick-workspace){width:min(850px,94vw);padding:26px;max-height:90dvh}
.quick-intro{color:#7a6d87;font-size:13px;margin:0 0 20px}
.quick-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:26px}
.quick-actions button{display:flex;align-items:center;gap:10px;text-align:left;padding:14px;border-radius:16px;background:#f6f2ff;border:1px solid #e7ddfa;font-size:13px}
.quick-actions button>span{display:grid;place-items:center;width:30px;height:30px;flex:none;background:#e8ddff;color:#6735d7;border-radius:10px;font-size:18px}
.quick-actions button:hover{background:#ebe2ff}
.quick-work{border-top:1px solid #e9e2f1;padding-top:22px}
.quick-work>header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.quick-work h3{font-size:22px;letter-spacing:-.5px;margin:5px 0 0}
.quick-filters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:16px;background:#f8f6fc;border-radius:18px}
.quick-filters label{min-width:0}.quick-filters select{width:100%;font-size:13px}.quick-search{grid-column:1/-1}
.quick-task-list{display:grid;gap:8px;max-height:330px;overflow-y:auto;overscroll-behavior:contain;margin-top:16px;padding:3px}
.quick-task-list .quick-task{display:flex;align-items:center;justify-content:space-between;width:100%;gap:12px;padding:16px;border:1px solid #e9e2f2;border-radius:16px;background:white;text-align:left}
.quick-task:hover{background:#faf7ff;border-color:#c5b0f0}
.quick-task-copy{display:grid;gap:6px;min-width:0}.quick-task-copy strong{font-size:14px;overflow-wrap:anywhere}.quick-task-copy small{font-size:11px;color:#867792;overflow-wrap:anywhere}
.quick-task-meta{display:flex;align-items:center;flex-wrap:wrap;gap:10px;font-size:11px;color:#7d708a}.quick-task-meta .badge{font-size:10px}
.quick-overdue{color:#b33a55;font-weight:600}.quick-task-arrow{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#f0e9ff;color:#6b38d9;flex:none}
.quick-footnote{color:#897c95;font-size:11px;margin:14px 0 0}
dialog:has(.quick-work-standalone){width:min(900px,92vw);max-height:92dvh;padding:24px}
.quick-work-standalone{border-top:0;padding-top:0}
.quick-work-standalone .quick-task-list{max-height:min(42dvh,360px)}
@media(max-width:600px){dialog:has(.quick-workspace){padding:18px}dialog:has(.quick-work-standalone){width:calc(100vw - 20px);max-height:calc(100dvh - 20px);padding:18px}.quick-actions{grid-template-columns:repeat(2,minmax(0,1fr))}.quick-filters{grid-template-columns:minmax(0,1fr)}.quick-search{grid-column:1}.quick-task-list{max-height:42dvh}.quick-actions button{font-size:12px;padding:10px}}
/* Calendar studio */
.cal-overview{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:26px 30px;margin-bottom:18px;border-radius:24px;background:linear-gradient(120deg,#29114f,#6430d7);color:white}.cal-overview .eyebrow{color:#d2bcff}.cal-overview h2{margin:8px 0;font-size:27px;letter-spacing:-.8px}.cal-overview p{color:#d9c8f7;margin:0;font-size:13px}.cal-summary{display:flex;align-items:center;gap:13px;padding:15px 22px;border:1px solid #ffffff33;border-radius:20px;background:#ffffff0d}.cal-summary strong{font-size:38px;color:#d4ff60;line-height:1}.cal-summary span{font-size:12px;max-width:85px;color:#e2d7f5}.cal-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start}.cal-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}.cal-toolbar h2{margin:0;font-size:23px}.cal-toolbar p{font-size:12px;color:#8a7e95;margin:6px 0 0}.cal-controls{display:flex;gap:7px;align-items:center}.cal-month-button{font-size:22px!important;line-height:1!important;min-width:40px}.cal-filterbar{display:flex;align-items:center;justify-content:space-between;gap:15px;flex-wrap:wrap;padding-bottom:18px}.cal-filterbar label{display:flex;align-items:center;gap:8px;font-size:12px;color:#84758e}.cal-filterbar select{width:auto;margin:0;font-size:12px}.cal-legend{display:flex;gap:12px;flex-wrap:wrap;font-size:10px;color:#8a7c95}.cal-legend span{display:flex;align-items:center;gap:5px}.cal-legend i,.cal-dots i{display:inline-block;width:7px;height:7px;border-radius:50%}.cal-weekdays,.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}.cal-weekdays span{text-align:center;padding:12px 0;font-size:11px;font-weight:600;color:#8b7d96}.cal-grid{gap:5px}#view[data-page="Calendar"] button.cal-day{display:flex;flex-direction:column;align-items:stretch;min-width:0;min-height:106px;padding:9px 6px;border:1px solid #eee9f5;border-radius:14px;background:#faf9fc;text-align:left;font-size:11px}#view[data-page="Calendar"] button.cal-day:hover{background:#f0e9ff;border-color:#c7b3f0}#view[data-page="Calendar"] button.cal-outside{background:white;color:#b5abbe}#view[data-page="Calendar"] button.cal-selected{background:#f1eaff;border-color:#8252ee;box-shadow:inset 0 0 0 1px #8252ee}.cal-day-number{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;font-weight:600;margin-bottom:7px}.cal-today .cal-day-number{background:#7542ed;color:white}.cal-event-stack{display:grid;gap:4px}.cal-event{display:block;padding:3px 5px;border-radius:5px;font-size:9px;line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cal-task{background:#e9defe;color:#663ac4}.cal-project{background:#e9f7c8;color:#526c20}.cal-meeting{background:#dcecfb;color:#386ea0}.cal-follow{background:#f9e5d2;color:#a86b31}.cal-more{font-size:9px;color:#8e7d9e;padding-left:4px}.cal-dots{display:none}.cal-legend .cal-task,.cal-agenda-dot.cal-task,.cal-dots .cal-task{background:#8754e5}.cal-legend .cal-project,.cal-agenda-dot.cal-project,.cal-dots .cal-project{background:#a4c84a}.cal-legend .cal-meeting,.cal-agenda-dot.cal-meeting,.cal-dots .cal-meeting{background:#6da3db}.cal-legend .cal-follow,.cal-agenda-dot.cal-follow,.cal-dots .cal-follow{background:#dc9c5d}.cal-agenda h2{font-size:22px;margin:8px 0}.cal-agenda-count{font-size:12px;color:#8c7d97;margin:0 0 18px}.cal-agenda-list{display:grid;gap:12px;max-height:640px;overflow-y:auto;overscroll-behavior:contain}.cal-agenda-item{display:grid;grid-template-columns:8px minmax(0,1fr);gap:10px;padding:14px;background:#f9f7fc;border:1px solid #eee7f6;border-radius:16px}.cal-agenda-dot{width:7px;height:7px;border-radius:50%;margin-top:6px}.cal-agenda-kind{font-size:10px;color:#9786a4}.cal-agenda-item h3{font-size:13px;line-height:1.5;margin:5px 0;overflow-wrap:anywhere}.cal-agenda-assignees{display:block;color:#766a83;font-size:10px;line-height:1.5;overflow-wrap:anywhere}.cal-agenda-item button{grid-column:2;justify-self:start;font-size:11px!important;padding:6px 14px!important}.cal-late{font-size:10px;color:#ad5c77}.cal-empty{padding:36px 8px;text-align:center;color:#8b7b99}.cal-empty>span{display:grid;place-items:center;margin:0 auto 18px;width:48px;height:48px;border-radius:50%;background:#eff8da;color:#709730;font-size:24px}.cal-empty h3{font-size:15px;color:#5c476e}.cal-empty p{font-size:12px;line-height:1.7}
@media(max-width:1150px){.cal-layout{grid-template-columns:minmax(0,1fr)}.cal-agenda-list{grid-template-columns:repeat(2,minmax(0,1fr));max-height:none}.cal-agenda .cal-empty{grid-column:1/-1}}
@media(max-width:600px){.cal-overview{padding:22px;align-items:start}.cal-overview h2{font-size:22px}.cal-overview p{font-size:11px}.cal-summary{padding:12px;flex-direction:column;gap:6px}.cal-summary strong{font-size:27px}.cal-summary span{font-size:10px}.cal-toolbar{align-items:start;flex-direction:column}.cal-toolbar h2{font-size:21px}.cal-grid{gap:3px}#view[data-page="Calendar"] button.cal-day{min-height:61px;padding:6px 2px;border-radius:10px}.cal-day-number{margin:0 auto 6px}.cal-event-stack{display:none}.cal-dots{display:flex;justify-content:center;gap:3px;flex-wrap:wrap}.cal-agenda-list{grid-template-columns:minmax(0,1fr)}.cal-legend{gap:9px}.cal-weekdays span{font-size:10px}}

/* Calendar banner text on the violet background. */
#view[data-page="Calendar"] .cal-overview .eyebrow{color:#d4ff60}
#view[data-page="Calendar"] .cal-filterbar{display:grid;grid-template-columns:1fr;justify-content:stretch;gap:10px;padding-bottom:18px}
.cal-filter-label{color:#84758e;font-size:12px;font-weight:600}
.cal-filters{display:flex;flex-wrap:nowrap;gap:8px;min-width:0;overflow-x:auto;padding:2px 3px 6px;scrollbar-width:thin}
.cal-filter-card{display:flex;flex:0 0 clamp(160px,calc((100% - 40px)/6),220px);align-items:center;justify-content:space-between;gap:8px;min-width:0;padding:11px 13px;border:1px solid #eee8f5;border-radius:13px;background:#faf9fc;color:#393340;text-align:left;font-size:12px;white-space:nowrap}
.cal-filter-card:hover{background:#f5f0ff;border-color:#d7c8f5;filter:none}
.cal-filter-card b{display:grid;place-items:center;min-width:23px;height:23px;padding:0 6px;border-radius:20px;background:#eee8f7;color:#66527b;font-size:10px;font-weight:600}
.cal-filter-card.cal-filter-selected{border-color:#8252ee;background:#f2ecff;color:#4f2ab5;box-shadow:inset 0 0 0 1px #8252ee}
.cal-filter-card.cal-filter-selected b{background:#6f42e8;color:white}
.cal-filter-card:focus-visible{outline:3px solid #7971bb;outline-offset:2px}
#view[data-page="Calendar"] .cal-overview h2{color:#ffffff}
#view[data-page="Calendar"] .cal-overview p{color:#e6dbfa}

:is(#view[data-page],dialog) button:is(.delete-action,.revoke-action,.danger-action){
  border:1px solid #ffb8b2;
  border-radius:999px;
  background:#fff;
  color:#b42318;
}
:is(#view[data-page],dialog) button:is(.delete-action,.revoke-action,.danger-action):hover{
  border-color:#ef8f88;
  background:#fff7f6;
  color:#b42318;
  filter:none;
}
#view[data-page] .tabs button.delete-action{margin-left:auto}
#view[data-page] .face-card button.delete-action{margin-left:8px}