/* ============================================================
   NOVENSY — Django-specific additions layered on design-system.css.
   Only tokens from design-system.css; no new hex values.
   ============================================================ */

/* Form validation errors (server-rendered) */
.form-error{color:var(--gold-soft);font-size:13px;margin-top:6px;border-left:2px solid var(--gold);padding-left:10px;}

/* Showcase cards (public) */
.card-link{text-decoration:none;display:block;color:inherit;}
.card-meta{margin-top:12px;font-size:12.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--gold);}

/* Two-column grid that collapses to one column on mobile — used to force
   .card-grid to 2 cols on the contact page instead of its default 3, and
   to align .contact-emails under it (inline styles would out-specificity
   the existing .card-grid mobile breakpoint, so this is a class instead). */
.grid-2col{grid-template-columns:repeat(2,1fr);}
@media(max-width:860px){.grid-2col{grid-template-columns:1fr;}}

/* Contact page — plain (non-link) selectable text, deliberately outside
   the card boxes so clicking/dragging to select never triggers a mailto:
   navigation instead. Grid mirrors .card-grid so each email centers
   directly under its matching card, with an arrow pointing down at it. */
.contact-emails{display:grid;gap:28px;margin:32px 0 28px;}
.contact-email-item{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;}
.contact-arrow{font-size:22px;color:var(--gold);line-height:1;}
.contact-email{font-family:'Playfair Display',serif;font-size:30px;font-weight:700;color:var(--gold-soft);word-break:break-word;user-select:text;}
.empty-panel{text-align:center;padding:70px 20px;border:1px solid var(--line);color:var(--grey);}
.empty-panel p{max-width:520px;margin:0 auto 10px;line-height:1.7;}
.showcase-body{padding:44px;line-height:1.9;color:var(--cream);}
.showcase-body p{max-width:760px;}

/* ---------------- Client portal ---------------- */
.portal-label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-left:10px;}
.portal-main{min-height:60vh;padding-bottom:90px;}
.portal-user{color:var(--grey);font-size:13.5px;text-decoration:none;margin-right:14px;}
.portal-user:hover{color:var(--cream);}
.inline-form{display:inline;}
.inline-form .btn{padding:10px 18px;}
.back-link{color:var(--grey);font-size:13px;text-decoration:none;display:inline-block;margin-bottom:18px;}
.back-link:hover{color:var(--gold-soft);}
.flash{border:1px solid var(--line);border-left:2px solid var(--gold);padding:14px 18px;margin-bottom:22px;color:var(--gold-soft);font-size:14px;background:var(--ink-2);}
.muted{color:var(--grey);font-size:14px;line-height:1.7;}

.portal-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:10px;}
.portal-panel{border:1px solid var(--line);background:var(--ink-2);padding:30px;margin-top:26px;}
.portal-grid .portal-panel{margin-top:0;}
.panel-title{font-family:'Playfair Display',serif;font-size:21px;font-weight:600;color:var(--cream);margin-bottom:18px;}
.portal-narrow{margin-top:26px;}

/* Project table */
.p-table{width:100%;border-collapse:collapse;font-size:14px;}
.p-table th{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey);text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);}
.p-table td{padding:14px 12px;border-bottom:1px solid var(--line);color:var(--cream);}
.p-table a{color:var(--gold-soft);text-decoration:none;}
.p-table a:hover{text-decoration:underline;}

/* Status pills — one gold system, opacity encodes state */
.status-pill{display:inline-block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:4px 12px;border:1px solid var(--line);color:var(--grey);white-space:nowrap;}
.status-pill.s-in_progress,.status-pill.s-in_review,.status-pill.s-accepted{border-color:var(--gold);color:var(--gold-soft);}
.status-pill.s-live,.status-pill.s-completed,.status-pill.s-done{background:var(--gold);color:var(--ink);border-color:var(--gold);}
.status-pill.s-on_hold,.status-pill.s-declined{opacity:.55;}

.req-list{list-style:none;padding:0;margin:0;}
.req-list li{padding:10px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--cream);}
.req-list li:last-child{border-bottom:none;}

/* Project updates timeline */
.timeline{margin-top:6px;}
.timeline-item{display:flex;gap:18px;padding:16px 0;border-bottom:1px solid var(--line);}
.timeline-item:last-child{border-bottom:none;}
.timeline-dot{width:8px;height:8px;background:var(--gold);margin-top:8px;flex-shrink:0;}
.timeline-item p{color:var(--cream);font-size:14.5px;line-height:1.7;margin-bottom:4px;}

/* Message thread */
.thread{display:flex;flex-direction:column;gap:14px;margin-bottom:26px;}
.msg{max-width:78%;padding:14px 18px;border:1px solid var(--line);}
.msg-client{align-self:flex-end;background:var(--ink-3);}
.msg-staff{align-self:flex-start;background:var(--ink-2);border-left:2px solid var(--gold);}
.msg-body{font-size:14.5px;color:var(--cream);line-height:1.65;}
.msg-meta{margin-top:6px;font-size:11.5px;color:var(--grey);letter-spacing:.05em;}
.msg-form textarea{width:100%;background:var(--ink);border:1px solid var(--line);color:var(--cream);padding:13px 15px;font-family:'Inter',sans-serif;font-size:14px;min-height:80px;resize:vertical;}
.msg-form textarea:focus{outline:none;border-color:var(--gold);}
.msg-form .btn{margin-top:12px;}

@media (max-width:860px){
  .portal-grid{grid-template-columns:1fr;}
  .msg{max-width:95%;}
}