:root { --planit-header-height:88px; }
html { scrollbar-gutter:stable; scroll-padding-top:calc(var(--planit-header-height) + 16px); }
.planit-shell-header {
  position:sticky;
  top:0;
  z-index:40;
  min-height:var(--planit-header-height);
  background:var(--white,#fff);
  border-bottom:1px solid var(--line);
}
.planit-header-inner {
  min-height:calc(var(--planit-header-height) - 1px);
  max-width:1350px;
  margin-inline:auto;
  padding:10px 20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  box-sizing:border-box;
}
.planit-header-inner .brand { font:800 1rem/1.2 "Segoe UI",sans-serif; margin:0; }
.planit-header-year { margin-inline-start:6px; font:700 14px/1.2 "Segoe UI",sans-serif; white-space:nowrap; }
.planit-header-strap { color:var(--muted); font:13px/1.3 "Segoe UI",sans-serif; margin-top:5px; }
.planit-shell {
  max-width:1350px;
  margin-inline:auto;
  padding:20px;
  display:grid;
  grid-template-columns:205px minmax(0,1fr);
  gap:20px;
  align-items:start;
  box-sizing:border-box;
}
.planit-shell .planit-nav {
  position:sticky;
  top:calc(var(--planit-header-height) + 20px);
  display:flex;
  flex-direction:column;
  gap:8px;
  z-index:10;
}
.planit-shell .planit-nav :is(a,button) {
  display:flex;
  align-items:center;
  min-height:46px;
  padding:8px 12px;
  border:1px solid var(--line);
  border-left:4px solid transparent;
  border-radius:5px;
  background:var(--white,#fff);
  color:var(--ink);
  font:700 15px/1.25 "Segoe UI",sans-serif;
  text-align:left;
  text-decoration:none;
  box-sizing:border-box;
}
.planit-shell .planit-nav :is(a,button):is(:hover,.active) {
  background:var(--mint);
  color:var(--ink);
  border-left-color:#246661;
  box-shadow:none;
}
.planit-shell-content { min-width:0; }
.planit-shell-content > .wrap,.planit-shell-content #app .wrap { width:100%; }
.flashcards-page .planit-shell-content .intro { padding-top:0; }
.planit-shell-content > main.planit-guide-content { width:auto; max-width:none; padding:0; margin:0; }
.planit-tool-actions { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:14px; }
.planit-tool-actions a { display:inline-flex; align-items:center; text-decoration:none; }
.planit-profile-caption { color:var(--muted); font:700 14px/1.3 "Segoe UI",sans-serif; }
@media(max-width:1050px) {
  .flashcards-page .planit-shell-content .layout { grid-template-columns:1fr; }
}
@media(max-width:1024px) {
  .planit-shell { grid-template-columns:minmax(0,1fr); padding:0 16px 16px; gap:14px; }
  .planit-header-inner { padding-inline:16px; }
  .planit-shell .planit-nav {
    top:var(--planit-header-height);
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:6px;
    overflow:visible;
    background:var(--paper,#f2f6f3);
    padding:7px 0;
  }
  .planit-shell .planit-nav :is(a,button) {
    justify-content:center;
    white-space:normal;
    min-width:0;
    text-align:center;
    padding:8px 5px;
  }
  html { scroll-padding-top:calc(var(--planit-header-height) + 76px); }
}
@media print {
  .planit-shell { display:block; padding:0; }
  .planit-shell-header { position:static; }
  .planit-shell .planit-nav,.planit-tool-actions { display:none; }
}

/* The online shell is visible before the account and planner data load. */
html.planit-online-loading #profielScherm { display:none !important; }
html.planit-online-loading #plannerApp[hidden] { display:block !important; }
html.planit-online-loading #planitFooter { visibility:hidden; }
.planit-shell-content > #cloudGate { margin:0 0 16px; }

.planit-shell { min-height:calc(100dvh - var(--planit-header-height)); }
@media screen and (min-width:1025px) {
  .planit-shell .planit-nav {
    position:fixed;
    left:max(20px,calc((100% - 1350px) / 2 + 20px));
    width:205px;
    max-height:calc(100dvh - var(--planit-header-height) - 40px);
    overflow:auto;
  }
  .planit-shell > .planit-shell-content { grid-column:2; }
}

@media screen and (max-width:560px) {
  :root { --planit-header-height:74px; }
  html { scrollbar-gutter:auto; scroll-padding-top:calc(var(--planit-header-height) + 128px); }
  .planit-header-inner { padding:8px 12px; gap:6px; }
  .planit-header-strap { font-size:12px; }
  .planit-header-year { font-size:12px; }
  .planit-shell { padding-inline:12px; }
  .planit-shell .planit-nav { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .planit-shell .planit-nav :is(a,button) { font-size:14px; }
  .planit-shell-content :is(input,select,textarea) { font-size:max(16px,1em); }
  .planit-shell-content .scroll { max-width:100%; }
  .planit-shell-content :is(.toolbar,.bar,.study-tool-actions) > * { max-width:100%; }
  .planit-shell-content :is(.day,.agenda-day,.task,.study-tool) { overflow-wrap:anywhere; }
  .planit-shell-content .months { grid-template-columns:repeat(7,minmax(0,1fr)); }
  .planit-shell-content .months .tcount { font-size:.625rem; }
  .planit-shell-content .day .event { line-height:1.15; }
}
@media screen and (max-height:480px) and (max-width:1024px) {
  .planit-shell .planit-nav { position:static; }
}