/* 432 Portal. MINA Medical Marketing brand.
   Tokens taken from the live-site derived set in MINA-Console. */

:root {
  --navy:#00155D; --navy-deep:#000C33; --navy-mid:#000F47; --navy-soft:#102A78;
  --sky:#71B6FF; --sky-pale:#EAF3FF; --sky-line:#C7DEFB; --sky-soft:#A8D2FF;
  --ink:#0B1B3D; --muted:#45557E; --faint:#8FA0CB;
  --line:#DCE5F3; --paper:#FFFFFF; --paper-2:#F3F7FD;
  --ok:#0F7B4F; --stale:#B45309; --alert:#B42318;
  --sans:"Plus Jakarta Sans","SF Pro Text",-apple-system,BlinkMacSystemFont,sans-serif;
  --brand:"Montserrat","Plus Jakarta Sans",sans-serif;
  --pill:999px; --r:14px; --r-lg:20px;
  --shadow:0 1px 2px rgba(11,27,61,.06), 0 8px 24px -12px rgba(11,27,61,.18);
  --shadow-lg:0 24px 60px -28px rgba(0,21,93,.45);
}

* { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body {
  font-family:var(--sans); color:var(--ink); background:var(--paper-2);
  font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
a { color:var(--navy-soft); }
button, input, select, textarea { font-family:inherit; font-size:inherit; color:inherit; }

/* ---------------------------------------------------------------- shell */
.top {
  background:var(--navy); color:#fff; position:sticky; top:0; z-index:40;
  box-shadow:0 1px 0 rgba(255,255,255,.08);
}
.top-in {
  max-width:1120px; margin:0 auto; padding:14px 22px;
  display:flex; align-items:center; gap:16px;
}
.mark { font-family:var(--brand); font-weight:800; letter-spacing:-.02em; font-size:1.02rem; }
.mark small {
  display:block; font-family:var(--sans); font-weight:500; font-size:.7rem;
  letter-spacing:.09em; text-transform:uppercase; color:var(--sky-soft); margin-top:2px;
}
.top .spacer { flex:1; }
.who { font-size:.86rem; color:var(--sky-pale); }
.wrap { max-width:1120px; margin:0 auto; padding:26px 22px 80px; }

/* ---------------------------------------------------------------- type */
h1 { font-family:var(--brand); font-size:1.6rem; font-weight:800; letter-spacing:-.02em; margin:0 0 4px; }
h2 { font-family:var(--brand); font-size:1.05rem; font-weight:700; margin:0 0 10px; }
.sub { color:var(--muted); margin:0 0 22px; }
.overline {
  font-size:.68rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--faint); margin:0 0 8px;
}

/* ---------------------------------------------------------------- cards */
.card {
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow); padding:22px; margin-bottom:16px;
}
.card.tight { padding:16px 18px; }

/* ---------------------------------------------------------------- buttons */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:var(--pill); border:1.5px solid transparent; cursor:pointer;
  font-weight:700; font-size:.92rem; padding:11px 22px; background:var(--navy);
  color:#fff; transition:transform .14s ease, background .14s ease, box-shadow .14s ease;
  text-decoration:none; white-space:nowrap;
}
.btn:hover { background:var(--navy-soft); transform:translateY(-1px); }
.btn:active { transform:none; }
.btn[disabled] { opacity:.5; cursor:not-allowed; transform:none; }
.btn.ghost { background:transparent; color:var(--navy); border-color:var(--line); }
.btn.ghost:hover { background:var(--sky-pale); }
.btn.sm { padding:7px 15px; font-size:.84rem; }
.btn.danger { background:var(--alert); }
.btn.go { background:var(--ok); }

/* ---------------------------------------------------------------- forms */
label.f { display:block; margin:0 0 16px; }
label.f > span {
  display:block; font-size:.8rem; font-weight:700; color:var(--muted);
  margin-bottom:6px; letter-spacing:.01em;
}
label.f .hint { display:block; font-weight:500; color:var(--faint); font-size:.78rem; margin-top:-4px; margin-bottom:6px; }
.inp, select.inp, textarea.inp {
  width:100%; padding:12px 14px; border:1.5px solid var(--line); border-radius:var(--r);
  background:var(--paper); transition:border-color .14s ease, box-shadow .14s ease;
}
.inp:focus, select.inp:focus, textarea.inp:focus {
  outline:none; border-color:var(--sky); box-shadow:0 0 0 4px rgba(113,182,255,.22);
}
textarea.inp { min-height:130px; resize:vertical; line-height:1.6; }
.row2 { display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
@media (max-width:640px){ .row2 { grid-template-columns:1fr; } }

/* ---------------------------------------------------------------- pills */
.pill {
  display:inline-flex; align-items:center; gap:6px; border-radius:var(--pill);
  padding:4px 11px; font-size:.74rem; font-weight:700; letter-spacing:.02em;
  background:var(--sky-pale); color:var(--navy); border:1px solid var(--sky-line);
  white-space:nowrap;
}
.pill.new      { background:#FFF4E5; border-color:#FFD9A0; color:#8A5200; }
.pill.progress { background:var(--sky-pale); border-color:var(--sky-line); color:var(--navy); }
.pill.waiting  { background:#FFF1F0; border-color:#FFD2CE; color:var(--alert); }
.pill.done     { background:#E8F6EF; border-color:#B7E3CE; color:var(--ok); }
.pill.closed   { background:#F0F2F7; border-color:var(--line); color:var(--muted); }
.pill.urgent   { background:var(--alert); border-color:var(--alert); color:#fff; }
.pill.internal { background:#F0F2F7; border-color:var(--line); color:var(--muted); }
.pill.draft    { background:#FFF4E5; border-color:#FFD9A0; color:#8A5200; }

/* ---------------------------------------------------------------- list */
.tk {
  display:flex; align-items:flex-start; gap:14px; padding:16px 18px;
  border:1px solid var(--line); border-radius:var(--r); background:var(--paper);
  margin-bottom:10px; cursor:pointer; text-decoration:none; color:inherit;
  transition:border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.tk:hover { border-color:var(--sky); box-shadow:var(--shadow); transform:translateY(-1px); }
.tk .body { flex:1; min-width:0; }
.tk .subj { font-weight:700; margin-bottom:3px; }
.tk .meta { font-size:.82rem; color:var(--muted); }
.tk .rt { text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.tk .ago { font-size:.76rem; color:var(--faint); }
.ref { font-family:ui-monospace,"SF Mono",monospace; font-size:.78rem; color:var(--faint); }

/* ---------------------------------------------------------------- thread */
.msg { display:flex; gap:12px; margin-bottom:18px; }
.msg .av {
  width:34px; height:34px; border-radius:50%; flex:0 0 auto; display:flex;
  align-items:center; justify-content:center; font-weight:800; font-size:.78rem;
  background:var(--sky-pale); color:var(--navy); border:1px solid var(--sky-line);
}
.msg.agency .av { background:var(--navy); color:#fff; border-color:var(--navy); }
.msg.system .av { background:var(--paper-2); color:var(--faint); }
.msg .bub { flex:1; min-width:0; }
.msg .hd { font-size:.8rem; color:var(--muted); margin-bottom:5px; display:flex; gap:9px; align-items:center; flex-wrap:wrap; }
.msg .hd b { color:var(--ink); }
.msg .tx {
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:13px 16px; white-space:pre-wrap; word-wrap:break-word;
}
.msg.agency .tx { background:var(--sky-pale); border-color:var(--sky-line); }
.msg.system .tx { background:var(--paper-2); color:var(--muted); font-size:.9rem; }
.msg.pending .tx { background:#FFFBF3; border-color:#FFD9A0; border-style:dashed; }
.msg.internal .tx { background:#F7F8FB; border-color:var(--line); border-style:dashed; color:var(--muted); }

/* ---------------------------------------------------------------- misc */
.empty { text-align:center; padding:56px 20px; color:var(--faint); }
.empty h2 { color:var(--muted); }
.err {
  background:#FFF1F0; border:1px solid #FFD2CE; color:var(--alert);
  border-radius:var(--r); padding:11px 14px; margin-bottom:14px; font-size:.9rem;
}
.okmsg {
  background:#E8F6EF; border:1px solid #B7E3CE; color:var(--ok);
  border-radius:var(--r); padding:11px 14px; margin-bottom:14px; font-size:.9rem;
}
.files { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.file {
  display:inline-flex; align-items:center; gap:7px; font-size:.82rem;
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--pill);
  padding:6px 13px; text-decoration:none; color:var(--navy); font-weight:600;
}
.file:hover { background:var(--sky-pale); border-color:var(--sky-line); }
.tabs { display:flex; gap:6px; margin-bottom:18px; flex-wrap:wrap; }
.tab {
  border:1.5px solid var(--line); background:var(--paper); border-radius:var(--pill);
  padding:7px 16px; font-size:.85rem; font-weight:700; cursor:pointer; color:var(--muted);
}
.tab.on { background:var(--navy); border-color:var(--navy); color:#fff; }
.hide { display:none !important; }
.spin { display:inline-block; width:15px; height:15px; border:2px solid rgba(255,255,255,.4);
  border-top-color:#fff; border-radius:50%; animation:sp .7s linear infinite; }
@keyframes sp { to { transform:rotate(360deg); } }
.muted { color:var(--muted); }
.small { font-size:.84rem; }
hr.sep { border:0; border-top:1px solid var(--line); margin:22px 0; }

/* ============================================================ v2 masthead
   Co-branded lockup. Their mark leads because it is their portal; ours sits
   second, quieter, as the house that looks after it. Both stay legible on a
   phone, which is where Marie will actually open this. */

.top {
  background:
    radial-gradient(120% 180% at 12% -40%, rgba(113,182,255,.20) 0%, transparent 58%),
    linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 100%);
  border-bottom:1px solid rgba(199,222,251,.16);
  box-shadow:0 10px 30px -22px rgba(0,12,51,.9);
}
.top-in { padding:20px 22px; gap:22px; }

.lockup { display:flex; align-items:center; gap:17px; text-decoration:none; min-width:0; }
.lockup img { display:block; width:auto; }
.lg-432 { height:42px; filter:drop-shadow(0 2px 8px rgba(0,0,0,.28)); }
.lg-div {
  width:1px; height:38px; flex:0 0 auto; border-radius:1px;
  background:linear-gradient(180deg, transparent, rgba(199,222,251,.42), transparent);
}
.lg-mina { display:flex; flex-direction:column; gap:4px; min-width:0; }
.lg-cap {
  font-size:.58rem; font-weight:700; letter-spacing:.19em; text-transform:uppercase;
  color:var(--sky-soft); opacity:.7; white-space:nowrap; line-height:1;
}
.lg-mina img { height:23px; opacity:.96; }

/* The old text wordmark is replaced by the lockup. */
.mark { display:none; }

@media (max-width:720px) {
  .top-in { padding:12px 16px; gap:12px; }
  .lockup { gap:12px; }
  .lg-432 { height:32px; }
  .lg-div { height:28px; }
  .lg-mina img { height:17px; }
  .lg-cap { font-size:.48rem; letter-spacing:.15em; }
  .who { display:none; }
  .wrap { padding:20px 16px 70px; }
}
@media (max-width:420px) {
  .lg-432 { height:27px; }
  .lg-mina img { height:14px; }
  .lg-cap { display:none; }
}

/* ------------------------------------------------------- concierge greeting */
.greet {
  font-family:var(--brand); font-weight:800; letter-spacing:-.022em;
  font-size:1.62rem; margin:0 0 4px; color:var(--ink);
}
.greet .light { color:var(--muted); font-weight:700; }

/* ------------------------------------------------------- premium surfaces */
.card {
  border-radius:22px;
  box-shadow:0 1px 2px rgba(11,27,61,.05), 0 18px 44px -30px rgba(0,21,93,.34);
}
.tk {
  border-radius:18px; padding:17px 19px;
  box-shadow:0 1px 2px rgba(11,27,61,.04);
}
.tk:hover {
  border-color:var(--sky-soft);
  box-shadow:0 1px 2px rgba(11,27,61,.05), 0 16px 32px -20px rgba(0,21,93,.38);
}
.tk .subj { font-size:1.02rem; letter-spacing:-.011em; }

.btn { box-shadow:0 10px 22px -14px rgba(0,21,93,.85); }
.btn.ghost { box-shadow:none; }
.btn:hover { box-shadow:0 14px 26px -14px rgba(0,21,93,.9); }

.pill { padding:5px 12px; }

.msg .tx { border-radius:16px; }
.msg .av { box-shadow:0 4px 10px -6px rgba(0,21,93,.5); }

.inp:focus, select.inp:focus, textarea.inp:focus {
  box-shadow:0 0 0 4px rgba(113,182,255,.24);
}

/* ------------------------------------------------------- empty state */
.empty {
  background:var(--paper); border:1px dashed var(--sky-line); border-radius:22px;
  padding:64px 26px;
}
.empty .ic {
  width:54px; height:54px; margin:0 auto 16px; border-radius:50%;
  background:var(--sky-pale); border:1px solid var(--sky-line);
  display:flex; align-items:center; justify-content:center;
  font-size:24px; color:var(--navy);
}
.empty h2 { color:var(--ink); margin-bottom:6px; }
.empty p { margin:0 auto; max-width:34ch; }

/* ------------------------------------------------------- login lockup */
.auth-lockup {
  display:flex; align-items:center; justify-content:center; gap:22px;
  margin-bottom:22px;
}
.auth-lockup img { display:block; width:auto; }
.auth-432 { height:66px; filter:drop-shadow(0 4px 14px rgba(0,0,0,.34)); }
.auth-div {
  width:1px; height:54px; border-radius:1px;
  background:linear-gradient(180deg, transparent, rgba(199,222,251,.46), transparent);
}
.auth-mina { display:flex; flex-direction:column; align-items:flex-start; gap:5px; }
.auth-mina img { height:30px; opacity:.96; }
@media (max-width:480px) {
  .auth-lockup { gap:15px; }
  .auth-432 { height:40px; }
  .auth-mina img { height:16px; }
  .auth-div { height:34px; }
}

/* ------------------------------------------------------- footer credit */
.credit {
  text-align:center; margin-top:40px; padding-top:22px;
  border-top:1px solid var(--line); color:var(--faint); font-size:.78rem;
}
.credit b { color:var(--muted); font-weight:700; }


/* Right rail of a request row: pills share a line, timestamp sits under them.
   Stacking all three made an urgent row noticeably taller than a normal one
   for no informational gain. */
.tk .rt { display:flex; flex-direction:column; align-items:flex-end; gap:7px; }
.tk .rt .pills { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.tk .ago { font-size:.75rem; color:var(--faint); }
@media (max-width:560px) {
  .tk { flex-direction:column; gap:10px; }
  .tk .rt { align-items:flex-start; width:100%; }
  .tk .rt .pills { justify-content:flex-start; }
}

/* ------------------------------------------------------- phone refinements */
@media (max-width:720px) {
  /* The primary action sat left aligned with a stray gap above it, because the
     desktop flex row puts it beside the heading. On a phone it should be a
     full width tap target directly under the intro. */
  #new-btn { width:100%; margin:4px 0 4px !important; padding:14px 22px; }
  .greet { font-size:1.42rem; }
  .sub { margin-bottom:16px; }
  .tabs { margin-bottom:14px; }
  .credit { margin-top:30px; font-size:.74rem; }
}
@media (max-width:420px) {
  /* Keep our mark recognisable rather than shrinking it into a smudge. */
  .lg-mina img { height:15px; }
  .lg-432 { height:25px; }
}


/* ---------------------------------------------- mobile: icon only for MINA
   On a phone the two wordmarks crowded each other and both shrank to stay
   side by side. Ours drops to the caduceus alone, which frees the width for
   432's mark to sit at a proper size. Theirs is the brand a client needs to
   recognise here; ours only needs to be present. */
.lockup img.lg-mina-icon { display:none; }

@media (max-width:720px) {
  .lg-mina { display:none; }
  .lockup img.lg-mina-icon { display:block; height:31px; opacity:.96; }
  .lg-432 { height:34px; }
  .lg-div { height:31px; }
  .lockup { gap:14px; }
}
@media (max-width:420px) {
  .lockup img.lg-mina-icon { height:28px; }
  .lg-432 { height:30px; }
  .lg-div { height:27px; }
  .lockup { gap:12px; }
}


/* Login page: same crowding problem below 560, same answer. */
.auth-lockup img.auth-mina-icon { display:none; }
@media (max-width:560px) {
  .auth-mina { display:none; }
  .auth-lockup img.auth-mina-icon { display:block; height:46px; opacity:.96; }
  .auth-432 { height:50px; }
  .auth-div { height:44px; }
  .auth-lockup { gap:18px; }
}
@media (max-width:380px) {
  .auth-lockup img.auth-mina-icon { height:40px; }
  .auth-432 { height:43px; }
  .auth-div { height:38px; }
}

/* ---------------------------------------------- very narrow phones (320-400)
   At 320 the lockup plus two full size buttons overflowed the header and
   clipped Sign out. Shrink the actions rather than the branding: the logos are
   the thing that has to stay legible, a button can afford to be smaller. */
@media (max-width:400px) {
  .top-in { padding:14px 12px; gap:8px; }
  .top .btn.sm { padding:6px 11px; font-size:.76rem; letter-spacing:-.01em; }
  .lockup { gap:10px; }
  .wrap { padding:18px 13px 60px; }
}
@media (max-width:340px) {
  .lg-432 { height:26px; }
  .lockup img.lg-mina-icon { height:24px; }
  .lg-div { height:23px; }
  .top .btn.sm { padding:6px 9px; font-size:.72rem; }
}

/* Nothing may ever scroll the page sideways. */
html, body { max-width:100%; overflow-x:hidden; }