/* ============================================================================
   Rekiva shared theme layer  —  SUPERSEDES the 11/04 handoff with Devan/Maya's
   11/05 design package (html_design_package_20261105: rekiva-theme.css 13.5KB +
   docs-home.html concept). The SUITE-WIDE visual standard: warm, colorful,
   confident. Tokens + shared rk-* components every product inherits.

   WHY THIS IS NAMESPACED AND NOT A VERBATIM FILE-SWAP (read before "simplifying"):
   Devan's package ships GENERIC selectors — .card .row .action .list .hero .badge
   .button .avatar .metric. The app's own app.css ALREADY defines .card (9×), .row
   (6×), .action (6×), .list (3×), .avatar (3×) and uses them on every screen
   (contacts, money, documents, settings, admin, invoicing, expenses…). Dropping the
   package's generic rules in here — loaded AFTER app.css — would silently restyle
   all of those across the whole app. So we port the 11/05 DESIGN (tokens, hero,
   metric cards, actions, rows, section heads) into the .rk-* / --rk-* namespace.
   Same look, zero collision. Screens that don't opt into .rk-home are untouched.
   (Devan's global body/* /button resets + the 860px .app shell are intentionally
   DROPPED — the app already owns the reset, page frame, topbar, sidenav, bottomnav.)

   Design decisions (so a later session doesn't reverse-engineer from pixels):
   - Palette refreshed to the 11/05 recovered vector pack: teal #008080, amber
     #ffbf00, deep teal #005d61, warm ivory canvas, 20px radius, softer dual shadow.
   - Hero: dark ink->teal gradient with CSS-drawn teal + amber curves, ONE small
     area of richer treatment. Copy is Devan's verbatim; no new tagline.
   - Money overview (metric cards) sits ABOVE quick actions per the 11/05 concept:
     icon + small label + big tabular amount. Plain-language labels "You owe" /
     "Owed to you" (Devan's concept) — the two directions, NEVER netted, each
     tappable into /money. (Was "Payables / Receivables" on 11/04.)
   - Quick actions: titled section, 2-col grid, ONE filled teal primary (Record
     payment), the rest light — never every action equally loud.
   - Section heads carry an optional right-aligned "View all ›" text-button.
   - Attention: one card, amber left rail, one reason+business+action per row;
     status is WORD + icon (never color alone). FULL compliance + money detail is
     preserved (amounts owed/uncovered, est. WC exposure, status tags, since-date,
     request-missing) — the brief + README require it; this is NOT the illustrative
     mockup's simplified row.
   - Icons: one illustrative SVG family (dark outline / white sheet / teal
     structure / amber accents) in _rk_icons.html. No emoji, no plain circles.
   - A product MAY set its own accent via --rk-accent on the .rk-home wrapper;
     the shell stays consistent. Docs = teal (default).
   ============================================================================ */

:root {
  --rk-ink:#20323d; --rk-muted:#586b73; --rk-teal:#008080; --rk-teal-deep:#005d61;
  --rk-yellow:#ffbf00; --rk-ivory:#fcfbf5; --rk-mint:#e7f5f0; --rk-surface:#fff;
  --rk-line:#dbe4e1; --rk-warning-bg:#fff7e1; --rk-warning-text:#72510c;
  --rk-shadow:0 3px 6px rgb(37 79 71 / .065), 0 12px 25px rgb(37 79 71 / .065);
  --rk-radius:20px;
  --rk-accent:var(--rk-teal);            /* per-product override point */
}

/* -- Home backdrop: warm ivory with a faint mint/teal radial tint. Scoped to
      the home wrapper so no other screen changes. ------------------------- */
.rk-home{
  position:relative;
  background:
    radial-gradient(ellipse at 60% 30%, #dff4ee 0, transparent 66%),
    linear-gradient(140deg, #fffaf0, #fcfcf8);
  border-radius:var(--rk-radius);
  padding:4px 2px 8px;
  margin:-4px -2px 0;             /* bleed the tint to the content gutter */
}

/* shared SVG icon sizing */
.rk-art{width:52px;height:58px;flex-shrink:0;display:block}
.rk-icon-sprite{position:absolute;width:0;height:0;overflow:hidden}

/* -- Section heads (title + optional "View all ›") ---------------------- */
.rk-section-head{display:flex;align-items:center;gap:10px;margin:22px 2px 11px}
.rk-section-head h2{font-size:22px;line-height:1.2;letter-spacing:-.6px;margin:0;font-weight:800;color:var(--rk-ink)}
.rk-section-head .rk-text-button{margin-left:auto}
/* legacy alias — same treatment for any screen still using .rk-section-title */
.rk-section-title{display:flex;align-items:center;gap:9px;margin:22px 2px 10px}
.rk-section-title h2{font-size:22px;line-height:1.2;letter-spacing:-.6px;margin:0;font-weight:800;color:var(--rk-ink)}
.rk-section-title .rk-more{margin-left:auto}

/* small borderless forward action ("View all ›", "My business ›", "Add ›") */
.rk-text-button,.rk-more{border:0;background:none;color:var(--rk-teal-deep);font-weight:750;font-size:14px;min-height:44px;padding:4px 2px;display:inline-flex;align-items:center;gap:6px;text-decoration:none;white-space:nowrap}

/* count badge (amber pill) */
.rk-badge,.rk-count{display:inline-flex;align-items:center;gap:5px;background:var(--rk-yellow);color:#3d360e;border-radius:999px;min-width:28px;justify-content:center;text-align:center;font-weight:800;padding:2px 9px;font-size:13px}
.rk-badge--gray{background:#edf0f0;color:#4a5961}

/* -- Hero ---------------------------------------------------------------- */
.rk-hero{
  position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(118deg,#293e47 0%,#06565c 66%,var(--rk-accent));
  color:#fff;border-radius:22px;padding:25px;min-height:150px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;box-shadow:var(--rk-shadow);
  margin:6px 0 4px;
}
.rk-hero:before,.rk-hero:after{content:"";position:absolute;z-index:-1;pointer-events:none;border-radius:50%;transform:rotate(-24deg)}
.rk-hero:before{width:370px;height:120px;right:-65px;bottom:-70px;background:#00b9ac55;border-top:3px solid #85fff3;box-shadow:0 -4px 15px #45ffed55}
.rk-hero:after{width:230px;height:90px;right:-100px;bottom:0;background:linear-gradient(135deg,#ffe495,#ffbf00);border-top:2px solid #fff3c2}
.rk-hero-text{min-width:0}
.rk-hero h1{font-size:clamp(25px,5.4vw,36px);letter-spacing:-.8px;line-height:1.14;margin:0 0 7px;max-width:440px;font-weight:800;color:#fff}
.rk-hero p{margin:0;color:#e8f3ef;font-size:17px}
.rk-hero .rk-art{width:84px;height:84px;margin-left:auto;filter:drop-shadow(0 4px 5px #003b3b66)}

/* -- Card primitive ------------------------------------------------------ */
.rk-card{background:linear-gradient(145deg,#fff,#fdfefd);border:1px solid var(--rk-line);border-radius:var(--rk-radius);box-shadow:var(--rk-shadow)}

/* -- Money overview: 2-col metric cards, big tabular total over its label - */
.rk-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:4px}
.rk-metric{display:flex;align-items:center;gap:12px;text-align:left;padding:16px 15px;width:100%;text-decoration:none;color:var(--rk-ink)}
.rk-metric .rk-art{width:46px;height:52px}
.rk-metric-body{min-width:0}
.rk-metric .rk-label{display:block;font-weight:700;font-size:14px;color:var(--rk-muted)}
/* big tabular total — sized so the longest money string still fits the narrow 2-col card */
.rk-metric strong{display:block;font-size:clamp(19px,5vw,30px);letter-spacing:-.8px;font-variant-numeric:tabular-nums;line-height:1.2;margin-top:3px;white-space:nowrap}
.rk-metric strong.muted{color:var(--rk-muted);font-weight:700}
.rk-metric .rk-metric-go{display:block;font-size:13px;color:var(--rk-teal-deep);font-weight:700;margin-top:2px}

/* -- Quick actions: 2-col, one filled primary --------------------------- */
.rk-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.rk-action{display:flex;align-items:center;gap:13px;text-align:left;min-height:108px;padding:16px 14px;font-size:clamp(16px,4.4vw,20px);font-weight:800;line-height:1.18;letter-spacing:-.35px;text-decoration:none;color:var(--rk-ink)}
.rk-action .rk-art{width:52px;height:58px}
.rk-action--primary{background:linear-gradient(125deg,#009596,#00747a);border-color:#00747a;color:#fff;box-shadow:0 6px 14px #007f8230}
.rk-action--primary span{color:#fff}

/* -- Lists / rows (attention, recent) ----------------------------------- */
.rk-list{overflow:hidden;list-style:none;margin:0;padding:0}
.rk-list--attention{border-left:5px solid var(--rk-yellow)}
.rk-row{display:flex;align-items:center;gap:12px;padding:15px 16px;min-height:80px;text-decoration:none;color:var(--rk-ink)}
.rk-row+.rk-row{border-top:1px solid var(--rk-line)}
.rk-row .rk-art{width:44px;height:49px}
.rk-row-body{min-width:0;flex:1}
.rk-row-body strong{font-size:16px;line-height:1.25;display:block;font-weight:800}
.rk-row-body p{font-size:13px;color:var(--rk-muted);margin:4px 0 0}
.rk-row-go{font-size:14px;white-space:nowrap;color:var(--rk-teal-deep);font-weight:750}
.rk-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.rk-tag{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;border:1px solid var(--rk-line);text-decoration:none;min-height:30px;line-height:1}
.rk-tag--amber{background:var(--rk-warning-bg);color:var(--rk-warning-text);border-color:#e7c35a}
.rk-tag--teal{background:var(--rk-mint);color:var(--rk-teal-deep);border-color:#bfe4dc}
/* uncovered-exposure notice inside the attention card (Devan's .notice) */
.rk-exposure{background:var(--rk-warning-bg);border-top:1px solid #efdfac;padding:11px 16px;color:var(--rk-warning-text);font-size:12.5px;border-radius:0 0 var(--rk-radius) var(--rk-radius)}
.rk-exposure strong{color:var(--rk-warning-text)}
.rk-amber-ink{color:var(--rk-warning-text);font-weight:800}

/* -- Utilities row (secondary forward links under activity) ------------- */
.rk-utilities{display:flex;gap:12px;margin:17px 0 0}
.rk-utilities>*{flex:1;justify-content:center}

/* -- Empty state --------------------------------------------------------- */
.rk-empty{color:var(--rk-muted);font-size:14px;background:var(--rk-mint);border:1px dashed #bfe4dc;border-radius:var(--rk-radius);padding:16px 15px;margin:0}

/* -- Responsive: README check widths 320 / 390 / 430 / desktop ----------- */
@media(min-width:600px){
  .rk-action{min-height:112px;padding:20px;gap:20px}
  .rk-action .rk-art{width:62px;height:66px}
  .rk-hero{min-height:158px;padding:28px}
  .rk-hero .rk-art{width:100px;height:100px}
  .rk-metric{padding:18px 20px}
  .rk-row{padding:16px 18px}
}
@media(max-width:359px){
  .rk-action{padding:12px 10px;gap:8px;font-size:15px;min-height:96px}
  .rk-action .rk-art{width:42px;height:47px}
  .rk-hero{padding:18px 16px;gap:8px;min-height:132px}
  .rk-hero .rk-art{width:58px;height:58px}
  .rk-metric{gap:7px;padding:13px 10px}
  .rk-metric .rk-art{width:32px;height:38px}
  .rk-metric strong{font-size:22px}
  .rk-row{gap:9px;padding:12px 11px}
  .rk-section-head h2,.rk-section-title h2{font-size:20px}
}
/* Dark theme: the app ships its own dark mode. Keep rk surfaces readable —
   lift ink text, don't invert the (intentionally warm) hero. */
@media(prefers-color-scheme:dark){
  .rk-home{background:
    radial-gradient(ellipse at 60% 30%, #0e2a2a 0, transparent 66%),
    linear-gradient(140deg,#141a1e,#111715);}
  .rk-card,.rk-metric,.rk-row{background:#1a2227;color:#e8eeec;border-color:#2b383c}
  .rk-section-head h2,.rk-section-title h2,.rk-row-body strong{color:#f1f5f3}
  .rk-metric .rk-label,.rk-row-body p{color:#9fb0ac}
  .rk-empty{background:#16211f;border-color:#2b4a44;color:#9fb0ac}
}