/* finance-and-funds-workspace-phase1-plan-001 — local prototype styles
   Peer order: Assessment → Attendance → Funds → Daily ops.
   Layout: phone 2×2; wide desktop 4 columns. Labels wrap (no ellipsis clip). */

:root {
  --ff-ink: #123f32;
  --ff-muted: #4a6a60;
  --ff-line: #c5dbd5;
  --ff-soft: #eef6f4;
  --ff-active: #d7ebe4;
  --ff-warn: #8a4b00;
  --ff-danger: #8b1e1e;
  --ff-bg: #f7faf8;
}

* { box-sizing: border-box; }

body.funds-proto {
  margin: 0;
  font-family: "Segoe UI", "PingFang SC", "Noto Sans SC", sans-serif;
  color: var(--ff-ink);
  background: var(--ff-bg);
}

.funds-proto__shell {
  max-width: 1100px;
  margin: 0 auto;
  padding: 12px 12px 40px;
}

.funds-proto__brand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.funds-proto__brand img {
  display: block;
  height: 48px;
  width: auto;
  max-width: min(280px, 70vw);
}

.funds-proto__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.funds-proto__controls select {
  min-height: 40px;
  border: 1px solid var(--ff-line);
  border-radius: 8px;
  padding: 6px 10px;
  background: #fff;
  color: var(--ff-ink);
  font: inherit;
}

.funds-proto__banner {
  display: inline-block;
  max-width: 100%;
  background: #fff8e8;
  border: 1px solid #e6c98a;
  border-radius: 999px;
  padding: 2px 10px;
  margin: 0 0 8px;
  color: var(--ff-warn);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
}

.homepage-task-hub.funds-proto-hub {
  display: grid;
  gap: 6px;
  /* Phone default: two rows × two columns */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 0 12px;
}

.funds-proto-hub .homepage-task-hub__item {
  align-items: center;
  appearance: none;
  background: var(--ff-soft);
  border: 1px solid var(--ff-line);
  border-radius: 10px;
  color: var(--ff-ink);
  cursor: pointer;
  display: flex;
  font: inherit;
  justify-content: center;
  min-height: 44px;
  min-width: 0;
  padding: 8px 32px 8px 10px;
  position: relative;
  text-align: center;
  width: 100%;
}

.funds-proto-hub .homepage-task-hub__item.is-active {
  background: var(--ff-active);
  border-color: var(--ff-ink);
  box-shadow: none;
}

.funds-proto-hub .homepage-task-hub__label {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
  max-width: 100%;
}

.funds-proto-hub .homepage-task-hub__chevron {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.funds-proto-hub .homepage-task-hub__chevron svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.15s ease;
}

.funds-proto-hub .homepage-task-hub__item.is-active .homepage-task-hub__chevron svg {
  transform: rotate(180deg);
}

.funds-proto__panel {
  background: #fff;
  border: 1px solid var(--ff-line);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 12px;
}

.funds-proto__panel[hidden] { display: none !important; }

.funds-proto__panel h1,
.funds-proto__panel h2,
.funds-proto__title {
  margin: 0 0 4px;
  font-size: 1.125rem;
  line-height: 1.3;
}

.funds-proto__lead {
  margin: 0 0 10px;
  color: var(--ff-muted);
  line-height: 1.4;
  font-size: 0.9375rem;
}

/* Layered chooser: tool (primary) → loan modes (secondary) → work body */
.funds-chooser {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}

.funds-chooser__label {
  margin: 0;
  font-weight: 700;
  font-size: 0.8125rem;
  color: var(--ff-muted);
}

.funds-chooser__label--sub {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ff-muted);
  margin-top: 0;
}

.funds-tool-tabs {
  display: grid;
  gap: 6px;
  /* Phone + desktop: two equal tool buttons side by side */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

.funds-tool-tabs button {
  appearance: none;
  border: 1px solid var(--ff-line);
  background: #fff;
  border-radius: 8px;
  min-height: 44px;
  padding: 8px 10px;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ff-ink);
  cursor: pointer;
  text-align: center;
  line-height: 1.25;
  overflow-wrap: anywhere;
  white-space: normal;
  height: 100%;
  box-shadow: none;
  text-decoration: none !important;
}

.funds-tool-tabs button.is-active,
.funds-tool-tabs button:hover,
.funds-tool-tabs button:focus,
.funds-tool-tabs button:focus-visible {
  background: var(--ff-active);
  border-color: var(--ff-ink);
  box-shadow: inset 3px 0 0 var(--ff-ink);
  text-decoration: none !important;
  font-weight: 700;
}

.funds-tool-tabs button:hover:not(.is-active),
.funds-tool-tabs button:focus:not(.is-active),
.funds-tool-tabs button:focus-visible:not(.is-active) {
  background: #fff;
  box-shadow: none;
  font-weight: 600;
}

.funds-mode-tabs {
  display: grid;
  gap: 4px;
  /* Phone: one compact task per row (3 tasks — avoid awkward half row) */
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

.funds-mode-tabs button {
  appearance: none;
  border: 1px solid var(--ff-line);
  background: #fff;
  border-radius: 8px;
  min-height: 40px;
  padding: 6px 8px;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ff-ink);
  cursor: pointer;
  text-align: center;
  line-height: 1.25;
  overflow-wrap: anywhere;
  white-space: normal;
  height: 100%;
  text-decoration: none !important;
}

.funds-mode-tabs button.is-active {
  background: var(--ff-active);
  border-color: var(--ff-ink);
  box-shadow: inset 3px 0 0 var(--ff-ink);
  font-weight: 700;
  text-decoration: none !important;
}

.funds-work-body {
  display: grid;
  gap: 0;
  min-width: 0;
}

.funds-form {
  display: grid;
  gap: 10px;
}

.funds-field label {
  display: block;
  font-weight: 600;
  margin-bottom: 4px;
}

.funds-field input:not([type="checkbox"]):not([type="radio"]),
.funds-field select {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--ff-line);
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  background: #fff;
}

/* Global styles.css paints ALL input as a 46px text shell (appearance:none,
   width:100%). Restore a real checkbox here — do not inherit that shell. */
.funds-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: auto;
  max-width: 100%;
  margin: 0;
  padding: 8px 0;
  min-height: 44px;
  background: none;
  border: 0;
  box-shadow: none;
  cursor: pointer;
  font: inherit;
  font-weight: 500;
  color: var(--ff-ink);
  line-height: 1.4;
}

.funds-workspace-home input[type="checkbox"],
.funds-proto input[type="checkbox"],
.funds-check input[type="checkbox"] {
  -webkit-appearance: checkbox;
  appearance: auto;
  accent-color: var(--ff-ink);
  flex: 0 0 18px;
  width: 18px;
  min-width: 18px;
  max-width: 18px;
  height: 18px;
  min-height: 18px;
  margin: 3px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.funds-check input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--ff-ink);
  outline-offset: 3px;
}

.funds-check__text {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.funds-field .hint {
  margin: 4px 0 0;
  color: var(--ff-muted);
  font-size: 0.875rem;
}

.funds-field .error {
  margin: 4px 0 0;
  color: var(--ff-danger);
  font-size: 0.875rem;
}

.funds-more {
  border: 1px solid var(--ff-line);
  border-radius: 10px;
  padding: 0;
  background: #fff;
}

.funds-more > summary {
  cursor: pointer;
  font-weight: 600;
  min-height: 44px;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--ff-ink);
}

.funds-more > summary::-webkit-details-marker {
  display: none;
}

.funds-more > summary::marker {
  content: "";
}

.funds-more > summary:focus-visible {
  outline: 2px solid var(--ff-ink);
  outline-offset: 2px;
}

.funds-more__label {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.funds-more__chevron {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ff-ink);
}

.funds-more__chevron svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.15s ease;
}

.funds-more[open] > summary .funds-more__chevron svg {
  transform: rotate(180deg);
}

.funds-more__body {
  padding: 0 12px 12px;
}

.funds-more__body .funds-form {
  margin-top: 0;
  gap: 12px;
}

.funds-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.funds-actions button,
.connect-actions button {
  appearance: none;
  border: 1px solid var(--ff-ink);
  background: var(--ff-ink);
  color: #fff;
  border-radius: 10px;
  min-height: 44px;
  padding: 8px 14px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.funds-actions button.secondary,
.connect-actions button.secondary {
  background: #fff;
  color: var(--ff-ink);
}

.funds-results {
  margin-top: 14px;
  padding: 12px 0 4px;
  border-top: 1px solid var(--ff-line);
  scroll-margin-top: 16px;
}

.funds-results h2 {
  margin: 0 0 8px;
  font-size: 1.125rem;
  line-height: 1.3;
}

.funds-results h2:focus {
  outline: 2px solid var(--ff-ink);
  outline-offset: 2px;
}

.funds-workspace-home .funds-mount-error,
.funds-mount-error {
  margin: 0;
  padding: 12px 0;
  color: var(--ff-ink);
  font-size: 0.95rem;
  line-height: 1.45;
}

.funds-schedule-wrap {
  margin-top: 10px;
  overflow-x: auto;
}

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

.funds-kpi {
  background: var(--ff-soft);
  border-radius: 10px;
  padding: 10px 12px;
}

.funds-kpi strong {
  display: block;
  font-size: 1.125rem;
  overflow-wrap: anywhere;
}

.funds-kpi span {
  color: var(--ff-muted);
  font-size: 0.875rem;
}

.funds-schedule {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
  margin-top: 10px;
}

.funds-schedule th,
.funds-schedule td {
  border-bottom: 1px solid var(--ff-line);
  padding: 6px 8px;
  text-align: right;
  white-space: nowrap;
}

.funds-schedule th:first-child,
.funds-schedule td:first-child {
  text-align: left;
}

.connect-box {
  margin-top: 18px;
  padding: 12px;
  border: 1px dashed var(--ff-line);
  border-radius: 12px;
  background: #fbfefd;
}

.connect-box h3 {
  margin: 0 0 8px;
  font-size: 1.05rem;
}

.badge {
  display: inline-block;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 0.75rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.badge.synthetic {
  background: #fff0e0;
  color: var(--ff-warn);
}

.badge.live {
  background: #e7f4ee;
  color: var(--ff-ink);
}

.connect-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

/* Mode toggle: Independent vs Use operating data — selected state, not a Calculate CTA */
.connect-mode-tabs {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 8px 0 4px;
}

.connect-mode-tabs button {
  appearance: none;
  border: 1px solid var(--ff-line);
  background: #fff;
  border-radius: 10px;
  min-height: 44px;
  padding: 8px 10px;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ff-ink);
  cursor: pointer;
  text-align: center;
  line-height: 1.25;
  overflow-wrap: anywhere;
  white-space: normal;
}

.connect-mode-tabs button.is-active {
  border-color: var(--ff-ink);
  box-shadow: inset 3px 0 0 var(--ff-ink);
  font-weight: 700;
}

.connect-status {
  margin: 6px 0 0;
}

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

.funds-plan-item {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px 0;
  border-bottom: 1px solid var(--ff-line);
}

.funds-plan-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.funds-plan-item__meta {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.funds-plan-item__type {
  color: var(--ff-muted);
  font-size: 0.8125rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.funds-plan-item__title {
  display: block;
  font-size: 0.9375rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.funds-plan-item__actions {
  margin-top: 0;
}

.funds-plan-item__actions button {
  flex: 1 1 8rem;
  min-width: 0;
}

.impact-list {
  margin: 8px 0 0;
  padding-left: 18px;
  line-height: 1.45;
}

.funds-proto__footer-note {
  color: var(--ff-muted);
  font-size: 0.875rem;
  line-height: 1.45;
}

@media (min-width: 720px) {
  .homepage-task-hub.funds-proto-hub {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .funds-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

/* Wide: three loan tasks in one equal row */
@media (min-width: 900px) {
  .funds-mode-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
}

/* Wide desktop: four equal peer columns */
@media (min-width: 1100px) {
  .homepage-task-hub.funds-proto-hub {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Extreme narrow: allow single-column tools/modes only when unreadable side-by-side */
@media (max-width: 280px) {
  .funds-tool-tabs {
    grid-template-columns: minmax(0, 1fr);
  }
  .funds-mode-tabs {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Narrow phone acceptance (305 / 390 / 430) — keep 2×2 peers; wrap long labels */
@media (max-width: 430px) {
  .funds-proto__shell { padding: 10px 8px 32px; }
  .funds-form-grid { grid-template-columns: 1fr; }
  .funds-kpi-grid { grid-template-columns: 1fr; }
  .homepage-task-hub.funds-proto-hub { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: 8px; }
  .homepage-task-hub.funds-proto-hub .homepage-task-hub__item { min-height: 44px; padding: 6px 28px 6px 8px; }
  .homepage-task-hub.funds-proto-hub .homepage-task-hub__label { font-size: 0.9375rem; }
  .funds-proto__brand { margin-bottom: 6px; }
  .funds-proto__brand img { max-width: min(220px, 70vw); height: auto; }
  .funds-proto__banner { margin-bottom: 6px; padding: 2px 8px; }
  .funds-proto__panel { padding: 10px; border-radius: 10px; }
  .funds-proto__title { font-size: 1.0625rem; margin: 0 0 2px; }
  .funds-proto__lead { margin: 0 0 6px; font-size: 0.875rem; }
  .funds-chooser { margin-bottom: 6px; gap: 4px; }
  /* Labels already named on tabs — drop duplicate chooser captions on phone */
  .funds-chooser__label { display: none; }
  .funds-tool-tabs { gap: 4px; }
  .funds-tool-tabs button { min-height: 40px; padding: 6px 8px; font-size: 0.875rem; }
  .funds-mode-tabs { gap: 3px; }
  .funds-mode-tabs button { min-height: 36px; padding: 5px 8px; font-size: 0.8125rem; }
  .funds-form { gap: 8px; }
  .connect-box { padding: 10px; margin-top: 10px; }
  .connect-status { font-size: 0.8125rem; }
  .funds-plan-item__actions { flex-wrap: wrap; }
}

.funds-solve-kind {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 12px;
}

.funds-solve-kind button {
  appearance: none;
  border: 1px solid var(--ff-line);
  background: #fff;
  border-radius: 8px;
  min-height: 40px;
  padding: 6px 8px;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ff-ink);
  cursor: pointer;
  text-align: center;
  line-height: 1.25;
  overflow-wrap: anywhere;
  white-space: normal;
}

.funds-solve-kind button.is-active {
  border-color: var(--ff-ink);
  box-shadow: inset 3px 0 0 var(--ff-ink);
  font-weight: 700;
  background: var(--ff-active);
}

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

.funds-compare-col {
  border: 1px solid var(--ff-line);
  border-radius: 10px;
  padding: 10px;
  background: #fff;
}

.funds-compare-col h3 {
  margin: 0 0 8px;
  font-size: 0.95rem;
}

.funds-result-summary {
  margin: 0 0 12px;
}

@media (min-width: 720px) {
  .funds-compare-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}