.calendar-layout { display:grid; grid-template-columns:190px minmax(0,1fr); gap:16px; align-items:start; }
.calendar-ribbon{display:flex;flex-wrap:wrap;align-items:stretch;gap:0;margin:0 0 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface,#fff);color:var(--ink,#172333);padding:10px 6px 6px;min-width:0}
.calendar-ribbon-group{display:flex;flex-direction:column;justify-content:space-between;gap:6px;padding:0 12px;border-right:1px solid var(--line);min-width:0}
.calendar-ribbon-group:last-child{border-right:0}
.calendar-ribbon-group>small{font-size:11px;color:var(--muted,#526274);text-align:center}
.calendar-ribbon-buttons{display:flex;flex-wrap:wrap;align-items:stretch;gap:6px;min-width:0}
.calendar-ribbon button{min-height:44px;font-weight:650}
.calendar-ribbon .calendar-view-switch{display:flex;flex-wrap:wrap;gap:4px;background:transparent;padding:0;border:0;border-radius:0}
.calendar-ribbon .calendar-view-switch button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:64px;min-height:66px;padding:7px 9px;border:1px solid transparent;border-radius:5px;font-size:12px;background:transparent;color:var(--ink,#172333)}
.calendar-ribbon .calendar-view-switch button::before{content:'';display:block;width:24px;height:23px;border:1.5px solid currentColor;border-radius:2px;background:linear-gradient(currentColor,currentColor) 0 5px/100% 1.5px no-repeat;opacity:.9}
.calendar-ribbon .calendar-view-switch button[data-calendar-view="week"]::before,.calendar-ribbon .calendar-view-switch button[data-calendar-view="workweek"]::before{background:linear-gradient(currentColor,currentColor) 0 5px/100% 1.5px no-repeat,repeating-linear-gradient(to right,transparent 0,transparent 4px,currentColor 4px,currentColor 5px)}
.calendar-ribbon .calendar-view-switch button[data-calendar-view="month"]::before{background:linear-gradient(currentColor,currentColor) 0 5px/100% 1.5px no-repeat,repeating-linear-gradient(to right,transparent 0,transparent 5px,currentColor 5px,currentColor 6px),repeating-linear-gradient(to bottom,transparent 0,transparent 6px,currentColor 6px,currentColor 7px)}
.calendar-ribbon .calendar-view-switch button[data-calendar-view="list"]::before{background:repeating-linear-gradient(to bottom,transparent 0,transparent 5px,currentColor 5px,currentColor 6px)}
.calendar-ribbon .calendar-view-switch button.active{background:var(--oj-light,#edf0e3);border-color:var(--oj-dark,#73794c);color:var(--ink,#172333)}
.calendar-ribbon .calendar-view-switch button:hover{border-color:var(--oj-dark,#73794c)}
.calendar-outlook-navigation{gap:10px;min-width:0}
.calendar-outlook-navigation .calendar-date-nav{display:flex;gap:6px;flex-wrap:wrap;min-width:0}
.calendar-outlook-navigation .calendar-date-nav .calendar-period{min-width:0;white-space:normal;overflow-wrap:anywhere}
@media(max-width:800px){.calendar-outlook-navigation .calendar-date-nav{display:flex!important;flex-wrap:wrap;width:100%}.calendar-outlook-navigation .calendar-date-nav .calendar-period{flex:1 1 150px;text-align:left}}
.calendar-outlook-navigation .calendar-period{margin-left:8px;font-size:16px;font-weight:700}
.calendar-outlook-navigation .calendar-controls{min-width:0;flex-wrap:wrap}
html[data-oj-theme="dark"] .calendar-ribbon .calendar-view-switch button.active{background:#3e4936;color:var(--ink,#f1f5f9)}
@media(max-width:800px){.calendar-ribbon-group{padding:0 8px}.calendar-ribbon-group:has(.calendar-view-switch){flex:1 1 100%;border:0;border-top:1px solid var(--line);margin-top:8px;padding-top:8px}.calendar-ribbon .calendar-view-switch{width:100%}.calendar-ribbon .calendar-view-switch button{flex:1 1 56px;min-width:0;font-size:11px;padding:6px 4px}.calendar-ribbon-group:has([data-reminder-settings]){margin-top:8px}.calendar-outlook-navigation .calendar-period{font-size:14px}}
.calendar-people { border:1px solid var(--line); border-radius:10px; padding:14px; background:#fff; }
.calendar-people h3 { margin:0 0 10px; font-size:13px; }
.calendar-people p { font-size:11px; color:#647180; }
.calendar-person { display:flex; align-items:center; gap:8px; padding:8px 0; font-size:12px; overflow-wrap:anywhere; }
.calendar-person input { width:16px; height:16px; flex-shrink:0; accent-color:var(--person-color); }
.calendar-person-dot { width:9px; height:9px; background:var(--person-color); border-radius:50%; flex-shrink:0; }
.calendar-person-dots { display:flex; flex-wrap:wrap; gap:4px; margin-top:3px; min-height:10px; }
.calendar-person-dots .calendar-person-dot { width:10px; height:10px; border:1px solid #fff; box-shadow:0 0 0 1px #26364a55; }
.calendar-directory { max-height:480px; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
.calendar-people { background:var(--surface,#fff); color:var(--ink,#151921); }
.calendar-people p { line-height:1.5; }
.calendar-layout .calendar-month { overflow:hidden; }
.calendar-horizontal-viewport { max-width:100%; min-width:0; overflow-x:scroll; overscroll-behavior-x:contain; scrollbar-width:auto; scrollbar-color:#52677e #e4eaf0; padding-bottom:8px; touch-action:pan-x pan-y; }
.calendar-horizontal-viewport::-webkit-scrollbar { height:14px; }
.calendar-horizontal-viewport::-webkit-scrollbar-track { background:#e4eaf0; border-radius:7px; }
.calendar-horizontal-viewport::-webkit-scrollbar-thumb { background:#52677e; border:3px solid #e4eaf0; border-radius:7px; }
.calendar-horizontal-viewport>.calendar-grid { min-width:680px; }
.calendar-horizontal-controls { display:grid; grid-template-columns:44px minmax(0,1fr) 44px; align-items:center; gap:8px; padding:8px 0; color:var(--ink,#151921); }
.calendar-horizontal-controls[hidden] { display:none; }
.calendar-horizontal-controls label { display:grid; gap:2px; font-size:11px; min-width:0; }
.calendar-horizontal-controls input { display:block; width:100%; min-width:0; height:34px; margin:0; accent-color:#315f9a; touch-action:none; }
.calendar-horizontal-controls button { min-height:44px; border:1px solid var(--line,#acb9c6); border-radius:7px; background:var(--surface,#fff); color:var(--ink,#151921); font-size:20px; cursor:pointer; }
.calendar-horizontal-controls button:disabled { opacity:.4; cursor:default; }
.calendar-horizontal-controls :focus-visible,.calendar-horizontal-viewport:focus-visible { outline:2px solid #315f9a; outline-offset:2px; }
.calendar-people button { font-size:11px; padding:5px 9px; border:1px solid var(--line); border-radius:6px; background:#f3f5f7; cursor:pointer; }
.calendar-layout .calendar-month { min-width:0; margin:0; }
.calendar-toolbar .calendar-view-switch { background:#f3f5f7; }
.calendar-view-switch button { min-height:34px; }
.calendar-load-status { border:1px solid #a86b18; background:#fff8e8; color:#5b3b12; border-radius:8px; padding:12px; margin-bottom:12px; font-size:12px; }
.calendar-load-status p { margin:6px 0; }
.calendar-delivery-actions { display:flex; flex-wrap:wrap; gap:7px; }
.calendar-delivery-actions button { font-size:11px; min-height:34px; }
.calendar-view-switch button:focus-visible,.calendar-person input:focus-visible,[data-calendar-create]:focus-visible { outline:2px solid #315f9a; outline-offset:2px; }
.calendar-day-number[data-calendar-create] { border:0; border-radius:4px; background:transparent; cursor:pointer; min-width:28px; min-height:26px; text-align:center; }
.calendar-day-number[data-calendar-create]:hover { background:#e4edf9; }
.calendar-slot { display:block; position:absolute; left:0; width:100%; height:calc(var(--calendar-hour-height) / 2); border:0; border-radius:0; background:transparent; cursor:pointer; z-index:0; }
.calendar-slot:hover,.calendar-slot:focus-visible { background:#dbeafb80; outline:2px solid #547fb3; outline-offset:-2px; }
.calendar-now-line { pointer-events:none; }
.calendar-dst-tick { position:absolute; right:3px; z-index:2; pointer-events:none; font-size:10px; padding:1px 3px; background:#fff; color:#40536b; }
.calendar-dst-note,.calendar-all-day-hint { display:block; margin:8px 0; font-size:12px; color:#40536b; }
.calendar-dst-view .calendar-hour-labels { font-size:10px; }
.calendar-time-choice { display:grid; gap:5px; margin-top:6px; padding:7px; border:1px solid #b77c27; border-radius:5px; font-size:12px; }
.calendar-time-choice[hidden] { display:none; }
.calendar-time-choice select { min-width:0; max-width:100%; }
/* High-contrast calendar grid; appearance tokens stay owned by appearance. */
.calendar-layout .calendar-time-view{--calendar-grid-hour:#8c98a5;--calendar-grid-half:#bbc3cc;--calendar-grid-off:#eef0f3;--calendar-occupied-fill:rgba(115,121,76,.16);--calendar-occupied-edge:#78804b}
.calendar-layout .calendar-time-column{border-right-color:var(--calendar-grid-hour);background:repeating-linear-gradient(to bottom,transparent 0,transparent calc(var(--calendar-hour-height) - 1px),var(--calendar-grid-hour) calc(var(--calendar-hour-height) - 1px),var(--calendar-grid-hour) var(--calendar-hour-height)),repeating-linear-gradient(to bottom,transparent 0,transparent calc(var(--calendar-hour-height) / 2 - 1px),var(--calendar-grid-half) calc(var(--calendar-hour-height) / 2 - 1px),var(--calendar-grid-half) calc(var(--calendar-hour-height) / 2)),linear-gradient(to bottom,var(--calendar-grid-off) 0,var(--calendar-grid-off) var(--calendar-workday-start),transparent var(--calendar-workday-start),transparent var(--calendar-workday-end),var(--calendar-grid-off) var(--calendar-workday-end),var(--calendar-grid-off) 100%)}
.calendar-layout .calendar-hour-labels{border-right-color:var(--calendar-grid-hour);background:var(--surface,#fff)}
.calendar-layout .calendar-time-view :is(.calendar-time-header,.calendar-all-day-grid,.calendar-time-grid){grid-template-columns:84px repeat(var(--calendar-days),minmax(0,1fr))}
.calendar-layout .calendar-hour-labels span{font-size:12px;font-weight:700;color:var(--ink,#151921);right:5px;line-height:1.2;white-space:nowrap}
.calendar-layout .calendar-dst-tick{font-size:11px;font-weight:650;background:var(--surface,#fff);color:var(--ink,#151921)}
.calendar-all-day-occupancy{position:absolute;inset:0;z-index:0;background:var(--calendar-occupied-fill);box-shadow:inset 3px 0 var(--calendar-occupied-edge),inset -1px 0 var(--calendar-occupied-edge);pointer-events:none}
.calendar-layout .calendar-slot{z-index:1}
.calendar-layout .calendar-time-entry{z-index:3}
.calendar-layout .calendar-time-entry:is(:hover,:focus-visible){z-index:6}
.calendar-layout .calendar-all-day-info{min-height:25px;font-size:11px;font-weight:650;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.calendar-layout .calendar-all-day-info strong,.calendar-layout .calendar-all-day-info small{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.3}
.calendar-layout .calendar-all-day-info strong{font-size:11px}.calendar-layout .calendar-all-day-info small{font-size:10px;font-weight:600}.calendar-layout .calendar-all-day-info:has(small){min-height:36px;max-height:42px}
#event-list>button.event-row[data-dashboard-event]{width:100%;text-align:left;cursor:pointer;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit}
#event-list>button.event-row[data-dashboard-event]:focus-visible{outline:2px solid var(--oj-dark);outline-offset:2px}
html[data-oj-theme="dark"] .calendar-layout .calendar-time-view{--calendar-grid-hour:#91a0b5;--calendar-grid-half:#5d6c82;--calendar-grid-off:#19212d;--calendar-occupied-fill:rgba(184,193,139,.2);--calendar-occupied-edge:#b8c18b}
html[data-oj-theme="dark"] .calendar-layout .calendar-time-column{background:repeating-linear-gradient(to bottom,transparent 0,transparent calc(var(--calendar-hour-height) - 1px),var(--calendar-grid-hour) calc(var(--calendar-hour-height) - 1px),var(--calendar-grid-hour) var(--calendar-hour-height)),repeating-linear-gradient(to bottom,transparent 0,transparent calc(var(--calendar-hour-height) / 2 - 1px),var(--calendar-grid-half) calc(var(--calendar-hour-height) / 2 - 1px),var(--calendar-grid-half) calc(var(--calendar-hour-height) / 2)),linear-gradient(to bottom,var(--calendar-grid-off) 0,var(--calendar-grid-off) var(--calendar-workday-start),var(--surface) var(--calendar-workday-start),var(--surface) var(--calendar-workday-end),var(--calendar-grid-off) var(--calendar-workday-end),var(--calendar-grid-off) 100%)!important}
#event-form .calendar-duration{display:grid;grid-template-columns:1fr 1fr;gap:8px;min-width:0}
#event-form .calendar-duration label{min-width:0}
#event-form>.form-row:has([data-calendar-link-anchor]){grid-template-columns:minmax(0,1fr)}
#event-form .calendar-checklist-field{display:grid;gap:6px;min-width:0;margin-bottom:10px;font-size:12px;font-weight:600}
#event-form .calendar-checklist{display:grid;gap:5px;min-width:0;padding:7px;border:1px solid var(--line);border-radius:7px;background:var(--surface,#fff);color:var(--ink,#151921)}
#event-form .calendar-checklist>input{min-height:36px;min-width:0;width:100%;font-size:13px}
#event-form .calendar-checklist-options{max-height:150px;overflow-y:auto;overscroll-behavior:contain}
#event-form .calendar-checklist-option,#event-form .calendar-online-toggle{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:10px;margin:0;padding:7px 3px;min-height:44px;font-size:13px;font-weight:600;cursor:pointer}
#event-form .calendar-checklist-option>span{min-width:0;overflow-wrap:anywhere;color:var(--ink,#151921)}
#event-form .calendar-checklist-option>input,#event-form .calendar-online-toggle>input{width:20px;height:20px;min-height:20px;flex:0 0 20px;margin:0;accent-color:var(--oj-dark)}
#event-form .calendar-checklist:has(input:disabled){opacity:.7}
#event-form .calendar-checklist-option:focus-within{outline:2px solid var(--oj-dark);outline-offset:-2px;border-radius:4px}
#event-form [data-calendar-delivery] small,#event-form .calendar-all-day-hint{color:var(--muted);font-size:12px;line-height:1.5}
#event-form [data-calendar-delivery] a{display:block;padding:6px 0;overflow-wrap:anywhere;color:var(--ink)}
@media(max-width:560px){#event-form>.form-row{grid-template-columns:minmax(0,1fr)}#event-form .calendar-duration{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}#event-form .calendar-checklist-options{max-height:128px}}
.calendar-entry.event,.calendar-time-entry.event,.calendar-agenda-row[data-calendar-event] { border-left:3px solid var(--person-color,#5d762b); background:var(--person-tint,#eef0e5); color:#203246; }
.calendar-participation { border:1px solid var(--line); border-radius:8px; padding:12px; }
.calendar-participation legend { font-size:13px; font-weight:650; }
.calendar-owner { border:1px solid var(--line); border-radius:8px; padding:12px; margin:10px 0; }
.calendar-owner summary { cursor:pointer; min-height:32px; font-size:13px; font-weight:650; }
.calendar-owner label { margin-top:8px; }
.calendar-owner small { display:block; font-size:12px; line-height:1.5; color:var(--muted,#647180); }
#event-form .calendar-recurrence { min-width:0; margin:10px 0; }
#event-form .calendar-recurrence [hidden] { display:none; }
#event-form .calendar-recurrence-weekdays { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
#event-form .calendar-recurrence-weekdays label { display:flex; align-items:center; gap:5px; margin:0; min-height:44px; padding:5px; border:1px solid var(--line); border-radius:5px; }
#event-form .calendar-recurrence-weekdays input { width:18px; height:18px; min-height:18px; margin:0; }
#event-form .calendar-checklist-actions { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
#event-form .calendar-checklist-actions button { min-height:40px; padding:6px 9px; border:1px solid var(--line); border-radius:6px; font:inherit; font-size:12px; cursor:pointer; background:var(--surface,#fff); color:var(--ink,#151921); }
#event-form .calendar-checklist-actions button:disabled { opacity:.5; cursor:default; }
#event-form .calendar-checklist-actions small { margin-left:auto; }
html[data-oj-theme="dark"] .calendar-entry.event,html[data-oj-theme="dark"] .calendar-time-entry.event,html[data-oj-theme="dark"] .calendar-agenda-row[data-calendar-event] { color:var(--ink,#f1f5f9); }
.calendar-participation small { display:block; color:#647180; margin:5px 0; }
.calendar-participation label { margin-bottom:10px; }
.calendar-form-check { display:flex!important; align-items:center; gap:8px; }
.calendar-form-check input { width:16px!important; }
.calendar-view-workweek .calendar-time-view { min-width:650px; }
.calendar-view-workweek { overflow-x:auto; overscroll-behavior-x:contain; }
.calendar-view-workweek .calendar-time-header,.calendar-view-workweek .calendar-all-day-grid,.calendar-view-workweek .calendar-time-grid { grid-template-columns:58px repeat(5,minmax(0,1fr)); }
@media(max-width:800px) { .calendar-layout { grid-template-columns:minmax(0,1fr); }.calendar-people { display:flex; flex-wrap:wrap; gap:8px 16px; }.calendar-people h3,.calendar-people p { width:100%; margin:0; }.calendar-person { padding:3px 0; }.calendar-layout .calendar-month { overflow:hidden; } }
@media(max-width:560px) { #module-view:has(.calendar-layout),#module-view:has([data-calendar-retry]) { padding-top:12px; scroll-margin-top:80px; }.calendar-delivery-actions button { min-height:40px; }.calendar-person { min-height:32px; } }
@media(max-width:800px) { .calendar-people .calendar-directory { width:100%; max-height:180px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 10px; }.calendar-person { min-height:44px; }.calendar-people button { min-height:40px; } }
@media(max-width:560px) { .calendar-horizontal-viewport .calendar-grid .calendar-entry { font-size:11px; text-align:left; }.calendar-horizontal-viewport .calendar-grid .calendar-entry::before { display:none; }.calendar-horizontal-viewport .calendar-grid .calendar-day { min-height:100px; }.calendar-horizontal-viewport .calendar-grid .calendar-day-number { font-size:12px; }#event-form .calendar-checklist-actions button { min-height:44px; } }