/**
 * ASC Notes — right-docked, per-course notes panel.
 * "Never Too Small" palette: white, near-black ink, neutral greys — monochrome
 * and editorial, matching the course chrome. 0.81.0: every colour is a
 * var(--alexi-…) reference to the theme's tokens.css; the --asn-* names are
 * aliases kept so the rules below did not change.
 * Large screens (>=1200px): docked; #page shifts left to make room.
 * Small screens (<1200px): slides in over the content with a backdrop.
 */

:root {
	--asn-w: 360px;
	--asn-accent: var(--alexi-accent);        /* Alex's accent — soft slate blue (focus, current, "this clip") */
	--asn-accent-strong: var(--alexi-accent-strong); /* deeper accent */
	--asn-accent-soft: var(--alexi-accent-soft);   /* light tint of the accent */
	--asn-accent-border: #DEDDD8;
	--asn-success: var(--alexi-success);       /* progress green — marks the current clip's note */
	--asn-here-bg: var(--alexi-tint);       /* "this clip" tint — pale blue since 0.80.9 (was the green #EAF3DE) */
	--asn-here-ink: var(--alexi-tint-ink);      /* its ink — navy (was #173404) */
	--asn-ring: var(--alexi-focus-ring);
	--asn-muted: var(--alexi-muted);
	--asn-line: var(--alexi-line);          /* hairline */
	--asn-field: #FCFCFB;         /* near-white field ground */
	--asn-field-border: #E4E3DE;
	--asn-btn-bg: var(--alexi-btn-bg);        /* button rest — soft "Back to…" pill */
	--asn-btn-bg-hover: var(--alexi-btn-bg-hover);  /* button hover — medium grey */
	--asn-btn-text: var(--alexi-btn-text);      /* button label */
	--asn-highlight-bg: var(--alexi-warm-tint);  /* 0.64.0: pale terracotta tint — mirrors --asc-highlight-bg in frontend.css */
	--asn-highlight-ink: var(--alexi-warm-ink); /* terracotta text on it — mirrors --asc-highlight-ink */
	--asn-highlight: var(--alexi-highlight);     /* 0.77.2: solid orange — mirrors --asc-highlight (the "Try Clip 1, it's free!" button) */
}

/* Never let the theme's default button hover/focus/tap styles bleed onto our
   controls (that was a stray colour box on the close tab). */
.asc-notes-toggle{ -webkit-tap-highlight-color:transparent; appearance:none; -webkit-appearance:none; }
.asc-notes-toggle:focus{ outline:none; }

/* 0.73.5: the open state is written onto <html> by a tiny inline script in
   <head> (ASC_Notes::head_state) BEFORE first paint, then mirrored onto <body>
   by notes.js as before. Every ".asc-notes-open" rule below is therefore an
   ancestor selector (html or body), so a page that loads with the panel open
   is laid out narrowed from the very first frame — no content jump, no
   re-slide of the panel on each lesson change. html.asc-notes-noanim kills
   the transitions for that first frame only; notes.js removes it. */
html.asc-notes-noanim #page,
html.asc-notes-noanim .asc-notes-panel,
html.asc-notes-noanim .asc-notes-pull,
html.asc-notes-noanim .asc-notes-backdrop{ transition:none !important; }

/* ---- Panel ---- */
.asc-notes-panel{
	position:fixed; top:0; right:0; bottom:0;
	width:var(--asn-w); max-width:90vw;
	display:flex; flex-direction:column;
	background:#fff;
	border-left:1px solid var(--asn-line);
	box-shadow:none;
	z-index:99999;
	transform:translateX(100%);
	transition:transform .3s cubic-bezier(.4,0,.2,1);
	font-family:inherit;
}
.asc-notes-open .asc-notes-panel{ transform:translateX(0); }

.asc-notes-head{
	display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
	padding:18px calc(var(--asn-pull-w) + 10px) 14px 18px; border-bottom:1px solid var(--asn-line);
	/* Match the nav bar height so this header's bottom border lines up with the
	   nav bar's bottom border (var set by notes.js from the live header). */
	min-height:var(--asn-nav-bottom, 0); box-sizing:border-box;
}
.asc-notes-kicker{
	display:block; font-size:11px; letter-spacing:.11em; text-transform:uppercase;
	color:var(--asn-muted); font-weight:700; margin-bottom:2px;
}
.asc-notes-title{ margin:0; font-size:17px; line-height:1.25; color:#141414; font-weight:300; } /* 0.84.4: fine */
/* The close control is a pull tab too — see "Pull tabs" below. */

/* ---- Scrollable list of per-section blocks ---- */
.asc-notes-body{
	flex:1 1 auto; overflow-y:auto; min-height:0;
	padding:14px 18px; display:flex; flex-direction:column; gap:14px;
	scrollbar-width:thin; scrollbar-color:#d5d5d0 #ffffff;
}
/* 0.81.3: room under the last blocks so the last clips can rise to the same
   height as their rows in the Clips bar (which has 22vh under its rows too). */
@media (min-width:881px){ .asc-notes-body{ padding-bottom:22vh; } }
.asc-notes-body::-webkit-scrollbar{ width:12px; background:#ffffff; }
.asc-notes-body::-webkit-scrollbar-track{ background:#ffffff; border-left:1px solid var(--asn-line); }
.asc-notes-body::-webkit-scrollbar-thumb{
	background:#d5d5d0; border-radius:999px;
	border:3px solid #ffffff; background-clip:padding-box;
}
.asc-notes-block{ display:flex; flex-direction:column; gap:6px; }
/* Title row: label on the left, the per-clip copy button pinned right. */
.asc-notes-block-head{ display:flex; align-items:center; gap:8px; min-height:24px; }
.asc-notes-block-label{
	display:flex; align-items:center; gap:8px; flex:1 1 auto; min-width:0;
	font-size:13.5px; font-weight:400; color:#20201e; line-height:1.3; /* 0.84.4: 400 (was 700) — headings fine */
}
.asc-notes-block-title{ flex:0 1 auto; }

/* ---- Per-clip copy button ----
   Quiet by default so a column of them doesn't compete with the note text;
   it firms up on hover and turns into a green tick for a moment after a
   successful copy. Same anti-Astra-bleed forcing as the other controls. */
.asc-notes-copy{
	flex:0 0 auto;
	display:inline-flex; align-items:center; justify-content:center;
	width:24px; height:24px; padding:0; margin:0 -4px 0 0;
	color:#C2C2BE !important; background:transparent !important; border:0; border-radius:6px;
	box-shadow:none !important; outline:none; cursor:pointer; appearance:none;
	-webkit-tap-highlight-color:transparent;
	transition:background .15s ease, color .15s ease;
}
.asc-notes-copy:hover{ background:#fff !important; color:var(--alexi-btn-text) !important; }
.asc-notes-block.is-current .asc-notes-copy:hover{ background:#fff !important; }
.asc-notes-copy:active{ color:#141414 !important; }
.asc-notes-copy:focus{ outline:none; box-shadow:none !important; background:transparent !important; color:#C2C2BE !important; }
.asc-notes-copy:focus:hover{ background:#fff !important; color:var(--alexi-btn-text) !important; }
.asc-notes-copy:focus-visible{ box-shadow:0 0 0 3px var(--asn-ring) !important; }
.asc-notes-copy .asc-notes-ic-ok{ display:none; }
/* The tick has to out-force the focus rule above — the button still has focus
   at the moment it turns green. */
.asc-notes-copy[data-done],
.asc-notes-copy[data-done]:focus,
.asc-notes-copy[data-done]:hover{ color:var(--asn-success) !important; }
.asc-notes-copy[data-done] .asc-notes-ic-cp{ display:none; }
.asc-notes-copy[data-done] .asc-notes-ic-ok{ display:block; }
/* 0.77.2 (Alex): the "THIS CLIP" tag is styled like the join panel's
   "Try Clip 1, it's free!" button — solid orange, white text, 6px corners
   (was white pill, green ink). 0.77.3: weight 400 and 11px — the 700 was
   blurry: the theme loads Lexend Deca at 400 only, so any heavier weight is
   browser-synthesised (the same faux-bold smear as the Free tag, 0.63.2).
   Never ask for a weight the site doesn't load. */
/* 0.81.1: the tag is GONE (Alex, 28 Sep 2026) — the tinted block and the
   green left edge already say "this clip"; class-asc-notes.php no longer
   prints .asc-notes-here. */
/* The current clip's block is the Apartment Details pill green since 0.59.0,
   matching the section summary in the curriculum sidebar. */
.asc-notes-block.is-current{
	margin:0 -12px; padding:10px 12px; border-radius:10px;
	background:var(--asn-here-bg);
}
.asc-notes-block.is-current .asc-notes-block-title{ color:var(--asn-here-ink); }
/* The note for the clip being watched: a green edge on the LEFT only, 3px to
   match the open section's summary rule in the curriculum. The other three
   sides keep the field hairline so it still reads as an input. */
.asc-notes-block.is-current .asc-notes-field{
	background:#fff;
	border-left:3px solid var(--asn-success);
	border-top-left-radius:6px; border-bottom-left-radius:6px;
}

.asc-notes-field{
	width:100%; resize:none; overflow:hidden;
	min-height:44px;
	border:1px solid var(--asn-field-border); border-radius:10px;
	padding:10px 12px; font:inherit; font-size:14.5px; line-height:1.5; color:#20201e;
	background:var(--asn-field); outline:none;
	transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.asc-notes-field:focus{ border-color:var(--asn-accent); box-shadow:0 0 0 3px var(--asn-ring); background:#fff; }

/* ---- Footer: status on the left, export actions on the right ---- */
.asc-notes-foot{
	padding:8px 12px 10px 18px; border-top:1px solid var(--asn-line);
	display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.asc-notes-status{ font-size:11.5px; color:var(--asn-muted); transition:color .15s ease; min-width:0; }
.asc-notes-status[data-kind="saving"]{ color:#6f6f6b; }
.asc-notes-status[data-kind="saved"]{ color:#6E6E6A; }
.asc-notes-status[data-kind="error"]{ color:var(--alexi-error-ink); }

/* ---- Locked state: visible, not usable ----
   A visitor without membership gets the real section list with the fields
   switched off, so the feature advertises itself instead of being invisible.
   Muted rather than crossed-out: this should read as "not yours yet", not
   "broken". The CTA reuses .asc-join-btn / .asc-join-link from frontend.css so
   the panel, the lesson join panel and the course join strip stay one design. */

/* 0.63.0 (Alex, 5 Sep 2026): the members-only notice is a terracotta box —
   the one thing on the locked panel meant to catch the eye. 0.64.0: a pale
   terracotta tint with terracotta text (the solid block was "too strong"),
   the same tint-plus-ink pattern as the green "this clip" block below it. */
.asc-notes-lead{
	margin:0 0 16px; padding:12px 14px;
	border:0; border-radius:8px;
	background:var(--asn-highlight-bg);
	font-size:13px; line-height:1.5; color:var(--asn-highlight-ink);
}
.asc-notes-lead-p{ margin:0; }
.asc-notes-lead-p + .asc-notes-lead-p{ margin-top:8px; }
/* 0.64.1: "Copy ⧉ Download ⤓ Print ⎙ your notes" — the member footer's glyphs
   shown inline as decoration. Each icon sits in a small box after its word,
   with the wider gap before the next word, so word and icon read as a pair. */
.asc-notes-lead-acts{ display:flex; flex-wrap:wrap; align-items:center; }
.asc-notes-lead-ic{
	display:inline-flex; align-items:center; justify-content:center;
	margin:0 10px 0 5px; color:var(--asn-highlight-ink);
}
.asc-notes-lead-ic .asc-notes-ic{ width:15px; height:15px; }

.asc-notes-locked .asc-notes-field{
	background:var(--asn-field);
	color:var(--asn-muted);
	cursor:default;
	opacity:.72;
}
.asc-notes-locked .asc-notes-field::placeholder{ color:var(--asn-muted); opacity:1; }

/* The "this clip" marker and its green edge belong to a member's live notebook. */
.asc-notes-locked .asc-notes-block.is-current .asc-notes-field{
	background:var(--asn-field); border-left:1px solid var(--asn-field-border);
	border-top-left-radius:10px; border-bottom-left-radius:10px;
}

.asc-notes-foot-join{
	display:flex; flex-wrap:wrap; align-items:center; gap:12px;
	padding:14px 18px 16px;
}

/* ---- Pull tabs: "‹ Notes" opens, "Notes ›" closes — ONE SPOT ----
   0.74.1 (Alex, 15 Sep 2026): not a menu item (0.74.0 put it in the nav bar
   after "Log out" — rejected) and not the old bottom-right pill (0.48.3).
   The opener is a tab flush against the RIGHT EDGE of the screen, level with
   the nav bar, with a small left-pointing arrow: the panel slides in from
   there. The closer is the same tab on the panel's own top-right, arrow
   pointing right: the panel slides back out that way. Both are centred on
   --asn-nav-bottom (the nav bar's height, set by notes.js), so at every width
   the open and closed tabs render in exactly the same place — the control
   never moves, only its arrow flips. Rounded on the left, square on the
   right (it hangs off the edge). Weight 400 like every plugin label. No
   shadow — a fine border only (0.74.2).
   The nav bar keeps a lane free for it (see below) so it never covers the ≡
   toggle on phones or "Log out" on a narrow desktop. */
:root{
	/* 0.84.1: as tall as a "Details" button on My Courses — 0.82rem text,
	   line-height 1.2, .3rem padding, 1px border (was a fixed 38px). */
	/* 0.84.7: the tabs replicate the video controls (Play clip / Pause /
	   Replay clip): the same height as those pills — 32px icon line, .3rem
	   padding, 1px border — with a 24px arrow and .95rem/500 text. */
	/* 0.84.9 (Alex, 1 Oct 2026): less top/bottom padding than the ~45px controls.
	   0.84.15: Alex set the exact heights — 40px here, 30px on phones. */
	--asn-pull-h:40px;
	--asn-pull-w:120px;    /* lane reserved in the nav bar; the tab is ~108px (the theme reads this) */
}
.asc-notes-pull{
	position:fixed; right:0;
	top:max(12px, calc(var(--asn-nav-bottom, 80px) / 2 - var(--asn-pull-h) / 2)); /* never off-screen if the nav scrolls away */
	z-index:99998;
	display:inline-flex; align-items:center; gap:6px;
	height:var(--asn-pull-h) !important; width:auto !important;
	padding:0 .85rem 0 .7rem !important; margin:0;
	background:#ffffff !important; color:var(--alexi-body) !important;
	border:1px solid var(--alexi-body) !important; border-right:0 !important;
	border-radius:999px 0 0 999px !important;
	box-shadow:none !important; cursor:pointer; /* 0.74.2: no drop shadow, just the hairline (Alex) */
	font:inherit; font-size:.95rem !important; font-weight:500 !important; letter-spacing:normal; line-height:1.2;
	white-space:nowrap;
	transition:opacity .2s ease, background .15s ease;
}
.asc-notes-pull:hover{ background:var(--asn-accent-soft) !important; color:var(--asn-btn-text) !important; }
.asc-notes-pull:active{ background:var(--asn-accent-soft) !important; }
.asc-notes-pull:focus{ outline:none; }
.asc-notes-pull:focus-visible{ box-shadow:0 0 0 3px var(--asn-ring) !important; }
.asc-notes-arr{ display:block; flex:0 0 auto; color:var(--asn-accent); pointer-events:none; }
/* The closer sits on the panel (position:fixed → its containing block), at the
   panel's right edge = the screen's right edge, same top as the opener. */
.asc-notes-close{ position:absolute; z-index:2; }
.asc-notes-open .asc-notes-tab{ opacity:0; visibility:hidden; pointer-events:none; }

/* Keep the tab's lane free in the nav bar: on the mobile header the ≡ toggle
   sits exactly where the tab does, and on a desktop narrower than ~1400px
   the menu's container edge reaches it too. Course/lesson pages only. */
body.asc-fe-page #ast-mobile-header .site-header-primary-section-right{ padding-right:var(--asn-pull-w); }
@media (max-width:1400px){
	body.asc-fe-page #ast-desktop-header .site-header-primary-section-right{ padding-right:var(--asn-pull-w); }
}

/* ---- Backdrop (small screens) ---- */
.asc-notes-backdrop{
	position:fixed; inset:0; z-index:99998;
	background:rgba(20,20,20,.42); opacity:0; transition:opacity .3s ease;
}
.asc-notes-open .asc-notes-backdrop{ opacity:1; }

/* ---- Large screens: dock + shift the whole site ---- */
@media (min-width:1200px){
	#page{ transition:margin-right .3s cubic-bezier(.4,0,.2,1); }
	.asc-notes-open #page{ margin-right:var(--asn-w); }
	.asc-notes-backdrop{ display:none !important; }
}

/* ---- Small screens: overlay only ---- */
@media (max-width:1199px){
	.asc-notes-backdrop[hidden]{ display:none; }
}
@media (max-width:480px){
	.asc-notes-panel{ width:100%; max-width:100%; }
}

/* ---- Export icon buttons (copy / download / print) ----
   Ghost buttons: no chrome until hovered, so the footer stays a status line
   with three quiet affordances rather than a toolbar. Backgrounds and shadows
   are forced the same way the close × forces them, or Astra's button styles
   bleed in (see the stray-blue fix above). */
.asc-notes-actions{ display:flex; align-items:center; gap:1px; flex:0 0 auto; }
.asc-notes-act{
	display:inline-flex; align-items:center; justify-content:center;
	width:30px; height:30px; padding:0; margin:0;
	color:#9a9a96 !important; background:transparent !important; border:0; border-radius:8px;
	box-shadow:none !important; outline:none; cursor:pointer; appearance:none;
	-webkit-tap-highlight-color:transparent;
	transition:background .15s ease, color .15s ease;
}
.asc-notes-act:hover{ background:var(--asn-accent-soft) !important; color:#141414 !important; }
.asc-notes-act:active{ background:var(--asn-accent-soft) !important; color:#141414 !important; }
.asc-notes-act:focus{ outline:none; box-shadow:none !important; background:transparent !important; color:#9a9a96 !important; }
.asc-notes-act:focus:hover{ background:var(--asn-accent-soft) !important; color:#141414 !important; }
.asc-notes-act:focus-visible{ box-shadow:0 0 0 3px var(--asn-ring) !important; }
.asc-notes-ic{ display:block; pointer-events:none; stroke:currentColor !important; }

/* ---- Print sheet ----
   Built by notes.js as a direct child of <body> only while printing. Hiding
   every other body child is what turns "print this page" into "print my
   notes" — the panel, the nav, the player and the theme wrapper all go. */
.asc-notes-print{ display:none; }
@media print{
	body > *{ display:none !important; }
	body > .asc-notes-print{ display:block !important; }
	.asc-notes-print{ color:#111; }
	.asc-notes-print h1{ font-size:19pt; line-height:1.2; margin:0 0 2mm; font-weight:700; }
	.asc-notes-print .asc-notes-print-meta{ font-size:9pt; color:#666; margin:0 0 9mm; }
	.asc-notes-print h2{
		font-size:11.5pt; margin:0 0 2mm; font-weight:700;
		page-break-after:avoid; break-after:avoid;
	}
	.asc-notes-print h2 + p{ margin:0 0 7mm; }
	.asc-notes-print p{
		font-size:11pt; line-height:1.5; margin:0 0 7mm; white-space:pre-wrap;
		page-break-inside:avoid; break-inside:avoid;
	}
	@page{ margin:18mm; }
}

/* ---- 0.80.2 (Alex, 27 Sep 2026): the tabs and the THIS CLIP tag take the
   Clip times pill's colours — solid slate (#3C4F62, the site accent) with
   white text; hover the shade darker that pill uses. The theme forces its
   pale-green hover onto the Notes tab with body-level !important rules, so
   these carry one more class to win. Arrows white, or they vanish on the
   slate. ---- */
/* 0.81.1 (Alex, 28 Sep 2026, from a phone screenshot: "the dark grey is too
   heavy, especially on mobile"): the tabs wear the pale-blue "you are here"
   tint with navy text instead of solid slate; hover/press one step deeper.
   Same family as the current clip row and the exercise pill, so the tabs read
   as part of the page, not as buttons shouting from its edges. */
/* 0.84.1 (Alex, 30 Sep 2026): styled like the "Details" buttons — white,
   thin outline, 5px corners.
   0.84.7 (Alex, 30 Sep 2026, same evening): now a replica of the video
   controls' Replay clip pill (frontend.css .asc-vc-btn.asc-replay-btn):
   white, dark grey (--alexi-body) text, arrow and 1px border, fully round on
   the free side, filling with the soft grey --alexi-btn-bg on hover. Still a
   tab: the screen-edge side stays flat and borderless. */
body .asc-notes-pull,
body .asc-notes-pull:focus{ background:#fff !important; color:var(--alexi-body) !important; border-color:var(--alexi-body) !important; }
body.asc-fe-page .asc-notes-pull:hover,
body.asc-fe-page .asc-notes-pull:active{ background:var(--alexi-btn-bg) !important; color:var(--alexi-ink) !important; border-color:var(--alexi-ink) !important; }
.asc-notes-pull .asc-notes-arr{ color:currentColor; }
/* 0.84.8 (Alex, 30 Sep 2026): on phones the pills are three-quarter size —
   "too big on mobile, maybe a 25% decrease": 24px icon line, .72rem text,
   18px arrow, ~34px tall, ~81px wide; the nav-bar lane shrinks with it (the
   theme reads --asn-pull-w). 600px is the plugin's phone breakpoint. */
@media (max-width:600px){
	:root{ --asn-pull-h:30px; --asn-pull-w:90px; } /* 0.84.15: 30px tall on phones (Alex) */
	body .asc-notes-pull{ padding:0 .64rem 0 .52rem !important; font-size:.72rem !important; gap:4px; }
	.asc-notes-pull .asc-notes-arr{ width:18px; height:18px; }
}