/* =========================================================
   المقاول الذاتي الجاهز — Web App
   Design tokens
========================================================= */
:root{
  --bg: #F5F6F3;
  --surface: #FFFFFF;
  --surface-2: #EFF2EF;
  --ink: #16241F;
  --ink-soft: #4B5A55;
  --ink-faint: #7C8A85;
  --border: #DDE3DE;

  --primary: #0F3D3E;
  --primary-strong: #0A2B2C;
  --primary-soft: #E4ECEA;

  --gold: #B98A2E;
  --gold-soft: #E9D3A3;
  --gold-strong: #8C6A20;

  --danger: #A5322A;
  --danger-soft: #F5E3E1;
  --success: #2F6B4F;
  --success-soft: #E3EEE7;

  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 22px;

  --shadow-card: 0 1px 2px rgba(15,61,62,0.06), 0 6px 20px rgba(15,61,62,0.06);

  --font-display: "Markazi Text", "Traditional Arabic", serif;
  --font-body: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;

  --max-w: 720px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3{
  font-family: var(--font-display);
  color: var(--primary-strong);
  line-height: 1.25;
  margin: 0 0 .5em;
}

p{ margin: 0 0 1em; color: var(--ink-soft); }

a{ color: var(--primary); }

.skip-link{
  position:absolute; right:-999px; top:0; background:var(--primary); color:#fff;
  padding:.6em 1em; border-radius: 0 0 0 8px; z-index:200;
}
.skip-link:focus{ right:0; }

button{ font-family: inherit; cursor:pointer; }

:focus-visible{
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  html{ scroll-behavior:auto; }
}

/* =========================================================
   Header / Nav
========================================================= */
.site-header{
  position: sticky; top:0; z-index: 100;
  background: rgba(245,246,243,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.header-inner{
  max-width: 960px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding: .85em 1.1em;
  flex-wrap: nowrap;
}
.brand{
  display:flex; align-items:center; gap:.5em;
  text-decoration:none; color: var(--primary-strong);
  background:none; border:none; padding:0;
  min-width:0;
}
.brand-mark{ color: var(--primary); display:flex; flex:0 0 auto; }
.brand-name{ font-family: var(--font-display); font-size:1.25rem; font-weight:600; white-space:nowrap; }
.brand-short{ display:none; }

.main-nav{ display:flex; gap:.2em; flex:0 0 auto; }
.nav-link{
  background:none; border:none; color: var(--ink-soft);
  font-size: .95rem; padding:.55em .7em; border-radius: var(--radius-s);
  white-space:nowrap;
}
.nav-link:hover{ color: var(--primary-strong); }
.nav-link.is-active{ color: var(--primary-strong); background: var(--primary-soft); font-weight:600; }

/* =========================================================
   Layout helpers
========================================================= */
main{ max-width: 960px; margin:0 auto; padding: 0 1.1em 3em; }
.view[hidden]{ display:none; }

.section{ max-width: var(--max-w); margin: 3.2em auto 0; }
.section-muted{
  background: var(--surface); border:1px solid var(--border);
  border-radius: var(--radius-l); padding: 1.8em; margin-top: 3.2em; margin-bottom: 1em;
}
.section-title{ font-size: 1.5rem; margin-bottom:.6em; }
.section-text{ max-width: 60ch; }

.page-head{ max-width: var(--max-w); margin: 2.2em auto 1.6em; }
.page-head h1{ font-size: 2rem; }
.page-head p{ margin:0; }

/* =========================================================
   Buttons
========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius: var(--radius-s); border: 1.5px solid transparent;
  padding: .8em 1.5em; font-size: 1rem; font-weight:600;
  transition: background .15s ease, border-color .15s ease, transform .05s ease;
}
.btn:active{ transform: scale(0.98); }
.btn-primary{ background: var(--primary); color:#fff; }
.btn-primary:hover{ background: var(--primary-strong); }
.btn-secondary{ background: var(--gold); color:#fff; }
.btn-secondary:hover{ background: var(--gold-strong); }
.btn-outline{ background:transparent; border-color: var(--primary); color: var(--primary); }
.btn-outline:hover{ background: var(--primary-soft); }
.btn-ghost{ background:transparent; color: var(--ink-soft); border-color: var(--border); }
.btn-ghost:hover{ background: var(--surface-2); }
.btn-lg{ padding: .95em 1.9em; font-size: 1.05rem; }
.btn-block{ width:100%; }

/* =========================================================
   Hero
========================================================= */
.hero{
  display:flex; flex-direction: column-reverse; align-items:center; gap: 2em;
  padding: 2.4em 0 1em;
  text-align:center;
}
.hero-text{ max-width: 46ch; }
.hero-eyebrow{ color: var(--gold-strong); font-weight:600; font-size:.95rem; margin-bottom:.4em; }
.hero-title{ font-size: 2.3rem; margin-bottom:.4em; }
.hero-sub{ font-size:1.05rem; }
.hero-note{ color: var(--ink-faint); font-size:.85rem; margin-top:.9em; margin-bottom:0; }

.hero-visual{ width: 190px; }
.quarter-wheel{ width:100%; height:auto; }
.wheel-label{ font-family: var(--font-display); fill: var(--primary-strong); font-weight:600; }
.wheel-label-sub{ fill: var(--ink-faint); font-family: var(--font-body); }

.strip{
  display:grid; grid-template-columns: 1fr; gap: 1px;
  background: var(--border); border:1px solid var(--border);
  border-radius: var(--radius-m); overflow:hidden; margin-top: 2.6em;
}
.strip-item{
  background: var(--surface); padding: 1.3em 1em; text-align:center;
}
.strip-num{ display:block; font-family: var(--font-display); font-size:1.9rem; color: var(--primary); font-weight:700; }
.strip-label{ display:block; color: var(--ink-soft); font-size:.88rem; margin-top:.2em; }

/* =========================================================
   Steps
========================================================= */
.steps{ list-style:none; margin:0 0 1.6em; padding:0; display:flex; flex-direction:column; gap:1.3em; }
.step{ display:flex; gap:1em; align-items:flex-start; }
.step-num{
  flex: 0 0 auto; width:2.1em; height:2.1em; border-radius:50%;
  background: var(--primary-soft); color: var(--primary-strong);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight:700; font-size:1.05rem;
}
.step h3{ font-size:1.05rem; margin-bottom:.15em; font-family: var(--font-body); font-weight:700; color: var(--ink); }
.step p{ margin:0; font-size:.94rem; }

/* =========================================================
   Tabs
========================================================= */
.tabs{
  display:flex; gap:.4em; max-width: var(--max-w); margin: 0 auto 1.6em;
  border-bottom: 1px solid var(--border);
}
.tab{
  background:none; border:none; padding:.8em 1em;
  color: var(--ink-faint); font-size:.98rem; font-weight:600;
  border-bottom: 2.5px solid transparent; margin-bottom:-1px;
}
.tab.is-active{ color: var(--primary-strong); border-color: var(--primary); }

/* =========================================================
   Forms
========================================================= */
.calc-panel{
  max-width: var(--max-w); margin: 0 auto; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-l);
  padding: 1.6em; display: none; flex-direction:column; gap: 1.3em;
}
.calc-panel.is-active{ display:flex; }

.field{ display:flex; flex-direction:column; gap:.4em; }
.field label{ font-weight:600; font-size:.95rem; color: var(--ink); }
.field select, .field input{
  font-family: inherit; font-size: 1.05rem; padding: .85em .9em;
  border: 1.5px solid var(--border); border-radius: var(--radius-s);
  background: var(--surface); color: var(--ink);
  min-height: 3em;
}
.field select:focus, .field input:focus{ border-color: var(--primary); }
.field-hint{ margin:0; font-size:.82rem; color: var(--ink-faint); }
.field-grid{ display:grid; grid-template-columns: 1fr; gap: 1em; }

/* =========================================================
   Results
========================================================= */
.results{ max-width: var(--max-w); margin: 2em auto 0; scroll-margin-top: 5.5em; }

.result-hero{
  background: var(--primary); color:#fff;
  border-radius: var(--radius-l); padding: 1.8em;
  text-align:center; margin-bottom: 1em;
}
.result-hero .rh-label{ font-size:.95rem; opacity:.85; margin-bottom:.3em; display:block; }
.result-hero .rh-value{
  font-family: var(--font-display); font-size: 2.7rem; font-weight:700;
  display:block; margin-bottom:.15em;
}
.result-hero .rh-sub{ font-size:.88rem; opacity:.85; display:block; }
.result-hero.is-warning{ background: var(--danger); }

.result-grid{ display:grid; grid-template-columns: 1fr; gap: .8em; margin-bottom: 1.4em; }
.result-card{
  background: var(--surface); border:1px solid var(--border);
  border-radius: var(--radius-m); padding: 1.1em 1.3em;
  display:flex; justify-content:space-between; align-items:center; gap:1em;
}
.result-card .rc-label{ color: var(--ink-soft); font-size:.92rem; }
.result-card .rc-value{ font-weight:700; color: var(--primary-strong); font-size:1.05rem; text-align:left; }
.result-card.is-alert{ border-color: var(--danger); background: var(--danger-soft); }
.result-card.is-alert .rc-value{ color: var(--danger); }

.result-card-quarter{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-m);
  padding: 1em 1.2em;
}
.rcq-head{ display:flex; justify-content:space-between; font-weight:700; color:var(--primary-strong); margin-bottom:.5em; }
.rcq-row{ display:flex; justify-content:space-between; font-size:.9rem; color:var(--ink-soft); padding:.15em 0; }
.rcq-row strong{ color: var(--ink); }

.result-actions{ display:flex; gap:.7em; flex-wrap:wrap; margin-bottom:1.2em; }
.disclaimer-inline{
  font-size:.82rem; color: var(--ink-faint); text-align:center;
  border-top:1px solid var(--border); padding-top:1em;
}

/* =========================================================
   Guide
========================================================= */
.guide-nav{
  display:flex; gap:.6em; flex-wrap:wrap; max-width: var(--max-w); margin: 0 auto 2em;
}
.guide-nav a{
  text-decoration:none; font-size:.88rem; font-weight:600;
  background: var(--surface); border:1px solid var(--border);
  padding:.5em .9em; border-radius: 999px; color: var(--ink-soft);
}
.guide-nav a:hover{ color: var(--primary-strong); border-color: var(--primary); }

.guide-section{ max-width: var(--max-w); margin: 0 auto 3em; scroll-margin-top: 5em; }
.guide-section h2{ font-size: 1.6rem; }

.card-grid{ display:grid; grid-template-columns: 1fr; gap: .9em; margin: 1.2em 0; }
.info-card{
  background: var(--surface); border:1px solid var(--border);
  border-radius: var(--radius-m); padding: 1.2em 1.3em;
}
.info-card h3{ font-family: var(--font-body); font-size:1rem; color: var(--ink); margin-bottom:.3em; }
.info-card p{ margin:0; font-size:.92rem; }
.info-card-warn{ background: var(--gold-soft); border-color: var(--gold); }
.info-card-warn h3{ color: var(--gold-strong); }

.source-note{ font-size:.82rem; color: var(--ink-faint); margin-top:1em; }

.deadline-list{ display:flex; flex-direction:column; gap:.7em; margin: 1.3em 0; }
.deadline-item{
  display:grid; grid-template-columns: auto 1fr auto; align-items:center; gap: .8em;
  background: var(--surface); border:1px solid var(--border);
  border-radius: var(--radius-m); padding: 1em 1.2em;
}
.deadline-q{
  font-family: var(--font-display); font-weight:700; color: var(--primary);
  background: var(--primary-soft); padding:.3em .7em; border-radius: var(--radius-s);
  font-size:.95rem; white-space:nowrap;
}
.deadline-period{ color: var(--ink-soft); font-size:.9rem; }
.deadline-date{ font-weight:700; color: var(--ink); font-size:1rem; white-space:nowrap; }

.warn-box{
  background: var(--danger-soft); border-radius: var(--radius-m);
  padding: 1.2em 1.3em; margin-top:1em;
}
.warn-box h3{ font-family: var(--font-body); color: var(--danger); font-size:1rem; margin-bottom:.3em; }
.warn-box p{ margin:0; font-size:.92rem; color: var(--ink); }
.warn-box-soft{ background: var(--surface-2); }
.warn-box-soft h3{ color: var(--primary-strong); }

.mistake-list{ margin:1.2em 0; padding-inline-start: 1.3em; display:flex; flex-direction:column; gap:.6em; }
.mistake-list li{ color: var(--ink-soft); font-size:.95rem; }
.mistake-list li::marker{ color: var(--danger); }

.accordion{ display:flex; flex-direction:column; gap:.6em; margin-top:1.2em; }
.accordion-item{ background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-m); overflow:hidden; }
.accordion-trigger{
  width:100%; text-align:right; background:none; border:none;
  padding: 1.05em 1.2em; font-size:.98rem; font-weight:600; color: var(--ink);
  display:flex; justify-content:space-between; align-items:center; gap:1em;
}
.accordion-trigger::after{
  content:"+"; font-size:1.3rem; color: var(--primary); flex:0 0 auto; line-height:1;
}
.accordion-trigger[aria-expanded="true"]::after{ content:"–"; }
.accordion-panel{ padding: 0 1.2em 1.1em; }
.accordion-panel p{ margin:0; font-size:.92rem; }

/* =========================================================
   Footer
========================================================= */
.site-footer{
  border-top: 1px solid var(--border); margin-top: 2em;
  padding: 1.8em 1.1em; text-align:center;
}
.site-footer p{ max-width: 60ch; margin: 0 auto .4em; font-size:.85rem; color: var(--ink-soft); }
.footer-meta{ font-size:.78rem !important; color: var(--ink-faint) !important; }

/* =========================================================
   Responsive — tablet & up
========================================================= */
@media (min-width: 640px){
  .field-grid{ grid-template-columns: 1fr 1fr; }
  .result-grid{ grid-template-columns: 1fr 1fr; }
  .strip{ grid-template-columns: 1fr 1fr 1fr; }
  .card-grid{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 420px){
  .brand-full{ display:none; }
  .brand-short{ display:inline; }
  .brand-name{ font-size: 1.05rem; }
  .nav-link{ font-size:.85rem; padding:.55em .5em; }
  .header-inner{ padding: .7em .8em; }
}

@media (min-width: 860px){
  .hero{ flex-direction: row; text-align: right; padding: 4em 0 2.5em; }
  .hero-text{ flex: 1; }
  .hero-visual{ flex: 0 0 240px; width: 240px; }
  .hero-title{ font-size: 2.8rem; }
  .nav-link{ font-size:1rem; }
}

/* =========================================================
   Print
========================================================= */
@media print{
  .site-header, .main-nav, .tabs, .calc-panel, .result-actions, .site-footer, .hero-visual, .btn{ display:none !important; }
  body{ background:#fff; }
  .result-hero{ background:#fff !important; color:#000 !important; border:2px solid #000; }
  .result-card{ border:1px solid #000; }
}