/* Shared editorial finish for Khayar's existing bilingual reading and workbench pages. */
:root {
  --ink: #102c3a;
  --muted: #52676a;
  --paper: #f4f1e8;
  --line: #d5ded5;
  --accent: #277e6b;
  --pale: #f4ebd9;
  --white: #fffefa;
}
body {
  font-family: var(--khayar-font, Arial), Tahoma, sans-serif;
  font-size: 16px;
  line-height: 1.85;
  background: #f4f1e8;
  -webkit-font-smoothing: antialiased;
}
header { padding: 22px max(24px, calc((100vw - 1320px) / 2)); background: #fffefa; border-bottom: 1px solid var(--line); }
header .bar { max-width: 1320px; gap: 30px; align-items: center; }
.brand { align-items: flex-start; flex-shrink: 0; }
.brand img { width: 190px; max-height: 68px; object-fit: contain; }
.brand small { font-size: 10px; }
.header-actions { gap: 18px; flex: 1; justify-content: flex-end; }
nav { gap: 5px 18px; align-items: center; }
nav a { padding-block: 8px; font-size: 12px; text-decoration: none; color: #42616a; }
nav a:hover { color: #102c3a; text-decoration: underline; text-underline-offset: 7px; }
nav a[aria-current=page] { color: #154b44; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }
[data-language-toggle] { padding: 10px 15px; border-radius: 5px; min-width: 84px; min-height: 42px; font-family: inherit; font-size: 12px; background: transparent; color: #102c3a; border-color: #b9c8c2; }
[data-language-toggle]:hover { background: #e8f1ec; }
.visual-return-home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 42px;
  max-width: 100%;
  padding: 8px 14px;
  border: 1px solid #b9c8c2;
  border-radius: 5px;
  color: #102c3a;
  background: transparent;
  font: 600 12px/1.4 var(--khayar-font, Arial), Tahoma, sans-serif;
  text-decoration: none;
  text-align: center;
}
.visual-return-home::before { content: "↗"; font-size: 17px; font-weight: 400; }
html[dir=rtl] .visual-return-home::before { content: "↖"; }
.visual-return-home:hover { background: #e8f1ec; border-color: #6f988d; text-decoration: none; }
main { max-width: 1180px; padding: 54px 28px 65px; }
h1 { font-size: clamp(35px, 5vw, 62px); line-height: 1.12; letter-spacing: -.035em; font-weight: 500; margin: 18px 0 24px; text-wrap: balance; }
html[dir=rtl] h1 { line-height: 1.5; letter-spacing: -.02em; }
h2 { font-size: clamp(23px, 2.4vw, 31px); line-height: 1.4; font-weight: 500; letter-spacing: -.02em; margin-bottom: 18px; }
html[dir=rtl] h2 { line-height: 1.65; letter-spacing: 0; }
h3 { font-size: 18px; font-weight: 600; }
.lead { font-size: 20px; line-height: 1.8; max-width: 900px; color: #476068; }
.eyebrow { color: #38766a; font-size: 11px; letter-spacing: .09em; font-weight: 600; border-inline-start-width: 2px; padding-inline-start: 12px; }
html[dir=rtl] .eyebrow { letter-spacing: .01em; }
.badge { background: #f4ebd9; border-color: #dccba6; color: #69532e; font-size: 12px; font-weight: 500; padding: 6px 13px; }
section, .card { border-radius: 9px; background: #fffefa; border-color: #d5ded5; padding: 32px; margin: 26px 0; box-shadow: 0 7px 25px #102c3a03; }
.notice { border-inline-start-width: 3px; border-radius: 0 5px 5px 0; background: #eaf2e8; padding: 19px 23px; font-size: 14px; line-height: 1.85; color: #35594f; }
.grid { gap: 18px; margin: 30px 0; }
.grid .card { padding: 26px 23px; border-top: 2px solid #689b81; }
.grid .card p { font-size: 14px; line-height: 1.8; }
.grid .card strong { font-size: 13px; }
.kpi { font-size: clamp(28px, 3.2vw, 40px); font-weight: 400; letter-spacing: -.035em; margin-block: 19px; }
.tradeoff { color: #975943; }
.cost { color: #1d6e57; }
.pitch { border-inline-start-width: 2px; }
.section-number { color: #307864; font-size: 34px; font-weight: 400; letter-spacing: -.04em; margin-bottom: 22px; }
.pitch p { max-width: 950px; color: #3f5a62; }
.table-wrap { border-radius: 5px; border-color: #d2ddd4; }
table { font-size: 13px; line-height: 1.8; }
th { background: #e9efe6; font-weight: 600; color: #35594f; font-size: 12px; }
th, td { padding: 15px 16px; }
tbody tr:nth-child(even) { background: #f8faf4; }
.button, main button {
  border-radius: 5px;
  min-height: 46px;
  padding: 12px 19px;
  font-size: 13px;
  line-height: 1.5;
  font-family: inherit;
  font-weight: 600;
  background: #102c3a;
  border-color: #102c3a;
  color: #f4f1e8;
  transition: background 180ms ease, border-color 180ms ease;
}
.button:hover, main button:hover:not(:disabled) { background: #1b4c52; text-decoration: none; }
.button.secondary { background: transparent; color: #183f46; border-color: #a8bdb0; }
.button.secondary:hover { background: #eaf2e8; }
details { padding: 15px 18px; border-radius: 6px; background: #fafbf6; }
summary { font-size: 14px; line-height: 1.75; color: #244e52; }
details p { font-size: 14px; }
pre, code { background: #edf2e9; border-radius: 4px; }
pre { padding: 19px; }
.formula { border-radius: 5px; background: #edf4e8; padding: 22px; font-size: 14px; overflow-wrap: anywhere; }
.steps { gap: 15px; }
.step { border-top-width: 2px; padding: 18px 14px; background: #eff4eb; }
.step strong { font-size: 19px; margin-bottom: 8px; }
.copy-field { border-radius: 6px; background: #fafbf6; border-color: #b9c9bf; font-family: inherit; font-size: 15px; line-height: 1.9; padding: 22px; }
.copy-status { font-size: 13px; }
.work-controls { gap: 22px; margin: 25px 0; }
.work-controls label, .work-actions label:not(.button) { min-width: 0; flex-basis: 230px; font-size: 13px; line-height: 1.7; gap: 9px; font-weight: 600; }
input, select { min-height: 46px; padding: 11px 13px; border-radius: 5px; border-color: #b8c9bd; font-size: 14px; background: #fff; }
.work-actions { gap: 10px; align-items: center; }
.work-actions button, .work-actions .button { font-size: 12px; min-height: 45px; padding: 11px 16px; margin: 0; }
#reset-programmes, #download-programmes, #download-schedule { background: #eaf1e7; color: #244e48; border-color: #c2d5c4; }
#reset-programmes:hover:not(:disabled), #download-programmes:hover:not(:disabled), #download-schedule:hover:not(:disabled) { background: #dae8d9; }
#portfolio-decision { padding: 21px; background: #e4f0e5; border-inline-start: 3px solid #337e66; border-radius: 0 5px 5px 0; color: #154b3c; font-size: 20px; line-height: 1.7; }
#portfolio-qualification, #portfolio-budget, .helper { font-size: 13px; line-height: 1.85; color: #4f6667; }
tr.chosen { background: #e5f1e5; }
#work-error { background: #fbede6; border: 1px solid #d9b9a9; color: #80442f; border-radius: 5px; font-size: 14px; }
#work-status:empty, #exchange-status:empty { margin: 0; }
#work-status:not(:empty), #exchange-status:not(:empty) { padding-block: 12px; font-size: 14px; }
#schedule-rows td, #portfolio-rows td { min-width: 90px; }
#download-portfolio-result, #download-schedule { margin-block: 14px; margin-inline-end: 10px; }
footer { margin-top: 40px; padding-top: 25px; font-size: 12px; line-height: 1.85; color: #54685f; }
.skip { font-size: 14px; border-radius: 4px; }
:is(a, button, summary, input, select, textarea):focus-visible { outline: 3px solid #287d67; outline-offset: 4px; }
@media (max-width: 1100px) {
  header .bar { align-items: flex-start; gap: 22px; }
  .header-actions { justify-content: flex-end; gap: 12px; }
  nav { gap: 3px 14px; }
  .brand img { width: 168px; }
  .grid .card { padding: 23px 19px; }
}
@media (max-width: 850px) {
  header { padding: 20px 22px; }
  header .bar { flex-wrap: wrap; }
  .header-actions { flex-basis: 100%; justify-content: flex-start; align-items: center; }
  nav { flex: 1; }
  main { padding: 35px 22px 45px; }
  h1 { font-size: clamp(35px, 6vw, 49px); }
  .lead { font-size: 18px; }
  section, .card { padding: 26px 22px; }
  .grid, .split, .fields { grid-template-columns: 1fr; }
  .grid .card { padding: 24px; }
  .kpi { font-size: 36px; }
  .work-controls { gap: 15px; }
  .work-actions { gap: 9px; }
}
@media (max-width: 480px) {
  body { font-size: 15px; }
  header { padding: 17px 16px; }
  .brand img { width: 153px; }
  .brand small { font-size: 9px; }
  nav { gap: 3px 15px; flex-basis: 100%; }
  nav a { font-size: 11px; }
  .header-actions { gap: 10px; }
  [data-language-toggle], .visual-return-home { min-height: 40px; font-size: 11px; padding: 9px 13px; }
  main { padding: 29px 16px 38px; }
  h1 { font-size: 35px; }
  h2 { font-size: 24px; }
  section, .card { padding: 23px 18px; margin-block: 21px; }
  .notice { padding: 16px 17px; font-size: 13px; }
  .badge { font-size: 11px; }
  .eyebrow { font-size: 10px; }
  .grid { gap: 12px; }
  .steps { grid-template-columns: 1fr; }
  th, td { padding: 12px; }
  .work-controls { flex-direction: column; align-items: stretch; }
  .work-controls label, .work-actions label:not(.button) { flex-basis: auto; width: 100%; }
  .work-actions { flex-direction: column; align-items: stretch; }
  .work-actions button, .work-actions .button { width: 100%; text-align: center; justify-content: center; }
  #download-portfolio-result, #download-schedule { width: 100%; margin-inline: 0; margin-block: 7px; }
  .copy-field { padding: 16px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media print {
  body { background: white; color: #102c3a; font-size: 12px; }
  .visual-return-home, .header-actions, .button, main button, .skip { display: none !important; }
  header { background: white; padding: 0 0 12px; }
  .brand img { width: 150px; }
  main { max-width: none; padding: 15px 0; }
  h1 { font-size: 30px; }
  h2 { font-size: 21px; }
  section, .card { padding: 16px; box-shadow: none; border-radius: 0; margin: 15px 0; }
  .grid { gap: 10px; }
  .grid .card { padding: 12px; }
  .kpi { font-size: 26px; }
  .table-wrap { overflow: visible; }
  th, td { padding: 9px; font-size: 10px; }
  footer { font-size: 10px; }
}