/* BRIDGE Renkei UI (fc-lab). Tokens follow the Bridge ONE design system (packages/client/src/design/tokens):
   brand blue #1D51D3 with its generated scale, MUI greys, Inter, an 8 px spacing step, radius 4 / 12, one shadow. */

@font-face {
  font-family: "Inter";
  src: url("fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --brand-50: #e8eefb; --brand-100: #d2dcf6; --brand-200: #a5b9ed; --brand-500: #1d51d3; --brand-600: #1945b3; --brand-800: #0f2969;
  --ink: #212121; --ink-2: #727682; --ink-3: #9e9e9e;
  --bg: #fafafa; --paper: #ffffff; --contrast: #f5f5f5; --line: #ebebeb; --line-2: #e0e0e0;
  --error: #f5475c; --error-surface: #ffebee; --error-ink: #c62828;
  --warning: #ff9800; --warning-surface: #fff3e0; --warning-ink: #ef6c00;
  --success: #4caf50; --success-surface: #e8f5e9; --success-ink: #2e7d32;
  --mapped: #607d8b; --mapped-surface: #eceff1; --mapped-ink: #37474f;
  --shadow: 0 4px 8px 0 rgb(0 0 0 / 0.08);
  --r: 4px; --r-lg: 12px;
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px;
  --rail: 232px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --brand-50: #16244a; --brand-100: #1c3163; --brand-200: #2f4f9c; --brand-500: #6f93f0; --brand-600: #8eaaf3; --brand-800: #c9d6fa;
    --ink: #ffffff; --ink-2: #a7abb5; --ink-3: #7c7f87;
    --bg: #121212; --paper: #1e1e1e; --contrast: #262626; --line: #303030; --line-2: #3a3a3a;
    --error-surface: #3b1a1f; --error-ink: #ff8a97;
    --warning-surface: #3a2a12; --warning-ink: #ffb74d;
    --success-surface: #1b3320; --success-ink: #81c784;
    --mapped-surface: #263238; --mapped-ink: #b0bec5;
    --shadow: 0 4px 12px 0 rgb(0 0 0 / 0.5);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { font-size: 14px; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 500 1rem/1.43 "Inter", Helvetica, Arial, sans-serif; letter-spacing: 0.01em;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-weight: 600; letter-spacing: 0; margin: 0; }
h1 { font-size: 1.43rem; line-height: 2rem; }
h2 { font-size: 1.29rem; line-height: 1.75rem; }
h3 { font-size: 1.07rem; line-height: 1.5rem; margin-bottom: var(--s1); }
a { color: var(--brand-500); text-decoration: none; }
a:hover { text-decoration: underline; }
strong { font-weight: 600; }
em { color: var(--ink-2); font-style: normal; }
ul { margin: 4px 0 var(--s1); padding-left: 20px; }
:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 1px; }

/* ---------- shell ---------- */
.shell { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); min-height: 100vh; }
.rail { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: var(--s3);
  padding: var(--s3) var(--s2); background: var(--paper); border-right: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; padding: 0 var(--s1); }
.brand .mark { width: 32px; height: 32px; padding: 6px; border-radius: var(--r); background: var(--brand-500); fill: #fff; flex: none; }
.brand strong { display: block; font-size: 1.07rem; line-height: 1.2; }
.brand small { display: block; color: var(--ink-2); font-size: 0.86rem; }
#nav { display: flex; flex-direction: column; gap: 2px; }
#nav button { display: flex; align-items: center; gap: 12px; width: 100%; height: 40px; padding: 0 12px;
  border: 0; border-radius: var(--r); background: transparent; color: var(--ink-2); font: inherit; text-align: left; cursor: pointer; }
#nav button svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
#nav button:hover { background: var(--contrast); color: var(--ink); }
#nav button.on { background: var(--brand-50); color: var(--brand-500); }
.work { min-width: 0; display: flex; flex-direction: column; }
.top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  min-height: 64px; padding: 0 var(--s4); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line); }
#who { display: flex; align-items: center; gap: 12px; color: var(--ink-2); }
#who .avatar { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--brand-100); color: var(--brand-800); font-weight: 600; }
#who .person { display: flex; flex-direction: column; line-height: 1.25; }
#who .person b { color: var(--ink); font-weight: 600; }
main { padding: var(--s3) var(--s4) var(--s4); display: flex; flex-direction: column; gap: var(--s3); }

/* status line */
#msg:empty { display: none; }
#msg { margin: var(--s2) var(--s4) 0; padding: 10px var(--s2); border-radius: var(--r); border-left: 4px solid; white-space: pre-wrap; }
#msg.ok { background: var(--success-surface); color: var(--success-ink); border-color: var(--success); }
#msg.err { background: var(--error-surface); color: var(--error-ink); border-color: var(--error); }

/* ---------- controls ---------- */
button { height: 32px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--paper);
  color: var(--ink); font: inherit; cursor: pointer; white-space: nowrap; }
button:hover:not(:disabled) { border-color: var(--brand-200); color: var(--brand-500); }
button:disabled { opacity: 0.45; cursor: default; }
button.primary { background: var(--brand-500); border-color: var(--brand-500); color: #fff; }
button.primary:hover:not(:disabled) { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
button.link { height: auto; padding: 0 4px; border: 0; background: none; color: var(--brand-500); }
button.link:hover:not(:disabled) { text-decoration: underline; }
input, select, textarea { height: 32px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--paper); color: var(--ink); font: inherit; min-width: 0; }
textarea { height: auto; padding: 6px 10px; }
input:hover, select:hover { border-color: var(--ink-3); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 3px var(--brand-100); }
input[type="checkbox"] { height: 16px; width: 16px; accent-color: var(--brand-500); }
label { display: inline-flex; flex-direction: column; gap: 4px; margin: 0 var(--s2) var(--s1) 0; color: var(--ink-2); font-size: 0.93rem; vertical-align: bottom; }
label:has(> input[type="checkbox"]) { flex-direction: row-reverse; justify-content: flex-end; align-items: center; height: 32px; margin-top: 20px; color: var(--ink); }

/* sections: fieldsets are the screens' form groups, panels the editor's side areas */
fieldset { margin: 0; padding: var(--s2) var(--s3) var(--s1); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); min-width: 0; }
legend { padding: 0 6px; margin-left: -6px; color: var(--ink); font-weight: 600; font-size: 1.07rem; }
.toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; column-gap: var(--s2); }
.toolbar label { margin-right: 0; }
.toolbar em { display: block; flex-basis: 100%; padding-bottom: var(--s1); color: var(--warning-ink); }
.row { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--s3); align-items: start; }
.col.side { position: sticky; top: 88px; }
.panel table { width: 100%; }
.col { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.panel:empty { display: none; }
.panel .scroll { max-height: 360px; overflow: auto; margin: var(--s1) 0; border: 1px solid var(--line); border-radius: var(--r); }
.panel .scroll table { margin: 0; }
.panel .scroll th { position: sticky; top: 0; z-index: 1; }
details.moves { margin: var(--s1) 0; }
details.moves summary { cursor: pointer; color: var(--brand-500); }
.panel { padding: var(--s2) var(--s3); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); overflow-x: auto; }
.panel.main { padding: 0; box-shadow: var(--shadow); border-color: transparent; overflow: hidden; }
.panel > div + div { margin-top: var(--s1); }
#exports > div, #side > div, #chart > div, #pending { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); }
#pending > h3, #pending > table { flex-basis: 100%; }
#exports input, #side input[size] { flex: 1 1 160px; }
pre { margin: var(--s1) 0; padding: var(--s1) 12px; max-height: 20em; overflow: auto; border-radius: var(--r);
  background: var(--contrast); font: 0.86rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.bad { color: var(--error-ink); }
.warning { color: var(--warning-ink); }

/* ---------- tables ---------- */
table { border-collapse: separate; border-spacing: 0; margin: var(--s1) 0; font-variant-numeric: tabular-nums; }
th, td { padding: 6px 12px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { color: var(--ink-2); font-weight: 500; font-size: 0.93rem; background: var(--contrast); }
th:first-child { border-top-left-radius: var(--r); } th:last-child { border-top-right-radius: var(--r); }
td.l, th.l, td:first-child, th:first-child { text-align: left; }
td.id { font: 0.79rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink-3); user-select: all; }
tr:hover > td { background: color-mix(in srgb, var(--contrast) 60%, transparent); }

/* ---------- the forecast grid ---------- */
.grid-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s1) var(--s3); padding: var(--s3) var(--s3) var(--s2); }
.grid-head h2 small { margin-left: 8px; color: var(--ink-2); font-weight: 500; font-size: 1rem; }
.legend { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.legend li { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border-radius: var(--r);
  background: var(--contrast); color: var(--ink-2); font-size: 0.86rem; }
.legend i { display: inline-block; width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--line-2); background: var(--paper); }
.grid-scroll { max-height: calc(100vh - 260px); overflow: auto; border-top: 1px solid var(--line); }
table.grid { width: 100%; margin: 0; }
table.grid th { position: sticky; top: 0; z-index: 2; border-radius: 0; padding: 10px 14px; }
table.grid td { padding: 0 14px; height: 36px; }
table.grid td:first-child { padding-left: var(--s3); color: var(--ink-2); }
table.grid tr.year td { height: 44px; background: var(--contrast); color: var(--ink); font-weight: 650; border-top: 1px solid var(--line-2); }
table.grid tr.year td:first-child { color: var(--ink); font-size: 1.07rem; }
table.grid tr.year td small { margin-left: 8px; color: var(--ink-2); font-weight: 500; font-size: 0.86rem; }
table.grid tr.member td { color: var(--ink-2); font-size: 0.93rem; height: 30px; }
table.grid tr.member td:first-child { padding-left: 48px; }
table.grid tr.quarter td:first-child { padding-left: 36px; }
table.grid tr.sel > td { box-shadow: inset 0 1px 0 var(--brand-200), inset 0 -1px 0 var(--brand-200); }
table.grid tr.sel > td:first-child { box-shadow: inset 3px 0 0 var(--brand-500), inset 0 1px 0 var(--brand-200), inset 0 -1px 0 var(--brand-200); }
table.grid td.comment { max-width: 240px; overflow: hidden; text-overflow: ellipsis; color: var(--ink-2); font-weight: 400; text-align: left; }
table.grid button.link { opacity: 0; }
table.grid tr:hover button.link, table.grid button.link:focus-visible, table.grid tr.sel button.link { opacity: 1; }
.qtag { display: inline-block; min-width: 22px; margin-left: 6px; padding: 0 5px; border-radius: 3px; background: var(--line); color: var(--ink-2); font-size: 0.79rem; text-align: center; }

/* cell states, matched one to one by the legend */
td.actual, .legend i.actual { color: var(--ink-3); }
.legend i.actual { background: var(--contrast); }
td.edit { cursor: text; }
td.edit:hover { box-shadow: inset 0 0 0 1px var(--brand-500); background: var(--brand-50); }
td.edit input { width: 100%; max-width: 120px; height: 28px; text-align: right; }
td.typed { font-weight: 650; color: var(--ink); background-image: linear-gradient(var(--brand-500), var(--brand-500)); background-size: 2px 14px; background-repeat: no-repeat; background-position: right 6px center; }
.legend i.typed { background-image: linear-gradient(var(--brand-500), var(--brand-500)); background-size: 2px 8px; background-repeat: no-repeat; background-position: right 2px center; }
table.grid tr.month td { height: 28px; font-size: 0.86rem; color: var(--ink-3); }
table.grid tr.month td:first-child { padding-left: 52px; }
td.pending, .legend i.pending { background: var(--brand-100); color: var(--brand-800); }
td.mapped { color: var(--mapped-ink); background: var(--mapped-surface); background-image: linear-gradient(90deg, var(--mapped) 2px, transparent 2px); }
.legend i.mapped { background: var(--mapped-surface); border-left: 3px solid var(--mapped); }
td.suggested, .legend i.suggested { background: var(--success-surface); color: var(--success-ink); }
td.suggested { position: relative; }
td.suggested button.take { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); height: 22px; padding: 0 8px;
  border-color: var(--success); background: var(--paper); color: var(--success-ink); font-size: 0.86rem; opacity: 0; }
tr:hover td.suggested button.take, td.suggested button.take:focus-visible { opacity: 1; }
td.warn, .legend i.warn { box-shadow: inset 0 -3px 0 var(--warning); }
td.block, .legend i.block { box-shadow: inset 0 -3px 0 var(--error); }
td.outlier, td.outside, .legend i.outlier { background: var(--error-surface); color: var(--error-ink); }
td.high { background: var(--warning-surface); }
td.low { background: var(--brand-50); }
td.excluded { text-decoration: line-through; color: var(--ink-3); }

/* ---------- sign-in ---------- */
.signin { display: grid; place-items: start center; padding-top: 8vh; }
.signin .card { width: min(420px, 100%); padding: var(--s4); border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--shadow); }
.signin .card p { margin: 4px 0 var(--s3); color: var(--ink-2); }
.signin label { display: flex; margin: 0 0 var(--s2); }
.signin input { width: 100%; height: 40px; }
.signin button.primary { width: 100%; height: 40px; }
.signin details { margin-top: var(--s3); padding-top: var(--s2); border-top: 1px solid var(--line); color: var(--ink-2); }
.signin summary { cursor: pointer; color: var(--brand-500); margin-bottom: var(--s2); }
.shell.anon { grid-template-columns: minmax(0, 1fr); }
.shell.anon .rail, .shell.anon .top { display: none; }
.signin .brand { padding: 0; margin-bottom: var(--s3); }

/* ---------- narrow screens ---------- */
@media (max-width: 1100px) { .row { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .rail { position: static; height: auto; flex-direction: row; align-items: center; gap: var(--s2); padding: var(--s1) var(--s2); overflow-x: auto; }
  .brand small { display: none; }
  .brand strong { white-space: nowrap; }
  .rail { scrollbar-width: none; }
  #nav { flex-direction: row; }
  #nav button { width: auto; height: 36px; }
  #nav button span { display: none; }
  .top { padding: 0 var(--s2); min-height: 56px; }
  main { padding: var(--s2); }
  #msg { margin: var(--s1) var(--s2) 0; }
  #who .person { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* ---------- screen parts: forms, badges, steps, lineage, stats ---------- */
fieldset > h3 { margin-top: var(--s2); }
.form-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 var(--s2); margin: var(--s1) 0; }
.form-row > label { margin: 0 0 var(--s1); }
.form-row > button { margin-bottom: var(--s1); }
label[hidden] { display: none; }
.note { margin: var(--s1) 0; max-width: 72ch; color: var(--ink-2); font-weight: 400; }
.subform { margin-top: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--line); }
.subform > h3:first-child { margin-top: 0; }
.subform:empty { display: none; }
button[hidden] { display: none; }
td small, .lineage small { display: block; color: var(--ink-2); font-weight: 400; font-size: 0.86rem; }
td.actions { text-align: left; }
td.actions button + button { margin-left: 4px; }
td.stat, th.stat { background: color-mix(in srgb, var(--contrast) 55%, transparent); }
.result:empty { display: none; }
.result details { padding: var(--s2) var(--s3); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); }
.result summary { cursor: pointer; font-weight: 600; }
button.danger, button.link.danger { color: var(--error-ink); }
button.danger:hover:not(:disabled) { border-color: var(--error); color: var(--error-ink); }

.badge { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 11px; vertical-align: middle;
  background: var(--contrast); color: var(--ink-2); font-size: 0.86rem; font-weight: 600; white-space: nowrap; }
.badge.brand { background: var(--brand-500); color: #fff; }
.badge.brand-soft { background: var(--brand-50); color: var(--brand-500); }
.badge.success { background: var(--success-surface); color: var(--success-ink); }
.badge.info { background: var(--brand-50); color: var(--brand-600); }
.badge.warning { background: var(--warning-surface); color: var(--warning-ink); }
.badge.error { background: var(--error-surface); color: var(--error-ink); }
td .badge + .badge, strong + .badge { margin-left: 6px; }

/* the round's status flow: a real sequence, so it is drawn as one */
.steps { display: flex; margin: var(--s1) 0 var(--s2); padding: 0; list-style: none; counter-reset: step; overflow-x: auto; }
.steps li { flex: 1 1 0; min-width: 104px; position: relative; padding: 36px 8px 0; text-align: center; color: var(--ink-3); counter-increment: step; }
.steps li::before { content: counter(step); position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 1;
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--line-2); background: var(--paper); font-weight: 600; font-size: 0.86rem; }
.steps li::after { content: ""; position: absolute; top: 13px; left: calc(-50% + 14px); width: calc(100% - 28px); height: 2px; background: var(--line-2); }
.steps li:first-child::after { display: none; }
.steps li.done { color: var(--ink-2); }
.steps li.done::before { content: "✓"; border-color: var(--brand-500); background: var(--brand-500); color: #fff; }
.steps li.done::after, .steps li.current::after { background: var(--brand-500); }
.steps li.current { color: var(--brand-500); font-weight: 650; }
.steps li.current::before { border-color: var(--brand-500); color: var(--brand-500); box-shadow: 0 0 0 4px var(--brand-100); }

/* lineage: nearest first, each dataset branched from the next */
.lineage { margin: var(--s1) 0; padding: 0; list-style: none; }
.lineage li { position: relative; padding: 6px 0 10px 28px; }
.lineage li::before { content: ""; position: absolute; left: 6px; top: 12px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--brand-500); background: var(--paper); }
.lineage li:not(:last-child)::after { content: ""; position: absolute; left: 11px; top: 26px; bottom: -6px; width: 2px; background: var(--line-2); }
.lineage li:first-child::before { background: var(--brand-500); }

.stats { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); margin: var(--s1) 0 var(--s2); }
.stats div { display: flex; flex-direction: column; }
.stats b { font-size: 1.43rem; line-height: 2rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.stats span { color: var(--ink-2); font-size: 0.93rem; }
.blocks { display: flex; flex-direction: column; gap: var(--s2); }
.blocks:empty { display: none; }

/* consolidation: exclusion toggles appear on the cell they act on */
.blocks td { position: relative; }
.blocks td button.link { position: absolute; left: 6px; top: 50%; transform: translateY(-50%); height: 22px; padding: 0 6px;
  border-radius: var(--r); background: var(--paper); box-shadow: 0 0 0 1px var(--line-2); font-size: 0.86rem; opacity: 0; }
.blocks td:hover button.link, .blocks td button.link:focus-visible, .blocks td.excluded button.link { opacity: 1; }
.blocks td.excluded button.link { text-decoration: none; }
.grid-head.flat { padding: 0; align-items: center; }
.legend i.high { background: var(--warning-surface); }
.legend i.low { background: var(--brand-50); }
.legend i.outside { background: var(--error-surface); }
.legend i.excluded { background: linear-gradient(135deg, transparent 45%, var(--ink-3) 45%, var(--ink-3) 55%, transparent 55%); }