/* ==========================================================================
   Alewa Design System — Components
   Every value here comes from tokens.css. If you need a number that is not
   a token, add the token first.
   ========================================================================== */

/* ---- Reset & base ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }

body {
  background: var(--a-bg);
  color: var(--a-ink);
  font-family: var(--a-font-text);
  font-size: var(--a-size-body);
  line-height: var(--a-leading-body);
  -webkit-font-smoothing: antialiased;
}

:where(a) { color: var(--a-reason); }

/* One focus treatment across the whole app. Never remove it. */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--a-focus-ring);
  border-radius: var(--a-radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---- Typography --------------------------------------------------------
   Display type balances its lines. Body type never strands a lone word.   */

.a-display-xl,
.a-display-l,
.a-display-m,
.a-title {
  font-family: var(--a-font-display);
  font-weight: var(--a-weight-display);
  line-height: var(--a-leading-tight);
  text-wrap: balance;
}

.a-display-xl { font-size: var(--a-size-display-xl); letter-spacing: var(--a-track-display-xl); }
.a-display-l  { font-size: var(--a-size-display-l);  letter-spacing: var(--a-track-display); }
.a-display-m  { font-size: var(--a-size-display-m);  letter-spacing: var(--a-track-display); line-height: var(--a-leading-snug); }
.a-title      { font-size: var(--a-size-title);      letter-spacing: var(--a-track-title); line-height: var(--a-leading-snug); }

.a-subtitle {
  font-size: var(--a-size-subtitle); color: var(--a-ink-muted);
  line-height: var(--a-leading-relaxed); max-width: var(--a-measure);
  text-wrap: pretty;
}
.a-body   { color: var(--a-ink-muted); max-width: var(--a-measure); text-wrap: pretty; }
.a-body-s { font-size: var(--a-size-body-s); color: var(--a-ink-muted); text-wrap: pretty; }
.a-meta   { font-size: var(--a-size-body-s); color: var(--a-ink-soft); }

.a-label {
  font-size: var(--a-size-micro); font-weight: var(--a-weight-display);
  letter-spacing: var(--a-track-caps); text-transform: uppercase;
  color: var(--a-ink-soft);
}

/* Forces a headline to break at its meaning, not wherever the line fills.
   Use when text-wrap:balance splits a sentence in the wrong place. */
.a-line { display: block; text-wrap: balance; }

/* ---- Icons -------------------------------------------------------------
   Drawn, never typed. See icons.svg.                                      */
.a-icon {
  width: 20px; height: 20px; flex: none;
  stroke: currentColor; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.a-icon--sm { width: 16px; height: 16px; stroke-width: 2; }
.a-icon--lg { width: 26px; height: 26px; }

.a-icon-tile {
  width: 42px; height: 42px; border-radius: var(--a-radius-sm);
  background: var(--a-surface-tint); border: 1px solid var(--a-line);
  color: var(--a-ink);
  display: grid; place-items: center; flex: none;
  transition: background var(--a-duration-1) var(--a-ease);
}
.a-icon-tile--lg { width: 56px; height: 56px; border-radius: var(--a-radius-md); }
.a-icon-tile--attention { background: var(--a-needs-you); border-color: var(--a-needs-you); color: #171412; }
.a-icon-tile--handled   { background: var(--a-handled-wash); border-color: transparent; color: var(--a-handled); }

/* ---- Buttons -----------------------------------------------------------
   Always a pill. Label says what the person is doing, not what the app is. */
.a-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--a-space-2);
  font-family: var(--a-font-display);
  font-size: var(--a-size-body); font-weight: var(--a-weight-strong);
  letter-spacing: -.01em;
  padding: 14px var(--a-space-6);
  min-height: 46px;
  border: 2px solid transparent; border-radius: var(--a-radius-pill);
  background: var(--a-ink); color: var(--a-ink-inverse);
  cursor: pointer; text-decoration: none;
  transition: transform var(--a-duration-2) var(--a-ease),
              box-shadow var(--a-duration-2) var(--a-ease),
              background var(--a-duration-1) var(--a-ease);
}
.a-btn:hover:not(:disabled) { transform: var(--a-lift); box-shadow: var(--a-shadow-sm); }
.a-btn:active:not(:disabled) { transform: none; }
.a-btn:disabled { opacity: .45; cursor: not-allowed; }

.a-btn--secondary { background: transparent; color: var(--a-ink); border-color: var(--a-ink); }
.a-btn--secondary:hover:not(:disabled) { background: rgba(23, 20, 18, .05); box-shadow: none; }
.a-btn--quiet { background: transparent; color: var(--a-ink-muted); }
.a-btn--quiet:hover:not(:disabled) { background: rgba(23, 20, 18, .05); box-shadow: none; color: var(--a-ink); }
.a-btn--handled { background: var(--a-handled); color: #fff; }
.a-btn--danger  { background: transparent; color: var(--a-danger); border-color: var(--a-danger); }
.a-btn--danger:hover:not(:disabled) { background: var(--a-danger); color: #fff; }

.a-btn--sm { padding: 10px var(--a-space-5); min-height: 38px; font-size: var(--a-size-body-s); }
.a-btn--lg { padding: 17px var(--a-space-8); min-height: 54px; font-size: var(--a-size-body-l); }

.a-btn-icon {
  width: 42px; height: 42px; padding: 0; border-radius: var(--a-radius-pill);
  display: inline-grid; place-items: center;
  background: transparent; border: none; color: var(--a-ink-muted);
  cursor: pointer;
  transition: background var(--a-duration-1) var(--a-ease), color var(--a-duration-1) var(--a-ease);
}
.a-btn-icon:hover { background: rgba(23, 20, 18, .06); color: var(--a-ink); }

/* ---- Chips & badges ---------------------------------------------------- */
.a-chip {
  display: inline-flex; align-items: center; gap: var(--a-space-2);
  padding: 8px var(--a-space-4);
  border-radius: var(--a-radius-pill);
  font-size: var(--a-size-body-s); font-weight: var(--a-weight-strong);
  background: var(--a-surface-tint); color: var(--a-ink-muted);
  border: 1px solid var(--a-line);
}
.a-chip--attention { background: var(--a-needs-you-wash); color: var(--a-attention-ink); border-color: var(--a-needs-you-edge); }
.a-chip--handled   { background: var(--a-handled-wash); color: var(--a-handled); border-color: transparent; }
.a-chip--quiet     { background: transparent; color: var(--a-ink-soft); border-style: dashed; }
.a-chip--roadmap   { background: var(--a-roadmap-wash); color: var(--a-roadmap-ink); border-color: transparent;
                     font-size: var(--a-size-micro); letter-spacing: var(--a-track-caps);
                     text-transform: uppercase; }

/* The reason chip. Alewa always says why something is in front of you.
   This is the component that makes ranking feel like judgement, not magic. */
.a-reason-chip {
  display: inline-flex; align-items: center; gap: var(--a-space-2);
  padding: 8px var(--a-space-4);
  border-radius: var(--a-radius-pill);
  background: var(--a-reason-wash); color: var(--a-reason-ink);
  font-size: var(--a-size-body-s); font-weight: var(--a-weight-strong);
}

.a-rank { font-size: var(--a-size-body-s); font-weight: var(--a-weight-display); color: var(--a-ink-soft); }

.a-kbd {
  font-family: var(--a-font-mono); font-size: var(--a-size-micro);
  padding: 3px 7px; border-radius: var(--a-radius-xs);
  background: var(--a-surface-tint); border: 1px solid var(--a-line);
  color: var(--a-ink-soft);
}

/* ---- Surfaces ----------------------------------------------------------- */
.a-card {
  background: var(--a-surface-tint);
  border: 1px solid var(--a-line);
  border-radius: var(--a-radius-xl);
  padding: var(--a-space-10) var(--a-space-8);
  transition: transform var(--a-duration-2) var(--a-ease), box-shadow var(--a-duration-2) var(--a-ease);
}
.a-card--raised { background: var(--a-surface); box-shadow: var(--a-shadow-lg); }
.a-card--interactive { cursor: pointer; }
.a-card--interactive:hover { transform: translateY(-4px); box-shadow: var(--a-shadow-md); }
.a-card--dashed { background: transparent; border: 1.5px dashed var(--a-line-dashed); }
.a-card--inverse { background: var(--a-ink); color: var(--a-ink-inverse); border-color: transparent; }
.a-card--inverse .a-body { color: #C9C1AE; }

.a-well {
  background: var(--a-surface-sunk); border-radius: var(--a-radius-lg);
  padding: var(--a-space-6);
}

/* ---- Row: one thing that may need you ----------------------------------
   The core object of the app. Three states: waiting, open, handled.        */
.a-row {
  display: flex; gap: var(--a-space-4); align-items: flex-start;
  padding: var(--a-space-4) var(--a-space-4);
  border-radius: var(--a-radius-lg);
  background: color-mix(in srgb, var(--a-surface) 55%, transparent);
  border: 1.5px solid var(--a-line);
  cursor: pointer; position: relative;
  transition: transform var(--a-duration-2) var(--a-ease),
              box-shadow var(--a-duration-2) var(--a-ease),
              background var(--a-duration-2) var(--a-ease);
}
.a-row + .a-row { margin-top: var(--a-space-3); }
.a-row:hover { transform: var(--a-lift); box-shadow: var(--a-shadow-sm); }
.a-row[aria-current="true"] {
  background: var(--a-surface); border-color: var(--a-needs-you-edge);
  box-shadow: var(--a-shadow-md);
}
.a-row[aria-current="true"] .a-icon-tile { background: var(--a-needs-you); border-color: var(--a-needs-you); color: #171412; }
.a-row[data-state="handled"] { opacity: .5; }
.a-row[data-state="handled"] .a-rank { display: none; }

.a-row__body { min-width: 0; padding-right: var(--a-space-6); display: block; }
.a-row__title {
  display: block;
  font-family: var(--a-font-display); font-weight: var(--a-weight-strong);
  font-size: var(--a-size-label); letter-spacing: -.02em; text-wrap: balance;
}
.a-row__sub { display: block; font-size: var(--a-size-body-s); color: var(--a-ink-muted); margin-top: 3px; text-wrap: pretty; }
.a-row__end { position: absolute; top: var(--a-space-4); right: var(--a-space-4); }

/* ---- Draft block --------------------------------------------------------
   Alewa's words, clearly marked as a proposal and never as a sent message. */
.a-draft {
  background: var(--a-surface-sunk); border-radius: var(--a-radius-lg);
  padding: var(--a-space-6);
  color: var(--a-ink); line-height: var(--a-leading-relaxed);
  min-height: 140px;
}
.a-draft__tag {
  display: block; margin-bottom: var(--a-space-3);
  font-size: var(--a-size-micro); font-weight: var(--a-weight-display);
  letter-spacing: var(--a-track-caps); text-transform: uppercase;
  color: var(--a-ink-soft);
}
.a-caret {
  display: inline-block; width: 2px; height: 1.05em;
  background: var(--a-ink); vertical-align: text-bottom;
  animation: a-blink .9s steps(1) infinite;
}
@keyframes a-blink { 50% { opacity: 0; } }

/* The approval bar. Any surface that can send mail must show this.
   Approve is never the only affordance, and never fires on its own. */
.a-approval { display: flex; gap: var(--a-space-3); flex-wrap: wrap; align-items: center; }

/* ---- Forms --------------------------------------------------------------- */
.a-field { display: block; }
.a-field__label {
  display: block; margin-bottom: var(--a-space-2);
  font-size: var(--a-size-body-s); font-weight: var(--a-weight-medium); color: var(--a-ink);
}
.a-field__hint { margin-top: var(--a-space-2); font-size: var(--a-size-body-s); color: var(--a-ink-soft); }
.a-field__error { margin-top: var(--a-space-2); font-size: var(--a-size-body-s); color: var(--a-danger); }

.a-input, .a-textarea, .a-select {
  width: 100%; font-family: var(--a-font-text); font-size: var(--a-size-body);
  color: var(--a-ink); background: var(--a-surface);
  border: 1.5px solid var(--a-line-strong); border-radius: var(--a-radius-sm);
  padding: 13px var(--a-space-4);
  transition: border-color var(--a-duration-1) var(--a-ease);
}
.a-input::placeholder, .a-textarea::placeholder { color: var(--a-ink-soft); }
.a-input:hover, .a-textarea:hover, .a-select:hover { border-color: var(--a-ink-soft); }
.a-textarea { min-height: 120px; resize: vertical; line-height: var(--a-leading-body); }
.a-input[aria-invalid="true"] { border-color: var(--a-danger); }

.a-switch { display: inline-flex; align-items: center; gap: var(--a-space-3); cursor: pointer; }
.a-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.a-switch__track {
  width: 46px; height: 28px; border-radius: var(--a-radius-pill);
  background: var(--a-line-strong); position: relative;
  transition: background var(--a-duration-2) var(--a-ease);
}
.a-switch__track::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 22px; height: 22px; border-radius: 50%; background: var(--a-surface);
  box-shadow: var(--a-shadow-sm);
  transition: transform var(--a-duration-2) var(--a-ease);
}
.a-switch input:checked + .a-switch__track { background: var(--a-handled); }
.a-switch input:checked + .a-switch__track::after { transform: translateX(18px); }
.a-switch input:focus-visible + .a-switch__track { box-shadow: var(--a-focus-ring); }

/* ---- Avatar & contacts ---------------------------------------------------- */
.a-avatar {
  width: 44px; height: 44px; border-radius: var(--a-radius-sm); flex: none;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #E8DFC8, #CFC4A6);
  color: #4A422F; font-family: var(--a-font-display);
  font-weight: var(--a-weight-display); font-size: var(--a-size-body-s);
}
.a-avatar--sm { width: 32px; height: 32px; border-radius: var(--a-radius-xs); font-size: var(--a-size-micro); }

/* ---- Notices --------------------------------------------------------------- */
.a-notice {
  display: flex; gap: var(--a-space-3); align-items: flex-start;
  padding: var(--a-space-4) var(--a-space-5);
  border-radius: var(--a-radius-md);
  background: var(--a-surface-tint); border: 1px solid var(--a-line);
  font-size: var(--a-size-body-s); color: var(--a-ink-muted);
}
.a-notice--reason  { background: var(--a-reason-wash); border-color: transparent; color: var(--a-reason-ink); }
.a-notice--handled { background: var(--a-handled-wash); border-color: transparent; color: var(--a-handled); }
.a-notice--attention { background: var(--a-needs-you-wash); border-color: var(--a-needs-you-edge); color: var(--a-attention-ink); }
.a-notice--danger  { background: var(--a-danger-wash); border-color: transparent; color: var(--a-danger); }

/* ---- Timeline: how something got handled ------------------------------------ */
.a-timeline__step { display: flex; gap: var(--a-space-5); position: relative; padding-bottom: var(--a-space-8); }
.a-timeline__step:last-child { padding-bottom: 0; }
.a-timeline__step::before {
  content: ""; position: absolute; left: 23px; top: 50px; bottom: 6px;
  width: 2px; background: var(--a-line);
}
.a-timeline__step:last-child::before { display: none; }
.a-timeline__mark {
  width: 48px; height: 48px; border-radius: var(--a-radius-md); flex: none; z-index: 1;
  background: var(--a-surface-tint); border: 1.5px solid var(--a-line);
  color: var(--a-ink); display: grid; place-items: center;
}
.a-timeline__step--now .a-timeline__mark { background: var(--a-needs-you); border-color: var(--a-needs-you); color: #171412; }
.a-timeline__title { font-family: var(--a-font-display); font-weight: var(--a-weight-strong); letter-spacing: -.02em; padding-top: 6px; }
.a-timeline__time { font-size: var(--a-size-micro); font-weight: var(--a-weight-strong); color: var(--a-ink-soft); margin-top: 7px; }

/* ---- Empty & quiet states ----------------------------------------------------
   "Nothing needs you" is a good outcome. Say it warmly, never apologetically. */
.a-empty {
  text-align: center; padding: var(--a-space-12) var(--a-space-6);
  border: 1.5px dashed var(--a-line-dashed); border-radius: var(--a-radius-xl);
  color: var(--a-ink-soft);
}
.a-empty__title {
  font-family: var(--a-font-display); font-size: var(--a-size-subtitle);
  font-weight: var(--a-weight-display); letter-spacing: var(--a-track-title);
  color: var(--a-ink); margin-top: var(--a-space-4);
}

.a-skeleton {
  border-radius: var(--a-radius-sm);
  background: linear-gradient(90deg, var(--a-line) 25%, var(--a-surface-tint) 50%, var(--a-line) 75%);
  background-size: 200% 100%;
  animation: a-shimmer 1.4s linear infinite;
  height: 14px;
}
@keyframes a-shimmer { to { background-position: -200% 0; } }

/* ---- Sheet / dialog ------------------------------------------------------------ */
.a-sheet {
  background: var(--a-surface); border-radius: var(--a-radius-2xl);
  box-shadow: var(--a-shadow-xl); border: 1px solid var(--a-line);
  padding: var(--a-space-8);
  max-width: 520px;
}

/* ---- Segmented control ---------------------------------------------------------- */
.a-segmented {
  display: inline-flex; gap: 4px; padding: 4px;
  background: var(--a-surface-tint); border: 1px solid var(--a-line);
  border-radius: var(--a-radius-pill);
}
.a-segmented button {
  border: none; background: transparent; cursor: pointer;
  font-family: var(--a-font-display); font-weight: var(--a-weight-medium);
  font-size: var(--a-size-body-s); color: var(--a-ink-muted);
  padding: 9px var(--a-space-5); border-radius: var(--a-radius-pill);
  transition: background var(--a-duration-1) var(--a-ease), color var(--a-duration-1) var(--a-ease);
}
.a-segmented button[aria-selected="true"] { background: var(--a-ink); color: var(--a-ink-inverse); }

/* ---- Nav ------------------------------------------------------------------------- */
.a-navitem {
  display: flex; align-items: center; gap: var(--a-space-3);
  padding: 11px var(--a-space-4); border-radius: var(--a-radius-sm);
  color: var(--a-ink-muted); text-decoration: none;
  font-weight: var(--a-weight-medium); font-size: var(--a-size-label);
  transition: background var(--a-duration-1) var(--a-ease), color var(--a-duration-1) var(--a-ease);
}
.a-navitem:hover { background: rgba(23, 20, 18, .05); color: var(--a-ink); }
.a-navitem[aria-current="page"] { background: var(--a-ink); color: var(--a-ink-inverse); }

/* ---- Layout helpers ---------------------------------------------------------------- */
.a-container { max-width: var(--a-container); margin-inline: auto; padding-inline: var(--a-space-6); }
.a-stack > * + * { margin-top: var(--a-space-4); }
.a-stack-lg > * + * { margin-top: var(--a-space-8); }
.a-cluster { display: flex; flex-wrap: wrap; gap: var(--a-space-3); align-items: center; }