/* ===========================
   Stewart Countdown — Slim Styles (responsive + square)
   =========================== */

:host{
  /* Colors (override via bg/color attributes) */
  --sc-bg: #0c0c0c;
  --sc-fg: #ffffff;
  --sc-muted: #b9b9b9;

  /* Sizing & layout */
  --sc-radius: 16px;
  --sc-gap: 14px;
  --sc-padding-y: 14px;
  --sc-padding-x: 16px;

  /* Make digits scale down more on narrow screens */
  /* was: clamp(28px, 5vw, 46px) */
  --sc-digit-size: clamp(22px, 8vw, 46px);
  --sc-unit-size: 11px;

  /* Typography & effects */
  --sc-font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --sc-shadow: 0 8px 28px rgba(0,0,0,.22);
  --sc-divider-opacity: .5;
}

/* Container card */
.sc-container{
  display: inline-flex;
  align-items: center;
  gap: var(--sc-gap);
  padding: var(--sc-padding-y) var(--sc-padding-x);
  border-radius: var(--sc-radius);
  background: var(--sc-bg);
  color: var(--sc-fg);
  font-family: var(--sc-font);
  box-shadow: var(--sc-shadow);
  border: 1px solid rgba(255,255,255,0.12);

  /* Prevent overflow inside narrow iframes */
  max-width: 100%;
  box-sizing: border-box;
}

/* Label pill */
.sc-label{
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .2px;
  color: var(--sc-muted);
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  white-space: nowrap;
}

/* Hide label completely when there's no text */
.sc-label:empty { display: none; }

/* Digits wrapper: vertical by default to avoid cropping on narrow iframes */
.sc-center{
  display: grid;
  grid-auto-flow: row;
  align-items: center;
  justify-items: center;
  gap: calc(var(--sc-gap) * 1.6);
}

/* Force layout when attribute is present */
:host([layout="horizontal"]) .sc-center{
  /* Use grid so we can wrap gracefully later */
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(4, minmax(0, auto));
  align-items: center;
  justify-items: center;
  gap: calc(var(--sc-gap) * 2);
}
:host([layout="vertical"]) .sc-center{ grid-auto-flow: row; }

/* If no layout attribute, go horizontal when there's room */
@media (min-width: 560px){
  :host(:not([layout])) .sc-center{
    grid-auto-flow: column;
    gap: calc(var(--sc-gap) * 2);
  }
}

/* Unit group */
.sc-group{
  display: grid;
  place-items: center;
  /* slightly smaller so it fits earlier on small screens (was 64px) */
  min-width: 56px;
}

/* Numbers + unit */
.sc-value{
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: var(--sc-digit-size);
  line-height: 1;
  letter-spacing: .3px;
  min-width: 2.2ch;
  text-align: center;
}
.sc-unit{
  font-size: var(--sc-unit-size);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--sc-muted);
  margin-top: 6px;
}

/* Divider */
.sc-divider{
  opacity: var(--sc-divider-opacity);
  font-weight: 700;
  padding: 0 4px;
  user-select: none;
}

/* Finished text */
.sc-finished{
  color: var(--sc-fg);
  font-weight: 700;
  font-size: clamp(16px, 3.5vw, 20px);
  white-space: nowrap;
}

/* Inline layout removes card chrome */
:host([layout="inline"]) .sc-container{
  background: transparent;
  box-shadow: none;
  border: 0;
  padding: 0;
}

/* --- Better small-screen behavior --- */

/* Below ~520px, make horizontal layout wrap into two rows to avoid overflow */
@media (max-width: 520px){
  :host([layout="horizontal"]) .sc-center{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--sc-gap);
    column-gap: calc(var(--sc-gap) * 1.3);
  }
  /* Hide colon dividers when wrapping into grid */
  :host([layout="horizontal"]) .sc-divider{ display: none; }
}

/* Small screens general tweaks */
@media (max-width: 420px){
  :host{
    --sc-gap: 10px;
    --sc-padding-x: 12px;
    --sc-padding-y: 12px;
    /* allow digits to shrink a bit more */
    --sc-digit-size: clamp(20px, 9vw, 42px);
    --sc-unit-size: 10px;
  }
  .sc-group{ min-width: 48px; }
}

/* Very narrow screens */
@media (max-width: 360px){
  :host{
    --sc-gap: 8px;
    --sc-padding-x: 10px;
    --sc-padding-y: 10px;
    --sc-digit-size: clamp(18px, 10vw, 40px);
    --sc-unit-size: 10px;
  }
  .sc-group{ min-width: 44px; }
}

/* --- Square layout: 2x2 grid --- */
:host([layout="square"]) .sc-center{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, auto);
  gap: var(--sc-gap);
  justify-items: center;
  align-items: center;
}
:host([layout="square"]) .sc-divider{ display: none; }