/* ============================================================
   Makkah 600 — "Codex" theme (0.39c)
   Visual layer only. Loaded after app.css; overrides tokens and
   component skins. No data, copy or JS is touched.
   Inspiration: parchment codex screens — light sand ground,
   chamfered tan cards, serif titles with a hairline + diamond,
   quiet top tab bar, hint bar at the bottom. Mirrored for RTL.
   ============================================================ */

:root{
  color-scheme:light;
  /* ground + surfaces */
  --bg:#e7dfcd;
  --surface:rgba(255,251,243,.55);
  --surface-2:rgba(255,251,243,.78);
  --elevated:#f7f2e7;
  /* ink */
  --text:#2b241a;
  --muted:#6f6353;
  --border:rgba(96,74,42,.26);
  --rule:rgba(96,74,42,.42);
  /* gold / bronze */
  --accent:#8a6a32;
  --accent-soft:rgba(176,140,80,.16);
  --gold:#b8904e;
  --focus:#9c7a3c;
  /* semantic (desaturated for light ground) */
  --warning:#a26f12;--danger:#a83c35;--success:#2f7a58;
  --blocked:#a83c35;--legacy:#7a6d86;--proposal:#4d6f9e;--research:#8a6a32;
  --status-current:#2c63a8;--status-decision:#a26f12;--status-blocked:#a83c35;--status-complete:#2f7a58;--status-next:#6b6f76;
  /* card skins */
  --card:#cdbfa2;            /* tan category card */
  --card-2:#d9cdb2;          /* lighter tan */
  --card-line:#8f7550;       /* bevel line */
  --card-active:#faf7ef;     /* selected entry */
  --ink-dark:#2b241a;
  --radius:6px;--radius-sm:4px;
  --shadow:0 10px 30px rgba(60,40,10,.12);
  --font-ui:"Alexandria","Segoe UI",Tahoma,Arial,sans-serif;
  --font-serif:"Amiri","Noto Naskh Arabic","Sakkal Majalla","Traditional Arabic","Geeza Pro","Times New Roman",serif;
  --chamfer:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
  --chamfer-sm:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
}

/* ---------- ground: parchment with soft vignette ---------- */
html{background:var(--bg)}
body{
  background:
    radial-gradient(120% 90% at 85% 0%,rgba(255,250,240,.9) 0%,rgba(255,250,240,0) 55%),
    radial-gradient(90% 70% at 10% 100%,rgba(150,120,80,.28) 0%,rgba(150,120,80,0) 60%),
    radial-gradient(60% 60% at 30% 40%,rgba(255,255,255,.35) 0%,rgba(255,255,255,0) 70%),
    linear-gradient(180deg,#ece5d5 0%,#e3dac6 60%,#d8cdb4 100%);
  background-attachment:fixed;
  color:var(--text);
}
body::before{ /* faint paper grain */
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.35;
  background-image:
    repeating-linear-gradient(0deg,rgba(0,0,0,.012) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(90deg,rgba(0,0,0,.010) 0 1px,transparent 1px 4px);
}
.app-shell,.mobile-bottom-nav,dialog{position:relative;z-index:1}

/* ---------- typography ---------- */
h1,h2,h3,.page-head h1,.panel>h2,.brand strong,#route-title,.nav-group summary,.primary-nav a,.mobile-drawer a,.codex-list a span,.wiki-article-card h2,.finding-card h3,.phase-card h3,.workstream-card h2,.decision-record h2,.task-card h2,.action-card h2,.decision-card h2,.metric-card span,.link-grid a strong,.source-card h2,.evidence-row strong,.priority-list h3,.decision-options h3{
  font-family:var(--font-serif);letter-spacing:.005em;
}
h1{font-weight:600}h2,h3,h4{font-weight:600}
.page-head h1{font-size:clamp(1.9rem,3.4vw,3rem);line-height:1.15;color:var(--ink-dark);margin:.2rem 0 .3rem}
/* divider: hairline with a gap for the centred diamond (app.css draws the ◇) */
.page-head{border-bottom:0;background:linear-gradient(to left,transparent 0 6%,var(--rule) 14% calc(50% - 16px),transparent calc(50% - 16px) calc(50% + 16px),var(--rule) calc(50% + 16px) 86%,transparent 94%) no-repeat bottom/100% 1px;padding-bottom:1.2rem}
.page-head::after{background:transparent;padding:0;color:var(--accent);bottom:-.72rem;font-size:.8rem;transform:translateX(50%)}
.page-head p{color:var(--muted);max-width:66ch}
.eyebrow{color:var(--accent);letter-spacing:.14em;font-weight:600}
.breadcrumbs{color:var(--muted)}.breadcrumbs span+span::before{color:var(--rule)}
a:hover{color:var(--ink-dark)}

/* ---------- top bar → quiet tab bar ---------- */
.topbar{
  background:linear-gradient(180deg,rgba(236,229,213,.96),rgba(236,229,213,.86));
  backdrop-filter:blur(8px);border-bottom:1px solid var(--border);
}
.topbar>div:first-child{position:relative;display:flex;align-items:center;gap:.9rem}
#route-title{font-size:1.15rem;font-weight:600;color:var(--ink-dark);max-width:320px;position:relative;padding:0 .2rem}
#route-title::before{content:"❖";position:absolute;top:-1.15rem;left:50%;transform:translateX(-50%);font-size:.7rem;color:var(--accent);opacity:.9}
#route-title::after{content:"";position:absolute;inset-inline:0;bottom:-.55rem;height:2px;background:var(--ink-dark);border-radius:2px}
.icon-button,.search-button{background:transparent;border:1px solid var(--border);border-radius:4px;color:var(--text)}
.icon-button:hover,.search-button:hover{background:var(--surface-2);border-color:var(--rule)}
.search-button kbd{color:var(--muted);border:1px solid var(--border);border-radius:3px;padding:0 .3rem;background:transparent}
.production-pill{background:transparent;border:1px solid var(--border);color:var(--muted);border-radius:4px}
.production-pill i{background:var(--accent)}
.global-progress{background:rgba(236,229,213,.92);border-bottom:1px solid var(--border);color:var(--muted)}
.global-progress progress{accent-color:var(--gold);height:4px}
progress{accent-color:var(--gold)}
progress::-webkit-progress-bar{background:rgba(96,74,42,.14);border-radius:2px}
progress::-webkit-progress-value{background:var(--gold);border-radius:2px}
progress::-moz-progress-bar{background:var(--gold)}

/* ---------- sidebar → codex category list (right side, RTL) ---------- */
.sidebar,.mobile-bottom-nav{
  background:linear-gradient(180deg,rgba(226,217,199,.92),rgba(214,203,180,.92));
  border-color:var(--border);backdrop-filter:blur(6px);
}
.sidebar{border-left:1px solid var(--rule)}
.brand{padding:.4rem .2rem 1.1rem;border-bottom:1px solid var(--border);margin-bottom:.9rem;position:relative}
.brand::after{content:"◆";position:absolute;bottom:-.45rem;left:50%;transform:translateX(-50%);font-size:.5rem;color:var(--accent);background:transparent}
.brand-mark{border:1px solid var(--accent);color:var(--accent);background:rgba(255,251,243,.5);border-radius:2px;clip-path:var(--chamfer-sm)}
.brand strong{color:var(--ink-dark);font-size:1.3rem}
.brand small{color:var(--muted);letter-spacing:.06em}

.primary-nav{gap:.4rem}
.primary-nav a,.nav-group summary{
  position:relative;isolation:isolate;border-radius:0;color:var(--ink-dark);
  min-height:46px;padding:.55rem .95rem;font-weight:600;font-size:.98rem;
}
.primary-nav a::before,.nav-group summary::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--card-line);clip-path:var(--chamfer)}
.primary-nav a::after,.nav-group summary::after{content:"";position:absolute;inset:1px;z-index:-1;background:linear-gradient(90deg,var(--card-2),var(--card));clip-path:var(--chamfer)}
.nav-group summary::after{transform:none;content:""} /* app.css used ::after for the chevron; ours is the fill layer */
.nav-group[open] summary::after{transform:none}
.nav-group summary{justify-content:flex-start;gap:.6rem;list-style:disclosure-closed;padding-inline-start:.9rem;padding-inline-end:5.2rem;color:var(--ink-dark)}
.nav-group[open] summary{list-style:disclosure-open}
.nav-group summary::marker{color:var(--accent);font-size:.75rem}
.primary-nav a:hover::after{background:linear-gradient(90deg,#e6dcc4,#d9cdb2)}
.primary-nav a[aria-current="page"]{color:var(--ink-dark);box-shadow:none}
.primary-nav a[aria-current="page"]::after{background:var(--card-active)}
.primary-nav a[aria-current="page"]::before{background:var(--ink-dark)}
/* small pointer notch on the open (left) side of the active entry */
.primary-nav a[aria-current="page"]{margin-left:8px}
.primary-nav a[aria-current="page"]:focus-visible{outline-offset:2px}
.nav-group>div{gap:.3rem;padding-right:.9rem;margin-right:.6rem;border-right:1px solid var(--rule);margin-top:.35rem;margin-bottom:.35rem;display:grid}
.nav-group>div a{min-height:42px;font-size:.92rem;font-weight:500}
.nav-group>div a::after{background:linear-gradient(90deg,#e0d5bd,#d3c6aa)}
/* subtle "thumbnail" strip on category cards (abstract, no imagery) */
.nav-group summary::after{
  background:
    linear-gradient(90deg,transparent 0 36%,var(--card-line) 36% calc(36% + 1px),var(--card-2) calc(36% + 1px)),
    radial-gradient(70% 60% at 10% 100%,rgba(70,55,30,.55),transparent 70%),
    radial-gradient(50% 45% at 27% 100%,rgba(70,55,30,.42),transparent 70%),
    radial-gradient(60% 40% at 18% 0%,rgba(255,250,240,.7),transparent 70%),
    linear-gradient(180deg,#d9cdb2,#b9a985);
  background-repeat:no-repeat;
}
.nav-hint{border-color:var(--rule);color:var(--muted);background:rgba(255,251,243,.5)}
.sidebar-foot{border-top:1px solid var(--border);color:var(--muted)}

/* ---------- content surfaces ---------- */
main{padding-top:1.6rem}
.panel,.metric-card,.task-card,.notice,.blocker-card,.lineage-card,.article-hero-copy,.finding-card,.priority-list article,.link-grid a,.evidence-row,.phase-card,.workstream-card,.decision-record,.action-card,.decision-card,.knowledge-card,.archive-card,.track-card,.track-column,.confidence-legend span,.source-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset;
}
.panel>h2{font-size:1.15rem;color:var(--ink-dark);position:relative;padding-bottom:.55rem;margin-bottom:.9rem}
.panel>h2::after{content:"";position:absolute;inset-inline:0;bottom:0;height:1px;background:linear-gradient(to left,var(--rule),rgba(96,74,42,.06))}
.metric-card b{color:var(--ink-dark);font-family:var(--font-serif)}
.metric-card span{color:var(--muted)}
.metric-link-grid .metric-card:hover{border-color:var(--rule);transform:translateY(-1px)}
.decision-card.spotlight,.decision-now .decision-card,.local-draft-warning{background:#f6efdc}
.dialog-head{background:var(--elevated)}
.world-shot-placeholder{background:linear-gradient(135deg,rgba(255,251,243,.6),rgba(205,191,162,.6));border:1px dashed var(--rule)}
.archive-warning{background:rgba(255,251,243,.5);border-color:var(--rule);opacity:1}
.wiki-notice{background:rgba(47,122,88,.08);border-color:rgba(47,122,88,.4)}
.raw-summary{background:var(--elevated);color:var(--text)}
.project-status-hero,.command-primary,.command-gate,.blocker-strip{border-color:var(--border)}
.confidence{background:var(--gold);color:#fff}
.step-no{border-color:var(--rule);color:var(--muted);background:rgba(255,251,243,.5)}
.article-toc a{border-right:2px solid var(--border);color:var(--muted)}
.article-toc a:hover{border-color:var(--accent);color:var(--ink-dark)}
.fact-list>div{border-bottom:1px solid var(--border)}
.compact-row{border-bottom:1px solid var(--border)}
.link-grid a:hover,.record-link:hover{border-color:var(--accent);background:var(--accent-soft)}
.media-card img{border:1px solid var(--border);background:#fff}

/* article: hero copy card reads like the codex entry pane */
.article-hero-copy{background:transparent;border:0;box-shadow:none;padding:.4rem .2rem}
.article-summary p{font-size:1.04rem;line-height:1.95}
.article-section h2{font-size:1.2rem}

/* codex rail entries → chamfered mini cards */
.codex-list a{position:relative;isolation:isolate;border:0;border-radius:0;color:var(--ink-dark);padding:.45rem .8rem}
.codex-list a::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--card-line);clip-path:var(--chamfer-sm)}
.codex-list a::after{content:"";position:absolute;inset:1px;z-index:-1;background:linear-gradient(90deg,#e0d5bd,#d3c6aa);clip-path:var(--chamfer-sm)}
.codex-list a:hover::after{background:#ebe2cc}
.codex-list a[aria-current="page"]::after{background:var(--card-active)}
.codex-list a[aria-current="page"]::before{background:var(--ink-dark)}
.codex-domains a{border-color:var(--border);color:var(--muted);background:rgba(255,251,243,.5);border-radius:2px;clip-path:var(--chamfer-sm)}
.codex-domains a[aria-current="page"]{background:var(--card-active);color:var(--ink-dark);border-color:var(--ink-dark)}
.codex-panel h2{color:var(--muted)}

/* ---------- badges, buttons ---------- */
.status-badge{border-radius:2px;border:1px solid var(--rule);background:rgba(255,251,243,.55);color:var(--ink-dark);font-weight:600;letter-spacing:.02em}
.status-current,.status-active{background:rgba(44,99,168,.10);color:#234f86;border-color:#5f83b5}
.status-blocked,.status-danger,.status-rejected{background:rgba(168,60,53,.10);color:#8d2f29;border-color:#c26a63}
.status-complete,.status-validated,.status-approved{background:rgba(47,122,88,.12);color:#245f45;border-color:#5f9c80}
.status-next,.status-pending{background:rgba(107,111,118,.10);color:#4f545b;border-color:#9a9fa6}
.status-proposal{color:#4d5f8a;border-color:#8b97c0;background:rgba(77,111,158,.08)}
.status-ready{color:#4f545b;border-color:#9a9fa6}
.status-superseded{color:#7a6d86;border-color:#a99dba;background:transparent}
.status-legacy{color:#7a6d86;border-color:#a99dba}
.status-pending.status-badge,.status-research-required{color:#7c560e;border-color:#c39a4a;background:rgba(162,111,18,.10)}
.primary-action{background:var(--ink-dark);color:#f4efe5;border-radius:2px;clip-path:var(--chamfer-sm);border:0}
.primary-action:hover{background:#3d3327}
.secondary-action{background:rgba(255,251,243,.55);border:1px solid var(--rule);color:var(--ink-dark);border-radius:2px;clip-path:var(--chamfer-sm)}
.secondary-action:hover{background:var(--card-active)}
kbd{color:var(--muted)}
input[type="search"],select,textarea{background:rgba(255,251,243,.7);border:1px solid var(--rule);color:var(--text);border-radius:3px}

/* ---------- footer → hint bar ---------- */
footer{border-top:1px solid var(--rule);color:var(--muted);background:linear-gradient(180deg,rgba(236,229,213,.0),rgba(214,203,180,.55));font-size:.82rem}
footer>span{display:inline-flex;align-items:center;gap:.5rem}
footer>span::before{content:"";width:16px;height:16px;border:1px solid var(--rule);border-radius:50%;background:radial-gradient(circle,var(--accent) 0 28%,transparent 32%);flex:none}

/* ---------- dialogs, drawer, mobile ---------- */
.search-dialog,.decision-dialog,.mobile-drawer[open]{background:#efe8d7;color:var(--text);border:1px solid var(--rule);border-radius:4px;box-shadow:var(--shadow)}
.search-dialog::backdrop,.mobile-drawer::backdrop,.decision-dialog::backdrop{background:rgba(60,45,20,.45);backdrop-filter:blur(4px)}
.search-results [role="option"],.search-results a{border-color:var(--border)}
.mobile-drawer a{border-bottom:1px solid var(--border);color:var(--ink-dark)}
.mobile-bottom-nav a,.mobile-bottom-nav button{color:var(--muted)}
.mobile-bottom-nav a[aria-current="page"]{color:var(--ink-dark);background:var(--card-active);border:1px solid var(--rule)}
.route-loading,.route-error{color:var(--muted)}
.skip-link{background:var(--ink-dark);color:#f4efe5}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* Firefox has no clip-path issue; but keep chamfers off for forced-colors users */
@media (forced-colors:active){.primary-nav a::before,.primary-nav a::after,.nav-group summary::before,.nav-group summary::after,.codex-list a::before,.codex-list a::after{display:none}}

/* ---------- 0.40c fixes after first visual pass ---------- */
/* status hero: parchment, not the old dark gradient */
.project-status-hero{background:linear-gradient(135deg,rgba(255,251,243,.75),rgba(205,191,162,.55));border-color:var(--border);border-inline-start:5px solid var(--accent);border-radius:var(--radius);box-shadow:0 1px 0 rgba(255,255,255,.55) inset}
.project-status-hero h2,.project-status-hero p{color:var(--text)}
/* execution steps: number chip is a dark square (codex-like); the status badge is ALSO a direct-child span in app.css — restore it */
.execution-path li>span,.roadmap-step .step-no{background:var(--ink-dark);color:#f4efe5;border-radius:1px}
.execution-path li>span.status-badge{width:auto;height:auto;display:inline-flex;padding:.28rem .6rem;font-size:.72rem;justify-self:start;background:rgba(255,251,243,.55);color:var(--ink-dark);border:1px solid var(--rule)}
.execution-path li>span.status-badge.status-complete{color:#245f45;border-color:#5f9c80;background:rgba(47,122,88,.12)}
.execution-path li>span.status-badge.status-current{color:#234f86;border-color:#5f83b5;background:rgba(44,99,168,.10)}
.execution-path li>span.status-badge.status-review{color:#315f67;border-color:#477b83;background:rgba(49,95,103,.10)}
.execution-path li>span.status-badge.status-blocked{color:#8d2f29;border-color:#c26a63;background:rgba(168,60,53,.10)}
.execution-path li>span.status-badge.status-next{color:#4f545b;border-color:#9a9fa6;background:rgba(107,111,118,.10)}
.execution-path li{background:rgba(255,251,243,.55);border-color:var(--border);border-radius:var(--radius)}
.execution-path li.current{background:rgba(176,140,80,.14);border-color:var(--accent)}
.execution-path li.done{border-color:#5f9c80}.execution-path li.blocked{border-color:#c26a63}
/* category cards: darker "silhouette" thumbnail strip on the end side + chevron on the start side */
.nav-group summary{padding-inline-start:2.1rem}
.nav-group summary::after{
  background:
    conic-gradient(from -45deg at 50% 18%,var(--ink-dark) 0 90deg,transparent 0) no-repeat calc(100% - .85rem) 50% / 11px 11px,
    linear-gradient(90deg,transparent 0 34%,var(--card-line) 34% calc(34% + 1px),transparent calc(34% + 1px)) ,
    linear-gradient(90deg,rgba(0,0,0,0) 0 34%,var(--card-2) 34%),
    radial-gradient(75% 65% at 8% 105%,rgba(60,45,25,.62),transparent 70%),
    radial-gradient(55% 50% at 26% 105%,rgba(60,45,25,.5),transparent 70%),
    radial-gradient(40% 40% at 16% -10%,rgba(255,250,240,.75),transparent 70%),
    linear-gradient(180deg,#d6c9ad,#a89570);
  background-repeat:no-repeat;
}
.nav-group[open] summary::after{
  background:
    conic-gradient(from 135deg at 50% 82%,var(--ink-dark) 0 90deg,transparent 0) no-repeat calc(100% - .85rem) 50% / 11px 11px,
    linear-gradient(90deg,transparent 0 34%,var(--card-line) 34% calc(34% + 1px),transparent calc(34% + 1px)) ,
    linear-gradient(90deg,rgba(0,0,0,0) 0 34%,var(--card-2) 34%),
    radial-gradient(75% 65% at 8% 105%,rgba(60,45,25,.62),transparent 70%),
    radial-gradient(55% 50% at 26% 105%,rgba(60,45,25,.5),transparent 70%),
    radial-gradient(40% 40% at 16% -10%,rgba(255,250,240,.75),transparent 70%),
    linear-gradient(180deg,#d6c9ad,#a89570);
  background-repeat:no-repeat;
}
.nav-group summary:hover::after{filter:brightness(1.04)}

/* category summary: bevel on the element itself, real triangle chevron on the start side */
.nav-group summary{clip-path:var(--chamfer);background:var(--card-line);outline:none}
.nav-group summary:focus-visible{box-shadow:inset 0 0 0 2px var(--focus)}
.nav-group summary::before{content:"";position:absolute;inset:auto;right:.95rem;top:50%;width:0;height:0;z-index:1;background:transparent;clip-path:none;border-left:5px solid transparent;border-right:5px solid transparent;border-top:7px solid var(--ink-dark);border-bottom:0;transform:translateY(-50%)}
.nav-group[open] summary::before{border-top:0;border-bottom:7px solid var(--ink-dark)}
.nav-group summary::after,.nav-group[open] summary::after{
  background:
    linear-gradient(90deg,transparent 0 34%,var(--card-line) 34% calc(34% + 1px),transparent calc(34% + 1px)),
    linear-gradient(90deg,rgba(0,0,0,0) 0 34%,var(--card-2) 34%),
    radial-gradient(75% 65% at 8% 105%,rgba(60,45,25,.62),transparent 70%),
    radial-gradient(55% 50% at 26% 105%,rgba(60,45,25,.5),transparent 70%),
    radial-gradient(40% 40% at 16% -10%,rgba(255,250,240,.75),transparent 70%),
    linear-gradient(180deg,#d6c9ad,#a89570);
  background-repeat:no-repeat;
}