/* ============================================================
   LAB CSS MODERNE — Module styles
   ============================================================ */

/* ============================================================
   01 :has()
   ============================================================ */
.demo-has {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.has-card {
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1rem;
  transition: border-color 0.3s, background 0.3s;

  &:has(img) {
    border-color: var(--owl-gold);
    background: var(--owl-gold-dim);
  }

  & p { margin-top: 0.75rem; font-size: 0.85rem; }
  & img { border-radius: var(--radius-sm); }
}

/* ============================================================
   02 @container
   ============================================================ */
.demo-container {
  display: grid;
  grid-template-columns: 1fr 1.8fr;
  gap: 1.5rem;
  align-items: start;
}

.container-wrapper {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.container-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.container-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  background: var(--bg);
}

.container-card__thumb {
  width: 100%;
  height: 44px;
  background: linear-gradient(135deg, var(--owl-navy-mid), var(--owl-gold));
  border-radius: 4px;
  flex-shrink: 0;
}

.container-card__body {
  & strong { display: block; font-size: 0.8rem; color: var(--text-bright); }
  & p { font-size: 0.72rem; color: var(--text-muted); }
}

@container (min-width: 280px) {
  .container-card {
    flex-direction: row;
    align-items: center;
  }

  .container-card__thumb {
    width: 56px;
    height: 56px;
  }
}

/* ============================================================
   03 text-wrap: balance
   ============================================================ */
.demo-textwrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.textwrap-box {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1.25rem;
  background: var(--bg);
}

.textwrap-badge {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.18rem 0.45rem;
  border-radius: 3px;
  display: inline-block;
  margin-bottom: 0.75rem;

  &.textwrap-badge--bad  { background: color-mix(in oklch, #e84545 15%, transparent); color: #e84545; }
  &.textwrap-badge--good { background: color-mix(in oklch, #45e88a 15%, transparent); color: #45e88a; }
}

.textwrap-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-bright);

  &.textwrap-title--yes { text-wrap: balance; }
}

/* ============================================================
   04 subgrid
   ============================================================ */
.subgrid-parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
}

.subgrid-item {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  gap: 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.85rem;
  background: var(--bg);
}

.subgrid-item__img {
  height: 64px;
  border-radius: 4px;

  &.subgrid-item__img--a { background: linear-gradient(135deg, var(--owl-gold), #e84545); }
  &.subgrid-item__img--b { background: linear-gradient(135deg, #4577e8, #45c6e8); }
  &.subgrid-item__img--c { background: linear-gradient(135deg, #45e88a, #45c6e8); }
}

.subgrid-item__title { font-size: 0.8rem; color: var(--text-bright); font-family: var(--font-display); font-weight: 700; text-wrap: balance; }
.subgrid-item__body  { font-size: 0.75rem; color: var(--text-muted); text-wrap: balance; }

.subgrid-item__cta {
  padding: 0.35rem 0.6rem;
  background: transparent;
  border: 1px solid var(--owl-gold);
  color: var(--owl-gold);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  align-self: end;
  cursor: pointer;
  font-family: var(--font-body);
  transition: background 0.18s, color 0.18s;

  &:hover {
    background: var(--owl-gold);
    color: #0d1117;
  }
}

/* ============================================================
   05 color-mix()
   ============================================================ */
.mix-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.mix-swatch {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: rgba(255,255,255,0.9);

  &.mix-swatch--a         { background: #e84545; }
  &.mix-swatch--b         { background: #4577e8; }
  &.mix-swatch--result-25 { background: color-mix(in oklch, #e84545 25%, #4577e8); }
  &.mix-swatch--result-50 { background: color-mix(in oklch, #e84545 50%, #4577e8); }
  &.mix-swatch--result-75 { background: color-mix(in oklch, #e84545 75%, #4577e8); }
}

.mix-operator {
  font-family: var(--font-mono);
  color: var(--text-muted);
  font-size: 1.2rem;
}

/* ============================================================
   06 CSS Nesting
   ============================================================ */
.nest-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1.4rem;
  display: grid;
  gap: 0.6rem;
  max-width: 340px;

  & .nest-card__title {
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--owl-gold);
    font-weight: 700;
  }

  & .nest-card__body {
    font-size: 0.85rem;
    color: var(--text-muted);
  }

  & .nest-card__btn {
    padding: 0.45rem 0.9rem;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    transition: background 0.18s, border-color 0.18s, color 0.18s;
    width: fit-content;
    cursor: pointer;
    font-family: var(--font-body);

    &:hover {
      background: var(--owl-gold);
      border-color: var(--owl-gold);
      color: #0d1117;
    }
  }
}

/* ============================================================
   07 dvh
   ============================================================ */
.dvh-compare {
  display: flex;
  gap: 3rem;
  justify-content: center;
}

.dvh-phone {
  width: 90px;
  background: var(--surface-hi);
  border: 2px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.dvh-browser-bar {
  height: 18px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.dvh-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 500;

  &.dvh-screen--vh  { height: 120px; background: color-mix(in oklch, #e84545 15%, transparent); color: #e84545; }
  &.dvh-screen--dvh { height: 94px;  background: color-mix(in oklch, #45e88a 15%, transparent); color: #45e88a; }
}

.dvh-overflow-indicator,
.dvh-ok-indicator {
  font-size: 0.55rem;
  text-align: center;
  padding: 0.15rem 0.3rem;
  border-radius: 3px;
}

.dvh-overflow-indicator { background: #e84545; color: #fff; }
.dvh-ok-indicator       { background: #45e88a; color: #000; }

/* ============================================================
   08 aspect-ratio
   ============================================================ */
.aspect-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.85rem;
  align-items: end;
}

.aspect-box {
  background: var(--surface-hi);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-muted);

  &.aspect-box--1x1  { aspect-ratio: 1;    border-color: var(--owl-gold); }
  &.aspect-box--16x9 { aspect-ratio: 16/9; border-color: #4577e8; }
  &.aspect-box--4x3  { aspect-ratio: 4/3;  border-color: #45c6e8; }
  &.aspect-box--3x4  { aspect-ratio: 3/4;  border-color: #45e88a; }
}

/* ============================================================
   09 scroll-timeline
   ============================================================ */
.scroll-demo-track {
  height: 8px;
  background: var(--surface-hi);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 1rem;
}

@keyframes bar-local {
  from { width: 0%; }
  to   { width: 100%; }
}

.scroll-demo-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--owl-gold), #4577e8);
  border-radius: 99px;
  animation: bar-local linear both;
  animation-timeline: scroll(root block);
}

.scroll-demo-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
}

/* ============================================================
   10 :is()
   ============================================================ */
.is-demo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

:is(.is-btn, .is-link, .is-chip) {
  color: var(--owl-gold);
  border: 1px solid currentColor;
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.85rem;
  font-size: 0.85rem;
  font-family: var(--font-body);
  text-decoration: none;
  background: transparent;
  transition: background 0.18s, color 0.18s;
  cursor: pointer;

  &:hover {
    background: var(--owl-gold);
    color: #0d1117;
  }
}

.is-other {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-style: italic;
  padding: 0.4rem;
}

/* ============================================================
   11 accent-color
   ============================================================ */
:root { accent-color: var(--owl-gold); }

.accent-group {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;

  & label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
    cursor: pointer;
  }

  & input[type="range"] {
    flex: 1;
    max-width: 200px;
  }
}

/* ============================================================
   12 anchor()
   ============================================================ */
.anchor-scene {
  display: flex;
  justify-content: center;
  padding: 2.5rem 1rem;
  position: relative;
}

.anchor-trigger {
  padding: 0.55rem 1.3rem;
  background: var(--surface-hi);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  anchor-name: --anchor-btn;
  transition: border-color 0.18s, color 0.18s;

  &:hover,
  &:focus {
    border-color: var(--owl-gold);
    color: var(--owl-gold);
    outline: none;
  }
}

.anchor-tooltip {
  position: fixed;
  position-anchor: --anchor-btn;
  inset-block-start: anchor(bottom);
  inset-inline-start: anchor(center);
  translate: -50% 0.5rem;
  background: var(--surface-hi);
  border: 1px solid var(--owl-gold);
  color: var(--text);
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  white-space: nowrap;
  z-index: 10;
}

@supports not (anchor-name: --x) {
  .anchor-tooltip { display: none; }

  .anchor-trigger:hover ~ .anchor-tooltip,
  .anchor-trigger:focus ~ .anchor-tooltip {
    display: block;
    position: absolute;
    top: calc(50% + 2.5rem);
    left: 50%;
    transform: translateX(-50%);
  }
}

.anchor-note {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-muted);
  text-align: center;
  margin-top: 0.5rem;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 600px) {
  .demo-has,
  .demo-textwrap,
  .demo-container { grid-template-columns: 1fr; }

  .subgrid-parent { grid-template-columns: 1fr; }
  .aspect-grid    { grid-template-columns: repeat(2, 1fr); }
  .dvh-compare    { gap: 1.5rem; }
}