/* ==========================================================================
   Skolon Vault — build CSS
   ---------------------------------------------------------------------------
   This is the layer you build on. It imports the canonical Skolon design
   tokens (skolon-tokens.css) and adds a small, faithful set of component
   classes used across the three Vault flows. Every value here resolves to a
   token — no raw hex, no off-scale spacing. If you need a new value, add a
   token, don't hardcode.

   Strict rules carried over from the design system (do not break these):
     • Colour: only the tokens. Teal #39b0bb + tint #ebf7f8 do all brand work.
     • Type: Poppins only. 4 sizes, weight 400 everywhere; 600 only for
       `.body-bold` headlines. Hierarchy = size, not weight.
     • Spacing: 4 / 8 / 12 / 16 / 24 / 36 only.
     • Cards have a BORDER, not a shadow. shadow-floating is for floating
       surfaces only (popover, snackbar, menu, the extension popup).
     • Radii: buttons = pill; cards/modals = 1.5rem.
     • Icons: Material Icons Outlined, colour-font, paired with a label.
     • Hover on brand surfaces = opacity 0.88; pressed = 0.92.
   ========================================================================== */

@import url('skolon-tokens.css');

/* ── Material Icons Outlined (CDN, with inline metrics fallback) ─────────── */
.material-icons-outlined {
  font-family: 'Material Icons Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 1.25rem;          /* default icon size */
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  vertical-align: middle;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  color: var(--color-font);
}

*, *::before, *::after { box-sizing: border-box; }

html { scrollbar-gutter: stable; }
body {
  margin: 0;
  background: var(--color-background);
  font-family: var(--font-family);
  color: var(--color-font);
  font-size: var(--font-size-md);
  line-height: var(--line-height-sm);
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; }
*:focus { outline: none; }
*:focus-visible { outline: 0.125rem solid var(--color-focus); outline-offset: 0.25rem; }

/* ──────────────────────────────────────────────────────────────────────────
   BUTTONS — pills, height 2.5rem, sentence case, optional leading icon.
   Variants: main (filled teal) · tonal (teal tint) · outlined · ghost.
   Hover = opacity 0.88 on brand fills; ghost hover = main-sub bg.
   ────────────────────────────────────────────────────────────────────────── */
.btn {
  height: 2.5rem;
  border-radius: var(--radius-full);
  border: 0;
  padding: 0 var(--space-6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: inherit;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  color: var(--color-font);
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 120ms ease, background-color 120ms ease;
}
.btn .material-icons-outlined { font-size: 1.25rem; }
.btn.has-leading-icon { padding-left: var(--space-3); }
.btn:disabled { background: var(--color-disable); color: var(--color-font-sub); cursor: default; }

.btn-main { background: var(--color-main); color: var(--color-font-inverse); }
.btn-main .material-icons-outlined { color: var(--color-font-inverse); }
.btn-main:hover { opacity: 0.88; }
.btn-main:active { opacity: 0.92; }

.btn-tonal { background: var(--color-main-sub); color: var(--color-font); }
.btn-tonal:hover { opacity: 0.88; }
.btn-tonal:active { opacity: 0.92; }

.btn-outlined { background: var(--color-element); border: var(--border-default); }
.btn-outlined:hover { background: var(--color-hover-01dp); }
.btn-outlined:active { background: var(--color-hover-02dp); }

.btn-ghost { background: transparent; }
.btn-ghost:hover { background: var(--color-main-sub); }
.btn-ghost:active { opacity: 0.92; }

.btn-sm { height: 2rem; padding: 0 var(--space-4); }
.btn-icon { width: 2.5rem; padding: 0; }

/* ──────────────────────────────────────────────────────────────────────────
   CARD — white surface, border (never shadow), 1.5rem radius.
   ────────────────────────────────────────────────────────────────────────── */
.card {
  background: var(--color-element);
  border: var(--border-default);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
}

/* ──────────────────────────────────────────────────────────────────────────
   TEXT FIELD — label above, 0.75rem-radius box, border-default.
   ────────────────────────────────────────────────────────────────────────── */
.field-label {
  display: block;
  font-size: var(--font-size-xs);
  line-height: var(--line-height-xs);
  color: var(--color-font-sub);
  margin-bottom: var(--space-1);
}
.field {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 2.75rem;
  padding: 0 var(--space-3);
  background: var(--color-element);
  border: var(--border-default);
  border-radius: var(--radius-md);
}
.field:focus-within { border-color: var(--color-main); }
.field input {
  flex: 1;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: var(--font-size-sm);
  color: var(--color-font);
  min-width: 0;
}
.field input::placeholder { color: var(--color-font-sub); }
.field input:focus { outline: none; }

/* ──────────────────────────────────────────────────────────────────────────
   AVATAR — 1.5rem teal circle with initials.
   ────────────────────────────────────────────────────────────────────────── */
.avatar {
  width: 1.5rem; height: 1.5rem;
  border-radius: 50%;
  background: var(--color-main);
  color: var(--color-font-inverse);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.6875rem; font-weight: var(--font-weight-semibold);
  flex-shrink: 0; user-select: none;
}
.avatar-lg { width: 2.25rem; height: 2.25rem; font-size: var(--font-size-sm); }

/* ──────────────────────────────────────────────────────────────────────────
   APP / SERVICE ICON FRAME — 1.25rem rounded square; content shown at full
   chroma (third-party). Here we use neutral placeholders.
   ────────────────────────────────────────────────────────────────────────── */
.app-icon {
  width: 2.5rem; height: 2.5rem;
  border-radius: 0.625rem;
  border: var(--border-default);
  background: var(--color-hover-02dp);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; overflow: hidden;
  font-size: var(--font-size-md); color: var(--color-font);
}

/* ──────────────────────────────────────────────────────────────────────────
   TAG (1rem icon) and CHIP (1.125rem icon) — pill, border-default idle.
   ────────────────────────────────────────────────────────────────────────── */
.tag {
  display: inline-flex; align-items: center; gap: var(--space-1);
  height: 1.5rem; padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-main-sub);
  font-size: var(--font-size-xs); line-height: var(--line-height-xs);
  color: var(--color-font);
}
.tag .material-icons-outlined { font-size: 1rem; }
.tag-neutral { background: var(--color-hover-02dp); }

.chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: 2rem; padding: 0 var(--space-3);
  border-radius: var(--radius-full);
  border: var(--border-default);
  background: var(--color-element);
  font-size: var(--font-size-sm); color: var(--color-font);
  cursor: pointer;
}
.chip .material-icons-outlined { font-size: 1.125rem; }
.chip.selected { border-color: var(--color-main); background: var(--color-main-sub); }

/* ──────────────────────────────────────────────────────────────────────────
   ALERT — soft tinted background; the ICON carries the semantic colour.
   ────────────────────────────────────────────────────────────────────────── */
.alert {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-main-sub);
  color: var(--color-font);
  font-size: var(--font-size-sm);
}
.alert .material-icons-outlined { font-size: 1.5rem; }
.alert-info    { background: var(--color-main-sub); }
.alert-info    .material-icons-outlined { color: var(--color-main); }
.alert-success { background: var(--color-success-sub); }
.alert-success .material-icons-outlined { color: var(--color-success); }
.alert-warning { background: var(--color-warning-sub); }
.alert-warning .material-icons-outlined { color: var(--color-warning); }
.alert-error   { background: var(--color-error-sub); }
.alert-error   .material-icons-outlined { color: var(--color-error); }

/* ──────────────────────────────────────────────────────────────────────────
   SNACKBAR — dark #333 surface, white text, floating shadow.
   ────────────────────────────────────────────────────────────────────────── */
.snackbar {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-font);
  color: var(--color-font-inverse);
  box-shadow: var(--shadow-floating);
  font-size: var(--font-size-sm);
}
.snackbar .material-icons-outlined { color: var(--color-font-inverse); }

/* ──────────────────────────────────────────────────────────────────────────
   DATA TABLE — border-default frame, hover-tint header.
   ────────────────────────────────────────────────────────────────────────── */
.table-wrap { border: var(--border-default); border-radius: var(--radius-xl); overflow: hidden; }
table.data { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
table.data th, table.data td {
  text-align: left; padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-default);
}
table.data thead th {
  background: var(--color-hover-01dp);
  font-weight: var(--font-weight-regular); color: var(--color-font-sub);
}
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover td { background: var(--color-hover-01dp); }

/* ── utility ────────────────────────────────────────────────────────────── */
.text-sub { color: var(--color-font-sub); }
.body-bold { font-weight: var(--font-weight-semibold); }
.stack-1 { display: flex; flex-direction: column; gap: var(--space-1); }
.stack-2 { display: flex; flex-direction: column; gap: var(--space-2); }
.stack-3 { display: flex; flex-direction: column; gap: var(--space-3); }
.stack-4 { display: flex; flex-direction: column; gap: var(--space-4); }
.stack-6 { display: flex; flex-direction: column; gap: var(--space-6); }
.row-2 { display: flex; align-items: center; gap: var(--space-2); }
.row-3 { display: flex; align-items: center; gap: var(--space-3); }
.row-4 { display: flex; align-items: center; gap: var(--space-4); }