/* Approved minimal GUI baseline: keep layout and behavior; refine only visual treatment. */
:root {
  --ink: #3a3a3a;
  --muted: #747474;
  --paper: #fff;
  --canvas: #fff;
  --line: #d8d8d8;
  --soft: #f5f5f5;
  --warn: #555;
  --dark: #444;
  --shadow: none;
  color: var(--ink);
  background: var(--canvas);
  font-weight: 400;
}

body {
  background: var(--canvas);
  color: var(--ink);
  font-weight: 400;
}

.rail {
  background: #fff !important;
  color: var(--ink) !important;
  border-right: 1px solid var(--line);
}

.brand,
.page-title,
.hero-copy h2,
.panel h3,
.progress-head,
.stat-value,
.row-title,
.form-field label,
.week-day-header,
.day-title,
.process-v3-basic-heading h3 {
  color: var(--ink);
  font-weight: 400 !important;
}

.brand-mark {
  border-radius: 3px;
}

.nav-button {
  color: var(--ink) !important;
  border-radius: 3px;
  font-weight: 400 !important;
}

.nav-button:hover,
.nav-button.active {
  background: var(--soft) !important;
}

.rail-foot {
  color: var(--muted);
}

.hero,
.stat,
.panel,
.list,
.detail-card,
.form-card,
.calendar,
.week-calendar,
.day-calendar,
.calendar-month-grid,
.calendar-time-grid {
  border-radius: 4px !important;
  box-shadow: none !important;
}

.hero {
  grid-template-columns: minmax(0, 1fr) minmax(160px, .35fr);
}

.hero-copy {
  padding: 28px;
}

.hero-visual {
  min-height: 112px !important;
  background: #f7f7f7 !important;
}

.hero-visual img {
  min-height: 112px !important;
}

.icon-button,
.secondary,
.primary,
.quick-option,
.form-field input,
.form-field select,
.form-field textarea,
.search,
.sharing-input-row input {
  border-radius: 3px !important;
  box-shadow: none !important;
}

.primary {
  color: var(--ink) !important;
  background: #fff !important;
  border-color: var(--line) !important;
  font-weight: 400 !important;
}

.secondary:hover,
.icon-button:hover,
.quick-option:hover {
  background: var(--soft) !important;
}

.status {
  border-radius: 3px !important;
  background: #fff !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
  font-weight: 400 !important;
}

.status.doing,
.status.done,
.status.overdue {
  background: #f5f5f5 !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

.calendar-modes button[aria-pressed="true"],
.view-switch button.active,
.color-switch button.active {
  background: #f2f2f2 !important;
  color: var(--ink) !important;
}

.calendar-modes,
.view-switch,
.color-switch {
  border-radius: 3px !important;
}

.calendar-modes button,
.view-switch button,
.color-switch button {
  color: var(--ink);
}

.calendar-month-cell,
.calendar-time-grid,
.week-calendar,
.day-calendar {
  background-color: #fff;
}

.toast {
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 3px;
  box-shadow: none;
}

.process-v3-warning {
  color: var(--ink) !important;
  background: #fff !important;
  border: 1px solid #bdbdbd !important;
  border-radius: 3px !important;
}

.process-v3-condition-block[data-constraint-block] {
  border-radius: 3px !important;
  background: #fff !important;
}

.process-v3-condition-block[data-constraint-block].is-active {
  background: #fafafa !important;
  border-color: #999 !important;
}

@media (max-width: 850px) {
  .mobile-nav {
    background: rgba(255,255,255,.98) !important;
    box-shadow: none !important;
  }

  .mobile-nav .nav-button.active {
    background: #f5f5f5 !important;
  }

  .hero {
    grid-template-columns: 1fr;
  }

  .hero-visual {
    min-height: 0 !important;
    height: 144px !important;
  }

  .hero-visual img {
    height: 100% !important;
    min-height: 0 !important;
  }

  .hero,
  .stat,
  .panel {
    border-radius: 4px !important;
  }
}