/* Firasa design system: ivory ground (60), emerald brand surfaces (30), brass accents (10).
   Cormorant Garamond for headings and quotes, Manrope for text, numbers and interface.
   Square corners, hairlines instead of shadows, no gradients. Spacing in steps of 8. */
:root {
  --ivory: #F7F3EA; --stone: #ECE5D8; --hairline: #D9CFBD; --ink: #14201D; --muted: #5A635E;
  --emerald: #123D35; --on-emerald: #F7F3EA; --emerald-text: #123D35; --brass: #A9824A; --brass-text: #7A5A2B;
  --oxblood: #7B2F2A; --card: #FFFDF8;
  --serif: "Cormorant Garamond", Garamond, Georgia, serif; --sans: Manrope, system-ui, sans-serif;
  --r1: 2px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font: 15px/1.55 var(--sans); color: var(--ink); background: var(--ivory); -webkit-font-smoothing: antialiased; }
a { color: var(--emerald-text); text-decoration-color: var(--hairline); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--brass); }
h1, h2, h3 { font-family: var(--serif); color: var(--ink); margin: 0 0 8px; letter-spacing: 0; }
h1 { font-size: 48px; font-weight: 500; line-height: 1.05; }
h2 { font-size: 30px; font-weight: 600; margin-top: 48px; line-height: 1.15; }
h3 { font-size: 22px; font-weight: 600; line-height: 1.2; }
.label, .navlabel, .tbl th, .tl, .kicker { font: 600 11px/1.4 var(--sans); text-transform: uppercase; letter-spacing: .18em; }
.kicker { color: var(--brass-text); margin-bottom: 8px; }
.muted { color: var(--muted); } .small { font-size: 13px; } .pre { white-space: pre-wrap; margin: 0; }
.error { color: var(--oxblood); font-weight: 600; }

/* Shell: emerald sidebar as the brand surface */
.shell { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
.side { background: var(--emerald); color: var(--on-emerald); display: flex; flex-direction: column; padding: 32px 16px 24px; position: sticky; top: 0; height: 100vh; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--on-emerald); text-decoration: none; margin: 0 8px 32px; }
.brand .wm { display: flex; flex-direction: column; line-height: 1; }
.brand .wm b { font: 500 22px/1 var(--serif); letter-spacing: .2em; }
.brand .wm i { font: 600 9px/1 var(--sans); font-style: normal; letter-spacing: .32em; margin-top: 6px; color: var(--brass); }
.mark { display: block; width: auto; }
nav { flex: 1; overflow-y: auto; }
.navgroup { margin-bottom: 24px; }
.navlabel { color: rgba(247, 243, 234, .5); margin: 0 8px 8px; }
.nav { display: block; color: rgba(247, 243, 234, .82); text-decoration: none; padding: 7px 8px 7px 12px; border-left: 1px solid transparent; }
.nav:hover { color: var(--on-emerald); border-left-color: rgba(169, 130, 74, .5); }
.nav.on { color: var(--on-emerald); border-left-color: var(--brass); font-weight: 600; }
.me { border-top: 1px solid rgba(247, 243, 234, .14); padding: 16px 8px 0; }
.me-name { font-weight: 600; } .me-role { color: rgba(247, 243, 234, .6); font-size: 13px; text-transform: capitalize; }
.me-links { display: flex; gap: 16px; margin-top: 8px; font-size: 13px; }
.me-links a, .linkbtn { color: rgba(247, 243, 234, .82); }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-decoration: underline; text-decoration-color: rgba(247, 243, 234, .3); text-underline-offset: 3px; }
.main { padding: 48px 56px 96px; max-width: 1280px; }

.phead { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--hairline); position: relative; }
.phead::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 64px; height: 1px; background: var(--brass); }
.sub { color: var(--muted); margin: 8px 0 0; max-width: 720px; }
.actions { display: flex; gap: 8px; align-items: center; }
.flash { background: var(--card); border: 1px solid var(--hairline); border-left: 2px solid var(--emerald); padding: 12px 16px; margin-bottom: 24px; }

.card { background: var(--card); border: 1px solid var(--hairline); padding: 24px; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.narrow { max-width: 560px; }
.row { display: flex; gap: 8px; align-items: center; } .row.between { justify-content: space-between; } .row.wrap { flex-wrap: wrap; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .span2 { grid-column: span 2; } .end { display: flex; align-items: flex-end; justify-content: flex-end; }
.cols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; align-items: start; }

label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink); }
label.check { flex-direction: row; align-items: center; gap: 8px; font-weight: 400; font-size: 14px; }
input, select, textarea { font: inherit; color: var(--ink); background: #fff; border: 1px solid var(--hairline); border-radius: var(--r1); padding: 10px 12px; }
input:focus, select:focus, textarea:focus { outline: 1px solid var(--brass); outline-offset: 0; border-color: var(--brass); }
input[type=checkbox], input[type=radio] { accent-color: var(--emerald); }
.row input { flex: 1; }
fieldset.boxes { border: 1px solid var(--hairline); padding: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
fieldset.boxes legend { font: 600 11px var(--sans); text-transform: uppercase; letter-spacing: .18em; color: var(--brass-text); padding: 0 8px; }
fieldset.boxes p { grid-column: span 2; margin: 8px 0 0; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 600 14px var(--sans); cursor: pointer; text-decoration: none;
  background: transparent; color: var(--ink); border: 1px solid var(--ink); border-radius: var(--r1); padding: 10px 18px; }
.btn:hover { background: var(--stone); }
.btn.primary { background: var(--emerald); color: var(--on-emerald); border-color: var(--emerald); }
.btn.primary:hover { background: #0d2f29; }
.btn.small { padding: 6px 12px; font-size: 13px; }
.btn.on { background: var(--emerald); color: var(--on-emerald); border-color: var(--emerald); }
.btn.danger { color: var(--oxblood); border-color: var(--oxblood); }

.tbl { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--hairline); }
.tbl th, .tbl td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--hairline); font-size: 14px; }
.tbl th { color: var(--muted); background: var(--stone); font-size: 10.5px; }
.tbl tr.dim td { color: var(--muted); }
.tag { display: inline-block; font: 600 10px/1.6 var(--sans); text-transform: uppercase; letter-spacing: .14em; padding: 1px 8px; border: 1px solid var(--hairline); color: var(--muted); margin-left: 8px; }
.tag.ws { margin-left: 0; }

.tabs { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; margin-bottom: 24px; border-bottom: 1px solid var(--hairline); }
.tab { padding: 8px 0 10px; text-decoration: none; color: var(--muted); border-bottom: 1px solid transparent; margin-bottom: -1px; font-weight: 500; }
.tab:hover { color: var(--ink); }
.tab.on { color: var(--ink); border-bottom-color: var(--brass); font-weight: 600; }
.grow { flex: 1; }
.chip { font-size: 13px; padding: 4px 12px; border: 1px solid var(--hairline); border-radius: var(--r1); text-decoration: none; color: var(--ink); background: transparent; margin-bottom: 8px; }
.chip.on { border-color: var(--emerald); background: var(--emerald); color: var(--on-emerald); }
.newtask { margin-bottom: 24px; } .newtask summary { cursor: pointer; font-weight: 600; } .newtask form { margin-top: 16px; }

.tlist { background: var(--card); border: 1px solid var(--hairline); }
.trow { display: grid; grid-template-columns: 12px minmax(0,1fr) 80px 140px 110px 50px 110px; gap: 12px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--hairline); text-decoration: none; color: var(--ink); }
.trow:hover { background: var(--ivory); } .trow:last-child { border-bottom: 0; }
.trow.s-done .ttitle { color: var(--muted); text-decoration: line-through; }
.ttitle { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tmeta { font-size: 13px; color: var(--muted); } .tmeta.late { color: var(--oxblood); font-weight: 600; }
.dot { width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--hairline); } .dot.p-high { background: var(--oxblood); border-color: var(--oxblood); } .dot.p-normal { background: var(--hairline); }
.status { font: 600 10px/1.6 var(--sans); text-transform: uppercase; letter-spacing: .12em; padding: 3px 8px; border: 1px solid var(--hairline); color: var(--muted); text-align: center; white-space: nowrap; }
.st-doing, .rq-building { color: var(--emerald-text); border-color: var(--emerald); }
.st-waiting, .st-review, .rq-preview { color: var(--brass-text); border-color: var(--brass); }
.st-rework { color: var(--oxblood); border-color: var(--oxblood); }
.st-done, .rq-live { color: var(--on-emerald); background: var(--emerald); border-color: var(--emerald); }
.empty { color: var(--muted); padding: 40px; text-align: center; border: 1px dashed var(--hairline); }

.board { display: grid; grid-template-columns: repeat(6, minmax(176px, 1fr)); gap: 16px; overflow-x: auto; }
.col { background: var(--stone); padding: 12px; min-height: 200px; }
.colhead { font: 600 11px var(--sans); text-transform: uppercase; letter-spacing: .14em; margin-bottom: 12px; }
.bcard { display: block; background: var(--card); border: 1px solid var(--hairline); padding: 10px 12px; margin-bottom: 8px; text-decoration: none; color: var(--ink); }
.bcard.p-high { border-left: 2px solid var(--oxblood); }
.btitle { font-weight: 600; font-size: 14px; } .bmeta { font-size: 12px; color: var(--muted); margin-top: 6px; }

.statusbtns { display: flex; flex-wrap: wrap; gap: 8px; }
.score { display: flex; gap: 16px; } .score label { flex-direction: row; gap: 4px; align-items: center; }
.comment { border-left: 1px solid var(--brass); padding: 2px 0 2px 12px; } .cmeta { font-size: 13px; color: var(--muted); }
.note { background: var(--stone); padding: 8px 12px; }

.tiles { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--hairline); background: var(--card); margin-bottom: 32px; }
.tile { padding: 20px 20px 18px; text-decoration: none; color: var(--ink); border-right: 1px solid var(--hairline); }
.tile:last-child { border-right: 0; }
a.tile:hover { background: var(--ivory); }
.tl { color: var(--muted); font-size: 10.5px; }
.tv { font: 600 30px/1.2 var(--sans); margin-top: 8px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.copy { width: 100%; font-family: ui-monospace, monospace; font-size: 13px; }

/* Login: ivory side with the logo, emerald side with brass arcs */
body.bare { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100vh; background: var(--ivory); }
.auth { display: flex; flex-direction: column; justify-content: center; padding: 64px; max-width: 520px; margin: 0 auto; width: 100%; }
.auth .logofull { width: 180px; margin: 0 0 40px; }
.auth h2 { margin-top: 0; }
.tagline { color: var(--muted); margin: -24px 0 40px; font-size: 14px; }
.cover { background: var(--emerald); position: relative; overflow: hidden; }
.cover svg { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; }
.logofull { width: 200px; height: auto; display: block; }

/* numbers pages */
.fresh { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; font-size: 13px; color: var(--muted); margin: 0 0 24px; }
.freshitem.err { color: var(--oxblood); }
form.inline { display: inline; }
.tn { font-size: 13px; color: var(--muted); margin-top: 4px; }
.delta { font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.delta.good { color: var(--emerald-text); } .delta.bad { color: var(--oxblood); }
.chart > svg, .chart .view > svg { width: 100%; height: auto; display: block; }
.chart .grid { stroke: var(--hairline); stroke-width: 1; }
.chart .axis { font-size: 11px; fill: var(--muted); font-family: var(--sans); }
.legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; color: var(--ink); margin: 8px 0; }
.legend .sw { width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; display: inline-block; }
.tblwrap { overflow-x: auto; }
.tbl.num td, .tbl.num th { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tbl.num td:first-child, .tbl.num th:first-child { text-align: left; white-space: normal; }
.tbl tr.total td { font-weight: 700; border-top: 1px solid var(--ink); background: var(--ivory); }
.tbl td.muted { color: var(--muted); }
.tbl td.nowrap { white-space: nowrap; }

@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: static; height: auto; padding: 20px 16px; }
  nav { display: flex; flex-wrap: wrap; gap: 4px 12px; } .navgroup { margin: 0; } .navlabel { display: none; }
  .nav { border-left: 0; padding: 4px 0; } .nav.on { border-bottom: 1px solid var(--brass); }
  .main { padding: 24px 16px 64px; }
  h1 { font-size: 36px; }
  .cols, .grid2 { grid-template-columns: 1fr; } .span2 { grid-column: auto; }
  .tiles { grid-template-columns: 1fr 1fr; } .tile { border-bottom: 1px solid var(--hairline); }
  .trow { grid-template-columns: 10px 1fr 100px; } .trow .tag.ws, .trow .tmeta { display: none; }
  body.bare { grid-template-columns: 1fr; } .cover { display: none; } .auth { padding: 40px 24px; }
}
.range { display: flex; gap: 8px; align-items: flex-end; margin-left: auto; padding-bottom: 6px; }
.range label { flex-direction: row; align-items: center; gap: 6px; font-weight: 500; color: var(--muted); }
.range input { padding: 5px 8px; font-size: 13px; }
.flag { display: inline-block; font: 600 10px/1.6 var(--sans); text-transform: uppercase; letter-spacing: .1em; padding: 1px 6px; border: 1px solid; margin: 0 4px 2px 0; white-space: nowrap; }
.flag.bad { color: var(--oxblood); border-color: var(--oxblood); } .flag.warn { color: var(--brass-text); border-color: var(--brass); } .flag.good { color: var(--emerald-text); border-color: var(--emerald); }
.tbl a.rowlink { color: var(--ink); text-decoration: underline; text-decoration-color: var(--hairline); }
.tbl a.rowlink:hover { text-decoration-color: var(--brass); }
.crumbs { font-size: 13px; color: var(--muted); margin-bottom: 16px; } .crumbs a { color: var(--muted); }

.reflect { margin: 0 0 32px; padding: 8px 0 8px 24px; border-left: 1px solid var(--brass); }
.reflect blockquote { font: italic 500 26px/1.35 var(--serif); color: var(--ink); margin: 0 0 8px; max-width: 860px; }
.reflect figcaption { color: var(--muted); font-size: 13px; }
.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 32px 0; }
.attn { margin: 0; padding-left: 18px; } .attn li { margin: 8px 0; }
.tiles.four { grid-template-columns: repeat(4, 1fr); }
.card + .tiles, .cols2 + .tiles { margin-top: 0; }
@media (max-width: 900px) { .cols2 { grid-template-columns: 1fr; } .tiles.four { grid-template-columns: 1fr 1fr; } }
.chart .zero { stroke: var(--ink); stroke-width: 1; opacity: .5; }
.tile.hero { background: var(--emerald); color: var(--on-emerald); } .tile.hero .tl, .tile.hero .tn { color: rgba(247,243,234,.75); } .tile.hero .delta.good { color: #9FD1BF; } .tile.hero .delta.bad { color: #E6A39C; }

/* Bol section navigation above the period tabs, and numbers that need attention */
.tabs.sect { margin-bottom: 16px; }
.tabs.sect .tab { font-size: 15px; }
.neg { color: var(--oxblood); font-weight: 600; }
.cols2 h3 { margin-top: 0; }
.tbl.num.wide td:first-child { min-width: 240px; }

/* Task matrix: urgency left to right, importance bottom to top */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.matrix { display: grid; grid-template-columns: 72px repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 32px; }
.mx-y { grid-column: 1 / -1; font: 600 10.5px/1.6 var(--sans); text-transform: uppercase; letter-spacing: .18em; color: var(--brass-text); }
.mx-x { grid-column: 2 / -1; text-align: center; font: 600 10.5px/1.6 var(--sans); text-transform: uppercase; letter-spacing: .18em; color: var(--brass-text); }
.mx-lab { font-size: 13px; color: var(--muted); align-self: center; }
.mx-lab.x { text-align: center; }
.mx-cell { min-height: 150px; max-height: 520px; overflow-y: auto; border: 1px solid var(--hairline); padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.mx-cell.z-do { background: rgba(18, 61, 53, .09); border-color: rgba(18, 61, 53, .35); }
.mx-cell.z-plan { background: var(--stone); }
.mx-cell.z-delegate { background: rgba(169, 130, 74, .12); }
.mx-cell.z-later { background: var(--ivory); }
.mx-zone { font: 600 10.5px/1.6 var(--sans); text-transform: uppercase; letter-spacing: .18em; color: var(--brass-text); }
.mx-cell.z-do .mx-zone { color: var(--emerald); }
.mx-task { display: block; background: var(--card); border: 1px solid var(--hairline); padding: 8px 10px; text-decoration: none; color: var(--ink); }
.mx-task:hover { border-color: var(--brass); }
.mx-t { display: block; font-size: 13px; font-weight: 600; line-height: 1.35; }
.mx-m { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
@media (max-width: 900px) { .matrix { grid-template-columns: 56px repeat(3, minmax(120px, 1fr)); overflow-x: auto; } }
/* Forecast inputs: three cards of fields, changed fields marked in brass */
.fgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 16px 0 32px; }
.fgrid .card { display: flex; flex-direction: column; gap: 16px; }
.fgrid .card h3 { margin: 0; }
.fgrid label.changed input { border-color: var(--brass); background: #FBF6EC; }
.fgrid .was { font-weight: 400; font-size: 12px; color: var(--brass-text); }
.fbar { grid-column: 1 / -1; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
@media (max-width: 900px) { .fgrid { grid-template-columns: 1fr; } }


/* Chart hover: a faint column behind the day and a small card with the numbers */
.chart .hit { fill: transparent; pointer-events: all; cursor: default; }
.chart .hit.on { fill: rgba(18, 61, 53, .06); }
.tip { position: fixed; z-index: 50; pointer-events: none; background: var(--card); border: 1px solid var(--hairline); padding: 12px 16px; min-width: 180px; font: 400 13px/1.5 var(--sans); color: var(--ink); }
.tip-t { font: 600 10.5px/1.6 var(--sans); text-transform: uppercase; letter-spacing: .18em; color: var(--brass-text); margin-bottom: 8px; }
.tip-r { display: grid; grid-template-columns: 10px 1fr auto; gap: 8px; align-items: center; }
.tip-r i { width: 10px; height: 10px; display: block; }
.tip-r b { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.tip-s { border-top: 1px solid var(--hairline); margin-top: 8px; padding-top: 8px; }
h2.first { margin-top: 16px; }

/* Clickable legend: show one series, click again (or Show all) for all */
.legend .lg { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; align-items: center; }
.legend .lg:hover { color: var(--emerald); text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: 3px; }
.legend.filtered .lg:not([aria-pressed="true"]):not(.all) { opacity: .45; }
.legend .lg[aria-pressed="true"] { font-weight: 600; }
.legend .lg.all { color: var(--brass-text); font-weight: 600; }
.chart .view[hidden] { display: none; }
.legend .lg[hidden] { display: none; }