/* Iris Loc — component styles. Every value comes from tokens.css. */
.il { font-family: var(--font-sans); color: var(--ink); -webkit-font-smoothing: antialiased; }
.il *, .il *::before, .il *::after { box-sizing: border-box; }
.il-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.il-stack { display: flex; flex-direction: column; gap: var(--space-2); }
.il-label { font: 600 12px/16px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.il-spec { font: 500 13px/20px var(--font-mono); color: var(--ink-muted); }
.il-tag { font: 600 11px/14px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.il-display { font-family: var(--font-display); font-weight: 900; letter-spacing: -.015em; }

/* Play marker: the triangle cut from the "o" */
.il-play { display: inline-block; width: .62em; height: .72em; background: currentColor;
  clip-path: polygon(8% 0, 100% 50%, 8% 100%, 0 92%, 0 8%); border-radius: 1px; flex: none; }

/* Button */
.il-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px; padding: var(--space-3) var(--space-6); border-radius: var(--radius-m);
  font: 700 15px/20px var(--font-sans); border: 2px solid transparent; cursor: pointer;
  white-space: nowrap; text-decoration: none; transition: background .15s, border-color .15s, color .15s; }
.il-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.il-btn--primary { background: var(--rec); color: var(--on-rec); }
.il-btn--primary:hover { background: var(--rec-hover); }
.il-btn--secondary { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.il-btn--secondary:hover { border-color: var(--ink); }
.il-btn--ghost { background: transparent; color: var(--rec-ink); padding-inline: var(--space-2); }
.il-btn--ghost:hover { text-decoration: underline; text-underline-offset: 4px; }
.il-btn[disabled] { background: var(--surface-sunken); color: var(--ink-faint); border-color: transparent; cursor: not-allowed; }
.il-btn--s { min-height: 36px; padding: var(--space-2) var(--space-4); font-size: 14px; }

/* Status badge */
.il-badge { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3) var(--space-1) var(--space-2);
  border-radius: var(--radius-pill); background: var(--surface-raised); border: 1px solid var(--line);
  font: 600 12px/18px var(--font-sans); letter-spacing: .02em; white-space: nowrap; }
.il-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.il-badge--livre { color: var(--status-livre); }
.il-badge--reservado { color: var(--status-reservado); }
.il-badge--manutencao { color: var(--status-manutencao); }
.il-badge--vivo { color: var(--ink); background: var(--rec-soft); border-color: transparent; }
.il-badge--vivo::before { background: var(--rec); box-shadow: 0 0 0 3px var(--rec-soft), 0 0 0 4px var(--rec); }

/* Frame corners (camera safe area) */
.il-frame { position: relative; padding: var(--space-4); }
.il-frame > .c { position: absolute; width: 18px; height: 18px; border: 0 solid var(--il-frame-color, var(--ink-muted)); }
.il-frame > .c.tl { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.il-frame > .c.tr { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
.il-frame > .c.bl { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
.il-frame > .c.br { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }
.il-frame--rec { --il-frame-color: var(--rec); }

/* Equipment card */
.il-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-6); }
.il-card { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-l);
  padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.il-card__media { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-m); background: var(--surface-sunken);
  display: grid; place-items: center; overflow: hidden; }
.il-card__media .il-badge { position: absolute; top: var(--space-2); left: var(--space-2); }
.il-card__body { padding: 0 var(--space-1) var(--space-1); display: flex; flex-direction: column; gap: var(--space-2); }
.il-card__name { margin: 0; font: 800 20px/26px var(--font-display); color: var(--ink); }
.il-card__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-1); }
.il-price { white-space: nowrap; font: 800 20px/24px var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.il-price small { font: 500 12px/16px var(--font-sans); color: var(--ink-muted); }

/* Rate table */
.il-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface-raised); }
.il-table { width: 100%; border-collapse: collapse; font: 400 15px/22px var(--font-sans); font-variant-numeric: tabular-nums; }
.il-table th { text-align: left; padding: var(--space-3) var(--space-4); font: 600 12px/16px var(--font-sans); letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-muted); border-bottom: 1px solid var(--line); }
.il-table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); white-space: nowrap; }
.il-table tr:last-child td { border-bottom: 0; }
.il-table td.num, .il-table th.num { text-align: right; }
.il-table tr.is-best td { background: var(--rec-soft); }
.il-table .best { color: var(--rec-ink); font-weight: 700; }

/* Gaffer tape strip */
.il-gaffer { display: inline-flex; align-items: center; gap: var(--space-2); background: var(--marca-laranja); color: var(--marca-preto);
  padding: var(--space-1) var(--space-4); font: 700 11px/16px var(--font-mono); letter-spacing: .14em; text-transform: uppercase;
  clip-path: polygon(0 8%, 3% 0, 97% 6%, 100% 0, 99% 94%, 96% 100%, 2% 92%, 0 100%); }