/* Client area demo: shared by the landing page (landing/public/portal-demo.css, a copy)
   and the new site. Colours fall back between the two sites' variable names. */
.portal { --p-ink: var(--color-ink, var(--ink, #111)); --p-text: var(--color-text, var(--text, #3d3d3d)); --p-muted: var(--color-muted, var(--muted, #5e5e5e)); --p-rule: var(--color-rule, var(--rule, #e6e6e6)); --p-panel: var(--color-panel, var(--panel, #f4f4f2)); color: var(--p-ink); }
.portal-eyebrow { font: 500 12px var(--font-mono, var(--mono, monospace)); letter-spacing: .06em; color: var(--p-muted); }
.portal h1 { margin: 8px 0 12px; font-size: clamp(34px, 5vw, 56px); line-height: 1.05; letter-spacing: -.02em; }
.portal-intro { margin: 0 0 32px; max-width: 640px; font-size: 18px; line-height: 1.5; color: var(--p-text); }
.portal-board { border-top: 6px solid var(--p-rule); padding-top: 20px; }
.portal-greeting { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; align-items: baseline; margin-bottom: 24px; }
.portal-greeting b { font-size: 22px; }
.portal-greeting span { font: 400 13px var(--font-mono, var(--mono, monospace)); color: var(--p-muted); }
.portal-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 24px; margin-bottom: 48px; }
.portal-tile { padding-top: 16px; border-top: 6px solid; }
.portal-tile small { display: block; font: 400 13px var(--font-mono, var(--mono, monospace)); color: var(--p-muted); }
.portal-tile strong { display: block; margin: 4px 0 2px; font-size: 24px; line-height: 1.2; }
.portal-tile span { font-size: 14px; color: var(--p-text); }
.portal-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 48px; }
.portal h2 { margin: 0 0 12px; font-size: 20px; }
.portal-block + .portal-block { margin-top: 40px; }
.portal-bar { height: 8px; border-radius: 4px; background: var(--p-panel); overflow: hidden; margin: 8px 0 6px; }
.portal-bar i { display: block; height: 100%; background: var(--p-ink); }
.portal-small { font-size: 14px; color: var(--p-text); }
.portal-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--p-rule); }
.portal-list li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--p-rule); font-size: 16px; }
.portal-st { font: 500 13px var(--font-mono, var(--mono, monospace)); white-space: nowrap; }
.portal-st[data-s="done"], .portal-st[data-s="paid"], .portal-st[data-s="active"] { color: #007a00; }
.portal-st[data-s="progress"], .portal-st[data-s="open"], .portal-st[data-s="requested"] { color: #b35c00; }
.portal-st[data-s="received"] { color: #0072c4; }
.portal button.portal-btn { min-height: 40px; padding: 0 16px; border-radius: 20px; border: 1px solid var(--p-ink); background: #fff; color: var(--p-ink); font: 500 14px inherit; font-family: inherit; cursor: pointer; }
.portal button.portal-btn:hover { background: var(--p-ink); color: #fff; }
.portal button.portal-btn.primary { background: var(--p-ink); color: #fff; }
.portal-form { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.portal-form label { font-size: 14px; color: var(--p-text); }
.portal-form textarea { min-height: 80px; padding: 10px 12px; border: 1px solid #c8c8c8; border-radius: 8px; font: 16px/1.4 inherit; font-family: inherit; resize: vertical; }
.portal-form .row { display: flex; gap: 8px; flex-wrap: wrap; }
.portal-error { margin: 0; font-size: 14px; color: #c0182c; }
.portal-note { margin: 8px 0 0; font-size: 14px; color: var(--p-muted); }
.portal-addons { display: flex; flex-wrap: wrap; gap: 8px; }
.portal-addon { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 20px; border: 1px solid #d4d4d4; background: #fff; font: 14px inherit; font-family: inherit; color: var(--p-ink); }
button.portal-addon { cursor: pointer; }
button.portal-addon:hover { border-color: var(--p-ink); }
.portal-cta { margin-top: 64px; padding: clamp(24px, 5vw, 48px); border-radius: 8px; background: var(--p-panel); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 32px; }
.portal-cta h2 { margin: 0 0 4px; font-size: clamp(22px, 2.6vw, 30px); }
.portal-cta p { margin: 0; color: var(--p-text); }
.portal-cta a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 22px; background: var(--p-ink); color: #fff; text-decoration: none; font-weight: 500; }