/* Token blocks removed: tokens.css owns every custom property, and a
   second :root here loads later and re-pins the light values at equal
   specificity. That is what stopped dark mode resolving. */
/* ======================================================================
   RECILENS — components.css
   Promoted from /v2/styleguide.html, which stays the visual reference.

   Depends on tokens.css and adds nothing to it. Every value here resolves
   through a token; if a component needs a colour, a radius or a duration
   that tokens.css does not define, that is a design decision and it belongs
   there first.

   Class prefix is deliberate: these names travel onto pages that still
   carry the old stylesheets, and an unprefixed `.card` would collide.
   ====================================================================== */

/* ======================================================================
   TOKENS — the only place a literal colour is allowed to appear.
   Everything below styles through these. Grep rule for GLOBAL VERIFY:
   a hex outside this block (or an HTML comment) is a bug.
   ====================================================================== */

@media (min-width:768px){ .wrap{ padding-inline:24px; } }

@media (min-width:1280px){ .wrap{ padding-inline:32px; } }

/* ---------- page furniture ---------- */
.topbar{
  position:sticky; top:0; z-index:var(--z-nav);
  background:color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--hairline);
}

@supports not (backdrop-filter:blur(8px)){ .topbar{ background:var(--surface); } }

@media (min-width:768px){ section{ padding-block:96px; } }

@media (min-width:1280px){ section{ padding-block:128px; } }

/* A grid item defaults to min-width:auto, so a child that cannot shrink -
   an <input>, which carries an intrinsic size - pushes the whole track wider
   than the column and the page scrolls sideways. This is the single most
   common cause of horizontal overflow and it is fixed once, here. */
.grid>*,.states>*{ min-width:0; }

/* ---------- 1. colour ---------- */
.sw{ border:1px solid var(--hairline); border-radius:var(--r-md);
     overflow:hidden; background:var(--surface); }

/* ---------- 2. type ---------- */
.type-row{ display:grid; grid-template-columns:1fr; gap:4px;
           padding-block:16px; border-bottom:1px solid var(--hairline); }

/* ---------- 3. spacing ---------- */
.bar{ background:var(--accent); height:16px; border-radius:var(--r-sm); }

/* ---------- 4. depth ---------- */
.depth{ background:var(--surface); border-radius:var(--r-md); padding:24px;
        border:1px solid var(--hairline); }

/* ---------- 5. icons ---------- */
.icons{ display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:16px; }

/* ---------- 6. components ---------- */
.states{ display:grid; gap:16px;
         grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); }

.rc-btn{
  font:inherit; font-size:var(--fs-14); font-weight:600;
  padding:12px 20px; min-height:44px;
  border-radius:999px; border:1px solid transparent;
  background:var(--accent); color:#fff;            /* white on accent, both themes */
  cursor:pointer; transition:transform var(--t-sm) var(--ease),
              box-shadow var(--t-sm) var(--ease), background var(--t-sm) var(--ease);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
}

.rc-btn:hover{ box-shadow:var(--shadow-2); }

.rc-btn:active{ transform:translateY(1px); }

.rc-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.rc-btn[disabled]{ opacity:.45; cursor:not-allowed; }

.rc-btn.sec{ background:transparent; color:var(--text); border-color:var(--hairline); }

.rc-btn.ter{ background:transparent; color:var(--accent); padding-inline:4px;
          border-radius:var(--r-sm); min-height:auto; }

.rc-btn.is-ok{ background:var(--ok); }

.rc-btn.is-err{ background:var(--err); }

.rc-spin{ width:16px; height:16px; border-radius:50%;
       border:2px solid rgba(255,255,255,.35); border-top-color:#fff;
       animation:spin 700ms linear infinite; }

@keyframes spin{ to{ transform:rotate(360deg); } }

.rc-field{ display:grid; gap:6px; min-width:0; }

.rc-field label{ font-size:var(--fs-12); color:var(--text-2); }

.rc-field input,.rc-field textarea,.rc-field select{
  font:inherit; font-size:16px;                    /* 16px minimum or iOS zooms */
  width:100%; min-width:0; max-width:100%;
  padding:10px 12px; min-height:44px;
  color:var(--text); background:var(--surface);
  border:1px solid var(--hairline); border-radius:var(--r-sm);
  transition:border-color var(--t-sm) var(--ease);
}

.rc-field input:focus-visible,.rc-field textarea:focus-visible,.rc-field select:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px; border-color:var(--accent);
}

.rc-field.ok input{ border-color:var(--ok); }

.rc-field.err input{ border-color:var(--err); }

.rc-msg{ font-size:var(--fs-12); }

.rc-msg.ok{ color:var(--ok); }

.rc-msg.err{ color:var(--err); }

.rc-card{ background:var(--surface); border:1px solid var(--hairline);
   border-radius:var(--r-md); overflow:hidden; box-shadow:var(--shadow-1);
   transition:transform var(--t-sm) var(--ease), box-shadow var(--t-sm) var(--ease),
              border-color var(--t-sm) var(--ease); }

.rc-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-2);
   border-color:color-mix(in srgb, var(--royal) 20%, var(--hairline)); }

.rc-card .thumb{ aspect-ratio:16/10; background:var(--surface-2); overflow:hidden; }

.rc-card .thumb>div{ width:100%; height:100%;
   background:linear-gradient(120deg, var(--surface-2), var(--bg));
   transition:transform var(--t-md) var(--ease); }

.rc-card:hover .thumb>div{ transform:scale(1.03); }

.rc-card .body{ padding:16px; display:grid; gap:8px; }

.rc-badge{ display:inline-flex; align-items:center; gap:6px;
   font-size:var(--fs-12); font-weight:600; padding:4px 10px;
   border-radius:999px; border:1px solid var(--hairline); color:var(--text-2); }

.rc-badge.ok{ color:var(--ok); border-color:color-mix(in srgb,var(--ok) 30%,transparent); }

.rc-badge.warn{ color:var(--warn); border-color:color-mix(in srgb,var(--warn) 30%,transparent); }

.rc-badge.err{ color:var(--err); border-color:color-mix(in srgb,var(--err) 30%,transparent); }

.rc-acc{ border:1px solid var(--hairline); border-radius:var(--r-md);
      background:var(--surface); overflow:hidden; }

.rc-acc h3{ margin:0; font-family:var(--font-body); font-size:var(--fs-16); }

.rc-acc button{ width:100%; text-align:left; font:inherit; font-weight:600;
   background:none; border:0; padding:16px; min-height:44px; cursor:pointer;
   color:var(--text); display:flex; justify-content:space-between; gap:12px; }

.rc-acc button:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }

.rc-acc .rc-panel{ display:grid; grid-template-rows:0fr;
   transition:grid-template-rows var(--t-md) var(--ease); }

.rc-acc[data-open="1"] .rc-panel{ grid-template-rows:1fr; }

.rc-acc .rc-panel>div{ overflow:hidden; }

.rc-acc .rc-panel p{ padding:0 16px 16px; color:var(--text-2); font-size:var(--fs-14); }

.rc-chev{ transition:transform var(--t-sm) var(--ease); }

.rc-acc[data-open="1"] .rc-chev{ transform:rotate(180deg); }

.rc-tabs{ border-bottom:1px solid var(--hairline); display:flex; gap:4px; }

.rc-tabs button{ font:inherit; font-size:var(--fs-14); background:none; border:0;
   padding:12px 16px; min-height:44px; cursor:pointer; color:var(--text-2);
   border-bottom:2px solid transparent; }

.rc-tabs button[aria-selected="true"]{ color:var(--text); border-bottom-color:var(--royal); }

.rc-tabs button:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }

.rc-tabpanel{ padding-top:16px; color:var(--text-2); font-size:var(--fs-14); }

.rc-toast{ display:flex; align-items:center; gap:12px;
   background:var(--surface); border:1px solid var(--hairline);
   border-left:3px solid var(--ok);
   border-radius:var(--r-md); padding:12px 16px; box-shadow:var(--shadow-2); }

.rc-toast.err{ border-left-color:var(--err); }

.rc-backdrop{ position:absolute; inset:0; z-index:var(--z-backdrop);
   background:rgba(11,16,32,.45); backdrop-filter:blur(8px);
   display:grid; place-items:center; padding:16px; }

@supports not (backdrop-filter:blur(8px)){ .rc-backdrop{ background:rgba(11,16,32,.72); } }

.rc-modal{ z-index:var(--z-modal); background:var(--surface); color:var(--text);
   border-radius:var(--r-md); padding:24px; max-width:420px; width:100%;
   box-shadow:var(--shadow-3); display:grid; gap:12px; }

.rc-tablewrap{ position:relative; overflow-x:auto; border:1px solid var(--hairline);
   border-radius:var(--r-md); background:var(--surface); }

.rc-tablewrap::after{ content:""; position:sticky; right:0; top:0; float:right;
   width:32px; height:100%; pointer-events:none;
   background:linear-gradient(90deg,transparent,var(--surface)); }

table{ border-collapse:collapse; width:100%; min-width:520px; font-size:var(--fs-14); }

th,td{ text-align:left; padding:12px 16px; border-bottom:1px solid var(--hairline);
   white-space:nowrap; }

td.num{ font-variant-numeric:tabular-nums; text-align:right; }

th:first-child,td:first-child{ position:sticky; left:0; background:var(--surface); }

.rc-pager{ display:flex; gap:4px; align-items:center; }

.rc-pager a{ min-width:44px; min-height:44px; display:grid; place-items:center;
   border-radius:var(--r-sm); color:var(--text-2); text-decoration:none;
   font-size:var(--fs-14); font-variant-numeric:tabular-nums; }

.rc-pager a[aria-current]{ color:var(--text); border:1px solid var(--hairline); }

.rc-crumb{ display:flex; gap:8px; align-items:center; font-size:var(--fs-14);
   color:var(--text-2); flex-wrap:wrap; }

.rc-crumb a{ color:var(--text-2); }

.rc-link{ color:var(--text); text-decoration:none;
   background-image:linear-gradient(var(--royal),var(--royal));
   background-repeat:no-repeat; background-position:0 100%;
   background-size:0% 1px; transition:background-size var(--t-sm) var(--ease); }

.rc-link:hover,.rc-link:focus-visible{ background-size:100% 1px; }

.rc-fab{ width:56px; height:56px; border-radius:50%; border:0; cursor:pointer;
   background:var(--accent); color:#fff; display:grid; place-items:center;
   box-shadow:var(--shadow-2); }

.rc-fab:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.rc-panel-chat{ width:min(300px,100%); background:var(--surface); border-radius:var(--r-md);
   border:1px solid var(--hairline); box-shadow:var(--shadow-3); padding:16px;
   display:grid; gap:8px; }

.rc-panel-chat .powered{ font-size:var(--fs-12); color:var(--text-2);
   border-top:1px solid var(--hairline); padding-top:8px; margin-top:4px; }

/* ---------- 7. watermarks ---------- */
.wm{ position:relative; height:200px; border:1px solid var(--hairline);
   border-radius:var(--r-md); overflow:hidden; background:var(--surface);
   display:grid; place-items:center; }

/* ---------- 8. empty states ---------- */
.rc-empty{ border:1px dashed var(--hairline); border-radius:var(--r-md);
   padding:32px 24px; display:grid; gap:12px; justify-items:start;
   background:var(--surface); }

.rc-empty h3{ font-family:var(--font-body); font-size:var(--fs-20); font-weight:600; }