/* Readability layer — loaded last. Two jobs:
   1. Comfortable, accessible reading defaults site-wide (line-height, smoothing, selection).
   2. Styles for the reader font-size control (A- / A+) in the header.
   Contrast fixes for muted text live inline in the other files (slate-400 text -> #5c6773). */

/* ---- Global reading comfort ---- */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
/* Body copy breathes; tighten headings/compact UI so line-height:1.6 doesn't bloat them */
p{ line-height:1.65; }
li,dd,blockquote,figcaption,label,td,th{ line-height:1.55; }
h1,h2,h3,h4,h5,h6{ line-height:1.2; text-wrap:balance; }
p,li{ text-wrap:pretty; }

/* Keep controls compact despite the larger body line-height */
.btn,.nav-link,.badge,.pill,.chip,.tag,summary,.lang-menu-toggle,input,select,textarea{ line-height:1.2; }

/* Brand-blue text selection instead of default browser highlight */
::selection{ background:#bcd2f2; color:#0d1330; }

/* Reader font-size scales text-only via JS (app.js) — no box/layout zoom here. */

/* Reader control now lives in the job-detail box header, stacked above the type badge */
.job-detail-title-aside{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
  flex-shrink:0;
}

/* ---- Reader font-size control ---- */
.text-size-control{
  display:inline-flex;
  align-items:stretch;
  border:1px solid #bcd2f2;
  border-radius:14px;
  overflow:hidden;
  background:#fff;
}
.text-size-control .ts-btn{
  border:0;
  background:transparent;
  color:#2d51a8;
  font-weight:900;
  cursor:pointer;
  padding:0 12px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  gap:1px;
  transition:background .15s ease, color .15s ease;
}
.text-size-control .ts-btn:hover{ background:#eef4fc; }
.text-size-control .ts-btn:active{ background:#dce8f9; }
.text-size-control .ts-btn:disabled{ color:#9fb2d6; cursor:default; background:transparent; }
.text-size-control .ts-btn+.ts-btn{ border-left:1px solid #dce8f9; }
.text-size-control .ts-btn .ts-a{ font-size:14px; }
.text-size-control .ts-btn .ts-sign{ font-size:12px; }
.text-size-control .ts-btn[data-textsize="inc"] .ts-a{ font-size:17px; }

/* Dark mode */
body.theme-dark .text-size-control{ background:#101a3d; border-color:#2a3a70; }
body.theme-dark .text-size-control .ts-btn{ color:#9fc0ef; }
body.theme-dark .text-size-control .ts-btn:hover{ background:#172450; }
body.theme-dark .text-size-control .ts-btn+.ts-btn{ border-left-color:#2a3a70; }
body.theme-dark ::selection{ background:#2c4699; color:#fff; }

/* Hide the desktop control on small screens; a mobile copy sits in the nav drawer */
@media(max-width:900px){ .text-size-control.ts-desktop{ display:none; } }
@media(min-width:901px){ .text-size-control.ts-mobile{ display:none; } }

/* ---- Job detail page only: readable section labels ----
   The stat-card labels use .tiny.muted, which is light-blue (#93b4e9) — fine on
   dark cards, but near-invisible on the light cards here. Darken in light mode only. */
body:not(.theme-dark) .job-detail-layout .tiny.muted{ color:#556074 !important; }

/* ---- Job detail page only: compact stat cards ----
   The global rule pads .info to 28px, making these cards large. Tighten them here. */
.job-detail-main .info-grid{ gap:12px !important; }
.job-detail-main .info-grid .info{ padding:12px 14px !important; border-radius:12px !important; }
.job-detail-main .info-grid .info .tiny.muted{ font-size:10px !important; margin-bottom:3px !important; }
.job-detail-main .info-grid .info strong{ font-size:14px !important; line-height:1.3 !important; }