/**
 * Cántico de Fe Music
 * V13.15.2 — Global Surface & Header Theme
 *
 * Sistema visual global:
 * - Design Tokens
 * - Fondo principal
 * - Header
 * - Navegación
 * - Hero
 * - Botones
 * - Tarjetas
 * - Mini Player
 * - Footer
 * - Responsive
 */

@import './design-tokens.css';

@import '../../features/universal-upload-engine/styles/universal-upload.css';

@import '../../features/media-library-engine/styles/r2-media-library.css';
@import '../../features/media-library-engine/styles/r2-media-list.css';
@import '../../features/media-library-engine/styles/r2-media-manager-toolbar.css';
@import '../../features/media-library-engine/styles/r2-media-lightbox.css';
@import '../../features/media-library-engine/styles/r2-media-details.css';

/* ================================================================== */
/* Documento                                                          */
/* ================================================================== */

html {
  color-scheme: dark;
}

body {
  margin: 0;

  min-width: 320px;

  background:
    var(
      --color-background
    );

  color:
    var(
      --color-text
    );

  font-family:
    var(
      --font-family-base
    );

  font-size:
    var(
      --font-size-md
    );

  line-height: 1.5;

  -webkit-font-smoothing:
    antialiased;

  text-rendering:
    optimizeLegibility;
}

*,
*::before,
*::after {
  box-sizing:
    border-box;
}

button,
input,
select,
textarea {
  font:
    inherit;
}

a {
  color:
    var(
      --color-primary
    );

  font-weight:
    var(
      --font-weight-bold
    );

  transition:
    color
    var(
      --transition-fast
    );
}

a:hover {
  color:
    var(
      --color-primary-hover
    );
}

/* ================================================================== */
/* Aplicación                                                         */
/* ================================================================== */

.cantico-app-shell {
  min-height:
    100vh;

  padding-bottom:
  160px;

  background:
    radial-gradient(
      circle
      at
      top
      left,
      rgba(
        244,
        208,
        111,
        0.035
      ),
      transparent
      32%
    ),
    var(
      --color-background
    );
}

/* ================================================================== */
/* Header                                                             */
/* ================================================================== */

/* ================================================================== */
/* V13.15.6 — Navigation & Header Design System                       */
/* ================================================================== */

.cantico-header {
  position:
    sticky;

  top:
    0;

  z-index:
    var(
      --z-header
    );

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    var(
      --space-4
    );

  min-height:
    var(
      --header-height
    );

  padding:
    12px
    min(
      5vw,
      48px
    );

  border-bottom:
    1px
    solid
    var(
      --color-border
    );

  background:
    rgba(
      11,
      15,
      20,
      0.92
    );

  box-shadow:
    0
    8px
    30px
    rgba(
      0,
      0,
      0,
      0.14
    );

  backdrop-filter:
    blur(
      18px
    );

  -webkit-backdrop-filter:
    blur(
      18px
    );
}

/* ------------------------------------------------------------------ */
/* Marca                                                              */
/* ------------------------------------------------------------------ */

.cantico-brand {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    var(
      --space-3
    );

  flex-shrink:
    0;

  color:
    var(
      --color-text
    );

  text-decoration:
    none;

  transition:
    opacity
    var(
      --transition-fast
    );
}

.cantico-brand:hover {
  color:
    var(
      --color-text
    );

  opacity:
    0.94;
}

.cantico-brand:focus-visible {
  outline:
    2px
    solid
    var(
      --color-primary
    );

  outline-offset:
    4px;

  border-radius:
    var(
      --radius-md
    );
}

.cantico-logo {
  display:
    grid;

  place-items:
    center;

  width:
    42px;

  height:
    42px;

  flex-shrink:
    0;

  border:
    1px
    solid
    rgba(
      244,
      208,
      111,
      0.16
    );

  border-radius:
    var(
      --radius-md
    );

  background:
    linear-gradient(
      145deg,
      #18344d,
      #10263a
    );

  color:
    var(
      --color-primary
    );

  box-shadow:
    var(
      --shadow-sm
    );

  font-size:
    1.4rem;

  transition:
    transform
      var(
        --transition-normal
      ),
    border-color
      var(
        --transition-normal
      ),
    box-shadow
      var(
        --transition-normal
      );
}

.cantico-brand:hover
.cantico-logo {
  transform:
    translateY(
      -1px
    );

  border-color:
    var(
      --color-border-primary
    );

  box-shadow:
    var(
      --shadow-md
    );
}

.cantico-brand small {
  display:
    block;

  margin-top:
    2px;

  color:
    var(
      --color-primary
    );

  font-size:
    0.68rem;

  font-weight:
    var(
      --font-weight-bold
    );

  letter-spacing:
    0.22em;
}

/* ------------------------------------------------------------------ */
/* Navegación                                                         */
/* ------------------------------------------------------------------ */

.cantico-nav {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    var(
      --space-2
    );
}

.cantico-nav a {
  position:
    relative;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    40px;

  padding:
    8px
    13px;

  border:
    1px
    solid
    transparent;

  border-radius:
    var(
      --radius-pill
    );

  color:
    var(
      --color-text-secondary
    );

  font-weight:
    var(
      --font-weight-semibold
    );

  text-decoration:
    none;

  transition:
    color
      var(
        --transition-fast
      ),
    background
      var(
        --transition-fast
      ),
    border-color
      var(
        --transition-fast
      ),
    transform
      var(
        --transition-fast
      ),
    box-shadow
      var(
        --transition-fast
      );
}

.cantico-nav a:hover {
  transform:
    translateY(
      -1px
    );

  border-color:
    var(
      --color-border
    );

  background:
    var(
      --color-surface-hover
    );

  color:
    var(
      --color-text
    );
}

.cantico-nav a:focus-visible {
  outline:
    none;

  border-color:
    var(
      --color-border-primary-strong
    );

  box-shadow:
    var(
      --shadow-primary
    );

  color:
    var(
      --color-text
    );
}

.cantico-nav a.is-active {
  border-color:
    var(
      --color-border-primary
    );

  background:
    var(
      --color-primary-soft
    );

  color:
    var(
      --color-primary
    );

  box-shadow:
    inset
    0
    0
    0
    1px
    rgba(
      244,
      208,
      111,
      0.04
    );
}

.cantico-nav a.is-active:hover {
  border-color:
    var(
      --color-border-primary-strong
    );

  background:
    var(
      --color-primary-soft-hover
    );

  color:
    var(
      --color-primary-hover
    );
}

/* ================================================================== */
/* Área principal                                                     */
/* ================================================================== */

.cantico-main {
  width:
    min(
      var(
        --content-max-width
      ),
      calc(
        100% - 32px
      )
    );

  margin:
    0
    auto;
}

/* ================================================================== */
/* Hero                                                               */
/* ================================================================== */

/* ================================================================== */
/* V13.15.7 — Typography & Content Hierarchy                          */
/* ================================================================== */

.cantico-hero {
  display:
    grid;

  gap:
    var(
      --space-6
    );

  padding:
    clamp(
      64px,
      9vw,
      112px
    )
    0
    clamp(
      72px,
      10vw,
      120px
    );
}

/* ------------------------------------------------------------------ */
/* Etiqueta superior                                                  */
/* ------------------------------------------------------------------ */

.cantico-kicker {
  width:
    fit-content;

  margin:
    0;

  color:
    var(
      --color-primary
    );

  font-size:
    var(
      --font-size-xs
    );

  font-weight:
    var(
      --font-weight-bold
    );

  line-height:
    1.2;

  text-transform:
    uppercase;

  letter-spacing:
    0.24em;
}

/* ------------------------------------------------------------------ */
/* Título principal                                                   */
/* ------------------------------------------------------------------ */

.cantico-hero h1 {
  max-width:
    920px;

  margin:
    0;

  color:
    var(
      --color-text
    );

  font-size:
    clamp(
      2.75rem,
      7vw,
      5.4rem
    );

  font-weight:
    var(
      --font-weight-bold
    );

  line-height:
    0.96;

  letter-spacing:
    -0.04em;

  text-wrap:
    balance;
}

/* ------------------------------------------------------------------ */
/* Descripción                                                        */
/* ------------------------------------------------------------------ */

.cantico-hero p {
  max-width:
    720px;

  margin:
    0;

  color:
    var(
      --color-text-secondary
    );

  font-size:
    clamp(
      1.05rem,
      1.6vw,
      1.2rem
    );

  font-weight:
    var(
      --font-weight-regular
    );

  line-height:
    1.75;

  text-wrap:
    pretty;
}

/* ================================================================== */
/* Acciones                                                           */
/* ================================================================== */

/* ================================================================ */
/* V13.15.8 — Hero Actions & CTA System                              */
/* ================================================================ */

.cantico-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

/* ---------------------------------------------------------------- */
/* Base CTA                                                         */
/* ---------------------------------------------------------------- */

.cantico-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);

  min-height: 46px;
  padding: 11px 20px;

  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);

  background: var(--color-surface);
  color: var(--color-text);

  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  line-height: 1;

  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;

  box-shadow: var(--shadow-sm);

  transition:
    transform var(--transition-fast),
    background var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast);
}

/* ---------------------------------------------------------------- */
/* Secondary CTA                                                    */
/* ---------------------------------------------------------------- */

.cantico-button:hover {
  transform: translateY(-2px);

  border-color: var(--color-border-primary);

  background: var(--color-surface-elevated);
  color: var(--color-primary-hover);

  box-shadow: var(--shadow-md);
}

.cantico-button:active {
  transform: translateY(0);
}

/* ---------------------------------------------------------------- */
/* Keyboard focus                                                   */
/* ---------------------------------------------------------------- */

.cantico-button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;

  box-shadow:
    var(--shadow-sm),
    var(--shadow-primary);
}

/* ---------------------------------------------------------------- */
/* Primary CTA                                                      */
/* ---------------------------------------------------------------- */

.cantico-button.primary {
  border-color: var(--color-primary);

  background: var(--color-primary);
  color: var(--color-text-inverse);

  box-shadow:
    0 8px 24px rgba(244, 208, 111, 0.16),
    var(--shadow-sm);
}

.cantico-button.primary:hover {
  border-color: var(--color-primary-hover);

  background: var(--color-primary-hover);
  color: var(--color-text-inverse);

  box-shadow:
    0 12px 30px rgba(244, 208, 111, 0.22),
    var(--shadow-md);
}

.cantico-button.primary:active {
  background: var(--color-primary-strong);
  border-color: var(--color-primary-strong);
}

/* ---------------------------------------------------------------- */
/* Disabled state                                                   */
/* ---------------------------------------------------------------- */

.cantico-button:disabled,
.cantico-button[aria-disabled='true'] {
  opacity: 0.48;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}

/* ---------------------------------------------------------------- */
/* Mobile                                                           */
/* ---------------------------------------------------------------- */

@media (max-width: 560px) {
  .cantico-actions {
    align-items: stretch;
  }

  .cantico-button {
    min-height: 48px;
    padding-inline: 18px;
  }
}

/* ================================================================== */
/* Secciones                                                          */
/* ================================================================== */

/* ================================================================ */
/* V13.15.9 — Sections & Content Hierarchy                           */
/* ================================================================ */

.cantico-section {
  position: relative;

  padding:
    clamp(40px, 6vw, 72px)
    0;
}

/* ---------------------------------------------------------------- */
/* Section headings                                                 */
/* ---------------------------------------------------------------- */

.cantico-section h1,
.cantico-section h2 {
  margin:
    0
    0
    var(--space-6);

  max-width: 900px;

  color:
    var(--color-text);

  font-size:
    clamp(
      1.9rem,
      5vw,
      3rem
    );

  font-weight:
    var(--font-weight-bold);

  line-height: 1.08;

  letter-spacing:
    -0.025em;
}

/* ---------------------------------------------------------------- */
/* Secondary section headings                                       */
/* ---------------------------------------------------------------- */

.cantico-section h3 {
  margin:
    0
    0
    var(--space-3);

  color:
    var(--color-text);

  font-size:
    var(--font-size-lg);

  font-weight:
    var(--font-weight-bold);

  line-height: 1.25;
}

/* ---------------------------------------------------------------- */
/* Section text                                                     */
/* ---------------------------------------------------------------- */

.cantico-section > p {
  max-width: 760px;

  margin:
    0
    0
    var(--space-6);

  color:
    var(--color-text-secondary);

  font-size:
    var(--font-size-md);

  line-height: 1.7;
}

/* ---------------------------------------------------------------- */
/* Section spacing                                                  */
/* ---------------------------------------------------------------- */

.cantico-section + .cantico-section {
  border-top:
    1px
    solid
    var(--color-border);
}

/* ================================================================ */
/* V13.15.10 — Cards & Content Surfaces                              */
/* ================================================================ */

.cantico-card-grid {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(
        240px,
        1fr
      )
    );

  gap:
    var(--space-5);
}

/* ---------------------------------------------------------------- */
/* Card / Detail base                                               */
/* ---------------------------------------------------------------- */

.cantico-card,
.cantico-detail {
  position: relative;

  overflow: hidden;

  padding:
    var(--space-6);

  border:
    1px
    solid
    var(--card-border);

  border-radius:
    var(--radius-lg);

  background:
    linear-gradient(
      145deg,
      var(--card-background),
      var(--color-background-secondary)
    );

  color:
    var(--color-text);

  box-shadow:
    var(--shadow-md);

  transition:
    transform
      var(--transition-normal),
    border-color
      var(--transition-normal),
    background
      var(--transition-normal),
    box-shadow
      var(--transition-normal);
}

/* ---------------------------------------------------------------- */
/* Decorative top accent                                            */
/* ---------------------------------------------------------------- */

.cantico-card::before,
.cantico-detail::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;
  right: 0;

  height: 2px;

  opacity: 0;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--color-primary),
      transparent
    );

  transition:
    opacity
    var(--transition-normal);
}

/* ---------------------------------------------------------------- */
/* Card hover                                                        */
/* ---------------------------------------------------------------- */

.cantico-card:hover {
  transform:
    translateY(-3px);

  border-color:
    var(--card-border-hover);

  background:
    linear-gradient(
      145deg,
      var(--card-background-elevated),
      var(--color-background-secondary)
    );

  box-shadow:
    var(--shadow-lg);
}

.cantico-card:hover::before {
  opacity: 0.8;
}

/* ---------------------------------------------------------------- */
/* Selected / highlighted card                                      */
/* ---------------------------------------------------------------- */

.cantico-card.is-selected,
.cantico-card[aria-selected="true"],
.cantico-card[data-selected="true"] {
  border-color:
    var(--card-selected-border);

  background:
    linear-gradient(
      145deg,
      var(--card-background-elevated),
      var(--color-background-secondary)
    );

  box-shadow:
    var(--shadow-primary),
    var(--shadow-md);
}

.cantico-card.is-selected::before,
.cantico-card[aria-selected="true"]::before,
.cantico-card[data-selected="true"]::before {
  opacity: 1;
}

/* ---------------------------------------------------------------- */
/* Card titles                                                       */
/* ---------------------------------------------------------------- */

.cantico-card h2,
.cantico-card h3,
.cantico-detail h1,
.cantico-detail h2,
.cantico-detail h3 {
  margin-top: 0;

  color:
    var(--color-text);

  font-weight:
    var(--font-weight-bold);

  line-height: 1.2;
}

/* ---------------------------------------------------------------- */
/* Card text                                                         */
/* ---------------------------------------------------------------- */

.cantico-card p,
.cantico-detail p {
  color:
    var(--color-text-secondary);

  line-height: 1.65;
}

/* ---------------------------------------------------------------- */
/* Metadata / muted text                                             */
/* ---------------------------------------------------------------- */

.cantico-card small,
.cantico-card .muted,
.cantico-detail small,
.cantico-detail .muted {
  color:
    var(--color-text-muted);
}

/* ---------------------------------------------------------------- */
/* Links inside cards                                                */
/* ---------------------------------------------------------------- */

.cantico-card a,
.cantico-detail a {
  color:
    var(--color-primary);

  transition:
    color
    var(--transition-fast);
}

.cantico-card a:hover,
.cantico-detail a:hover {
  color:
    var(--color-primary-hover);
}

/* ---------------------------------------------------------------- */
/* Mobile                                                            */
/* ---------------------------------------------------------------- */

@media (max-width: 560px) {
  .cantico-card-grid {
    grid-template-columns: 1fr;

    gap:
      var(--space-4);
  }

  .cantico-card,
  .cantico-detail {
    padding:
      var(--space-5);
  }
}

/* ================================================================== */
/* Estado vacío                                                       */
/* ================================================================== */

.cantico-empty {
  padding:
    18px;

  border:
    1px
    dashed
    var(
      --color-border-primary
    );

  border-radius:
    var(
      --radius-md
    );

  background:
    var(
      --color-surface
    );

  color:
    var(
      --color-text-secondary
    );
}

/* ================================================================== */
/* Mini Player                                                        */
/* ================================================================== */

.cantico-mini-player {
  position:
    fixed;

  z-index:
    30;

  left:
    16px;

  right:
    16px;

  bottom:
    16px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    var(
      --space-4
    );

  padding:
    14px
    18px;

  border:
    1px
    solid
    rgba(
      244,
      208,
      111,
      0.18
    );

  border-radius:
    22px;

  background:
    rgba(
      17,
      24,
      33,
      0.94
    );

  color:
    var(
      --color-text
    );

  box-shadow:
    var(
      --shadow-lg
    );

  backdrop-filter:
    blur(
      18px
    );

  -webkit-backdrop-filter:
    blur(
      18px
    );
}

.cantico-mini-player span {
  display:
    block;

  color:
    var(
      --color-text-secondary
    );
}

.cantico-mini-player button {
  min-height:
    40px;

  padding:
    9px
    16px;

  border:
    1px
    solid
    var(
      --color-primary
    );

  border-radius:
    var(
      --radius-pill
    );

  background:
    var(
      --color-primary
    );

  color:
    var(
      --color-text-inverse
    );

  font-weight:
    800;

  cursor:
    pointer;

  transition:
    background
      var(
        --transition-fast
      ),
    border-color
      var(
        --transition-fast
      ),
    transform
      var(
        --transition-fast
      );
}

.cantico-mini-player button:hover {
  transform:
    translateY(
      -1px
    );

  border-color:
    var(
      --color-primary-hover
    );

  background:
    var(
      --color-primary-hover
    );
}

.cantico-mini-player button:focus-visible {
  outline:
    2px
    solid
    var(
      --color-primary
    );

  outline-offset:
    3px;
}

/* ================================================================== */
/* Footer                                                             */
/* ================================================================== */

.cantico-footer {
  padding:
    40px
    20px
    120px;

  border-top:
    1px
    solid
    var(
      --color-border
    );

  color:
    var(
      --color-text-muted
    );

  text-align:
    center;
}

/* ================================================================== */
/* Selection                                                          */
/* ================================================================== */

::selection {
  background:
    rgba(
      244,
      208,
      111,
      0.28
    );

  color:
    var(
      --color-text
    );
}

/* ================================================================== */
/* Responsive                                                         */
/* ================================================================== */

@media (
  max-width: 800px
) {

  .cantico-header {
    align-items:
      center;

    flex-direction:
      row;

    flex-wrap:
      nowrap;
  }

  .cantico-nav--desktop {
    display:
      none;
  }

  .cantico-header__actions {
    width:
      auto;

    flex:
      0 0 auto;

    align-items:
      center;

    justify-content:
      flex-end;
  }

  .cantico-mini-player {
    flex-direction:
      column;

    align-items:
      flex-start;
  }
}

@media (
  max-width: 560px
) {

  .cantico-main {
    width:
      min(
        100% - 24px,
        var(
          --content-max-width
        )
      );
  }

  .cantico-header {
    padding:
      12px
      16px;
  }

  .cantico-nav {
    gap:
      4px;
  }

  .cantico-nav a {
    padding:
      8px
      10px;
  }

  .cantico-hero {
    padding:
      44px
      0
      56px;
  }

  .cantico-card,
  .cantico-detail {
    padding:
      18px;
  }
}

@media (
  prefers-reduced-motion:
    reduce
) {

  *,
  *::before,
  *::after {
    scroll-behavior:
      auto !important;

    transition-duration:
      0.01ms !important;

    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;
  }
}

/* ================================================================== */
/* V13.15.4 — Shared Buttons & Forms Theme                            */
/* ================================================================== */

button,
input,
select,
textarea {
  font:
    inherit;
}

/* ------------------------------------------------------------------ */
/* Inputs / Selects / Textareas                                       */
/* ------------------------------------------------------------------ */

input,
select,
textarea {
  border:
    1px
    solid
    var(
      --input-border
    );

  border-radius:
    var(
      --radius-md
    );

  background:
    var(
      --input-background
    );

  color:
    var(
      --input-text
    );

  transition:
    background
      var(
        --transition-fast
      ),
    border-color
      var(
        --transition-fast
      ),
    box-shadow
      var(
        --transition-fast
      );
}

input:hover,
select:hover,
textarea:hover {
  background:
    var(
      --input-background-hover
    );
}

input:focus,
select:focus,
textarea:focus {
  outline:
    none;

  border-color:
    var(
      --input-border-focus
    );

  box-shadow:
    var(
      --input-focus-ring
    );
}

input::placeholder,
textarea::placeholder {
  color:
    var(
      --input-placeholder
    );
}

select option {
  background:
    var(
      --color-background-secondary
    );

  color:
    var(
      --color-text
    );
}

/* ------------------------------------------------------------------ */
/* Disabled                                                           */
/* ------------------------------------------------------------------ */

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  opacity:
    0.55;

  cursor:
    not-allowed;
}

/* ------------------------------------------------------------------ */
/* Primary Buttons                                                    */
/* ------------------------------------------------------------------ */

[data-button-primary],
.button-primary,
.btn-primary {
  border:
    1px
    solid
    var(
      --button-primary-background
    );

  background:
    var(
      --button-primary-background
    );

  color:
    var(
      --button-primary-text
    );

  border-radius:
    var(
      --radius-md
    );

  font-weight:
    var(
      --font-weight-bold
    );

  cursor:
    pointer;

  transition:
    transform
      var(
        --transition-fast
      ),
    background
      var(
        --transition-fast
      ),
    border-color
      var(
        --transition-fast
      );
}

[data-button-primary]:hover:not(:disabled),
.button-primary:hover:not(:disabled),
.btn-primary:hover:not(:disabled) {
  transform:
    translateY(
      -1px
    );

  border-color:
    var(
      --button-primary-background-hover
    );

  background:
    var(
      --button-primary-background-hover
    );
}

/* ------------------------------------------------------------------ */
/* Secondary Buttons                                                  */
/* ------------------------------------------------------------------ */

[data-button-secondary],
.button-secondary,
.btn-secondary {
  border:
    1px
    solid
    var(
      --button-secondary-border
    );

  background:
    var(
      --button-secondary-background
    );

  color:
    var(
      --button-secondary-text
    );

  border-radius:
    var(
      --radius-md
    );

  font-weight:
    var(
      --font-weight-semibold
    );

  cursor:
    pointer;

  transition:
    transform
      var(
        --transition-fast
      ),
    background
      var(
        --transition-fast
      ),
    border-color
      var(
        --transition-fast
      );
}

[data-button-secondary]:hover:not(:disabled),
.button-secondary:hover:not(:disabled),
.btn-secondary:hover:not(:disabled) {
  transform:
    translateY(
      -1px
    );

  border-color:
    var(
      --color-border-hover
    );

  background:
    var(
      --button-secondary-background-hover
    );
}

/* ------------------------------------------------------------------ */
/* Danger Buttons                                                     */
/* ------------------------------------------------------------------ */

[data-button-danger],
.button-danger,
.btn-danger {
  border:
    1px
    solid
    rgba(
      255,
      92,
      92,
      0.28
    );

  background:
    var(
      --button-danger-background
    );

  color:
    var(
      --button-danger-text
    );

  border-radius:
    var(
      --radius-md
    );

  font-weight:
    var(
      --font-weight-bold
    );

  cursor:
    pointer;

  transition:
    transform
      var(
        --transition-fast
      ),
    background
      var(
        --transition-fast
      ),
    border-color
      var(
        --transition-fast
      );
}

[data-button-danger]:hover:not(:disabled),
.button-danger:hover:not(:disabled),
.btn-danger:hover:not(:disabled) {
  transform:
    translateY(
      -1px
    );

  border-color:
    rgba(
      255,
      92,
      92,
      0.55
    );

  background:
    var(
      --button-danger-background-hover
    );
}

/* ------------------------------------------------------------------ */
/* Focus                                                              */
/* ------------------------------------------------------------------ */

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline:
    2px
    solid
    var(
      --color-primary
    );

  outline-offset:
    3px;
}

/* ================================================================== */
/* V13.15.5 — Shared Cards & Surfaces Theme                           */
/* ================================================================== */

/* ------------------------------------------------------------------ */
/* Generic Surfaces                                                   */
/* ------------------------------------------------------------------ */

.cantico-surface,
[data-surface] {
  background:
    var(--color-surface);

  color:
    var(--color-text);

  border:
    1px solid
    var(--color-border);

  border-radius:
    var(--radius-lg);

  box-shadow:
    var(--shadow-sm);
}

/* ------------------------------------------------------------------ */
/* Elevated Surfaces                                                  */
/* ------------------------------------------------------------------ */

.cantico-surface-elevated,
[data-surface-elevated] {
  background:
    var(--color-surface-elevated);

  color:
    var(--color-text);

  border:
    1px solid
    var(--color-border-strong);

  border-radius:
    var(--radius-lg);

  box-shadow:
    var(--shadow-md);
}

/* ------------------------------------------------------------------ */
/* Shared Cards                                                       */
/* ------------------------------------------------------------------ */

.cantico-card,
[data-card] {
  background:
    var(--color-surface);

  color:
    var(--color-text);

  border:
    1px solid
    var(--color-border);

  border-radius:
    var(--radius-lg);

  box-shadow:
    var(--shadow-sm);

  transition:
    transform
      var(--transition-normal),
    border-color
      var(--transition-normal),
    box-shadow
      var(--transition-normal),
    background
      var(--transition-normal);
}

/* ------------------------------------------------------------------ */
/* Interactive Cards                                                  */
/* ------------------------------------------------------------------ */

.cantico-card.is-interactive,
[data-card-interactive] {
  cursor:
    pointer;
}

.cantico-card.is-interactive:hover,
[data-card-interactive]:hover {
  transform:
    translateY(-2px);

  background:
    var(--color-surface-elevated);

  border-color:
    var(--color-border-primary);

  box-shadow:
    var(--shadow-md);
}

/* ------------------------------------------------------------------ */
/* Selected Cards                                                     */
/* ------------------------------------------------------------------ */

.cantico-card.is-selected,
[data-card-selected="true"] {
  border-color:
    var(--color-primary);

  box-shadow:
    var(--shadow-primary);

  background:
    var(--color-surface-elevated);
}

/* ------------------------------------------------------------------ */
/* Card Header                                                        */
/* ------------------------------------------------------------------ */

.cantico-card-header,
[data-card-header] {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    var(--space-3);

  margin-bottom:
    var(--space-4);
}

/* ------------------------------------------------------------------ */
/* Card Content                                                       */
/* ------------------------------------------------------------------ */

.cantico-card-content,
[data-card-content] {
  color:
    var(--color-text-secondary);

  line-height:
    1.6;
}

/* ------------------------------------------------------------------ */
/* Card Footer                                                        */
/* ------------------------------------------------------------------ */

.cantico-card-footer,
[data-card-footer] {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    var(--space-3);

  margin-top:
    var(--space-4);

  padding-top:
    var(--space-4);

  border-top:
    1px solid
    var(--color-border);
}

/* ------------------------------------------------------------------ */
/* Soft Panels                                                        */
/* ------------------------------------------------------------------ */

.cantico-panel,
[data-panel] {
  background:
    var(--color-surface-soft);

  border:
    1px solid
    var(--color-border);

  border-radius:
    var(--radius-lg);

  padding:
    var(--space-5);
}

/* ------------------------------------------------------------------ */
/* Dividers                                                           */
/* ------------------------------------------------------------------ */

.cantico-divider,
[data-divider] {
  width:
    100%;

  height:
    1px;

  border:
    0;

  background:
    var(--color-border);

  margin:
    var(--space-5) 0;
}

/* ------------------------------------------------------------------ */
/* Card Titles                                                        */
/* ------------------------------------------------------------------ */

.cantico-card h2,
.cantico-card h3,
[data-card] h2,
[data-card] h3 {
  color:
    var(--color-text);
}

/* ------------------------------------------------------------------ */
/* Muted Card Text                                                    */
/* ------------------------------------------------------------------ */

.cantico-card small,
.cantico-card .muted,
[data-card] small,
[data-card] .muted {
  color:
    var(--color-text-muted);
}

/* ============================================================ */
/* V13.15.6 — Shared Status & Feedback Theme                     */
/* ============================================================ */

/* ------------------------------------------------------------ */
/* Base Status / Feedback                                       */
/* ------------------------------------------------------------ */

.cantico-status,
.cantico-feedback,
[data-status],
[data-feedback] {
  display:
    flex;

  align-items:
    flex-start;

  gap:
    var(--space-3);

  padding:
    var(--space-4);

  border:
    1px solid
    var(--color-border);

  border-radius:
    var(--radius-md);

  background:
    var(--color-surface-soft);

  color:
    var(--color-text);

  line-height:
    1.5;
}

/* ------------------------------------------------------------ */
/* Status Content                                               */
/* ------------------------------------------------------------ */

.cantico-status-content,
.cantico-feedback-content,
[data-status-content],
[data-feedback-content] {
  flex:
    1;

  min-width:
    0;
}

.cantico-status-title,
.cantico-feedback-title,
[data-status-title],
[data-feedback-title] {
  margin:
    0 0
    var(--space-1);

  color:
    var(--color-text);

  font-weight:
    var(--font-weight-bold);
}

.cantico-status-message,
.cantico-feedback-message,
[data-status-message],
[data-feedback-message] {
  margin:
    0;

  color:
    var(--color-text-secondary);
}

/* ------------------------------------------------------------ */
/* Success                                                      */
/* ------------------------------------------------------------ */

.cantico-status.is-success,
.cantico-feedback.is-success,
[data-status="success"],
[data-feedback="success"] {
  border-color:
    rgba(
      34,
      197,
      94,
      0.35
    );

  background:
    rgba(
      34,
      197,
      94,
      0.08
    );
}

/* ------------------------------------------------------------ */
/* Warning                                                      */
/* ------------------------------------------------------------ */

.cantico-status.is-warning,
.cantico-feedback.is-warning,
[data-status="warning"],
[data-feedback="warning"] {
  border-color:
    rgba(
      245,
      158,
      11,
      0.35
    );

  background:
    rgba(
      245,
      158,
      11,
      0.08
    );
}

/* ------------------------------------------------------------ */
/* Error                                                        */
/* ------------------------------------------------------------ */

.cantico-status.is-error,
.cantico-feedback.is-error,
[data-status="error"],
[data-feedback="error"] {
  border-color:
    rgba(
      239,
      68,
      68,
      0.35
    );

  background:
    rgba(
      239,
      68,
      68,
      0.08
    );
}

/* ------------------------------------------------------------ */
/* Info                                                         */
/* ------------------------------------------------------------ */

.cantico-status.is-info,
.cantico-feedback.is-info,
[data-status="info"],
[data-feedback="info"] {
  border-color:
    rgba(
      59,
      130,
      246,
      0.35
    );

  background:
    rgba(
      59,
      130,
      246,
      0.08
    );
}

/* ------------------------------------------------------------ */
/* Loading                                                      */
/* ------------------------------------------------------------ */

.cantico-status.is-loading,
.cantico-feedback.is-loading,
[data-status="loading"],
[data-feedback="loading"] {
  cursor:
    progress;
}

/* ------------------------------------------------------------ */
/* Empty State                                                  */
/* ------------------------------------------------------------ */

.cantico-empty-state,
[data-empty-state] {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    var(--space-3);

  width:
    100%;

  padding:
    var(--space-6);

  text-align:
    center;

  color:
    var(--color-text-secondary);

  background:
    var(--color-surface-soft);

  border:
    1px dashed
    var(--color-border);

  border-radius:
    var(--radius-lg);
}

.cantico-empty-state h2,
.cantico-empty-state h3,
[data-empty-state] h2,
[data-empty-state] h3 {
  margin:
    0;

  color:
    var(--color-text);
}

.cantico-empty-state p,
[data-empty-state] p {
  margin:
    0;

  max-width:
    42rem;

  color:
    var(--color-text-secondary);
}

/* ------------------------------------------------------------ */
/* Status Actions                                               */
/* ------------------------------------------------------------ */

.cantico-status-actions,
.cantico-feedback-actions,
.cantico-empty-state-actions,
[data-status-actions],
[data-feedback-actions],
[data-empty-state-actions] {
  display:
    flex;

  flex-wrap:
    wrap;

  align-items:
    center;

  gap:
    var(--space-2);

  margin-top:
    var(--space-2);
}

/* ------------------------------------------------------------ */
/* Responsive                                                   */
/* ------------------------------------------------------------ */

@media (max-width: 640px) {
  .cantico-status,
  .cantico-feedback,
  [data-status],
  [data-feedback] {
    padding:
      var(--space-3);
  }

  .cantico-empty-state,
  [data-empty-state] {
    padding:
      var(--space-5)
      var(--space-3);
  }

  .cantico-status-actions,
  .cantico-feedback-actions,
  .cantico-empty-state-actions,
  [data-status-actions],
  [data-feedback-actions],
  [data-empty-state-actions] {
    width:
      100%;
  }
}

/* ========================================================== */
/* V13.15.7 — Shared Loading & Progress Theme                  */
/* ========================================================== */

/* ---------------------------------------------------------- */
/* Base Loading                                               */
/* ---------------------------------------------------------- */

.cantico-loading,
[data-loading] {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: var(--space-3);

  color: var(--color-text-secondary);
}

/* ---------------------------------------------------------- */
/* Loading Spinner                                            */
/* ---------------------------------------------------------- */

.cantico-spinner,
[data-spinner] {
  width: 24px;
  height: 24px;

  flex: 0 0 auto;

  border:
    3px
    solid
    var(--color-border);

  border-top-color:
    var(--color-primary);

  border-radius: 50%;

  animation:
    cantico-spinner-rotate
    0.8s
    linear
    infinite;
}

@keyframes cantico-spinner-rotate {
  to {
    transform: rotate(360deg);
  }
}

/* ---------------------------------------------------------- */
/* Loading Text                                               */
/* ---------------------------------------------------------- */

.cantico-loading-text,
[data-loading-text] {
  color:
    var(--color-text-secondary);

  font-size:
    0.95rem;

  line-height:
    1.5;
}

/* ---------------------------------------------------------- */
/* Progress                                                   */
/* ---------------------------------------------------------- */

.cantico-progress,
[data-progress] {
  width: 100%;

  height: 8px;

  overflow: hidden;

  background:
    var(--color-surface-soft);

  border:
    1px
    solid
    var(--color-border);

  border-radius:
    var(--radius-pill);
}

/* ---------------------------------------------------------- */
/* Progress Bar                                               */
/* ---------------------------------------------------------- */

.cantico-progress-bar,
[data-progress-bar] {
  width: 0;
  height: 100%;

  background:
    var(--color-primary);

  border-radius:
    inherit;

  transition:
    width
    var(--transition-normal);
}

/* ---------------------------------------------------------- */
/* Progress Information                                       */
/* ---------------------------------------------------------- */

.cantico-progress-info,
[data-progress-info] {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: var(--space-3);

  margin-top:
    var(--space-2);

  color:
    var(--color-text-muted);

  font-size:
    0.875rem;
}

/* ---------------------------------------------------------- */
/* Indeterminate Progress                                     */
/* ---------------------------------------------------------- */

.cantico-progress.is-indeterminate
.cantico-progress-bar,
[data-progress="indeterminate"]
[data-progress-bar] {
  width: 40%;

  animation:
    cantico-progress-indeterminate
    1.2s
    ease-in-out
    infinite;
}

@keyframes cantico-progress-indeterminate {
  0% {
    transform: translateX(-110%);
  }

  100% {
    transform: translateX(260%);
  }
}

/* ---------------------------------------------------------- */
/* Reduced Motion                                             */
/* ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .cantico-spinner,
  [data-spinner],
  .cantico-progress.is-indeterminate
  .cantico-progress-bar,
  [data-progress="indeterminate"]
  [data-progress-bar] {
    animation: none;
  }

  .cantico-progress-bar,
  [data-progress-bar] {
    transition: none;
  }
}

/* ---------------------------------------------------------- */
/* Responsive                                                 */
/* ---------------------------------------------------------- */

@media (max-width: 640px) {
  .cantico-loading,
  [data-loading] {
    gap:
      var(--space-2);
  }

  .cantico-progress-info,
  [data-progress-info] {
    gap:
      var(--space-2);

    font-size:
      0.8125rem;
  }
}

/* ========================================================== */
/* V13.15.8 — Shared Modal & Overlay Theme                     */
/* ========================================================== */

/* ---------------------------------------------------------- */
/* Overlay                                                    */
/* ---------------------------------------------------------- */

.cantico-overlay,
[data-overlay] {
  position: fixed;
  inset: 0;

  z-index: 1000;

  display: flex;
  align-items: center;
  justify-content: center;

  padding:
    var(--space-5);

  background:
    rgba(0, 0, 0, 0.58);

  backdrop-filter:
    blur(6px);

  -webkit-backdrop-filter:
    blur(6px);
}

/* ---------------------------------------------------------- */
/* Modal                                                      */
/* ---------------------------------------------------------- */

.cantico-modal,
[data-modal] {
  width:
    min(100%, 560px);

  max-height:
    min(85vh, 760px);

  overflow:
    auto;

  background:
    var(--color-surface-elevated);

  color:
    var(--color-text);

  border:
    1px
    solid
    var(--color-border);

  border-radius:
    var(--radius-lg);

  box-shadow:
    var(--shadow-lg);
}

/* ---------------------------------------------------------- */
/* Modal Header                                               */
/* ---------------------------------------------------------- */

.cantico-modal-header,
[data-modal-header] {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap:
    var(--space-4);

  padding:
    var(--space-5);

  border-bottom:
    1px
    solid
    var(--color-border);
}

.cantico-modal-header h2,
.cantico-modal-header h3,
[data-modal-header] h2,
[data-modal-header] h3 {
  margin: 0;

  color:
    var(--color-text);
}

/* ---------------------------------------------------------- */
/* Modal Body                                                 */
/* ---------------------------------------------------------- */

.cantico-modal-body,
[data-modal-body] {
  padding:
    var(--space-5);

  color:
    var(--color-text-secondary);

  line-height:
    1.6;
}

/* ---------------------------------------------------------- */
/* Modal Footer                                               */
/* ---------------------------------------------------------- */

.cantico-modal-footer,
[data-modal-footer] {
  display: flex;

  align-items: center;
  justify-content: flex-end;

  flex-wrap: wrap;

  gap:
    var(--space-3);

  padding:
    var(--space-4)
    var(--space-5);

  border-top:
    1px
    solid
    var(--color-border);
}

/* ---------------------------------------------------------- */
/* Close Button                                               */
/* ---------------------------------------------------------- */

.cantico-modal-close,
[data-modal-close] {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-width: 40px;
  min-height: 40px;

  padding:
    var(--space-2);

  border:
    1px
    solid
    transparent;

  border-radius:
    var(--radius-md);

  background:
    transparent;

  color:
    var(--color-text-secondary);

  cursor:
    pointer;

  transition:
    background
    var(--transition-fast),
    color
    var(--transition-fast),
    border-color
    var(--transition-fast);
}

.cantico-modal-close:hover:not(:disabled),
[data-modal-close]:hover:not(:disabled) {
  background:
    var(--color-surface-soft);

  color:
    var(--color-text);

  border-color:
    var(--color-border);
}

.cantico-modal-close:focus-visible,
[data-modal-close]:focus-visible {
  outline:
    2px
    solid
    var(--color-primary);

  outline-offset:
    3px;
}

/* ---------------------------------------------------------- */
/* Open State                                                 */
/* ---------------------------------------------------------- */

.cantico-overlay[hidden],
[data-overlay][hidden],
.cantico-modal[hidden],
[data-modal][hidden] {
  display: none;
}

/* ---------------------------------------------------------- */
/* Reduced Motion                                             */
/* ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .cantico-modal-close,
  [data-modal-close] {
    transition: none;
  }
}

/* ---------------------------------------------------------- */
/* Responsive                                                 */
/* ---------------------------------------------------------- */

@media (max-width: 640px) {
  .cantico-overlay,
  [data-overlay] {
    align-items:
      flex-end;

    padding:
      var(--space-3);
  }

  .cantico-modal,
  [data-modal] {
    width:
      100%;

    max-height:
      90vh;

    border-radius:
      var(--radius-lg);
  }

  .cantico-modal-header,
  [data-modal-header],
  .cantico-modal-body,
  [data-modal-body] {
    padding:
      var(--space-4);
  }

  .cantico-modal-footer,
  [data-modal-footer] {
    padding:
      var(--space-4);
  }
}

/* ========================================================== */
/* V13.15.9 — Shared Dropdown & Menu Theme                     */
/* ========================================================== */

/* ---------------------------------------------------------- */
/* Menu Container                                             */
/* ---------------------------------------------------------- */

.cantico-menu,
.cantico-dropdown,
[data-menu],
[data-dropdown] {
  position: relative;
}

/* ---------------------------------------------------------- */
/* Menu Panel                                                 */
/* ---------------------------------------------------------- */

.cantico-menu-panel,
.cantico-dropdown-menu,
[data-menu-panel],
[data-dropdown-menu] {
  position: absolute;

  z-index: 1100;

  min-width: 220px;
  max-width: min(320px, calc(100vw - 32px));

  padding:
    var(--space-2);

  background:
    var(--color-surface-elevated);

  color:
    var(--color-text);

  border:
    1px
    solid
    var(--color-border);

  border-radius:
    var(--radius-lg);

  box-shadow:
    var(--shadow-lg);
}

/* ---------------------------------------------------------- */
/* Alignment                                                  */
/* ---------------------------------------------------------- */

.cantico-menu-panel,
.cantico-dropdown-menu,
[data-menu-panel],
[data-dropdown-menu] {
  top:
    calc(100% + var(--space-2));

  right: 0;
}

.cantico-menu-panel.is-left,
.cantico-dropdown-menu.is-left,
[data-menu-panel][data-align="left"],
[data-dropdown-menu][data-align="left"] {
  right: auto;
  left: 0;
}

/* ---------------------------------------------------------- */
/* Menu Items                                                 */
/* ---------------------------------------------------------- */

.cantico-menu-item,
.cantico-dropdown-item,
[data-menu-item],
[data-dropdown-item] {
  width: 100%;

  display: flex;

  align-items: center;

  gap:
    var(--space-3);

  padding:
    var(--space-3);

  border:
    0;

  border-radius:
    var(--radius-md);

  background:
    transparent;

  color:
    var(--color-text);

  text-align:
    left;

  font:
    inherit;

  cursor:
    pointer;

  transition:
    background
    var(--transition-fast),
    color
    var(--transition-fast);
}

/* ---------------------------------------------------------- */
/* Hover / Active                                             */
/* ---------------------------------------------------------- */

.cantico-menu-item:hover:not(:disabled),
.cantico-dropdown-item:hover:not(:disabled),
[data-menu-item]:hover:not(:disabled),
[data-dropdown-item]:hover:not(:disabled),
.cantico-menu-item.is-active,
.cantico-dropdown-item.is-active,
[data-menu-item][aria-current="true"],
[data-dropdown-item][aria-current="true"] {
  background:
    var(--color-surface-soft);

  color:
    var(--color-text);
}

/* ---------------------------------------------------------- */
/* Focus                                                      */
/* ---------------------------------------------------------- */

.cantico-menu-item:focus-visible,
.cantico-dropdown-item:focus-visible,
[data-menu-item]:focus-visible,
[data-dropdown-item]:focus-visible {
  outline:
    2px
    solid
    var(--color-primary);

  outline-offset:
    2px;
}

/* ---------------------------------------------------------- */
/* Disabled                                                   */
/* ---------------------------------------------------------- */

.cantico-menu-item:disabled,
.cantico-dropdown-item:disabled,
[data-menu-item][aria-disabled="true"],
[data-dropdown-item][aria-disabled="true"] {
  opacity:
    0.55;

  cursor:
    not-allowed;
}

/* ---------------------------------------------------------- */
/* Divider                                                    */
/* ---------------------------------------------------------- */

.cantico-menu-divider,
.cantico-dropdown-divider,
[data-menu-divider],
[data-dropdown-divider] {
  width: 100%;

  height: 1px;

  margin:
    var(--space-2)
    0;

  border: 0;

  background:
    var(--color-border);
}

/* ---------------------------------------------------------- */
/* Menu Labels                                                */
/* ---------------------------------------------------------- */

.cantico-menu-label,
.cantico-dropdown-label,
[data-menu-label],
[data-dropdown-label] {
  display: block;

  padding:
    var(--space-2)
    var(--space-3);

  color:
    var(--color-text-muted);

  font-size:
    0.8125rem;

  font-weight:
    var(--font-weight-semibold);
}

/* ---------------------------------------------------------- */
/* Hidden State                                               */
/* ---------------------------------------------------------- */

.cantico-menu-panel[hidden],
.cantico-dropdown-menu[hidden],
[data-menu-panel][hidden],
[data-dropdown-menu][hidden] {
  display: none;
}

/* ---------------------------------------------------------- */
/* Reduced Motion                                             */
/* ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .cantico-menu-item,
  .cantico-dropdown-item,
  [data-menu-item],
  [data-dropdown-item] {
    transition: none;
  }
}

/* ---------------------------------------------------------- */
/* Responsive                                                 */
/* ---------------------------------------------------------- */

@media (max-width: 640px) {
  .cantico-menu-panel,
  .cantico-dropdown-menu,
  [data-menu-panel],
  [data-dropdown-menu] {
    min-width:
      200px;

    max-width:
      calc(100vw - 24px);
  }

  .cantico-menu-item,
  .cantico-dropdown-item,
  [data-menu-item],
  [data-dropdown-item] {
    min-height:
      44px;
  }
}

/* ========================================================== */
/* V13.15.11 — Shared Tables & Data Lists Theme                */
/* ========================================================== */

/* ---------------------------------------------------------- */
/* Table Container                                            */
/* ---------------------------------------------------------- */

.cantico-table-container,
[data-table-container] {
  width: 100%;

  overflow-x: auto;

  border:
    1px
    solid
    var(--color-border);

  border-radius:
    var(--radius-lg);

  background:
    var(--color-surface);

  box-shadow:
    var(--shadow-sm);
}

/* ---------------------------------------------------------- */
/* Table                                                      */
/* ---------------------------------------------------------- */

.cantico-table,
[data-table] {
  width: 100%;

  border-collapse:
    collapse;

  color:
    var(--color-text);

  font-size:
    var(--font-size-sm);
}

/* ---------------------------------------------------------- */
/* Header                                                     */
/* ---------------------------------------------------------- */

.cantico-table th,
[data-table] th {
  padding:
    var(--space-3)
    var(--space-4);

  background:
    var(--color-background-secondary);

  color:
    var(--color-text-secondary);

  text-align:
    left;

  font-weight:
    var(--font-weight-semibold);

  white-space:
    nowrap;

  border-bottom:
    1px
    solid
    var(--color-border-strong);
}

/* ---------------------------------------------------------- */
/* Cells                                                      */
/* ---------------------------------------------------------- */

.cantico-table td,
[data-table] td {
  padding:
    var(--space-3)
    var(--space-4);

  color:
    var(--color-text);

  border-bottom:
    1px
    solid
    var(--color-border);

  vertical-align:
    middle;
}

/* ---------------------------------------------------------- */
/* Rows                                                       */
/* ---------------------------------------------------------- */

.cantico-table tbody tr,
[data-table] tbody tr {
  transition:
    background
    var(--transition-fast);
}

.cantico-table tbody tr:hover,
[data-table] tbody tr:hover {
  background:
    var(--color-surface-soft);
}

.cantico-table tbody tr:last-child td,
[data-table] tbody tr:last-child td {
  border-bottom:
    0;
}

/* ---------------------------------------------------------- */
/* Selected Row                                               */
/* ---------------------------------------------------------- */

.cantico-table tr.is-selected,
[data-table] tr[aria-selected="true"],
[data-table] tr[data-selected="true"] {
  background:
    var(--color-primary-soft);
}

.cantico-table tr.is-selected td,
[data-table] tr[aria-selected="true"] td,
[data-table] tr[data-selected="true"] td {
  border-color:
    var(--color-border-primary);
}

/* ---------------------------------------------------------- */
/* Sortable Header                                            */
/* ---------------------------------------------------------- */

.cantico-table th.is-sortable,
[data-table] th[data-sortable] {
  cursor:
    pointer;

  user-select:
    none;
}

.cantico-table th.is-sortable:hover,
[data-table] th[data-sortable]:hover {
  color:
    var(--color-text);
}

/* ---------------------------------------------------------- */
/* Generic Data List                                         */
/* ---------------------------------------------------------- */

.cantico-data-list,
[data-list] {
  display:
    flex;

  flex-direction:
    column;

  width:
    100%;

  overflow:
    hidden;

  border:
    1px
    solid
    var(--color-border);

  border-radius:
    var(--radius-lg);

  background:
    var(--color-surface);
}

/* ---------------------------------------------------------- */
/* Data List Item                                             */
/* ---------------------------------------------------------- */

.cantico-data-list-item,
[data-list-item] {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    var(--space-4);

  padding:
    var(--space-4);

  border-bottom:
    1px
    solid
    var(--color-border);

  color:
    var(--color-text);

  transition:
    background
    var(--transition-fast);
}

.cantico-data-list-item:last-child,
[data-list-item]:last-child {
  border-bottom:
    0;
}

.cantico-data-list-item:hover,
[data-list-item]:hover {
  background:
    var(--color-surface-soft);
}

/* ---------------------------------------------------------- */
/* Selected List Item                                         */
/* ---------------------------------------------------------- */

.cantico-data-list-item.is-selected,
[data-list-item][aria-selected="true"],
[data-list-item][data-selected="true"] {
  background:
    var(--color-primary-soft);

  box-shadow:
    inset
    3px
    0
    0
    var(--color-primary);
}

/* ---------------------------------------------------------- */
/* Primary / Secondary Text                                   */
/* ---------------------------------------------------------- */

.cantico-data-list-title,
[data-list-title] {
  color:
    var(--color-text);

  font-weight:
    var(--font-weight-semibold);
}

.cantico-data-list-meta,
[data-list-meta] {
  color:
    var(--color-text-muted);

  font-size:
    var(--font-size-xs);
}

/* ---------------------------------------------------------- */
/* Empty Table / List                                         */
/* ---------------------------------------------------------- */

.cantico-table-empty,
.cantico-data-list-empty,
[data-table-empty],
[data-list-empty] {
  padding:
    var(--space-7);

  color:
    var(--color-text-muted);

  text-align:
    center;

  background:
    var(--color-surface-soft);
}

/* ---------------------------------------------------------- */
/* Focus                                                      */
/* ---------------------------------------------------------- */

.cantico-data-list-item:focus-visible,
[data-list-item]:focus-visible,
.cantico-table th.is-sortable:focus-visible,
[data-table] th[data-sortable]:focus-visible {
  outline:
    2px
    solid
    var(--color-primary);

  outline-offset:
    -2px;
}

/* ---------------------------------------------------------- */
/* Reduced Motion                                             */
/* ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .cantico-table tbody tr,
  [data-table] tbody tr,
  .cantico-data-list-item,
  [data-list-item] {
    transition:
      none;
  }
}

/* ---------------------------------------------------------- */
/* Responsive                                                 */
/* ---------------------------------------------------------- */

@media (max-width: 640px) {
  .cantico-table th,
  .cantico-table td,
  [data-table] th,
  [data-table] td {
    padding:
      var(--space-3);

    font-size:
      var(--font-size-xs);
  }

  .cantico-data-list-item,
  [data-list-item] {
    align-items:
      flex-start;

    gap:
      var(--space-3);

    padding:
      var(--space-3);
  }
}

/* ========================================================== */
/* V13.15.12 — Shared Badges, Tags & Chips Theme               */
/* ========================================================== */

/* ---------------------------------------------------------- */
/* Base Badge / Tag / Chip                                    */
/* ---------------------------------------------------------- */

.cantico-badge,
.cantico-tag,
.cantico-chip,
[data-badge],
[data-tag],
[data-chip] {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    var(--space-1);

  max-width:
    100%;

  padding:
    var(--space-1)
    var(--space-2);

  border:
    1px
    solid
    var(--color-border);

  border-radius:
    var(--radius-pill)

  background:
    var(--color-surface-soft);

  color:
    var(--color-text-secondary);

  font-size:
    var(--font-size-xs);

  font-weight:
    var(--font-weight-semibold);

  line-height:
    1.2;

  white-space:
    nowrap;

  vertical-align:
    middle;
}

/* ---------------------------------------------------------- */
/* Primary                                                   */
/* ---------------------------------------------------------- */

.cantico-badge.is-primary,
.cantico-tag.is-primary,
.cantico-chip.is-primary,
[data-badge="primary"],
[data-tag="primary"],
[data-chip="primary"] {
  background:
    var(--color-primary-soft);

  color:
    var(--color-primary);

  border-color:
    var(--color-border-primary);
}

/* ---------------------------------------------------------- */
/* Success                                                   */
/* ---------------------------------------------------------- */

.cantico-badge.is-success,
.cantico-tag.is-success,
.cantico-chip.is-success,
[data-badge="success"],
[data-tag="success"],
[data-chip="success"] {
  background:
    var(--color-success-soft);

  color:
    var(--color-success);

  border-color:
    var(--color-success);
}

/* ---------------------------------------------------------- */
/* Warning                                                   */
/* ---------------------------------------------------------- */

.cantico-badge.is-warning,
.cantico-tag.is-warning,
.cantico-chip.is-warning,
[data-badge="warning"],
[data-tag="warning"],
[data-chip="warning"] {
  background:
    var(--color-warning-soft);

  color:
    var(--color-warning);

  border-color:
    var(--color-warning);
}

/* ---------------------------------------------------------- */
/* Danger                                                    */
/* ---------------------------------------------------------- */

.cantico-badge.is-danger,
.cantico-tag.is-danger,
.cantico-chip.is-danger,
[data-badge="danger"],
[data-tag="danger"],
[data-chip="danger"] {
  background:
    var(--color-danger-soft);

  color:
    var(--color-danger);

  border-color:
    var(--color-danger);
}

/* ---------------------------------------------------------- */
/* Neutral                                                   */
/* ---------------------------------------------------------- */

.cantico-badge.is-neutral,
.cantico-tag.is-neutral,
.cantico-chip.is-neutral,
[data-badge="neutral"],
[data-tag="neutral"],
[data-chip="neutral"] {
  background:
    var(--color-background-secondary);

  color:
    var(--color-text-muted);

  border-color:
    var(--color-border);
}

/* ---------------------------------------------------------- */
/* Interactive Chip                                          */
/* ---------------------------------------------------------- */

button.cantico-chip,
.cantico-chip.is-interactive,
[data-chip][role="button"] {
  cursor:
    pointer;

  transition:
    background
      var(--transition-fast),
    border-color
      var(--transition-fast),
    color
      var(--transition-fast),
    transform
      var(--transition-fast);
}

button.cantico-chip:hover:not(:disabled),
.cantico-chip.is-interactive:hover,
[data-chip][role="button"]:hover {
  background:
    var(--color-surface-elevated);

  border-color:
    var(--color-border-primary);

  color:
    var(--color-text);

  transform:
    translateY(-1px);
}

/* ---------------------------------------------------------- */
/* Selected Chip                                             */
/* ---------------------------------------------------------- */

.cantico-chip.is-selected,
[data-chip][aria-selected="true"],
[data-chip][aria-pressed="true"],
[data-chip][data-selected="true"] {
  background:
    var(--color-primary);

  border-color:
    var(--color-primary);

  color:
    var(--color-text-inverse)
}

/* ---------------------------------------------------------- */
/* Removable Chip                                            */
/* ---------------------------------------------------------- */

.cantico-chip-remove,
[data-chip-remove] {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    1.25rem;

  height:
    1.25rem;

  padding:
    0;

  border:
    0;

  border-radius:
    50%;

  background:
    transparent;

  color:
    inherit;

  cursor:
    pointer;

  font:
    inherit;

  line-height:
    1;
}

.cantico-chip-remove:hover,
[data-chip-remove]:hover {
  background:
    rgba(0, 0, 0, 0.08);
}

/* ---------------------------------------------------------- */
/* Disabled                                                  */
/* ---------------------------------------------------------- */

.cantico-badge.is-disabled,
.cantico-tag.is-disabled,
.cantico-chip.is-disabled,
.cantico-chip:disabled,
[data-badge][aria-disabled="true"],
[data-tag][aria-disabled="true"],
[data-chip][aria-disabled="true"] {
  opacity:
    0.55;

  cursor:
    not-allowed;

  pointer-events:
    none;
}

/* ---------------------------------------------------------- */
/* Focus                                                     */
/* ---------------------------------------------------------- */

button.cantico-chip:focus-visible,
.cantico-chip.is-interactive:focus-visible,
[data-chip][role="button"]:focus-visible,
.cantico-chip-remove:focus-visible,
[data-chip-remove]:focus-visible {
  outline:
    2px
    solid
    var(--color-primary);

  outline-offset:
    2px;
}

/* ---------------------------------------------------------- */
/* Reduced Motion                                            */
/* ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  button.cantico-chip,
  .cantico-chip.is-interactive,
  [data-chip][role="button"] {
    transition:
      none;
  }
}

/* ---------------------------------------------------------- */
/* Responsive                                                */
/* ---------------------------------------------------------- */

@media (max-width: 640px) {
  .cantico-badge,
  .cantico-tag,
  .cantico-chip,
  [data-badge],
  [data-tag],
  [data-chip] {
    font-size:
      var(--font-size-xs);
  }
}

/* ========================================================== */
/* V13.15.13 — Shared Tooltips & Popovers Theme                */
/* ========================================================== */

/* ---------------------------------------------------------- */
/* Tooltip                                                    */
/* ---------------------------------------------------------- */

.cantico-tooltip,
[data-tooltip-content] {
  position: absolute;

  z-index:
    var(--z-dropdown);

  max-width:
    260px;

  padding:
    var(--space-2)
    var(--space-3);

  border:
    1px solid
    var(--color-border);

  border-radius:
    var(--radius-md);

  background:
    var(--color-surface-elevated);

  color:
    var(--color-text);

  box-shadow:
    var(--shadow-md);

  font-size:
    var(--font-size-xs);

  line-height:
    1.45;

  pointer-events:
    none;
}

/* ---------------------------------------------------------- */
/* Tooltip Trigger                                            */
/* ---------------------------------------------------------- */

.cantico-tooltip-trigger,
[data-tooltip-trigger] {
  position:
    relative;
}

/* ---------------------------------------------------------- */
/* Tooltip Hidden                                             */
/* ---------------------------------------------------------- */

.cantico-tooltip[hidden],
[data-tooltip-content][hidden] {
  display:
    none;
}

/* ---------------------------------------------------------- */
/* Popover                                                    */
/* ---------------------------------------------------------- */

.cantico-popover,
[data-popover] {
  position:
    absolute;

  z-index:
    var(--z-dropdown);

  width:
    min(
      340px,
      calc(100vw - 32px)
    );

  padding:
    var(--space-4);

  border:
    1px solid
    var(--color-border);

  border-radius:
    var(--radius-lg);

  background:
    var(--color-surface-elevated);

  color:
    var(--color-text);

  box-shadow:
    var(--shadow-lg);
}

/* ---------------------------------------------------------- */
/* Popover Header                                             */
/* ---------------------------------------------------------- */

.cantico-popover-header,
[data-popover-header] {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    var(--space-3);

  margin-bottom:
    var(--space-3);
}

.cantico-popover-header h2,
.cantico-popover-header h3,
[data-popover-header] h2,
[data-popover-header] h3 {
  margin:
    0;

  color:
    var(--color-text);

  font-size:
    var(--font-size-sm);

  font-weight:
    var(--font-weight-bold);
}

/* ---------------------------------------------------------- */
/* Popover Content                                            */
/* ---------------------------------------------------------- */

.cantico-popover-content,
[data-popover-content] {
  color:
    var(--color-text-secondary);

  font-size:
    var(--font-size-sm);

  line-height:
    1.6;
}

/* ---------------------------------------------------------- */
/* Popover Actions                                            */
/* ---------------------------------------------------------- */

.cantico-popover-actions,
[data-popover-actions] {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    var(--space-2);

  margin-top:
    var(--space-4);

  padding-top:
    var(--space-3);

  border-top:
    1px solid
    var(--color-border);
}

/* ---------------------------------------------------------- */
/* Interactive Popover                                       */
/* ---------------------------------------------------------- */

.cantico-popover a,
.cantico-popover button,
[data-popover] a,
[data-popover] button {
  pointer-events:
    auto;
}

/* ---------------------------------------------------------- */
/* Hidden State                                               */
/* ---------------------------------------------------------- */

.cantico-popover[hidden],
[data-popover][hidden] {
  display:
    none;
}

/* ---------------------------------------------------------- */
/* Focus                                                      */
/* ---------------------------------------------------------- */

.cantico-popover:focus-visible,
[data-popover]:focus-visible {
  outline:
    2px solid
    var(--color-primary);

  outline-offset:
    3px;
}

/* ---------------------------------------------------------- */
/* Responsive                                                 */
/* ---------------------------------------------------------- */

@media (max-width: 640px) {
  .cantico-tooltip,
  [data-tooltip-content] {
    max-width:
      220px;
  }

  .cantico-popover,
  [data-popover] {
    width:
      calc(100vw - 24px);

    padding:
      var(--space-3);
  }
}

/* ========================================================== */
/* V13.15.14 — Toasts & Notifications Theme                    */
/* ========================================================== */

/* ---------------------------------------------------------- */
/* Toast Container                                            */
/* ---------------------------------------------------------- */

.cantico-toast-container,
[data-toast-container] {
  position: fixed;

  z-index:
    var(--z-modal);

  top:
    var(--space-5);

  right:
    var(--space-5);

  display:
    flex;

  flex-direction:
    column;

  gap:
    var(--space-3);

  width:
    min(
      380px,
      calc(100vw - 32px)
    );

  pointer-events:
    none;
}

/* ---------------------------------------------------------- */
/* Toast                                                      */
/* ---------------------------------------------------------- */

.cantico-toast,
[data-toast] {
  display:
    flex;

  align-items:
    flex-start;

  gap:
    var(--space-3);

  padding:
    var(--space-4);

  border:
    1px
    solid
    var(--color-border);

  border-radius:
    var(--radius-lg);

  background:
    var(--color-surface-elevated);

  color:
    var(--color-text);

  box-shadow:
    var(--shadow-lg);

  pointer-events:
    auto;

  overflow:
    hidden;
}

/* ---------------------------------------------------------- */
/* Toast Content                                              */
/* ---------------------------------------------------------- */

.cantico-toast-content,
[data-toast-content] {
  flex:
    1;

  min-width:
    0;
}

.cantico-toast-title,
[data-toast-title] {
  margin:
    0 0
    var(--space-1);

  color:
    var(--color-text);

  font-weight:
    var(--font-weight-bold);
}

.cantico-toast-message,
[data-toast-message] {
  margin:
    0;

  color:
    var(--color-text-secondary);

  font-size:
    var(--font-size-sm);

  line-height:
    1.5;
}

/* ---------------------------------------------------------- */
/* Success                                                    */
/* ---------------------------------------------------------- */

.cantico-toast.is-success,
[data-toast="success"] {
  border-color:
    rgba(
      40,
      199,
      111,
      0.35
    );

  background:
    linear-gradient(
      145deg,
      var(--color-surface-elevated),
      var(--color-success-soft)
    );
}

/* ---------------------------------------------------------- */
/* Warning                                                    */
/* ---------------------------------------------------------- */

.cantico-toast.is-warning,
[data-toast="warning"] {
  border-color:
    rgba(
      245,
      185,
      66,
      0.35
    );

  background:
    linear-gradient(
      145deg,
      var(--color-surface-elevated),
      var(--color-warning-soft)
    );
}

/* ---------------------------------------------------------- */
/* Error                                                      */
/* ---------------------------------------------------------- */

.cantico-toast.is-error,
[data-toast="error"] {
  border-color:
    rgba(
      255,
      92,
      92,
      0.35
    );

  background:
    linear-gradient(
      145deg,
      var(--color-surface-elevated),
      var(--color-danger-soft)
    );
}

/* ---------------------------------------------------------- */
/* Info                                                       */
/* ---------------------------------------------------------- */

.cantico-toast.is-info,
[data-toast="info"] {
  border-color:
    rgba(
      78,
      160,
      255,
      0.35
    );

  background:
    linear-gradient(
      145deg,
      var(--color-surface-elevated),
      var(--color-info-soft)
    );
}

/* ---------------------------------------------------------- */
/* Close Button                                               */
/* ---------------------------------------------------------- */

.cantico-toast-close,
[data-toast-close] {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    32px;

  height:
    32px;

  flex-shrink:
    0;

  padding:
    0;

  border:
    1px
    solid
    transparent;

  border-radius:
    var(--radius-md);

  background:
    transparent;

  color:
    var(--color-text-muted);

  cursor:
    pointer;

  transition:
    background
      var(--transition-fast),
    color
      var(--transition-fast),
    border-color
      var(--transition-fast);
}

.cantico-toast-close:hover:not(:disabled),
[data-toast-close]:hover:not(:disabled) {
  background:
    var(--color-surface-soft);

  border-color:
    var(--color-border);

  color:
    var(--color-text);
}

/* ---------------------------------------------------------- */
/* Progress                                                   */
/* ---------------------------------------------------------- */

.cantico-toast-progress,
[data-toast-progress] {
  position:
    absolute;

  left:
    0;

  bottom:
    0;

  width:
    100%;

  height:
    3px;

  background:
    var(--color-primary);
}

/* ---------------------------------------------------------- */
/* Hidden State                                               */
/* ---------------------------------------------------------- */

.cantico-toast[hidden],
[data-toast][hidden] {
  display:
    none;
}

/* ---------------------------------------------------------- */
/* Focus                                                      */
/* ---------------------------------------------------------- */

.cantico-toast-close:focus-visible,
[data-toast-close]:focus-visible {
  outline:
    2px
    solid
    var(--color-primary);

  outline-offset:
    2px;
}

/* ---------------------------------------------------------- */
/* Responsive                                                 */
/* ---------------------------------------------------------- */

@media (max-width: 640px) {
  .cantico-toast-container,
  [data-toast-container] {
    top:
      var(--space-3);

    right:
      var(--space-3);

    left:
      var(--space-3);

    width:
      auto;
  }

  .cantico-toast,
  [data-toast] {
    padding:
      var(--space-3);
  }
}

/* ========================================================== */
/* V13.15.15 — Tabs & Segmented Controls Theme                 */
/* ========================================================== */

/* ---------------------------------------------------------- */
/* Tabs Container                                             */
/* ---------------------------------------------------------- */

.cantico-tabs,
[data-tabs] {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    var(--space-2);

  padding:
    var(--space-1);

  border:
    1px
    solid
    var(--color-border);

  border-radius:
    var(--radius-lg);

  background:
    var(--color-surface-soft);
}

/* ---------------------------------------------------------- */
/* Tab                                                        */
/* ---------------------------------------------------------- */

.cantico-tab,
[data-tab] {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    var(--space-2);

  min-height:
    40px;

  padding:
    var(--space-2)
    var(--space-4);

  border:
    1px
    solid
    transparent;

  border-radius:
    var(--radius-md);

  background:
    transparent;

  color:
    var(--color-text-secondary);

  font:
    inherit;

  font-size:
    var(--font-size-sm);

  font-weight:
    var(--font-weight-semibold);

  text-decoration:
    none;

  cursor:
    pointer;

  transition:
    background
      var(--transition-fast),
    border-color
      var(--transition-fast),
    color
      var(--transition-fast),
    transform
      var(--transition-fast);
}

/* ---------------------------------------------------------- */
/* Tab Hover                                                  */
/* ---------------------------------------------------------- */

.cantico-tab:hover:not(:disabled),
[data-tab]:hover:not(:disabled) {
  background:
    var(--color-surface-hover);

  border-color:
    var(--color-border);

  color:
    var(--color-text);

  transform:
    translateY(-1px);
}

/* ---------------------------------------------------------- */
/* Active Tab                                                 */
/* ---------------------------------------------------------- */

.cantico-tab.is-active,
.cantico-tab[aria-selected="true"],
[data-tab][aria-selected="true"],
[data-tab][data-active="true"] {
  background:
    var(--color-primary-soft);

  border-color:
    var(--color-border-primary);

  color:
    var(--color-primary);
}

/* ---------------------------------------------------------- */
/* Focus                                                      */
/* ---------------------------------------------------------- */

.cantico-tab:focus-visible,
[data-tab]:focus-visible {
  outline:
    2px
    solid
    var(--color-primary);

  outline-offset:
    2px;
}

/* ---------------------------------------------------------- */
/* Disabled                                                   */
/* ---------------------------------------------------------- */

.cantico-tab:disabled,
.cantico-tab[aria-disabled="true"],
[data-tab][aria-disabled="true"] {
  opacity:
    0.5;

  cursor:
    not-allowed;

  pointer-events:
    none;
}

/* ---------------------------------------------------------- */
/* Segmented Control                                          */
/* ---------------------------------------------------------- */

.cantico-segmented,
[data-segmented] {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    var(--space-1);

  padding:
    var(--space-1);

  border:
    1px
    solid
    var(--color-border);

  border-radius:
    var(--radius-pill);

  background:
    var(--color-surface-soft);
}

/* ---------------------------------------------------------- */
/* Segment                                                    */
/* ---------------------------------------------------------- */

.cantico-segment,
[data-segment] {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    36px;

  padding:
    var(--space-2)
    var(--space-3);

  border:
    1px
    solid
    transparent;

  border-radius:
    var(--radius-pill);

  background:
    transparent;

  color:
    var(--color-text-secondary);

  font:
    inherit;

  font-size:
    var(--font-size-sm);

  font-weight:
    var(--font-weight-semibold);

  cursor:
    pointer;

  transition:
    background
      var(--transition-fast),
    border-color
      var(--transition-fast),
    color
      var(--transition-fast);
}

/* ---------------------------------------------------------- */
/* Segment Hover                                              */
/* ---------------------------------------------------------- */

.cantico-segment:hover:not(:disabled),
[data-segment]:hover:not(:disabled) {
  background:
    var(--color-surface-hover);

  color:
    var(--color-text);
}

/* ---------------------------------------------------------- */
/* Selected Segment                                           */
/* ---------------------------------------------------------- */

.cantico-segment.is-active,
.cantico-segment[aria-pressed="true"],
[data-segment][aria-pressed="true"],
[data-segment][data-active="true"] {
  background:
    var(--color-primary);

  border-color:
    var(--color-primary);

  color:
    var(--color-text-inverse);
}

/* ---------------------------------------------------------- */
/* Focus                                                      */
/* ---------------------------------------------------------- */

.cantico-segment:focus-visible,
[data-segment]:focus-visible {
  outline:
    2px
    solid
    var(--color-primary);

  outline-offset:
    2px;
}

/* ---------------------------------------------------------- */
/* Reduced Motion                                             */
/* ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .cantico-tab,
  [data-tab],
  .cantico-segment,
  [data-segment] {
    transition:
      none;
  }
}

/* ---------------------------------------------------------- */
/* Responsive                                                 */
/* ---------------------------------------------------------- */

@media (max-width: 640px) {
  .cantico-tabs,
  [data-tabs] {
    width:
      100%;
  }

  .cantico-tab,
  [data-tab] {
    flex:
      1 1 auto;
  }

  .cantico-segmented,
  [data-segmented] {
    max-width:
      100%;

    overflow-x:
      auto;
  }
}

/* ========================================================== */
/* V13.15.16 — Search, Filters & Toolbar Theme                 */
/* ========================================================== */

/* ---------------------------------------------------------- */
/* Toolbar                                                    */
/* ---------------------------------------------------------- */

.cantico-toolbar,
[data-toolbar] {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  flex-wrap:
    wrap;

  gap:
    var(--space-3);

  width:
    100%;

  padding:
    var(--space-3);

  border:
    1px
    solid
    var(--color-border);

  border-radius:
    var(--radius-lg);

  background:
    var(--color-surface);

  box-shadow:
    var(--shadow-sm);
}

/* ---------------------------------------------------------- */
/* Toolbar Groups                                             */
/* ---------------------------------------------------------- */

.cantico-toolbar-group,
[data-toolbar-group] {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    var(--space-2);
}

/* ---------------------------------------------------------- */
/* Search                                                     */
/* ---------------------------------------------------------- */

.cantico-search,
[data-search] {
  position:
    relative;

  flex:
    1 1 260px;

  min-width:
    220px;
}

/* ---------------------------------------------------------- */
/* Search Input                                               */
/* ---------------------------------------------------------- */

.cantico-search input,
[data-search] input {
  width:
    100%;

  min-height:
    42px;

  padding:
    var(--space-2)
    var(--space-4);

  border:
    1px
    solid
    var(--input-border);

  border-radius:
    var(--radius-md);

  background:
    var(--input-background);

  color:
    var(--input-text);
}

/* ---------------------------------------------------------- */
/* Search Hover                                               */
/* ---------------------------------------------------------- */

.cantico-search input:hover,
[data-search] input:hover {
  background:
    var(--input-background-hover);
}

/* ---------------------------------------------------------- */
/* Search Focus                                               */
/* ---------------------------------------------------------- */

.cantico-search input:focus,
[data-search] input:focus {
  outline:
    none;

  border-color:
    var(--input-border-focus);

  box-shadow:
    var(--input-focus-ring);
}

/* ---------------------------------------------------------- */
/* Filter Group                                               */
/* ---------------------------------------------------------- */

.cantico-filters,
[data-filters] {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    var(--space-2);
}

/* ---------------------------------------------------------- */
/* Filter Button                                              */
/* ---------------------------------------------------------- */

.cantico-filter,
[data-filter] {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    38px;

  padding:
    var(--space-2)
    var(--space-3);

  border:
    1px
    solid
    var(--color-border);

  border-radius:
    var(--radius-pill);

  background:
    var(--color-surface-soft);

  color:
    var(--color-text-secondary);

  font:
    inherit;

  font-size:
    var(--font-size-sm);

  font-weight:
    var(--font-weight-semibold);

  cursor:
    pointer;

  transition:
    background
      var(--transition-fast),
    border-color
      var(--transition-fast),
    color
      var(--transition-fast),
    transform
      var(--transition-fast);
}

/* ---------------------------------------------------------- */
/* Filter Hover                                               */
/* ---------------------------------------------------------- */

.cantico-filter:hover:not(:disabled),
[data-filter]:hover:not(:disabled) {
  transform:
    translateY(-1px);

  border-color:
    var(--color-border-primary);

  background:
    var(--color-surface-hover);

  color:
    var(--color-text);
}

/* ---------------------------------------------------------- */
/* Active Filter                                              */
/* ---------------------------------------------------------- */

.cantico-filter.is-active,
.cantico-filter[aria-pressed="true"],
[data-filter][aria-pressed="true"],
[data-filter][data-active="true"] {
  border-color:
    var(--color-border-primary);

  background:
    var(--color-primary-soft);

  color:
    var(--color-primary);
}

/* ---------------------------------------------------------- */
/* Toolbar Select                                             */
/* ---------------------------------------------------------- */

.cantico-toolbar select,
[data-toolbar] select {
  min-height:
    40px;

  padding:
    var(--space-2)
    var(--space-3);

  border:
    1px
    solid
    var(--input-border);

  border-radius:
    var(--radius-md);

  background:
    var(--input-background);

  color:
    var(--input-text);
}

/* ---------------------------------------------------------- */
/* Toolbar Result Count                                       */
/* ---------------------------------------------------------- */

.cantico-toolbar-results,
[data-toolbar-results] {
  color:
    var(--color-text-muted);

  font-size:
    var(--font-size-sm);

  font-weight:
    var(--font-weight-semibold);

  white-space:
    nowrap;
}

/* ---------------------------------------------------------- */
/* Toolbar Divider                                            */
/* ---------------------------------------------------------- */

.cantico-toolbar-divider,
[data-toolbar-divider] {
  width:
    1px;

  height:
    28px;

  background:
    var(--color-border);
}

/* ---------------------------------------------------------- */
/* Focus                                                      */
/* ---------------------------------------------------------- */

.cantico-filter:focus-visible,
[data-filter]:focus-visible {
  outline:
    2px
    solid
    var(--color-primary);

  outline-offset:
    2px;
}

/* ---------------------------------------------------------- */
/* Disabled                                                   */
/* ---------------------------------------------------------- */

.cantico-filter:disabled,
[data-filter][aria-disabled="true"] {
  opacity:
    0.5;

  cursor:
    not-allowed;

  pointer-events:
    none;
}

/* ---------------------------------------------------------- */
/* Reduced Motion                                             */
/* ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .cantico-filter,
  [data-filter] {
    transition:
      none;
  }
}

/* ---------------------------------------------------------- */
/* Responsive                                                 */
/* ---------------------------------------------------------- */

@media (max-width: 640px) {
  .cantico-toolbar,
  [data-toolbar] {
    align-items:
      stretch;

    flex-direction:
      column;
  }

  .cantico-toolbar-group,
  [data-toolbar-group],
  .cantico-filters,
  [data-filters] {
    width:
      100%;
  }

  .cantico-search,
  [data-search] {
    width:
      100%;

    min-width:
      0;
  }

  .cantico-toolbar-divider,
  [data-toolbar-divider] {
    width:
      100%;

    height:
      1px;
  }
}

/* ========================================================== */
/* V13.15.17 — Media & Artwork Theme                           */
/* ========================================================== */

/* ---------------------------------------------------------- */
/* Media Frame                                                */
/* ---------------------------------------------------------- */

.cantico-media-frame,
[data-media-frame] {
  position:
    relative;

  overflow:
    hidden;

  width:
    100%;

  border:
    1px
    solid
    var(--color-border);

  border-radius:
    var(--radius-lg);

  background:
    var(--color-background-secondary);

  box-shadow:
    var(--shadow-sm);
}

/* ---------------------------------------------------------- */
/* Artwork                                                    */
/* ---------------------------------------------------------- */

.cantico-artwork,
[data-artwork] {
  display:
    block;

  width:
    100%;

  max-width:
    100%;

  object-fit:
    cover;

  background:
    var(--color-background-secondary);

  transition:
    transform
    var(--transition-normal);
}

/* ---------------------------------------------------------- */
/* Interactive Artwork                                        */
/* ---------------------------------------------------------- */

.cantico-media-frame.is-interactive,
[data-media-frame][data-interactive="true"] {
  cursor:
    pointer;
}

.cantico-media-frame.is-interactive:hover
.cantico-artwork,
[data-media-frame][data-interactive="true"]:hover
[data-artwork] {
  transform:
    scale(1.025);
}

/* ---------------------------------------------------------- */
/* Thumbnail                                                  */
/* ---------------------------------------------------------- */

.cantico-thumbnail,
[data-thumbnail] {
  display:
    block;

  width:
    56px;

  height:
    56px;

  flex-shrink:
    0;

  object-fit:
    cover;

  border:
    1px
    solid
    var(--color-border);

  border-radius:
    var(--radius-md);

  background:
    var(--color-surface-soft);
}

/* ---------------------------------------------------------- */
/* Cover Artwork                                              */
/* ---------------------------------------------------------- */

.cantico-cover,
[data-cover] {
  aspect-ratio:
    1 / 1;

  overflow:
    hidden;

  border-radius:
    var(--radius-lg);

  background:
    var(--color-background-secondary);
}

.cantico-cover img,
[data-cover] img {
  display:
    block;

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;
}

/* ---------------------------------------------------------- */
/* Video                                                      */
/* ---------------------------------------------------------- */

.cantico-video,
[data-video] {
  display:
    block;

  width:
    100%;

  aspect-ratio:
    16 / 9;

  border:
    0;

  border-radius:
    var(--radius-lg);

  background:
    #000000;
}

/* ---------------------------------------------------------- */
/* Audio                                                      */
/* ---------------------------------------------------------- */

.cantico-audio,
[data-audio] {
  width:
    100%;

  max-width:
    100%;
}

/* ---------------------------------------------------------- */
/* Media Placeholder                                          */
/* ---------------------------------------------------------- */

.cantico-media-placeholder,
[data-media-placeholder] {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  flex-direction:
    column;

  gap:
    var(--space-3);

  min-height:
    180px;

  padding:
    var(--space-5);

  border:
    1px
    dashed
    var(--color-border);

  border-radius:
    var(--radius-lg);

  background:
    var(--color-surface-soft);

  color:
    var(--color-text-muted);

  text-align:
    center;
}

/* ---------------------------------------------------------- */
/* Media Caption                                              */
/* ---------------------------------------------------------- */

.cantico-media-caption,
[data-media-caption] {
  margin-top:
    var(--space-2);

  color:
    var(--color-text-muted);

  font-size:
    var(--font-size-xs);

  line-height:
    1.45;
}

/* ---------------------------------------------------------- */
/* Selected Media                                             */
/* ---------------------------------------------------------- */

.cantico-media-frame.is-selected,
[data-media-frame][aria-selected="true"],
[data-media-frame][data-selected="true"] {
  border-color:
    var(--color-border-primary-strong);

  box-shadow:
    var(--shadow-primary),
    var(--shadow-md);
}

/* ---------------------------------------------------------- */
/* Focus                                                      */
/* ---------------------------------------------------------- */

.cantico-media-frame:focus-visible,
[data-media-frame]:focus-visible {
  outline:
    2px
    solid
    var(--color-primary);

  outline-offset:
    3px;
}

/* ---------------------------------------------------------- */
/* Reduced Motion                                             */
/* ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .cantico-artwork,
  [data-artwork] {
    transition:
      none;
  }

  .cantico-media-frame.is-interactive:hover
  .cantico-artwork,
  [data-media-frame][data-interactive="true"]:hover
  [data-artwork] {
    transform:
      none;
  }
}

/* ---------------------------------------------------------- */
/* Responsive                                                 */
/* ---------------------------------------------------------- */

@media (max-width: 640px) {
  .cantico-thumbnail,
  [data-thumbnail] {
    width:
      48px;

    height:
      48px;
  }

  .cantico-media-placeholder,
  [data-media-placeholder] {
    min-height:
      140px;

    padding:
      var(--space-4);
  }
}

/* ========================================================== */
/* V13.15.18 — Final Integration & Responsive Polish           */
/* ========================================================== */

/* ---------------------------------------------------------- */
/* Global Overflow Safety                                     */
/* ---------------------------------------------------------- */

html,
body {
  max-width:
    100%;

  overflow-x:
    hidden;
}

img,
video,
audio,
canvas,
svg {
  max-width:
    100%;
}

/* ---------------------------------------------------------- */
/* Main Content Safety                                        */
/* ---------------------------------------------------------- */

.cantico-main,
.cantico-section,
.cantico-card-grid,
.cantico-toolbar,
[data-toolbar] {
  min-width:
    0;
}

/* ---------------------------------------------------------- */
/* Long Text Safety                                           */
/* ---------------------------------------------------------- */

.cantico-card,
.cantico-detail,
.cantico-panel,
.cantico-surface,
.cantico-data-list-item,
[data-list-item],
.cantico-toast,
[data-toast],
.cantico-popover,
[data-popover] {
  overflow-wrap:
    anywhere;
}

/* ---------------------------------------------------------- */
/* Shared Interactive Focus                                   */
/* ---------------------------------------------------------- */

button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline-color:
    var(--color-primary);
}

/* ---------------------------------------------------------- */
/* Touch Targets                                              */
/* ---------------------------------------------------------- */

button,
[role="button"],
.cantico-tab,
[data-tab],
.cantico-segment,
[data-segment],
.cantico-filter,
[data-filter] {
  min-height:
    40px;
}

/* ---------------------------------------------------------- */
/* Scrollbar                                                  */
/* ---------------------------------------------------------- */

* {
  scrollbar-width:
    thin;

  scrollbar-color:
    var(--color-border-strong)
    transparent;
}

*::-webkit-scrollbar {
  width:
    10px;

  height:
    10px;
}

*::-webkit-scrollbar-track {
  background:
    transparent;
}

*::-webkit-scrollbar-thumb {
  border:
    2px solid
    transparent;

  border-radius:
    var(--radius-pill);

  background:
    var(--color-border-strong);

  background-clip:
    padding-box;
}

*::-webkit-scrollbar-thumb:hover {
  background:
    var(--color-border-hover);

  background-clip:
    padding-box;
}

/* ---------------------------------------------------------- */
/* Tablet                                                    */
/* ---------------------------------------------------------- */

@media (max-width: 900px) {
  .cantico-main {
    width:
      min(
        100% - 28px,
        var(--content-max-width)
      );
  }

  .cantico-toolbar,
  [data-toolbar] {
    align-items:
      stretch;
  }

  .cantico-card-grid {
    gap:
      var(--space-4);
  }
}

/* ---------------------------------------------------------- */
/* Mobile                                                    */
/* ---------------------------------------------------------- */

@media (max-width: 640px) {
  .cantico-main {
    width:
      min(
        100% - 20px,
        var(--content-max-width)
      );
  }

  .cantico-header {
    padding:
      var(--space-3)
      var(--space-4);
  }

  .cantico-nav {
    width:
      100%;

    overflow-x:
      auto;

    flex-wrap:
      nowrap;

    padding-bottom:
      var(--space-1);
  }

  .cantico-nav a {
    flex:
      0 0 auto;
  }

  .cantico-section {
    padding:
      var(--space-7)
      0;
  }

  .cantico-card-grid {
    grid-template-columns:
      1fr;
  }

  .cantico-toolbar,
  [data-toolbar] {
    padding:
      var(--space-3);
  }

  .cantico-toolbar-group,
  [data-toolbar-group] {
    width:
      100%;
  }

  .cantico-modal-footer,
  [data-modal-footer],
  .cantico-popover-actions,
  [data-popover-actions] {
    justify-content:
      stretch;
  }
}

/* ---------------------------------------------------------- */
/* Small Mobile                                               */
/* ---------------------------------------------------------- */

@media (max-width: 420px) {
  .cantico-header {
    padding-inline:
      var(--space-3);
  }

  .cantico-logo {
    width:
      38px;

    height:
      38px;
  }

  .cantico-card,
  .cantico-detail,
  .cantico-panel,
  .cantico-surface {
    border-radius:
      var(--radius-md);
  }

  .cantico-button,
  button,
  [role="button"] {
    max-width:
      100%;
  }
}

/* ---------------------------------------------------------- */
/* Reduced Motion                                             */
/* ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior:
      auto !important;

    transition-duration:
      0.01ms !important;

    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;
  }
}

/* ========================================================== */
/* Header Navigation Polish                                   */
/* ========================================================== */

.cantico-header__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);

  flex: 1 1 auto;
  min-width: 0;
}

.cantico-header__actions .cantico-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;

  gap: var(--space-2);

  min-width: 0;
}

/* ---------------------------------------------------------- */
/* Global Search Trigger                                      */
/* ---------------------------------------------------------- */

.cantico-search-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: var(--space-2);

  min-height: 40px;

  padding:
    var(--space-2)
    var(--space-3);

  flex: 0 0 auto;

  border:
    1px solid
    var(--color-border);

  border-radius:
    var(--radius-pill);

  background:
    var(--color-surface-soft);

  color:
    var(--color-text-secondary);

  font: inherit;

  font-size:
    var(--font-size-sm);

  font-weight:
    var(--font-weight-semibold);

  cursor: pointer;

  white-space: nowrap;

  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast);
}

.cantico-search-trigger:hover {
  transform:
    translateY(-1px);

  background:
    var(--color-primary-soft);

  border-color:
    var(--color-border-primary);

  color:
    var(--color-primary);
}

.cantico-search-trigger:focus-visible {
  outline:
    2px solid
    var(--color-primary);

  outline-offset:
    2px;
}

/* ---------------------------------------------------------- */
/* Tablet                                                     */
/* ---------------------------------------------------------- */

@media (max-width: 1000px) {
  .cantico-header {
    flex-wrap: wrap;
  }

  .cantico-header__actions {
    width: 100%;
  }

  .cantico-header__actions .cantico-nav {
    flex: 1 1 auto;
  }
}

/* ---------------------------------------------------------- */
/* Mobile                                                     */
/* ---------------------------------------------------------- */

@media (max-width: 800px) {
  .cantico-header__actions {
    display: flex;

    width: 100%;

    align-items: center;

    gap:
      var(--space-2);
  }

  .cantico-header__actions .cantico-nav {
    flex: 1 1 auto;

    width: auto;

    overflow-x: auto;

    flex-wrap: nowrap;
  }

  .cantico-search-trigger {
    flex: 0 0 auto;
  }
}

/* ---------------------------------------------------------- */
/* Small Mobile                                               */
/* ---------------------------------------------------------- */

@media (max-width: 560px) {
  .cantico-search-trigger {
    width: 40px;
    height: 40px;

    padding: 0;
  }

  .cantico-search-trigger span:last-child {
    display: none;
  }
}

/* ========================================================== */
/* Home Layout Polish                                         */
/* ========================================================== */

/* ---------------------------------------------------------- */
/* Hero Spacing                                               */
/* ---------------------------------------------------------- */

.cantico-hero {
  padding:
    clamp(48px, 6vw, 76px)
    0
    clamp(24px, 3vw, 40px);
}

/* ---------------------------------------------------------- */
/* First Home Section                                         */
/* ---------------------------------------------------------- */

.cantico-hero + .cantico-section {
  padding-top:
    var(--space-5);
}

/* ---------------------------------------------------------- */
/* Home Section Header                                        */
/* ---------------------------------------------------------- */

.cantico-section__header {
  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  flex-wrap:
    wrap;

  gap:
    var(--space-3);

  margin-bottom:
    var(--space-4);
}

.cantico-section__header h2 {
  margin-bottom:
    0;
}

.cantico-section__header > a {
  flex:
    0 0 auto;

  color:
    var(--color-primary);

  font-size:
    var(--font-size-sm);

  text-decoration:
    none;
}

.cantico-section__header > a:hover {
  text-decoration:
    underline;
}

/* ---------------------------------------------------------- */
/* Mobile                                                     */
/* ---------------------------------------------------------- */

@media (max-width: 640px) {
  .cantico-hero {
    padding:
      var(--space-8)
      0
      var(--space-5);
  }

  .cantico-hero + .cantico-section {
    padding-top:
      var(--space-4);
  }

  .cantico-section__header {
    align-items:
      flex-start;

    flex-direction:
      column;
  }
}

/* ========================================================== */
/* V10.9.2 — Responsive Fixed Player Spacing                  */
/* ========================================================== */

/*
 * El reproductor permanece fixed en la parte inferior.
 * En pantallas pequeñas puede ocupar más altura porque
 * sus controles cambian de distribución.
 *
 * Reservamos espacio adicional para impedir que el player
 * cubra el footer o el último contenido de cualquier vista.
 */

/* ---------------------------------------------------------- */
/* Tablet / Narrow Desktop                                    */
/* ---------------------------------------------------------- */

@media (max-width: 1000px) {
  .cantico-app-shell {
    padding-bottom:
      190px;
  }
}

/* ---------------------------------------------------------- */
/* Tablet / Mobile                                            */
/* ---------------------------------------------------------- */

@media (max-width: 800px) {
  .cantico-app-shell {
    padding-bottom:
      230px;
  }

  .cantico-footer {
    padding-bottom:
      140px;
  }
}

/* ---------------------------------------------------------- */
/* Small Mobile                                               */
/* ---------------------------------------------------------- */

@media (max-width: 560px) {
  .cantico-app-shell {
    padding-bottom:
      260px;
  }

  .cantico-footer {
    padding-bottom:
      160px;
  }
}

/* ==========================================================
   V10.10.1 — Professional Mobile Navigation
   ========================================================== */

/* ----------------------------------------------------------
   Mobile Navigation — Desktop Default
   ---------------------------------------------------------- */

.cantico-mobile-nav {
  display: none;
}

/* ----------------------------------------------------------
   Mobile Header
   ---------------------------------------------------------- */

@media (max-width: 800px) {

  .cantico-header {
    position: relative;

    display: flex;

    align-items: center;

    justify-content: space-between;

    flex-wrap: nowrap;

    gap: 12px;
  }

  .cantico-brand {
    flex: 1 1 auto;

    min-width: 0;
  }

  .cantico-brand__text {
    min-width: 0;
  }

  .cantico-brand__text strong {
    display: block;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
  }

  /* Hide desktop navigation */

  .cantico-nav--desktop {
    display: none;
  }

  .cantico-header__actions {
    display: flex;

    align-items: center;

    justify-content: flex-end;

    width: auto;

    flex: 0 0 auto;

    gap: 8px;
  }

  /* Search becomes icon-only */

  .cantico-header__actions
  > .cantico-search-trigger {
    width: 42px;

    height: 42px;

    min-height: 42px;

    flex: 0 0 42px;

    padding: 0;

    border-radius: 50%;
  }

  .cantico-header__actions
  > .cantico-search-trigger
  > span:last-child {
    display: none;
  }

  /* --------------------------------------------------------
     Mobile Menu
     -------------------------------------------------------- */

  .cantico-mobile-nav {
    position: relative;

    display: block;

    flex: 0 0 auto;
  }

  .cantico-mobile-nav__trigger {
    display: grid;

    place-items: center;

    width: 42px;

    height: 42px;

    padding: 0;

    border:
      1px solid
      var(--color-border);

    border-radius:
      var(--radius-md);

    background:
      var(--color-surface-soft);

    color:
      var(--color-text);

    cursor: pointer;

    list-style: none;
  }

  .cantico-mobile-nav__trigger::-webkit-details-marker {
    display: none;
  }

  .cantico-mobile-nav__trigger::marker {
    display: none;
    content: "";
  }

  /* Hamburger */

  .cantico-mobile-nav__hamburger {
    display: flex;

    width: 18px;

    flex-direction: column;

    gap: 4px;
  }

  .cantico-mobile-nav__hamburger span {
    display: block;

    width: 100%;

    height: 2px;

    border-radius: 999px;

    background:
      currentColor;

    transition:
      transform var(--transition-fast),
      opacity var(--transition-fast);
  }

  /* Hamburger -> X */

  .cantico-mobile-nav[open]
  .cantico-mobile-nav__hamburger
  span:nth-child(1) {
    transform:
      translateY(6px)
      rotate(45deg);
  }

  .cantico-mobile-nav[open]
  .cantico-mobile-nav__hamburger
  span:nth-child(2) {
    opacity: 0;
  }

  .cantico-mobile-nav[open]
  .cantico-mobile-nav__hamburger
  span:nth-child(3) {
    transform:
      translateY(-6px)
      rotate(-45deg);
  }

  /* --------------------------------------------------------
     Dropdown Panel
     -------------------------------------------------------- */

  .cantico-mobile-nav__panel {
    position: absolute;

    top: calc(100% + 12px);

    right: 0;

    z-index: 1200;

    width:
      min(
        300px,
        calc(100vw - 32px)
      );

    padding: 10px;

    border:
      1px solid
      var(--color-border);

    border-radius:
      var(--radius-lg);

    background:
      var(--color-surface);

    box-shadow:
      var(--shadow-lg);
  }

  .cantico-mobile-nav__links {
    display: flex;

    flex-direction: column;

    gap: 4px;
  }

  .cantico-mobile-nav__link {
    display: flex;

    align-items: center;

    min-height: 42px;

    padding:
      9px
      12px;

    border:
      1px solid
      transparent;

    border-radius:
      var(--radius-md);

    color:
      var(--color-text-secondary);

    font-size:
      var(--font-size-sm);

    font-weight:
      var(--font-weight-semibold);

    text-decoration: none;
  }

  .cantico-mobile-nav__link:hover {
    background:
      var(--color-surface-soft);

    color:
      var(--color-text);
  }

  .cantico-mobile-nav__link.is-active {
    border-color:
      var(--color-border-primary);

    background:
      var(--color-primary-soft);

    color:
      var(--color-primary);
  }

  /* Search inside menu */

  .cantico-mobile-nav__search {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    width: 100%;

    min-height: 42px;

    margin-top: 8px;

    padding:
      9px
      12px;

    border:
      1px solid
      var(--color-border);

    border-radius:
      var(--radius-md);

    background:
      var(--color-background-secondary);

    color:
      var(--color-text);

    font: inherit;

    font-size:
      var(--font-size-sm);

    font-weight:
      var(--font-weight-semibold);

    cursor: pointer;
  }
}

/* ==========================================================
   Small Mobile — 520px
   ========================================================== */

@media (max-width: 520px) {

  .cantico-header {
    padding-left: 12px;

    padding-right: 12px;
  }

  .cantico-logo {
    width: 40px;

    height: 40px;

    flex: 0 0 40px;
  }

  .cantico-brand {
    gap: 10px;
  }

  .cantico-brand__text strong {
    font-size: 0.95rem;
  }

  .cantico-brand__text small {
    font-size: 0.65rem;
  }

  .cantico-header__actions
  > .cantico-search-trigger {
    width: 40px;

    height: 40px;

    min-height: 40px;

    flex-basis: 40px;
  }

  .cantico-mobile-nav__trigger {
    width: 40px;

    height: 40px;
  }

  .cantico-mobile-nav__panel {
    top:
      calc(100% + 10px);

    width:
      min(
        280px,
        calc(100vw - 24px)
      );
  }
}

/* ==========================================================
   Very Small Mobile
   ========================================================== */

@media (max-width: 380px) {

  .cantico-brand__text small {
    display: none;
  }

  .cantico-brand__text strong {
    font-size: 0.9rem;
  }
}

/* ==========================================================
   Reduced Motion
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

  .cantico-mobile-nav__hamburger span {
    transition: none;
  }
}

/* ==========================================================
   V10.10.4 — Mobile Navigation Visibility Fix
   ========================================================== */

@media (max-width: 800px) {

  /* Desktop navigation must never render on mobile */
  .cantico-header__actions .cantico-nav--desktop {
    display: none;
  }

  /* Mobile hamburger navigation */
  .cantico-header__actions .cantico-mobile-nav {
    display: block;
    flex: 0 0 auto;
  }

}

/* ==========================================================
   V10.10.5 — Mobile Navigation Visual Polish
   ========================================================== */

@media (max-width: 800px) {

  .cantico-mobile-nav__panel {
    width:
      min(
        310px,
        calc(100vw - 28px)
      );

    padding:
      12px;

    border-radius:
      24px;
  }

  .cantico-mobile-nav__links {
    gap:
      6px;
  }

  .cantico-mobile-nav__link {
    min-height:
      54px;

    padding:
      12px
      16px;

    border-radius:
      16px;

    font-size:
      1.05rem;

    line-height:
      1.2;
  }

  .cantico-mobile-nav__link.is-active {
    border:
      1px solid
      var(--color-border-primary);

    background:
      var(--color-primary-soft);

    color:
      var(--color-primary);

    font-weight:
      var(--font-weight-bold);
  }

  .cantico-mobile-nav__search {
    min-height:
      52px;

    margin-top:
      10px;

    border-radius:
      16px;

    font-size:
      1rem;

    font-weight:
      var(--font-weight-bold);
  }
}

@media (max-width: 520px) {

  .cantico-mobile-nav__panel {
    width:
      min(
        300px,
        calc(100vw - 24px)
      );

    padding:
      10px;
  }

  .cantico-mobile-nav__link {
    min-height:
      52px;

    padding:
      11px
      14px;

    font-size:
      1rem;
  }

  .cantico-mobile-nav__search {
    min-height:
      50px;
  }
}