@import url("../tokens/fonts.css");

/* ==========================================================================
   Azulejo — glazed Portuguese tiles.
   Cobalt on whitewash, grout as structure, a glint that crosses the glaze.
   Colours, spacing, radii and shadows come from tokens.css; motion lives here.
   Rules: transform/opacity only for movement; entrance animations fill
   BACKWARDS; box-shadow changes only on one element's hover/active/state.
   ========================================================================== */

:root {
  /* easings */
  --az-glaze: cubic-bezier(.22, .61, .36, 1);        /* the glint: fast start, long glide */
  --az-set: cubic-bezier(.34, 1.36, .54, 1);         /* a tile settling into mortar: small overshoot */
  --az-press: cubic-bezier(.4, 0, .6, 1);            /* pressing into grout: firm, no bounce */
  --az-flip: cubic-bezier(.5, .05, .22, 1);          /* turning a tile over in the hand */
  --az-turn: cubic-bezier(.65, 0, .25, 1);           /* the kaleidoscope's quarter turn */
  --az-out: cubic-bezier(.5, 0, .75, 0);             /* exits */
  /* durations */
  --az-t-press: 110ms;
  --az-t-hover: 200ms;
  --az-t-set: 380ms;
  --az-t-glint: 720ms;
  --az-t-flip: 680ms;
  --az-t-turn: 900ms;
  --az-step: 55ms;                                    /* cascade stagger per diagonal */
  /* static glaze shading laid over pigment fills */
  --az-glazing: linear-gradient(160deg, rgba(255, 255, 255, .24) 0%, rgba(255, 255, 255, 0) 44%, rgba(0, 0, 0, .07) 100%);
  --az-glazing-soft: linear-gradient(165deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 50%, rgba(19, 35, 75, .035) 100%);
  --az-line: 1.5px;
}
[data-theme="dark"] {
  --az-glazing-soft: linear-gradient(165deg, rgba(196, 216, 255, .07) 0%, rgba(196, 216, 255, 0) 50%, rgba(0, 0, 0, .12) 100%);
}

/* ---------- base ---------- */
html { background: var(--page); color: var(--ink); }
body { margin: 0; background: var(--page); color: var(--ink); font-family: var(--font-body); font-size: 15px; line-height: 24px; -webkit-font-smoothing: antialiased; }
.az-stage { box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); padding: var(--space-6); }
.az-stage--col { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; justify-items: start; }
.az-stage--col > * { max-width: 100%; }
.az-stage--col > .az-mosaic, .az-stage--col > .az-tabs, .az-stage--col > .az-progress, .az-stage--col > .pp-grid, .az-stage--col > .az-toasts { justify-self: stretch; }
.az-overline, .az-label { font: 600 12px/16px var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.az-overline { width: 100%; margin-top: var(--space-2); }
.az-d { font-family: var(--font-display); font-weight: 400; color: var(--ink); margin: 0; }
.az-d em { font-style: italic; color: var(--cobalt-ink); }
.az-display { font: 400 64px/66px var(--font-display); letter-spacing: -.01em; }
.az-title { font: 400 40px/44px var(--font-display); }
.az-heading { font: 400 24px/30px var(--font-display); }
.az-numeral { font: 400 36px/40px var(--font-display); font-variant-numeric: lining-nums; }
.az-lead { font-size: 18px; line-height: 28px; color: var(--ink-soft); margin: 0; }
.az-small { font-size: 13px; line-height: 18px; color: var(--ink-soft); }
.az-muted { color: var(--ink-soft); }
.az-link { color: var(--cobalt-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.az-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.az-icon { width: 20px; height: 20px; flex: none; display: block; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.az-wall {
  background-color: var(--page);
  background-image:
    linear-gradient(var(--grout) 1px, transparent 1px),
    linear-gradient(90deg, var(--grout) 1px, transparent 1px);
  background-size: 96px 96px;
  background-position: -1px -1px;
}
.az-wall--quiet { background-image: linear-gradient(rgba(127, 127, 127, .09) 1px, transparent 1px), linear-gradient(90deg, rgba(127, 127, 127, .09) 1px, transparent 1px); }
:where([class*="az-"]):focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* ---------- the glint: a static band moved by transform ---------- */
.az-sheen { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 1; }
.az-sheen::before {
  content: ""; position: absolute; top: -30%; bottom: -30%; left: 0; width: 55%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 10%, var(--sheen) 46%, rgba(255, 255, 255, 0) 80%);
  transform: translateX(-140%) skewX(-16deg);
}
:hover > .az-sheen::before, .az-glint > .az-sheen::before { transform: translateX(260%) skewX(-16deg); transition: transform var(--az-t-glint) var(--az-glaze); }

/* ---------- Button: a glazed tile set in grout ---------- */
.az-btn {
  --az-bg: var(--cobalt); --az-fg: var(--on-cobalt); --az-edge: var(--cobalt-deep); --az-bed: var(--grout);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  box-sizing: border-box; height: 44px; padding: 0 var(--space-6); margin: 4px 4px 7px;
  border: 0; border-radius: var(--radius-tile);
  background-color: var(--az-bg); background-image: var(--az-glazing); color: var(--az-fg);
  font: 600 15px/1 var(--font-body); letter-spacing: .01em; white-space: nowrap; text-decoration: none; cursor: pointer;
  box-shadow: inset 0 1px 0 var(--sheen), 0 3px 0 0 var(--az-edge), 0 1.5px 0 4.5px var(--az-bed);
  transition: transform var(--az-t-press) var(--az-press), box-shadow var(--az-t-press) var(--az-press);
  -webkit-tap-highlight-color: transparent; user-select: none;
}
.az-btn > :not(.az-sheen) { position: relative; z-index: 2; }
.az-btn:hover { box-shadow: inset 0 1px 0 var(--sheen), 0 3px 0 0 var(--az-edge), 0 1.5px 0 4.5px var(--az-bed), 0 10px 18px -12px var(--az-edge); }
.az-btn:active:not(:disabled), .az-btn.is-pressed {
  transform: translateY(3px);
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, .18), 0 0 0 0 var(--az-edge), 0 -1.5px 0 4.5px var(--az-bed);
}
.az-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 7px; }
.az-btn--secondary { --az-bg: var(--glaze); --az-fg: var(--cobalt-ink); --az-edge: var(--ink-soft); background-image: var(--az-glazing-soft); }
.az-btn--accent { --az-bg: var(--sunflower); --az-fg: var(--on-sunflower); --az-edge: #b07d12; }
.az-btn--danger { --az-bg: var(--terracotta); --az-fg: var(--on-pigment); --az-edge: #7a3519; }
.az-btn--sea { --az-bg: var(--sea); --az-fg: var(--on-pigment); --az-edge: #12503f; }
[data-theme="dark"] .az-btn--danger { --az-edge: #9a4a26; }
[data-theme="dark"] .az-btn--sea { --az-edge: #23735f; }
.az-btn--ghost { --az-fg: var(--cobalt-ink); background: transparent; box-shadow: none; margin: 0; }
.az-btn--ghost:hover { background: var(--cobalt-tint); box-shadow: none; }
.az-btn--ghost:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
.az-btn--ghost:focus-visible { outline-offset: 2px; }
.az-btn--sm { height: 34px; padding: 0 var(--space-4); font-size: 13px; }
.az-btn--lg { height: 54px; padding: 0 var(--space-8); font-size: 17px; }
.az-btn--block { display: flex; width: calc(100% - 8px); }
.az-btn--ghost.az-btn--block { width: 100%; }
.az-btn .az-icon { width: 18px; height: 18px; }
.az-btn:disabled, .az-btn[aria-disabled="true"] {
  --az-bg: var(--glaze-sunk); --az-fg: var(--ink-soft); --az-edge: var(--grout);
  background-image: none; cursor: not-allowed; box-shadow: 0 1px 0 0 var(--az-edge), 0 1.5px 0 4.5px var(--az-bed); opacity: .85;
}
.az-btn:disabled > .az-sheen { display: none; }
.az-btn.is-loading { cursor: progress; }
.az-btn.is-loading .az-btn__label, .az-btn.is-loading > .az-icon { opacity: 0; }
.az-spin { position: absolute !important; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; animation: az-spin 1.1s steps(4, end) infinite; }
.az-spin i { border-radius: 1px; background: currentColor; opacity: .95; }
.az-spin i:nth-child(2), .az-spin i:nth-child(3) { opacity: .4; }
@keyframes az-spin { to { transform: rotate(360deg); } }

/* ---------- IconButton ---------- */
.az-iconbtn {
  --az-bg: var(--glaze); --az-fg: var(--cobalt-ink); --az-edge: var(--ink-soft); --az-bed: var(--grout);
  position: relative; display: inline-grid; place-items: center; box-sizing: border-box; width: 42px; height: 42px; margin: 4px 4px 7px; padding: 0;
  border: 0; border-radius: var(--radius-tile); background-color: var(--az-bg); background-image: var(--az-glazing-soft); color: var(--az-fg); cursor: pointer;
  box-shadow: inset 0 1px 0 var(--sheen), 0 3px 0 0 var(--az-edge), 0 1.5px 0 4.5px var(--az-bed);
  transition: transform var(--az-t-press) var(--az-press), box-shadow var(--az-t-press) var(--az-press);
  -webkit-tap-highlight-color: transparent;
}
.az-iconbtn > .az-icon { position: relative; z-index: 2; transition: transform var(--az-t-set) var(--az-set); }
.az-iconbtn:hover > .az-icon { transform: rotate(-8deg) scale(1.06); }
.az-iconbtn:active:not(:disabled) { transform: translateY(3px); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .14), 0 0 0 0 var(--az-edge), 0 -1.5px 0 4.5px var(--az-bed); }
.az-iconbtn:focus-visible { outline: 2px solid var(--focus); outline-offset: 7px; }
.az-iconbtn--primary { --az-bg: var(--cobalt); --az-fg: var(--on-cobalt); --az-edge: var(--cobalt-deep); background-image: var(--az-glazing); }
.az-iconbtn--ghost { background: transparent; box-shadow: none; margin: 0; }
.az-iconbtn--ghost:hover { background: var(--cobalt-tint); }
.az-iconbtn--ghost:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
.az-iconbtn--ghost:focus-visible { outline-offset: 2px; }
.az-iconbtn--sm { width: 34px; height: 34px; }
.az-iconbtn--sm .az-icon { width: 17px; height: 17px; }
.az-iconbtn[aria-pressed="true"] { --az-bg: var(--cobalt); --az-fg: var(--on-cobalt); --az-edge: var(--cobalt-deep); background-image: var(--az-glazing); }
.az-iconbtn[aria-pressed="true"] > .az-icon { animation: az-turn-in var(--az-t-set) var(--az-set) backwards; }
.az-iconbtn--ghost[aria-pressed="true"] { box-shadow: none; }
.az-iconbtn:disabled { --az-bg: var(--glaze-sunk); --az-fg: var(--ink-soft); --az-edge: var(--grout); cursor: not-allowed; opacity: .8; }
.az-iconbtn__count { position: absolute; z-index: 3; top: -7px; right: -7px; min-width: 18px; height: 18px; padding: 0 4px; box-sizing: border-box; border-radius: var(--radius-chip); background: var(--terracotta); color: var(--on-pigment); font: 700 11px/18px var(--font-body); text-align: center; box-shadow: 0 0 0 2px var(--page); }
@keyframes az-turn-in { from { transform: rotate(-90deg) scale(.6); } }

/* ---------- Toggle: a tile slider ---------- */
.az-toggle { display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer; color: var(--ink); font-size: 15px; -webkit-tap-highlight-color: transparent; }
.az-toggle__input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.az-toggle__track {
  position: relative; flex: none; width: 58px; height: 32px; box-sizing: border-box; border-radius: var(--radius-tile);
  background: var(--glaze-sunk); box-shadow: var(--shadow-well), 0 0 0 var(--az-line) var(--ink-soft);
  transition: background-color var(--az-t-hover) linear;
}
.az-toggle__track::before { /* the grout seam between the two tile slots */
  content: ""; position: absolute; left: 50%; top: 6px; bottom: 6px; width: 1.5px; margin-left: -.75px; background: var(--grout); border-radius: 1px;
}
.az-toggle__knob {
  position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; box-sizing: border-box; border-radius: 4px; overflow: hidden;
  background: var(--glaze); box-shadow: inset 0 1px 0 var(--sheen), 0 2px 0 var(--ink-soft), 0 3px 6px -2px rgba(0, 0, 0, .3);
  transition: transform var(--az-t-set) var(--az-set);
}
.az-toggle__knob svg { display: block; width: 100%; height: 100%; transition: transform var(--az-t-turn) var(--az-turn); }
.az-toggle__knob .k { fill: var(--ink-soft); } .az-toggle__knob .a { fill: var(--grout); }
.az-toggle__input:checked + .az-toggle__track { background: var(--cobalt-tint); box-shadow: var(--shadow-well), 0 0 0 var(--az-line) var(--cobalt); }
.az-toggle__input:checked + .az-toggle__track .az-toggle__knob { transform: translateX(26px); background: var(--cobalt); box-shadow: inset 0 1px 0 var(--sheen), 0 2px 0 var(--cobalt-deep), 0 3px 6px -2px rgba(0, 0, 0, .35); }
.az-toggle__input:checked + .az-toggle__track .az-toggle__knob svg { transform: rotate(180deg); }
.az-toggle__input:checked + .az-toggle__track .k { fill: var(--on-cobalt); }
.az-toggle__input:checked + .az-toggle__track .a { fill: var(--sunflower); }
.az-toggle:active .az-toggle__knob { transition-duration: var(--az-t-press); }
.az-toggle__input:focus-visible + .az-toggle__track { outline: 2px solid var(--focus); outline-offset: 4px; }
.az-toggle__input:disabled + .az-toggle__track { opacity: .5; }
.az-toggle.is-disabled { cursor: not-allowed; color: var(--ink-soft); }
.az-toggle__text { display: flex; flex-direction: column; }
.az-toggle__hint { font-size: 13px; line-height: 18px; color: var(--ink-soft); }

/* ---------- Checkbox: a tile that turns over ---------- */
.az-check, .az-radio { position: relative; display: inline-flex; align-items: flex-start; gap: var(--space-3); cursor: pointer; color: var(--ink); font-size: 15px; line-height: 22px; -webkit-tap-highlight-color: transparent; }
.az-check input, .az-radio input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.az-check__tile { position: relative; flex: none; width: 22px; height: 22px; perspective: 120px; }
.az-check__face { position: absolute; inset: 0; border-radius: var(--radius-chip); backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform 460ms var(--az-flip); }
.az-check__front { background: var(--glaze); box-shadow: inset 0 0 0 var(--az-line) var(--ink-soft), inset 0 2px 2px rgba(0, 0, 0, .06); }
.az-check__back { display: grid; place-items: center; background-color: var(--cobalt); background-image: var(--az-glazing); color: var(--on-cobalt); box-shadow: inset 0 1px 0 var(--sheen), 0 2px 0 var(--cobalt-deep); transform: rotateY(-180deg); }
.az-check__back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.az-check input:checked + .az-check__tile .az-check__front { transform: rotateY(180deg); }
.az-check input:checked + .az-check__tile .az-check__back { transform: rotateY(0deg); }
.az-check input:indeterminate + .az-check__tile .az-check__front { transform: rotateY(180deg); }
.az-check input:indeterminate + .az-check__tile .az-check__back { transform: rotateY(0deg); }
.az-check:hover .az-check__front { box-shadow: inset 0 0 0 var(--az-line) var(--cobalt-ink), inset 0 2px 2px rgba(0, 0, 0, .06); }
.az-check input:focus-visible + .az-check__tile, .az-radio input:focus-visible + .az-radio__dot { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--radius-chip); }
.az-check input:disabled + .az-check__tile, .az-radio input:disabled + .az-radio__dot { opacity: .5; }
.az-check.is-disabled, .az-radio.is-disabled { cursor: not-allowed; color: var(--ink-soft); }
.az-choice__text { display: flex; flex-direction: column; }
.az-choice__hint { font-size: 13px; line-height: 18px; color: var(--ink-soft); }

/* ---------- Radio: a medallion with a rosette ---------- */
.az-radio__dot { position: relative; flex: none; width: 22px; height: 22px; box-sizing: border-box; border-radius: 50%; background: var(--glaze); box-shadow: inset 0 0 0 var(--az-line) var(--ink-soft); display: grid; place-items: center; transition: box-shadow var(--az-t-hover) linear; }
.az-radio__dot svg { width: 16px; height: 16px; transform: scale(0) rotate(-90deg); transition: transform var(--az-t-set) var(--az-set); }
.az-radio__dot .k { fill: var(--cobalt); } .az-radio__dot .a { fill: var(--sunflower); }
.az-radio:hover .az-radio__dot { box-shadow: inset 0 0 0 var(--az-line) var(--cobalt-ink); }
.az-radio input:checked + .az-radio__dot { box-shadow: inset 0 0 0 2px var(--cobalt); }
.az-radio input:checked + .az-radio__dot svg { transform: scale(1) rotate(0deg); }
.az-radio input:focus-visible + .az-radio__dot { border-radius: 50%; }
.az-radiogroup { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.az-radiogroup--row { flex-direction: row; flex-wrap: wrap; gap: var(--space-4) var(--space-6); }
.az-radiogroup legend { padding: 0; margin-bottom: var(--space-3); }

/* ---------- TextField ---------- */
.az-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.az-field__label { font: 600 12px/16px var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.az-field__box {
  position: relative; display: flex; align-items: center; gap: var(--space-2); height: 46px; box-sizing: border-box; padding: 0 var(--space-4);
  border-radius: var(--radius-tile); background: var(--glaze); overflow: hidden;
  box-shadow: inset 0 0 0 var(--az-line) var(--ink-soft), inset 0 2px 3px rgba(19, 35, 75, .06);
  transition: box-shadow var(--az-t-hover) linear; color: var(--ink-soft);
}
.az-field__box:hover { box-shadow: inset 0 0 0 var(--az-line) var(--ink), inset 0 2px 3px rgba(19, 35, 75, .06); }
.az-field__box:focus-within { box-shadow: inset 0 0 0 2px var(--cobalt-ink), 0 0 0 4px var(--cobalt-tint); color: var(--cobalt-ink); }
.az-field__input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font: 400 15px/1 var(--font-body); padding: 0; }
.az-field__input::placeholder { color: var(--ink-soft); opacity: .85; }
textarea.az-field__input { height: auto; min-height: 92px; padding: 12px 0; line-height: 22px; resize: vertical; }
.az-field__box--area { height: auto; align-items: stretch; }
.az-field__band { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; transform: scaleX(0); transform-origin: left; transition: transform 420ms var(--az-glaze); pointer-events: none; }
.az-field__box:focus-within .az-field__band { transform: scaleX(1); }
.az-field__band svg { display: block; width: 100%; height: 4px; }
.az-field__suffix { color: var(--ink-soft); font-size: 13px; }
.az-field__msg { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; line-height: 18px; color: var(--ink-soft); }
.az-field__msg .az-icon { width: 16px; height: 16px; margin-top: 1px; }
.az-field.is-invalid .az-field__box { box-shadow: inset 0 0 0 2px var(--terracotta); }
.az-field.is-invalid .az-field__box:focus-within { box-shadow: inset 0 0 0 2px var(--terracotta), 0 0 0 4px var(--glaze-sunk); }
.az-field.is-invalid .az-field__msg { color: var(--terracotta); font-weight: 500; }
.az-field.is-invalid .az-field__box { animation: az-nudge 360ms var(--az-press); }
.az-field.is-disabled .az-field__box { background: var(--glaze-sunk); opacity: .7; }
@keyframes az-nudge { 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-2px); } 80% { transform: translateX(1px); } }

/* ---------- Select (listbox menu) ---------- */
.az-select { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.az-select__btn {
  display: flex; align-items: center; gap: var(--space-2); height: 46px; box-sizing: border-box; width: 100%; padding: 0 var(--space-3) 0 var(--space-4);
  border: 0; border-radius: var(--radius-tile); background: var(--glaze); color: var(--ink); font: 400 15px/1 var(--font-body); text-align: left; cursor: pointer;
  box-shadow: inset 0 0 0 var(--az-line) var(--ink-soft), inset 0 -3px 0 var(--glaze-sunk);
}
.az-select__btn:hover { box-shadow: inset 0 0 0 var(--az-line) var(--ink), inset 0 -3px 0 var(--glaze-sunk); }
.az-select__btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.az-select__value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.az-select__value.is-placeholder { color: var(--ink-soft); }
.az-select__btn > .az-icon { color: var(--cobalt-ink); transition: transform var(--az-t-set) var(--az-set); }
.az-select.is-open .az-select__btn > .az-icon { transform: rotate(180deg); }
.az-select__menu {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; box-sizing: border-box; max-height: 280px; overflow: auto;
  border-radius: var(--radius-tile); background: var(--glaze); box-shadow: inset 0 0 0 1px var(--grout), var(--shadow-lift);
  transform-origin: top center; opacity: 0; transform: translateY(-6px) scaleY(.96); visibility: hidden;
  transition: opacity 160ms linear, transform 220ms var(--az-set), visibility 0s linear 220ms;
}
.az-select.is-open .az-select__menu { opacity: 1; transform: none; visibility: visible; transition: opacity 120ms linear, transform 260ms var(--az-set), visibility 0s; }
.az-select.is-up .az-select__menu { top: auto; bottom: calc(100% + 6px); transform-origin: bottom center; }
.az-option { display: flex; align-items: center; gap: var(--space-3); padding: 9px var(--space-3); border-radius: 4px; cursor: pointer; color: var(--ink); }
.az-select.is-open .az-option { animation: az-rise 260ms var(--az-set) backwards; animation-delay: calc(var(--i, 0) * 28ms); }
.az-option.is-active { background: var(--cobalt-tint); }
.az-option__swatch { flex: none; width: 22px; height: 22px; border-radius: var(--radius-chip); overflow: hidden; box-shadow: 0 0 0 1px var(--grout); }
.az-option__swatch svg { display: block; width: 100%; height: 100%; }
.az-option__text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 20px; }
.az-option__hint { font-size: 13px; line-height: 18px; color: var(--ink-soft); }
.az-option__check { width: 16px; height: 16px; color: var(--cobalt-ink); opacity: 0; transform: scale(.4) rotate(-45deg); transition: transform var(--az-t-set) var(--az-set), opacity 120ms linear; }
.az-option[aria-selected="true"] .az-option__check { opacity: 1; transform: none; }
.az-option[aria-selected="true"] { font-weight: 600; }
@keyframes az-rise { from { opacity: 0; transform: translateY(6px); } }

/* ---------- Tabs: a running border of tiles under the active tab ---------- */
.az-tabs { min-width: 0; }
.az-tabs__list { position: relative; display: flex; gap: var(--space-1); overflow-x: auto; scrollbar-width: none; box-shadow: inset 0 -1.5px 0 var(--grout); }
.az-tabs__list::-webkit-scrollbar { display: none; }
.az-tab {
  position: relative; flex: none; display: inline-flex; align-items: center; gap: var(--space-2); height: 46px; padding: 0 var(--space-4); border: 0; background: transparent;
  color: var(--ink-soft); font: 500 15px/1 var(--font-body); cursor: pointer; border-radius: var(--radius-tile) var(--radius-tile) 0 0;
}
.az-tab:hover { color: var(--ink); background: var(--cobalt-tint); }
.az-tab[aria-selected="true"] { color: var(--cobalt-ink); font-weight: 600; background: transparent; }
.az-tab:focus-visible { outline: 2px solid var(--focus); outline-offset: -3px; }
.az-tab .az-icon { width: 18px; height: 18px; }
.az-tab__count { font-size: 12px; font-weight: 600; padding: 1px 6px; border-radius: var(--radius-chip); background: var(--glaze-sunk); color: var(--ink-soft); }
.az-tab[aria-selected="true"] .az-tab__count { background: var(--cobalt); color: var(--on-cobalt); }
.az-tabs__ink { position: absolute; left: 0; bottom: 0; height: 6px; width: 100px; transform-origin: left; overflow: hidden; border-radius: 1px; pointer-events: none; transition: transform 460ms var(--az-set); }
.az-tabs__ink svg { display: block; height: 6px; width: 1200px; }
.az-tabs__ink .k { fill: var(--cobalt-deep); } .az-tabs__ink .k2 { fill: var(--cobalt); } .az-tabs__ink .a { fill: var(--sunflower); } .az-tabs__ink .g2 { fill: var(--glaze); opacity: .85; }
.az-tabs__panel { padding-top: var(--space-4); }
.az-tabs__panel[hidden] { display: none; }
.az-tabs__panel.is-entering { animation: az-rise 320ms var(--az-set) backwards; }

/* ---------- SegmentedControl: a tile sliding along a grout tray ---------- */
.az-seg { position: relative; display: inline-flex; padding: 4px; border-radius: calc(var(--radius-tile) + 3px); background: var(--glaze-sunk); box-shadow: var(--shadow-well), 0 0 0 1px var(--grout); max-width: 100%; box-sizing: border-box; }
.az-seg--block { display: flex; }
.az-seg__thumb { position: absolute; top: 4px; bottom: 4px; left: 0; width: 10px; border-radius: var(--radius-tile); background-color: var(--glaze); background-image: var(--az-glazing-soft); box-shadow: inset 0 1px 0 var(--sheen), 0 2px 0 var(--grout), 0 3px 8px -3px rgba(0, 0, 0, .25); transform-origin: left; transition: transform 420ms var(--az-set); overflow: hidden; }
.az-seg__thumb::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 14px; height: 3px; margin-left: -7px; border-radius: 2px; background: var(--cobalt); }
.az-seg__opt { position: relative; z-index: 1; flex: 1 1 0; min-width: 0; height: 36px; padding: 0 var(--space-4); border: 0; background: transparent; color: var(--ink-soft); font: 500 14px/1 var(--font-body); cursor: pointer; white-space: nowrap; border-radius: var(--radius-tile); display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: color var(--az-t-hover) linear; }
.az-seg__opt:hover { color: var(--ink); }
.az-seg__opt[aria-checked="true"] { color: var(--ink); font-weight: 600; }
.az-seg__opt:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.az-seg__opt .az-icon { width: 16px; height: 16px; }
.az-seg--sm .az-seg__opt { height: 30px; font-size: 13px; padding: 0 var(--space-3); }

/* ---------- Slider: a row of tiles and a turning tile thumb ---------- */
.az-slider { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.az-slider__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.az-slider__value { font: 400 20px/1 var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.az-slider__rail { position: relative; height: 34px; touch-action: none; }
.az-slider__tiles { position: absolute; left: 0; right: 0; top: 9px; height: 16px; display: flex; gap: var(--space-grout); }
.az-slider__tiles i { flex: 1; border-radius: 2px; background: var(--glaze-sunk); box-shadow: var(--shadow-well), 0 0 0 1px var(--grout); transition: background-color 160ms linear; }
.az-slider__tiles i.is-on { background-color: var(--cobalt); background-image: var(--az-glazing); box-shadow: inset 0 1px 0 var(--sheen), 0 1px 0 var(--cobalt-deep); }
.az-slider__tiles i.is-on:nth-child(4n+3) { background-color: var(--cobalt-deep); }
.az-slider__thumb { position: absolute; top: 3px; left: 0; width: 28px; height: 28px; margin-left: -14px; border-radius: 5px; overflow: hidden; background: var(--glaze); box-shadow: inset 0 1px 0 var(--sheen), 0 2px 0 var(--ink-soft), 0 4px 10px -3px rgba(0, 0, 0, .35); pointer-events: none; transition: transform 140ms var(--az-press); }
.az-slider__thumb svg { display: block; width: 100%; height: 100%; }
.az-slider__thumb .k { fill: var(--cobalt); } .az-slider__thumb .a { fill: var(--sunflower); } .az-slider__thumb .g { fill: var(--glaze); }
.az-slider__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: grab; }
.az-slider__input:active { cursor: grabbing; }
.az-slider__input:focus-visible + .az-slider__thumb { outline: 2px solid var(--focus); outline-offset: 3px; }
.az-slider__rail:hover .az-slider__thumb, .az-slider__rail:active .az-slider__thumb { box-shadow: inset 0 1px 0 var(--sheen), 0 2px 0 var(--cobalt-deep), 0 6px 14px -4px rgba(0, 0, 0, .4); }
.az-slider__scale { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-soft); }

/* ---------- Card: a glazed panel ---------- */
.az-card { position: relative; box-sizing: border-box; display: flex; flex-direction: column; min-width: 0; border-radius: var(--radius-tile); background-color: var(--glaze); background-image: var(--az-glazing-soft); box-shadow: inset 0 0 0 1px var(--grout), var(--shadow-tile); color: var(--ink); }
.az-card__band { position: relative; height: 72px; flex: none; border-radius: var(--radius-tile) var(--radius-tile) 0 0; overflow: hidden; box-shadow: 0 1px 0 var(--grout); }
.az-card__band .az-pattern { position: absolute; inset: 0; }
.az-card__body { position: relative; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); flex: 1; }
.az-card__eyebrow { margin: 0; }
.az-card__title { margin: 0; font: 400 24px/30px var(--font-display); color: var(--ink); }
.az-card__text { margin: 0; color: var(--ink-soft); }
.az-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: auto; padding-top: var(--space-2); }
.az-card--interactive { cursor: pointer; transition: transform var(--az-t-set) var(--az-set), box-shadow var(--az-t-hover) linear; }
.az-card--interactive::after { content: ""; position: absolute; z-index: -1; left: 0; top: 0; right: -6px; bottom: -8px; }
.az-card--interactive:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--grout), var(--shadow-lift); }
.az-card--interactive:active { transform: translateY(0); transition-duration: var(--az-t-press); }
.az-card--interactive:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.az-card--sunk { background: var(--glaze-sunk); box-shadow: var(--shadow-well), inset 0 0 0 1px var(--grout); }
.az-card--cobalt { background-color: var(--cobalt); background-image: var(--az-glazing); color: var(--on-cobalt); box-shadow: inset 0 1px 0 var(--sheen), 0 3px 0 var(--cobalt-deep), var(--shadow-tile); }
.az-card--cobalt .az-card__title, .az-card--cobalt .az-card__text, .az-card--cobalt .az-label { color: var(--on-cobalt); }
.az-card--pad-sm .az-card__body { padding: var(--space-4); }
.az-card.is-entering { animation: az-set var(--az-t-set) var(--az-set) backwards; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes az-set { from { opacity: 0; transform: translateY(14px) scale(.985); } }

/* ---------- Badge / Tag ---------- */
.az-badge { --az-bg: var(--glaze-sunk); --az-fg: var(--ink); display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; box-sizing: border-box; border-radius: var(--radius-chip); background-color: var(--az-bg); color: var(--az-fg); font: 600 12px/1 var(--font-body); letter-spacing: .04em; white-space: nowrap; box-shadow: inset 0 0 0 1px var(--grout); vertical-align: middle; }
.az-badge--cobalt { --az-bg: var(--cobalt); --az-fg: var(--on-cobalt); background-image: var(--az-glazing); box-shadow: inset 0 1px 0 var(--sheen); }
.az-badge--tint { --az-bg: var(--cobalt-tint); --az-fg: var(--ink); box-shadow: none; }
.az-badge--terracotta { --az-bg: var(--terracotta); --az-fg: var(--on-pigment); background-image: var(--az-glazing); box-shadow: inset 0 1px 0 var(--sheen); }
.az-badge--sunflower { --az-bg: var(--sunflower); --az-fg: var(--on-sunflower); background-image: var(--az-glazing); box-shadow: inset 0 1px 0 var(--sheen); }
.az-badge--sea { --az-bg: var(--sea); --az-fg: var(--on-pigment); background-image: var(--az-glazing); box-shadow: inset 0 1px 0 var(--sheen); }
.az-badge--outline { --az-bg: transparent; --az-fg: var(--cobalt-ink); box-shadow: inset 0 0 0 1.5px currentColor; }
.az-badge--lg { height: 30px; padding: 0 12px; font-size: 13px; }
.az-badge svg.az-badge__dot { width: 12px; height: 12px; flex: none; }
.az-badge .az-badge__dot .k { fill: currentColor; } .az-badge .az-badge__dot .a { fill: var(--az-bg); }
.az-badge .az-icon { width: 14px; height: 14px; stroke-width: 2; }
.az-badge__x { display: grid; place-items: center; width: 18px; height: 18px; margin-right: -5px; padding: 0; border: 0; border-radius: 2px; background: transparent; color: inherit; cursor: pointer; }
.az-badge__x:hover { background: rgba(127, 127, 127, .2); }
.az-badge__x .az-icon { width: 12px; height: 12px; }
.az-badge.is-leaving { transition: transform 200ms var(--az-out), opacity 200ms linear; transform: rotate(-12deg) translateY(6px) scale(.8); opacity: 0; }

/* ---------- Avatar ---------- */
.az-avatar { position: relative; flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-tile); color: var(--on-cobalt); font: 400 18px/1 var(--font-display); box-shadow: 0 0 0 2px var(--glaze), 0 0 0 3px var(--grout); }
.az-avatar__art { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; }
.az-avatar__art .az-pattern { position: absolute; inset: 0; }
.az-avatar__initials { position: relative; z-index: 1; display: grid; place-items: center; min-width: 56%; height: 56%; font-size: .9em; padding: 0 2px; box-sizing: border-box; border-radius: 3px; background: var(--cobalt); color: var(--on-cobalt); box-shadow: 0 0 0 1.5px var(--glaze); letter-spacing: .02em; }
.az-avatar--terracotta .az-avatar__initials { background: var(--terracotta); color: var(--on-pigment); }
.az-avatar--sea .az-avatar__initials { background: var(--sea); color: var(--on-pigment); }
.az-avatar--sunflower .az-avatar__initials { background: var(--sunflower); color: var(--on-sunflower); }
.az-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.az-avatar--sm { width: 32px; height: 32px; font-size: 13px; }
.az-avatar--lg { width: 64px; height: 64px; font-size: 24px; }
.az-avatar__status { position: absolute; z-index: 2; right: -4px; bottom: -4px; width: 12px; height: 12px; border-radius: 50%; background: var(--sea); box-shadow: 0 0 0 2.5px var(--glaze); }
.az-avatar__status--away { background: var(--sunflower); }
.az-avatar__status--off { background: var(--ink-soft); }
.az-avatars { display: inline-flex; align-items: center; padding-left: 8px; }
.az-avatars > .az-avatar { margin-left: -8px; transition: transform var(--az-t-set) var(--az-set); }
.az-avatars > .az-avatar:hover { transform: translateY(-4px) rotate(-4deg); z-index: 2; }
.az-avatars__more { position: relative; display: inline-grid; place-items: center; margin-left: -8px; width: 44px; height: 44px; border-radius: var(--radius-tile); background: var(--glaze-sunk); color: var(--ink); font: 600 13px/1 var(--font-body); box-shadow: 0 0 0 2px var(--glaze), 0 0 0 3px var(--grout); }
.az-avatars--sm .az-avatars__more { width: 32px; height: 32px; font-size: 11px; }

/* ---------- Tooltip ---------- */
.az-tipwrap { position: relative; display: inline-flex; }
.az-tip { position: absolute; z-index: 40; left: 50%; bottom: calc(100% + 10px); width: max-content; max-width: 240px; padding: 8px 12px; box-sizing: border-box; border-radius: var(--radius-tile); background-color: var(--ink); color: var(--page); font: 500 13px/18px var(--font-body); pointer-events: none; box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .5);
  opacity: 0; transform: translate(-50%, 6px) rotate(-2deg) scale(.94); transform-origin: 50% 100%; transition: opacity 120ms linear, transform 240ms var(--az-set); }
.az-tip::after { content: ""; position: absolute; left: 50%; top: 100%; width: 10px; height: 10px; margin: -6px 0 0 -5px; background: inherit; transform: rotate(45deg); border-radius: 1px; }
.az-tip--bottom { bottom: auto; top: calc(100% + 10px); transform-origin: 50% 0; transform: translate(-50%, -6px) rotate(2deg) scale(.94); }
.az-tip--bottom::after { top: auto; bottom: 100%; margin: 0 0 -6px -5px; }
.az-tipwrap:hover > .az-tip, .az-tipwrap:focus-within > .az-tip, .az-tipwrap.is-open > .az-tip { opacity: 1; transform: translate(-50%, 0) rotate(0) scale(1); transition-delay: 120ms; }
.az-tip__k { display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: 2px; background: rgba(127, 127, 127, .3); font-size: 11px; }

/* ---------- Toast ---------- */
.az-toasts { position: fixed; z-index: 90; right: var(--space-6); bottom: var(--space-6); display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-3); pointer-events: none; max-width: calc(100vw - 32px); }
.az-toasts--inline { position: static; align-items: stretch; max-width: none; }
.az-toast { pointer-events: auto; position: relative; display: flex; align-items: flex-start; gap: var(--space-3); width: 360px; max-width: 100%; box-sizing: border-box; padding: var(--space-3) var(--space-3) var(--space-4); border-radius: var(--radius-tile); background-color: var(--glaze); background-image: var(--az-glazing-soft); box-shadow: inset 0 0 0 1px var(--grout), var(--shadow-float); color: var(--ink); overflow: hidden; }
.az-toast.is-in { animation: az-toast-in 520ms var(--az-set) backwards; }
.az-toast.is-out { transition: transform 260ms var(--az-out), opacity 240ms linear; transform: translateX(30px) rotate(3deg); opacity: 0; }
@keyframes az-toast-in { from { opacity: 0; transform: translateY(24px) rotateX(55deg) scale(.96); } 60% { opacity: 1; } }
.az-toast__tile { flex: none; position: relative; width: 40px; height: 40px; border-radius: 4px; overflow: hidden; display: grid; place-items: center; box-shadow: 0 2px 0 var(--cobalt-deep); }
.az-toast__tile .az-pattern { position: absolute; inset: 0; }
.az-toast__tile .az-icon { position: relative; z-index: 1; width: 22px; height: 22px; padding: 3px; border-radius: 3px; background: var(--cobalt); color: var(--on-cobalt); stroke-width: 2.2; }
.az-toast--sea .az-toast__tile { box-shadow: 0 2px 0 #12503f; } .az-toast--sea .az-toast__tile .az-icon { background: var(--sea); color: var(--on-pigment); }
.az-toast--terracotta .az-toast__tile { box-shadow: 0 2px 0 #7a3519; } .az-toast--terracotta .az-toast__tile .az-icon { background: var(--terracotta); color: var(--on-pigment); }
.az-toast--sunflower .az-toast__tile { box-shadow: 0 2px 0 #b07d12; } .az-toast--sunflower .az-toast__tile .az-icon { background: var(--sunflower); color: var(--on-sunflower); }
.az-toast__body { flex: 1; min-width: 0; padding-top: 1px; }
.az-toast__title { margin: 0; font: 600 15px/20px var(--font-body); }
.az-toast__msg { margin: 2px 0 0; font-size: 14px; line-height: 20px; color: var(--ink-soft); }
.az-toast__actions { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.az-toast__x { flex: none; }
.az-toast__timer { position: absolute; left: var(--space-3); right: var(--space-3); bottom: 6px; display: flex; gap: 3px; height: 3px; }
.az-toast__timer i { flex: 1; border-radius: 1px; background: var(--cobalt-tint); transform-origin: left; }
.az-toast__timer i.is-gone { transition: opacity 200ms linear, transform 200ms linear; opacity: 0; transform: scaleX(.3); }

/* ---------- Modal: a panel framed in border tiles ---------- */
.az-scrim { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: var(--space-4); box-sizing: border-box; background: rgba(12, 22, 38, .55); overflow-y: auto; }
.az-scrim.is-in { animation: az-fade 200ms linear backwards; }
.az-scrim.is-out { transition: opacity 200ms linear; opacity: 0; }
@keyframes az-fade { from { opacity: 0; } }
.az-modal { position: relative; width: 520px; max-width: 100%; box-sizing: border-box; border-radius: var(--radius-panel); padding: 12px; background: var(--cobalt); box-shadow: var(--shadow-float); color: var(--ink); }
.az-scrim.is-in .az-modal { animation: az-modal-in 520ms var(--az-set) backwards; }
.az-scrim.is-out .az-modal { transition: transform 200ms var(--az-out); transform: translateY(10px) scale(.97); }
@keyframes az-modal-in { from { transform: translateY(26px) rotateX(18deg) scale(.94); opacity: 0; } 50% { opacity: 1; } }
.az-modal__frame { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; }
.az-modal__frame .az-pattern { position: absolute; inset: 0; }
.az-modal__inner { position: relative; z-index: 1; border-radius: 6px; background: var(--glaze); box-shadow: 0 0 0 3px var(--grout); padding: var(--space-8); }
.az-modal__head { display: flex; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-3); }
.az-modal__title { flex: 1; margin: 0; font: 400 32px/36px var(--font-display); color: var(--ink); }
.az-modal__body { color: var(--ink-soft); }
.az-modal__body p { margin: 0 0 var(--space-3); }
.az-modal__actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); }
.az-modal--sm { width: 420px; }
.az-modal--lg { width: 680px; }

/* ---------- Progress: a row of tiles filling ---------- */
.az-progress { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.az-progress__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.az-progress__val { font: 600 13px/1 var(--font-body); color: var(--ink); font-variant-numeric: tabular-nums; }
.az-progress__tiles { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--space-grout); height: 22px; }
.az-progress--sm .az-progress__tiles { height: 12px; gap: 2px; }
.az-progress--lg .az-progress__tiles { height: 34px; }
.az-progress__tile { position: relative; border-radius: 2px; overflow: hidden; background: var(--glaze-sunk); box-shadow: var(--shadow-well), inset 0 0 0 1px var(--grout); perspective: 80px; }
.az-progress__fill { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; background-color: var(--cobalt); background-image: var(--az-glazing); transform-origin: 50% 100%; transform: rotateX(-90deg); opacity: 0; transition: transform 420ms var(--az-set), opacity 160ms linear; transition-delay: calc(var(--d, 0) * 45ms); }
.az-progress__fill svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.az-progress__fill .k { fill: var(--on-cobalt); opacity: .55; } .az-progress__fill .a { fill: var(--sunflower); }
.az-progress__tile.is-on .az-progress__fill { transform: none; opacity: 1; }
.az-progress--sea .az-progress__fill { background-color: var(--sea); }
.az-progress--terracotta .az-progress__fill { background-color: var(--terracotta); }
.az-progress--sunflower .az-progress__fill { background-color: var(--sunflower); }
.az-progress--sunflower .az-progress__fill .k { fill: var(--on-sunflower); opacity: .35; }
.az-progress__hint { font-size: 13px; line-height: 18px; color: var(--ink-soft); }
.az-progress.is-indeterminate .az-progress__fill { opacity: 1; transform: none; animation: az-wave 1.6s var(--az-turn) infinite; animation-delay: calc(var(--d, 0) * 90ms); transition: none; }
@keyframes az-wave { 0%, 100% { transform: rotateX(-90deg); opacity: 0; } 30%, 60% { transform: none; opacity: 1; } }

/* ---------- TilePattern + kaleidoscope ---------- */
.az-pattern { --az-p-ground: var(--glaze); --az-p-ink: var(--cobalt); --az-p-deep: var(--cobalt-deep); --az-p-accent: var(--sunflower); --az-p-tint: var(--cobalt-tint); --az-p-grout: var(--grout);
  position: relative; overflow: hidden; display: block; background: var(--az-p-ground); }
.az-pattern__spin { position: absolute; left: -50%; top: -50%; width: 200%; height: 200%; transition: transform var(--az-t-turn) var(--az-turn); will-change: transform; }
.az-pattern__spin > svg { display: block; width: 100%; height: 100%; }
.az-pattern .g { fill: var(--az-p-ground); } .az-pattern .k { fill: var(--az-p-ink); } .az-pattern .d { fill: var(--az-p-deep); }
.az-pattern .a { fill: var(--az-p-accent); } .az-pattern .t { fill: var(--az-p-tint); }
.az-pattern .sk { fill: none; stroke: var(--az-p-ink); } .az-pattern .sd { fill: none; stroke: var(--az-p-deep); } .az-pattern .sg { fill: none; stroke: var(--az-p-grout); } .az-pattern .sgr { fill: none; stroke: var(--az-p-ground); }
.az-pattern--terracotta { --az-p-ink: var(--terracotta); --az-p-deep: #7a3519; --az-p-tint: #f3dccd; }
.az-pattern--sea { --az-p-ink: var(--sea); --az-p-deep: #12503f; --az-p-tint: #d3ece6; }
.az-pattern--sunflower { --az-p-ink: #c98d0e; --az-p-deep: var(--cobalt); --az-p-accent: var(--cobalt); --az-p-tint: #fbedc6; }
.az-pattern--night { --az-p-ground: var(--cobalt); --az-p-ink: #ffffff; --az-p-deep: #a9bdf0; --az-p-tint: var(--cobalt-deep); --az-p-grout: var(--cobalt-deep); }
.az-pattern--deep { --az-p-ground: var(--cobalt-deep); --az-p-ink: var(--cobalt); --az-p-deep: #7d9be6; --az-p-tint: #23408c; --az-p-grout: #0b1d4d; }
[data-theme="dark"] .az-pattern { --az-p-ink: #4f7ae0; --az-p-deep: #8fb0f6; --az-p-tint: #1c3060; }
[data-theme="dark"] .az-pattern--terracotta { --az-p-ink: var(--terracotta); --az-p-deep: #f2b08c; --az-p-tint: #3a2a2a; }
[data-theme="dark"] .az-pattern--sea { --az-p-ink: var(--sea); --az-p-deep: #9be0d0; --az-p-tint: #163a40; }
[data-theme="dark"] .az-pattern--sunflower { --az-p-ink: var(--sunflower); --az-p-deep: #8fb0f6; --az-p-accent: #8fb0f6; --az-p-tint: #3a3220; }
[data-theme="dark"] .az-pattern--night { --az-p-ground: var(--cobalt); --az-p-ink: #ffffff; --az-p-deep: #c3d3fa; --az-p-tint: var(--cobalt-deep); --az-p-grout: var(--cobalt-deep); }
[data-theme="dark"] .az-pattern--deep { --az-p-ground: #0f2259; --az-p-ink: #3a64cf; --az-p-deep: #8fb0f6; --az-p-tint: #1a3683; --az-p-grout: #08163f; }
.az-pattern--kaleido { cursor: pointer; }
.az-pattern--kaleido:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.az-pattern__sheen { position: absolute; inset: 0; pointer-events: none; }

/* ---------- TileFlip ---------- */
.az-flip { position: relative; perspective: 1400px; min-height: 260px; display: grid; }
.az-flip__inner { position: relative; display: grid; transform-style: preserve-3d; transition: transform var(--az-t-flip) var(--az-flip); }
.az-flip.is-flipped .az-flip__inner { transform: rotateY(180deg); }
.az-flip__face { grid-area: 1 / 1; position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: var(--radius-panel); backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.az-flip__front { background: var(--glaze); box-shadow: inset 0 0 0 1px var(--grout), var(--shadow-tile); cursor: pointer; }
.az-flip__back { transform: rotateY(180deg); background-color: var(--glaze); background-image: var(--az-glazing-soft); box-shadow: inset 0 0 0 1px var(--grout), var(--shadow-lift); }
.az-flip__front::after { content: ""; position: absolute; z-index: -1; left: 0; top: 0; right: -6px; bottom: -8px; }
.az-flip__art { position: relative; flex: 1; min-height: 150px; overflow: hidden; }
.az-flip__art .az-pattern { position: absolute; inset: 0; }
.az-flip__plaque { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 10px 18px; border-radius: 4px; background: var(--glaze); box-shadow: 0 0 0 3px var(--grout), 0 8px 18px -8px rgba(0, 0, 0, .4); text-align: center; color: var(--ink); max-width: 80%; box-sizing: border-box; }
.az-flip__plaque b { display: block; font: 400 22px/26px var(--font-display); }
.az-flip__plaque span { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; }
.az-flip__foot { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); box-shadow: inset 0 1px 0 var(--grout); background: var(--glaze); }
.az-flip__foot .az-small { color: var(--ink-soft); }
.az-flip__body { flex: 1; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); }
.az-flip__turn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 0; border-radius: var(--radius-chip); background: transparent; color: var(--cobalt-ink); font: 600 13px/1 var(--font-body); cursor: pointer; }
.az-flip__turn:hover { background: var(--cobalt-tint); }
.az-flip__turn .az-icon { width: 16px; height: 16px; transition: transform var(--az-t-set) var(--az-set); }
.az-flip__turn:hover .az-icon { transform: rotate(-180deg); }
.az-flip__front:hover { box-shadow: inset 0 0 0 1px var(--grout), var(--shadow-lift); }
.az-flip:not(.is-flipped) .az-flip__inner:hover { transform: rotateY(-7deg) rotateX(2deg); }
.az-flip.is-selected .az-flip__front, .az-flip.is-selected .az-flip__back { box-shadow: inset 0 0 0 2px var(--cobalt), 0 0 0 4px var(--cobalt-tint), var(--shadow-lift); }

/* ---------- Mosaic: the diagonal cascade ---------- */
.az-mosaic { --az-cols: 6; display: grid; grid-template-columns: repeat(var(--az-cols), minmax(0, 1fr)); grid-auto-rows: var(--az-row, auto); gap: var(--space-grout); padding: var(--space-grout); border-radius: var(--radius-tile); background: var(--grout); }
.az-mosaic--loose { gap: var(--space-2); padding: 0; background: transparent; }
.az-mosaic__tile { position: relative; min-width: 0; min-height: 0; border-radius: var(--radius-chip); overflow: hidden; background: var(--glaze); color: var(--ink); aspect-ratio: 1; }
.az-mosaic--free .az-mosaic__tile { aspect-ratio: auto; }
.az-mosaic__tile .az-pattern { position: absolute; inset: 0; }
.az-mosaic__tile--content { display: flex; flex-direction: column; justify-content: flex-end; padding: var(--space-3); box-sizing: border-box; background-color: var(--glaze); background-image: var(--az-glazing-soft); }
.az-mosaic__tile--cobalt { background-color: var(--cobalt); background-image: var(--az-glazing); color: var(--on-cobalt); }
.az-mosaic__tile--terracotta { background-color: var(--terracotta); background-image: var(--az-glazing); color: var(--on-pigment); }
.az-mosaic__tile--sunflower { background-color: var(--sunflower); background-image: var(--az-glazing); color: var(--on-sunflower); }
.az-mosaic__tile--sea { background-color: var(--sea); background-image: var(--az-glazing); color: var(--on-pigment); }
.az-mosaic__tile--turnable { cursor: pointer; }
.az-mosaic__tile--turnable .az-pattern { transition: transform var(--az-t-turn) var(--az-turn); }
.az-mosaic__tile--turnable:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.az-mosaic.is-cascading .az-mosaic__tile { animation: az-cascade 620ms var(--az-set) backwards; animation-delay: calc(var(--az-diag, 0) * var(--az-step) + 80ms); }
@keyframes az-cascade { from { opacity: 0; transform: perspective(500px) rotateX(-75deg) rotateY(25deg) scale(.6); } 55% { opacity: 1; } }
.az-mosaic.is-waiting .az-mosaic__tile { opacity: 0; }

/* ---------- widgets ---------- */
.az-stat { gap: var(--space-2); }
.az-stat__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.az-stat__value { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.az-stat__bars { display: flex; align-items: flex-end; gap: 3px; height: 54px; margin-top: var(--space-2); }
.az-stat__col { flex: 1; display: flex; flex-direction: column-reverse; gap: 2px; height: 100%; }
.az-stat__col i { display: block; height: calc((100% - 10px) / 6); border-radius: 1.5px; background: var(--cobalt-tint); }
.az-stat__col i.is-on { background-color: var(--cobalt); background-image: var(--az-glazing); }
.az-stat__col:last-child i.is-on { background-color: var(--sunflower); }
.az-stat__col i.is-on { animation: az-stack 420ms var(--az-set) backwards; animation-delay: calc(var(--c, 0) * 40ms + var(--r, 0) * 30ms); }
@keyframes az-stack { from { opacity: 0; transform: translateY(-8px) scale(.6); } }
.az-delta { display: inline-flex; align-items: center; gap: 3px; font: 600 13px/1 var(--font-body); color: var(--sea); }
.az-delta--down { color: var(--terracotta); }
.az-delta .az-icon { width: 14px; height: 14px; stroke-width: 2.2; }

.az-cal { gap: var(--space-3); }
.az-cal__head { display: flex; align-items: center; gap: var(--space-2); }
.az-cal__month { flex: 1; margin: 0; font: 400 22px/1.2 var(--font-display); }
.az-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-grout); padding: var(--space-grout); background: var(--grout); border-radius: var(--radius-tile); }
.az-cal__dow { padding: 6px 0; text-align: center; font: 600 11px/1 var(--font-body); letter-spacing: .1em; color: var(--ink-soft); background: var(--glaze-sunk); }
.az-cal__dow:first-child { border-top-left-radius: 3px; } .az-cal__dow:nth-child(7) { border-top-right-radius: 3px; }
.az-day { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; aspect-ratio: 1; min-height: 38px; padding: 0; border: 0; background: var(--glaze); color: var(--ink); font: 500 14px/1 var(--font-body); cursor: pointer; overflow: hidden; transition: transform 220ms var(--az-set); }
.az-day:hover:not(:disabled) { background: var(--cobalt-tint); }
.az-day:active:not(:disabled) { transform: scale(.92); }
.az-day:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; z-index: 1; }
.az-day__price { font-size: 10px; line-height: 1; font-weight: 500; color: var(--ink-soft); }
.az-day:disabled { color: var(--ink-soft); background: var(--glaze-sunk); cursor: not-allowed; text-decoration: line-through; text-decoration-color: var(--grout); }
.az-day.is-out { background: var(--glaze-sunk); cursor: default; }
.az-day.is-today::after { content: ""; position: absolute; top: 4px; right: 4px; width: 5px; height: 5px; background: var(--terracotta); transform: rotate(45deg); }
.az-day.is-range { background: var(--cobalt-tint); }
.az-day.is-edge { background-color: var(--cobalt); background-image: var(--az-glazing); color: var(--on-cobalt); }
.az-day.is-edge .az-day__price { color: var(--on-cobalt); opacity: .85; }
.az-day.is-edge .az-pattern { position: absolute; inset: 0; opacity: .22; }
.az-day.is-edge > span { position: relative; z-index: 1; }
.az-day.is-pop { animation: az-daypop 420ms var(--az-set); }
@keyframes az-daypop { from { transform: rotateY(-90deg); } }
.az-cal__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }

.az-waffle { gap: var(--space-4); }
.az-waffle__wrap { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: var(--space-6); align-items: center; }
.az-waffle__grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; padding: 3px; background: var(--grout); border-radius: 4px; aspect-ratio: 1; }
.az-waffle__grid i { border-radius: 1.5px; background: var(--glaze-sunk); transition: opacity 200ms linear, transform 260ms var(--az-set); }
.az-waffle__grid.is-focus i:not(.is-hot) { opacity: .22; }
.az-waffle__grid i.is-hot { transform: scale(.82) rotate(45deg); }
.az-waffle__grid.is-cascading i { animation: az-cascade 520ms var(--az-set) backwards; animation-delay: calc(var(--az-diag, 0) * 22ms); }
.az-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.az-legend button { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: 7px 8px; border: 0; border-radius: 4px; background: transparent; color: var(--ink); font: 400 14px/1.2 var(--font-body); text-align: left; cursor: pointer; }
.az-legend button:hover, .az-legend button.is-hot { background: var(--cobalt-tint); }
.az-legend__sw { flex: none; width: 14px; height: 14px; border-radius: 2px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
.az-legend__name { flex: 1; min-width: 0; }
.az-legend__val { font-weight: 600; font-variant-numeric: tabular-nums; }
.az-legend__pct { width: 38px; text-align: right; color: var(--ink-soft); font-size: 13px; font-variant-numeric: tabular-nums; }

/* entrance for top-level blocks */
.az-enter { animation: az-set 520ms var(--az-set) backwards; animation-delay: calc(var(--i, 0) * 70ms); }

@media (max-width: 560px) {
  .az-waffle__wrap { grid-template-columns: 1fr; }
  .az-waffle__grid { max-width: 240px; }
  .az-modal__inner { padding: var(--space-6) var(--space-4); }
  .az-modal__title { font-size: 26px; line-height: 30px; }
  .az-toasts { right: var(--space-4); left: var(--space-4); bottom: var(--space-4); align-items: stretch; }
  .az-toast { width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  [class*="az-"], [class*="az-"]::before, [class*="az-"]::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; }
  .az-sheen { display: none; }
  .az-flip:not(.is-flipped) .az-flip__inner:hover { transform: none; }
}