/* ============================================================
   Arbah v3 — ClientHome (client portal) surface styles
   Source: design/arbah-v3/project/clienthome.css — scoped under .av3.
   Calm palette: success / bronze / info, no red (per chat1 spec).
   ============================================================ */

.av3 .client-page .kpi-strip { grid-template-columns:repeat(4,1fr); }

/* welcome header */
.av3 .welcome h1 { font-family:var(--font-serif); font-size:30px; font-weight:600; color:var(--arbah-ink); line-height:1.1; letter-spacing:-.3px; }
[dir="rtl"] .av3 .welcome h1 { font-family:var(--font-sans-ar); }
.av3 .welcome .villa { margin-top:7px; font-size:14px; color:var(--arbah-ink-muted); display:flex; align-items:center; gap:7px; }
.av3 .welcome .villa .loc-ico { color:var(--arbah-bronze-500); }

/* HERO progress card */
.av3 .card-hero { background:var(--arbah-surface); border:1px solid var(--arbah-border); border-radius:var(--r-12); box-shadow:var(--shadow-card); padding:24px 26px; position:relative; overflow:hidden; }
.av3 .card-hero::after { content:""; position:absolute; inset-inline-end:-40px; top:-40px; width:200px; height:200px; background:radial-gradient(circle, rgba(160,106,44,.07), transparent 70%); pointer-events:none; }
.av3 .hero-top { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; row-gap:10px; }
.av3 .hero-eyebrow { font-family:var(--font-mono); font-size:10.5px; letter-spacing:1.4px; text-transform:uppercase; color:var(--arbah-ink-muted); }
.av3 .ribbon { display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; white-space:nowrap; padding:6px 12px; border-radius:999px; background:var(--arbah-success-soft); color:var(--arbah-success); border:1px solid #A7E3CB; }
.av3 .ribbon .r-num { font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.av3 .hero-pct { font-family:var(--font-serif); font-size:60px; font-weight:600; line-height:1; color:var(--arbah-ink); font-variant-numeric:tabular-nums; letter-spacing:-1px; margin:16px 0 4px; }
.av3 .hero-pct bdi { font-family:var(--font-mono); }
.av3 .hero-pbar { height:10px; border-radius:999px; background:var(--arbah-surface-raised); overflow:hidden; margin:14px 0 16px; }
.av3 .hero-pbar > i { display:block; height:100%; border-radius:999px; background:linear-gradient(90deg, var(--arbah-navy-500), var(--arbah-navy-700)); }
.av3 .hero-bottom { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.av3 .hero-sub { font-size:12.5px; color:var(--arbah-ink-subtle); display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.av3 .hero-sub bdi { font-family:var(--font-mono); }

/* attention card */
.av3 .section-card { background:var(--arbah-surface); border:1px solid var(--arbah-border); border-radius:var(--r-12); box-shadow:var(--shadow-card); overflow:hidden; }
.av3 .section-card .sc-head { padding:15px 18px 13px; border-bottom:1px solid var(--arbah-border); }
.av3 .section-card .sc-title { font-family:var(--font-serif); font-size:18px; font-weight:600; color:var(--arbah-ink); }
[dir="rtl"] .av3 .section-card .sc-title { font-family:var(--font-sans-ar); }
.av3 .att-row { display:flex; align-items:center; gap:13px; padding:14px 18px; border-bottom:1px solid var(--arbah-border); }
.av3 .att-row:last-child { border-bottom:none; }
.av3 .att-ico { width:38px; height:38px; border-radius:var(--r-8); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.av3 .att-ico.bronze { background:var(--arbah-bronze-100); color:var(--arbah-bronze-700); }
.av3 .att-ico.info { background:var(--arbah-info-soft); color:var(--arbah-info); }
.av3 .att-ico.success { background:var(--arbah-success-soft); color:var(--arbah-success); }
.av3 .att-body { flex:1; min-width:0; }
.av3 .att-body .att-title { font-size:14px; color:var(--arbah-ink); font-weight:600; }
.av3 .att-body .att-title bdi { font-family:var(--font-mono); }
.av3 .att-body .att-note { font-size:12px; color:var(--arbah-ink-muted); margin-top:1px; }

/* updates feed */
.av3 .upd-row { display:flex; align-items:center; gap:12px; padding:13px 18px; border-bottom:1px solid var(--arbah-border); }
.av3 .upd-row:last-child { border-bottom:none; }
.av3 .upd-av { width:34px; height:34px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:11px; font-weight:600; color:#fff; }
.av3 .upd-body { flex:1; min-width:0; font-size:13px; color:var(--arbah-ink-muted); line-height:1.4; }
.av3 .upd-body .u-actor { color:var(--arbah-ink); font-weight:700; }
.av3 .upd-body .u-target { font-family:var(--font-serif); font-style:italic; color:var(--arbah-ink); }
[dir="rtl"] .av3 .upd-body .u-target { font-family:var(--font-sans-ar); font-style:normal; font-weight:600; }
.av3 .upd-time { font-family:var(--font-mono); font-size:11.5px; color:var(--arbah-ink-subtle); white-space:nowrap; flex-shrink:0; }

/* photos strip */
.av3 .photos-strip { display:flex; gap:12px; overflow-x:auto; scrollbar-width:none; padding-bottom:4px; margin-inline:-2px; padding-inline:2px; }
.av3 .photos-strip::-webkit-scrollbar { display:none; }
.av3 .photo-card { flex-shrink:0; width:168px; cursor:pointer; }
.av3 .photo-thumb { width:168px; height:112px; border-radius:var(--r-8); overflow:hidden; position:relative; border:1px solid var(--arbah-border); background:var(--arbah-surface-raised); }
.av3 .photo-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.av3 .photo-thumb .ph-ico { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.7); }
.av3 .photo-cap { font-size:12.5px; font-weight:600; color:var(--arbah-ink); margin-top:8px; line-height:1.3; }
.av3 .photo-date { font-family:var(--font-mono); font-size:11px; color:var(--arbah-ink-subtle); margin-top:2px; }

/* layout helpers */
.av3 .two-col { display:grid; grid-template-columns:1.1fr 1fr; gap:18px; align-items:start; }

@container app (max-width: 760px) {
  .av3 .client-page .kpi-strip { grid-template-columns:none; }
  .av3 .two-col { grid-template-columns:1fr; }
  .av3 .welcome h1 { font-size:25px; }
  .av3 .hero-pct { font-size:50px; }
  .av3 .card-hero { padding:20px; }
}