/*
Theme Name: NIDI·OS
Theme URI: https://nidihub.org/
Author: IDC, IIT Bombay
Description: The platform's own block theme, built from the NIDI·OS design system (website/design-system). Five directions ship as style variations - Dyes (default), Studio, Archive, Civic, Bold - each with light, dark and high-contrast colours. Styles LifterLMS, BuddyPress and bbPress. Fonts are self-hosted.
Version: 0.1.0
Requires at least: 6.6
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nidios

Colours, type, radius and stroke are NOT set here: they come from theme.json
and styles/*.json, generated by wordpress/themes/build_theme.py from the design
system. This file uses them only through custom properties (--paper, --ink,
--site-ods ...), so every rule below works unchanged in all five directions,
light, dark and high contrast.
*/

/* ---------------------------------------------------------------- accent
   The WordPress site is the SCHOOL (Open Design School), so its accent is the
   design system's "ods" colour; the tools (GIDhub, Penpot ...) keep theirs. */
body {
	--site: var(--site-ods);
	--site-text: var(--site-ods-text);
	--site-tint: var(--site-ods-tint);
	--site-on: var(--site-ods-on);
	-webkit-font-smoothing: antialiased;
}
:where(a) { text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
::selection { background: var(--site-tint); color: var(--ink); }
.wp-site-blocks { min-height: 100vh; display: flex; flex-direction: column; }
.wp-site-blocks > main { flex: 1 0 auto; }
.nd-eyebrow { font: 600 0.75rem/1.3 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.nd-lede { font-size: var(--wp--preset--font-size--large); line-height: 1.6; color: var(--ink-muted); max-width: 60ch; }
/* A constrained layout centres every child with auto margins; a lede
   narrower than the column would then sit indented from its heading. */
.is-layout-constrained > .nd-lede { margin-left: 0 !important; }
.nd-measure { max-width: var(--wp--custom--measure); }

/* ---------------------------------------------------------------- header */
.nd-site-header { background: var(--surface); border-bottom: var(--stroke-card) solid var(--line); position: sticky; top: 0; z-index: 50; }
.admin-bar .nd-site-header { top: var(--wp-admin--admin-bar--height, 32px); }
.nd-site-header__bar { min-height: 68px; gap: 12px 28px; }
.nd-brand { gap: 10px; align-items: center; }
.nd-brand .wp-block-site-title a { color: var(--ink); text-decoration: none; }
.nd-brand .wp-block-site-logo img { border-radius: var(--radius-m); }
.nd-nav { gap: 4px 20px; font-size: 0.9375rem; }
.nd-nav .wp-block-navigation-item__content { color: var(--ink-muted); text-decoration: none; padding: 10px 2px; border-bottom: 3px solid transparent; }
.nd-nav .wp-block-navigation-item__content:hover,
.nd-nav .current-menu-item > .wp-block-navigation-item__content { color: var(--ink); border-bottom-color: var(--site); }
.nd-nav .is-cta > .wp-block-navigation-item__content { background: var(--site); color: var(--site-on); border: 0; border-radius: var(--radius-button); padding: 9px 16px; font-weight: 600; }
/* Sign out sits where Sign in was (the owner, 2026-09-28): same place and shape, quieter - an outline, not the
   site colour, so it is found at once but never mistaken for the main action. */
.nd-nav .is-cta-quiet > .wp-block-navigation-item__content { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.nd-nav .is-cta-quiet > .wp-block-navigation-item__content:hover { box-shadow: inset 0 0 0 1.5px var(--ink); border-bottom-color: transparent; }
.nd-nav .wp-block-navigation__submenu-container { background: var(--surface) !important; border: var(--stroke-card) solid var(--line) !important; border-radius: var(--radius-l); padding: 6px !important; min-width: 200px !important; box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 6px 16px rgba(0,0,0,.06); }
.nd-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 8px 12px; border: 0; border-radius: var(--radius-m); }
.nd-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: var(--surface-sunk); }
.nd-nav .wp-block-navigation__responsive-container.is-menu-open { background: var(--paper); color: var(--ink); }
/* The phone menu (the overlay the menu button opens): a plain left-aligned list - section names bold, their pages
   indented under them, tap targets at least 44px - instead of the desktop drop-down boxes stacked on the right. */
.nd-nav .is-menu-open .wp-block-navigation__responsive-container-content { align-items: stretch !important; padding: 8px 20px 32px !important; }
.nd-nav .is-menu-open .wp-block-navigation__container { align-items: stretch !important; gap: 0 !important; width: 100%; }
.nd-nav .is-menu-open .wp-block-navigation-item { align-items: stretch !important; width: 100%; border-bottom: var(--stroke-card) solid var(--line); }
.nd-nav .is-menu-open .wp-block-navigation-item .wp-block-navigation-item { border-bottom: 0; }
.nd-nav .is-menu-open .wp-block-navigation-item__content { display: block; font-size: 1.0625rem; color: var(--ink); padding: 12px 0 !important; min-height: 44px; border: 0 !important; text-align: left; }
.nd-nav .is-menu-open .has-child > .wp-block-navigation-item__content { font-weight: 700; padding-bottom: 4px !important; }
.nd-nav .is-menu-open .wp-block-navigation__submenu-container { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 0 8px 14px !important; min-width: 0 !important; gap: 0 !important; }
.nd-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { font-size: 1rem; color: var(--ink-muted); padding: 10px 0 !important; }
.nd-nav .is-menu-open .is-cta > .wp-block-navigation-item__content { display: inline-flex; margin-top: 16px; padding: 12px 20px !important; }

/* ---------------------------------------------------------------- footer */
.nd-site-footer { background: var(--surface); border-top: var(--stroke-card) solid var(--line); margin-top: 96px; font-size: 0.875rem; color: var(--ink-muted); }
.nd-site-footer a { color: var(--ink-muted); }
.nd-site-footer .wp-block-navigation-item__content { text-decoration: underline; }

/* ---------------------------------------------------------------- home */
.nd-hero { padding-block: clamp(48px, 8vw, 96px) clamp(32px, 5vw, 64px); }
.nd-hero h1 { font-size: clamp(2.2rem, 5.5vw, var(--display-size)); line-height: 1.05; font-weight: var(--display-weight); letter-spacing: -0.015em; max-width: 18ch; }
.nd-section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.nd-section-head h2 { margin: 0; }

/* course cards: the catalogue, the home page and archives share one card */
.nd-course-grid .wp-block-post-template, ul.nd-course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; list-style: none; padding: 0; }
/* WordPress's block gap (margin-top on every item after the first) is for stacked lists; in a grid it pushed cards 2+ down */
.nd-course-grid .wp-block-post-template > * { margin-block-start: 0 !important; }
.nd-course-card { background: var(--surface); border: var(--stroke-card) solid var(--line); border-radius: var(--radius-l); overflow: hidden; height: 100%; display: flex; flex-direction: column; }
.nd-course-card:hover { border-color: var(--site); }
.nd-course-card .wp-block-post-featured-image { margin: 0; aspect-ratio: 16/9; background: var(--surface-sunk); }
.nd-course-card .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; }
.nd-course-card__body { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.nd-course-card .wp-block-post-title { font-family: var(--font-sans); font-size: 1.125rem; line-height: 1.35; margin: 0; }
.nd-course-card .wp-block-post-title a { color: var(--ink); text-decoration: none; }
.nd-course-card .wp-block-post-excerpt { margin: 0; color: var(--ink-muted); font-size: 0.9375rem; line-height: 1.55; }
.nd-course-card .wp-block-post-excerpt__more-text { display: none; }

/* tools strip */
.nd-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.nd-tools--labelled { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.nd-tools--labelled div.nd-tool { cursor: default; }
.nd-tools--labelled div.nd-tool:hover { border-color: var(--line); }

/* ---------------------------------------------------------------- site pages (wordpress/content/pages) */
.nd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.nd-card-link { margin-top: auto; }
.nd-small { font-size: 0.875rem; color: var(--ink-muted); }
.nd-notice > :first-child { margin-top: 0; } .nd-notice > :last-child { margin-bottom: 0; }
.nd-notice .nd-chip { flex: none; margin-top: 2px; }
.nd-network { border: var(--stroke-card) solid var(--line); border-radius: var(--radius-l); overflow: hidden; background: var(--paper); }
.nd-network__frame { display: block; width: 100%; height: min(78vh, 760px); min-height: 560px; border: 0; }
@media (max-width: 860px) { .nd-network__frame { height: 900px; } }

/* ---------------------------------------------------------------- forms, tables, buttons (WordPress + plugins) */
input[type=text], input[type=email], input[type=password], input[type=search], input[type=url], input[type=number], select, textarea {
	font: inherit; color: var(--ink); background: var(--surface); border: var(--stroke-control) solid var(--line-strong);
	border-radius: var(--radius-m); padding: 9px 12px; min-height: 44px; max-width: 100%;
}
textarea { min-height: 120px; }
table { border-collapse: collapse; width: 100%; }
th, td { border-bottom: 1px solid var(--line); padding: 10px 12px; text-align: left; }
th { background: var(--surface-sunk); font-weight: 600; }
.nd-btn-like, button:not(.wp-block-navigation__responsive-container-open):not(.wp-block-navigation__responsive-container-close):not(.wp-block-navigation-submenu__toggle),
input[type=submit], .button, .llms-button-primary, .llms-button-action, .llms-button-secondary {
	font: 600 0.9375rem/1 var(--font-sans); min-height: 44px; padding: 0 20px; border-radius: var(--radius-button);
	border: var(--stroke-control) solid var(--site); background: var(--site); color: var(--site-on); cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none;
}
.llms-button-secondary, .button.secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
button:disabled, .llms-button-primary:disabled { opacity: .5; cursor: not-allowed; }

/* ---------------------------------------------------------------- LifterLMS */
.llms-syllabus-wrapper .llms-section-title { font-family: var(--font-display); font-size: 1.25rem; margin: 32px 0 8px; padding: 0; background: none; color: var(--ink); }
.llms-lesson-preview { margin: 0; }
.llms-lesson-preview .llms-lesson-link { display: block; padding: 12px 16px; border: var(--stroke-card) solid var(--line); border-radius: var(--radius-m); background: var(--surface); color: var(--ink); text-decoration: none; margin-bottom: 8px; }
.llms-lesson-preview .llms-lesson-link:hover { border-color: var(--site); }
.llms-lesson-preview.is-complete .llms-lesson-complete, .llms-lesson-complete { color: var(--status-live); }
.llms-progress .progress-bar, .llms-progress .llms-progress-bar { background: var(--surface-sunk); border-radius: 999px; height: 8px; overflow: hidden; }
.llms-progress .progress-bar-complete { background: var(--site); height: 100%; }
.llms-access-plans .llms-access-plan-content, .llms-access-plan .llms-access-plan-content { background: var(--surface); border: var(--stroke-card) solid var(--line); border-radius: var(--radius-l); }
.llms-notice { border-radius: var(--radius-l); border: var(--stroke-card) solid var(--line); background: var(--surface-sunk); color: var(--ink); padding: 12px 16px; }
.llms-notice.llms-error { border-color: var(--status-held); background: var(--status-held-bg); }
/* LifterLMS's course lists (My courses, the dashboard): the same card as the catalogue's nd-course-card -
   picture 16:9 on top, then progress, title and a line of small facts. The author line ("metaverse", the
   site's own account) and "Status: Enrolled" (always true on a list of your own courses) are hidden. */
ul.llms-loop-list[class] { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; list-style: none; margin: 0; padding: 0; }
ul.llms-loop-list[class] > li.llms-loop-item { width: auto; float: none; margin: 0; padding: 0; background: none; border: 0; }
.llms-loop-item-content { background: var(--surface); border: var(--stroke-card) solid var(--line); border-radius: var(--radius-l); overflow: hidden; height: 100%; margin: 0; padding: 0; }
.llms-loop-item-content:hover { border-color: var(--site); }
.llms-loop-item-content .llms-loop-link { display: flex; flex-direction: column; height: 100%; color: var(--ink); text-decoration: none; }
.llms-loop-item-content .llms-featured-image { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; margin: 0; background: var(--surface-sunk); }
.llms-loop-item-content .llms-progress { box-sizing: border-box; width: 100%; display: flex; flex-direction: row; align-items: center; gap: 10px; height: auto; padding: 14px 20px 0; margin: 0; }
.llms-loop-item-content .llms-progress .llms-progress-bar { flex: 1; width: auto; min-width: 0; top: 0; height: 8px; }
.llms-loop-item-content .llms-progress .progress__indicator { display: block; float: none; height: auto; margin: 0; order: 2; font: 600 0.8125rem/1 var(--font-sans); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.llms-loop-item-content .llms-loop-title { font-family: var(--font-sans); font-size: 1.125rem; line-height: 1.35; color: var(--ink); margin: 0; padding: 12px 20px 0; }
.llms-loop-item-content .llms-loop-item-footer { padding: 6px 20px 18px; display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: auto; }
.llms-loop-item-content .llms-meta, .llms-loop-item-content .llms-meta p { margin: 0; padding: 0; font-size: 0.875rem; line-height: 1.5; color: var(--ink-muted); }
.llms-loop-item-content .llms-author, .llms-loop-item-content .llms-enroll-status { display: none; }
.llms-course-navigation .llms-lesson-preview { flex: 1; }

/* ---------------------------------------------------------------- BuddyPress (Nouveau) */
#buddypress, .buddypress-wrap { color: var(--ink); }
.buddypress-wrap .bp-navs { background: none; border-bottom: var(--stroke-card) solid var(--line); }
.buddypress-wrap .bp-navs li a, .buddypress-wrap .bp-navs li span { color: var(--ink-muted); }
.buddypress-wrap .bp-navs li.selected a, .buddypress-wrap .bp-navs li.current a { color: var(--ink); background: none; border-bottom: 3px solid var(--site); }
.buddypress-wrap .bp-navs li a .count { background: var(--surface-sunk); color: var(--ink-muted); border: 0; }
.buddypress-wrap .item-list > li, .buddypress-wrap .activity-list .activity-item { border-color: var(--line) !important; background: var(--surface); }
.buddypress-wrap .grid.item-list > li .list-wrap { background: var(--surface); border: var(--stroke-card) solid var(--line); border-radius: var(--radius-l); }
.buddypress-wrap .item-avatar img, .buddypress-wrap img.avatar { border-radius: 50%; }
.buddypress-wrap .item-meta, .buddypress-wrap .activity-header .time-since, .buddypress-wrap .last-activity { color: var(--ink-muted); }
.buddypress-wrap .bp-list .item-title a, .buddypress-wrap .list-title a { color: var(--ink); font-weight: 700; }
.buddypress-wrap .bp-feedback { background: var(--surface-sunk); color: var(--ink); border-radius: var(--radius-m); box-shadow: none; }
.buddypress-wrap .select-wrap, .buddypress-wrap .select-wrap select { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
.buddypress-wrap #item-header { background: var(--surface); border: var(--stroke-card) solid var(--line); border-radius: var(--radius-l); padding: 24px; }

/* ---------------------------------------------------------------- bbPress */
#bbpress-forums { font-size: 0.9375rem; }
#bbpress-forums ul.bbp-forums, #bbpress-forums ul.bbp-topics, #bbpress-forums ul.bbp-replies, #bbpress-forums .bbp-body > ul { border-color: var(--line); border-radius: var(--radius-l); overflow: hidden; background: var(--surface); }
#bbpress-forums li.bbp-header, #bbpress-forums li.bbp-footer { background: var(--surface-sunk); border-color: var(--line); color: var(--ink-muted); font-weight: 600; }
#bbpress-forums div.odd, #bbpress-forums ul.odd { background: var(--surface); }
#bbpress-forums div.even, #bbpress-forums ul.even { background: var(--paper); }
#bbpress-forums li.bbp-body ul.forum, #bbpress-forums li.bbp-body ul.topic { border-color: var(--line); }
#bbpress-forums .bbp-forum-title, #bbpress-forums .bbp-topic-permalink { color: var(--ink); font-weight: 700; }
#bbpress-forums .bbp-forum-content, #bbpress-forums .bbp-topic-meta, #bbpress-forums .bbp-author-role { color: var(--ink-muted); }
#bbpress-forums .bbp-breadcrumb, #bbpress-forums .bbp-breadcrumb a { color: var(--ink-muted); }
#bbpress-forums div.bbp-reply-header, #bbpress-forums div.bbp-topic-header { background: var(--surface-sunk); border-color: var(--line); }

/* ---------------------------------------------------------------- the login page (wp-login.php) */
body.login { background: var(--paper); font-family: var(--font-sans); color: var(--ink); }
body.login #login { width: min(400px, 92vw); padding-top: 10vh; }
body.login h1 a { background: none; width: auto; height: auto; text-indent: 0; font: 700 1.4rem/1.2 var(--font-display); color: var(--ink); }
body.login form { background: var(--surface); border: var(--stroke-card) solid var(--line); border-radius: var(--radius-l); box-shadow: none; }
body.login .openid-connect-login-button { text-align: center; margin: 0 0 16px; }
body.login .openid-connect-login-button .button { width: 100%; min-height: 48px; font-size: 1rem; }
body.login #nav a, body.login #backtoblog a { color: var(--ink-muted); }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* ---------------------------------------------------------------- course and lesson pages */
.nd-eyebrow a { color: inherit; text-decoration: none; } .nd-eyebrow a:hover { color: var(--ink); }
.nd-course-banner img { object-fit: cover; }
.nd-course-body .llms-meta-info, .nd-course-body .llms-instructor-info { background: var(--surface); border: var(--stroke-card) solid var(--line); border-radius: var(--radius-l); padding: 20px 24px; }
.nd-course-body .llms-meta-title { font-family: var(--font-display); font-size: 1.25rem; margin-top: 0; }
.nd-course-body .llms-access-plans { margin-block: 24px; }
.nd-lesson-body iframe, .nd-lesson-body video { width: 100%; aspect-ratio: 16/9; height: auto; border-radius: var(--radius-l); }
.nd-lesson-body .llms-course-navigation { gap: 16px; margin-top: 32px; }
.nd-course-body .llms-meta-info .llms-instructor-info { border: 0; padding: 0; background: none; }
.llms-syllabus-wrapper .llms-lesson-preview, .llms-syllabus-wrapper .llms-lesson-preview .llms-favorite-wrapper { background: none; }
.llms-syllabus-wrapper .llms-lesson-preview { position: relative; }
.llms-syllabus-wrapper .llms-lesson-preview .llms-favorite-wrapper { position: absolute; right: 64px; top: 12px; font-size: 0.8125rem; color: var(--ink-muted); }
.llms-syllabus-wrapper .llms-lesson-link .llms-lesson-title { color: var(--ink); font-weight: 600; }

/* ---------------------------------------------------------------- student dashboard (LifterLMS) */
/* The dashboard's side menu. LifterLMS styles these links with a five-class selector (padding 10px 0), so the
   rules below start from "body.logged-in" to outrank it. The current page is shown the way the site shows a
   card - white, thin border, bold - not with a coloured bar (a bar on a rounded item drew as a yellow curve). */
.llms-student-dashboard .llms-sd-nav .llms-sd-items { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
body.logged-in .llms-sd-layout-columns .llms-sd-nav .llms-sd-items .llms-sd-item a,
.llms-student-dashboard .llms-sd-nav .llms-sd-item a { display: block; padding: 8px 12px; border: var(--stroke-card) solid transparent; border-radius: var(--radius-m); color: var(--ink-muted); text-decoration: none; box-shadow: none; }
body.logged-in .llms-sd-layout-columns .llms-sd-nav .llms-sd-items .llms-sd-item a:hover { background: var(--surface-sunk); color: var(--ink); }
body.logged-in .llms-sd-layout-columns .llms-sd-nav .llms-sd-items .llms-sd-item.current a { background: var(--surface); border-color: var(--line); color: var(--ink); font-weight: 700; }
.llms-student-dashboard .llms-sd-section { background: var(--surface); border: var(--stroke-card) solid var(--line); border-radius: var(--radius-l); padding: 20px 24px; }
/* LifterLMS styles its buttons with stronger selectors (.llms-button-secondary.wp-element-button: grey;
   the dashboard's section footer: display inline-block, which left the label stuck to the top of a 44px
   box). Matched here with equal-or-stronger selectors, so every LifterLMS button looks like the theme's. */
body .llms-button-primary.wp-element-button, body .llms-button-action.wp-element-button { background: var(--site); color: var(--site-on); border: var(--stroke-control) solid var(--site); }
body .llms-button-secondary.wp-element-button { background: var(--surface); color: var(--ink); border: var(--stroke-control) solid var(--line-strong); }
body .llms-button-secondary.wp-element-button:hover { background: var(--surface-sunk); }
body .llms-student-dashboard .llms-sd-section .llms-sd-section-footer a.llms-button-secondary,
body .llms-student-dashboard a.llms-button-primary, body .llms-student-dashboard a.llms-button-secondary { display: inline-flex; align-items: center; min-height: 44px; }
.llms-student-dashboard .llms-sd-section-footer { margin-top: 12px; }
/* LifterLMS form fields are width:100% plus side padding, so the "Mark complete" row was 1px wider than a phone. */
.llms-form-field { box-sizing: border-box; max-width: 100%; }

/* ---------------------------------------------------------------- Display panel + inclusive modes (2026-09-28)
   The panel (assets/js/display.js) sets data-access / data-theme on <html>; the colours for data-theme come from
   theme.json (light, dark, contrast, per direction), the component sizes from components.css (--fs, --lh). These
   rules carry the same choices to the site's own text, which is sized in rem. */
html[data-access~="large"] { font-size: 125%; }
html[data-access~="larger"] { font-size: 150%; }
html[data-access~="easy"] body { line-height: 1.85; word-spacing: 0.12em; letter-spacing: 0.012em; }
html[data-access~="easy"] p, html[data-access~="easy"] li { max-width: 70ch; }
html[data-access~="easy"] a, html[data-theme="contrast"] a { text-decoration: underline; text-underline-offset: 3px; }
html[data-theme="contrast"] :focus-visible { outline-width: 4px; }
/* a whole card that is one link: underline its name only, not every line of it */
html[data-access~="easy"] a.nd-tool, html[data-theme="contrast"] a.nd-tool { text-decoration: none; }
html[data-access~="easy"] a.nd-tool b, html[data-theme="contrast"] a.nd-tool b { text-decoration: underline; text-underline-offset: 3px; }
html[data-theme="contrast"] .nd-course-card, html[data-theme="contrast"] .llms-loop-item-content,
html[data-theme="contrast"] .nd-site-header, html[data-theme="contrast"] .nd-site-footer { border-width: 2px; }

.nd-display { position: relative; display: flex; align-items: center; }
.nd-site-header__bar > .nd-display { margin-left: auto; }   /* beats WordPress's flex-layout margin reset */
.nd-display-toggle {
	display: inline-flex !important; align-items: center; gap: 6px; min-height: 40px !important; padding: 0 12px !important;
	background: var(--surface) !important; color: var(--ink) !important; border: var(--stroke-control) solid var(--line-strong) !important;
	border-radius: var(--radius-button); font: 600 0.875rem/1 var(--font-sans) !important; cursor: pointer;
}
.nd-display-toggle:hover { border-color: var(--ink) !important; }
.nd-display-toggle[aria-expanded="true"] { background: var(--surface-sunk) !important; }
.nd-display-toggle__ic { font: 700 1rem/1 var(--font-display); letter-spacing: -0.02em; }
@media (max-width: 600px) { .nd-display-toggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
.nd-display-panel {
	position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; width: min(340px, calc(100vw - 32px));
	background: var(--surface); color: var(--ink); border: var(--stroke-card) solid var(--line-strong); border-radius: var(--radius-l);
	box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 10px 28px rgba(0,0,0,.12); padding: 16px 18px 18px; display: grid; gap: 14px;
}
.nd-display-panel[hidden] { display: none; }
.nd-display-panel__head { display: flex; justify-content: space-between; align-items: center; }
.nd-display-panel__title { margin: 0; font: 700 1.0625rem/1.2 var(--font-sans); }
.nd-display-panel__close { background: none !important; border: 0 !important; color: var(--ink-muted) !important; font-size: 1.5rem !important; min-height: 36px !important; padding: 0 6px !important; line-height: 1 !important; }
.nd-display-group { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; min-width: 0; }
.nd-display-group legend { padding: 0; margin-bottom: 6px; font: 600 0.8125rem/1.2 var(--font-sans); color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.nd-display-group[disabled] { opacity: 0.5; }
.nd-display-seg { display: flex; border: var(--stroke-control) solid var(--line-strong); border-radius: var(--radius-m); overflow: hidden; }
.nd-display-seg label { flex: 1; position: relative; }
.nd-display-seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.nd-display-seg span { display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 6px; font: 600 0.875rem/1.1 var(--font-sans); text-align: center; color: var(--ink-muted); border-left: 1px solid var(--line); }
.nd-display-seg label:first-child span { border-left: 0; }
.nd-display-seg input:checked + span { background: var(--ink); color: var(--paper); }
.nd-display-seg input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: -3px; }
.nd-display-panel__note { margin: 0; font-size: 0.8125rem; color: var(--ink-muted); }
.nd-display-panel__reset { justify-self: start; background: none !important; border: 0 !important; padding: 0 !important; min-height: 0 !important; color: var(--ink) !important; font: 600 0.875rem/1.4 var(--font-sans) !important; text-decoration: underline; cursor: pointer; }
@media (max-width: 600px) { .nd-display-panel { position: fixed; left: 16px; right: 16px; top: 76px; width: auto; } }

/* Windows' own high-contrast mode (forced colours): the browser repaints everything in the user's system colours and
   drops backgrounds, so separations that relied on a fill need a real border, and the selected option a real marker. */
@media (forced-colors: active) {
	.nd-card, .nd-tool, .nd-course-card, .nd-notice, .nd-chip, .nd-steps li, .llms-loop-item-content,
	.llms-student-dashboard .llms-sd-section, .nd-display-panel, .nd-network { border: 1px solid CanvasText !important; }
	.nd-chip::before { forced-color-adjust: none; background: CanvasText; border-color: CanvasText; }
	.nd-display-seg input:checked + span { forced-color-adjust: none; background: Highlight; color: HighlightText; }
	.nd-nav .current-menu-item > .wp-block-navigation-item__content { text-decoration: underline; }
	:focus-visible { outline: 3px solid Highlight; }
}