/* =========================================================
   LITORA AI  |  Core Theme
   Classic law-firm aesthetic — ivory/cream paper, deep maroon,
   antique gold, serif-forward. Built to read like chambers
   stationery: restrained, formal, aligned.
   ========================================================= */

:root{
  /* --- paper / surfaces : warm off-white, easy on the eye --- */
  --paper:#f7f5f0;          /* soft ivory page, lower glare than pure white */
  --paper-alt:#eeeae1;      /* tinted section band */
  --paper-card:#fffdf9;     /* card, a hair off pure white */
  --paper-line:#e0d9ca;     /* hairline */
  --paper-line-soft:#ebe5d8;

  /* --- primary : deep slate-navy (calm, professional, low chroma) --- */
  --maroon-900:#161f2e;     /* darkest — footer, topbar, dark bands */
  --maroon-800:#1d2838;
  --maroon-700:#26344a;     /* primary */
  --maroon-600:#33455f;
  --maroon-500:#465a78;
  --maroon-line:rgba(38,52,74,.16);

  /* --- accent : muted antique brass, not bright yellow --- */
  --gold-600:#8a7434;       /* text on light */
  --gold-500:#a08a45;       /* lines, marks */
  --gold-400:#bfa968;
  --gold-300:#d6c493;
  --gold-soft:rgba(160,138,69,.10);

  /* --- ink : warm charcoal, softened from near-black --- */
  --ink-900:#232a33;        /* headings */
  --ink-800:#2f3742;
  --ink-700:#454e59;        /* body — grey-slate, restful */
  --ink-500:#6d7580;        /* muted */
  --ink-300:#9aa0a8;        /* faint */

  /* --- status : desaturated so nothing shouts --- */
  --ok:#3a6b52;
  --warn:#8a6a24;
  --danger:#9a3f36;
  --info:#3a5578;
  --ok-bg:#e8efe9;
  --warn-bg:#f2ecdb;
  --danger-bg:#f2e6e2;
  --info-bg:#e8edf4;

  /* --- structural --- */
  --r-sm:4px;
  --r-md:8px;
  --r-lg:14px;
  --rule:1px solid var(--paper-line);
  --shadow-sm:0 1px 2px rgba(22,31,46,.05);
  --shadow-md:0 12px 34px rgba(22,31,46,.10);
  --shadow-lg:0 28px 64px rgba(22,31,46,.16);

  --sp-section:5.5rem;

  --font-display:'Cormorant Garamond','Playfair Display',Georgia,'Times New Roman',serif;
  --font-serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --font-body:'Source Sans 3','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}


*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  color:var(--ink-700);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4{font-family:var(--font-display);color:var(--ink-900);margin:0 0 .5em;line-height:1.18;font-weight:600;letter-spacing:.005em}
h1{font-size:2.6rem}
h2{font-size:2rem}
h3{font-size:1.4rem}
h4{font-size:1.1rem;font-family:var(--font-body);font-weight:700}
p{margin:0 0 1rem}

/* ---------- Justified body text across the site ---------- */
/* Paragraph prose is justified with hyphenation so the ragged right edge
   goes away without opening ugly rivers. Headings, buttons, nav, labels,
   table cells and anything explicitly centred are deliberately excluded. */
p,
.prose p,
.hp-doc p,
.hp-lede,
.hp-card p,
.hp-def-val p,
.hp-agent-detail p,
.hp-hero-lede,
.legal-meta,
.foot-brand p{
  text-align:justify;
  text-justify:inter-word;
  -webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;
  hyphenate-limit-chars:6 3 3;
}
/* Never justify these — justification there looks broken */
.text-center,.text-center p,
.hp-center,.hp-center p,
.hp-head--left p,
h1,h2,h3,h4,h5,
.btn,.eyebrow,.form-label,.form-hint,
th,td,.muted,
.hp-clause,.hp-card-mark{
  text-align:left;
  -webkit-hyphens:manual;hyphens:manual;
}
.text-center,.text-center p,.hp-center,.hp-center p{text-align:center}

a{color:var(--maroon-700);text-decoration:none;transition:color .16s}
a:hover{color:var(--gold-600)}
strong{color:var(--ink-900);font-weight:700}
hr{border:0;border-top:var(--rule);margin:2rem 0}

.container,.wrap{width:100%;max-width:1160px;margin:0 auto;padding:0 24px}
.wrap-narrow{width:100%;max-width:820px;margin:0 auto;padding:0 24px}
.text-center{text-align:center}
.muted{color:var(--ink-500);font-size:.9rem}
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}
.mb-0{margin-bottom:0}.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}

/* small caps eyebrow / clause marks — the legal texture */
.eyebrow{font-family:var(--mono);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-600);margin:0 0 .9rem;font-weight:500}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.8rem 1.6rem;border:1px solid transparent;border-radius:var(--r-md);
  font-family:var(--font-body);font-size:.9rem;font-weight:600;letter-spacing:.01em;
  cursor:pointer;transition:all .18s ease;text-decoration:none;line-height:1.2;white-space:nowrap;
}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn-gold{background:linear-gradient(135deg,#7d631c,#8f7325);color:#fff;border-color:#7d631c}
.btn-gold:hover:not(:disabled){background:linear-gradient(135deg,#6f5818,#82691f);transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(138,109,31,.34);color:#fff}
.btn-maroon,.btn-navy{background:var(--maroon-700);color:#fff;border-color:var(--maroon-700)}
.btn-maroon:hover:not(:disabled),.btn-navy:hover:not(:disabled){background:var(--maroon-600);color:#fff}
.btn-ghost{background:transparent;border-color:var(--paper-line);color:var(--ink-700)}
.btn-ghost:hover:not(:disabled){border-color:var(--maroon-500);color:var(--maroon-700)}
.btn-outline-gold{background:transparent;border-color:var(--gold-400);color:var(--gold-600)}
.btn-outline-gold:hover:not(:disabled){background:var(--gold-soft);color:var(--gold-600)}
.btn-block{width:100%}
.btn-sm{padding:.55rem 1.1rem;font-size:.83rem}
.btn-lg{padding:.95rem 2rem;font-size:.98rem}

/* ---------- Forms ---------- */
.form-group{margin-bottom:1.15rem}
.form-label{display:block;font-size:.8rem;font-weight:700;color:var(--ink-900);margin-bottom:.4rem;letter-spacing:.02em;text-transform:uppercase}
.form-label .req{color:var(--danger)}
.form-control{
  width:100%;padding:.72rem .9rem;font-family:inherit;font-size:.95rem;color:var(--ink-900);
  background:#fff;border:1px solid var(--paper-line);border-radius:var(--r-md);
  transition:border-color .16s,box-shadow .16s;
}
.form-control:focus{outline:none;border-color:var(--gold-400);box-shadow:0 0 0 3px var(--gold-soft)}
.form-control.is-invalid{border-color:var(--danger)}
select.form-control{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='%236f6252' d='M6 8L2 4h8z'/></svg>");background-repeat:no-repeat;background-position:right 12px center;padding-right:2.2rem}
.form-hint{font-size:.78rem;color:var(--ink-500);margin-top:.35rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field-error{font-size:.78rem;color:var(--danger);margin-top:.3rem;display:none}
.field-error.show{display:block}

.input-wrap{position:relative}
.toggle-pw{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:0;cursor:pointer;color:var(--ink-500);font-size:.75rem;font-weight:700;padding:4px 6px;text-transform:uppercase;letter-spacing:.04em}
.toggle-pw:hover{color:var(--gold-600)}

.checkbox-row{display:flex;align-items:flex-start;gap:.6rem;font-size:.88rem;color:var(--ink-700)}
.checkbox-row input[type=checkbox]{margin-top:.25rem;accent-color:var(--maroon-700);width:16px;height:16px;flex-shrink:0}

.pw-meter{height:4px;background:var(--paper-line);border-radius:4px;margin-top:.5rem;overflow:hidden}
.pw-meter span{display:block;height:100%;width:0;transition:width .25s,background .25s;border-radius:4px}
.pw-label{font-size:.75rem;margin-top:.3rem;color:var(--ink-500)}

/* ---------- Alerts ---------- */
.alert{padding:.85rem 1.1rem;border-radius:var(--r-md);font-size:.9rem;margin-bottom:1rem;border-left:3px solid}
.alert ul{margin:.4rem 0 0;padding-left:1.1rem}
.alert-success{background:var(--ok-bg);color:#1c5039;border-color:var(--ok)}
.alert-error{background:var(--danger-bg);color:#7d201a;border-color:var(--danger)}
.alert-info{background:var(--info-bg);color:#2a4368;border-color:var(--info)}
.alert-warn{background:var(--warn-bg);color:#7a5410;border-color:var(--warn)}

/* ---------- Auth layout ---------- */
/* min-height, not height. A fixed 100vh with overflow:hidden was fine while
   every page here was a short login form; the verification screen is taller
   than a laptop viewport and the top of it became unreachable. */
.auth-shell{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:100vh}
.auth-brand{
  position:relative;overflow-y:auto;padding:2.6rem 2.8rem;display:flex;flex-direction:column;gap:1.5rem;
  background:
    radial-gradient(900px 500px at 15% -10%,var(--maroon-600),transparent 60%),
    linear-gradient(165deg,var(--maroon-900),var(--maroon-800) 55%,var(--maroon-700));
  color:#eef1f6;
}
.auth-brand::after{
  content:"";position:absolute;inset:0;opacity:.06;pointer-events:none;
  background-image:repeating-linear-gradient(90deg,transparent 0 42px,rgba(220,195,126,.7) 42px 43px);
}
.brand-mark{display:flex;align-items:center;gap:.75rem;font-family:var(--font-display);font-size:1.4rem;font-weight:600;color:#fff;position:relative;z-index:1}
.brand-mark .glyph{
  width:42px;height:42px;border-radius:8px;display:grid;place-items:center;flex-shrink:0;
  background:linear-gradient(135deg,var(--gold-500),var(--gold-300));color:var(--maroon-900);
  font-weight:700;font-size:1.05rem;font-family:var(--font-display);letter-spacing:.02em;
  border:1px solid rgba(255,255,255,.15);
}
.brand-mark small{display:block;font-family:var(--font-body);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-300);font-weight:600;margin-top:2px}
.brand-copy{position:relative;z-index:1;max-width:440px}
.brand-copy h2{color:#fff;font-size:1.95rem;line-height:1.2;margin:0 0 .6rem}
.brand-copy p{color:#c4ccd8;font-size:.95rem;margin:0}
.brand-points{list-style:none;padding:0;margin:1.2rem 0 0}
.brand-points li{display:flex;gap:.7rem;align-items:flex-start;padding:.4rem 0;font-size:.9rem;color:#cdd4de}
.brand-points li::before{content:"§";color:var(--gold-300);font-weight:700;flex-shrink:0;font-family:var(--font-display)}
.brand-foot{position:relative;z-index:1;margin-top:auto;font-size:.72rem;color:#8b97a8;line-height:1.6;border-top:1px solid rgba(220,195,126,.2);padding-top:1rem}

/* align-items:center inside a scrolling flex container clips the TOP of any
   child taller than the container — the overflow spills off both ends and the
   part above the start edge cannot be scrolled to. `margin:auto` on the child
   centres it when there is room and lets it scroll normally when there is not. */
.auth-panel{display:flex;align-items:flex-start;justify-content:center;
  padding:1.4rem 1.5rem;background:var(--paper);overflow-y:auto}
.auth-panel > .auth-card{margin:auto}
.auth-card{width:100%;max-width:430px;background:#fff;border:1px solid var(--paper-line);border-radius:var(--r-lg);box-shadow:var(--shadow-md);padding:2rem 2.1rem}
.auth-card.wide{max-width:600px}
.auth-card h1{font-size:1.7rem;margin-bottom:.3rem}
.auth-sub{color:var(--ink-500);font-size:.86rem;margin-bottom:1.05rem;line-height:1.45}
.auth-divider{display:flex;align-items:center;gap:.8rem;margin:1.4rem 0;color:var(--ink-300);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--paper-line)}
.auth-foot{text-align:center;font-size:.9rem;margin-top:1.5rem;color:var(--ink-500)}
.auth-foot a{font-weight:700;color:var(--maroon-700)}
.auth-foot a:hover{color:var(--gold-600)}
.mobile-brand{display:none}

/* Compact form spacing inside auth cards so multi-field forms fit one screen */
.auth-card .form-group{margin-bottom:.72rem}
.auth-card .form-row{gap:.8rem}
.auth-card .form-label{margin-bottom:.3rem;font-size:.74rem}
.auth-card .form-control{padding:.6rem .8rem;font-size:.9rem}
.auth-card .form-hint{margin-top:.25rem;font-size:.74rem}
.auth-card .checkbox-row{font-size:.82rem;line-height:1.45}
.auth-card .btn-block{margin-top:.4rem}
.auth-card .pw-meter{margin-top:.35rem}
.auth-foot{margin-top:1rem}


.otp-row{display:flex;gap:.6rem;justify-content:center;margin:1.4rem 0}
.otp-row input{
  width:52px;height:62px;text-align:center;font-size:1.6rem;font-weight:600;font-family:var(--font-display);
  border:1px solid var(--paper-line);border-radius:var(--r-md);color:var(--ink-900);background:#fff;
}
.otp-row input:focus{outline:none;border-color:var(--gold-400);box-shadow:0 0 0 3px var(--gold-soft)}

/* ---------- Misc ---------- */


.badge{display:inline-block;padding:.2rem .6rem;border-radius:3px;font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.badge-gold{background:var(--gold-soft);color:var(--gold-600)}
.spinner{width:15px;height:15px;border:2px solid rgba(102,26,34,.25);border-top-color:var(--maroon-700);border-radius:50%;animation:spin .7s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.fade-in{animation:fadeIn .4s ease both}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.recovery-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin:1rem 0;font-family:var(--mono)}
.recovery-grid code{background:var(--paper-alt);border:1px solid var(--paper-line);padding:.5rem;border-radius:var(--r-sm);text-align:center;font-size:.9rem;letter-spacing:.06em}

@media (max-width:960px){
  .auth-shell{grid-template-columns:1fr}
  .auth-brand{display:none}
  .mobile-brand{display:flex;justify-content:center;margin-bottom:1.5rem}
  .auth-panel{min-height:100vh}
}
@media (max-width:520px){
  .auth-card{padding:1.5rem;border:0;box-shadow:none;background:transparent}
  .form-row{grid-template-columns:1fr}
  .otp-row input{width:44px;height:54px;font-size:1.3rem}
  .recovery-grid{grid-template-columns:1fr}
  h1{font-size:2.1rem}h2{font-size:1.7rem}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* =========================================================
   Legacy alias layer — maps old navy/status tokens used by
   app.css, and the admin/case views, onto the new law-firm
   palette so every logged-in page inherits the redesign
   without rewriting each rule.
   ========================================================= */
:root{
  /* old navy scale -> now the real slate-navy, matching the public site */
  --navy-900:#161f2e;   /* app bar, dark surfaces */
  --navy-800:#1d2838;
  --navy-700:#26344a;
  --navy-600:#33455f;
  --navy-500:#465a78;
  --navy-50:#eeeae1;
  --navy-line:rgba(214,196,147,.16);

  /* position colours used across dashboard/reports (desaturated) */
  --concur:#3a6b52;      --concur-bg:#e8efe9;
  --partial:#8a6a24;     --partial-bg:#f2ecdb;
  --dissent:#9a3f36;     --dissent-bg:#f2e6e2;

  /* a couple of names the site.css used pre-redesign */
  --font-serif:var(--font-display);
}