/* ==========================================================================
   ArchiTask — Page-level compositions
   ========================================================================== */

/* --------------------------------------------------------------------------
   Auth (login / signup)
   -------------------------------------------------------------------------- */
.auth {
  min-height: 100vh; min-height: 100dvh;
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--surface);
}
.auth-panel {
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--s8) var(--s7);
  overflow-y: auto;
}
.auth-inner { width: 100%; max-width: 380px; margin: 0 auto; animation: rise-in var(--t-slow) var(--ease-out) both; }
.auth-brand { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s8); }
.auth-brand .rail-logo { width: 36px; height: 36px; flex-basis: 36px; }
/* Scoped to the wordmark. `.auth-brand span` also matched .rail-logo —
   the mark is itself a span — and at 0-1-1 it beat the logo's own rule,
   forcing display:block so the glyph fell out of its centred grid. */
.auth-brand .auth-wordmark b { font-size: var(--fs-16); font-weight: 660; letter-spacing: -.015em; }
.auth-brand .auth-wordmark span { display: block; font-size: var(--fs-11); color: var(--text-3); }
.auth h1 { font-size: var(--fs-24); font-weight: 660; letter-spacing: -.025em; }
.auth .lede { color: var(--text-2); font-size: var(--fs-14); margin-top: 6px; }
.auth form { margin-top: var(--s6); display: flex; flex-direction: column; gap: var(--s4); }
.auth .alt { margin-top: var(--s5); font-size: var(--fs-13); color: var(--text-2); text-align: center; }
.auth .forgot { font-size: var(--fs-12); font-weight: 560; }

.auth-demo {
  margin-top: var(--s5); padding: var(--s3) var(--s4);
  border: 1px dashed var(--border-strong); border-radius: var(--r-md);
  background: var(--surface-2);
  font-size: var(--fs-12); color: var(--text-2);
}
.auth-demo b { color: var(--text); }
.auth-demo code {
  font-family: var(--mono); font-size: var(--fs-11);
  background: var(--surface-3); padding: 1px 5px; border-radius: var(--r-sm);
}
.auth-demo .btn { margin-top: var(--s3); }

.auth-sep { display: flex; align-items: center; gap: var(--s3); color: var(--text-3); font-size: var(--fs-11); }
.auth-sep::before, .auth-sep::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--border); }

/* Marketing side */
.auth-aside {
  position: relative; overflow: hidden;
  background: #17150f;
  color: #fff;
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--s8) var(--s7);
}
.auth-aside::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at 65% 35%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse at 65% 35%, #000 20%, transparent 78%);
}
.auth-aside > * { position: relative; }
.auth-aside .eyebrow { color: #5cc9a7; }
.auth-aside h2 {
  font-size: var(--fs-30); font-weight: 660; letter-spacing: -.03em; line-height: 1.15;
  margin-top: var(--s3); max-width: 15ch;
}
.auth-aside p { color: #c8c0bb; font-size: var(--fs-14); margin-top: var(--s4); max-width: 42ch; line-height: 1.6; }
.auth-aside .stats { display: flex; gap: var(--s7); margin-top: var(--s8); flex-wrap: wrap; }
.auth-aside .stats b { display: block; font-size: var(--fs-24); font-weight: 660; letter-spacing: -.02em; }
.auth-aside .stats span { display: block; font-size: var(--fs-12); color: #8f9bb0; margin-top: 2px; }
.auth-aside .feature-list { margin-top: var(--s8); display: flex; flex-direction: column; gap: var(--s3); }
.auth-aside .feature-list li { display: flex; align-items: center; gap: var(--s3); font-size: var(--fs-13); color: #d5dae4; }
.auth-aside .feature-list svg { width: 16px; height: 16px; color: #4cc94c; flex: 0 0 16px; }

@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; }
  .auth-aside { display: none; }
  .auth-panel { padding: var(--s6) var(--s4); }
}

/* --------------------------------------------------------------------------
   Project cards
   -------------------------------------------------------------------------- */
.pcard {
  display: flex; flex-direction: column;
  overflow: hidden; text-decoration: none; color: inherit;
  animation: rise-in var(--t-slow) var(--ease-out) both;
}
.pcard:hover { text-decoration: none; }
.pcard-body { padding: var(--s5); display: flex; flex-direction: column; gap: var(--s4); flex: 1 1 auto; }
.pcard-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); }
.pcard-code { font-size: var(--fs-11); font-weight: 620; color: var(--text-3); letter-spacing: .05em; }
.pcard-name { font-size: var(--fs-15); font-weight: 620; letter-spacing: -.01em; line-height: 1.35; margin-top: 3px; }
.pcard-client { font-size: var(--fs-12); color: var(--text-2); margin-top: 3px; display: flex; align-items: center; gap: 5px; }
.pcard-client svg { width: 13px; height: 13px; flex: 0 0 13px; color: var(--text-3); }
.pcard-meta { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); }
.pcard-meta > div { min-width: 0; }
.pcard-meta dt { font-size: var(--fs-11); color: var(--text-3); font-weight: 560; }
.pcard-meta dd { margin: 2px 0 0; font-size: var(--fs-13); font-weight: 620; font-variant-numeric: tabular-nums; }
.pcard-foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: var(--s3) var(--s5);
  border-top: 1px solid var(--border);
  font-size: var(--fs-11); color: var(--text-3);
}

/* --------------------------------------------------------------------------
   Project detail
   -------------------------------------------------------------------------- */
.pdetail-hero {
  display: flex; align-items: flex-start; gap: var(--s5); flex-wrap: wrap;
  padding: var(--s5);
}
.pdetail-hero .grow { min-width: 240px; }
.pdetail-title { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.pdetail-title h1 { font-size: var(--fs-24); font-weight: 660; letter-spacing: -.025em; }
.pdetail-sub { color: var(--text-2); font-size: var(--fs-13); margin-top: 4px; }
.pdetail-stats { display: flex; gap: var(--s6); flex-wrap: wrap; margin-top: var(--s5); }
.pdetail-stats > div dt { font-size: var(--fs-11); color: var(--text-3); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.pdetail-stats > div dd { margin: 4px 0 0; font-size: var(--fs-18); font-weight: 650; font-variant-numeric: tabular-nums; }
.pdetail-stats > div dd small { font-size: var(--fs-12); font-weight: 500; color: var(--text-3); }
.pdetail-tabs { padding: 0 var(--s5); border-top: 1px solid var(--border); }

.tab-panel { animation: rise-in var(--t-med) var(--ease-out) both; }

/* Material rows */
.mat-row { display: flex; align-items: center; gap: var(--s4); }
.mat-row .mat-name { min-width: 0; }
.mat-row .mat-name b { display: block; font-size: var(--fs-13); font-weight: 600; }
.mat-row .mat-name span { display: block; font-size: var(--fs-11); color: var(--text-3); }
.mat-fill { flex: 1 1 140px; min-width: 90px; }

/* --------------------------------------------------------------------------
   Team
   -------------------------------------------------------------------------- */
.person-card { padding: var(--s5); display: flex; flex-direction: column; gap: var(--s4); animation: rise-in var(--t-slow) var(--ease-out) both; }
.person-top { display: flex; align-items: flex-start; gap: var(--s3); }
.person-top .grow { min-width: 0; }
/* Scoped to .grow on purpose. `.person-top span` also matched the avatar and
   the Internal/Sub badge — both are spans and both sit directly in this row —
   and at 0-1-1 it beat their own single-class rules, so the initials rendered
   as 12px --text-2 text in the corner of the circle instead of centred white. */
.person-top .grow b { display: block; font-size: var(--fs-14); font-weight: 620; }
.person-top .grow span { display: block; font-size: var(--fs-12); color: var(--text-2); }
.person-contact { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-12); color: var(--text-2); }
.person-contact a { color: var(--text-2); display: flex; align-items: center; gap: 7px; min-width: 0; }
.person-contact a:hover { color: var(--accent-ink); }
.person-contact svg { width: 14px; height: 14px; flex: 0 0 14px; color: var(--text-3); }
.person-load { display: flex; flex-direction: column; gap: 6px; }
.person-load .row { justify-content: space-between; font-size: var(--fs-11); color: var(--text-3); }
.rating { display: inline-flex; align-items: center; gap: 2px; }
.rating svg { width: 13px; height: 13px; color: var(--warning); }
.rating svg.is-empty { color: var(--border-strong); }
.rating .val { font-size: var(--fs-12); font-weight: 620; margin-left: 4px; color: var(--text-2); }

/* --------------------------------------------------------------------------
   AI Insights
   -------------------------------------------------------------------------- */
.insight {
  display: flex; gap: var(--s4); padding: var(--s5);
  animation: rise-in var(--t-slow) var(--ease-out) both;
}
.insight .ins-ico {
  width: 36px; height: 36px; flex: 0 0 36px; border-radius: var(--r-md);
  display: grid; place-items: center;
  background: var(--neutral-soft); color: var(--neutral-ink);
}
.insight .ins-ico svg { width: 18px; height: 18px; }
.insight .grow { min-width: 0; }
.insight h3 { font-size: var(--fs-14); font-weight: 620; }
.insight .ins-body { font-size: var(--fs-13); color: var(--text-2); margin-top: 5px; line-height: 1.55; }
.insight .ins-rec {
  margin-top: var(--s3); padding: var(--s3);
  background: var(--surface-2); border-radius: var(--r-md);
  font-size: var(--fs-12); color: var(--text-2);
  display: flex; gap: var(--s2);
}
.insight .ins-rec svg { width: 14px; height: 14px; flex: 0 0 14px; color: var(--accent); margin-top: 1px; }
.insight .ins-rec b { color: var(--text); }
.insight .ins-foot { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s3); flex-wrap: wrap; }
.insight.sev-critical .ins-ico { background: var(--critical-soft); color: var(--critical-ink); }
.insight.sev-serious .ins-ico  { background: var(--serious-soft); color: var(--serious-ink); }
.insight.sev-warning .ins-ico  { background: var(--warning-soft); color: var(--warning-ink); }
.insight.sev-good .ins-ico     { background: var(--good-soft); color: var(--good-ink); }

.confidence { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-11); color: var(--text-3); }
.confidence .bars { display: inline-flex; gap: 2px; align-items: flex-end; }
.confidence .bars i { width: 3px; background: var(--border-strong); border-radius: 1px; display: block; }
.confidence .bars i:nth-child(1) { height: 5px; }
.confidence .bars i:nth-child(2) { height: 8px; }
.confidence .bars i:nth-child(3) { height: 11px; }
.confidence .bars i.on { background: var(--brand); }

/* --------------------------------------------------------------------------
   Ask panel — a chat module in the side column
   A fixed head, a scrolling transcript, a composer pinned to the bottom: the
   shape every messaging app has, so it needs no explaining. On a wide screen
   it sticks beside the findings, keeping the question next to the thing being
   asked about while the list scrolls past.
   -------------------------------------------------------------------------- */
.chat-panel {
  padding: 0;
  display: flex; flex-direction: column;
  min-height: 540px;
  overflow: hidden;              /* the transcript scrolls, never the card */
}
@media (min-width: 1201px) {
  .chat-panel {
    position: sticky;
    top: calc(var(--topbar-h) + var(--s6));
    /* The column's full height, less the topbar it tucks under and the page
       padding above and below it. */
    height: calc(100vh - var(--topbar-h) - var(--s6) * 2);
    height: calc(100dvh - var(--topbar-h) - var(--s6) * 2);
  }
}

.chat-head {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s3) var(--s3) var(--s4);
  border-bottom: 1px solid var(--border);
}
.chat-icon {
  width: 30px; height: 30px; flex: 0 0 30px;
  border-radius: var(--r-md); display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-ink);
}
.chat-icon svg { width: 17px; height: 17px; }
.chat-heading { flex: 1 1 auto; min-width: 0; }
.chat-heading b {
  display: block; font-size: var(--fs-14); font-weight: 620; letter-spacing: -.01em;
}
.chat-heading span { display: block; font-size: var(--fs-11); color: var(--text-3); }
.chat-act {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: var(--r-md); color: var(--text-3);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.chat-act:hover { background: var(--surface-2); color: var(--text); }

.chat-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--s5);
  padding: var(--s4);
}

/* Starter state: what it can answer, as things you can press rather than a
   paragraph telling you to type. Vertical, because six chips wrapped inside a
   320px column is the clutter this panel used to be. */
.chat-start { margin: auto 0; display: flex; flex-direction: column; gap: var(--s4); }
.chat-blurb { font-size: var(--fs-12); line-height: 1.6; color: var(--text-3); }
.chat-suggest { display: flex; flex-direction: column; gap: var(--s2); }
.chat-suggest button {
  display: flex; align-items: center; gap: var(--s2);
  width: 100%; text-align: left;
  padding: 9px var(--s3);
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); color: var(--text-2); font-size: var(--fs-12);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.chat-suggest button svg { width: 14px; height: 14px; flex: 0 0 14px; color: var(--text-3); }
.chat-suggest button:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.chat-suggest button:hover svg { color: var(--accent); }

/* Messages. The question is a filled bubble on the right, the answer plain
   text on the left behind a mark — that asymmetry is what makes a transcript
   readable at a glance without labelling every turn. */
.chat-msg { display: flex; gap: var(--s3); animation: rise-in var(--t-med) var(--ease-out) both; }
.chat-msg.is-user { justify-content: flex-end; }
.chat-msg.is-user .bubble {
  max-width: 88%;
  padding: 8px var(--s3);
  border-radius: var(--r-lg);
  background: var(--surface-3); color: var(--text);
  font-size: var(--fs-13); font-weight: 500; line-height: 1.5;
}
.chat-msg.is-ai .ico {
  width: 24px; height: 24px; flex: 0 0 24px; border-radius: var(--r-sm);
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-ink);
}
.chat-msg.is-ai .bubble {
  min-width: 0; font-size: var(--fs-13); line-height: 1.6; color: var(--text-2);
}
.chat-msg .bubble ul { margin-top: var(--s2); display: flex; flex-direction: column; gap: 4px; }
.chat-msg .bubble li { padding-left: 14px; position: relative; }
.chat-msg .bubble li::before { content: "\2022"; position: absolute; left: 3px; color: var(--text-3); }

/* Composer */
.chat-form {
  flex: 0 0 auto;
  display: flex; align-items: flex-end; gap: var(--s2);
  padding: var(--s3);
  border-top: 1px solid var(--border);
}
.chat-form textarea {
  flex: 1 1 auto; min-width: 0;
  /* One line to start, growing to five as you type. 42px rather than 40px
     because the floor has to clear the line box plus padding and borders —
     at 40px the field is 0.85px short and ships with a scrollbar in it from
     the very first character. */
  min-height: 42px; max-height: 148px;
  resize: none; overflow-y: auto;
  padding: 10px var(--s3);
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface-2); color: var(--text);
  font-size: var(--fs-13); line-height: 1.45;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
.chat-form textarea::placeholder { color: var(--text-3); }
.chat-form textarea:focus {
  outline: none; border-color: var(--accent); background: var(--surface);
  box-shadow: 0 0 0 3px var(--ring);
}
.chat-form .btn { flex: 0 0 auto; width: 42px; height: 42px; padding: 0; }

/* Session list — the same panel, showing threads instead of turns. */
.chat-sessions { display: flex; flex-direction: column; gap: 2px; }
.chat-session {
  display: flex; align-items: center;
  border-radius: var(--r-md);
  transition: background var(--t-fast) var(--ease);
}
.chat-session:hover { background: var(--surface-2); }
.chat-session.is-active { background: var(--brand-soft); }
.chat-session-open {
  flex: 1 1 auto; min-width: 0;
  padding: 9px var(--s3); text-align: left;
}
.chat-session-open b { display: block; font-size: var(--fs-13); font-weight: 560; color: var(--text); }
.chat-session-open span { display: block; font-size: var(--fs-11); color: var(--text-3); }
.chat-session-del {
  flex: 0 0 auto; width: 30px; height: 30px; margin-right: 6px;
  display: grid; place-items: center; border-radius: var(--r-sm);
  color: var(--text-3); opacity: 0;
  transition: opacity var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.chat-session:hover .chat-session-del { opacity: 1; }
.chat-session-del:focus-visible { opacity: 1; }
.chat-session-del:hover { background: var(--critical-soft); color: var(--critical-ink); }

/* Hover is what reveals the delete button, so it can never be the only way to
   get rid of a thread — where there is no pointer it stays visible. */
@media (hover: none) {
  .chat-session-del { opacity: 1; }
}

.typing { display: inline-flex; gap: 3px; align-items: center; height: 20px; }
.typing i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--text-3); display: block;
  animation: typing-bounce 1.1s infinite;
}
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing-bounce {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* --------------------------------------------------------------------------
   Activity feed
   -------------------------------------------------------------------------- */
.feed { display: flex; flex-direction: column; }
.feed-item { display: flex; gap: var(--s3); padding: var(--s3) 0; }
.feed-item + .feed-item { border-top: 1px solid var(--border); }
.feed-item .grow { min-width: 0; }
.feed-item .txt { font-size: var(--fs-13); color: var(--text-2); line-height: 1.5; }
.feed-item .txt b { color: var(--text); font-weight: 600; }
.feed-item time { font-size: var(--fs-11); color: var(--text-3); display: block; margin-top: 2px; }

/* Deadline list */
.deadline { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) 0; }
.deadline + .deadline { border-top: 1px solid var(--border); }
.deadline .cal {
  width: 38px; height: 40px; flex: 0 0 38px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--surface-2);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  line-height: 1;
}
.deadline .cal b { font-size: var(--fs-14); font-weight: 660; font-variant-numeric: tabular-nums; }
.deadline .cal span { font-size: 9px; font-weight: 640; letter-spacing: .06em; color: var(--text-3); text-transform: uppercase; margin-top: 2px; }
.deadline.is-overdue .cal { border-color: var(--critical); background: var(--critical-soft); }
.deadline.is-overdue .cal b { color: var(--critical-ink); }
.deadline .grow { min-width: 0; }
.deadline .d-title { font-size: var(--fs-13); font-weight: 560; }
.deadline .d-meta { font-size: var(--fs-11); color: var(--text-3); }

/* --------------------------------------------------------------------------
   Settings
   -------------------------------------------------------------------------- */
.settings-grid { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: var(--s6); align-items: start; }
.settings-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: calc(var(--topbar-h) + var(--s5)); }
.settings-nav button {
  display: flex; align-items: center; gap: var(--s3);
  padding: 9px var(--s3); border-radius: var(--r-md);
  font-size: var(--fs-13); font-weight: 560; color: var(--text-2); text-align: left;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.settings-nav button svg { width: 16px; height: 16px; opacity: .8; }
.settings-nav button:hover { background: var(--surface-3); color: var(--text); }
.settings-nav button[aria-current="true"] { background: var(--brand-soft); color: var(--text); font-weight: 620; }
.setting-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s5);
  padding: var(--s4) 0;
}
.setting-row + .setting-row { border-top: 1px solid var(--border); }
.setting-row .grow { min-width: 0; }
.setting-row b { display: block; font-size: var(--fs-13); font-weight: 600; }
.setting-row p { font-size: var(--fs-12); color: var(--text-2); margin-top: 3px; max-width: 56ch; }
.theme-pick { display: flex; gap: var(--s3); }
.theme-swatch {
  width: 72px; border: 2px solid var(--border); border-radius: var(--r-md);
  overflow: hidden; background: var(--surface); transition: border-color var(--t-fast) var(--ease);
}
.theme-swatch[aria-pressed="true"] { border-color: var(--accent); }
.theme-swatch .preview { height: 40px; display: flex; }
.theme-swatch .preview .l { flex: 0 0 30%; }
.theme-swatch .preview .r { flex: 1 1 auto; }
.theme-swatch .name { font-size: var(--fs-11); font-weight: 600; padding: 5px; border-top: 1px solid var(--border); }

@media (max-width: 900px) {
  .settings-grid { grid-template-columns: minmax(0,1fr); }
  .settings-nav { position: static; flex-direction: row; overflow-x: auto; padding-bottom: var(--s2); }
  .settings-nav button { white-space: nowrap; }
}