/* Only what Polaris has no component for: brand icon tiles, display type,
   the usage bar, the invoice preview frame and the colour swatches. */
:root {
  --ui-ink: #1f3a5f;
  --ui-coral: #f07a5a;
  --ui-mint: #3fb68b;
  --ui-mist: #e9eef5;
}

.ui-tile {
  display: inline-grid;
  place-items: center;
  inline-size: 36px;
  block-size: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #dfe7f2, #c3d1e6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 1px 2px rgba(31, 58, 95, 0.18);
  flex: none;
}
.ui-tile[data-tone='coral'] { background: linear-gradient(135deg, #ffd9cc, #f7a488); }
.ui-tile[data-tone='mint'] { background: linear-gradient(135deg, #d4f1e4, #a6dfc6); }
.ui-tile[data-tone='mist'] { background: linear-gradient(135deg, #f2f5fa, #dde4ef); }
.ui-tile[data-size='small'] { inline-size: 28px; block-size: 28px; border-radius: 8px; }

.ui-display,
.ui-metric {
  margin: 0;
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, sans-serif;
  color: #1a1a1a;
  letter-spacing: -0.02em;
}
.ui-display { font-size: 22px; line-height: 1.25; font-weight: 650; }
.ui-metric { font-size: 24px; line-height: 1.15; font-weight: 650; font-variant-numeric: tabular-nums; }

.ui-progress { block-size: 6px; border-radius: 999px; background: var(--ui-mist); overflow: hidden; }
.ui-progress > div {
  block-size: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--ui-ink), #4f6f9c);
  transition: inline-size 0.4s ease;
}
.ui-progress[data-full] > div { background: linear-gradient(90deg, #c4512f, var(--ui-coral)); }

/* The invoice preview: a sheet of paper on a soft desk, scaled to fit. */
.ui-desk {
  /* The frame inside is a full page wide before scaling; it must not size the column. */
  contain: inline-size;
  padding: 20px;
  border-radius: 12px;
  background: radial-gradient(circle at 20% 0%, #f4f6fa, #e6ebf2);
}
.ui-sheet {
  overflow: hidden;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(20, 30, 50, 0.08), 0 12px 32px -12px rgba(20, 30, 50, 0.28);
}
.ui-sheet iframe { display: block; border: 0; transform-origin: 0 0; }

.ui-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.ui-swatch {
  inline-size: 28px;
  block-size: 28px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #c9cfd8;
  cursor: pointer;
  padding: 0;
}
.ui-swatch[aria-pressed='true'] { box-shadow: 0 0 0 2px #1a1a1a; }
.ui-swatch:focus-visible { outline: 2px solid #005bd3; outline-offset: 2px; }

.ui-layouts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ui-layout {
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid #d8dde6;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  font: 600 12px/1.3 Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #303030;
  text-align: center;
}
.ui-layout[aria-pressed='true'] { border: 2px solid #1a1a1a; padding: 7px; }
.ui-layout:focus-visible { outline: 2px solid #005bd3; outline-offset: 2px; }
.ui-layout img { inline-size: 100%; border-radius: 4px; }
.ui-layout > span { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px; }
.ui-premium {
  padding: 1px 6px;
  border-radius: 99px;
  background: linear-gradient(135deg, #ffd9cc, #f7a488);
  color: #6b2410;
  font-size: 10px;
  font-weight: 650;
}

.ui-logo {
  display: grid;
  place-items: center;
  block-size: 72px;
  border: 1px dashed #c9cfd8;
  border-radius: 10px;
  background: #fafbfc;
}
.ui-logo img { max-block-size: 56px; max-inline-size: 80%; object-fit: contain; }

@media (prefers-reduced-motion: reduce) {
  .ui-progress > div { transition: none; }
}