/* ==========================================================================
   DrillSpace readability + language switcher.

   The stock UI packs type down to 7-9px. This layer rebuilds the ramp so the
   smallest text is 12.5px and body text is 15px, and grows the controls to
   match. It sits AFTER style.en.css so it wins on equal specificity.

   Nothing here affects the Chinese build - index.html loads style.css only.
   ========================================================================== */

:root {
  --fs-1: 12.5px;  /* micro labels, chips, hints              (was 7-9px)  */
  --fs-2: 13.5px;  /* secondary text, table body              (was 10-11px) */
  --fs-3: 14.5px;  /* buttons, form labels, list rows         (was 11-12px) */
  --fs-4: 15.5px;  /* body, paragraph, table headers          (was 13px)   */
  --fs-5: 18px;    /* card titles                             (was 14-16px)*/
  --fs-6: 22px;    /* section headings                        (was 18px)   */
  --lh: 1.55;
}

/* ---------- 1. global baseline ---------- */
html, body {
  font-size: var(--fs-4) !important;
  line-height: var(--lh);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- 2. lift every tiny tier ---------- */
/* micro (was 7-9px) */
small, em, .brand-sub, .brand-title span, .module-nav button small,
.user-chip small, .panel-head small, .tree-title em, .well-node span:last-child,
.route-list span, .template-list span, .row-props label, .metric-line span,
.risk span, .risk em, .kpi span, .kpi em, .api-list span, .api-history div,
.api-history b, .api-history em, .log-list div, .mini-status-row em,
.statusbar, .table-status span, .small-note, .chart-legend,
.import-preview-table td, .mini-table, .tag-medium {
  font-size: var(--fs-1) !important;
  line-height: var(--lh);
}

/* secondary (was 10-11px) */
.mini-primary, .link-btn, .quick-grid button, .btn-row button,
.editor-actions button, .table-tools button, .modal-foot button,
.subtab-row button, .view-switch button, .route-list b, .module-tile button,
.active-trajectory-card span, .modal-grid label, .mapping-grid label,
.health-row, .risk b, .task-list div, .task-list span,
.tree-title, .well-node, .module-tile p, .deviation-table, .collision-table,
.trajectory-sheet, .health-row, .form-grid.dense label,
.api-list div, .risk-lines div, .api-contract-table,
.global-search, .side-search, .user-chip span {
  font-size: var(--fs-2) !important;
  line-height: var(--lh);
}

/* controls + labels (was 11-12px) */
button, select, input, .trajectory-sheet input, .trajectory-sheet select,
.modal-grid input, .modal-grid select, .mapping-grid input, .mapping-grid select,
.form-grid input, .form-grid select, .editor-header p, .active-trajectory-card b {
  font-size: var(--fs-3) !important;
}

/* body + table headers (was 13px) */
.panel-head b, .card-title-row b, .table-status b, .trajectory-sheet th,
.import-preview-table th, .api-contract-table th, .mini-table th,
.deviation-table th, .collision-table th {
  font-size: var(--fs-3) !important;
}
.trajectory-sheet td { font-size: var(--fs-3) !important; }

/* titles */
.brand-title { font-size: var(--fs-6) !important; }
.editor-header h2 { font-size: 23px !important; line-height: 1.35; }
.modal-head b { font-size: 18px !important; }
.module-tile b { font-size: var(--fs-5) !important; }
.panel-head b, .card-title-row b { font-size: var(--fs-5) !important; }

/* KPI numbers - the headline figures */
.kpi b { font-size: 27px !important; line-height: 1.15; }
.kpi { min-height: 82px !important; padding: 12px 15px !important; }
.kpi span { font-size: var(--fs-1) !important; font-weight: 700; letter-spacing: .02em; }
.kpi em { font-size: var(--fs-1) !important; }

/* ---------- 3. give the bigger text room ---------- */
.trajectory-sheet td { height: 34px !important; }
.trajectory-sheet th { height: 38px !important; padding: 0 10px !important; }
.trajectory-sheet input, .trajectory-sheet select {
  height: 29px !important; width: 92px !important;
  font-variant-numeric: tabular-nums;
}
.trajectory-sheet .idx { width: 52px !important; }

.mini-table td { height: 32px !important; }
.health-row, .risk-lines div, .api-list div { height: 34px !important; }
.task-list div { height: 30px !important; }
.well-node { height: 32px !important; }
.route-list button { height: 60px !important; padding: 9px 11px !important; }
.template-list button { height: 56px !important; }
.quick-grid button { height: 42px !important; }
.btn-row button, .editor-actions button, .table-tools button,
.modal-foot button { height: 33px !important; }
.form-grid input, .form-grid select, .modal-grid input, .modal-grid select,
.mapping-grid input, .mapping-grid select { height: 36px !important; }
.global-search, .side-search { height: 36px !important; }
.subtab-row { height: 44px !important; }
.subtab-row button { height: 32px !important; padding: 0 18px !important; }
.view-switch { height: 44px !important; }
.view-switch button { height: 32px !important; padding: 0 16px !important; }
.statusbar { min-height: 32px !important; }
.log-list div { min-height: 30px !important; height: auto !important; padding: 6px 9px !important; }
.module-tile { min-height: 130px !important; }
.mini-primary, .link-btn { height: 30px !important; padding: 0 11px !important; }
.compact-btn { height: 36px !important; min-width: 40px !important; padding: 0 11px !important; }
.mode-chip { height: 36px !important; padding: 0 13px !important; }
.user-chip b { width: 36px !important; height: 36px !important; font-size: 15px !important; }
.toast { font-size: var(--fs-3) !important; padding: 13px 15px !important; min-width: 300px !important; }
.modal-head { height: 52px !important; }
.modal-foot { height: 54px !important; }

/* ---------- 4. header layout so nothing clips ---------- */
header { overflow: visible !important; }
.module-nav button { width: 112px !important; padding: 6px 0 !important; }
.module-nav button small { margin-top: 2px; }
.top-actions { gap: 10px !important; padding-right: 14px !important; }
.global-search { width: 200px !important; }

/* ---------- 5. strip the raw route prefixes on subsystem buttons ------- */
/* The stock markup prints "/WellboreTrajectory/TrackDesign" before the label.
   Hide the leading path token so the row reads as a title. */
.route-list b::before { content: none; }
.route-list button { font-family: inherit; }
.route-list b { display: block; margin-bottom: 3px; }
.route-list span { display: block; }

/* The route path lives in the same text node - clip it via letter rendering
   is not possible in CSS, so JS handles it. This block only tidies spacing. */

/* ---------- 6. language switcher ---------- */
#langSwitch {
  height: 36px;
  border: 1px solid #c6d6e8;
  border-radius: 4px;
  background: #fff;
  color: #0b58c1;
  font-weight: 800;
  font-size: var(--fs-3);
  padding: 0 10px;
  cursor: pointer;
}
#langSwitch:hover { background: #eef6ff; border-color: #8fb8ea; }

/* Chinese build needs its own size bump - it loads style.css + this file */
body.lang-zh, body.lang-zh html { font-size: 15.5px !important; }

/* ---------- 7. fit the larger type: stop the clipping -------------------- */
/* Top nav: give each item enough width for the longest label ("Simulation Center") */
.module-nav { overflow: visible !important; }
.module-nav button { width: 128px !important; }
.module-nav button .nav-copy { display: block; line-height: 1.25; }
.module-nav button small { font-size: 11.5px !important; letter-spacing: .03em; }

/* Header needs to be taller for the bigger nav + controls */
header, .topbar { min-height: 84px !important; height: auto !important; }

/* Subsystem route list: full label on its own line, description below */
.route-list button { height: auto !important; min-height: 66px !important; padding: 10px 12px !important; }
.route-list b { font-size: 14.5px !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
.route-list span { white-space: normal !important; overflow: visible !important; }
.route-list { gap: 7px !important; }

/* Left rail is 285px - widen so dropdowns and labels fit */
.trajectory-workbench { grid-template-columns: 330px minmax(560px,1fr) 300px !important; }

/* Form dropdowns: let the value text have room */
.form-grid.dense label { grid-template-columns: 84px 1fr !important; }
.form-grid select, .form-grid input { min-width: 0; text-overflow: ellipsis; }

/* KPI strip: taller cards, less aggressive min-width so 6 fit */
.kpi-strip { grid-template-columns: repeat(6, minmax(150px, 1fr)) !important; }
.kpi span { white-space: normal !important; }

/* Search inputs: placeholders were being cut */
.global-search { width: 230px !important; }
.side-search { width: 100% !important; }

/* Sub-tab and view-switch rows can scroll rather than clip */
.subtab-row, .view-switch { overflow-x: auto !important; flex-wrap: nowrap !important; }
.subtab-row button, .view-switch button { flex: 0 0 auto !important; }

/* Status bar sits at the bottom - give it room to wrap */
.statusbar { flex-wrap: wrap !important; row-gap: 3px; padding: 5px 14px !important; height: auto !important; }