/* ─────────────────────────────────────────────────────────────
   CaliPath — components
   Navigation, drawer, tiles and stat cards.

   Tiles and cards size themselves from the space available (the
   --*-fit tokens), and their type and artwork are computed from that
   same size using the design's own ratios. That is what lets a card
   shrink on a short screen without anything inside it overflowing.
   ───────────────────────────────────────────────────────────── */

/* ════════ Top bar ════════ */

.topbar{
  display:grid;
  grid-template-columns:var(--burger-w) 1fr var(--avatar);
  align-items:center;
  height:var(--topbar-h);
  padding:var(--topbar-pad);
  flex:0 0 auto;
}

@media (min-width:900px){
  .topbar{
    display:flex;
    border-bottom:1px solid var(--hair);
  }
}

.topbar__left{
  display:flex;
  align-items:center;
  gap:28px;
  padding-left:4px;
}

/* ── Hamburger ──
   §6.4: always neutral grey, in both themes. It is the one piece of
   navigation that never takes a section colour — only the menu it
   opens does. */
.burger{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:var(--burger-gap);
  width:var(--burger-w);
  height:44px;
  padding:0 2px;
}

.burger span{
  display:block;
  height:var(--burger-bar);
  border-radius:3px;
  background:var(--grey);
}

/* ── Logo ──
   Two files, one per theme. Each JPG carries a solid background —
   black for the dark logo, white for the light one — so blending it
   against the matching ground removes that background exactly:
   screen(dark ground, black) = the ground, multiply(white, white) = white.
   Swapping in transparent PNGs later means only dropping the blend. */
.logo{
  height:var(--logo-h);
  width:auto;
  display:block;
  mix-blend-mode:var(--logo-blend);
}

@media (max-width:899px){
  .logo{ margin:0 auto; }
}

[data-theme="dark"] .logo--light,
[data-theme="light"] .logo--dark{ display:none; }

/* ── Section tabs ── */
.tabs{
  display:flex;
  align-items:flex-end;
  gap:26px;
  margin:0 auto;
  transform:translateX(10px);
}

.tab{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  color:var(--grey);
}

.tab__label{
  font-size:var(--tab-label);
  font-weight:600;
  letter-spacing:.02em;
}

.tab svg{
  width:var(--tab-icon);
  height:var(--tab-icon);
}

/* §6.3 — a line, not a pill, and only for the selected section.
   Hover deliberately does nothing to the underline: a grey line on
   hover reads as a second, weaker selection state. */
.tab__underline{
  height:4px;
  width:100%;
  border-radius:2px;
  background:transparent;
}

.tab.is-active{ color:var(--sec-color); }
.tab.is-active .tab__underline{ background:var(--sec-color); }

@media (hover:hover){
  .tab:hover{ color:var(--sec-color); }   /* colour only, never a line */
}

/* ── Avatar ── */
.avatar{
  display:flex;
  align-items:center;
  justify-content:center;
  width:var(--avatar);
  height:var(--avatar);
  border-radius:50%;
  overflow:hidden;
  background:color-mix(in srgb,var(--grey) 28%,transparent);
  color:var(--grey);
  flex:0 0 auto;
}

.avatar svg{ width:60%; height:60%; }

.avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Once a photo is saved it replaces the person outline, which is the
   circular photo slot the design draws here. */
.avatar.has-photo{ background:none; }
.avatar.has-photo svg{ display:none; }

/* ════════ Bottom bar (phone) ════════ */

.botbar{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  height:var(--botbar-h);
  padding:0 12px 14px;
  border-top:1px solid var(--hair);
  background:var(--bg);
  flex:0 0 auto;
}

@media (min-width:900px){ .botbar{ display:none; } }

.botbar .tab{
  width:64px;
  gap:4px;
  padding-top:10px;
}

.botbar .tab__underline{ width:var(--tab-underline-w); }

/* ════════ Phone navigation (§6.2) ════════
   The bar splits in two: the five sections move to the bottom bar,
   leaving [hamburger] [logo] [profile] across the top. */
@media (max-width:899px){
  .tabs{ display:none; }
  /* Unwrap the burger+logo pair so each lands in its own grid column,
     which is what centres the logo between them. */
  .topbar__left{ display:contents; }
}

/* ════════ Drawer ════════ */

/* §6.4 — the menu takes the colour of the section it was opened from,
   so you always know which environment you came from. */
.scrim{
  position:fixed;
  inset:0;
  z-index:8;
  background:rgba(0,0,0,.5);
  opacity:0;
  pointer-events:none;
  transition:opacity 260ms ease-out;
}

.scrim.is-open{ opacity:1; pointer-events:auto; }

.drawer{
  position:fixed;
  left:0;
  top:0;
  bottom:0;
  z-index:9;
  width:var(--drawer-w);
  max-width:420px;
  padding:var(--drawer-pad);
  background:var(--accent);
  /* No border-radius. The design file rounds this panel's left corners,
     but only because it sits inside a mockup <div> standing in for a
     phone with rounded corners. A real viewport has square corners, so
     copying that value cuts two notches out of the panel and shows the
     page behind it. Don't re-add it from the design. */
  display:flex;
  flex-direction:column;
  transform:translateX(-101%);
  transition:transform 300ms var(--ease);
}

.drawer.is-open{ transform:translateX(0); }

.drawer__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.drawer__title{
  font-size:var(--drawer-title);
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#FFF;
}

.drawer__close{
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  color:#FFF;
}

.drawer__nav{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--drawer-item-gap);
  margin-top:var(--drawer-items-mt);
}

.drawer__link{
  font-size:var(--drawer-item);
  font-weight:700;
  color:#FFF;
  transition:opacity 160ms ease-out;
}

@media (hover:hover){
  .drawer__link:hover{ opacity:.72; }
}

/* Two settings now — Appearance and Units — so the foot is a stack of
   groups rather than a single legend and row. The gap between the two
   groups is wider than the gap inside one, which is what stops the
   second legend from reading as a caption on the first pair. */
.drawer__foot{
  display:flex;
  flex-direction:column;
  gap:var(--drawer-group-gap);
  margin-top:auto;
}

.drawer__group{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.drawer__legend{
  font-size:var(--drawer-appearance);
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#FFF;
}

/* One pair of pills. Shared by Dark/Light and Metric/Imperial so the
   two settings cannot drift apart — they are the same control. */
.pills{ display:flex; gap:12px; }

.pills button{
  flex:1;
  padding:var(--drawer-btn-pad) 0;
  text-align:center;
  font-size:var(--drawer-btn);
  font-weight:700;
  color:#FFF;
  border:2px solid rgba(255,255,255,.35);
  border-radius:var(--drawer-btn-radius);
  background:transparent;
  opacity:.55;
}

.pills button[aria-pressed="true"]{
  border-color:#FFF;
  background:rgba(255,255,255,.16);
  opacity:1;
}

/* ════════ Square tiles — Nutrition, Flexibility, Shop ════════
   Label on top, artwork centred beneath it, on a filled
   section-colour card (§4.3).

   Everything inside scales from --tile-sq-fit, the tile's own
   computed size, using the design's own ratios (30/278 for the label,
   122/278 for the artwork, and so on). So when a short screen forces
   the tile to shrink, the type and artwork shrink with it and nothing
   can overflow. Container query units would be the other way to do
   this, but they cannot be used on the container that defines them.
   ═══════════════════════════════════════════════════════════════ */

.tiles--square{
  display:grid;
  grid-template-columns:repeat(var(--tile-sq-cols),var(--tile-sq-fit));
  grid-auto-rows:var(--tile-sq-fit);
  gap:var(--tile-sq-gap);
  justify-content:center;
  align-content:center;
  min-height:0;
}

.tile-sq{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:calc(var(--tile-sq-fit) * .05);
  padding:calc(var(--tile-sq-fit) * .086) calc(var(--tile-sq-fit) * .072);
  border-radius:calc(var(--tile-sq-fit) * .086);
  background:var(--accent);
  transition:transform 200ms ease-out;
  overflow:hidden;
}

.tile-sq__label{
  width:100%;
  text-align:center;
  font-size:calc(var(--tile-sq-fit) * .106);
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#FFF;
}

.tile-sq__art{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:0;
}

.tile-sq__art img{
  width:calc(var(--tile-sq-fit) * .50);
  height:calc(var(--tile-sq-fit) * .50);
  object-fit:contain;
  display:block;
  flex:0 0 auto;
}

/* ════════ Row tiles — Training levels ════════
   --tile-row-fit is the tile's height; the ratios come from the
   design's 64px icon / 20px eyebrow / 40px name on a 108px tile. */

.tiles--row{
  display:grid;
  grid-template-columns:repeat(var(--tile-row-cols),minmax(0,1fr));
  grid-auto-rows:var(--tile-row-fit);
  gap:var(--tile-row-gap) var(--tile-row-colgap);
  align-content:center;
  min-height:0;
}

.tile-row{
  display:flex;
  align-items:center;
  gap:calc(var(--tile-row-fit) * .23);
  padding:calc(var(--tile-row-fit) * .15) calc(var(--tile-row-fit) * .26);
  border-radius:calc(var(--tile-row-fit) * .20);
  background:var(--accent);
  transition:transform 200ms ease-out;
  overflow:hidden;
}

.tile-row img{
  width:calc(var(--tile-row-fit) * .66);
  height:calc(var(--tile-row-fit) * .66);
  object-fit:contain;
  display:block;
  flex:0 0 auto;
}

.tile-row__rule{
  width:2px;
  align-self:stretch;
  background:rgba(0,0,0,.35);
  flex:0 0 auto;
}

.tile-row__text{
  display:flex;
  flex-direction:column;
  gap:calc(var(--tile-row-fit) * .05);
  min-width:0;
}

.tile-row__eyebrow{
  font-size:calc(var(--tile-row-fit) * .19);
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#FFF;
}

.tile-row__name{
  font-size:calc(var(--tile-row-fit) * .38);
  font-weight:700;
  line-height:.9;
  color:#000;
}

@media (hover:hover){
  .tile-sq:hover,.tile-row:hover{ transform:translateY(-3px); }
}

/* ════════ Stat cards (Home) ════════
   §7.4 — square, solid section colour, black value / white label.
   Black on orange is ~6:1 and gives the number maximum weight.
   --stat-fit is the card's height. */

.stats{
  display:grid;
  grid-template-columns:repeat(2,var(--stat-fit));
  justify-content:center;
  grid-auto-rows:var(--stat-fit);
  gap:var(--stat-gap);
  width:100%;
  min-height:0;
}

@media (min-width:900px){
  .stats{
    grid-template-columns:repeat(2,var(--stat-fit));
    width:auto;
    align-content:start;
  }
}

.stat{
  display:flex;
  flex-direction:column;
  padding:calc(var(--stat-fit) * .11);
  border-radius:calc(var(--stat-fit) * .13);
  background:var(--accent);
  overflow:hidden;
}

.stat__label{
  font-size:calc(var(--stat-fit) * .14);
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-align:left;
  color:#FFF;
}

.stat__value{
  flex:1;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  min-height:0;
}

.stat__value > span{
  display:flex;
  align-items:baseline;
  gap:.1em;
}

.stat__value b,
.stat__value i{
  font-size:calc(var(--stat-fit) * .285);
  font-weight:700;
  line-height:.86;
  font-style:normal;
  color:#000;
}

/* ════════ Selection animations (§5.1) ════════
   Each icon plays a short move that suits what its shape actually is —
   the animation is character, not decoration.

   §5.2 rules, all honoured below: 250–400ms, ease-out, plays once, on
   selection only (never on hover, never on page load, never looping).
   The colour change stays instant — only the movement is animated, so
   the tap never feels laggy — and it never blocks navigation, since
   the screen has already rendered underneath. Reduced motion is
   handled globally in base.css.

   All five move roughly the same amount: if the lightning strike were
   dramatic and the leaf barely twitched, Training would read as the
   more important section. */

.tab svg{ transform-origin:50% 50%; }

/* Home — drops down a few pixels and settles, with a small overshoot. */
.tab.is-anim[data-sec="home"] svg{ animation:nav-home 320ms ease-out; }
@keyframes nav-home{
  0%  { transform:translateY(-26%); }
  62% { transform:translateY(7%); }
  100%{ transform:translateY(0); }
}

/* Training — the bolt draws itself top to bottom, then a quick flash
   of scale. The icons are <use> references into the sprite and CSS
   cannot reach into that shadow tree, but stroke-dasharray and
   stroke-dashoffset are inherited SVG properties, so setting them here
   reaches the referenced path. The path carries pathLength="1" so the
   dash maths is independent of its real length. The dash only exists
   while this class is on, so the icon returns to a solid outline. */
.tab.is-anim[data-sec="training"] svg{
  stroke-dasharray:1;
  animation:nav-training 360ms ease-out;
}
@keyframes nav-training{
  0%  { stroke-dashoffset:1; transform:scale(1); }
  55% { stroke-dashoffset:0; transform:scale(1); }
  72% { transform:scale(1.2); }
  100%{ stroke-dashoffset:0; transform:scale(1); }
}

/* Nutrition — unfurls: rotates upright from a tilt while scaling up
   from 90%, pivoting at the stem rather than the centre. */
.tab.is-anim[data-sec="nutrition"] svg{
  transform-origin:26% 82%;
  animation:nav-nutrition 340ms ease-out;
}
@keyframes nav-nutrition{
  0%  { transform:rotate(-18deg) scale(.9); }
  100%{ transform:rotate(0) scale(1); }
}

/* Flexibility — extends outward: the figure stretches wider, then
   eases back. */
.tab.is-anim[data-sec="flexibility"] svg{ animation:nav-flexibility 340ms ease-out; }
@keyframes nav-flexibility{
  0%  { transform:scaleX(1); }
  55% { transform:scaleX(1.3); }
  100%{ transform:scaleX(1); }
}

/* Shop — rolls in from the left with a small settle at the end. */
.tab.is-anim[data-sec="shop"] svg{ animation:nav-shop 360ms ease-out; }
@keyframes nav-shop{
  0%  { transform:translateX(-48%) rotate(-30deg); }
  72% { transform:translateX(5%) rotate(4deg); }
  100%{ transform:translateX(0) rotate(0); }
}


/* ════════ Page bar — Profile and Welcome ════════
   The design replaces the section navigation on these screens with a
   bar of their own: back chevron, logo, centred title. The phone
   artboard drops the logo and the bar's bottom border. */

.pagebar{
  display:grid;
  grid-template-columns:var(--pagebar-back) 1fr var(--pagebar-back);
  align-items:center;
  height:var(--pagebar-h);
  padding:var(--pagebar-pad);
  flex:0 0 auto;
}

@media (min-width:900px){
  .pagebar{
    display:flex;
    border-bottom:1px solid var(--hair);
  }
}

/* Same trick as the top bar: on phone the chevron and the logo are
   unwrapped so each lands in its own grid column. */
.pagebar__left{ display:contents; }

@media (min-width:900px){
  .pagebar__left{
    display:flex;
    align-items:center;
    gap:34px;
    padding-left:6px;
  }
}

.pagebar__back{
  display:flex;
  align-items:center;
  justify-content:center;
  width:var(--pagebar-back);
  height:var(--pagebar-back);
  color:var(--fg);
}

.pagebar__back svg{
  width:var(--pagebar-back-icon);
  height:var(--pagebar-back-icon);
}

.pagebar__title{
  margin:0;
  text-align:center;
  font-size:var(--pagebar-title);
  font-weight:700;
  letter-spacing:.02em;
  color:var(--fg);
}

@media (min-width:900px){
  .pagebar__title{ margin:0 auto; }
}

.pagebar__spacer{ width:var(--pagebar-back); }

.pagebar__logo{ height:var(--pagebar-logo); }

/* Phone Profile keeps only the chevron and the title. Welcome is the
   exception — the logo is the only branding on that screen. */
@media (max-width:899px){
  .pagebar:not(.pagebar--plain) .pagebar__logo{ display:none; }
}

.pagebar--plain{
  grid-template-columns:1fr;
  justify-items:center;
  justify-content:center;
}


/* ════════ Field cards ════════
   The design's own card: filled section colour, white uppercase
   label, black value. Phone lays it out as a row with the value on
   the right; desktop stacks label, rule and value.

   The value IS the input. Every control inside is stripped back to
   plain text, so the card at rest looks exactly like the artboard and
   there is nothing extra on screen to explain. */

.fields{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--field-gap);
  width:100%;
}

@media (min-width:900px){
  .fields{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .field--wide{ grid-column:1 / -1; }
}

.field{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:var(--field-pad);
  border-radius:var(--field-radius);
  background:var(--accent);
  min-width:0;
}

@media (min-width:900px){
  .field{
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:8px;
  }
}

/* A field that was left blank. Marked in black rather than a red:
   §1.4 gives the screen one accent colour, and an error red would be
   a second one. Black already carries the values on these cards, and
   the 2px rule inside them, so a solid black frame reads as part of
   the same vocabulary — at 4px it is impossible to scroll past. */
.field--bad{ box-shadow:inset 0 0 0 4px #000; }

/* The whole card is the control, so it says so: a caret over the
   cards you type into, a pointer over the ones that open a list. */
.field--text{ cursor:text; }
.field--pick{ cursor:pointer; }

.field__label{
  flex:0 0 auto;
  font-size:var(--field-label);
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#FFF;
}

/* The rule between label and value is desktop-only in the design. */
.field__rule{ display:none; }

@media (min-width:900px){
  .field__rule{
    display:block;
    height:2px;
    background:rgba(0,0,0,.35);
  }
}

/* flex:1 so the value area spans the card rather than hugging its
   own text — the whole of it is a tap target, not just the glyphs. */
.field__control{
  display:flex;
  align-items:baseline;
  justify-content:flex-end;
  gap:.14em;
  flex:1;
  min-width:0;
  font-size:var(--field-value);
  font-weight:700;
  color:#000;
}

@media (min-width:900px){
  .field__control{
    justify-content:flex-start;
    padding-top:6px;
    line-height:.9;
  }
}

/* An orange focus ring on an orange card is invisible, so inside a
   card the ring is black — the same colour the values already use. */
.field :focus-visible{ outline-color:#000; }

/* ── the controls ── */

.field__input,
.field__select,
.field__datebtn{
  min-width:0;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  font:inherit;
  color:inherit;
  -webkit-appearance:none;
  appearance:none;
}

.field__input{
  width:100%;
  text-align:right;
}

@media (min-width:900px){
  .field__input{ text-align:left; }
}

/* Numbers are sized to their own digits in JS, so the unit sits tight
   against the value whichever way the card is aligned. The spinner
   goes: it would put a visible control inside a card meant to read as
   plain text. */
.field__input--num{
  text-align:right;
  -moz-appearance:textfield;
}

.field__input--num::-webkit-outer-spin-button,
.field__input--num::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}

/* These wrappers take the whole row and follow the row's own
   alignment — left on desktop, right on phone — so what is inside
   them stays exactly where the artboard puts it while the space
   around it becomes part of the tap target. */
.field__num,
.field__choice,
.field__date{
  display:flex;
  align-items:baseline;
  justify-content:inherit;
  gap:.2em;
  flex:1;
  min-width:0;
}

.field__date{ position:relative; }

/* The artboard draws "78 kg" as one 40px line, so the unit is the
   same size as the number. §3's "units are set smaller" is about
   Home's info boxes, which are a different component and keep it. */
.field__unit{
  flex:0 0 auto;
  font-weight:700;
  font-style:normal;
  color:#000;
}

/* The activity note is the one string long enough to wrap a narrow
   desktop card, so it stays smaller. The design shows it on desktop
   only. */
.field__note{
  flex:0 0 auto;
  display:none;
  font-size:.55em;
  font-weight:700;
  font-style:normal;
  color:#000;
}

@media (min-width:900px){
  .field__note{ display:inline; }
}

.field__select{ cursor:pointer; }

/* Gender and Level have nothing beside them, so the select fills the
   row and a tap anywhere on it opens the list natively — which every
   browser does, unlike showPicker(). */
.field__select--full{ width:100%; }

/* The dropdown itself is drawn by the operating system and does not
   inherit the card's orange, so its rows are set explicitly —
   otherwise black text lands on a dark popup in dark mode. */
.field__select option{ background:#FFF; color:#000; }

/* These two fill the row so a tap anywhere on them counts, which
   means their own text-align — not the row's justify-content — is
   what puts the value where the artboard puts it: right on phone,
   left on desktop, the same as the typed fields. */
.field__datebtn,
.field__select--full{ text-align:right; }

@media (min-width:900px){
  .field__datebtn,
  .field__select--full{ text-align:left; }
}

.field__datebtn{ cursor:pointer; width:100%; }

/* ── empty ──
   A hint, never an answer: the value's own black, faded, and gone the
   moment something real is typed or chosen. opacity is reset because
   Firefox dims placeholders again on top of the colour. */
.field__input::placeholder{ color:rgba(0,0,0,.45); opacity:1; }

.field__select.is-empty,
.field__datebtn.is-empty{ color:rgba(0,0,0,.45); }

.field__select option:disabled{ color:rgba(0,0,0,.45); }

/* Rendered but invisible, and positioned inside the card so the
   platform's calendar opens next to the value it belongs to.
   showPicker() throws on an element that is display:none, which is
   why this is not simply hidden. */
.field__datepick{
  position:absolute;
  left:0;
  bottom:0;
  width:1px;
  height:1px;
  padding:0;
  border:0;
  opacity:0;
  pointer-events:none;
}

/* Only when showPicker is unavailable: the native field takes over. */
.field__date--native .field__datebtn{ display:none; }

.field__date--native .field__datepick{
  position:static;
  width:auto;
  height:auto;
  opacity:1;
  pointer-events:auto;
  background:transparent;
  font:inherit;
  color:inherit;
}


/* ════════ Photo ════════
   The circular slot the design draws above "Change photo". Empty, it
   falls back to the same person outline the top bar uses. */

.photo{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
}

@media (min-width:900px){
  .photo{ gap:22px; }
}

.photo__circle{
  display:flex;
  align-items:center;
  justify-content:center;
  width:var(--photo);
  height:var(--photo);
  border-radius:50%;
  overflow:hidden;
  flex:0 0 auto;
}

.photo__circle--empty{
  background:color-mix(in srgb,var(--grey) 28%,transparent);
  color:var(--grey);
}

.photo__circle svg{ width:46%; height:46%; }

.photo__circle:not(.photo__circle--empty) svg{ display:none; }

.photo__circle img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Text alone on phone, an outlined button on desktop — both from the
   artboards. */
.photo__btn{
  font-size:var(--photo-btn);
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--accent);
}

@media (min-width:900px){
  .photo__btn{
    padding:14px 26px;
    border:2px solid var(--accent);
    border-radius:16px;
  }
}


/* ════════ Buttons ════════
   Two of them. The filled one carries Save and Start; the grey
   outline is the shape the design draws under the avatar.

   White on #E84B02 is about 4.2:1, which §2.4 allows for buttons and
   bold labels — which is exactly what this is — and not for small
   captions, of which there are none. */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:var(--btn-pad);
  border:2px solid transparent;
  border-radius:var(--btn-radius);
  font-size:var(--btn-font);
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  transition:opacity 160ms ease-out;
}

.btn svg{
  flex:0 0 auto;
  width:var(--btn-icon);
  height:var(--btn-icon);
}

.btn--primary{
  background:var(--accent);
  color:#FFF;
  font-weight:800;
}

.btn--ghost{
  border-color:var(--grey);
  color:var(--grey);
}

.btn--block{ width:100%; }

@media (hover:hover){
  .btn:hover{ opacity:.78; }
}