/* ============================================================
   Graphite · COMPONENTS (bundle's cut)
   Only the shapes bundle is built from: buttons, the round icon
   button, text fields, the grey card, the status line, the toast,
   the text link and the progress bar. Seeded from the Graphite kit
   and trimmed. Every value comes from tokens.css.
   Load order: tokens → base → components → app (design.css)
   ============================================================ */

/* ---- BUTTONS ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  min-height:var(--ctrl-h);padding:0 var(--s-4);border-radius:var(--r-pill);
  background:var(--card-2);color:var(--ink);
  font-size:var(--fs-small);font-weight:var(--w-med);white-space:nowrap;
  transition-property:background-color,color,transform,opacity;
  transition-duration:var(--dur-fast);transition-timing-function:var(--ease);
}
.btn:hover:not([disabled],[aria-disabled="true"]){background:color-mix(in srgb, var(--card-2) 86%, var(--ink));}
.btn:active:not([disabled],[aria-disabled="true"]){transform:scale(var(--press));}

.btn.is-solid{background:var(--ink);color:var(--canvas);}
.btn.is-solid:hover:not([disabled],[aria-disabled="true"]){background:color-mix(in srgb, var(--ink) 86%, var(--canvas));}

.btn.is-ghost{background:transparent;color:var(--ink-2);font-weight:var(--w-reg);}
.btn.is-ghost:hover:not([disabled],[aria-disabled="true"]){background:var(--card);color:var(--ink);}

.btn[disabled],.btn[aria-disabled="true"]{opacity:.4;cursor:not-allowed;}

/* A round button with one icon or one symbol in it. Always give it an aria-label. */
.btn-icon{
  display:inline-grid;place-items:center;flex:none;
  width:36px;height:36px;border-radius:var(--r-pill);
  color:var(--ink-2);background:transparent;
  transition-property:color,background-color,transform;
  transition-duration:var(--dur-fast);transition-timing-function:var(--ease);
}
.btn-icon:hover:not([disabled],[aria-disabled="true"]){color:var(--ink);background:var(--card);}
.btn-icon:active:not([disabled],[aria-disabled="true"]){transform:scale(var(--press));}
@media (pointer:coarse){ .btn-icon{width:44px;height:44px;} }

/* ---- FIELDS ---- */
.label{display:block;font-size:var(--fs-label);color:var(--ink-3);}

.input{
  display:block;width:100%;
  min-height:var(--ctrl-h);padding:var(--s-2) var(--s-3);
  background:var(--raise);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r);
  font-size:var(--fs-body);
  transition-property:border-color,box-shadow;
  transition-duration:var(--dur-fast);transition-timing-function:var(--ease);
}
.input::placeholder{color:var(--ink-3);}
.input:hover:not(:focus-visible,[disabled]){border-color:var(--line-2);}
.input:focus-visible{
  outline:none;border-color:var(--ink);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--ink) 12%, transparent);
}

/* ---- CARD ---- */
.card{background:var(--card);border-radius:var(--r);padding:var(--s-5);}

/* ---- STATUS ---- */
.status{display:inline-flex;align-items:center;gap:var(--s-2);font-size:var(--fs-label);color:var(--ink-3);}
.status-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--ink-3);}
.status.is-saved .status-dot{background:var(--yes);}
.status.is-failed{color:var(--no);}
.status.is-failed .status-dot{background:var(--no);}

/* ---- TOAST ---- */
.toast{
  position:fixed;left:50%;bottom:calc(var(--s-5) + env(safe-area-inset-bottom, 0px));z-index:var(--z-toast);
  display:flex;align-items:center;gap:var(--s-3);
  max-width:calc(100vw - 32px);padding:var(--s-2) var(--s-4);border-radius:var(--r-pill);
  background:var(--ink);color:var(--canvas);font-size:var(--fs-small);
}

/* ---- LINK-STYLE BUTTON ---- */
.link{
  font-size:var(--fs-small);color:var(--ink);background:none;border:none;padding:0;
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-2);
}
.link:hover{text-decoration-color:var(--ink);}

/* ---- PROGRESS BAR ---- */
.bar{height:4px;border-radius:var(--r-pill);background:var(--card-2);overflow:hidden;}
.bar span{display:block;height:100%;width:0;border-radius:var(--r-pill);background:var(--ink);}