/* TrueClays Cloud shell — on top of assets/designer/designer.css (the shared design system). */

html:has(body.cl-body) { height: auto; }
body.cl-body { min-height: 100vh; height: auto; }
.cl-main { flex: 1 0 auto; }
.cl-main .dz-landing { overflow: visible; }

/* header + second row: see cloud-header.css (shared with the older Bootstrap layout) */

/* footer */
.cl-footer { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; padding: 18px 16px 24px; color: var(--muted); font-size: 12px; border-top: 1px solid var(--line); }
.cl-footer a { color: var(--muted); text-decoration: none; }
.cl-footer a:hover { color: var(--text); }

/* ---------- home ---------- */
.cl-hello h1 { font-size: 28px; margin: 4px 0 6px; }
.cl-todo { display: grid; gap: 8px; }
.cl-todo a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; border: 1px solid #a16207; background: rgba(250, 204, 21, .06); color: var(--text); text-decoration: none; }
.cl-todo a:hover { background: rgba(250, 204, 21, .12); }
.cl-todo i { color: var(--yellow); font-size: 18px; }
.cl-todo b { color: var(--yellow); }

.cl-section { display: grid; gap: 10px; }
.cl-section > h2 { margin: 6px 0 0; font-size: 11px; font-weight: 700; letter-spacing: 2px; color: var(--muted); text-transform: uppercase; }
.cl-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); grid-auto-rows: 1fr; gap: 12px; }
.cl-tile { display: grid; grid-template-columns: 40px 1fr; gap: 2px 12px; align-items: start; padding: 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); text-decoration: none; color: var(--text); transition: border-color .15s, background .15s; }
.cl-tile:hover { border-color: var(--accent); background: var(--accent-wash); }
.cl-tile i { grid-row: span 2; font-size: 22px; width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface2); color: var(--accent-lt); }
.cl-tile b { font-size: 14px; }
.cl-tile span { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.cl-tile .cl-count { grid-column: 2; justify-self: start; margin-top: 4px; font-size: 11px; font-weight: 700; color: var(--accent-ink); background: var(--accent-lt); border-radius: 10px; padding: 0 8px; }
.cl-tile--dynamic i { color: var(--amber); }
.cl-tile--dynamic:hover { border-color: var(--amber); background: rgba(245, 158, 11, .08); }
.cl-tile--admin i { color: var(--red-lt); }

/* ---------- welcome (guests) ---------- */
/* The hero artwork carries its own wordmark, so the text goes underneath, not on top. */
.cl-hero { position: relative; border-bottom: 1px solid var(--line); }
.cl-hero img { display: block; width: 100%; height: clamp(200px, 38vw, 480px); object-fit: cover; object-position: center 30%; }
.cl-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(to bottom, rgba(16, 18, 21, 0), var(--bg)); pointer-events: none; }
.cl-hero-text { max-width: 1100px; margin: 0 auto; padding: 22px 16px 6px; }
.cl-hero-text h1 { font-size: clamp(28px, 5vw, 44px); line-height: 1.1; margin: 6px 0 10px; }
.cl-hero-text p { color: var(--muted); max-width: 620px; margin: 0 0 16px; }
.cl-hero-text .og-actions { gap: 10px; }

.cl-tile em { font-style: normal; }