/* ==========================================================================
   SETTINGS — design tokens (CSS custom properties only, no output rules)
   Consolidated from application.css plus the component-local :root blocks
   that lived in podcast.css and entity_cloud.css.
   Must load first; the font @import has to precede all other CSS.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Crete+Round&family=Inconsolata:wght@400;500;700&display=swap');

:root {
    /* Spacing */
    --gap-small: 8px;
    --spacing-md: 40px;
    --spacing-md--mobile: 20px;
    --small-button-size: 32px;
    --small-button-size--mobile: 26px;
    --big-button-size: 52px;
    --big-button-size--mobile: 42px;

    /* Light mode colors (default) */
    --bg-primary: #ffffff;
    --bg-secondary: #f5f5f5;
    --bg-tertiary: #eeeeee;
    --text-primary: #000000;
    --text-secondary: #555555;
    --text-muted: #777777;
    --border-color: #000000;
    --border-light: #D8D8D8;

    /* Accent colors */
    --pink-accent: #FF007A;
    --pink-light: #FFEBF0;
    --pink-medium: #FF83BE;
    --pink-dark: #8B0043;

    /* Legacy variable mappings */
    --light-gray: #D8D8D8;
    --dark-gray: #555;
    --black: #000;
    --transaprent-black: rgba(0, 0, 0, 0.03);

    /* Component colors */
    --header-bg: rgba(255, 255, 255, 0.87);
    --card-bg: #ffffff;
    --player-bg: #ffffff;
    --box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.05);
    --scrollbar-track: rgba(0, 0, 0, 0.03);
    --scrollbar-thumb: #D8D8D8;
    --scrollbar-thumb-hover: #555;

    /* Podcast "works" status colors (was podcast.css) */
    --hot-green: #00B894;
    --hot-yellow: #FFB200;
    --hot-red: #E63946;
    --hot-blue: #3498DB;
    --light-green: #DFF8E7;
    --light-yellow: #FFF5E1;
    --light-red: #FED7D7;
    --light-blue: #DAE9F7;

    /* Entity cloud category colors (was entity_cloud.css) */
    --entity-prs: #F7DC6F;  /* yellow - persons */
    --entity-org: #85C1E9;  /* blue - organizations */
    --entity-loc: #82E0AA;  /* green - places */
    --entity-wrk: #F5B7B1;  /* pink - works */
    --entity-evn: #D7BDE2;  /* lavender - events */
    --entity-obj: #F5CBA7;  /* peach - objects */
    --entity-tme: #AED6F1;  /* sky - time */
    --entity-msr: #FAD7A0;  /* cream - measurements */
}

/* Dark mode - system preference (TEMPORARILY DISABLED - only manual toggle works)
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg-primary: #121212;
        --bg-secondary: #1e1e1e;
        --bg-tertiary: #2a2a2a;
        --text-primary: #e8e8e8;
        --text-secondary: #b0b0b0;
        --text-muted: #888888;
        --border-color: #444444;
        --border-light: #333333;

        --light-gray: #444;
        --dark-gray: #aaa;
        --black: #e8e8e8;
        --transaprent-black: rgba(255, 255, 255, 0.05);

        --header-bg: rgba(18, 18, 18, 0.92);
        --card-bg: #1e1e1e;
        --player-bg: #1e1e1e;
        --box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.3);
        --scrollbar-track: rgba(255, 255, 255, 0.05);
        --scrollbar-thumb: #444;
        --scrollbar-thumb-hover: #666;
    }
}
*/

/* Dark mode - manual toggle */
:root[data-theme="dark"] {
    --bg-primary: #121212;
    --bg-secondary: #1e1e1e;
    --bg-tertiary: #2a2a2a;
    --text-primary: #e8e8e8;
    --text-secondary: #b0b0b0;
    --text-muted: #888888;
    --border-color: #444444;
    --border-light: #333333;

    --pink-light: #4a1a2e;
    --pink-dark: #8B0043;

    --light-gray: #444;
    --dark-gray: #aaa;
    --black: #e8e8e8;
    --transaprent-black: rgba(255, 255, 255, 0.05);

    --header-bg: rgba(18, 18, 18, 0.92);
    --card-bg: #1e1e1e;
    --player-bg: #1e1e1e;
    --box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.3);
    --scrollbar-track: rgba(255, 255, 255, 0.05);
    --scrollbar-thumb: #444;
    --scrollbar-thumb-hover: #666;

    /* Entity cloud category colors - muted for dark (was entity_cloud.css) */
    --entity-prs: #B8A830;  /* muted yellow - persons */
    --entity-org: #5DADE2;  /* muted blue - organizations */
    --entity-loc: #58D68D;  /* muted green - places */
    --entity-wrk: #E6B0AA;  /* muted pink - works */
    --entity-evn: #BB8FCE;  /* muted lavender - events */
    --entity-obj: #E59866;  /* muted peach - objects */
    --entity-tme: #85C1E9;  /* muted sky - time */
    --entity-msr: #F5B041;  /* muted cream - measurements */
}
/* ==========================================================================
   GENERIC — cross-browser reset
   Tailwind v3.3.3 preflight + @tailwindcss/forms base, lifted verbatim from
   the last Tailwind build so removing the gem changed nothing visually, plus
   the app's own global box/margin reset that used to live in application.css.
   ========================================================================== */

*,
::before,
::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: #e5e7eb;
  margin: 0;
  padding: 0;
}
::before,
::after { --tw-content: ''; }

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  font-feature-settings: normal;
  font-variation-settings: normal;
}
body { margin: 0; line-height: inherit; }

hr { height: 0; color: inherit; border-top-width: 1px; }
abbr:where([title]) { text-decoration: underline dotted; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
a { color: inherit; text-decoration: inherit; }
b, strong { font-weight: bolder; }
code, kbd, samp, pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 1em;
}
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -0.25em; }
sup { top: -0.5em; }
table { text-indent: 0; border-color: inherit; border-collapse: collapse; }

button, input, optgroup, select, textarea {
  font-family: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}
button, select { text-transform: none; }
button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
}
:-moz-focusring { outline: auto; }
:-moz-ui-invalid { box-shadow: none; }
progress { vertical-align: baseline; }
::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; }
[type='search'] { -webkit-appearance: textfield; outline-offset: -2px; }
::-webkit-search-decoration { -webkit-appearance: none; }
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }
summary { display: list-item; }

blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { margin: 0; }
fieldset { margin: 0; padding: 0; }
legend { padding: 0; }
ol, ul, menu { list-style: none; margin: 0; padding: 0; }
dialog { padding: 0; }
textarea { resize: vertical; }
input::placeholder, textarea::placeholder { opacity: 1; color: #9ca3af; }
[role="button"], button { cursor: pointer; }
:disabled { cursor: default; }

img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; }
img, video { max-width: 100%; height: auto; }
[hidden] { display: none; }

/* --- @tailwindcss/forms base ------------------------------------------- */
[type='text'], [type='email'], [type='url'], [type='password'], [type='number'],
[type='date'], [type='datetime-local'], [type='month'], [type='search'],
[type='tel'], [type='time'], [type='week'], [multiple], textarea, select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #fff;
  border: 1px solid #6b7280;
  border-radius: 0;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
}
[type='text']:focus, [type='email']:focus, [type='url']:focus, [type='password']:focus,
[type='number']:focus, [type='date']:focus, [type='datetime-local']:focus,
[type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus,
[type='week']:focus, [multiple]:focus, textarea:focus, select:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  border-color: #2563eb;
  box-shadow: 0 0 0 1px #2563eb;
}
/* ==========================================================================
   ELEMENTS — bare element styling (was in application.css + the base.css
   "parking lot"). No classes here; just how raw HTML elements look.
   ========================================================================== */

svg {
    max-width: 100%;
    height: auto;
}

svg.inactive rect {
    fill: var(--light-gray);
}

img {
    max-width: 100%;
}

body {
    margin: 0;
    padding-top: 75px;
    padding-bottom: 40px;
    background-color: var(--bg-primary) !important;
    background-image: url(/assets/background-53f56992a854a9ba5a2ec30c5d5a6341ecdbbfd39fb14f7c57d4660871275de1.png);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

:root[data-theme="dark"] body { background-image: none; }

/* TEMPORARILY DISABLED - only manual toggle works
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body { background-image: none; }
}
*/

ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

input {
    height: 40px;
    padding: var(--gap-small);
}

input[type='text']:focus,
input[type='text']:active {
    outline: 1px solid #000 !important;
    box-shadow: none !important;
    outline-offset: 0 !Important;
}

article { position: relative; }
article:has(> .admin-edit) { position: relative; }

/* Scrollbar */
::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

/* Dark mode icon colors - override hardcoded black fills */
:root[data-theme="dark"] svg path[fill="black"],
:root[data-theme="dark"] svg path[fill="#000000"],
:root[data-theme="dark"] svg path[fill="#000"] {
    fill: var(--text-primary);
}

:root[data-theme="dark"] svg path[stroke="black"],
:root[data-theme="dark"] svg path[stroke="#000000"],
:root[data-theme="dark"] svg path[stroke="#000"] {
    stroke: var(--text-primary);
}
html {
  font-size: 16px;
  line-height: 1.3em;
}

body {
  font-size: 16px;
  font-family: 'Inconsolata', monospace;
}

input {
  font-family: 'Inconsolata', monospace;
}

h1,
h2,
h3 {
  font-family: "Crete Round", serif;
  font-weight: 400;
}

h1 {
  font-size: 42px;
  line-height: 1.2em;
}

h2 {
  font-size: 30px;
  line-height: 1.2em;
}

h3 {
  font-size: 20px;
  line-height: 1.2em;
}

a {
  text-decoration-line: underline;
  text-decoration-skip-ink: all;
  text-decoration-thickness: 2px;
  text-decoration-color: rgb(255, 131, 190);
  font-weight: 700;
  color: var(--black);
  /*! line-height: 1.3em; */
  padding-bottom: 0;
}

a:hover {
  text-decoration-color: #FF007A;
}

.credential {
  font-weight: 700;
}
/* ==========================================================================
   OBJECTS — layout primitives (the page template). Structure only, no skin.
   Was the "PAGE TEMPLATE" block in application.css.
   ========================================================================== */

main {
    max-width: 1360px;
    padding: var(--spacing-md);
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 120px;
}

main>article>*:not(:last-child),
main>*:not(:last-child) {
    margin-bottom: var(--spacing-md);
}

.podcast:not(.card)>*:not(:last-child) {
    margin-bottom: var(--spacing-md);
}

.podcast:not(.card)>*:not(:last-child) .metadata {
    font-size: 19px;
}

main>h1 {
    margin-bottom: var(--spacing-md);
}

main>h1,
.podcast>h1,
main>article>h1 {
    text-align: center;
}

main>h2 {
    font-size: 1.25em;
    margin-bottom: calc(2 * var(--gap-small)) !important;
}
.hidden-color {
  color: #dc3545;
  /* keeping red as is, it's good */
}

.teaser-color {
  color: #b78a05;
  /* darker yellow/gold */
}

.free-color {
  color: #28a745;
  /* keeping green as is, it's good */
}

/* Upload form: a single segment's fields, boxed off.
   (Was Tailwind: border w-fit p-8 mt-8 bg-white bg-opacity-70) */
.segment-fields {
  width: fit-content;
  margin-top: 2rem;
  padding: 2rem;
  border: 1px solid #e5e7eb;
  background-color: rgba(255, 255, 255, 0.7);
}

/* Admin edit overlay + edit forms (were in application.tailwind.css @layer base) */
.admin-edit a svg {
  width: 1em;
  height: 1em;
  position: absolute;
  top: 1em;
  right: 1em;
}

.admin.edit.segment { display: flex; justify-content: space-between; }
.admin.edit.segment .form { width: 66%; }
.admin.edit.segment .transcript { width: 33%; }
.admin.edit h2 { margin-bottom: 1em; }
.admin.edit textarea { width: 560px; height: 200px; }
.admin.edit select,
.admin.edit input { width: 560px; }
.admin.edit div { margin-bottom: 0.5em; }
.admin.edit label { display: inline-block; width: 200px; }
.playable-paginator,
.calendar-paginator .pagy-nav,
.tags-paginator {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.playable-paginator,
.calendar-paginator .pagy-nav {
  margin-bottom: calc(2 * var(--gap-small)) !important;
}

.pagy-nav a,
.pagy-nav .active,
.tags-paginator a,
.tags-paginator a.active,
.playable-paginator a,
.playable-paginator a.active {
  color: var(--text-primary);
  text-decoration: none;
  /*! font-size: 16px; */
  font-weight: 700;
  border: none;
  display: block;
  line-height: 1em;
  padding: var(--gap-small) calc(1.5 * var(--gap-small));
}

.playable-paginator a.active,
.playable-paginator a:hover,
.calendar-paginator .active,
.tags-paginator a.active,
.tags-paginator a:hover,
.pagy-nav a:hover {
  background-color: var(--text-primary);
  color: var(--bg-primary);
}

.tags-paginator .paginator-separator {
  color: var(--text-muted);
  padding: var(--gap-small) calc(0.5 * var(--gap-small));
  opacity: 0.5;
}

.calendar-paginator {
  margin-bottom: var(--gap-small) !important;
}

.calendar-paginator .prev,
.calendar-paginator .next {
  display: none;
}

.pagy-info {
  margin-top: var(--spacing-md);
  display: block;
  font-weight: 400;
  font-size: 1.25rem;
  font-family: 'Crete round';
  margin-bottom: calc(2 * var(--gap-small));
}
button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  border: none;
  outline: none;
  box-shadow: none;
}

button.black-button {
  background-color: var(--text-primary);
  color: var(--bg-primary);
  font-size: 16px;
  padding: 10px 20px;
  font-weight: 700;
  transition: background-color 0.3s ease, color 0.3s ease;
}

button:hover {
  cursor: pointer;
}

button.black-button:hover {
  background-color: var(--text-secondary);
}

button.big {
  width: var(--big-button-size);
  min-width: var(--big-button-size);
  height: var(--big-button-size);
  min-height: var(--big-button-size);
  line-height: 0em;
}

button.small {
  width: var(--small-button-size);
  min-width: var(--small-button-size);
  height: var(--small-button-size);
  min-height: var(--small-button-size);
  line-height: 0em;
}

.play-button {
  line-height: 1em;
}

.play-button svg {
  width: 100%;
}

/* Play button SVG colors - override inline fills */
.play-button svg rect,
.play-button svg .pause0 {
  fill: var(--text-primary);
}

.play-button svg path,
.play-button svg .pause1 {
  fill: var(--bg-primary);
}

.play-button:hover rect,
.play-button:hover .pause0 {
  fill: var(--text-secondary);
}

/* ASIDE BUTTONS */

aside.buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: var(--gap-small);
}

/* was application.tailwind.css @layer base */
.black-button.no-margin { margin: 0 !important; }
.card {
  background-color: var(--card-bg);
  padding: calc(3 * var(--gap-small));
  box-shadow: var(--box-shadow);
  margin-bottom: var(--gap-small);
  transition: background-color 0.3s ease;
}

.card h1 a,
.card h2 a,
.card h1,
.card h2 {
  font-weight: 400;
}

.card>h2 {
  font-size: 30px;
}

.card .metadata h1,
.card .metadata h1 a {
  font-size: 20px;
  line-height: 1.25em;
}

.playables>h2 {
  margin-bottom: calc(2 * var(--gap-small));
  font-size: 20px;
  font-weight: 400;
}

.playables .card .description {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.25em;
}

.playables .card .description .duration,
.playables .card .description .parent-episode {
  display: inline-block;
}

.playables .card .description>nav,
.playables .card .description>section {
  display: inline-block;
  font-weight: 700;
}

.playables>article,
.intro-boxes .card>section {
  display: grid;
  grid-template-columns: min-content 1fr;
  column-gap: calc(1.5 * var(--gap-small));
  grid-template-rows: min-content;
}

.now-playing h3,
.now-playing p {
  display: inline-block;
}

.now-playing p,
.now-playing a,
.now-playing .non-link {
  margin-top: 0;
  font-weight: 700;
}

.card .metadata {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: min-content;
  row-gap: var(--gap-small);
  height: unset;
  align-items: flex-start;
}

.card:not(.podcast) section:not(.latest-episode) .metadata {
  padding-top: 2px;
}

.metadata h3 {
  font-weight: 400;
  font-size: 1em;
  font-family: 'Inconsolata';
}

.show-more {
  text-align: center;
  margin-top: var(--spacing-md);
}

.show-more a {
  background-color: var(--text-primary);
  color: var(--bg-primary);
  display: inline-block;
}

.show-more a>button {
  font-weight: 700;
  padding: var(--gap-small) calc(1.5 * var(--gap-small));
  font-size: 1rem;
}

/* SEGMENTS */

.segments {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  row-gap: var(--gap-small);
  column-gap: calc(var(--gap-small) * 2);
}

.segments li {
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: flex-start;
  justify-content: flex-start;
}

.segments li>.play-button {
  display: flex;
  padding-top: 2.5px;
}

.segments li>.play-button button.play-button {
  border-radius: 50%;
}

.segments li>.play-button button.play-button:hover {
  background: var(--text-primary);
}

.segments li>.play-button button.play-button:hover,
.transcript p>a:nth-child(1):hover {
  background: var(--text-primary);
}

.segments li>.play-button button.play-button[data-controller="play-button"]:hover path:nth-child(1),
.transcript p>a:nth-child(1):hover path:nth-child(1) {
  fill: var(--text-primary);
}

.segments li>.play-button button.play-button[data-controller="play-button"]:hover path:nth-child(2),
.transcript p>a:nth-child(1):hover path:nth-child(2) {
  stroke: var(--bg-primary);
}

.segments li>.play-button button.play-button[data-controller="subscribe"]:hover path:nth-child(1) {
  fill: var(--text-primary);
}

.segments li>.play-button button.play-button[data-controller="subscribe"]:hover path:nth-child(2) {
  fill: var(--bg-primary);
}

.playables .segments a {
  display: block;
  text-decoration: none;
}

.segments a span {
  font-size: 14px;
  line-height: 1.3em;
  color: var(--text-primary);
  font-weight: 400;
  opacity: 0.67;
}

.segments a:hover span {
  opacity: 1;
}

.metadata .duration,
.duration-and-episode,
.parent-episode {
  font-weight: 700;
  line-height: 1.3em;
  display: inline-block;
}

.metadata .duration>*,
.duration-and-episode>* {
  display: inline-block;
}
/* Entity Cloud - Full Screen Mode */

body.fullscreen-cloud {
  overflow: hidden;
}

body.fullscreen-cloud main {
  padding: 0;
  margin: 0;
  max-width: none;
}

body.fullscreen-cloud .notice,
body.fullscreen-cloud .alert {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
}

body.fullscreen-cloud .notice:empty,
body.fullscreen-cloud .alert:empty {
  display: none;
}

.entity-cloud-container.entity-cloud-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  min-height: auto;
  z-index: 1;
}

.entity-cloud-fullscreen .entity-cloud-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: auto;
  border-radius: 0;
}

.entity-cloud-fullscreen .entity-cloud-wrapper svg {
  min-height: auto;
}

.entity-cloud-fullscreen .entity-cloud-overlay {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--gap-small) calc(2 * var(--gap-small));
  background: linear-gradient(to top, var(--bg-primary) 0%, transparent 100%);
  z-index: 10;
  pointer-events: none;
}

.entity-cloud-fullscreen .entity-cloud-overlay > * {
  pointer-events: auto;
}

.entity-cloud-fullscreen .entity-cloud-header {
  margin-bottom: 0;
}

.entity-cloud-fullscreen .entity-cloud-header h1 {
  font-size: 1.5rem;
  opacity: 0.8;
}

/* Semi-transparent header for cloud page */
body.fullscreen-cloud .site-header {
  background-color: transparent;
  backdrop-filter: blur(12px);
}

body.fullscreen-cloud .site-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--header-bg);
  opacity: 0.7;
  z-index: -1;
}

/* Entity Cloud */

/* category colors (--entity-*, light + dark) now in settings/tokens.css */

.entity-cloud-container {
  position: relative;
  width: 100%;
  min-height: calc(100vh - 200px);
  display: flex;
  flex-direction: column;
}

.entity-cloud-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-md);
  flex-wrap: wrap;
  gap: var(--gap-small);
}

.entity-cloud-header h1 {
  margin: 0 !important;
  text-align: left !important;
}

.entity-cloud-zoom {
  font-family: 'Inconsolata', monospace;
  font-size: 11px;
  color: var(--text-muted);
  opacity: 0.6;
}

.entity-cloud-zoom strong {
  color: var(--text-primary);
  opacity: 1;
}

.entity-cloud-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.entity-cloud-breadcrumb a {
  color: var(--text-primary);
  text-decoration: none;
  padding: 4px 12px;
  border: 1px solid var(--black);
  border-radius: 99px;
  transition: all 0.2s ease;
}

.entity-cloud-breadcrumb a:hover {
  background-color: var(--black);
  color: var(--bg-primary);
}

.entity-cloud-breadcrumb span {
  color: var(--text-muted);
}

.entity-cloud-breadcrumb .current {
  font-weight: 600;
  color: var(--text-primary);
}

.entity-cloud-wrapper {
  flex: 1;
  min-height: calc(100vh - 280px);
  background: transparent;
  border-radius: 12px;
  overflow: hidden;
}

.entity-cloud-wrapper svg {
  display: block;
  width: 100%;
  height: 100%;
  min-height: calc(100vh - 280px);
}

.entity-cloud-wrapper text {
  font-family: 'Inconsolata', monospace;
  user-select: none;
}

.entity-cloud-tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 8px 12px;
  box-shadow: var(--box-shadow);
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 100;
  max-width: 250px;
}

.entity-cloud-tooltip.visible {
  opacity: 1;
}

.entity-cloud-tooltip strong {
  display: block;
  font-size: 14px;
  margin-bottom: 4px;
}

.entity-cloud-tooltip .label {
  display: inline-block;
  font-size: 11px;
  padding: 2px 6px;
  background: var(--bg-tertiary);
  border-radius: 4px;
  margin-right: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.entity-cloud-tooltip .value {
  font-size: 12px;
  color: var(--text-muted);
}

/* Legend */
.entity-cloud-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: var(--spacing-md);
  justify-content: center;
}

.entity-cloud-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
}

.entity-cloud-legend-item::before {
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.entity-cloud-legend-item.prs::before { background: var(--entity-prs); }
.entity-cloud-legend-item.org::before { background: var(--entity-org); }
.entity-cloud-legend-item.loc::before { background: var(--entity-loc); }
.entity-cloud-legend-item.wrk::before { background: var(--entity-wrk); }
.entity-cloud-legend-item.evn::before { background: var(--entity-evn); }
.entity-cloud-legend-item.obj::before { background: var(--entity-obj); }

/* Responsive */
@media (max-width: 768px) {
  .entity-cloud-container {
    min-height: 400px;
  }

  .entity-cloud-wrapper {
    min-height: 350px;
  }

  .entity-cloud-wrapper svg {
    min-height: 350px;
  }

  .entity-cloud-header {
    flex-direction: column;
    align-items: flex-start;
  }
}
.site-header {
  background-color: var(--header-bg);
  position: fixed;
  top: 0;
  width: 100%;
  padding: var(--gap-small) calc(2 * var(--gap-small));
  z-index: 9;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, max-content) minmax(0, 1fr);
  align-items: center;
  column-gap: calc(2 * var(--gap-small));
  backdrop-filter: blur(8px);
  transition: background-color 0.3s ease;
}

.site-header .logo svg {
  width: 36px;
  min-width: 36px;
  vertical-align: middle;
}

.main-menu {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  column-gap: calc(2 * var(--gap-small));
}

.site-header .main-menu a {
  display: block;
}

.site-header .main-menu svg {
  max-width: 36px;
  height: auto;
  vertical-align: middle;
}

/* header main nav */

.main-menu {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
}

.main-menu>ul {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  column-gap: calc(2 * var(--gap-small));
  flex-wrap: nowrap;
  row-gap: calc(var(--gap-small)/ 2);
  margin-top: -3px;
}

.main-menu>ul>li {
  white-space: nowrap;
  overflow: hidden;
}

.mobile-main-menu {
  display: none !important;
}

/* header search */

.site-header .search {
  width: 10vw;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  max-width: 560px;
  z-index: 2;
}

@media(min-width: 1140px) {
  .site-header .search {
    width: 15vw;
  }
}

@media(min-width: 1220px) {
  .site-header .search {
    width: 20vw;
  }
}

@media(min-width: 1300px) {
  .site-header .search {
    width: 25vw;
  }
}

@media(min-width: 1380px) {
  .site-header .search {
    width: 30vw;
  }
}

.site-header .search input {
  border-radius: 99px;
  border: 1px solid var(--border-color);
  width: 100%;
  color: var(--text-secondary);
  background-color: var(--bg-primary);
  padding: 5px 15px;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.site-header .search button {
  position: absolute;
  right: 3px;
  top: 3px;
  height: 34px;
  width: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.site-header .search button:hover rect {
  cursor: pointer;
  fill: var(--dark-gray);
}

@media(min-width: 1025px) {

  .site-header .search {
    transition: 0.35s all;
    transition-timing-function: linear;
  }

  .site-header.search-active .search {
    width: 560px;
    transition: 0.35s all;
    transition-timing-function: linear;
  }

  .site-header .broadcast-boxes,
  .site-header .main-menu {
    opacity: 1;
    transition: 0.35s opacity;
  }

}

@media(min-width: 1025px) and (max-width: 1600px) {

  .site-header.search-active .broadcast-boxes,
  .site-header.search-active .main-menu ul {
    overflow: hidden;
    opacity: 0;
  }
}

/* header next broadcast */

.site-header .next-broadcast {
  justify-content: flex-end;
  display: flex;
  align-items: center;
  font-weight: 700;
  text-align: right;
}

.site-header .next-broadcast>div {
  padding: var(--gap-small);
  display: inline-block;
  white-space: nowrap;
}

/* In dark mode, header broadcast box should have light text, no pink background */
[data-theme="dark"] #broadcast-not-live-header > div {
  background-color: transparent !important;
  color: var(--text-primary);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) #broadcast-not-live-header > div {
    background-color: transparent !important;
    color: var(--text-primary);
  }
}

.site-header .next-broadcast>div span {
  display: inline-block;
}

/* Theme toggle button */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  margin-right: var(--gap-small);
  flex-shrink: 0;
}

.theme-toggle:hover {
  background-color: var(--transaprent-black);
}

.theme-toggle span {
  display: flex;
  align-items: center;
  justify-content: center;
}

.theme-toggle svg {
  width: 20px;
  height: 20px;
}
main .welcome {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  max-width: 1074px;
  margin: var(--spacing-md) auto calc(2 * var(--spacing-md));
}

main .welcome .site-logo {
  padding-left: 10%;
  padding-right: 10%;
}

main .welcome .site-logo svg {
  max-width: 300px;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}

main .cta {
  text-align: center;
}

main .cta p {
  font-size: 1.25rem;
  margin-top: calc(2 * var(--gap-small));
  margin-bottom: var(--spacing-md);
  font-family: 'Crete Round';
  line-height: 1.3em;
}

main .cta .black-button {
  margin-right: 32px;
  font-family: 'Crete Round';
  font-weight: 400;
}

/* HIATUS NOTICE (temporary) */

.hiatus-notice {
  background: var(--pink-light);
  border-left: 6px solid var(--pink-accent);
  margin-bottom: var(--gap-small) !important;
}

.hiatus-notice h2 {
  font-size: 30px;
  color: var(--pink-accent);
  margin-bottom: var(--gap-small);
}

.hiatus-notice p {
  font-family: 'Crete Round';
  font-size: 1.25rem;
  line-height: 1.3em;
  margin: 0;
}


/* HOME INTRO BOXES */

.intro-boxes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--gap-small);
  row-gap: var(--gap-small);
  margin-bottom: var(--gap-small) !important;
}

@media(min-width:1025px) {

  .intro-boxes .card {
    min-height: 100%;
  }

}

.intro-boxes>section {
  align-self: stretch;
}

.intro-boxes .playables>article {
  grid-template-columns: 1fr;
  display: grid;
}

.intro-boxes .intro-podcast header {
  grid-template-columns: 1fr;
}

.intro-boxes .playables header h2,
.intro-boxes .stream.card>header .broadcast-notifications {
  margin-bottom: calc(3 * var(--gap-small));
}

.intro-boxes>section {
  align-self: stretch;
}

.intro-boxes h1 {
  line-height: 1.25em;
}

.intro-boxes article.podcast .link-instructions {
  margin-top: 1em;
}

.intro-boxes article header p {
  margin-bottom: 1em;
}

.intro-boxes article.podcast .link-instructions {
  margin-bottom: 0.5em;
}

/* STREAM CARD */

.intro-boxes .stream.card>header {
  display: flex;
  flex-wrap: wrap;
}

.intro-boxes .stream.card>header h2 {
  min-width: 50%;
  flex-grow: 1;
  flex-shrink: 1;
  order: 1;
}

.intro-boxes .stream.card>header .broadcast-notifications {
  max-width: 50%;
  order: 2;
}

.intro-boxes .stream.card .description {
  order: 3;
  width: 100%;
}

.broadcast-notifications .next-broadcast {
  padding: 0.5em 1em;
  font-weight: 700;
}

#broadcast-not-live {
  background: var(--pink-light);
  color: var(--text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.broadcast-notifications .next-broadcast svg {
  display: inline-block !important;
}

.broadcast-notifications .next-broadcast svg {
  display: none;
  width: 24px;
  height: 24px;
  vertical-align: text-bottom;
}

#broadcast-live,
#broadcast-live-header {
  background: var(--Pink, #FF007A);
  color: white;
}

.broadcast-notifications .next-broadcast div,
#broadcast-live-header div {
  display: flex;
  align-items: center;
  gap: 0.7em;
}

#broadcast-live svg path,
#broadcast-live-header svg path {
  fill: white;
}

/* MORE EPISODES */

.more-episodes h2 {
  font-size: 30px;
}

.more-episodes h1 {
  line-height: 16px;
}

.more-episodes h1 a {
  font-size: 20px;
  line-height: 1.3em
}

.more-episodes .playables {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--gap-small);
  row-gap: var(--gap-small);
  margin-top: calc(3 * var(--gap-small));
}

/* HOME FEATURED CARDS */

.featured-tags .playables {
  margin-top: calc(2 * var(--gap-small));
}

.featured-tags h2 a {
  font-weight: 400;
  text-decoration: none;
}

.featured-tags .tag>section {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: calc(3 * var(--gap-small));
  row-gap: var(--spacing-md);
}

.card .show-more {
  grid-column-start: 1;
  grid-column-end: 4;
  align-self: flex-end
}

.segment.compact h1 a {
  text-decoration: none;
}

/* LATEST EPISODE */

.latest-episode,
.more-episodes {
  margin-bottom: var(--gap-small) !important;
}

.latest-episode .card>.buttons .play-button {
  width: var(--big-button-size);
  min-width: var(--big-button-size);
  height: var(--big-button-size);
  min-height: var(--big-button-size);
  line-height: 0em;
}

.latest-episode .card>.buttons .play-button svg {
  width: 100%;
}

.latest-episode>.episode>.metadata aside.duration {
  font-size: 1.25rem;
}

.latest-episode>.episode>.metadata .description {
  font-size: 19px;
}

.latest-episode.playables>article .metadata h1 a {
  font-size: 42px;
}

/* HOME FEATURED */

.featured-tags header {
  grid-area: 1 / 1 / 1 / 4;
}

.featured-tags header a {
  font-weight: 400;
}

/* --------- RE-ADDING CSS REMOVED BY OUT-OF-SYNC REFACTORING --------- */

/* The style below will probably be redundant to some extent and to some
   extent in conflict with other styles. Feel free to work these bits into
   the rest of the code, which is presumably more well-organized overall.
*/

#broadcast-not-live {
  background: var(--pink-light);
  color: var(--text-primary);
  padding-right: 1em !important;
}

#broadcast-not-live .icon {
  display: none;
  width: 19px;
  height: 19px;
}

@media (max-width: 560px) {

  #broadcast-live .label,
  #broadcast-not-live .label {
    display: none;
  }

  #broadcast-not-live .icon {
    display: inline-block;
  }
}

#broadcast-live,
#broadcast-not-live {
  padding: 0.5em;
  padding-left: 1em;
}

#broadcast-button.live .play-button rect {
  fill: #FF007A;
}

.site-header .broadcast-boxes {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

#broadcast-live-header.next-broadcast {
  width: fit-content;
  color: white;
}

#broadcast-live-header.next-broadcast svg {
  width: 24px;
  height: 24px;
  margin-left: 0.5em;
}

#broadcast-live-header.next-broadcast span {
  color: white;
}

@media (max-width: 1024px) {
  .site-header .broadcast-boxes {
    position: absolute;
    display: block;
    width: 100%;
    top: 100%;
  }

  .site-header .broadcast-boxes .theme-toggle {
    display: none;
  }

  .site-header .broadcast-boxes .next-broadcast {
    width: 100% !important;
    background-color: var(--pink-light);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
  }

  .site-header .broadcast-boxes div {
    padding: 1px var(--gap-small);
  }

  #broadcast-live-header {
    width: 100%;
  }

  #broadcast-live-header svg {
    width: 16px !important;
    height: 16px !important;
  }

  /* Since the info bar is always visible on smaller screens, there is no need
     to display it in the featured stream box in this mode.
  */
  .frontpage .broadcast-notifications .next-broadcast {
    display: none !important;
  }
}

/* More possibly redundant style */

.intro-boxes .playables>article {
  display: block
}

.intro-boxes .playables>article>section {
  display: grid;
  grid-template-columns: min-content 1fr;
  column-gap: calc(2 * var(--gap-small));
}

.intro-boxes article header h2 {
  margin-bottom: 0.5em;
}

.intro-boxes article header p {
  margin-bottom: 1em;
}

.intro-boxes article.podcast .link-instructions {
  margin-top: 1em;
  margin-bottom: 0.5em;
}

.intro-boxes article.stream>section {
  position: relative;
}

.intro-boxes article.stream>section .listeners {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
}

.intro-boxes article.stream>section .listeners p {
  margin: 0;
}

.intro-boxes article.stream {
  position: relative;
}

.intro-boxes h2 a {
  white-space: nowrap;
  text-decoration: none;
}
.new_user {
  margin-block: var(--gap-small);
  width: 400px;
  max-width: 100%;

  input {
    width: 100%;
    display: block;

    &[type='submit'] {
      background-color: var(--black);
      color: #fff;
      font-weight: 700;
      margin-top: calc(3 * var(--gap-small));
    }
  }

  .field {
    margin-bottom: calc(2 * var(--gap-small));
  }
}
.embed-player {
  position: relative;
  border: 1px solid #aaa !important;
  border-radius: 1em;
  padding: 1em !important;
  padding-top: 4em !important;
  margin-top: 1em;
  margin-bottom: 1em;
}

.embed-player .radiobubbla-symbol {
  position: absolute;
  top: 1em; left: 1em;
  width: 2em; height: 2em;
}

.embed-player .permalink {
  font-family: 'Inconsolata', serif;
  position: absolute;
  top: 1em; right: 1em;
}

.embed-player h1 {
  font-family: 'Crete Round', serif;
  font-weight: 400;
  font-size: 1.5em;
  margin: 0;
}

.embed-player h2 {
  font-family: 'Inconsolata', serif;
  font-weight: 400;
  font-size: 1em;
  margin: 0;
  margin-top: 0.5em;
}

.embed-player p {
  font-family: 'Inconsolata', monospace;
  font-size: 1em;
  margin: 0;
  margin-top: 0.5em;
}

.embed-player a {
  text-decoration: none;
  color: inherit;
  line-height: 1.3em;
  padding-bottom: 3px;
}

.embed-player h1.track-title a {
  text-decoration-line: underline;
  text-decoration-color: rgb(255, 131, 190);
  text-decoration-skip-ink: none;
  text-decoration-thickness: 3px;
}

.embed-player audio {
  width: 100%;
  margin-top: 1em;
}
.overlay-box {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  background-color: var(--card-bg);
  box-shadow: var(--box-shadow);
  text-align: center;
  width: 840px;
  max-width: 80vw;
  padding: var(--spacing-md) var(--spacing-md) calc(2 * var(--spacing-md));
  margin: 200px auto;

  .close-button {
    display: none;
  }

  &:after {
    content: '';
    display: block;
    height: 50px;
    background: transparent;
    position: absolute;
    bottom: -50px;
    left: 0;
    width: 100%;
  }

  .logo svg {
    margin-left: auto;
    margin-right: auto;
  }

  >h1 {
    margin-bottom: calc(var(--spacing-md) / 2);
    font-size: 30px;
  }
}

.payment-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;

  .payment-modal-background {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
  }

  .payment-modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--card-bg);
    padding: var(--spacing-md) var(--spacing-md) calc(2 * var(--spacing-md));
    width: 80%;
    max-height: 80vh;
    max-width: 500px;
    z-index: 10000;
    overflow-y: scroll;
    box-shadow: var(--box-shadow);

    >* {
      text-align: center;
    }

    >*:not(:last-child) {
      margin-bottom: var(--spacing-md);
    }

    .logo svg {
      margin-left: auto;
      margin-right: auto;
    }

    >h1 {
      margin-bottom: calc(var(--spacing-md) / 2);
      font-size: 30px;
    }

    .selling-points {
      list-style-type: none;
      display: table;
      margin-left: auto;
      margin-right: auto;
      padding-left: 30px;

      li {
        position: relative;
        text-align: left;
        display: table-row;
        border-bottom: 3px solid transparent;

        &::before {
          content: '';
          display: block;
          width: 1em;
          height: 1em;
          min-width: 1em;
          min-height: 1em;
          position: absolute;
          left: -25px;
          top: 2px;
          background: url(/assets/icon-checkmark-49b3fa64b3a289c95874e04be6d519854c5c9c0d9c918b4aea9b2dd202119a9c.svg) no-repeat center center;
        }

        &:not(:last-child)::after {
          content: '';
          display: block;
          height: 4px;
        }
      }
    }

    .payment-area {
      background-color: var(--bg-tertiary);
      padding: 1em;
      border-radius: 1em;

      p {
        margin-top: 1em;
        margin-bottom: 1em;
      }

      .already-member {
        font-weight: 700;
        text-align: center;
        margin-bottom: var(--spacing-md);
      }
    }

    .close-button {
      position: absolute;
      top: 10px;
      right: 10px;
      background: none;
      border: none;
      font-size: 24px;
      cursor: pointer;
    }
  }
}
/* PERSONAL PLAYLIST PANEL */

.personal-playlist-container {
  position: absolute;
  bottom: 100%;
  right: 0;
}

.player-hidden .personal-playlist-container {
  display: none;
}

.personal-playlist-panel {
  width: 300px;
  background-color: var(--card-bg);
  box-shadow: var(--box-shadow);
  overflow: hidden;
  transition: background-color 0.3s ease;
}

.personal-playlist-panel header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  font-weight: 700;
  padding: calc(var(--gap-small) / 2) calc(2 * var(--gap-small));
  background: var(--text-primary);
  color: var(--bg-primary);
}

.personal-playlist-panel header span {
  flex: 1;
}

.personal-playlist-panel .clear-btn {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  opacity: 0.7;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.personal-playlist-panel .clear-btn:hover {
  opacity: 1;
}

.personal-playlist-panel .clear-btn .icon {
  width: 16px;
  height: 16px;
}

.personal-playlist-panel ul {
  max-height: 60vh;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 0;
}

.personal-playlist-panel ul li {
  display: flex;
  align-items: center;
  padding: var(--gap-small) calc(2 * var(--gap-small));
  border-bottom: 1px solid var(--border-light);
  transition: opacity 0.2s ease;
}

.personal-playlist-panel ul li.removing {
  opacity: 0;
}

.personal-playlist-panel ul li:hover {
  background: var(--transaprent-black);
}

.personal-playlist-panel ul li a {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: calc(var(--gap-small) / 2);
  text-decoration: none;
  color: inherit;
}

.personal-playlist-panel ul li .title {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.25em;
}

.personal-playlist-panel ul li .duration {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25em;
}

.personal-playlist-panel ul li .remove-btn {
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0.4;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease;
}

.personal-playlist-panel ul li .remove-btn:hover {
  opacity: 1;
}

.personal-playlist-panel ul li .remove-btn .icon {
  width: 18px;
  height: 18px;
}

.personal-playlist-panel .empty-state {
  padding: calc(2 * var(--gap-small));
  text-align: center;
  color: var(--text-secondary);
  font-size: 14px;
}

.personal-playlist-panel .empty-state .icon {
  display: inline;
  width: 16px;
  height: 16px;
  vertical-align: middle;
  margin: 0 2px;
}

/* ADD TO PLAYLIST BUTTON */

.add-to-playlist {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.add-to-playlist .icon {
  width: 24px;
  height: 24px;
}

.add-to-playlist.flash-success {
  animation: flash-success 0.5s ease;
}

.add-to-playlist.flash-error {
  animation: flash-error 0.5s ease;
}

@keyframes flash-success {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

@keyframes flash-error {
  0%, 100% { transform: translateX(0); }
  25%, 75% { transform: translateX(-2px); }
  50% { transform: translateX(2px); }
}

/* INTEGRATION WITH EXISTING PLAYLIST PANEL */

.playlist-panel ul li {
  position: relative;
}

.playlist-panel ul li .add-to-playlist {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 24px;
  padding: 0;
  display: flex;
  justify-content: center;
}

/* Episode card segment list */
.card .segments li {
  display: flex;
  align-items: center;
}

.card .segments li .add-to-playlist {
  margin-left: auto;
}

/* RESPONSIVE */

@media (max-width: 768px) {
  .personal-playlist-container {
    display: none;
  }

  .add-to-playlist {
    display: none;
  }
}
main {
  >.playable {
    >header:first-child {
      display: grid;
      align-items: flex-start;
      grid-template-columns: min-content 1fr;
      grid-template-rows: min-content;
      column-gap: calc(3 * var(--gap-small));

      .play-button.small {
        min-width: var(--big-button-size);
        width: var(--big-button-size);
        min-height: var(--big-button-size);
      }

      .metadata {
        .duration-and-episode {
          font-size: 1.25rem;
        }

        >*:not(h1, .tags) {
          font-size: 19px;
          line-height: 1.31em;
        }
      }
    }

    .metadata {
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: 1fr;
      row-gap: calc(1.5 * var(--gap-small));
    }

    &.show {
      .segment.card {
        .parent-episode {
          display: none;
        }
      }
    }
  }
}

/* BREADCRUMBS NAVIGATION */

nav.previous-next {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: calc(3 * var(--gap-small));
}

nav.previous-next .next {
  text-align: right;
}
.player {
  background-color: var(--player-bg);
  bottom: 0px;
  display: flex;
  flex-direction: column;
  height: auto;
  justify-content: space-between;
  position: fixed;
  width: 100%;
  z-index: 9;
  transition: background-color 0.3s ease;
}

.player-hidden {
  transform: translateY(100%);
  transition: transform 0.5s ease-out 0s;
}

.player-visible {
  transform: translateY(0px);
  transition: transform 0.5s ease-out 0s;
}

.player .timeline {
  width: 100%;
  height: 6px;
  background-color: var(--pink-light);
  position: relative;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.player .timeline-progress {
  border-radius: 0 8px 8px 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--black);
}

aside.player .player-controls {
  display: grid;
  align-items: center;
  grid-template-columns: 32px calc(50% - 158px) 260px calc(50% - 158px);
  grid-column-gap: var(--gap-small);
  padding: var(--gap-small) calc(2 * var(--gap-small));
}

.player-controls>header {
  display: flex;
  align-items: center;
  justify-content: flex-start;

}

aside.player .player-controls .track-links {
  display: flex;
  flex-direction: column;
  max-width: 100%;
  margin-right: calc(2 * var(--gap-small));
  overflow: hidden;
  line-height: 1.15em;
  margin-right: auto;
}

aside.player .player-controls .pause-icon.hidden,
aside.player .player-controls .play-icon.hidden {
  display: none;
}

aside.player .player-controls .track-title a,
aside.player .player-controls .track-title .non-link {
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 100%;
  display: block;
}

aside.player .player-controls .track-subtitle a {
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
}

aside.player .track-title a {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.25em;
  /*! white-space: nowrap; */
}

aside.player nav {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: calc(3*var(--gap-small));
}

aside.player button:hover:not(.play-button, .pause-button) path {
  fill: var(--dark-gray);
}

aside.player .player-controls aside {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  column-gap: calc(2 * var(--gap-small));
}

aside.player .player-controls .duration {
  font-size: 14px;
  font-weight: 700;
}

/* VOLUME CONTROL */

.player .volume-control-wrapper {
  height: 24px;
  display: flex;
  align-items: center;
  margin-right: 0.6em;
}

@media screen and (max-width: 767px) {
  .player .volume-control-wrapper {
    display: none;
  }
}

.player .volume-slider-wrapper {
  background-color: var(--player-bg);
  width: 48px;
  height: 20px;
}

.player .volume-slider {
  width: 100%;
  height: 100%;
  padding: 0;
  margin-left: 0.5em;
  -webkit-appearance: none;
  background: transparent;
}

/* Chrome & Safari */
.player .volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  background: var(--text-primary);
  border-radius: 100%;
  margin-top: -3px;
}

.player .volume-slider::-webkit-slider-runnable-track {
  height: 4px;
  background: var(--border-light);
}

/* Firefox */
.player .volume-slider::-moz-range-thumb {
  width: 10px;
  height: 10px;
  background: var(--text-primary);
}

.player .volume-slider::-moz-range-track {
  height: 4px;
  background: var(--border-light);
}

.player .volume-slider::-moz-range-progress {
  background: var(--text-primary);
}


/* PLAYLIST PANEL */

.playlist-panel {
  position: absolute;
  bottom: 100%;
  width: 300px;
  background-color: var(--card-bg);
  /*border: 1px solid #000;*/
  overflow-y: hidden;
  transition: background-color 0.3s ease;
}

.playlist-panel.hidden {
  display: none;
}

.player-controls button.playlist {
  min-width: var(--small-button-size);
  width: var(--small-button-size);
  height: var(--small-button-size);
  min-height: var(--small-button-size);
  border-radius: 50%;
}

.playlist-panel:not(.hidden)+.player-controls button.playlist {
  background-color: var(--black) !important;
}

.playlist-panel:not(.hidden)+.player-controls button.playlist path {
  fill: var(--bg-primary);
}

.playlist-panel header {
  display: flex;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  padding: calc(var(--gap-small) / 2) calc(2 * var(--gap-small));
  background: var(--text-primary);
  color: var(--bg-primary);
}

.playlist-panel ul {
  height: 365px;

  overflow-y: scroll;
  max-height: 60vh;
}

.playlist-panel ul li {
  display: block;
  padding: var(--gap-small) calc(2 * var(--gap-small));
}

.playlist-panel li.active {
  background: var(--pink-light);
}

.playlist-panel li:not(.active):hover {
  background: var(--transaprent-black);
}

.playlist-panel ul li a {
  display: grid;
  align-items: center;
  row-gap: calc(var(--gap-small) / 2);
  grid-template-columns: calc(100% - 24px) 24px;
  align-items: center;
}

.playlist-panel ul a {
  text-decoration: none;
}

.playlist-panel ul .title {
  padding-right: calc(2 * var(--gap-small));
  grid-area: 2 / 1 / 3 / 2;
}

.playlist-panel ul .title,
.playlist-panel ul .duration {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.25em;
}

.playlist-panel ul .duration {
  grid-area: 1 / 1 / 2 / 2;
  font-weight: 700;
}

.playlist-panel li a>span {
  vertical-align: middle;
}

.playlist-panel ul .arrow {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  grid-area: 1 / 2 / 3 / 3;
  align-self: center;
}

/* RSS LINK */

.rss-link {
  display: flex;
  align-items: flex-start;
  row-gap: 6px;

  .copy-icon {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
  }

  a {
    margin-right: 6px;
    word-break: break-all;
  }

  .copy-success {
    background-color: var(--text-primary);
    color: var(--bg-primary);
    padding: 2px 8px;
    font-weight: 700;
  }
}

/* PODCAST */

.podcasts-index {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  column-gap: var(--gap-small);

  .podcasts {
    min-width: calc(66% - var(--gap-small));
    flex-grow: 1;
    flex-shrink: 1;
  }

  .instructions {
    min-width: 34%;
    flex-grow: 1;
    flex-shrink: 1;

    >* {
      margin-bottom: calc(2 * var(--gap-small));
    }

    h2 {
      font-size: 20px;
    }
  }

  .card .podcast-image img {
    width: 96px;
    min-width: 96px;
  }
}

.podcast-guide-page {
  .instructions {
    >* {
      margin-bottom: calc(2 * var(--gap-small));
    }

    .podcast-apps {
      display: none;
    }
  }
}

.flash-update {
  background-color: transparent;
  transition: background-color 1s ease-out;
}

.flash-active {
  background-color: rgb(255, 131, 190);
}

/* status colors (--hot-* / --light-*) now in settings/tokens.css */

.podcast-app.card {
  >h2 {
    width: fit-content;
  }

  &.works>h2 {
    background-color: var(--light-green);
  }

  &.works-partially>h2 {
    background-color: var(--light-yellow);
  }

  &.works-not>h2 {
    background-color: var(--light-red);
  }
}

.intro-boxes .podcast.card img {
  width: 96px;
  min-width: 96px;
}

.playables>.podcast.card.teaser {
  * {
    color: var(--dark-gray);
  }

  img {
    filter: grayscale(1);
  }

  a {
    text-decoration: none;
  }
}

/* SINGLE PODCAST */

.podcast {
  >header {
    display: grid;
    align-items: flex-start;
    grid-template-columns: min-content 1fr;
    grid-template-rows: min-content;
    column-gap: calc(3 * var(--gap-small));
    row-gap: calc(2 * var(--gap-small));
  }
}

.podcast-image img {
  width: 180px;
  min-width: 180px;
  height: auto;
  object-fit: cover;
}

.podcast:not(.card) .metadata {
  display: grid;
  grid-template-rows: auto;
  row-gap: calc(1.5 * var(--gap-small));
}
/* This is probably not a great way to segment CSS. Rather, this shuold
   be broken up and moved to each respective feature/page based CSS file.
*/

@media(max-width:1024px) {

  h1 {
    font-size: 32px;
  }

  h2 {
    font-size: 24px;
    line-height: 1.2em;
  }

  main {
    padding: var(--spacing-md) calc(var(--spacing-md) / 2);
    padding-bottom: 80px;
  }

  .card {
    padding: calc(2 * var(--gap-small))
  }

  .playables>article,
  .intro-boxes .playables>article>section {
    column-gap: calc(1.5 * var(--gap-small));
  }

  .more-episodes .playables {
    margin-top: calc(2 * var(--gap-small));
  }

  .show-more {
    margin-top: calc(var(--gap-small) * 3);
  }

  /* HOME PAGE */

  main .welcome {
    margin: calc(var(--spacing-md) * 0.5) auto calc(var(--spacing-md) * 1.5);
  }

  .intro-boxes {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .segments {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .latest-episode.playables>article .metadata h1 a {
    font-size: 32px;
  }

  .latest-episode .card:not(.podcast) .metadata {
    padding-top: 4px;
  }

  .more-episodes .playables,
  .featured-tags .tag>section {
    row-gap: calc(3 * var(--gap-small));
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  /* PODCAST */

  .podcasts-index {
    flex-wrap: wrap;
  }

  .podcasts-index .instructions,
  .podcasts-index .podcasts {
    min-width: 100%;
  }

  /* SINGLE EPISODE */

  main>.playable>header:first-child,
  .podcast>header {
    column-gap: calc(2 * var(--gap-small));
  }
}

@media(max-width: 768px) {

  body {
    padding-top: 55px;
  }

  h1 {
    font-size: 26px;
  }

  h2 {
    font-size: 20px;
  }

  .card>h2 {
    font-size: 20px;
  }

  .pagy-info {
    margin-top: calc(var(--spacing-md) / 2);
    font-size: 18px;
    margin-bottom: var(--gap-small);
  }

  main>.playable>header:first-child .play-button.small {
    min-width: var(--big-button-size--mobile);
    width: var(--big-button-size--mobile);
    min-height: var(--big-button-size--mobile);
    min-width: var(--big-button-size--mobile);
  }

  main {
    padding: calc(var(--spacing-md) * 1.5) calc(var(--gap-small));
  }

  main>h2 {
    font-size: 18px;
    margin-bottom: var(--gap-small) !important;
  }

  button.black-button {
    font-size: 16px;
    padding: 10px 20px;
  }

  .latest-episode .card>.buttons .play-button {
    width: var(--big-button-size--mobile);
    min-width: var(--big-button-size--mobile);
    height: var(--big-button-size--mobile);
    min-height: var(--big-button-size--mobile);
  }

  button.big {
    width: var(--big-button-size--mobile);
    min-width: var(--big-button-size--mobile);
    height: var(--big-button-size--mobile);
    min-height: var(--big-button-size--mobile);
  }

  .frontpage .intro-boxes .card {
    margin-bottom: calc(var(--gap-small) / 2);
    margin-bottom: 0;
  }
}

/* Styles related to 'mobile mode', i.e. the switch we do with Javascript.
   This breakpoint must always match the one in the Javascript, i.e:

   app/javascript/controllers/main_menu_controller.js

*/
@media(max-width: 1024px) {

  /* HEADER */

  .site-header {
    grid-template-columns: 40px minmax(0, 1fr) 24px;
  }

  .site-header .mobile-main-menu {
    display: block !important;
    text-align: right;
    position: relative;
    vertical-align: middle;
  }

  .site-header .toggle-mobile-menu {
    width: 26px !important;
    height: auto !important;
    vertical-align: middle;
  }

  .site-header .toggle-mobile-menu rect {
    transition: 0.25s all;
  }

  .site-header .toggle-mobile-menu.active rect:nth-child(1) {
    transform: rotate(45deg) translate(6px, -6px);
  }

  .site-header .toggle-mobile-menu.active rect:nth-child(2) {
    opacity: 0;
  }

  .site-header .toggle-mobile-menu.active rect:nth-child(3) {
    transform: rotate(-45deg) translate(-11px, -1px);
  }

  .main-menu ul {
    display: none !important;
  }

  .mobile-main-menu ul {
    position: absolute;
    z-index: 2;
    top: calc(100% + var(--gap-small));
    background: var(--card-bg);
    width: 100vw;
    right: calc(-2 * var(--gap-small));
    padding: calc(2 * var(--gap-small));
    box-shadow: var(--box-shadow);
  }

  .mobile-main-menu ul li:not(:last-child) {
    margin-bottom: 10px;
  }

  .mobile-main-menu ul a {
    font-size: 20px;
  }

  /* SEARCH */

  .site-header .search {
    width: 100%;
    max-width: 100%;
  }

}

@media(max-width: 768px) {

  /* HOME PAGE */

  main .welcome {
    margin: calc(var(--spacing-md) * 0.5) auto calc(var(--spacing-md));
    grid-template-columns: 1fr;
    row-gap: calc(2 * var(--gap-small));
  }

  main .welcome .site-logo svg {
    max-width: 100px;
  }

  main .cta p {
    font-size: 1rem;
    margin-top: calc(2 * var(--gap-small));
    margin-bottom: calc(var(--spacing-md) / 2);
  }

  .card .metadata h1,
  .card .metadata h1 a {
    font-size: 18px
  }

  .playables>article,
  .intro-boxes .playables>article>section {
    column-gap: var(--gap-small);
  }

  .intro-boxes .playables header h2,
  .intro-boxes .stream.card>header .broadcast-notifications {
    margin-bottom: calc(2 * var(--gap-small));
  }

  .podcast-image img {
    width: 96px;
    min-width: 96px;
  }

  .podcasts-index .card .podcast-image img {
    width: 68px;
    min-width: 68px;
  }

  .latest-episode.playables>article .metadata h1 a {
    font-size: 24px;
  }

  .latest-episode>.episode>.metadata aside.duration,
  .latest-episode>.episode>.metadata .description {
    font-size: 1rem;
  }

  .segments {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    row-gap: calc(1.5 * var(--gap-small));
  }

  /* MAIN SEGMENT HEADER */

  main>.playable>header:first-child,
  .podcast>header {
    column-gap: calc(1 * var(--gap-small));
  }

  main>.playable>header:first-child .metadata {
    padding-top: 7px;
  }

  /* RADIO */

  aside.player .player-controls {
    display: flex;
    flex-wrap: wrap;
    row-gap: var(--gap-small);
    padding: var(--gap-small) calc(var(--spacing-md) / 3);

  }

  aside.player header,
  aside.player nav {
    width: 100%;
  }

  aside.player nav {
    width: calc(100% - 80px);
    justify-content: flex-start;
    order: 3;
    justify-content: center;
  }

  aside.player .player-controls aside {
    width: 32px;
    order: 4;
    position: relative;
  }

  .transcript header h1 {
    font-size: 24px;
    margin: calc(var(--spacing-md) / 2) 0;
  }

  .transcript p {
    font-size: 16px;
  }

  aside.player .player-controls aside button,
  aside.player .player-controls span {
    display: none;
  }

  .player-controls button.playlist {
    order: 2;
  }

  aside.player .player-controls .track-links {
    order: 1;
    width: 100%;
    margin-right: 0;
  }

  /* OVERLAY BOX */

  .payment-modal-content,
  .overlay-box {
    padding: calc(var(--gap-small) * 4) calc(var(--gap-small) * 2) calc(var(--gap-small) * 3);
  }
}
/* SEARCH PAGE */

main {
  #search-form {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    column-gap: calc(var(--gap-small) * 1.5);
    row-gap: calc(var(--gap-small) * 1.5);

    select {
      background-color: var(--text-primary);
      color: var(--bg-primary);
      padding: 6px 40px 6px 10px;
      border: none;

      &:hover {
        background-color: var(--text-secondary);
      }

      option {
        background-color: var(--bg-primary);
        color: var(--text-primary);
      }
    }

    &~.tags {
      background-color: var(--card-bg);
      padding: calc(3 * var(--gap-small));
      box-shadow: var(--box-shadow);
      margin-bottom: var(--gap-small) !important;
      line-height: 1em;
      align-items: flex-start;

      header {
        line-height: 1.25em;
        font-weight: 700;
        font-size: 1.05em;
      }

      span {
        margin-top: 0;
      }
    }
  }
}

/* SEARCH PAGINATION */

.search-paginator {
  margin-top: calc(var(--spacing-md) - var(--gap-small));

  nav {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1em;
    column-gap: var(--gap-small);
  }

  span {
    border: 1px solid transparent;

    &:not(.prev, .next) {
      width: 32px;
      height: 32px;
      min-width: 32px;
      min-height: 32px;
      justify-content: center;
      align-items: center;
      display: flex;
    }
  }

  .active {
    font-weight: 700;
    border: 1px solid var(--text-primary);
    border-radius: 50%;
  }

  a {
    font-weight: 400;
    text-decoration: none;
    padding: var(--gap-small) calc(1.5 * var(--gap-small));

    &:hover {
      color: var(--dark-gray);
    }
  }
}
/* TAGS */

.tags {
  column-gap: var(--gap-small);
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  row-gap: var(--gap-small);

  span {
    display: inline-block;
  }

  a {
    border: 1px solid var(--black);
    border-radius: 99px;
    padding: 3px 8px 3px 12px;
    display: block;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none !important;
    line-height: 1em;

    &:hover {
      color: #fff;
      background-color: var(--black);
      cursor: pointer;
    }
  }
}

.card .tags {
  row-gap: 0;

  .tag {
    margin-top: var(--gap-small);
  }
}
.timestamps {
  margin: 1.5rem 0;
  padding: 1rem;
  background: #f5f5f5;
  border-radius: 8px;
}

.timestamps h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
  color: #333;
}

.timestamp-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.timestamp-list li {
  padding: 0.5rem 0;
  border-bottom: 1px solid #e0e0e0;
}

.timestamp-list li:last-child {
  border-bottom: none;
}

.timestamp-link {
  color: inherit;
  text-decoration: none;
  display: block;
  padding: 0.25rem 0;
  transition: color 0.2s ease;
}

.timestamp-link:hover {
  color: #0066cc;
  text-decoration: none;
}

.timestamp-link:visited {
  color: inherit;
}

.timestamp-link:visited:hover {
  color: #0066cc;
}
/* TRANSCRIPT TEASER PANEL */

.transcript.teaser {
  position: relative;
}

.transcript.teaser::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(to top, var(--card-bg), transparent);
  z-index: 1;
}

.transcript header h2 {
  font-size: 19px;
  line-height: 1.3em;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.transcript header h1 {
  font-size: 30px;
  line-height: 1.25em;
  text-align: center;
  margin: var(--spacing-md) 0;
}

.transcript section h2 {
  margin-bottom: var(--gap-small);
  font-size: 20px;
}

.transcript p {
  margin-bottom: 1em;
  font-size: 19px;
  line-height: 1.35em;
  position: relative;
}

.transcript p>a:first-child {
  display: inline-block;
  line-height: 0;
  vertical-align: text-bottom;
  line-height: 1em;
  position: absolute;
  left: -22px;
  top: 3px;
  border-radius: 50%;
}

/* TRANSCRIPT TEASER PANEL popup */

.transcript.teaser {
  position: relative;
  overflow: hidden;
}

.transcript.teaser::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(to top, var(--card-bg), transparent);
  z-index: 1;
}

article.transcript {
  background: var(--card-bg);
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.05);
  padding: var(--spacing-md) calc(var(--spacing-md) * 2);
  margin-bottom: var(--spacing-md);

  header {
    h2 {
      font-size: 19px;
      line-height: 1.3em;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    h1 {
      font-size: 30px;
      line-height: 1.25em;
      text-align: center;
      margin: var(--spacing-md) 0;
    }
  }

  section h2 {
    margin-bottom: var(--gap-small);
    font-size: 20px;
  }

  p {
    margin-bottom: 1em;
    font-size: 19px;
    line-height: 1.35em;
    position: relative;

    >a:first-child {
      display: inline-block;
      line-height: 0;
      vertical-align: text-bottom;
      line-height: 1em;
      position: absolute;
      left: -22px;
      top: 3px;
      border-radius: 50%;
    }
  }
}

@media (max-width: 1024px) {
  article.transcript {
    padding: var(--spacing-md) calc(var(--spacing-md) / 2) var(--spacing-md) var(--spacing-md);
  }
}

.transcript.teaser {
  position: relative;
  overflow: hidden;

  &::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: linear-gradient(to top, var(--card-bg), transparent);
    z-index: 1;
  }
}

/* ==========================================================================
   TranscriptForge — internal AI studio component library
   --------------------------------------------------------------------------
   Replaces the Tailwind utility classes that used to style the
   app/views/transcript_forge/* views. Everything is scoped under `.tf`
   (the page root) so it never collides with the public site's own
   components (.card, .btn, etc.) which are loaded by the same layout.

   Values mirror Tailwind v3 defaults so the conversion stays visually
   close to the original (the brief was "preserve, minor drift OK").
   This is the components/objects layer; Phase C folds it into ITCSS.
   ========================================================================== */

.tf {
  /* palette (Tailwind v3 defaults) */
  --tf-gray-50:#f9fafb; --tf-gray-100:#f3f4f6; --tf-gray-200:#e5e7eb;
  --tf-gray-300:#d1d5db; --tf-gray-400:#9ca3af; --tf-gray-500:#6b7280;
  --tf-gray-600:#4b5563; --tf-gray-700:#374151; --tf-gray-800:#1f2937;
  --tf-blue-50:#eff6ff;  --tf-blue-100:#dbeafe; --tf-blue-500:#3b82f6;
  --tf-blue-600:#2563eb; --tf-blue-700:#1d4ed8; --tf-blue-800:#1e40af;
  --tf-green-100:#dcfce7; --tf-green-600:#16a34a; --tf-green-700:#15803d; --tf-green-800:#166534;
  --tf-red-50:#fef2f2;   --tf-red-100:#fee2e2;  --tf-red-200:#fecaca;
  --tf-red-600:#dc2626;  --tf-red-700:#b91c1c;  --tf-red-800:#991b1b;
  --tf-yellow-50:#fefce8; --tf-yellow-100:#fef9c3; --tf-yellow-600:#ca8a04; --tf-yellow-700:#a16207; --tf-yellow-800:#854d0e;
  --tf-orange-100:#ffedd5; --tf-orange-600:#ea580c; --tf-orange-700:#c2410c; --tf-orange-800:#9a3412;
  --tf-purple-100:#f3e8ff; --tf-purple-600:#9333ea; --tf-purple-700:#7e22ce; --tf-purple-800:#6b21a8;
  --tf-pink-100:#fce7f3;  --tf-pink-800:#9d174d;
  --tf-indigo-100:#e0e7ff; --tf-indigo-800:#3730a3;

  --tf-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tf-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tf-radius: 0.25rem;
  --tf-radius-lg: 0.5rem;

  margin: 0 auto;
  padding: 2rem 1rem;
  color: var(--tf-gray-800);
  font-size: 1rem;
  line-height: 1.5;
}

/* width variants (was max-w-4xl / max-w-6xl) */
.tf--narrow { max-width: 56rem; }
.tf--wide   { max-width: 72rem; }

/* Top-level vertical rhythm: space stacked page blocks apart (≈ the old
   per-block mb-6/mb-8). Nested grids/cards keep their own flow. */
.tf > * + * { margin-top: 1.5rem; }

/* --------------------------------------------------------------------------
   Typography
   ------------------------------------------------------------------------ */
.tf-title {                 /* was: h1.text-3xl.font-bold (+ mb-2) */
  font-size: 1.875rem;
  line-height: 1.2;
  font-weight: 700;
  margin: 0 0 0.5rem;
}
.tf-title--sm { font-size: 1.5rem; } /* was text-2xl */
.tf-lead {                  /* was: p.text-gray-600 under a title */
  color: var(--tf-gray-600);
  margin: 0;
}
.tf h2 { font-size: 1.25rem; line-height: 1.4; font-weight: 600; margin: 0 0 1rem; } /* text-xl font-semibold mb-4 */
.tf h2.tf-h2--sm { font-size: 1.125rem; }                                            /* text-lg font-semibold mb-4 */
.tf h3 { font-size: 1rem; font-weight: 600; margin: 0 0 1rem; }                      /* font-semibold mb-4 */
.tf h3.tf-h3--inline { margin: 0; font-weight: 500; }                                /* font-medium, no margin */

/* --------------------------------------------------------------------------
   Page header bar  (was: flex justify-between items-center mb-8)
   ------------------------------------------------------------------------ */
.tf-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.tf-header--top { align-items: flex-start; }
.tf-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* Back link row (was: div.mb-8 > a.text-blue-600.hover:text-blue-800) */
.tf-back { display: inline-block; }

/* --------------------------------------------------------------------------
   Links  (was: text-blue-600 hover:underline / hover:text-blue-800)
   ------------------------------------------------------------------------ */
.tf-link { color: var(--tf-blue-600); text-decoration: none; }
.tf-link:hover { color: var(--tf-blue-800); text-decoration: underline; }
.tf-link--danger { color: var(--tf-red-600); }
.tf-link--danger:hover { color: var(--tf-red-700); }
.tf-link--success { color: var(--tf-green-600); }
.tf-link--success:hover { color: var(--tf-green-700); }

/* button that looks like an inline text link (was: button_to/link_to with
   text-{c}-600 hover:underline / hover:text-{c}-800 — e.g. table actions) */
.tf-linkbtn {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--tf-blue-600); text-decoration: none;
}
.tf-linkbtn:hover { color: var(--tf-blue-800); text-decoration: underline; }
.tf-linkbtn--xs { font-size: 0.75rem; }
.tf-linkbtn--sm { font-size: 0.875rem; }
.tf-linkbtn--danger { color: var(--tf-red-600); }
.tf-linkbtn--danger:hover { color: var(--tf-red-700); }
.tf-linkbtn--success { color: var(--tf-green-600); }
.tf-linkbtn--success:hover { color: var(--tf-green-700); }
/* button_to wraps its button in a form; kill the form's default spacing */
.tf-linkbtn-form { display: inline; margin: 0; }

/* --------------------------------------------------------------------------
   Cards  (was: bg-white rounded-lg shadow p-6)
   ------------------------------------------------------------------------ */
.tf-card {
  background: #fff;
  border-radius: var(--tf-radius-lg);
  box-shadow: var(--tf-shadow);
  padding: 1.5rem;
}
.tf-card--hover { transition: box-shadow 0.15s ease; }
.tf-card--hover:hover { box-shadow: var(--tf-shadow-lg); }
.tf-card--flush { padding: 0; }                 /* card whose sections supply their own padding */
.tf-card__section { padding: 1.5rem; }           /* was: p-6 */
.tf-card__section + .tf-card__section,
.tf-card__section--bordered { border-top: 1px solid var(--tf-gray-200); } /* was: border-b between p-6 blocks */
.tf-card--sticky { position: sticky; top: 1rem; } /* was: sticky top-4 */

/* tinted note cards (was: bg-red-50 border border-red-200 rounded[-lg] p-4/6) */
.tf-note { border-radius: var(--tf-radius-lg); padding: 1rem; }
.tf-note--danger { background: var(--tf-red-50); border: 1px solid var(--tf-red-200); }
.tf-note__title { font-weight: 500; margin: 0 0 0.5rem; }
.tf-note--danger .tf-note__title { color: var(--tf-red-800); }
.tf-note--danger,
.tf-note--danger p { color: var(--tf-red-700); }

/* --------------------------------------------------------------------------
   Stat tiles  (was: bg-white rounded-lg shadow p-6 with a big number + label)
   ------------------------------------------------------------------------ */
.tf-stats { display: grid; gap: 1rem; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tf-stat {
  background: #fff;
  border-radius: var(--tf-radius-lg);
  box-shadow: var(--tf-shadow);
  padding: 1.5rem;
}
.tf-stat__value { font-size: 1.5rem; font-weight: 700; }     /* text-2xl font-bold */
.tf-stat__label { font-size: 0.875rem; color: var(--tf-gray-600); } /* text-sm text-gray-600 */
.tf-stat__value--blue   { color: var(--tf-blue-600); }
.tf-stat__value--green  { color: var(--tf-green-600); }
.tf-stat__value--yellow { color: var(--tf-yellow-600); }
.tf-stat__value--orange { color: var(--tf-orange-600); }
.tf-stat__value--red    { color: var(--tf-red-600); }

/* --------------------------------------------------------------------------
   Generic grids  (was: grid grid-cols-N gap-4/6)
   ------------------------------------------------------------------------ */
.tf-grid-2 { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tf-grid-3 { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tf-grid-4 { display: grid; gap: 1rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tf-grid-2--gap-lg, .tf-grid-3--gap-lg { gap: 1.5rem; } /* form rows used gap-6 */

/* Main + sidebar layout (was: grid grid-cols-3 gap-6 with col-span-2 + 1) */
.tf-layout { display: grid; gap: 1.5rem; grid-template-columns: 2fr 1fr; }
.tf-layout--3-1 { grid-template-columns: 3fr 1fr; } /* workspace/show: lg:grid-cols-4 + col-span-3/1 */

/* --------------------------------------------------------------------------
   Vertical stacks  (was: space-y-2/3/4/6, single-column "grid gap-4")
   ------------------------------------------------------------------------ */
.tf-stack > * + *      { margin-top: 1rem; }
.tf-stack--xs > * + *  { margin-top: 0.5rem; }
.tf-stack--sm > * + *  { margin-top: 0.75rem; }
.tf-stack--lg > * + *  { margin-top: 1.5rem; }

/* Inline row of items (was: flex items-center gap-N / flex gap-N) */
.tf-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.tf-row--top { align-items: flex-start; }
.tf-row--between { justify-content: space-between; }
.tf-row--gap-lg { gap: 1rem; }

/* --------------------------------------------------------------------------
   Buttons  (was: px-4 py-2 bg-{c}-600 text-white rounded hover:bg-{c}-700,
   plus the previously-undefined .btn / .btn-primary / .btn-secondary)
   ------------------------------------------------------------------------ */
.tf-btn, .tf .btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  border: 0;
  border-radius: var(--tf-radius);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.25rem;
  color: #fff;
  background: var(--tf-blue-600);
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: background-color 0.15s ease;
}
.tf-btn:hover, .tf .btn:hover { background: var(--tf-blue-700); color: #fff; text-decoration: none; }
.tf-btn--primary,   .tf .btn-primary   { background: var(--tf-blue-600); }
.tf-btn--primary:hover, .tf .btn-primary:hover { background: var(--tf-blue-700); }
.tf-btn--success { background: var(--tf-green-600); }
.tf-btn--success:hover { background: var(--tf-green-700); }
.tf-btn--purple { background: var(--tf-purple-600); }
.tf-btn--purple:hover { background: var(--tf-purple-700); }
.tf-btn--warning { background: var(--tf-yellow-600); }
.tf-btn--warning:hover { background: var(--tf-yellow-700); }
.tf-btn--danger { background: var(--tf-red-600); }
.tf-btn--danger:hover { background: var(--tf-red-700); }
/* neutral / secondary (was: bg-gray-200 hover:bg-gray-300, text dark) */
.tf-btn--neutral, .tf-btn--secondary, .tf .btn-secondary, .tf .btn-danger {
  background: var(--tf-gray-200);
  color: var(--tf-gray-800);
}
.tf-btn--neutral:hover, .tf-btn--secondary:hover, .tf .btn-secondary:hover { background: var(--tf-gray-300); color: var(--tf-gray-800); }
.tf .btn-danger { background: var(--tf-red-600); color: #fff; }
.tf .btn-danger:hover { background: var(--tf-red-700); }
.tf-btn--block { display: block; width: 100%; }

/* Small "chip" buttons/links (was: text-sm px-3 py-1 bg-{c}-100 text-{c}-700 rounded hover:bg-{c}-200) */
.tf-chip-btn {
  display: inline-block;
  font-size: 0.875rem;
  padding: 0.25rem 0.75rem;
  border-radius: var(--tf-radius);
  text-decoration: none;
  background: var(--tf-gray-100);
  color: var(--tf-gray-700);
  transition: background-color 0.15s ease;
}
.tf-chip-btn:hover { background: var(--tf-gray-200); }
.tf-chip-btn--blue   { background: var(--tf-blue-100);   color: var(--tf-blue-700); }
.tf-chip-btn--blue:hover   { background: #bfdbfe; }
.tf-chip-btn--green  { background: var(--tf-green-100);  color: var(--tf-green-700); }
.tf-chip-btn--green:hover  { background: #bbf7d0; }
.tf-chip-btn--purple { background: var(--tf-purple-100); color: var(--tf-purple-700); }
.tf-chip-btn--purple:hover { background: #e9d5ff; }
.tf-chip-btn--yellow { background: var(--tf-yellow-100); color: var(--tf-yellow-800); }
.tf-chip-btn--yellow:hover { background: #fef08a; }
.tf-chip-btn--xs { font-size: 0.75rem; padding: 0.25rem 0.5rem; }
.tf-chip-btn--active-blue   { background: var(--tf-blue-100); }
.tf-chip-btn--active-purple { background: var(--tf-purple-100); }

/* --------------------------------------------------------------------------
   Badges / pills  (was: px-2 py-1 text-xs rounded bg-{c}-100 text-{c}-800)
   Emitted by TranscriptForgeHelper#refinement_status_color and
   #soundbite_type_badge — keep these class names in sync with that helper.
   ------------------------------------------------------------------------ */
.tf-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.25rem 0.5rem;
  border-radius: var(--tf-radius);
  background: var(--tf-gray-100);
  color: var(--tf-gray-800);
  white-space: nowrap;
}
.tf-badge--pill { border-radius: 9999px; }
.tf-badge--gray   { background: var(--tf-gray-100);   color: var(--tf-gray-800); }
.tf-badge--gray-600 { background: var(--tf-gray-100); color: var(--tf-gray-600); }
.tf-badge--blue   { background: var(--tf-blue-100);   color: var(--tf-blue-800); }
.tf-badge--green  { background: var(--tf-green-100);  color: var(--tf-green-800); }
.tf-badge--red    { background: var(--tf-red-100);    color: var(--tf-red-800); }
.tf-badge--yellow { background: var(--tf-yellow-100); color: var(--tf-yellow-800); }
.tf-badge--orange { background: var(--tf-orange-100); color: var(--tf-orange-800); }
.tf-badge--purple { background: var(--tf-purple-100); color: var(--tf-purple-800); }
.tf-badge--pink   { background: var(--tf-pink-100);   color: var(--tf-pink-800); }
.tf-badge--indigo { background: var(--tf-indigo-100); color: var(--tf-indigo-800); }

/* plain gray tag chip (was: px-2 py-1 bg-gray-100 text-sm/xs rounded) */
.tf-tag {
  display: inline-block;
  font-size: 0.875rem;
  padding: 0.25rem 0.5rem;
  border-radius: var(--tf-radius);
  background: var(--tf-gray-100);
  color: var(--tf-gray-800);
}
.tf-tag--sm { font-size: 0.75rem; }
.tf-tag--blue { background: var(--tf-blue-100); color: var(--tf-blue-800); }
.tf-tag--purple { background: var(--tf-purple-100); color: var(--tf-purple-800); }
/* removable tag in the soundbite editor (was: ...rounded flex items-center gap-1) */
.tf-tag--removable { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.75rem; background: var(--tf-blue-100); color: var(--tf-blue-800); }
.tf-tag__remove { background: none; border: 0; cursor: pointer; color: var(--tf-blue-600); font-size: 1em; line-height: 1; }
.tf-tag__remove:hover { color: var(--tf-blue-800); }

/* --------------------------------------------------------------------------
   Tables  (was: min-w-full, border-b rows, hover:bg-gray-50, text-left py-2)
   ------------------------------------------------------------------------ */
.tf-table-wrap { overflow-x: auto; }                 /* was: overflow-x-auto */
.tf-table { width: 100%; min-width: 100%; border-collapse: collapse; }
.tf-table th { text-align: left; padding: 0.5rem; border-bottom: 1px solid var(--tf-gray-200); font-weight: 600; }
.tf-table td { padding: 0.5rem; border-bottom: 1px solid var(--tf-gray-200); }
.tf-table tbody tr:hover { background: var(--tf-gray-50); }

/* Divided list (was: divide-y with hover:bg-gray-50 rows) */
.tf-list > * + * { border-top: 1px solid var(--tf-gray-200); }
.tf-list__row { padding: 1.5rem; transition: background-color 0.15s ease; }
.tf-list__row:hover { background: var(--tf-gray-50); }

/* Bordered item box (was: border rounded[-lg] p-3/4 [hover:bg-gray-50]) */
.tf-item { border: 1px solid var(--tf-gray-200); border-radius: var(--tf-radius); padding: 0.75rem; }
.tf-item--lg { border-radius: var(--tf-radius-lg); padding: 1rem; }
.tf-item--hover { transition: background-color 0.15s ease; }
.tf-item--hover:hover { background: var(--tf-gray-50); }

/* --------------------------------------------------------------------------
   Definition / metadata lists  (was: dl.space-y-2 with flex justify-between)
   ------------------------------------------------------------------------ */
.tf-dl { margin: 0; font-size: 0.875rem; }
.tf-dl > div + div { margin-top: 0.5rem; }
.tf-dl--gap-md > div + div { margin-top: 0.75rem; }
.tf-dl__row { display: flex; justify-content: space-between; }
.tf-dl dt { color: var(--tf-gray-600); }
.tf-dl dd { margin: 0; font-weight: 500; }

/* key/value pair stacked (was: span.text-gray-500/600 + span.font-medium) */
.tf-field-label { color: var(--tf-gray-500); }
.tf-field-label--600 { color: var(--tf-gray-600); }
.tf-field-value { font-weight: 500; }

/* --------------------------------------------------------------------------
   Forms  (was: label.block.text-sm.font-medium.mb-1/2 + input.w-full.px-3.py-2.border.rounded)
   ------------------------------------------------------------------------ */
.tf-label { display: block; font-size: 0.875rem; font-weight: 500; margin-bottom: 0.5rem; }
.tf-label--tight { margin-bottom: 0.25rem; } /* was mb-1 */
.tf-input, .tf-textarea, .tf-select {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--tf-gray-200);
  border-radius: var(--tf-radius);
  font-size: 0.875rem;
  font-family: inherit;
  background: #fff;
  color: var(--tf-gray-800);
}
.tf-input:focus, .tf-textarea:focus, .tf-select:focus { /* was: focus:ring-2 focus:ring-blue-500 */
  outline: none;
  border-color: var(--tf-blue-500);
  box-shadow: 0 0 0 2px rgb(59 130 246 / 0.5);
}
.tf-input--mono, .tf-textarea--mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.tf-check-row { display: flex; align-items: center; }
.tf-check-row input { margin-right: 0.5rem; }
.tf-check-row label { font-size: 0.875rem; }
.tf-scroll-box { max-height: 12rem; overflow-y: auto; border: 1px solid var(--tf-gray-200); border-radius: var(--tf-radius); padding: 0.75rem; }

/* --------------------------------------------------------------------------
   Code / preformatted  (was: pre/code bg-gray-50 p-4 rounded text-sm overflow-x-auto)
   ------------------------------------------------------------------------ */
.tf-pre {
  background: var(--tf-gray-50);
  padding: 1rem;
  border-radius: var(--tf-radius);
  font-size: 0.875rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}
.tf-pre--xs { font-size: 0.75rem; padding: 0.5rem; }
.tf-code { background: var(--tf-yellow-100); padding: 0.25rem 0.5rem; border-radius: var(--tf-radius); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* --------------------------------------------------------------------------
   Progress bar  (was: w-full bg-gray-200 rounded-full h-2/3 + inner bg-blue-600)
   ------------------------------------------------------------------------ */
.tf-progress { width: 100%; background: var(--tf-gray-200); border-radius: 9999px; height: 0.5rem; overflow: hidden; }
.tf-progress--lg { height: 0.75rem; }
.tf-progress--w32 { width: 8rem; } /* was the w-32 inline-table progress */
.tf-progress__bar { background: var(--tf-blue-600); height: 100%; border-radius: 9999px; transition: width 0.5s ease; }

/* --------------------------------------------------------------------------
   Misc helpers (low-level utilities that keep their job; scoped to .tf)
   ------------------------------------------------------------------------ */
/* small spacing helpers (utilities layer) for the long tail of one-off
   mt-1/2/3/4/6 / inline-block that don't warrant a component */
.tf-mt-1 { margin-top: 0.25rem; }
.tf-mt-2 { margin-top: 0.5rem; }
.tf-mt-3 { margin-top: 0.75rem; }
.tf-mt-4 { margin-top: 1rem; }
.tf-mt-6 { margin-top: 1.5rem; }
.tf-inline-block { display: inline-block; }
.tf-card__action { display: inline-block; margin-top: 1rem; } /* trailing "View all" style link in a card */

.tf-ml-1 { margin-left: 0.25rem; }
.tf-ml-2 { margin-left: 0.5rem; }
.tf-mr-3 { margin-right: 0.75rem; }

.tf-muted { color: var(--tf-gray-500); }
.tf-muted-600 { color: var(--tf-gray-600); }
.tf-text-400 { color: var(--tf-gray-400); }
.tf-text-700 { color: var(--tf-gray-700); }
.tf-text-danger { color: var(--tf-red-600); }
.tf-text-success { color: var(--tf-green-600); }
.tf-text-strong { font-weight: 700; }
.tf-medium { font-weight: 500; }
.tf-semibold { font-weight: 600; }
.tf-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.tf-center { text-align: center; }
.tf-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* checkbox/label option row (was: flex items-start mb-2 cursor-pointer hover:bg-gray-50 p-1) */
.tf-check-option { display: flex; align-items: flex-start; padding: 0.25rem; cursor: pointer; }
.tf-check-option:hover { background: var(--tf-gray-50); }
.tf-text-sm { font-size: 0.875rem; }
.tf-text-xs { font-size: 0.75rem; }
.tf-empty { text-align: center; padding: 3rem 0; }   /* was: text-center py-12 */
.tf-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* was line-clamp-2 */
.tf-relaxed { line-height: 1.625; }                  /* was leading-relaxed */
.tf-flex-1 { flex: 1 1 0%; }                          /* was flex-1 */
.tf-wrap { display: flex; flex-wrap: wrap; gap: 0.5rem; } /* was flex flex-wrap gap-2 */
.tf-wrap--tight { gap: 0.25rem; }
.tf-play-btn { background: none; border: 0; padding: 0; cursor: pointer; color: var(--tf-blue-600); }
.tf-play-btn:hover { color: var(--tf-blue-800); }
.tf-play-btn svg { width: 1.25rem; height: 1.25rem; }

/* Spinner (was: animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600) */
.tf-spinner {
  width: 2rem; height: 2rem; border-radius: 9999px;
  border: 2px solid transparent; border-bottom-color: var(--tf-blue-600);
  animation: tf-spin 0.75s linear infinite;
}
.tf-loading { display: flex; align-items: center; justify-content: center; padding: 2rem 0; }
@keyframes tf-spin { to { transform: rotate(360deg); } }

/* Live "pulse" text (was: animate-pulse) */
.tf-pulse { animation: tf-pulse 2s cubic-bezier(0.4,0,0.6,1) infinite; }
@keyframes tf-pulse { 50% { opacity: 0.5; } }

/* "● Live" indicator injected by the monitoring dashboard JS */
.tf-live { color: var(--tf-green-600); }

/* --------------------------------------------------------------------------
   Responsive — collapse multi-column layouts on smaller screens
   (mirrors the md:/lg: breakpoints the utilities used)
   ------------------------------------------------------------------------ */
@media (max-width: 1023px) {
  .tf-layout, .tf-layout--3-1 { grid-template-columns: 1fr; }
  .tf-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .tf-grid-2, .tf-grid-3, .tf-grid-4 { grid-template-columns: 1fr; }
  .tf-stats { grid-template-columns: 1fr; }
  .tf-header { flex-direction: column; align-items: stretch; }
}
/* Single-purpose helpers.
   These replace the handful of Tailwind utilities that remained in markup
   after detailwindifying the public/admin views (spacing margins + the w-96
   width on the upload title fields). Values match Tailwind's default scale
   so nothing shifts visually. */

.mt-8  { margin-top: 2rem; }
.mt-10 { margin-top: 2.5rem; }
.mt-16 { margin-top: 4rem; }
.mb-4  { margin-bottom: 1rem; }
.mb-8  { margin-bottom: 2rem; }
.w-96  { width: 24rem; }

/* App-wide single-purpose utilities (were in application.css) */
.hidden { display: none !important; }
.turbo-progress-bar { background-color: #FF007A !important; }
/*
 * Application stylesheet manifest — ITCSS layered.
 *
 * Files are required in strict cascade order (low specificity / far-reaching
 * first, high specificity / localized last) instead of require_tree's
 * alphabetical order, so the cascade is explicit and predictable:
 *
 *   settings   → design tokens (CSS custom properties, no output)
 *   generic    → cross-browser reset (preflight + forms base)
 *   elements   → bare element styling (typography, base elements)
 *   objects    → layout primitives (page template)
 *   components → UI components (one file each, kept in their original
 *                relative order so inter-component cascade is unchanged)
 *   utilities  → single-purpose overrides (win last)
 *


























 */