:root {
  --paper: #F4EFE6;
  --paper-dark: #E8E1D3;
  --ink: #1F2A33;
  --muted: #5B6670;
  --line: #C9C1B2;
  --ochre: #D9A441;
  --red: #8E2F2A;
  --green: #5E8C61;
  --blue: #3F6E9A;
  --blue-t: #C7D7E5;
  --purple: #7A5195;
  --purple-t: #D9CBE2;
  --yellow: #E0B341;
  --yellow-t: #F2E3B5;
  --gray: #9AA0A6;
  --gray-t: #DADDE0;
  --maint: #4C8AA3;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.45 "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
}

h1, h2, h3, .num, button, .tag {
  font-family: "Barlow Condensed", "Avenir Next Condensed", "Arial Narrow", Arial, sans-serif;
}

h1 { font-size: 2rem; text-transform: uppercase; letter-spacing: 0.04em; margin: 0; }
h2 { font-size: 1.1rem; text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 0.6rem; color: var(--ink); }
h3 { font-size: 1rem; margin: 0 0 0.25rem; }

header.top {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; align-items: baseline; justify-content: space-between;
  padding: 0.8rem 1.25rem; border-bottom: 2px solid var(--ink); background: var(--paper-dark);
}
header.top .status { color: var(--muted); }

main { max-width: 78rem; margin: 0 auto; padding: 1rem 1.25rem 3rem; }
.narrow { max-width: 28rem; margin: 3rem auto; }

.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); align-items: start; margin-top: 1rem; }
.panel { background: var(--paper-dark); border: 1px solid var(--line); padding: 0.9rem 1rem; }
.panel.wide { grid-column: 1 / -1; }

button {
  font-size: 1rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase;
  padding: 0.45rem 0.9rem; border: 2px solid var(--ink); background: var(--ochre); color: var(--ink); cursor: pointer;
}
button:hover:not(:disabled) { background: #e6b556; }
button.secondary { background: transparent; }
button.secondary:hover:not(:disabled) { background: var(--paper); }
button:disabled { opacity: 0.5; cursor: default; }
input[type=text], input[type=password] {
  font: inherit; padding: 0.5rem 0.6rem; border: 2px solid var(--ink); background: #fff; width: 100%;
}
.err { color: var(--red); margin: 0.5rem 0 0; }
.muted { color: var(--muted); }
.row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

.decision { border: 2px solid var(--ochre); background: #fff8e6; }
.decision .opts { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }
.decision .help { color: var(--muted); font-size: 0.9rem; margin: 0.3rem 0 0; }

/* resources & chips */
.sq { display: inline-block; width: 1.1em; height: 1.1em; border-radius: 3px; border: 1.5px solid var(--ink); vertical-align: -0.2em; }
.sq.B { background: var(--blue); } .sq.P { background: var(--purple); } .sq.Y { background: var(--yellow); } .sq.G { background: var(--gray); }
.chip {
  display: inline-block; padding: 0.1rem 0.5rem; border: 1.5px solid var(--ink); border-radius: 3px;
  font-size: 0.85rem; background: var(--paper); margin: 0 0.2rem 0.2rem 0; white-space: nowrap;
}
.role-PM { background: #6E7B86; color: #fff; } .role-Marketing { background: #D9A441; }
.role-Tech { background: #3B7F7A; color: #fff; } .role-Financial { background: #2E3D4F; color: #fff; }
.role-QC { background: #B5473F; color: #fff; } .role-HR { background: #C97B4A; }
.role-Production.B { background: var(--blue-t); } .role-Production.P { background: var(--purple-t); }
.role-Production.Y { background: var(--yellow-t); } .role-LOAN { background: #ddd; border-style: dashed; }
.chip.work { opacity: 0.55; text-decoration: line-through; }
.chip.empty { background: transparent; border-style: dashed; color: var(--muted); }

/* project area */
.area { display: inline-grid; grid-template-columns: repeat(3, 2.4rem); gap: 3px; background: var(--line); padding: 3px; }
.cell { width: 2.4rem; height: 2.4rem; background: var(--paper); display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; }
.cell.M { background: var(--maint); color: #fff; border-radius: 50%; }
.cell.C { background: var(--gray-t); border: 2px dashed var(--muted); }
.cell.p0 { background: #E9B872; } .cell.p1 { background: #9CC3A0; } .cell.p2 { background: #A9C0DA; }
.cell.p3 { background: #D3B6DE; } .cell.p4 { background: #E8A39B; } .cell.p5 { background: #B8D5D2; }
.cell.dev { outline: 2px solid var(--green); outline-offset: -3px; }
.teams { display: flex; flex-wrap: wrap; gap: 1rem; }
.team { min-width: 11rem; }

/* scoring board */
.board { display: inline-grid; grid-template-columns: repeat(4, 1.8rem) auto; gap: 2px; align-items: center; }
.bc { width: 1.8rem; height: 1.5rem; background: var(--paper); border: 1px solid var(--line); text-align: center; font-size: 0.75rem; line-height: 1.4; }
.bc.on { background: var(--ink); border-color: var(--ink); }
.bc.star:not(.on)::after { content: "\2605"; color: var(--ochre); }
.bc.star.on::after { content: "\2605"; color: var(--ochre); }
.vp { font-family: "Barlow Condensed", Arial, sans-serif; font-weight: 700; padding-left: 0.4rem; color: var(--muted); }
.vp.hit { color: var(--ink); background: var(--ochre); }

/* districts, market, calendar */
.dist { border-top: 1px solid var(--line); padding: 0.5rem 0; }
.dist:first-of-type { border-top: 0; }
.shape { display: inline-grid; gap: 1px; vertical-align: middle; margin-right: 0.4rem; }
.shape i { width: 0.7rem; height: 0.7rem; background: var(--ink); display: block; }
.shape i.off { background: transparent; }
.focus { display: inline-flex; gap: 3px; margin-left: 0.3rem; }
.fs { width: 1.5rem; height: 1.5rem; border: 1.5px solid var(--ink); border-radius: 50%; font-size: 0.75rem; text-align: center; line-height: 1.3; background: var(--paper); }
.fs.p0 { background: var(--ochre); } .fs.p1 { background: #A9C0DA; } .fs.p2 { background: #9CC3A0; } .fs.p3 { background: #D3B6DE; }
.cal-day { display: flex; gap: 0.4rem; align-items: center; border-top: 1px solid var(--line); padding: 0.25rem 0; flex-wrap: wrap; }
.cal-day:first-of-type { border-top: 0; }
.cal-day .d { width: 2.2rem; font-family: "Barlow Condensed", Arial, sans-serif; font-weight: 700; font-size: 1.1rem; }
.slot { padding: 0.15rem 0.55rem; border: 1.5px solid var(--line); background: var(--paper); font-size: 0.85rem; min-width: 4.2rem; text-align: center; }
.slot.P { border-color: var(--green); } .slot.V { border-style: dashed; }
.slot.pick { border-color: var(--ink); background: #fff8e6; cursor: pointer; font-weight: 600; box-shadow: 0 0 0 2px var(--ochre); }
.slot.sel { background: var(--ochre); }
.slot.taken { background: var(--gray-t); }
.ev { padding: 0.15rem 0.55rem; background: var(--red); color: #fff; font-size: 0.85rem; }
.ev.shared { background: var(--ink); }

.log { max-height: 16rem; overflow-y: auto; font-size: 0.9rem; }
.log div { padding: 0.1rem 0; border-bottom: 1px dotted var(--line); }
table.res { border-collapse: collapse; width: 100%; }
table.res th, table.res td { text-align: left; padding: 0.3rem 0.6rem; border-bottom: 1px solid var(--line); }
table.res tr.win { background: #fff8e6; font-weight: 700; }
.cash { font-family: "Barlow Condensed", Arial, sans-serif; font-weight: 700; font-size: 1.2rem; }

/* month calendar */
.legend { margin-bottom: 0.6rem; gap: 0.4rem 0.6rem; }
.weeks { display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); align-items: start; }
.week { background: var(--paper); border: 1px solid var(--line); padding: 0.5rem 0.7rem; }
.week.current { border: 2px solid var(--ochre); background: #fff8e6; }
.week.past { opacity: 0.75; }
.week h3 { display: flex; gap: 0.4rem; align-items: baseline; }
.chip.now { background: var(--ochre); margin-left: auto; }
.tk { display: inline-block; padding: 0.15rem 0.55rem; border: 1.5px solid var(--ink); font-size: 0.85rem; min-width: 4.2rem; text-align: center; }
.tk.p0 { background: var(--ochre); } .tk.p1 { background: #A9C0DA; } .tk.p2 { background: #9CC3A0; } .tk.p3 { background: #D3B6DE; }
.tk.done { border-style: dashed; font-weight: 600; }
.tabs { margin-bottom: 0.8rem; }