/* Portal — customer-facing shell. Deliberately NOT Helm's: comfort density,
   ~720px reading measure, plain English, one accent (per tenant). Colors
   arrive as CSS variables on <body> from validated hex only. */
:root { color-scheme: light; }
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh;
  background: var(--bg, #f5f5f7); color: #1c1c1e;
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
/* Branding v2 (helm-client-portal #11): an optional tenant background image
   served from this origin, a black veil over it, and a card colour whose ink
   the server picks by luminance. Every fallback is the P0 value, so a tenant
   without the v2 keys paints exactly as before. */
body.has-bg {
  background-image: var(--bg-img); background-size: cover;
  background-position: center; background-repeat: no-repeat;
}
.veil { position: fixed; inset: 0; background: rgb(0 0 0 / var(--veil, 0)); pointer-events: none; }
.veil + .center { position: relative; }
a { color: var(--accent, #2b5fd9); }
.center { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.card {
  width: min(400px, 100%); background: var(--card, #fff); color: var(--ink, #1c1c1e);
  border: 1px solid var(--card-line, #e3e3e6); border-radius: 14px;
  padding: 40px 36px; text-align: center;
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 16px 40px -24px rgba(0,0,0,.25);
}
.logo img { max-height: 56px; max-width: 220px; }
h1 { font-size: 1.25rem; margin: 18px 0 6px; }
.card p { margin: 0; color: var(--ink2, #5d5d63); font-size: .95rem; white-space: pre-line; }
.btn {
  display: block; width: 100%; margin-top: 26px; padding: 12px; border-radius: 9px;
  border: 1px solid var(--accent, #2b5fd9); background: var(--accent, #2b5fd9); color: #fff;
  font-size: .95rem; text-decoration: none; text-align: center; cursor: pointer;
}
.btn.muted { background: #fafafa; color: #8e8e93; border-color: #d4d4d8; cursor: default; }
.foot { margin-top: 22px; font-size: .75rem; color: var(--ink3, #a1a1a6); }

/* signed-in shell */
.shell { max-width: 760px; margin: 0 auto; padding: 28px 20px 60px; }
.top { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid #e3e3e6; }
.top img { max-height: 36px; max-width: 160px; }
.top .who { margin-left: auto; font-size: .85rem; color: #5d5d63; display: flex; gap: 10px; align-items: center; }
.top form { margin: 0; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--accent, #2b5fd9); font: inherit; cursor: pointer; text-decoration: underline; }
h2 { font-size: 1.1rem; margin: 24px 0 12px; }
.list { list-style: none; margin: 0; padding: 0; border: 1px solid #e3e3e6; border-radius: 12px; background: #fff; overflow: hidden; }
.list li { border-bottom: 1px solid #eee; }
.list li:last-child { border-bottom: 0; }
.list a { display: flex; gap: 14px; align-items: baseline; padding: 14px 18px; text-decoration: none; color: inherit; }
.list a:hover { background: #fafafa; }
.list .s { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status { font-size: .78rem; padding: 2px 9px; border-radius: 999px; background: #eef2ff; color: #2b4ca8; white-space: nowrap; }
.status.closed { background: #f1f1f3; color: #6e6e73; }
.when { font-size: .8rem; color: #8e8e93; white-space: nowrap; }
.empty { padding: 36px 18px; text-align: center; color: #6e6e73; }
.msg { background: #fff; border: 1px solid #e3e3e6; border-radius: 12px; padding: 16px 18px; margin-bottom: 12px; }
.msg.customer { border-color: color-mix(in srgb, var(--accent, #2b5fd9) 40%, #e3e3e6); }
.msg .by { font-size: .82rem; color: #6e6e73; margin-bottom: 8px; display: flex; gap: 10px; }
.msg .by b { color: #1c1c1e; }
.body { font-size: .95rem; line-height: 1.6; overflow-wrap: anywhere; }
.body img { display: none; }  /* belt: projection dropped images; render never shows one */
.body p { margin: 0 0 .6em; }
.back { display: inline-block; margin: 18px 0 6px; font-size: .9rem; }