/* Customer portal. Brand tokens come from brand.css. */
.site-header .wrap { flex-wrap: nowrap; }
.portal-main { padding-top: 40px; padding-bottom: 40px; display: grid; gap: 24px; max-width: 980px; }
.eyebrow { margin-bottom: 10px; }
.lede { font-size: 18px; color: var(--ink-soft); max-width: 46ch; margin: 14px 0 22px; }
h1 { font-size: clamp(32px, 5vw, 46px); }
h2 { font-size: 22px; margin-bottom: 12px; }

.panel-lite { display: grid; gap: 4px; justify-items: start; }
.lookup { padding: 24px; display: grid; gap: 16px; width: 100%; max-width: 480px; margin-bottom: 18px; }
.form-error { background: #FBE3D9; border: var(--line); border-radius: 8px; padding: 12px 14px; font-weight: 600; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.repair-head { display: grid; gap: 10px; }
.meta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; color: var(--ink-soft); }

/* Same status colours as the tech app */
.status { display: inline-block; font-size: 14px; font-weight: 600; padding: 5px 10px; border-radius: 6px; border: 1.5px solid var(--ink); }
.s-new { background: var(--sun); }
.s-scheduled { background: #DCE7F7; }
.s-in_progress { background: var(--rust); color: #fff; }
.s-waiting_parts, .s-waiting_customer { background: #F3E3D3; }
.s-ready { background: var(--pine); color: #fff; }
.s-closed { background: var(--rain); color: var(--ink-soft); border-color: var(--ink-soft); }

.progress-card { padding: 24px; display: grid; gap: 16px; box-shadow: 6px 6px 0 var(--ink); }
.progress { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.progress li { display: grid; gap: 8px; font-size: 15px; color: var(--ink-soft); position: relative; }
.progress .dot { height: 14px; border: 2px solid var(--ink); background: var(--paper); }
.progress li.done { color: var(--ink); }
.progress li.done .dot { background: var(--pine); }
.progress li.current { color: var(--ink); font-weight: 800; }
.progress li.current .dot { background: var(--rust); }
.callout { background: var(--rain); border-radius: 8px; padding: 12px 14px; font-weight: 600; }
.callout.hot { background: var(--sun); border: var(--line); }
.updated { font-size: 14px; }

.portal-grid { display: flex; flex-wrap: wrap; gap: 20px; align-items: start; }
.portal-grid > :first-child { flex: 999 1 420px; min-width: 0; }
.portal-grid > :last-child { flex: 1 1 300px; min-width: 0; }
.pad { padding: 22px; }

.feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.feed-item { border-left: 4px solid var(--rain-deep); padding: 4px 0 4px 14px; display: grid; gap: 4px; }
.feed-item.k-update { border-left-color: var(--pine); }
.feed-item.k-status { border-left-color: var(--sun); }
.feed-item.k-message { border-left-color: var(--rust); }
.feed-head { display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; font-size: 14px; }
.feed-body { white-space: pre-wrap; }

.msg-form { display: grid; gap: 14px; margin-top: 14px; }
.portal-foot { padding: 24px 20px 48px; font-size: 14px; }

@media (max-width: 600px) {
  .progress { grid-template-columns: minmax(0, 1fr); }
  .progress li { grid-template-columns: 22px 1fr; align-items: center; }
  .progress .dot { height: 18px; }
}