/* ReMEDI, MD Campaign Tracker
   Palette and type locked to the 2026 Brand Identity System. */

:root {
  /* Brand */
  --navy:      #1C3240;
  --cream:     #F6F1E7;
  --tan:       #D7C7B8;
  --rose:      #C48E8E;
  --blue:      #7C97AC;
  --gold:      #C9A227;
  --bronze:    #9C6B30;
  --champagne: #E9D8B4;
  --black:     #1A1A1A;

  /* Surfaces */
  --surface:   #F6F1E7;
  --card:      #FFFFFF;
  --line:      #E4DCCE;
  --line-soft: #EFE8DB;

  /* Ink */
  --ink:       #1C3240;
  --ink-2:     #4A5F6D;
  --ink-3:     #7C8B96;

  /* Status ink — each validated >= 4.5:1 on the cream surface.
     Every status also carries a text label, so hue is never load-bearing. */
  --st-todo:    #41637E;
  --st-doing:   #8A6A00;
  --st-done:    #2F6B4F;
  --st-blocked: #A3243B;
  --st-skipped: #6E6A62;

  --st-todo-bg:    #41637E1A;
  --st-doing-bg:   #8A6A001A;
  --st-done-bg:    #2F6B4F1A;
  --st-blocked-bg: #A3243B1A;
  --st-skipped-bg: #6E6A621A;

  --radius: 10px;
  --shadow: 0 1px 2px rgba(28,50,64,.06), 0 4px 14px rgba(28,50,64,.05);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: 'Jost', system-ui, -apple-system, sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400; margin: 0; letter-spacing: .01em; }
h1 { font-size: 30px; }
h2 { font-size: 22px; }
h3 { font-size: 18px; }

a { color: var(--navy); }

.eyebrow {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.wrap { max-width: 1220px; margin: 0 auto; padding: 0 24px; }

/* ---------- Masthead ---------- */
.masthead { background: var(--navy); color: var(--cream); padding: 20px 0 0; }
.masthead a { color: var(--cream); }
.mast-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.brandmark { display: flex; align-items: center; gap: 14px; }
.brandmark .rm {
  font-family: 'Cormorant Garamond', serif;
  font-size: 30px;
  letter-spacing: .04em;
  line-height: 1;
  color: var(--cream);
}
.brandmark .rm .bar { color: var(--bronze); margin: 0 4px; font-weight: 300; }
.brandmark .sub { font-size: 9px; letter-spacing: .26em; text-transform: uppercase; color: var(--tan); }
.mast-meta { text-align: right; font-size: 12px; color: var(--tan); letter-spacing: .06em; }
.mast-meta strong { color: var(--cream); font-weight: 400; }

.monthbar { display: flex; gap: 2px; margin-top: 18px; flex-wrap: wrap; }
.monthbar a {
  padding: 9px 16px 8px;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tan);
  text-decoration: none;
  border-radius: 8px 8px 0 0;
  border-bottom: 2px solid transparent;
}
.monthbar a:hover { background: rgba(246,241,231,.07); }
.monthbar a.on { background: var(--surface); color: var(--navy); border-bottom-color: var(--gold); }

/* ---------- Layout ---------- */
main { padding: 28px 0 80px; }
.section { margin-bottom: 28px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 12px; flex-wrap: wrap; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* ---------- Hero + stat tiles ---------- */
.hero {
  display: grid;
  grid-template-columns: minmax(280px, 1.2fr) 2fr;
  gap: 20px;
  align-items: stretch;
}
@media (max-width: 860px) { .hero { grid-template-columns: 1fr; } }

.hero-figure { padding: 22px 24px; }
.hero-figure .theme { font-family: 'Cormorant Garamond', serif; font-size: 25px; line-height: 1.2; margin: 2px 0 4px; }
.hero-figure .heroline { font-size: 12.5px; color: var(--ink-2); margin-bottom: 18px; }

/* Hero number: sans, never the serif display face. */
.bignum {
  font-family: 'Jost', sans-serif;
  font-size: 54px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--navy);
}
.bignum span { font-size: 22px; font-weight: 300; color: var(--ink-3); margin-left: 2px; }
.bignum-label { font-size: 12px; color: var(--ink-2); margin-top: 4px; }

/* Meter: fill and track are two steps of the same hue. */
.meter { height: 8px; border-radius: 999px; background: #1C324018; overflow: hidden; margin-top: 14px; }
.meter i { display: block; height: 100%; border-radius: 999px; background: var(--navy); }
.meter.warn i { background: var(--st-doing); }
.meter.warn  { background: #8A6A0018; }
.meter.danger i { background: var(--st-blocked); }
.meter.danger  { background: #A3243B18; }

.tiles { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; gap: 12px; }
@media (max-width: 560px) { .tiles { grid-template-columns: 1fr; } }
.tile { padding: 16px 18px; }
.tile .label { font-size: 11.5px; color: var(--ink-2); letter-spacing: .04em; }
.tile .value { font-family: 'Jost', sans-serif; font-size: 30px; font-weight: 500; line-height: 1.1; margin-top: 5px; letter-spacing: -.01em; }
.tile .foot { font-size: 11px; color: var(--ink-3); margin-top: 3px; }
.tile.alarm .value { color: var(--st-blocked); }
.tile.warn  .value { color: var(--st-doing); }
.tile.good  .value { color: var(--st-done); }

/* ---------- Filters ---------- */
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 12px 14px; }
.filters select, .filters input[type=search] {
  font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 300;
  padding: 7px 10px; border: 1px solid var(--line); border-radius: 7px;
  background: #fff; color: var(--ink); min-width: 130px;
}
.filters input[type=search] { min-width: 210px; }
.filters .spacer { flex: 1; }

.btn {
  font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 400;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 8px 15px; border-radius: 7px; border: 1px solid var(--navy);
  background: var(--navy); color: var(--cream); cursor: pointer; text-decoration: none;
  display: inline-block; line-height: 1.4;
}
.btn:hover { background: #162833; }
.btn.ghost { background: transparent; color: var(--navy); }
.btn.ghost:hover { background: #1C32400D; }
.btn.small { padding: 5px 11px; font-size: 11px; }

/* ---------- Task list ---------- */
.phase { margin-top: 22px; }
.phase-title { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.phase-title h3 { font-size: 17px; }
.phase-title .count { font-size: 11px; color: var(--ink-3); letter-spacing: .06em; }

.task {
  display: grid;
  grid-template-columns: 78px 1fr auto;
  gap: 14px;
  align-items: start;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.task:last-child { border-bottom: 0; }
.task:hover { background: #FBF8F2; }
.task.is-done .title { color: var(--ink-3); text-decoration: line-through; text-decoration-color: #C9C2B6; }
.task.is-skipped { opacity: .55; }
.task.is-overdue { box-shadow: inset 3px 0 0 var(--st-blocked); }

.task .when { font-size: 12px; color: var(--ink-2); padding-top: 2px; }
.task .when .dow { display: block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.task .title { font-size: 14.5px; font-weight: 400; }
.task .detail { font-size: 12.5px; color: var(--ink-2); margin-top: 3px; max-width: 76ch; }
.task .metarow { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; align-items: center; }
.task .actions { display: flex; gap: 6px; align-items: center; }

.chip {
  font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap;
}
.chip-cat   { background: #1C32400F; color: var(--ink-2); }
.chip-owner { background: #7C97AC1F; color: #3D5768; }
.chip-pri-critical { background: var(--st-blocked-bg); color: var(--st-blocked); font-weight: 500; }
.chip-pri-high     { background: var(--st-doing-bg); color: var(--st-doing); }
.chip-overdue      { background: var(--st-blocked); color: #fff; font-weight: 500; }
.chip-custom       { background: var(--champagne); color: #6B5518; }

.status-select {
  font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 400;
  letter-spacing: .07em; text-transform: uppercase;
  padding: 5px 9px; border-radius: 999px; border: 1px solid transparent; cursor: pointer;
  appearance: none; -webkit-appearance: none; text-align: center; min-width: 108px;
}
.s-todo    { background: var(--st-todo-bg);    color: var(--st-todo); }
.s-doing   { background: var(--st-doing-bg);   color: var(--st-doing); }
.s-done    { background: var(--st-done-bg);    color: var(--st-done); }
.s-blocked { background: var(--st-blocked-bg); color: var(--st-blocked); }
.s-skipped { background: var(--st-skipped-bg); color: var(--st-skipped); }

.addnote {
  background: none; border: 0; padding: 0; margin-top: 6px; cursor: pointer;
  font-family: 'Jost', sans-serif; font-size: 11.5px; letter-spacing: .06em; color: var(--ink-3);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #C9C2B6;
}
.addnote:hover { color: var(--navy); }

/* Collapsible sections */
details.collapse > summary {
  list-style: none; cursor: pointer; display: flex; align-items: baseline;
  justify-content: space-between; gap: 16px; padding: 0 0 12px;
}
details.collapse > summary::-webkit-details-marker { display: none; }
details.collapse > summary h2::after {
  content: ' ▸'; font-family: 'Jost', sans-serif; font-size: 13px; color: var(--ink-3);
}
details.collapse[open] > summary h2::after { content: ' ▾'; }

.notebox {
  width: 100%; margin-top: 8px; font-family: 'Jost', sans-serif; font-weight: 300;
  font-size: 12.5px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px;
  background: #FCFAF6; color: var(--ink); resize: vertical; min-height: 34px;
}
.notebox:focus { outline: 2px solid var(--blue); outline-offset: -1px; background: #fff; }

/* ---------- Blockers ---------- */
.blocker { display: flex; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); align-items: flex-start; }
.blocker:last-child { border-bottom: 0; }
.blocker .sev { width: 3px; align-self: stretch; border-radius: 2px; background: var(--st-doing); flex: none; }
.blocker.sev-critical .sev { background: var(--st-blocked); }
.blocker.sev-high .sev { background: var(--st-doing); }
.blocker .b-title { font-size: 14px; }
.blocker .b-detail { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; max-width: 82ch; }
.blocker.resolved { opacity: .5; }
.blocker.resolved .b-title { text-decoration: line-through; }

/* ---------- KPI table ---------- */
table.kpi { width: 100%; border-collapse: collapse; }
table.kpi th, table.kpi td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
table.kpi th { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); font-weight: 400; }
table.kpi td.num { font-family: 'Jost', sans-serif; font-variant-numeric: tabular-nums; }
table.kpi tr.grouphead td { background: #FBF8F2; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
table.kpi input {
  font-family: 'Jost', sans-serif; font-weight: 400; font-size: 13.5px;
  width: 110px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px;
  background: #FCFAF6; font-variant-numeric: tabular-nums;
}
table.kpi input:focus { outline: 2px solid var(--blue); outline-offset: -1px; background: #fff; }

/* ---------- Add form ---------- */
.addform { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; padding: 14px 16px; align-items: end; }
@media (max-width: 900px) { .addform { grid-template-columns: repeat(2, 1fr); } }
.addform label { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); display: block; margin-bottom: 3px; }
.addform input, .addform select, .addform textarea {
  font-family: 'Jost', sans-serif; font-weight: 300; font-size: 13px; width: 100%;
  padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--ink);
}
.addform .full { grid-column: 1 / -1; }

/* ---------- Login ---------- */
.login-page { min-height: 100vh; display: grid; place-items: center; background: var(--navy); }
.login-card { background: var(--tan); padding: 44px 44px 36px; border-radius: 12px; width: 340px; text-align: center; }
.login-card .rm { font-family: 'Cormorant Garamond', serif; font-size: 40px; color: var(--navy); line-height: 1; }
.login-card .rm .bar { color: var(--bronze); margin: 0 5px; }
.login-card .tag { font-size: 9px; letter-spacing: .24em; text-transform: uppercase; color: #6B5A4B; margin: 8px 0 26px; }
.login-card input {
  width: 100%; font-family: 'Jost', sans-serif; font-size: 14px; padding: 10px 12px;
  border: 1px solid #C0AE9C; border-radius: 7px; background: #FBF7F1; margin-bottom: 12px;
}
.login-card .btn { width: 100%; }
.login-card .err { color: #8E2436; font-size: 12.5px; margin-bottom: 12px; }

/* ---------- Client report ---------- */
.report-hero { background: var(--tan); padding: 40px 0 34px; text-align: center; }
.report-hero .rm { font-family: 'Cormorant Garamond', serif; font-size: 42px; color: var(--navy); line-height: 1; }
.report-hero .rm .bar { color: var(--bronze); margin: 0 6px; }
.report-hero .tag { font-size: 9.5px; letter-spacing: .26em; text-transform: uppercase; color: #6B5A4B; margin-top: 10px; }
.report-hero h1 { margin-top: 22px; font-size: 27px; }
.report-hero .period { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #6B5A4B; margin-top: 6px; }

.shiplist { list-style: none; margin: 0; padding: 0; }
.shiplist li { padding: 10px 16px; border-bottom: 1px solid var(--line-soft); font-size: 13.5px; display: flex; gap: 10px; align-items: baseline; }
.shiplist li:last-child { border-bottom: 0; }
.shiplist .d { font-size: 11px; color: var(--ink-3); letter-spacing: .06em; min-width: 74px; flex: none; }
.shiplist .tick { color: var(--st-done); flex: none; }

.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--ink-2); padding: 10px 16px 0; }
.legend b { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }

.empty { padding: 26px 16px; text-align: center; color: var(--ink-3); font-size: 13px; }

footer.foot { text-align: center; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); padding: 30px 0 40px; }

.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(70px);
  background: var(--navy); color: var(--cream); padding: 10px 18px; border-radius: 999px;
  font-size: 12.5px; letter-spacing: .05em; opacity: 0; transition: all .22s ease; z-index: 50;
}
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }

@media print {
  .masthead, .filters, .btn, .addform, footer.foot { display: none !important; }
  body { background: #fff; }
  .card { box-shadow: none; }
}