/* ============================================================
   ruzayo.css — the whole system, ready to drop in.
   One file. No build step. No framework.

   1. Load the two typefaces (see the <link> in the Build Kit).
   2. Link this file.
   3. Use the classes below. Nothing else is needed.
   ============================================================ */

:root {
  /* --- colour ------------------------------------------------ */
  --rz-moss:        #22372C;   /* primary surfaces, primary button */
  --rz-oat:         #EFE7DC;   /* the page itself. never white     */
  --rz-shell:       #F7F2E9;   /* raised panels and cards          */
  --rz-terracotta:  #9E5231;   /* the exit, the one thing that wants you */
  --rz-amber:       #E0A040;   /* live quantities, held things     */
  --rz-sage:        #7F9A82;   /* quiet support, secondary marks   */
  --rz-ink:         #1B211C;   /* body text                        */
  --rz-slate:       #4E5A50;   /* secondary text. AA on oat        */
  --rz-cream:       #FBF7EF;   /* text on terracotta. solid, never alpha */
  --rz-bone:        #F3EDE3;   /* text on moss                     */

  /* tints — pre-composited so contrast stays predictable */
  --rz-tint-moss:   rgba(34,55,44,0.06);
  --rz-tint-sage:   rgba(127,154,130,0.22);
  --rz-tint-terra:  rgba(158,82,49,0.13);
  --rz-tint-amber:  rgba(224,160,64,0.22);
  --rz-rule:        rgba(34,55,44,0.12);
  --rz-rule-strong: rgba(34,55,44,0.18);

  /* --- type -------------------------------------------------- */
  --rz-font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --rz-font-ui:      'Familjen Grotesk', system-ui, sans-serif;

  --rz-size-display: clamp(44px, 6vw, 88px);
  --rz-size-title:   clamp(30px, 3.4vw, 50px);
  --rz-size-section: 26px;
  --rz-size-lead:    19px;
  --rz-size-body:    16px;
  --rz-size-fact:    14.5px;
  --rz-size-label:   12px;

  /* --- space ------------------------------------------------- */
  --rz-space-1: 6px;
  --rz-space-2: 12px;
  --rz-space-3: 20px;
  --rz-space-4: 34px;
  --rz-space-5: 56px;
  --rz-space-6: 110px;

  /* --- shape ------------------------------------------------- */
  --rz-radius-capsule: 999px;
  --rz-radius-panel:   26px;
  --rz-radius-tile:    22px;
  --rz-radius-deep-a:  110px 26px 110px 26px;
  --rz-radius-deep-b:  26px 110px 26px 110px;
  --rz-radius-vessel:  68% 32% 46% 54% / 40% 58% 42% 60%;

  /* A deep corner eats its own content unless padding clears its arc.
     inset = R − √(R² − (R − dy)²), where dy is how far down the content starts.
     110px corner, content 46px down → needs 21px.
     We pad 52px, which still clears if the top edge tightens to 16px. */
  --rz-deep-min-padding: 52px;
  --rz-scale-ratio: 1.28;

  /* --- depth ------------------------------------------------- */
  --rz-shadow-held: 0 40px 70px -40px rgba(27,33,28,0.55);
  --rz-pool-amber:  radial-gradient(58% 66% at 50% 58%, rgba(224,160,64,0.28), rgba(224,160,64,0) 72%);

  /* --- motion ------------------------------------------------ */
  --rz-ease-settle: cubic-bezier(0.2, 0, 0, 1);
  --rz-dur-settle:  260ms;
  --rz-dur-swell:   420ms;
  --rz-dur-arrive:  340ms;
  --rz-dur-leave:   180ms;
}

/* ============================================================
   BASE
   ============================================================ */

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

body {
  margin: 0;
  background: var(--rz-oat);
  color: var(--rz-ink);
  font-family: var(--rz-font-ui);
  font-size: var(--rz-size-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--rz-moss); text-decoration: none; }
a:hover { color: var(--rz-terracotta); }

/* ============================================================
   TYPE
   ============================================================ */

.rz-display, .rz-title, .rz-section {
  font-family: var(--rz-font-display);
  font-weight: 400;
  letter-spacing: -0.03em;
  margin: 0;
  text-wrap: pretty;
}
.rz-display { font-size: var(--rz-size-display); line-height: 0.96; letter-spacing: -0.04em; }
.rz-title   { font-size: var(--rz-size-title);   line-height: 1.02; }
.rz-section { font-size: var(--rz-size-section); line-height: 1.16; letter-spacing: -0.02em; }

.rz-lead { font-size: var(--rz-size-lead); line-height: 1.62; color: #3C4740; margin: 0; }
.rz-fact { font-size: var(--rz-size-fact); font-weight: 600; font-variant-numeric: tabular-nums; }

.rz-label {
  font-size: var(--rz-size-label);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rz-slate);
}
.rz-label--accent { color: var(--rz-terracotta); }

/* ============================================================
   LAYOUT
   ============================================================ */

.rz-page { max-width: 1480px; margin: 0 auto; padding: 0 var(--rz-space-5); }

/* Reflows on its own content. Use this before you reach for a media query. */
.rz-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--rz-col, 280px), 1fr));
  gap: var(--rz-space-3);
  align-items: start;          /* never stretch: bottom-anchored bars need this */
}

.rz-panel {
  background: var(--rz-shell);
  border: 1.5px solid var(--rz-rule);
  border-radius: var(--rz-radius-panel);
  padding: var(--rz-space-4) var(--rz-space-4);
}
.rz-panel--moss  { background: var(--rz-moss); border-color: transparent; color: var(--rz-bone); }
.rz-panel--terra { background: var(--rz-terracotta); border-color: transparent; color: var(--rz-cream); }
.rz-panel--sage  { background: var(--rz-tint-sage); border-color: transparent; }

/* Deep asymmetric corners. Padding is raised to clear the arc — do not lower it. */
.rz-panel--deep-a { border-radius: var(--rz-radius-deep-a); padding: 46px var(--rz-deep-min-padding); }
.rz-panel--deep-b { border-radius: var(--rz-radius-deep-b); padding: 46px var(--rz-deep-min-padding); }

/* ============================================================
   THE MARK — small, large, small. Never four the same.
   ============================================================ */

.rz-mark { display: inline-flex; align-items: center; gap: 4px; }
.rz-mark i { border-radius: 50%; display: inline-block; font-style: normal; }
.rz-mark i:nth-child(1) { width: 9px;  height: 9px;  background: var(--rz-dot-l, var(--rz-terracotta)); }
.rz-mark i:nth-child(2) { width: 19px; height: 19px; background: var(--rz-dot-m, var(--rz-moss)); }
.rz-mark i:nth-child(3) { width: 9px;  height: 9px;  background: var(--rz-dot-r, var(--rz-sage)); }

/* On a terracotta surface all three dots take one ink, or the left one vanishes. */
.rz-panel--terra .rz-mark,
.rz-on-terra { --rz-dot-l: var(--rz-cream); --rz-dot-m: var(--rz-cream); --rz-dot-r: var(--rz-cream); }
.rz-panel--moss .rz-mark { --rz-dot-m: var(--rz-bone); }

.rz-wordmark {
  font-family: var(--rz-font-display);
  font-weight: 500;
  font-size: 25px;
  letter-spacing: -0.02em;
  color: var(--rz-moss);
}
/* Under 20px the middle dot stands in alone. */
.rz-mark--small i:nth-child(1), .rz-mark--small i:nth-child(3) { display: none; }

/* ============================================================
   CONTROLS — capsules, 44px minimum, always.
   ============================================================ */

.rz-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 24px;
  border: none;
  border-radius: var(--rz-radius-capsule);
  background: var(--rz-moss);
  color: var(--rz-bone);
  font-family: var(--rz-font-ui);
  font-size: var(--rz-size-fact);
  font-weight: 700;
  cursor: pointer;
  transition: background var(--rz-dur-leave) var(--rz-ease-settle);
}
.rz-btn:hover  { background: #1A2C23; }
.rz-btn--ghost { background: transparent; border: 1.5px solid var(--rz-rule-strong); color: var(--rz-moss); }
.rz-btn--ghost:hover { background: var(--rz-tint-moss); }
.rz-btn--exit  { background: var(--rz-terracotta); color: var(--rz-cream); }
.rz-btn--exit:hover { background: #8E4527; }
.rz-btn[disabled] { opacity: 0.4; cursor: default; }

.rz-input {
  width: 100%;
  min-height: 46px;
  padding: 13px 22px;
  border: 1.5px solid var(--rz-rule-strong);
  border-radius: var(--rz-radius-capsule);
  background: #FFFFFF;
  font-family: var(--rz-font-ui);
  font-size: var(--rz-size-fact);
  color: var(--rz-ink);
}
.rz-input::placeholder { color: var(--rz-slate); }
.rz-input:invalid { border-color: var(--rz-terracotta); background: rgba(158,82,49,0.08); }

/* Focus is never removed and never colour-only. */
:where(.rz-btn, .rz-input, button, select, textarea, a, [tabindex]):focus-visible {
  outline: 2px solid var(--rz-terracotta);
  outline-offset: 2px;
}

/* ============================================================
   STATE — a dot AND the word. Colour never carries meaning alone.
   ============================================================ */

.rz-state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--rz-radius-capsule);
  background: var(--rz-tint-moss);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--rz-moss);
}
.rz-state::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}
.rz-state--listening { background: var(--rz-tint-sage);  color: var(--rz-moss); }
.rz-state--held      { background: var(--rz-tint-amber); color: #3A2708; }
.rz-state--wants     { background: var(--rz-tint-terra); color: #8E4527; }
.rz-state--refused   { background: rgba(178,58,50,0.14); color: #8A2B24; }
.rz-state--resting   { background: var(--rz-tint-moss);  color: var(--rz-slate); }

/* ============================================================
   ROWS — the workhorse. The dot gutter is always reserved,
   or rows without a dot shift left and the list goes ragged.
   ============================================================ */

.rz-row {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: baseline;
  min-height: 44px;
  padding: 14px 22px;
  border-radius: var(--rz-radius-tile);
  background: var(--rz-tint-moss);
}
.rz-row + .rz-row { margin-top: 4px; }
.rz-row__dot { width: 8px; height: 8px; border-radius: 50%; background: transparent; align-self: start; margin-top: 6px; }
.rz-row__body { min-width: 0; }
.rz-row__title { font-size: var(--rz-size-fact); font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.rz-row__detail { font-size: 13px; line-height: 1.5; color: var(--rz-slate); overflow-wrap: anywhere; margin-top: 3px; }
.rz-row__meta { font-size: 12.5px; font-weight: 700; color: var(--rz-slate); white-space: nowrap; }
.rz-row--selected { background: var(--rz-tint-sage); }

/* ============================================================
   TABLES — every column needs a floor, or it collapses below
   its own content and words split mid-syllable.
   ============================================================ */

.rz-table { background: var(--rz-tint-moss); border-radius: var(--rz-radius-tile); padding: 8px; }
.rz-table__head,
.rz-table__row {
  display: grid;
  grid-template-columns: var(--rz-cols, repeat(auto-fit, minmax(72px, 1fr)));
  gap: 14px;
  padding: 15px 20px;
  align-items: center;
}
.rz-table__head { padding-block: 12px; }
.rz-table__row {
  background: var(--rz-shell);
  border-radius: var(--rz-radius-tile);
  margin-bottom: 4px;
}
.rz-table__cell { min-width: 0; overflow-wrap: anywhere; line-height: 1.45; }
/* Never truncate a value a person may need to copy. */

/* ============================================================
   THE VESSEL — the signature element. One per view, always
   holding a real figure. Give it an aria-label.
   ============================================================ */

.rz-vessel {
  position: relative;
  aspect-ratio: 0.88;
  border-radius: var(--rz-radius-vessel);
  background: linear-gradient(155deg, #2A4436, #1C2E25);
  box-shadow: var(--rz-shadow-held);
  overflow: hidden;
  color: var(--rz-bone);
}
.rz-vessel::before {                     /* the light inside */
  content: "";
  position: absolute;
  left: 10%; top: 14%; width: 62%; height: 52%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(224,160,64,0.36), rgba(224,160,64,0) 72%);
}
.rz-vessel__body {
  position: relative;
  height: 100%;
  padding: 18% 18% 20%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.rz-vessel__figure { font-family: var(--rz-font-display); font-size: 44px; font-weight: 500; color: var(--rz-amber); line-height: 1; }

/* The one licensed diagonal. Once per composition, never twice. */
.rz-stroke {
  position: absolute;
  right: -3%; top: 24%;
  width: 132px; height: 3px;
  background: var(--rz-terracotta);
  transform: rotate(-36deg);
}

/* ============================================================
   MOTION — it lands. Nothing overshoots, nothing bounces.
   ============================================================ */

@keyframes rz-arrive { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes rz-swell  { 50% { transform: scale(1.05); } }

.rz-arrive { animation: rz-arrive var(--rz-dur-arrive) var(--rz-ease-settle) both; }
.rz-swell  { animation: rz-swell var(--rz-dur-swell) var(--rz-ease-settle); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 160ms !important;
  }
  .rz-arrive { animation: none; opacity: 1; transform: none; }
}

/* ============================================================
   ACCESSIBLE NAMES — the three gaps found in review, closed.
   These are markup rules. CSS cannot fix them alone, so the
   required markup is written here beside the class it applies to.
   ============================================================ */

/* Visually hidden, still announced. For a table caption, or a
   control's name where the design has no room for visible text. */
.rz-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 1 · THE VESSEL carries a real figure, so it is an image with a name:

     <div class="rz-vessel" role="img"
          aria-label="9.8 GB held under herstudio.com">
       <div class="rz-vessel__figure" aria-hidden="true">9.8 GB</div>

   The figure is hidden from the reader because the label already says
   it. Announcing it twice is worse than not announcing it once. */

/* 2 · THE TABLE is a grid of divs, so it needs the roles a real table
   gets for free. Every .rz-table takes:

     <div class="rz-table" role="table" aria-labelledby="keys-caption">
       <div class="rz-table__head" role="row">
         <span class="rz-table__cell" role="columnheader">Key</span>
       <div class="rz-table__row" role="row">
         <span class="rz-table__cell" role="cell">rz_live_…c241</span>

   Any wrapper between the table and its rows takes role="presentation",
   or the association breaks silently. Under 600px the grid reflows to
   one cell per line: keep the roles and add a visible label per cell —
   a headerless column is unreadable to a screen reader and to a thumb
   alike. */

/* 3 · ICON-ONLY CONTROLS have no text node, so they have no name.
   Each takes aria-label; the glyph inside takes aria-hidden="true".
   No exception for an obvious icon — obvious is a visual property. */
.rz-btn--icon { width: 44px; min-height: 44px; padding: 0; }

/* ============================================================
   BREAKPOINTS — only the three that genuinely need one.
   Everything else reflows on content via .rz-grid.
   ============================================================ */

@media (max-width: 1023px) {
  .rz-shell { grid-template-columns: 1fr; }       /* rail becomes a drawer */
  .rz-page  { padding-inline: var(--rz-space-4); }
}

@media (max-width: 599px) {
  .rz-page { padding-inline: var(--rz-space-3); }
  .rz-panel--deep-a, .rz-panel--deep-b { border-radius: var(--rz-radius-panel); padding: var(--rz-space-4) var(--rz-space-3); }
  .rz-stroke { display: none; }                   /* the diagonal needs room */
}