/*
 * app.planbaseestimating.com: the account portal's layout, on top of base.css.
 * Two kinds of page:
 *   .cs      "Accounts are coming soon" (and not found): the website's /account/ page
 *   .portal  the portal: a top bar, a left rail of sections, the page on paper
 */

/* ===== the Planbase brand (as website/src/components/Brand.astro) ======== */
.pb-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--brand-navy); text-decoration: none; }
.pb-brand:hover { color: var(--brand-navy); }
.pb-mark { width: 36px; height: 36px; flex: none; display: block; }
.pb-wm { display: grid; gap: 3px; }
.pb-wm b { font: 700 1.5rem/0.9 var(--ds-font-condensed); letter-spacing: 0.04em; color: var(--brand-navy); }
.pb-wm small { font: 500 0.6rem/1 var(--ds-font-ui); letter-spacing: 0.3em; color: var(--brand-slate); }
[hidden] { display: none !important; }
.lead { font-size: 1.08rem; color: var(--ds-fg-muted); max-width: 64ch; }
.ic { width: 24px; height: 24px; display: block; }

/* ===== coming soon ============================================================ */
body.cs { display: flex; flex-direction: column; }
.cs main { flex: 1; }
.cs-top { background: var(--ds-surface); border-bottom: 1px solid var(--ds-border-strong); }
.cs-top .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: 64px; }
.cs-back { font-size: 0.9rem; }
.cs-head { padding: var(--s7) 0 var(--s5); }
.cs-head h1 { font-size: clamp(2rem, 4.5vw, 3rem); }
.cs-section { padding: var(--s6) 0; }
.cs-surface { background: var(--ds-surface); border-top: 1px solid var(--ds-border); border-bottom: 1px solid var(--ds-border); }
.cs-cloud {
  border: 1.5px dashed var(--ds-accent-600); border-radius: 18px;
  padding: var(--s5); background: var(--ds-bg-canvas);
}
.cs-cloud-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 var(--s4); max-width: none; }
.cs-cloud-title .label { margin: 0; color: var(--ds-fg); }
.cs-cells { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.cs-cell .ic { margin-bottom: var(--s3); color: var(--ds-accent-600); }
.cs-cell h3 { margin-bottom: 4px; }
.cs-cell p { margin: 0; color: var(--ds-fg-muted); font-size: 0.94rem; }
.cs-split { display: grid; gap: var(--s5); grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: center; }
.cs-split h2 { font-size: 1.9rem; margin: 0; }
.cs-foot { border-top: 1px solid var(--ds-border); padding: var(--s4) 0; font-size: 0.85rem; color: var(--ds-fg-muted); }
.cs-foot .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s3); }

/* ===== the portal ============================================================== */
.portal {
  min-height: 100vh; display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "top top" "rail main" "status status";
}
.portal[data-state="bare"], .portal[data-state="loading"] { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "main" "status"; }
.p-top {
  grid-area: top; position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--s4); min-height: 56px; padding: 0 var(--s4);
  background: var(--ds-surface); border-bottom: 1px solid var(--ds-border-strong);
}
.p-top .pb-mark { width: 30px; height: 30px; }
.p-top .pb-wm b { font-size: 1.25rem; }
.p-ws { display: inline-flex; align-items: center; gap: 6px; padding: 4px 0 4px var(--s3); border-left: 1px solid var(--ds-border); font-weight: 500; font-size: 0.92rem; }
.p-ws select { width: auto; min-height: 30px; padding: 3px 8px; }
.p-end { margin-left: auto; display: inline-flex; align-items: center; gap: var(--s3); }
.p-user { font-size: 0.88rem; color: var(--ds-fg-muted); max-width: 26ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.p-rail {
  grid-area: rail; display: flex; flex-direction: column; gap: 2px;
  padding: var(--s4) var(--s3); border-right: 1px solid var(--ds-border); background: var(--ds-surface);
}
.p-rail a {
  display: block; padding: 8px 12px; border-radius: var(--ds-radius-md);
  color: var(--ds-fg); text-decoration: none; font-weight: 500; font-size: 0.94rem;
}
.p-rail a:hover { background: var(--ds-bg-hover); color: var(--ds-fg); }
.p-rail a[aria-current="page"] { background: var(--ds-accent-tint); color: var(--ds-accent); box-shadow: inset 3px 0 0 var(--ds-accent); }
.p-rail .p-rail-foot { margin-top: auto; color: var(--ds-fg-muted); font-size: 0.86rem; font-weight: 400; }

.p-main { grid-area: main; padding: var(--s5) var(--s6) var(--s7); max-width: 1080px; width: 100%; }
.p-main:focus { outline: none; }
.portal[data-state="bare"] .p-main, .portal[data-state="loading"] .p-main { margin: 0 auto; max-width: 720px; }
.p-loading { padding: var(--s6) 0; }
.p-head { margin: 0 0 var(--s5); }
.p-head h1 { font-size: 2.1rem; margin-bottom: 0.25em; }
.p-stats { margin: 0 0 var(--s4); }
.p-stats .stat .label { margin-bottom: 4px; }
.p-stats .stat .small { margin: 4px 0 0; }
.p-panel-actions { margin-top: var(--s4); }
.p-status {
  grid-area: status; display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s3);
  padding: 8px var(--s4); border-top: 1px solid var(--ds-border); background: var(--ds-surface);
  font-size: 0.82rem; color: var(--ds-fg-muted);
}

/* sign-in, sign-up: Clerk's component under our heading */
.p-auth { padding: var(--s5) 0; }
.p-auth h1 { font-size: 2.2rem; }
.p-clerk { margin-top: var(--s4); min-height: 360px; }

/* welcome and invitations */
.p-welcome { padding: var(--s4) 0; }
.p-welcome-form { max-width: 440px; }
.p-checks { padding-left: 1.2em; margin: 0 0 var(--s4); }
.p-checks li { margin-bottom: 4px; }
.p-invites { border-color: var(--ds-accent-600); }
.p-invite { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s2) 0; border-top: 1px solid var(--ds-border); }
.p-invite:first-of-type { border-top: 0; }
.p-person { display: grid; gap: 2px; }
.p-person small { color: var(--ds-fg-muted); font-size: 0.82rem; }
.p-link { margin-top: var(--s2); }
.p-link input { flex: 1 1 320px; font-family: var(--ds-font-mono); font-size: 0.85rem; }

@media (max-width: 820px) {
  .portal { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "rail" "main" "status"; }
  .p-rail { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--ds-border); padding: var(--s2); }
  .p-rail a { white-space: nowrap; }
  .p-rail a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--ds-accent); }
  .p-rail .p-rail-foot { margin-top: 0; }
  .p-main { padding: var(--s4) var(--s4) var(--s6); }
  .p-top .pb-wm, .p-user { display: none; }
  .cs-split { grid-template-columns: 1fr; }
}