/* INDEX UI baseline: shared typography, readable colors and touch targets.
   This file loads after the retained page styles. Text floors deliberately use
   !important so older device-specific rules cannot shrink body copy again. */
:root {
  --text-primary: #172b49;
  --text-secondary: #465770;
  --text-muted: #52627a;
  --accent: #0757cf;
  --action: #082c60;
  --text-success: #216647;
  --text-error: #923b27;
  --body-size: 16px;
  --touch-size: 48px;
}
body.landing-page, body.demo-page { font-size: var(--body-size); color: var(--text-primary); }
.landing-page p, .demo-page p,
.demo-page .demo-notice, .demo-page .artifact-body,
.demo-page .result-disclaimer, .demo-page .verification-list,
.demo-page .log-list li, .demo-page .dialog-note,
.landing-page .demo-disclaimer, .landing-page .artifact-note {
  font-size: var(--body-size) !important;
  color: var(--text-secondary) !important;
  line-height: 1.8;
}
.landing-page p.eyebrow, .demo-page p.eyebrow,
.landing-page p.mini-eyebrow, .demo-page p.mini-eyebrow {
  font-size: 12px !important;
  font-weight: 700;
  color: var(--accent) !important;
}
.landing-page .workflow-heading .section-description,
.landing-page .flow-details p { color: #c1cde0 !important; }
.landing-page .eyebrow, .landing-page .vision .eyebrow,
.landing-page .feature-copy .eyebrow, .landing-page .feature-tile .eyebrow,
.landing-page .closing .eyebrow { font-size: 12px; }
.landing-page .workflow-heading .eyebrow { color: #9ec2ff !important; }
.landing-page .business-label, .landing-page .demo-kicker,
.demo-page .eyebrow, .demo-page .architecture-note .eyebrow { color: var(--accent); }
.landing-page .button, .demo-page .primary {
  background: var(--action); color: #fff;
}
.landing-page .button:hover, .demo-page .primary:hover:not(:disabled) { background: #061f43; }
.landing-page button, .demo-page button,
.landing-page .button, .demo-page .button,
.landing-page .text-link, .landing-page .nav-links a,
.landing-page .footer-top > a:last-child, .demo-page .brand,
.landing-page .brand {
  min-height: var(--touch-size);
}
.landing-page button, .demo-page button,
.landing-page .button, .demo-page .button { font-size: 16px !important; }
.landing-page .button, .demo-page .button { padding: 12px 20px; }
.landing-page .brand, .demo-page .brand { height: 48px; }
.landing-page .brand-original, .demo-page .brand-original { top: 10px; }
.landing-page .nav-links { font-size: 16px; }
.landing-page .nav-links a, .landing-page .text-link,
.landing-page .footer-top > a:last-child { display: inline-flex; align-items: center; }
.landing-page .text-link, .landing-page .footer-top > a:last-child { font-size: 16px; color: var(--accent); }
.landing-page .context-visual { overflow: clip; min-width: 0; }
.landing-page .feature-context { min-width: 0; }
.landing-page .feature-copy { min-width: 0; }
.landing-page .business-note, .landing-page .concept-note,
.landing-page .closing-note, .landing-page .business-status,
.landing-page .workspace-caption, .landing-page .footer-bottom,
.landing-page .demo-process-header, .landing-page .step-status,
.landing-page .agent-state, .landing-page .agent-bottom,
.landing-page .workspace-top, .landing-page .workspace-footer,
.landing-page .document-top, .landing-page .document-line small,
.landing-page .document-footer, .landing-page .orbit-label,
.landing-page .result-row p, .landing-page .demo-result small,
.landing-page .demo-process-header > span:last-child,
.landing-page .demo-kicker, .landing-page .feature-tag {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.7;
}
.landing-page .workspace-heading h2 { font-size: 22px; line-height: 1.5; }
.landing-page .agent-card h3 { font-size: 18px; line-height: 1.5; }
.landing-page .orchestrator-row strong, .landing-page .result-row strong,
.landing-page .demo-result strong, .landing-page #demo-steps strong,
.landing-page .document-line strong { font-size: 16px; line-height: 1.6; }
.landing-page .agent-card p br { display: none; }
.landing-page .agent-bottom { flex-wrap: wrap; }
.landing-page .preview-label, .landing-page .mini-eyebrow,
.landing-page .prompt small, .landing-page #demo-steps small {
  color: var(--text-muted); font-size: 12px;
}
.landing-page .prompt p { font-size: 16px; }
.landing-page .flow-input small, .landing-page .flow-output small,
.landing-page .flow-number, .landing-page .flow-core > span,
.landing-page .flow-details > div > span { color: #b2c3dd; font-size: 12px; }
.landing-page .flow-input strong, .landing-page .flow-output strong,
.landing-page .flow-agents > div { font-size: 16px; }
.landing-page .flow-details h3 { font-size: 20px; }
.landing-page .workflow-note { color: #b2c3dd !important; }
.landing-page .routing-task, .landing-page .routing-options > span,
.landing-page .quality-visual > div { font-size: 16px; color: var(--text-secondary); }
.landing-page .demo-tabs { display: flex; gap: 4px; }
.landing-page .demo-tabs button { padding: 12px 18px; color: var(--text-secondary); }
.landing-page .demo-tabs button[aria-selected="true"] { color: var(--accent); }
.landing-page #demo-steps li { gap: 12px; }
.landing-page .demo-disclaimer { display: block; margin-top: 14px; }
.landing-page .closing-note { display: block; }
.landing-page .footer-bottom { gap: 12px; }
/* Actual application controls and status copy. */
.demo-page input, .demo-page textarea, .demo-page select,
.demo-page .context-panel input, .demo-page .context-panel textarea,
.demo-page .goal-panel textarea, .demo-page .model-select {
  font-size: 16px !important;
  color: var(--text-primary);
  line-height: 1.8;
  min-height: 48px;
}
.demo-page input::placeholder, .demo-page textarea::placeholder,
.demo-page .context-panel input::placeholder, .demo-page .context-panel textarea::placeholder,
.demo-page .goal-panel textarea::placeholder { font-size: 16px; color: var(--text-muted); opacity: 1; }
.demo-page .model-select { padding: 10px 8px; }
.demo-page .context-panel label, .demo-page .model-select-label {
  font-size: 16px; color: var(--text-secondary); letter-spacing: 0;
}
.demo-page .panel-heading h2, .demo-page .context-panel .panel-heading h2 { font-size: 20px; }
.demo-page .agent-card h3, .demo-page .empty-state h3 { font-size: 20px; color: var(--text-primary); }
.demo-page .plan-summary h3 { font-size: 24px; }
.demo-page .project-button, .demo-page .new-project,
.demo-page .history-open, .demo-page .secondary,
.demo-page .example-list button, .demo-page .icon-button { color: var(--text-secondary); }
.demo-page .project-button.active { color: #123f7b; }
.demo-page .project-button { min-width: 0; }
.demo-page .project-list { min-width: 0; }
.demo-page .project-button .project-name { font-size: 14px; }
.demo-page .sidebar-version, .demo-page .sidebar-section-heading,
.demo-page .sidebar-section-heading > span:last-child,
.demo-page .sidebar-info > span:last-child, .demo-page .sidebar-user small,
.demo-page .breadcrumb, .demo-page .breadcrumb > strong,
.demo-page .breadcrumb > span, .demo-page .mode-pill,
.demo-page .small-label, .demo-page .plan-tag,
.demo-page .stage-pill, .demo-page .goal-meta,
.demo-page .route-note, .demo-page .model-select-label,
.demo-page .agent-name, .demo-page .task-status,
.demo-page .task-message, .demo-page .context-status,
.demo-page .context-save, .demo-page .context-bottom > span,
.demo-page .history-item small, .demo-page .log-list time,
.demo-page .log-kind, .demo-page .workspace-footer,
.demo-page .evaluation-state, .demo-page .run-note {
  font-size: 14px; color: var(--text-muted); line-height: 1.7;
}
.demo-page .sidebar-user strong { font-size: 16px; color: var(--text-primary); }
.demo-page .sidebar-info strong { font-size: 16px; color: var(--text-primary); }
.demo-page .sidebar-info { margin-top: 24px; }
.demo-page .project-list { max-height: 35vh; }
.demo-page .view-tabs button { color: var(--text-secondary); }
.demo-page .view-tabs button[aria-selected="true"] { color: var(--accent); }
.demo-page .view-tabs button > span { font-size: 12px; color: var(--text-muted); }
.demo-page .graph-label { font-size: 14px; color: var(--text-secondary); flex-wrap: wrap; line-height: 1.8; }
.demo-page .empty-flow { font-size: 14px; color: var(--text-secondary); flex-wrap: wrap; }
.demo-page .empty-flow i { color: var(--text-muted); }
.demo-page .agent-name { flex-wrap: wrap; }
.demo-page .agent-description { min-height: 0; }
.demo-page .agent-card.running .task-status { color: #234f91; }
.demo-page .agent-card.done .task-status,
.demo-page .stage-pill.complete, .demo-page .verification-list { color: var(--text-success) !important; }
.demo-page .agent-card.failed .task-status, .demo-page .agent-card.failed .task-message,
.demo-page .stage-pill.failed, .demo-page .verification-list .failed-check { color: var(--text-error); }
.demo-page .evaluation-card { flex-wrap: wrap; }
.demo-page .evaluation-text { flex: 1; min-width: 160px; }
.demo-page .evaluation-text h3 { font-size: 16px; color: var(--text-primary); }
.demo-page .failure-option { font-size: 16px; color: var(--text-secondary); min-height: 48px; }
.demo-page .failure-option input { min-height: 20px; width: 20px; height: 20px; flex-shrink: 0; }
.demo-page .run-controls { flex-wrap: wrap; }
.demo-page .run-controls > div { flex-wrap: wrap; }
.demo-page .result-toolbar { flex-wrap: wrap; }
.demo-page .result-toolbar strong, .demo-page .history-item strong { font-size: 16px; color: var(--text-primary); }
.demo-page .result-toolbar > div:last-child { flex-wrap: wrap; }
.demo-page .artifact-body { max-height: 70vh; }
.demo-page .log-list li { flex-wrap: wrap; }
.demo-page .log-kind, .demo-page .log-list .error .log-kind { color: var(--text-secondary); }
.demo-page .context-column { min-width: 0; }
.demo-page .workspace-footer { flex-wrap: wrap; }
.demo-page dialog { color: var(--text-primary); }
.demo-page dialog ol, .demo-page .dialog-note strong { font-size: 16px; color: var(--text-secondary); }
.demo-page .field-error { font-size: 16px; color: var(--text-error); }
.demo-page .toast { font-size: 16px; }
.demo-page .architecture-note > button { min-height: 48px; font-size: 16px; color: var(--accent); }
/* Preserve full-width content at tablet sizes instead of squeezing task cards. */
@media (max-width: 1279px) {
  .demo-page .workspace-layout { grid-template-columns: minmax(0,1fr); }
  .demo-page .context-column { position: static; }
  .demo-page .agent-grid { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 1000px) {
  .landing-page .feature-context { grid-template-columns: minmax(0,1fr); }
  .landing-page .context-visual { width: 100%; max-width: 470px; margin: auto; transform: none; }
  .landing-page .business-grid { grid-template-columns: minmax(0,1fr); }
  .landing-page .flow-visual { flex-wrap: wrap; justify-content: center; }
}
@media (max-width: 900px) {
  .demo-page .page-heading h1 { font-size: 28px; line-height: 1.35; margin-top: 5px; }
  .demo-page .page-heading > div > p:last-child { margin-top: 6px; line-height: 1.65; }
  .demo-page .sidebar { padding: 10px 16px 6px; gap: 6px; }
  .demo-page .sidebar .brand { height: 48px; }
  .demo-page .sidebar .project-list { max-height: none; padding: 0; }
  .demo-page .project-button { padding: 9px 12px; }
  .demo-page .topbar { min-height: 48px; padding: 0 16px; }
  .demo-page .icon-button { width: 48px; height: 48px; }
  .demo-page .mode-pill { font-size: 12px; padding: 6px 8px; }
  .demo-page .breadcrumb > strong { font-size: 13px; }
  .demo-page .main-content { padding: 16px 16px 24px; }
  .demo-page .demo-notice { margin-top: 12px; padding: 10px 12px; gap: 8px; }
  .demo-page .demo-notice p { line-height: 1.55; }
  .demo-page .workspace-layout { margin-top: 14px; }
  .demo-page .panel-heading { padding-top: 16px; }
  .demo-page .goal-panel textarea { margin-top: 12px; min-height: 96px; padding: 12px; }
  .demo-page .goal-meta { margin-top: 6px; }
  .demo-page .goal-panel { display: flex; flex-direction: column; padding-bottom: 16px; }
  .demo-page .goal-panel > .panel-heading { order: 0; }
  .demo-page .goal-panel > textarea { order: 1; }
  .demo-page .goal-panel > .goal-meta { order: 2; }
  .demo-page .goal-panel > .goal-actions { order: 3; }
  .demo-page .goal-panel > .example-list { order: 4; }
  .demo-page .goal-panel > .field-error { order: 5; }
  .demo-page .goal-actions { margin-top: 10px; }
  .demo-page .goal-actions .route-note { display: none; }
  .demo-page .goal-actions .button { min-height: 48px; padding: 10px 18px; }
  .demo-page .example-list { margin-top: 12px; }
  .demo-page .context-panel label { font-size: 16px; }
  .demo-page .model-select-label { font-size: 14px; }
  .demo-page .result-toolbar > div:last-child { width: 100%; }
  .demo-page .result-toolbar .button { flex: 1; }
}
@media (max-width: 760px) {
  .landing-page .nav { gap: 8px; padding-top: 10px; padding-bottom: 8px; }
  .landing-page .nav-links { font-size: 14px; }
  .landing-page .nav .button-small { padding: 10px 14px; font-size: 15px !important; }
  .landing-page .brand-original, .demo-page .brand-original { top: 9px; }
  .landing-page .demo-tabs { width: 100%; }
  .landing-page .demo-tabs button { flex: 1; min-width: 0; padding: 10px 6px; font-size: 14px !important; }
  .landing-page .agent-grid { grid-template-columns: minmax(0,1fr); }
  .landing-page .demo-process-header { flex-wrap: wrap; }
  .landing-page .footer-bottom { font-size: 14px; line-height: 1.8; }
  .demo-page .view-tabs { gap: 8px; }
  .demo-page .view-tabs button { font-size: 14px !important; }
  .demo-page .goal-panel .example-list button { font-size: 13px !important; }
}
@media (max-width: 360px) {
  .landing-page .nav-links { font-size: 13px; }
  .demo-page .main-content { padding-left: 12px; padding-right: 12px; }
  .demo-page .page-heading h1 { font-size: 26px; }
  .demo-page .breadcrumb strong { max-width: 90px; }
  .demo-page .mode-pill { font-size: 11px; }
  .demo-page .example-list { gap: 5px; }
}
/* Keep Korean words together after increasing the reading size. */
.landing-page p, .demo-page p, .demo-page .sidebar-info strong,
.demo-page .sidebar-user small { word-break: keep-all; overflow-wrap: anywhere; }
.demo-page .icon-button { width: 48px; height: 48px; }
.demo-page .sidebar { overflow-y: auto; }
.landing-page #close-result, .landing-page #view-result { color: var(--accent); min-width: 48px; }
.landing-page #artifact-content h4 { font-size: 18px; color: var(--text-primary); }
.landing-page #demo-steps li.running .step-status { color: #234f91; }
.landing-page #demo-steps li.done .step-status { color: var(--text-success); }
.demo-page .demo-notice strong { color: var(--text-primary); }
@media (max-width: 360px) {
  .landing-page .nav .brand { width: 109px; }
  .landing-page .nav .brand-original { transform: scale(.14); top: 11px; }
  .landing-page .nav .button-small { font-size: 14px !important; padding: 10px 12px; }
}