/* buttons and icons and smaller reusable bits here */
/* but we're also expirimenting with having component-specific css files */

/* Rules only — the component stylesheets are listed in components/index.css,
   loaded just before this file (functions/stylesheets.php: a file either lists
   imports or holds rules, never both). */


/**
 * Fill-link — card click-anywhere pattern.
 *
 * The link stays a normal link (a11y: still a single link per card, text
 * inside the card is still selectable). Its ::before pseudo stretches to
 * fill the nearest positioned ancestor.
 *
 * Contract: the card wrapping a .fill-link must set `position: relative`.
 */
.fill-link::before {
	content: '';
	position: absolute;
	inset: 0;
}

/**
 * Mark the intended fill target with .fill-link-host. The link's ::before
 * fills the nearest positioned ancestor, so the host class declares which
 * ancestor that is. CSS can't infer it from structure (a positioned
 * intermediate like an <h3> would steal the fill).
 */
.fill-link-host {
	display: block;
	position: relative;
}


/* Actions container - flex layout for groups of controls */
.actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem;
}

/* Tone variations */
.actions[data-tone="admin"] {
	/* $todo: subtle background, border, padding for admin-only UI */
}

/* Contextual adjustments */
.study .actions {
	margin-block: 1rem;
}



/* ============================================================
   Actions — links, buttons, and other action elements
   ============================================================
   Canonical reference: /design-system/controls/actions

   Scope: content-page actions only (links, form submits, CTAs,
   <details>/<summary> disclosures, anything clickable that
   performs a content-page action). UI controls (mode toggles,
   focus switchers, completion markers) live under "mise en mode"
   — a separate pattern.

   Stance: links are links, buttons are buttons. Adding
   data-action='featured' makes the element the big-bold rectangle,
   but the underlying type-ness still reads:
   - <a data-action='featured'>       → link underline survives
   - <button data-action='featured'>  → button-like (no underline)
   - <summary data-action='featured'> → action (disclosure trigger)
   - .unstyled on either              → strips chrome (icon, close-X)

   The featured selector is element-agnostic on purpose — a featured
   action is a featured action regardless of the underlying tag.

   data-action vs data-prominence: data-action is the role+emphasis
   attribute for clickable actions. data-prominence is reserved for
   layout emphasis on <section> and <page-module> (see styles/prominence.css).

   Bare <button> intentionally has NO global style — the browser
   default stands. Content-action buttons opt into 'featured';
   UI-control buttons are owned by mise en mode.
   ============================================================ */

/* Featured action — element-agnostic loud rectangle.
   Uses --font-ui (sans) so all elements look like the same loud
   control. Element-specific tells (underline / no underline) live
   in the rules below. */
[data-action='featured'] {
	display: inline-block;
	padding: 0.75em 1.5em;
	background: var(--action-fill-primary);
	color: var(--action-ink-primary);
	border: 0;
	border-radius: var(--action-radius-primary);
	font-family: var(--font-ui);
	font-size: 1rem;
	line-height: 1.2;
	font-weight: 600;
	background-image: none;
	box-shadow: none;
	cursor: pointer;
	text-decoration: none;
	user-select: none;
	-webkit-user-select: none;
	/* No hover treatment yet. Re-stating background here neutralizes
	   the button:hover gradient defined in forms.css (specificity tie,
	   later source order). */
	&:hover {
		background: var(--action-fill-primary);
	}

	&:active {
		transform: scale(0.98);
	}
}

[data-action='featured']:focus-visible,
[data-action='featured'][data-fakestate='focused'] {
	outline: var(--control-focus-ring);
	outline-offset: 2px;
}

/* Link tell: underline survives the loud treatment. */
a[data-action='featured'] {
	text-decoration: underline;
	text-underline-offset: 0.2em;

	/* External (off-site) → rightwards arrow.
	   Active: \2192  → (rightwards arrow)
	   Alts:   \2BA1  ⮡  (down-right arrow)
	           \2197  ↗  (north-east arrow, angled up-right) */
	&[href^="http"]:not([href*="perpetual.education"]):not([href*="pe:8888"])::after {
		content: "\2192";
		display: inline-block;
		margin-inline-start: 0.25em;
		font-family: var(--font-ui);
	}

	/* New-tab → up-right arrow with hook (overrides external when both apply).
	   Active: \2B0F  ⬏  (up-right, hooked from below)
	   Alts (hooked / curved arrow family — pick by feel):
	     \2B0E ⬎   \2B10 ⬐   \2B11 ⬑
	     \2BA0 ⮠   \2BA1 ⮡   \2BA2 ⮢   \2BA3 ⮣
	     \2BA4 ⮤   \2BA5 ⮥   \2BA6 ⮦   \2BA7 ⮧ */
	&[target="_blank"]::after {
		content: "\2B0F";
		display: inline-block;
		margin-inline-start: 0.25em;
		font-family: var(--font-ui);
	}
}

/* <summary> tell: hide the default disclosure marker so the loud
   rectangle reads as an action, not a list-item-ish thing. */
summary[data-action='featured'] {
	list-style: none;
}

summary[data-action='featured']::-webkit-details-marker {
	display: none;
}

/* Disclosure tell — distinguishes "reveals more here" from links/buttons.
   Sits in the same arrow family as → (external) and ⬏ (new tab). */
summary[data-action='featured']::after {
	content: "\2BA7";
	display: inline-block;
	margin-inline-start: 0.4em;
	font-family: var(--font-ui);
}

/* Reveal-once: once expanded, the summary steps aside so the content reads cleanly. */
details[open] > summary[data-action='featured'] {
	display: none;
}

/* Escape hatch — strip all chrome (icon-only buttons, close-X,
   toggles, anything that needs to render unstyled). */
button.unstyled,
a.unstyled {
	background: none;
	border: none;
	padding: 0;
	box-shadow: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
	text-decoration: none;
}

/* simple-card — used by card-simple.php (topic lists on home, etc.) */
simple-card {
	.description {
		margin-top: 0.2em;
		font-size: 1em;
	}
}


/* resource-preview — used by related-resources lists, home footer */
.resource-preview {
	position: relative;

	text-content {
		margin-top: 1em;
	}

	.actions {
		margin-top: 10px;
	}
}


/* action-callout — admin-only callout for documenting intent (UX/logic/content/design/todo).
   Variant tinting via .type-X classes. */
.action-callout {
	--callout-bg: #fffde7;
	--callout-border: #fdd835;

	background: var(--callout-bg);
	border: 2px solid var(--callout-border);
	border-left-width: 6px;
	padding: 20px;
	margin: 20px 0;
	font-size: 0.9rem;

	&.type-ux      { --callout-bg: #e3f2fd; --callout-border: #2196f3; }
	&.type-logic   { --callout-bg: #f3e5f5; --callout-border: #9c27b0; }
	&.type-content { --callout-bg: #fff3e0; --callout-border: #ff9800; }
	&.type-design  { --callout-bg: #e8f5e9; --callout-border: #4caf50; }

	.callout-header {
		display: flex;
		align-items: center;
		gap: 10px;
		margin-bottom: 10px;
	}

	.callout-type {
		font-size: 0.7rem;
		font-weight: bold;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		padding: 3px 8px;
		background: var(--callout-border);
		color: white;
		border-radius: 3px;
	}

	.callout-title {
		font-weight: bold;
		margin: 0;
	}

	.callout-message {
		margin: 0;
		line-height: 1.5;
	}

	.callout-notes {
		margin: 10px 0 0 0;
		padding-left: 20px;

		li { margin-bottom: 5px; }
	}
}


/* current-workshop-cta — "Continue Learning" block on program/dashboard pages */



/* file-path — breadcrumb-style monospace path */
.file-path {
	font-family: monospace;
	font-size: 14px;
	margin-bottom: 2rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;

	color: var(--ink-auxiliary);

	a {
		text-decoration: none;
		&:hover { 
			text-decoration: underline; 
		}
	}

	.separator {
		margin: 0 8px;
	}

	.current { 
		/*color: #666; */
	}
}


/* pending-reviews — admin/student dashboard list of checkpoints awaiting review */
.pending-reviews {
	p { margin-top: 0.5em; }

	.link {
		margin-top: 0.5em;
	}
}


/* construction-banner — temporary site-wide notice. Floats over content at ≥700px. */
.construction-banner {
	display: grid;
	grid-template-columns: var(--layout);
	column-gap: var(--gutter);
	padding-block: 0.5rem;
	padding-inline: var(--gutter);

	.x {
		grid-column: 1 / -1;
		margin: 0;
		color: #c0392b;
	}

	@media (width >= 700px) {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 10;
		pointer-events: none;
		padding-block: 0.75rem;
		transform: translateY(3em);

		.x { pointer-events: auto; }
	}

	@media (width >= 1000px) {
		.x { grid-column: 3 / -3; }
	}
}


/* program-header-public — header for non-enrolled visitors viewing a program */
.enrollment-options {
	margin-block: 1em;
	a { margin-top: 1em; }
}



/* progress-bar — generic 0-100% bar with label */
.progress-bar {
	border: 1px solid black;
	height: 30px;
	position: relative;
	margin: 20px 0;

	.progress-fill {
		background: black;
		height: 100%;
	}

	.progress-text {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		color: white;
		mix-blend-mode: difference;
	}
}


/* resource-detail — single resource line item (used in resource lists) */
.resource-detail a {
	text-decoration: underline;
}


/* resource-list — wrapper for a list of resource-items */
.resource-list ul {
	display: grid;
	gap: 0.5em;
	margin-top: 0.5em;
}


/* syllabus-module-card — module card on syllabus pages */
.syllabus-module-card {
	.module-description { margin-top: 1rem; }
	.module-meta {
		display: grid;
		gap: 1rem;
	}
}


/* topic-list (component) — inline list of topic-tag pills.
   Note: .topic-list class is also used by the home page card grid
   (different markup — <li class='topic'> children). Scope the pill
   styles via :has() so the home grid isn't affected. */
.topic-list:has(> .topic-tag) {
	max-width: 60ch;
	text-wrap: balance;
}

.topic-tag {
	display: inline-block;
	padding: 0.3em 0.6em;
	border: 1px solid var(--stroke-primary);
	border-radius: 4px;
	margin-top: 6px;
	margin-right: 4px;

	font-family: monospace;
	font-size: 0.73rem;
}