/* [project]/apps/web/app/globals.css [app-client] (css) */
:root {
  --steel-950: #101311;
  --steel-900: #151815;
  --steel-850: #171a18;
  --steel-800: #1a1e1b;
  --steel-700: #20241f;
  --steel-600: #303530;
  --steel-500: #3a3f3a;
  --text-primary: #f7f9f4;
  --text-muted: #b5beb6;
  --ficsit-orange: #ff8a2a;
  --ficsit-orange-deep: #b95d1a;
  --blueprint: #6fb7c8;
  color: #f1f3ee;
  background: var(--steel-950);
  font-synthesis: none;
  text-rendering: optimizelegibility;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

button, input, select {
  font: inherit;
}

button, [role="button"], input, select {
  touch-action: manipulation;
}

.shell {
  background: radial-gradient(circle at top left, #ff8a2a2e, transparent 28rem),
    linear-gradient(90deg, #ff8a2a17, transparent 34%),
    var(--steel-950);
  grid-template-rows: 58px minmax(0, 1fr);
  grid-template-columns: 340px minmax(0, 1fr);
  min-height: 100vh;
  display: grid;
}

.app-topbar {
  color: var(--text-primary);
  background: linear-gradient(90deg, #ff8a2a2e, #ff8a2a0f 34%, #0000 62%), #0d100e;
  border-bottom: 1px solid #343a34;
  grid-area: 1 / 1 / auto / -1;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 8px 18px 8px 16px;
  display: flex;
  position: relative;
}

.app-topbar:before {
  content: "";
  background: linear-gradient(90deg, var(--ficsit-orange), #ffb15f 34%, var(--ficsit-orange-deep) 64%, transparent);
  pointer-events: none;
  height: 3px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.topbar-brand {
  min-width: 0;
  color: inherit;
  cursor: pointer;
  text-align: left;
  background: none;
  border: 0;
  align-items: center;
  gap: 10px;
  padding: 0;
  display: flex;
}

.topbar-brand h1, .topbar-brand p {
  margin: 0;
}

.topbar-brand h1 {
  color: #fff7ed;
  font-size: 1rem;
  line-height: 1.1;
}

.topbar-brand p {
  color: #b7c0b8;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: min(58vw, 720px);
  font-size: .82rem;
  overflow: hidden;
}

.topbar-counts {
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  display: flex;
}

.topbar-counts span {
  color: var(--text-muted);
  white-space: nowrap;
  background: #151815;
  border: 1px solid #303530;
  border-radius: 999px;
  align-items: baseline;
  gap: 5px;
  padding: 6px 9px;
  font-size: .78rem;
  font-weight: 800;
  display: inline-flex;
}

.topbar-counts strong {
  color: var(--ficsit-orange);
  font-size: .88rem;
}

.topbar-reset {
  white-space: nowrap;
  min-height: 34px;
  padding: 7px 10px;
}

.entry-shell {
  background: radial-gradient(circle at top left, #ff8a2a2e, transparent 28rem),
    linear-gradient(#6fb7c80a 1px, transparent 1px),
    linear-gradient(90deg, #6fb7c80a 1px, transparent 1px),
    var(--steel-950);
  background-size: auto, 48px 48px, 48px 48px, auto;
  place-items: center;
  min-height: 100vh;
  padding: 24px;
  display: grid;
}

.entry-panel {
  background: linear-gradient(#ff8a2a17, #0000 17rem), #151815;
  border: 1px solid #303530;
  border-radius: 8px;
  gap: 20px;
  width: min(980px, 100%);
  padding: 22px;
  display: grid;
  box-shadow: 0 24px 72px #00000057;
}

.entry-header {
  border-bottom: 1px solid #303530;
  align-items: center;
  gap: 12px;
  padding-bottom: 18px;
  display: flex;
}

.entry-header h1, .entry-header p {
  margin: 0;
}

.entry-header p {
  color: var(--text-muted);
  margin-top: 4px;
}

.entry-track {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 16px;
  display: grid;
}

.entry-card {
  background: #171a18;
  border: 1px solid #303530;
  border-radius: 8px;
  gap: 14px;
  padding: 16px;
  display: grid;
}

.entry-card.disabled {
  opacity: .64;
}

.step-label {
  width: fit-content;
  color: var(--accent);
  letter-spacing: 0;
  text-transform: uppercase;
  font-size: .72rem;
  font-weight: 800;
  display: inline-flex;
}

.entry-actions {
  border-top: 1px solid #303530;
  justify-content: flex-end;
  padding-top: 16px;
  display: flex;
}

.sidebar {
  background: linear-gradient(180deg, #ff8a2a14, transparent 16rem),
    var(--steel-850);
  color: var(--text-primary);
  border-right: 1px solid #2c302d;
  flex-direction: column;
  grid-area: 2 / 1;
  gap: 24px;
  padding: 24px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.sidebar:before {
  content: "";
  background: linear-gradient(90deg, var(--ficsit-orange), #ffb15f 42%, transparent);
  pointer-events: none;
  height: 4px;
  position: absolute;
  inset: 0 0 auto;
}

.brand {
  align-items: center;
  gap: 12px;
  display: flex;
}

.brand-mark {
  color: #17120d;
  background: linear-gradient(135deg, #ffb36f, var(--ficsit-orange) 52%, #c75f18);
  border: 1px solid #f0a560;
  border-radius: 8px;
  flex: none;
  place-items: center;
  width: 42px;
  height: 42px;
  display: inline-grid;
  box-shadow: 0 0 0 3px #ff8a2a1f;
}

.brand h1, .brand p, .summary h2, .panel h3, .step h4, .module h4 {
  margin: 0;
}

.brand h1 {
  font-size: 1.25rem;
}

.brand p, .meta p, .step p, .module p, .eyebrow {
  color: var(--text-muted);
  margin: 4px 0 0;
}

.field {
  gap: 8px;
  display: grid;
}

.control-group {
  gap: 12px;
  display: grid;
}

.split-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 8px;
  display: grid;
}

.context-card {
  gap: 12px;
  display: grid;
}

.workflow-nav {
  gap: 8px;
  display: grid;
}

.workflow-nav button {
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
  background: #151a16;
  border: 1px solid #303830;
  border-radius: 8px;
  align-items: center;
  gap: 2px;
  padding: 11px 12px 11px 16px;
  display: grid;
}

.workflow-nav button:hover, .workflow-nav button.active {
  border-color: var(--ficsit-orange);
  box-shadow: inset 4px 0 0 var(--ficsit-orange);
  background: #1d211c;
}

.workflow-nav button:disabled {
  cursor: not-allowed;
  opacity: .48;
}

.workflow-nav span, .workflow-nav small {
  min-width: 0;
}

.workflow-nav span {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 900;
  overflow: hidden;
}

.workflow-nav small {
  color: var(--text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.workflow-panel {
  gap: 16px;
  display: grid;
}

.workflow-grid {
  grid-template-columns: minmax(300px, .9fr) minmax(0, 1.1fr);
  align-items: start;
  gap: 16px;
  display: grid;
}

.workflow-editor {
  background: #171a18;
  border: 1px solid #303530;
  border-radius: 8px;
  gap: 14px;
  padding: 14px;
  display: grid;
}

.factory-list {
  gap: 10px;
  display: grid;
}

.factory-card {
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
  background: #171a18;
  border: 1px solid #303530;
  border-radius: 8px;
  gap: 4px;
  padding: 12px;
  display: grid;
}

.factory-card.active {
  border-color: var(--ficsit-orange);
  background: #20251f;
}

.factory-card span, .factory-card small {
  color: var(--text-muted);
}

.workspace-page-panel {
  width: 100%;
}

.workspace-tab-panel {
  gap: 16px;
  display: grid;
}

.workspace-management-grid {
  grid-template-columns: minmax(280px, 1fr) minmax(260px, .8fr);
  align-items: start;
  gap: 16px;
  display: grid;
}

.workspace-list-panel, .workspace-editor-panel {
  gap: 14px;
  min-width: 0;
  display: grid;
}

.workspace-editor-panel {
  background: #151815;
  border: 1px solid #303530;
  border-radius: 8px;
  padding: 14px;
}

.workspace-editor-panel.disabled {
  opacity: .64;
}

.project-list {
  gap: 10px;
  display: grid;
}

.project-card {
  background: #171a18;
  border: 1px solid #303530;
  border-radius: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  display: grid;
}

.project-card-main {
  min-width: 0;
  color: inherit;
  cursor: pointer;
  text-align: left;
  background: none;
  border: 0;
  padding: 0;
  display: grid;
}

.project-card.active {
  border-color: var(--ficsit-orange);
  background: #20251f;
}

.project-card strong, .project-card span, .project-card small {
  min-width: 0;
  display: block;
}

.project-card span, .project-card small {
  color: var(--text-muted);
}

.project-card span {
  margin-top: 3px;
}

.project-card-actions {
  align-items: center;
  gap: 8px;
  display: flex;
}

.project-card-actions .secondary-command {
  min-height: 34px;
  padding: 7px 10px;
}

.compact-project-list .project-card {
  grid-template-columns: minmax(0, 1fr) auto;
}

.control-heading h2, .control-heading p {
  margin: 0;
}

.control-heading h2 {
  font-size: .95rem;
}

.control-heading p {
  color: #aeb7ae;
  margin-top: 3px;
  font-size: .9rem;
}

.state-pill {
  color: #ffb15f;
  text-transform: uppercase;
  white-space: nowrap;
  background: #171d18;
  border: 1px solid #3f483f;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  min-height: 30px;
  padding: 6px 10px;
  font-size: .78rem;
  font-weight: 900;
  display: inline-flex;
}

.state-pill.ready, .state-pill.buildable {
  color: #a7df91;
  background: #172418;
  border-color: #4b6248;
}

.state-pill.incomplete {
  color: #ffb29a;
  background: #2a1815;
  border-color: #6d3b2b;
}

.state-pill.exploring {
  color: #cdeaf0;
  background: #17272b;
  border-color: #4f7d88;
}

.state-pill.needs-decisions {
  color: #ffd18f;
  background: #211e18;
  border-color: #8d5a20;
}

.stage-heading h2, .stage-heading p {
  margin: 0;
}

.stage-heading h2 {
  margin-top: 4px;
  font-size: 1.4rem;
}

.stage-heading p:last-child {
  color: var(--text-muted);
  margin-top: 6px;
}

.readiness-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  display: grid;
}

.readiness-card, .plan-state-card, .recommendation-panel {
  background: #171a18;
  border: 1px solid #303530;
  border-radius: 8px;
  padding: 14px;
}

.readiness-card.missing {
  background: #1d1915;
  border-color: #5b3b23;
}

.readiness-card h3, .readiness-card p, .readiness-card ul, .plan-state-card h3, .plan-state-card p {
  margin: 0;
}

.readiness-card h3 {
  margin-bottom: 10px;
  font-size: .92rem;
}

.readiness-card ul {
  gap: 7px;
  padding-left: 18px;
  display: grid;
}

.readiness-card li, .readiness-card p, .plan-state-card p {
  color: var(--text-muted);
}

.overview-panel {
  gap: 14px;
  display: grid;
}

.plan-state-card {
  background: linear-gradient(90deg, #ff8a2a14, #0000 58%), #171a18;
  grid-template-columns: minmax(0, 1fr) minmax(260px, .8fr);
  align-items: center;
  gap: 16px;
  display: grid;
}

.plan-state-card h3 {
  margin-top: 10px;
  font-size: 1.25rem;
}

.recommendation-panel {
  gap: 12px;
  display: grid;
}

.suggestion-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  display: grid;
}

.chain-list {
  gap: 10px;
  display: grid;
}

.chain-card {
  background: #20231f;
  border: 1px solid #303530;
  border-radius: 8px;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  display: grid;
}

.chain-card strong, .chain-card span, .chain-card small {
  display: block;
}

.chain-card small {
  color: var(--text-muted);
}

.mode-switch {
  background: #121513;
  border: 1px solid #3a3f3a;
  border-radius: 8px;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 5px;
  display: grid;
}

.mode-switch button {
  color: #aeb7ae;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 6px;
  padding: 9px 10px;
  font-weight: 800;
}

.mode-switch button.active {
  color: #17120d;
  background: #ff8a2a;
}

.field span, .meta h2 {
  text-transform: uppercase;
  letter-spacing: 0;
  color: #c4c2b8;
  font-size: .8rem;
}

.field input, .field select {
  color: #faf4ea;
  background: #222622;
  border: 1px solid #3a3f3a;
  border-radius: 6px;
  width: 100%;
  padding: 10px 12px;
}

.workspace-card {
  background: #151815;
  border: 1px solid #303530;
  border-radius: 8px;
  padding: 12px;
}

.field input[readonly] {
  color: #aeb7ae;
  background: #1b1f1b;
}

.locked-field {
  color: #aeb7ae;
  background: #1b1f1b;
  border: 1px solid #3a3f3a;
  border-radius: 6px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  display: grid;
  overflow: hidden;
}

.locked-field input {
  color: #aeb7ae;
  cursor: not-allowed;
  background: none;
  border: 0;
}

.locked-field svg {
  color: #d69a64;
  margin-right: 10px;
}

.rate-grid {
  grid-template-columns: 1fr;
  gap: 10px;
  display: grid;
}

.suffix-field {
  background: #222622;
  border: 1px solid #3a3f3a;
  border-radius: 6px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  display: grid;
  overflow: hidden;
}

.suffix-field.readonly {
  background: #1b1f1b;
}

.suffix-field input {
  color: #faf4ea;
  background: none;
  border: 0;
  width: 100%;
  padding: 10px 12px;
}

.suffix-field > span {
  color: #c4c2b8;
  padding: 0 10px;
}

.suffix-field.readonly input {
  color: #aeb7ae;
  cursor: default;
}

.suffix-field.compact input {
  padding: 7px 8px;
}

.search {
  background: #222622;
  border: 1px solid #3a3f3a;
  border-radius: 6px;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  display: flex;
  position: relative;
}

.search input {
  border: 0;
  padding-left: 0;
}

.item-picker {
  z-index: 5;
}

.picker-menu {
  background: #1a1e1b;
  border: 1px solid #3f493f;
  border-radius: 8px;
  max-height: 320px;
  padding: 6px;
  display: grid;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  overflow-y: auto;
  box-shadow: 0 18px 38px #0000005c;
}

.picker-menu button {
  color: #f5f2ea;
  cursor: pointer;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 6px;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 10px;
  display: flex;
}

.picker-menu button:hover, .picker-menu button.selected {
  background: #232a24;
}

.picker-menu small, .picker-empty {
  color: #ff9f45;
}

.picker-empty {
  padding: 10px;
}

.command, .secondary-command, .icon-button {
  color: #17120d;
  cursor: pointer;
  background: #ff8a2a;
  border: 1px solid #b95d1a;
  border-radius: 6px;
}

.secondary-command {
  color: #f7f9f4;
  cursor: pointer;
  background: #1b201c;
  border-color: #4b564d;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  font-weight: 700;
  display: inline-flex;
}

.command {
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  font-weight: 700;
  display: inline-flex;
}

.command:disabled, .secondary-command:disabled {
  cursor: not-allowed;
  opacity: .48;
}

.compact-command {
  min-height: 32px;
  padding: 7px 10px;
}

.icon-button {
  color: #ffb77c;
  background: #251d16;
  place-items: center;
  width: 34px;
  height: 34px;
  display: inline-grid;
}

.target-list, .target-list {
  gap: 8px;
  display: grid;
}

.target-row {
  background: #20231f;
  border: 1px solid #3a3f3a;
  border-radius: 8px;
  grid-template-columns: minmax(0, 1fr) 76px;
  align-items: center;
  gap: 12px;
  padding: 10px;
  display: grid;
}

.input-row {
  grid-template-columns: minmax(0, 1fr) 40px;
}

.input-builder {
  grid-template-columns: minmax(180px, 1fr) minmax(120px, 160px) auto;
  align-items: end;
  gap: 10px;
  display: grid;
}

.input-builder.compact {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}

.checkbox-list {
  gap: 8px;
  display: grid;
}

.checkbox-row {
  color: var(--text-primary);
  text-align: left;
  background: #171a18;
  border: 1px solid #303530;
  border-radius: 6px;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  display: flex;
}

.checkbox-row input {
  accent-color: var(--ficsit-orange);
  flex: none;
}

.checkbox-row span {
  flex: 1;
  min-width: 0;
}

.target-title strong, .target-title span, .target-row label > span {
  display: block;
}

.target-title span, .target-row label > span {
  color: #c4c2b8;
  font-size: .88rem;
}

.target-row label {
  gap: 4px;
  display: grid;
}

.target-row label input {
  color: #faf4ea;
  background: #171a18;
  border: 1px solid #3a3f3a;
  border-radius: 6px;
  width: 100%;
  padding: 7px 8px;
}

.target-actions {
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  display: flex;
}

.decision-list {
  gap: 8px;
  display: grid;
}

.decision-row {
  background: #20231f;
  border: 1px solid #303530;
  border-radius: 8px;
  grid-template-columns: minmax(0, 1fr) 96px;
  align-items: center;
  gap: 8px;
  padding: 8px;
  display: grid;
}

.decision-row span {
  color: #f5f2ea;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  font-size: .88rem;
  overflow: hidden;
}

.decision-row select {
  color: #faf4ea;
  background: #171a18;
  border: 1px solid #3a3f3a;
  border-radius: 6px;
  width: 100%;
  padding: 6px;
  font-size: .82rem;
}

.empty-note {
  color: #aeb7ae;
  margin: 0;
  font-size: .9rem;
}

.suggestion-list {
  gap: 8px;
  display: grid;
}

.suggestion-row {
  background: #20231f;
  border: 1px solid #303530;
  border-radius: 8px;
  gap: 10px;
  padding: 10px;
  display: grid;
}

.suggestion-row strong, .suggestion-row span, .suggestion-row small {
  display: block;
}

.suggestion-row span, .suggestion-row small {
  color: #aeb7ae;
}

.suggestion-row small {
  margin-top: 4px;
  font-size: .78rem;
}

.suggestion-actions {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  display: grid;
}

.drawer-backdrop {
  z-index: 50;
  background: #0000009e;
  justify-content: flex-end;
  display: flex;
  position: fixed;
  inset: 0;
}

.drawer {
  background: #1a1e1b;
  border-left: 1px solid #3f493f;
  flex-direction: column;
  width: min(390px, 100%);
  min-height: 100vh;
  padding: 16px;
  display: flex;
  overflow-y: auto;
  box-shadow: -20px 0 54px #0000006b;
}

.drawer-header, .drawer-actions {
  justify-content: space-between;
  align-items: start;
  gap: 12px;
  display: flex;
}

.drawer-header h2, .drawer-header p {
  margin: 0;
}

.drawer-header h2 {
  font-size: 1rem;
}

.drawer-actions {
  border-top: 1px solid #303530;
  justify-content: flex-end;
  align-items: center;
  margin-top: 14px;
  padding-top: 14px;
}

.drawer .field {
  gap: 3px;
}

.drawer .field > span {
  font-size: .72rem;
  line-height: 1.2;
}

.drawer .field input {
  padding: 7px 9px;
}

.drawer .search {
  gap: 7px;
  padding: 0 9px;
}

.drawer .search input {
  min-height: 32px;
  padding-block: 6px;
}

.drawer .output-item-field {
  margin-top: 14px;
  margin-bottom: 18px;
}

.drawer .output-rate-grid {
  border-top: 1px solid #303530;
  border-bottom: 1px solid #303530;
  gap: 0;
}

.drawer .rate-grid .field {
  grid-template-columns: 118px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 8px 0;
}

.drawer .rate-grid .field + .field {
  border-top: 1px solid #262b26;
}

.drawer .locked-field input, .drawer .suffix-field input {
  padding: 7px 9px;
}

.drawer .locked-field svg {
  margin-right: 8px;
}

.drawer .suffix-field > span {
  padding: 0 9px;
}

.drawer .command, .drawer .secondary-command {
  min-height: 36px;
  padding: 8px 11px;
}

.workspace {
  background-image: linear-gradient(#6fb7c80a 1px, #0000 1px), linear-gradient(90deg, #6fb7c80a 1px, #0000 1px);
  background-size: 48px 48px;
  grid-area: 2 / 2;
  align-content: start;
  gap: 22px;
  padding: 28px;
  display: grid;
}

.summary {
  grid-template-columns: 8px minmax(0, 1fr) auto;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  display: grid;
}

.app-header-bar {
  background: linear-gradient(180deg, var(--ficsit-orange), #f1c26d 52%, var(--blueprint));
  border-radius: 999px;
  grid-row: 1 / span 2;
  align-self: stretch;
  width: 8px;
  min-height: 76px;
  box-shadow: 0 0 0 1px #ff8a2a33, 0 14px 30px #0000003d;
}

.summary h2 {
  font-size: 2rem;
}

.summary-subtitle {
  color: #aeb7ae;
  max-width: 760px;
  margin: 6px 0 0;
}

.summary-grid {
  grid-template-columns: repeat(3, 120px);
  gap: 10px;
  display: grid;
}

.summary-grid div, .panel {
  background: var(--steel-800);
  border: 1px solid #303530;
  border-radius: 8px;
  box-shadow: 0 16px 36px #00000038;
}

.summary-grid div {
  padding: 14px;
}

.summary-grid span {
  color: #aeb7ae;
  font-size: .85rem;
  display: block;
}

.summary-grid strong {
  font-size: 1.4rem;
}

.panel {
  padding: 18px;
}

.warning-panel {
  color: #ffd18f;
  background: #30220f;
  border: 1px solid #9b661a;
  border-radius: 8px;
  padding: 12px 16px;
}

.warning-panel p {
  margin: 0;
}

.warning-panel p + p {
  margin-top: 6px;
}

.panel-title {
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  display: flex;
}

.panel-title svg {
  color: var(--ficsit-orange);
}

.planning-tabs {
  background: #151815;
  border: 1px solid #303530;
  border-radius: 8px;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px;
  display: flex;
  overflow-x: auto;
}

.planning-tabs button {
  min-height: 38px;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  background: none;
  border: 1px solid #0000;
  border-radius: 6px;
  align-items: center;
  padding: 8px 12px;
  font-weight: 800;
  display: inline-flex;
}

.planning-tabs button:hover, .planning-tabs button.active {
  border-color: var(--ficsit-orange);
  color: #fff3e4;
  background: #20251f;
}

.planning-tabs button:disabled {
  cursor: not-allowed;
  opacity: .46;
}

.planning-tabs .planning-tabs-action {
  border-color: var(--ficsit-orange);
  color: #17120d;
  background: #ff8a2a;
  margin-left: auto;
}

.tab-row-select {
  color: var(--text-muted);
  white-space: nowrap;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  font-size: .78rem;
  font-weight: 800;
  display: inline-flex;
}

.tab-row-select select {
  min-width: 180px;
  min-height: 34px;
  padding: 6px 10px;
}

.tabs {
  border-bottom: 1px solid #303530;
  gap: 8px;
  margin-bottom: 16px;
  display: flex;
  overflow-x: auto;
}

.tabs button {
  color: #aeb7ae;
  cursor: pointer;
  background: none;
  border: 0;
  border-bottom: 3px solid #0000;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  font-weight: 700;
  display: inline-flex;
}

.tabs button.active {
  border-bottom-color: var(--ficsit-orange);
  color: #fff3e4;
}

.graph-grid {
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
  display: grid;
}

.flow-graph {
  background: linear-gradient(90deg, #ff8a2a0d, #0000 34%), #151815;
  border: 1px solid #303530;
  border-radius: 8px;
  padding: 10px;
  display: block;
  overflow-x: auto;
}

.flow-network {
  min-width: 100%;
  display: block;
}

.flow-stage-label text {
  fill: #ffb15f;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 800;
}

.flow-edge path {
  fill: none;
  stroke: #c9782d;
  stroke-width: 2.25px;
  stroke-linecap: round;
  opacity: .86;
}

.flow-edge.long-edge path {
  stroke: #a96a30;
  stroke-dasharray: 8 5;
  opacity: .72;
}

.flow-edge text {
  fill: #ffd0a1;
  paint-order: stroke;
  stroke: #151815;
  stroke-width: 5px;
  stroke-linejoin: round;
  font-size: 10px;
  font-weight: 800;
}

.flow-edge.long-edge text {
  fill: #ffb15f;
}

#flow-arrow path {
  fill: #c9782d;
}

.flow-stage {
  align-content: start;
  gap: 10px;
  min-width: 240px;
  display: grid;
  position: relative;
}

.flow-stage + .flow-stage:before {
  content: "";
  background: #3f493f;
  width: 14px;
  height: 2px;
  position: absolute;
  top: 52px;
  left: -16px;
}

.flow-stage + .flow-stage:after {
  content: "";
  border-top: 5px solid #0000;
  border-bottom: 5px solid #0000;
  border-left: 7px solid #c9782d;
  width: 0;
  height: 0;
  position: absolute;
  top: 48px;
  left: -5px;
}

.flow-stage-title {
  color: #ffb15f;
  text-transform: uppercase;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: .78rem;
  font-weight: 700;
  display: flex;
}

.flow-stage-title strong {
  color: #17120d;
  background: #ff8a2a;
  border-radius: 999px;
  place-items: center;
  min-width: 24px;
  min-height: 24px;
  display: inline-grid;
}

.flow-node-list {
  gap: 10px;
  display: grid;
}

.flow-node {
  background: #20241f;
  border: 1px solid #343934;
  border-radius: 8px;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: 6px;
  height: 100%;
  min-height: 100%;
  padding: 11px;
  display: grid;
  box-shadow: 0 14px 28px #0000003d;
}

.flow-node h4, .flow-node p {
  margin: 0;
}

.flow-node h4 {
  color: #fff3e4;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .98rem;
  overflow: hidden;
}

.flow-node p, .flow-node small {
  color: #aeb7ae;
}

.flow-node > strong, .flow-node-metrics span:first-child {
  color: #ffad63;
  font-weight: 800;
}

.flow-node span {
  color: #aeb7ae;
  font-size: .86rem;
}

.flow-port-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  margin-top: 2px;
  display: grid;
}

.flow-ports {
  gap: 5px;
  display: grid;
}

.flow-port {
  background: #171a18;
  border: 1px solid #363c36;
  border-radius: 6px;
  gap: 1px;
  min-height: 42px;
  padding: 5px 7px;
  display: grid;
  position: relative;
}

.flow-port:before, .flow-port:after {
  content: "";
  background: #151815;
  border: 2px solid #c9782d;
  border-radius: 999px;
  width: 8px;
  height: 8px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.flow-port.input:before {
  left: -6px;
}

.flow-port.input:after, .flow-port.output:before {
  display: none;
}

.flow-port.output:after {
  right: -6px;
}

.flow-port small {
  color: #c4c2b8;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.flow-port b {
  color: #ffad63;
  font-size: .78rem;
}

.output-ports {
  text-align: right;
}

.flow-node.source {
  background: #211e18;
  border-color: #66543e;
}

.flow-node.output {
  background: #251d16;
  border-color: #8f4f1d;
}

.flow-node-metrics {
  color: #aeb7ae;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: .88rem;
  display: flex;
}

.flow-inputs {
  gap: 6px;
  display: grid;
}

.flow-input {
  background: #171a18;
  border: 1px solid #383d38;
  border-radius: 6px;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 8px;
  padding: 7px 8px;
  display: grid;
}

.flow-input span {
  color: #f5f2ea;
}

.flow-input strong {
  color: #ffad63;
  font-size: .88rem;
}

.flow-input small {
  grid-column: 1 / -1;
  font-size: .76rem;
}

.graph-node {
  background: #20241f;
  border: 1px solid #343934;
  border-radius: 8px;
  gap: 10px;
  min-height: 190px;
  padding: 14px;
  display: grid;
}

.graph-node h4, .graph-node p {
  margin: 0;
}

.graph-node p, .graph-node span {
  color: #aeb7ae;
}

.graph-node strong {
  color: #ffad63;
}

.node-inputs {
  gap: 6px;
  display: grid;
}

.node-inputs span {
  background: #171a18;
  border: 1px solid #383d38;
  border-radius: 6px;
  padding: 6px 8px;
}

.steps {
  gap: 12px;
  display: grid;
}

.step {
  border: 1px solid #343934;
  border-radius: 8px;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 18px;
  padding: 14px;
  display: grid;
}

.step dl {
  grid-template-columns: 120px 120px minmax(0, 1fr);
  gap: 12px;
  margin: 0;
  display: grid;
}

.step dt {
  color: #aeb7ae;
  font-size: .8rem;
}

.step dd {
  overflow-wrap: anywhere;
  margin: 2px 0 0;
}

.data-table {
  border: 1px solid #343934;
  border-radius: 8px;
  display: grid;
  overflow-x: auto;
}

.data-row {
  border-bottom: 1px solid #2f342f;
  grid-template-columns: minmax(220px, 1fr) repeat(3, minmax(110px, .4fr));
  gap: 12px;
  padding: 10px 12px;
  display: grid;
}

.material-ledger {
  gap: 12px;
  display: grid;
}

.ledger-intro {
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  display: flex;
}

.ledger-intro strong {
  color: #fff3e4;
}

.ledger-intro span {
  color: #aeb7ae;
  font-size: .9rem;
}

.data-row.materials {
  grid-template-columns: minmax(180px, 1.1fr) 112px minmax(150px, .9fr) minmax(150px, .9fr) 128px 120px;
  align-items: center;
  min-width: 920px;
}

.inline-select {
  color: #faf4ea;
  background: #171a18;
  border: 1px solid #3a3f3a;
  border-radius: 6px;
  width: 100%;
  padding: 6px 8px;
}

.muted-cell {
  color: #aeb7ae;
  font-size: .86rem;
}

.data-row.buildings {
  grid-template-columns: minmax(220px, 1fr) 140px;
}

.building-plan {
  gap: 14px;
  display: grid;
}

.building-group {
  background: #171a18;
  border: 1px solid #343934;
  border-radius: 8px;
  overflow: hidden;
}

.building-group-header {
  background: #1c221d;
  border-bottom: 1px solid #343934;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px 14px;
  display: flex;
}

.building-group-header h4, .building-step h5 {
  margin: 0;
}

.building-group-header h4 {
  color: #fff3e4;
}

.building-group-header span, .building-step span, .building-step dt {
  color: #aeb7ae;
}

.building-group-header strong {
  color: #ffad63;
}

.building-step-list {
  display: grid;
}

.building-step {
  border-bottom: 1px solid #2f342f;
  grid-template-columns: minmax(190px, .75fr) 150px minmax(260px, 1fr);
  align-items: start;
  gap: 14px;
  padding: 12px 14px;
  display: grid;
}

.building-step:last-child {
  border-bottom: 0;
}

.building-step h5 {
  color: #f5f2ea;
  font-size: .96rem;
}

.building-step-build {
  gap: 3px;
  display: grid;
}

.building-step-build strong {
  color: #ffad63;
}

.building-step-build small {
  color: #9fd4df;
  font-size: .78rem;
  font-weight: 700;
}

.building-step dl {
  gap: 8px;
  margin: 0;
  display: grid;
}

.building-step dt {
  text-transform: uppercase;
  font-size: .76rem;
}

.building-step dd {
  overflow-wrap: anywhere;
  margin: 2px 0 0;
}

.data-row.header {
  color: #ffb15f;
  background: #1c221d;
  font-weight: 700;
}

.data-row:last-child {
  border-bottom: 0;
}

.role-badge {
  color: #f5f2ea;
  background: #1c221d;
  border: 1px solid #3a3f3a;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  min-width: 92px;
  padding: 3px 8px;
  font-size: .78rem;
  font-weight: 700;
  display: inline-flex;
}

.role-badge.extract {
  color: #ffe0b8;
  background: #332414;
  border-color: #8d5a20;
}

.role-badge.output {
  color: #ffe4c6;
  background: #3a2113;
  border-color: #b95d1a;
}

.role-badge.intermediate {
  color: #d8e5d0;
  background: #1f2b20;
  border-color: #4b6248;
}

.role-badge.import, .role-badge.supplied {
  color: #d9c5a9;
  background: #29251d;
  border-color: #66543e;
}

.role-badge.external {
  color: #cdeaf0;
  background: #17272b;
  border-color: #4f7d88;
}

.balanced {
  color: #9fd18b;
  font-weight: 700;
}

.surplus {
  color: #9fd4df;
  font-weight: 700;
}

.unbalanced {
  color: #ffad63;
  font-weight: 700;
}

.columns {
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr);
  gap: 22px;
  display: grid;
}

.module-grid {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
  display: grid;
}

.module {
  border: 1px solid #343934;
  border-radius: 8px;
  flex-direction: column;
  min-height: 118px;
  padding: 14px;
  display: flex;
}

.module span {
  color: #ffad63;
  margin-top: auto;
  font-weight: 700;
}

.layout-modules .module {
  gap: 10px;
}

.module-details, .building-step dl {
  gap: 8px;
  display: grid;
}

.module-details {
  margin: 0;
}

.module-details div {
  border-top: 1px solid #2f342f;
  padding-top: 8px;
}

.module-details dt {
  color: #aeb7ae;
  text-transform: uppercase;
  font-size: .76rem;
}

.module-details dd {
  overflow-wrap: anywhere;
  margin: 2px 0 0;
}

.routes-panel, .checklist-panel {
  gap: 14px;
  display: grid;
}

.route-coverage, .route-list, .checklist-list {
  gap: 10px;
  display: grid;
}

.route-card, .route-row {
  background: #171a18;
  border: 1px solid #343934;
  border-radius: 8px;
}

.route-card {
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  display: grid;
}

.route-card h4, .route-card p {
  margin: 0;
}

.route-card p, .checklist-item small {
  color: #aeb7ae;
}

.route-row {
  grid-template-columns: minmax(160px, 1fr) 120px minmax(160px, 1fr) 120px 34px;
  align-items: end;
  gap: 10px;
  padding: 12px;
  display: grid;
}

.checklist-item {
  color: #f5f2ea;
  cursor: pointer;
  text-align: left;
  background: #171a18;
  border: 1px solid #343934;
  border-radius: 8px;
  gap: 3px;
  padding: 12px;
  display: grid;
}

.checklist-item span {
  color: #ffb15f;
  text-transform: uppercase;
  font-size: .76rem;
  font-weight: 800;
}

.checklist-item.doing {
  background: #211e18;
  border-color: #8d5a20;
}

.checklist-item.done {
  background: #172418;
  border-color: #4b6248;
}

.raw-list {
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.raw-list li {
  border-bottom: 1px solid #2f342f;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  display: flex;
}

@media (max-width: 980px) {
  .input-builder, .readiness-grid, .plan-state-card, .suggestion-grid, .entry-track, .workspace-management-grid, .shell, .columns, .step {
    grid-template-columns: 1fr;
  }

  .shell {
    grid-template-rows: auto auto minmax(0, 1fr);
  }

  .app-topbar {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
  }

  .topbar-brand p {
    max-width: calc(100vw - 90px);
  }

  .topbar-counts {
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
  }

  .topbar-reset {
    flex: 150px;
    justify-content: center;
  }

  .planning-tabs {
    align-items: stretch;
    overflow-x: visible;
  }

  .planning-tabs button {
    flex: auto;
    justify-content: center;
  }

  .planning-tabs .planning-tabs-action {
    flex-basis: 100%;
    margin-left: 0;
  }

  .sidebar {
    grid-area: 2 / 1;
  }

  .workspace {
    grid-area: 3 / 1;
  }

  .summary {
    grid-template-columns: 8px minmax(0, 1fr);
    align-items: stretch;
  }

  .summary-grid {
    grid-column: 2;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .route-card, .route-row {
    grid-template-columns: 1fr;
  }
}

/*# sourceMappingURL=apps_web_app_globals_1lkgh9-.css.map*/