/* TeachTally calendar workspace. Uses the journal's existing palette and fonts. */
:root{--sidebar:232px;--grid-line:#e1eae6;--hour:72px}
[hidden]{display:none!important}
.app-active{background:#edf4f1}
.app-active .topbar{display:none}
.app-active .example-banner{margin-left:var(--sidebar);min-height:32px;background:#dceee7;border:0}
.app-active .workspace{max-width:none;margin:0 0 0 var(--sidebar);padding:28px 28px 100px}
.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar);z-index:40;background:#f7faf8;border-right:1px solid #d7e3dd;display:flex;flex-direction:column;padding:32px 18px 20px;overflow-y:auto;overscroll-behavior:contain}
.sidebar-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--deep);font-size:22px;line-height:1.12;font-weight:800;letter-spacing:-.055em;padding:0 10px 32px}
.sidebar-brand img{width:39px;height:39px}
.sidebar-brand small{display:block;font-size:8px;font-weight:700;letter-spacing:.11em;color:var(--muted);margin-top:10px;white-space:nowrap}
.primary-nav{display:grid;gap:7px}
.nav-item{width:100%;min-height:48px;border:0;border-radius:10px;background:transparent;display:flex;gap:13px;align-items:center;text-align:left;padding:12px 15px;font-size:14px;font-weight:700;color:#59726a}
.nav-item svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round}
.nav-item[aria-current=page]{background:#dceee6;color:var(--deep)}
.nav-item:hover{background:#e8f1ec}
.sidebar-date{padding:26px 10px 23px;border-bottom:1px solid #dfe8e3}
.sidebar-date label{font-size:11px;margin:0 0 9px;color:var(--muted)}
.sidebar-date input{font-size:12px;border:1px solid #d5e0d9;border-radius:8px;padding:9px;min-height:42px;background:white;width:100%;color:var(--deep)}
.sidebar-class-heading{display:flex;justify-content:space-between;align-items:center;padding:15px 5px 3px 10px;font-size:9px;letter-spacing:.1em;font-weight:700;color:var(--muted)}
.sidebar-class-heading .icon-button{background:transparent;border:0;width:36px;height:40px;min-width:36px;font-size:20px}
.sidebar-classes{display:grid;gap:4px}
.sidebar-class{display:flex;align-items:center;gap:10px;text-align:left;background:transparent;border:0;padding:11px 12px;font-size:12px;line-height:1.5;border-radius:8px;min-height:44px;color:#3f5d53;width:100%}
.sidebar-class span{overflow-wrap:anywhere}
.sidebar-class:hover,.sidebar-class.active{background:#e7f1ea}
.class-dot{width:7px;height:7px;flex-shrink:0;border-radius:50%;background:var(--event-accent)}
.sidebar-bottom{margin-top:auto;padding:35px 10px 0}
.sidebar-private{display:flex;align-items:center;gap:8px;font-size:10px;color:var(--muted);padding:0 4px 16px}
.sidebar .header-actions{border:0;border-top:1px solid #dfe8e3;padding:12px 0 0;display:block}
.sidebar .account-button{width:100%;justify-content:flex-start;font-size:12px;gap:13px}
.sidebar-close,.sidebar-shade{display:none}
.dashboard-heading{margin-bottom:23px;min-height:33px}
.dashboard-heading h1{font-size:25px;letter-spacing:-.04em}
.dashboard-date{font-size:11px}
.week-calendar{padding:0!important;margin-bottom:0;border-radius:16px!important;overflow:hidden;box-shadow:0 5px 24px #193f3005!important}
.calendar-header{padding:22px 24px 18px;margin:0;gap:15px;flex-wrap:wrap}
.calendar-period{flex:1;min-width:210px}
.calendar-header h2{font-size:21px;margin:0 0 6px}
.calendar-header p{font-size:11px}
.calendar-controls{margin:0;gap:5px}
.calendar-controls .button,.calendar-controls .icon-button{height:40px;min-height:40px;border-color:#dce5df;background:white}
.calendar-controls .icon-button{width:36px;min-width:36px}
.calendar-controls .button{padding:8px 15px}
.calendar-views{display:flex;background:#f0f5f2;border:1px solid #dce5df;border-radius:9px;padding:3px}
.calendar-views button{border:0;border-radius:6px;background:transparent;font-size:11px;font-weight:700;min-height:34px;padding:8px 12px;color:#5e746a}
.calendar-views button[aria-pressed=true]{background:white;color:var(--deep);box-shadow:0 1px 5px #173f3312}
.calendar-subbar{display:flex;align-items:center;padding:0 24px 17px;gap:14px;color:var(--muted);font-size:10px}
.calendar-subbar select{width:auto;max-width:220px;min-height:35px;padding:7px 30px 7px 11px;border:1px solid #dce5df;border-radius:8px;font-size:11px;background-color:#f9fbfa}
.calendar-timezone{margin-left:auto;white-space:nowrap}
.calendar-scroll{border:0;border-top:1px solid var(--grid-line);border-bottom:1px solid var(--grid-line);border-radius:0;overflow:auto;max-height:none;height:calc(100dvh - 290px);min-height:380px;overscroll-behavior:contain;scrollbar-width:thin;scroll-padding-top:76px}
.time-grid{--day-count:7;min-width:840px;background:white}
.time-grid.single-day{min-width:0}
.time-header,.time-body,.untimed-row{display:grid;grid-template-columns:58px repeat(var(--day-count),minmax(0,1fr))}
.time-header{position:sticky;top:0;z-index:8;background:white;box-shadow:0 1px 0 var(--grid-line);height:76px}
.time-corner{display:grid;align-items:end;justify-content:center;padding-bottom:14px;font-size:9px;color:#73867d;border-right:1px solid var(--grid-line);background:#fff}
.time-day-heading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:0;border-right:1px solid var(--grid-line);background:white;color:#667f73;font-size:10px;text-transform:uppercase;letter-spacing:.06em}
.time-day-heading b{font-size:23px;letter-spacing:-.04em;font-weight:400;color:var(--deep);width:34px;height:34px;display:grid;place-items:center;border-radius:10px}
.time-day-heading.is-today b{background:var(--deep);color:white}
.time-day-heading.is-today{background:#f2f9f5;color:var(--deep)}
.time-day-heading:hover{background:#eaf5ee}
.time-axis{position:sticky;left:0;z-index:5;background:#fff;border-right:1px solid var(--grid-line);height:1728px}
.time-axis span{position:absolute;right:10px;font-size:9px;color:#718277;transform:translateY(-50%);background:white;padding:0 2px}
.time-axis span:first-child{transform:none;top:4px!important}
.time-day{position:relative;min-width:0;border-right:1px solid var(--grid-line);height:1728px}
.time-day.is-today{background:#fcfefc}
.time-slot{display:block;width:100%;height:36px;border:0;border-bottom:1px dashed #edf1ee;background:transparent;padding:0;text-align:left;border-radius:0}
.time-slot:nth-child(even){border-bottom:1px solid var(--grid-line)}
.time-slot span{opacity:0;color:#527767;font-size:10px;margin-left:8px}
.time-slot:hover,.time-slot:focus-visible{background:#e9f4ed}
.time-slot:hover span,.time-slot:focus-visible span{opacity:1}
.time-slot:focus-visible{outline:2px solid var(--deep);outline-offset:-2px}
.tone-0{--event-accent:#687f8a;--event-bg:#edf2f6;--event-text:#345365}
.tone-1{--event-accent:#97804b;--event-bg:#faf4e6;--event-text:#725c30}
.tone-2{--event-accent:#51998b;--event-bg:#e7f4ef;--event-text:#285d51}
.tone-3{--event-accent:#75895d;--event-bg:#f0f4e8;--event-text:#4a6036}
.tone-4{--event-accent:#b18083;--event-bg:#f9eeee;--event-text:#815557}
.planner-event{position:absolute;z-index:2;display:flex;flex-direction:column;gap:2px;align-items:stretch;text-align:left;overflow:hidden;border:1px solid color-mix(in srgb,var(--event-accent) 35%,white);border-left:3px solid var(--event-accent);border-radius:6px;background:var(--event-bg);color:var(--event-text);padding:5px 7px;line-height:1.35;min-height:18px;box-shadow:0 1px 2px #29473605;cursor:pointer;overflow-wrap:anywhere}
.planner-event strong{font-size:11px;font-weight:700;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;flex-shrink:0}
.event-time{font-size:9px;white-space:nowrap;flex-shrink:0;overflow:hidden;text-overflow:ellipsis}
.event-class{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.planner-event.completed{border-left-style:double;border-left-width:4px}
.planner-event:hover{filter:brightness(.975);box-shadow:0 3px 10px #233f3218;z-index:4}
.planner-event:focus-visible{outline:2px solid var(--deep);outline-offset:1px;z-index:7}
.short-event{gap:0;padding:1px 5px;flex-direction:row;align-items:center}
.short-event strong{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;flex:1}
.short-event .event-time,.short-event .event-class{display:none}
.now-line{position:absolute;height:2px;left:0;right:0;z-index:6;background:var(--red);pointer-events:none}
.now-line:before{content:'';display:block;position:absolute;left:-4px;top:-3px;width:8px;height:8px;background:var(--red);border-radius:50%}
.untimed-row{background:#fafcfb;border-bottom:1px solid var(--grid-line)}
.untimed-row>span{font-size:9px;color:var(--muted);padding:12px 5px;text-align:center}
.untimed-row>div{padding:5px;display:grid;gap:4px;align-content:start;border-left:1px solid var(--grid-line)}
.untimed-event{position:relative;inset:auto;width:100%;height:auto;min-height:40px;padding:5px}
.untimed-event .event-class,.untimed-event .event-time{display:none}
.calendar-footer{padding:12px 24px;min-height:40px;gap:10px}
.calendar-legend i{width:8px;height:8px;background:#fff;border:1px solid #6f8c7e;border-left:3px solid #6f8c7e;border-radius:2px}
.calendar-legend .legend-completed{background:#dcece2;border-left-style:double;border-left-width:4px}
.month-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));min-width:700px;background:#fff}
.month-weekday{text-align:center;font-size:10px;font-weight:700;color:var(--muted);padding:14px 0;background:#fff;position:sticky;top:0;z-index:3;border-bottom:1px solid var(--grid-line)}
.month-cell{min-height:118px;border-right:1px solid var(--grid-line);border-bottom:1px solid var(--grid-line);padding:7px;min-width:0}
.month-date{display:grid;place-items:center;width:30px;height:30px;border:0;border-radius:8px;background:transparent;font-size:12px;color:var(--deep);margin-bottom:5px}
.month-date:hover{background:#e0eee5}
.month-cell.is-today .month-date{background:var(--deep);color:white}
.month-cell.other-month{background:#f6f9f7}
.month-cell.other-month .month-date{color:#879b8e}
.month-event{position:relative;width:100%;min-height:0;padding:4px 5px;margin-bottom:4px;gap:1px;border-radius:4px}
.month-event strong{font-size:10px;white-space:nowrap;display:block;text-overflow:ellipsis;overflow:hidden}
.month-event .event-time{font-size:8px}
.month-event .event-class{display:none}
.month-more{border:0;background:transparent;padding:3px 5px;color:var(--deep);font-size:10px;min-height:28px}
.app-active .workspace-footer{padding-top:16px}
.lesson-fields{grid-template-columns:1.3fr 1fr .8fr .8fr 1fr}
.floating-add{z-index:25;min-height:52px;border-radius:15px;font-size:13px;padding:14px 20px;right:28px;bottom:22px}
@media(min-width:1600px){.app-active .workspace{padding:34px 42px 100px}.calendar-scroll{height:calc(100dvh - 310px)}.time-grid{min-width:0}}
@media(max-width:1100px){:root{--sidebar:204px}.sidebar{padding-left:12px;padding-right:12px}.sidebar-brand{font-size:20px;gap:10px;padding-left:7px}.sidebar-brand small{font-size:7px}.app-active .workspace{padding:24px 20px 100px}.calendar-header{padding:20px 18px 14px;gap:12px}.calendar-subbar{padding:0 18px 14px}.calendar-period{min-width:200px}.calendar-header h2{font-size:19px}.calendar-views button{padding:8px 10px}.calendar-scroll{height:calc(100dvh - 310px)}.lesson-fields{grid-template-columns:1fr 1fr}}
@media(max-width:850px){:root{--sidebar:0px;--nav:66px}.app-active .topbar{display:flex;min-height:66px;padding:9px 16px;gap:8px;position:sticky;top:0;z-index:30;border-top:0}.app-active .topbar .private-pill{display:none}.app-active .topbar .brand img{width:33px;height:33px}.app-active .topbar .brand{font-size:18px}.app-active .topbar .brand small{display:none}.app-active .topbar #back-button{display:none}.app-active .workspace{margin:0;padding:20px 18px 100px}.sidebar{width:260px;transform:translateX(-100%);visibility:hidden;transition:transform .2s,visibility .2s;z-index:60;padding-top:30px;padding-bottom:max(24px,env(safe-area-inset-bottom))}.sidebar-open .sidebar{transform:translateX(0);visibility:visible}.sidebar-close{display:grid;position:absolute;right:8px;top:8px;width:36px;height:36px;min-width:36px;background:transparent;border:0}.sidebar-open .sidebar-shade{display:block;position:fixed;inset:0;z-index:55;background:#173c3566;border:0;border-radius:0}.sidebar-open{overflow:hidden}.sidebar .account-button>span{display:inline}.sidebar-brand{font-size:22px}.sidebar-brand small{font-size:8px}.app-active .example-banner{margin:0}.calendar-scroll{height:calc(100dvh - 345px);min-height:350px}.calendar-period{min-width:200px}.dashboard-date{font-size:10px}}
@media(max-width:520px){.app-active .workspace{padding:18px 12px 98px}.dashboard-heading{margin-bottom:16px}.dashboard-heading h1{font-size:23px}.dashboard-date span:first-child{display:none}.calendar-header{padding:17px 14px 12px;display:grid;grid-template-columns:1fr auto;gap:12px}.calendar-period{grid-column:1/-1;min-width:0}.calendar-header h2{font-size:18px}.calendar-controls{margin:0;gap:3px}.calendar-controls .button{padding:8px 11px}.calendar-controls .icon-button{width:32px;min-width:32px}.calendar-views{justify-self:end}.calendar-views button{padding:7px 9px;font-size:10px}.calendar-subbar{padding:0 14px 13px;flex-wrap:wrap;gap:9px}.calendar-subbar select{max-width:180px}.calendar-timezone{font-size:9px}#calendar-hint{order:3;width:100%;font-size:10px}.calendar-scroll{height:calc(100dvh - 375px);min-height:320px}.calendar-footer{padding:11px 14px}.calendar-legend{font-size:9px;gap:9px}.time-grid.single-day .planner-event strong{font-size:13px}.time-grid.single-day .event-time,.time-grid.single-day .event-class{font-size:10px}.time-grid.single-day .short-event strong{font-size:11px}.calendar-footnote{font-size:9px}.floating-add{right:18px;bottom:calc(18px + env(safe-area-inset-bottom))}.sidebar-open .floating-add{visibility:hidden}.lesson-fields{grid-template-columns:1fr 1fr}.lesson-fields>div:last-child{grid-column:auto}.lesson-fields input,.lesson-fields select{font-size:16px}}
@media(prefers-reduced-motion:reduce){.sidebar{transition:none}}
@media print{.sidebar{display:none}.app-active .workspace{margin:0;padding:0}.calendar-scroll{height:auto;overflow:visible}.sidebar-shade{display:none}}
/* Leave clear space for the floating action below the calendar panel. */
.app-active{--calendar-chrome:320px;--demo-space:0px}
.app-active:has(#example-banner:not([hidden])){--demo-space:48px}
.calendar-scroll{height:calc(100dvh - var(--calendar-chrome) - var(--demo-space));min-height:340px}
@media(max-width:1100px){.app-active{--calendar-chrome:330px}}
@media(max-width:850px){.app-active{--calendar-chrome:390px}}
@media(max-width:520px){.app-active{--calendar-chrome:450px}.app-active:has(#example-banner:not([hidden])){--demo-space:54px}.calendar-scroll{min-height:280px}}

/* Constrain native iPad date/time controls to their grid tracks. */
.lesson-fields{grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;align-items:end}
.lesson-fields>div{min-width:0;width:100%}
.lesson-fields input,.lesson-fields select{box-sizing:border-box;display:block;width:100%;min-width:0;max-width:100%;min-height:48px}
.lesson-fields input[type=date],.lesson-fields input[type=time]{appearance:none;-webkit-appearance:none;min-inline-size:0;inline-size:100%;max-inline-size:100%}
.lesson-fields input::-webkit-date-and-time-value{min-width:0;text-align:left}
.lesson-fields label{min-height:24px;line-height:1.5;overflow-wrap:anywhere}
.class-actions{display:flex;justify-content:flex-end;margin:-12px 0 20px}
.class-actions .danger{border:1px solid #e4b7bd;background:#fff;color:#a52b39;min-height:44px}
@media(max-width:1200px){.lesson-fields{grid-template-columns:repeat(2,minmax(0,1fr))}.lesson-fields>div:first-child{grid-column:1/-1}.lesson-fields>div:last-child{grid-column:auto}}
@media(max-width:540px){.lesson-fields{grid-template-columns:minmax(0,1fr);gap:16px}.lesson-fields>div{grid-column:1!important}.class-actions{margin:0 0 20px}}