/* Shared reading scale. Loaded after module styling so compact density changes
   spacing rather than shrinking descriptive text below a readable size. */
#app .layout.os-layout-v10 {
  --reading-caption: 12px;
  --reading-body: 14px;
  --reading-muted: #526179;
  --muted: var(--reading-muted);
  --subtle: var(--reading-muted);
}
html[data-theme="dark"] #app .layout.os-layout-v10 {
  --reading-muted: #b8becb;
}
#app .layout.os-layout-v10 :is(small, .eyebrow, .module-tag, .card-meta, .column-title,
  .field > span, .badge, .task-progress-caption, .task-progress-label,
  .task-progress-label small, .task-user-tag b, .task-client-chip, .task-department-chip) {
  font-size: var(--reading-caption) !important;
  line-height: 1.45 !important;
  font-weight: 600;
}
#app .layout.os-layout-v10 :is(.eyebrow, .column-title, .field > span) {
  font-family: var(--font);
  letter-spacing: .025em;
}
#app .layout.os-layout-v10 :is(.page-header, .panel-header, .card-body, .empty-state,
  .dashboss-shell, .detail-hero, .full-edit-summary) p {
  font-size: var(--reading-body) !important;
  line-height: 1.55 !important;
}
#app .layout.os-layout-v10 :is(.page-header, .panel-header, .empty-state, .dashboss-shell) p,
#app .layout.os-layout-v10 :is(.muted, .card-meta) {
  color: var(--reading-muted);
}

/* Dashboard text was independently sized at 7–10px. Keep an explicit scale
   for its labels, actions, values, and headings instead of inheriting those rules. */
#app .layout.os-layout-v10 .dashboss-shell :is(button, select, input, label, summary) {
  font-size: 13px;
  line-height: 1.45;
}
#app .layout.os-layout-v10 .dashboss-shell :is(small, .eyebrow),
#app .layout.os-layout-v10 :is(.dashboss-tile > strong, .dashboss-gauge-card > strong,
  .dashboss-tile-details i, .dashboss-gauge-footer i, .dashboss-date-trigger span,
  .dashboss-refresh-rate > span, .dashboss-next-number, .dashboss-next-copy em,
  .dashboss-column > span, .dashboss-column > b, .dashboss-bar-row > span,
  .dashboss-bar-row > strong, .dashboss-action-row > span, .dashboss-action-row > strong,
  .dashboss-entity-row > span, .dashboss-entity-row > strong) {
  font-size: 12px;
  line-height: 1.5;
  font-family: var(--font);
  letter-spacing: .015em;
  font-weight: 600;
}
#app .layout.os-layout-v10 :is(.dashboss-tile-details i, .dashboss-gauge-footer i,
  .dashboss-next-copy small, .dashboss-date-trigger span, .dashboss-refresh-controls > small) {
  color: var(--reading-muted);
}
#app .layout.os-layout-v10 :is(.dashboss-next-copy strong, .dashboss-date-trigger strong,
  .dashboss-tile-details b, .dashboss-gauge-footer b, .dashboss-guidance-row strong,
  .dashboss-entity-row strong, .dashboss-operating-tools summary strong) {
  font-size: 14px;
  line-height: 1.45;
}
#app .layout.os-layout-v10 :is(.dashboss-tile > em, .dashboss-gauge span) {
  font-size: 22px;
  line-height: 1.25;
}
#app .layout.os-layout-v10 :is(.dashboss-next-intro h3, .dashboss-card-head h3,
  .dashboss-section-title h3) {
  font-size: 18px;
  line-height: 1.35;
}
#app .layout.os-layout-v10 .dashboss-section-title h2 { font-size: 24px; line-height: 1.3; }
#app .layout.os-layout-v10 :is(.dashboss-tile, .dashboss-gauge-card) {
  height: auto;
  min-height: 168px;
  padding: 14px;
}
#app .layout.os-layout-v10 :is(.dashboss-tile > strong, .dashboss-tile > small,
  .dashboss-tile > em, .dashboss-gauge-card > strong, .dashboss-next-copy > *,
  .dashboss-tile-details i, .dashboss-gauge-footer i) {
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
}
#app .layout.os-layout-v10 .dashboss-gauge-card > strong { padding-right: 20px; }
#app .layout.os-layout-v10 .dashboss-reference-top > .dashboss-kpi-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(195px, 100%), 1fr));
}
#app .layout.os-layout-v10 .dashboss-next-flow { grid-template-columns: 1fr; gap: 16px; }
#app .layout.os-layout-v10 .dashboss-next-steps {
  grid-template-columns: repeat(auto-fit, minmax(min(245px, 100%), 1fr));
  gap: 12px;
}
#app .layout.os-layout-v10 .dashboss-next-step {
  grid-template-columns: 24px minmax(0, 1fr) auto;
  padding: 12px;
  gap: 10px;
  min-height: 92px;
  height: auto;
}
#app .layout.os-layout-v10 .dashboss-next-icon { display: none; }
#app .layout.os-layout-v10 .dashboss-next-copy { min-width: 0; gap: 3px; }
#app .layout.os-layout-v10 .dashboss-next-copy em { color: var(--text); }
#app .layout.os-layout-v10 .dashboss-toolbar { flex-wrap: wrap; gap: 12px; }
#app .layout.os-layout-v10 :is(.dashboss-date-trigger, .dashboss-range button,
  .dashboss-refresh-now, .dashboss-card-head .btn) { height: auto; min-height: 36px; }
#app .layout.os-layout-v10 .dashboss-refresh-rate { height: auto; min-height: 38px; }
#app .layout.os-layout-v10 .dashboss-refresh-rate select { height: auto; min-height: 32px; }
#app .layout.os-layout-v10 .dashboss-section-title { flex-wrap: wrap; gap: 12px; }
#app .layout.os-layout-v10 .dashboss-main-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}
#app .layout.os-layout-v10 .dashboss-card { min-width: 0; }
#app .layout.os-layout-v10 .dashboss-card-head { flex-wrap: wrap; gap: 10px; }
#app .layout.os-layout-v10 .dashboss-column { min-width: 0; }
#app .layout.os-layout-v10 .dashboss-column > span { overflow-wrap: anywhere; }
/* Status color remains in borders/icons; small text uses readable theme colors. */
html[data-theme="dark"] #app .layout.os-layout-v10 :is(.dashboss-tile > em,
  .dashboss-gauge span, .dashboss-next-step > b) { color: var(--text); }
@media (max-width: 600px) {
  #app .layout.os-layout-v10 .dashboss-reference-top > .dashboss-kpi-grid { grid-template-columns: 1fr; }
  #app .layout.os-layout-v10 .dashboss-refresh-controls { flex-wrap: wrap; }
  #app .layout.os-layout-v10 .dashboss-date-trigger { max-width: 100%; }
}
#app .layout.os-layout-v10 .eyebrow { color: #2448a8; }
html[data-theme="dark"] #app .layout.os-layout-v10 .eyebrow { color: #9bb8ff; }
#app .layout.os-layout-v10 :is(.dashboss-operating-tools, .dashboss-deep-dive) summary em,
#app .layout.os-layout-v10 :is(.dashboss-column > strong, .dashboss-statusbar > span,
  .dashboss-shell .row-title > span, .dashboss-shell .calendar-row > span) {
  font-size: 12px;
  line-height: 1.5;
}
#app .layout.os-layout-v10 :is(.dashboss-deep-dive summary strong,
  .dashboss-shell .row-title > strong) { font-size: 14px; line-height: 1.45; }
#app .layout.os-layout-v10 :is(.dashboss-action-row > strong, .dashboss-action-row > small,
  .dashboss-guidance-row small, .dashboss-gauge-footer b, .dashboss-tile-details b) {
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
}
#app .layout.os-layout-v10 .dashboss-guidance-row small { color: var(--reading-muted); }
#app .layout.os-layout-v10 .dashboss-vertical-chart {
  grid-template-columns: repeat(7, minmax(85px, 1fr));
  overflow-x: auto;
}
#app .layout.os-layout-v10 .dashboss-statusbar { flex-wrap: wrap; gap: 10px; }
@media (min-width: 1100px) and (max-width: 1799px) {
  #app .layout.os-layout-v10 .dashboss-reference-top > .dashboss-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1800px) {
  #app .layout.os-layout-v10 .dashboss-reference-top > .dashboss-kpi-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}