/* One page frame for every portal page. Presentation only.
   1. The menu sits at the same height with the same row size on every page.
   2. The top bar has one height, one title style and the same buttons.
   3. The page heading has one size.
   4. The background is the same. */

/* 1. Menu: brand block and row size */
html.fl-unified body #sidebar{padding-top:16px!important;padding-left:12px!important;padding-right:12px!important}
/* The brand block has one fixed shape from the first paint, so the logo and the two words never move. */
html.fl-unified body #sidebar .sb-brand,
html.fl-unified body .side > .logo{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;gap:7px!important;box-sizing:border-box!important;height:66px!important;min-height:66px!important;margin:0!important;padding:6px 0 16px!important;font-family:'Fira Sans',system-ui,sans-serif!important}
html.fl-unified body .side > .logo{margin-top:16px!important;padding-left:12px!important;padding-right:12px!important}
html.fl-unified body #sidebar .sb-brand > a{display:block!important;flex:0 0 30px!important;width:30px!important;height:30px!important;line-height:0!important}
html.fl-unified body #sidebar .sb-brand img,
html.fl-unified body .side > .logo .mark img{display:block!important;width:30px!important;height:30px!important;margin:0!important}
html.fl-unified body .side > .logo .mark{flex:0 0 30px!important;width:30px!important;height:30px!important;border-radius:0!important;background:url(../media/logo.png) center/30px 30px no-repeat!important;color:transparent!important;font-size:0!important;line-height:0!important}
html.fl-unified body #sidebar .sb-brand > span,
html.fl-unified body .side > .logo > div:not(.mark){display:block!important;min-width:0!important;font-size:16px!important;line-height:25.6px!important}
html.fl-unified body #sidebar .sb-brand b,
html.fl-unified body .side > .logo .t1{display:block!important;font-size:16.5px!important;font-weight:800!important;line-height:18.15px!important;letter-spacing:0!important;text-transform:none!important;color:var(--navy-deep,#123077)!important}
html.fl-unified body #sidebar .sb-brand small,
html.fl-unified body .side > .logo .t2{display:inline!important;font-size:10px!important;font-weight:600!important;line-height:16px!important;letter-spacing:1.8px!important;text-transform:uppercase!important;color:var(--muted,#5a6b84)!important}
html.fl-unified body #sidebar .sb-brand > button,
html.fl-unified body .side > .logo > button{margin-left:auto!important}
html.fl-unified body .side > .fl-install-card{margin-top:3px!important}
html.fl-unified body .side > .nav{padding-top:3px!important}
/* Every menu row is 44 pixels tall on every page (a label that needs two lines grows). */
html.fl-unified body #sidebar > a.sb-item,
html.fl-unified body #sidebar .sb-foot > a.sb-item,
html.fl-unified body .side > .nav > a{box-sizing:border-box!important;min-height:44px!important;padding:11px 12px!important;gap:11px!important;font-size:14px!important;font-weight:600!important;line-height:22px!important}
html.fl-unified body #sidebar > a.sb-item svg,
html.fl-unified body .side > .nav > a svg{width:19px!important;height:19px!important}

/* The menu is drawn in place from the first moment, instead of sliding in after sign-in is confirmed */
@media (min-width:980px){
  html.fl-unified.fl-app body:not(.utility-nav-shell):not(.fl-sidebar-collapsed) > .sidebar{transform:none!important;transition:none!important}
  html.fl-unified.fl-app body:not(.utility-nav-shell):not(.fl-sidebar-collapsed) > .topbar,
  html.fl-unified.fl-app body:not(.utility-nav-shell):not(.fl-sidebar-collapsed) > main{margin-left:232px}
  html.fl-unified.fl-app body:not(.utility-nav-shell) > .sb-scrim{display:none!important}
}

/* 2. Top bar */
html.fl-unified body .fl-unified-bar{box-sizing:border-box!important;min-height:58px!important;padding-top:8px!important;padding-bottom:8px!important;padding-left:20px!important;padding-right:20px!important;display:flex!important;align-items:center!important;gap:10px!important;background:var(--paper)!important;border-bottom:1px solid var(--line)!important;box-shadow:none!important}
html.fl-unified body .fl-unified-bar .fl-bar-title{margin:0!important;padding:0!important;font-family:'Fira Sans',system-ui,sans-serif!important;font-size:18px!important;font-weight:800!important;line-height:1.3!important;letter-spacing:0!important;text-transform:none!important;color:var(--navy-deep)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
html.fl-unified body .fl-unified-bar .fl-bar-title.fl-bar-brand{flex:1 1 auto}
html.fl-unified body .fl-unified-bar .fl-bar-title small{display:none!important}
html.fl-unified:not(.fl-titled) body .fl-unified-bar .fl-bar-brand,
html.fl-unified:not(.fl-titled) body .topbar > .brand{visibility:hidden}
html.fl-unified body .fl-unified-bar .fl-bar-tools{display:flex;align-items:center;gap:8px;margin-left:auto;flex:none}
/* The menu already shows the logo, so the top bar does not repeat it. */
html.fl-unified body .fl-unified-bar > a[title="Home"]{display:none!important}
@media (max-width:600px){
  html.fl-unified body .fl-unified-bar{padding-left:12px!important;padding-right:12px!important;gap:8px!important}
  html.fl-unified body .fl-unified-bar .fl-bar-title{font-size:17px!important}
}

/* The menu button looks the same on every page */
html.fl-unified body .fl-unified-bar > #btn-menu,
html.fl-unified body .fl-unified-bar > .fl-legacy-toggle{width:38px!important;height:38px!important;min-width:38px!important;padding:0!important;border:0!important;border-radius:10px!important;background:transparent!important;box-shadow:none!important;color:var(--muted)!important}

/* 3. Page heading */
html.fl-unified body .fl-page-title{font-family:'Fira Sans',system-ui,sans-serif!important;font-size:24px!important;font-weight:800!important;line-height:1.25!important;letter-spacing:0!important;color:var(--navy-deep)!important}
@media (max-width:600px){html.fl-unified body .fl-page-title{font-size:22px!important}}
html.fl-unified body .fl-page-title.fl-dup-title{display:none!important}

/* 4. Background */
html.fl-unified body{background:radial-gradient(1100px 480px at 88% -12%,rgba(27,71,184,.10),transparent 60%),radial-gradient(900px 420px at -12% 18%,rgba(201,151,0,.08),transparent 55%),var(--paper)!important;background-repeat:no-repeat!important}
html.fl-unified[data-theme="dark"] body,html.fl-unified body.dark{background:radial-gradient(1100px 480px at 88% -12%,rgba(92,133,219,.13),transparent 60%),radial-gradient(900px 420px at -12% 18%,rgba(224,178,58,.06),transparent 55%),var(--paper)!important;background-repeat:no-repeat!important}

/* Daily Dashboard on phones and small tablets: account buttons in the top row, then the greeting, then the exam countdowns */
@media (max-width:979.98px){
  html.fl-unified body header.dashboard-topbar{display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;grid-template-areas:"menu tools" "title title" "count count"!important;align-items:center!important;row-gap:12px!important;column-gap:10px!important}
  html.fl-unified body header.dashboard-topbar .dashboard-header-tools,
  html.fl-unified body header.dashboard-topbar .dashboard-account-row{display:contents!important}
  html.fl-unified body header.dashboard-topbar > .fl-legacy-toggle{grid-area:menu!important;margin:0!important}
  html.fl-unified body header.dashboard-topbar .dashboard-heading{grid-area:title!important;min-width:0!important;margin:0!important}
  html.fl-unified body header.dashboard-topbar #greet{white-space:normal!important;font-size:22px!important;line-height:1.25!important}
  html.fl-unified body header.dashboard-topbar .account-tools{grid-area:tools!important;justify-self:end!important;margin:0!important}
  html.fl-unified body header.dashboard-topbar .exam-countdowns{grid-area:count!important;width:100%!important;margin:0!important}
}

/* Menu pieces that are part of the page from the start (used by the Readers page), styled the same as the shared menu script does */
html.fl-unified body #sidebar > a.sb-item[hidden]{display:none!important}
html.fl-unified body #sidebar > .fl-nav-section{margin:17px 12px 8px;color:var(--navy-deep,#193b84);font-size:17px;font-weight:700;line-height:1.3;letter-spacing:0;text-transform:none}
html.fl-unified body #sidebar > .fl-nav-next-section{margin-top:12px!important;position:relative}
html.fl-unified body #sidebar > .fl-nav-next-section:before{content:"";position:absolute;left:12px;right:12px;top:-7px;border-top:1px solid var(--line,#d5e0f0)}

/* Section headings look the same in both menu layouts */
html.fl-unified body .side > .nav > .fl-nav-section{margin:17px 12px 8px!important;color:var(--navy-deep,#193b84);font-size:17px!important;font-weight:700!important;line-height:1.3!important;letter-spacing:0!important;text-transform:none!important}
html.fl-unified body .side > .nav > .fl-nav-next-section{margin-top:12px!important;position:relative}
html.fl-unified body .side > .nav > .fl-nav-next-section:before{content:"";position:absolute;left:12px;right:12px;top:-7px;border-top:1px solid var(--line,#d5e0f0)}
@media (min-width:980px){
  html.fl-unified body .app > .side{width:232px!important;min-width:232px!important;flex:0 0 232px!important;padding:0!important}
}

/* The old page-specific links stay invisible until the shared menu script has put the menu in its final order.
   They keep their space, so nothing below them moves. A safety timer shows them anyway if the script never runs. */
html.fl-unified:not(.fl-nav-settled) body #sidebar > a.sb-item:not([data-fl-nav]),
html.fl-unified:not(.fl-nav-settled) body .side > .nav > a:not([data-fl-nav]){visibility:hidden!important}

/* The "Use Learn as an app" card arrives a moment after the menu. Its space is kept free from the start,
   so the menu does not jump down when it appears. Installed apps never show the card, so they keep no space. */
html.fl-unified body .fl-install-card{box-sizing:border-box!important;height:96px!important;margin-bottom:14px!important;overflow:hidden!important}
@media not all and (display-mode:standalone){
  html.fl-unified:not(.fl-no-install) body #sidebar > .sb-brand:not(:has(~ .fl-install-card)),
  html.fl-unified:not(.fl-no-install) body .side > .logo:not(:has(~ .fl-install-card)){margin-bottom:113px!important}
}

/* The Admin section uses the same rows and heading on every page, including the Studio and the Dashboard. */
html.fl-unified body #sidebar .fl-admin-group > a.sb-item,
html.fl-unified body .side #adminnav > .nav > a{box-sizing:border-box!important;min-height:44px!important;height:auto!important;padding:11px 12px!important;gap:11px!important;font-size:14px!important;font-weight:600!important;line-height:22px!important}
html.fl-unified body #sidebar .fl-admin-group > a.sb-item svg,
html.fl-unified body .side #adminnav > .nav > a svg{width:19px!important;height:19px!important;flex:0 0 19px!important}
html.fl-unified body #sidebar .fl-admin-group > .fl-admin-heading,
html.fl-unified body .side #adminnav > .nav-h{box-sizing:border-box!important;margin:0!important;padding:16px 12px 6px!important;font-size:10px!important;font-weight:800!important;line-height:16px!important;letter-spacing:1.3px!important;text-transform:uppercase!important}
html.fl-unified body .side > #adminnav{padding-left:12px!important;padding-right:12px!important}
html.fl-unified body .side #adminnav > .nav{padding-left:0!important;padding-right:0!important;gap:3px!important}

/* Links that are still in their old form wait, invisible, until the menu script has redrawn them. */
html.fl-unified:not(.fl-nav-settled) body .side .nav > a:has(> .ic),
html.fl-unified:not(.fl-nav-settled) body #sidebar:not(:has(> a.sb-item[data-fl-nav])) > #sb-admingroup,
html.fl-unified:not(.fl-nav-settled) body #sidebar:not(:has(> a.sb-item[data-fl-nav])) > .sb-foot{visibility:hidden!important}

/* CA Vault and Clippings Tracker menu links stay hidden from the first paint.
   The menu script shows one only when its switch in Courses & Access is on for this account. */
:is(#sidebar,.side>.nav) :is(a[href^="cavault.html"],a[href*="/cavault.html"],a[href^="clippings.html"],a[href*="/clippings.html"]):not([data-fl-nav-ok]){display:none!important}

/* Notes and Highlights is no longer in the menu. The page still opens from a saved link. */
:is(#sidebar,.side>.nav) :is(a[href^="notes.html"],a[href*="/notes.html"]){display:none!important}

/* The log out button in the menu footer is a round icon, the same shape as the one in the top bar. */
html.fl-unified body #sidebar .sb-foot > a.sb-item.fl-logout-button{width:36px!important;min-width:36px!important;max-width:36px!important;height:36px!important;min-height:36px!important;max-height:36px!important;flex:0 0 36px!important;padding:0!important;gap:0!important;border-radius:50%!important;aspect-ratio:1/1}

/* Compact menu (29 Sep 2026): shorter rows, small group headings that fold, so the whole menu fits without much scrolling. */
html.fl-unified body #sidebar > a.sb-item, html.fl-unified body #sidebar .sb-foot > a.sb-item, html.fl-unified body .side > .nav > a,
html.fl-unified body #sidebar .fl-admin-group > a.sb-item, html.fl-unified body .side #adminnav > .nav > a{min-height:30px!important;padding:5px 9px!important;gap:8px!important;font-size:13px!important;line-height:1.4!important;border-radius:8px!important;white-space:nowrap!important}
html.fl-unified body #sidebar > a.sb-item svg, html.fl-unified body .side > .nav > a svg, html.fl-unified body #sidebar .fl-admin-group > a.sb-item svg, html.fl-unified body .side #adminnav > .nav > a svg{width:16px!important;height:16px!important}
html.fl-unified body .side > .nav{gap:1px!important}
html.fl-unified body #sidebar > .fl-nav-section, html.fl-unified body .side > .nav > .fl-nav-section,
html.fl-unified body #sidebar .fl-admin-group > .fl-admin-heading, html.fl-unified body .side #adminnav > .nav-h{margin:12px 10px 2px!important;padding:0!important;font-size:11px!important;font-weight:700!important;line-height:1.3!important;letter-spacing:.07em!important;text-transform:uppercase!important;color:var(--muted,#5a6b84)!important}
html.fl-unified body .side > .nav > .fl-nav-next-section, html.fl-unified body #sidebar > .fl-nav-next-section{margin-top:12px!important}
html.fl-unified body .side > .nav > .fl-nav-next-section:before, html.fl-unified body #sidebar > .fl-nav-next-section:before{display:none!important}