/* ============ Lab notebook theme ============ */
:root {
  --paper: #f6f3ea;
  --paper-2: #efeadc;
  --ink: #1c1b19;
  --ink-soft: #5b574e;
  --grid: rgba(28, 27, 25, 0.06);
  --accent: var(--lab-accent, #ff5a36); /* signal orange (editable in Admin) */
  --accent-2: #2f6bff;    /* ink blue */
  --mark: #e8ff59;        /* highlighter */
  --card: #fffdf7;
  --border: #1c1b19;
  --radius: 14px;
  --shadow: 4px 4px 0 var(--border);
  --font-ar: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', 'Segoe UI', 'Geeza Pro', Tahoma, system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: light;
}
[data-theme='dark'] {
  --paper: #121311;
  --paper-2: #1a1c19;
  --ink: #ecebe4;
  --ink-soft: #a7a498;
  --grid: rgba(236, 235, 228, 0.05);
  --card: #1b1d1a;
  --border: #ecebe4;
  --mark: #c6dd2c;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-ar);
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 28px 28px;
  line-height: 1.85;
  font-size: 1.05rem;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration-color: var(--accent); text-underline-offset: 4px; }
a:hover { color: var(--accent); }
img { max-width: 100%; height: auto; }
::selection { background: var(--mark); color: #111; }

.wrap { width: min(1080px, 92vw); margin-inline: auto; }
.mono { font-family: var(--font-mono); letter-spacing: 0.02em; }
.mark { background: linear-gradient(transparent 55%, var(--mark) 55%); padding-inline: 0.15em; color: inherit; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 10; backdrop-filter: blur(6px);
  background: color-mix(in srgb, var(--paper) 82%, transparent); border-bottom: 1.5px solid var(--border); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.8rem; }
.brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; font-weight: 700; font-size: 1.1rem; }
.brand .dot { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: 1.5px solid var(--border);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 9px transparent; } }
nav ul { list-style: none; display: flex; gap: 0.3rem; margin: 0; padding: 0; flex-wrap: wrap; }
nav a { display: inline-block; padding: 0.25rem 0.75rem; border-radius: 999px; text-decoration: none; border: 1.5px solid transparent; }
nav a[aria-current='page'] { border-color: var(--border); background: var(--card); }
.theme-btn { font: inherit; cursor: pointer; background: var(--card); color: var(--ink); border: 1.5px solid var(--border);
  border-radius: 999px; padding: 0.2rem 0.7rem; }

/* Hero */
.hero { padding-block: clamp(3rem, 9vw, 6.5rem) 2.5rem; position: relative; }
.hero .label { display: inline-flex; gap: 0.5rem; align-items: center; font-size: 0.8rem; border: 1.5px dashed var(--ink-soft);
  padding: 0.15rem 0.7rem; border-radius: 6px; color: var(--ink-soft); }
.hero h1 { font-size: clamp(2.3rem, 7vw, 4.6rem); line-height: 1.2; margin: 1rem 0 1rem; font-weight: 800; letter-spacing: -0.01em; }
.hero p.lead { font-size: clamp(1.05rem, 2.2vw, 1.3rem); color: var(--ink-soft); max-width: 46ch; margin: 0; }
.hero .stamp { position: absolute; inset-inline-end: 0; top: 3.5rem; width: 150px; aspect-ratio: 1; border-radius: 50%;
  border: 2px solid var(--accent); color: var(--accent); display: grid; place-items: center; text-align: center;
  font-size: 0.72rem; transform: rotate(-12deg); line-height: 1.4; opacity: 0.85; }
@media (max-width: 760px) { .hero .stamp { display: none; } }

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.6rem; }
.chip { font-size: 0.85rem; border: 1.5px solid var(--border); border-radius: 999px; padding: 0.15rem 0.75rem; background: var(--card); }
.chip.hot { background: var(--accent); color: #fff; }

/* Sections */
.section { padding-block: 2rem 3rem; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; border-bottom: 1.5px solid var(--border);
  margin-bottom: 1.5rem; padding-bottom: 0.4rem; }
.section-head h2 { margin: 0; font-size: 1.5rem; }

/* Specimen cards */
.grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.card { position: relative; background: var(--card); border: 1.5px solid var(--border); border-radius: var(--radius);
  padding: 1.2rem 1.25rem 1.1rem; box-shadow: var(--shadow); transition: transform 0.15s ease, box-shadow 0.15s ease;
  text-decoration: none; display: flex; flex-direction: column; gap: 0.5rem; }
.card:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--border); color: inherit; }
.card .meta { display: flex; justify-content: space-between; font-size: 0.78rem; color: var(--ink-soft); }
.card h3 { margin: 0; font-size: 1.2rem; line-height: 1.5; }
.card p { margin: 0; color: var(--ink-soft); font-size: 0.97rem; }
.card .kind { position: absolute; top: -0.75rem; inset-inline-start: 1rem; font-size: 0.72rem; padding: 0.05rem 0.6rem;
  border: 1.5px solid var(--border); border-radius: 6px; background: var(--mark); color: #111; }
.card .kind.experiment { background: var(--accent); color: #fff; }
.card .kind.project { background: var(--accent-2); color: #fff; }

/* Roadmap strip */
.shelf { display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.shelf div { border: 1.5px dashed var(--ink-soft); border-radius: 10px; padding: 0.8rem 1rem; color: var(--ink-soft); font-size: 0.92rem; }
.shelf b { display: block; color: var(--ink); }

/* Prose */
.prose { max-width: 70ch; margin-inline: auto; padding-block: 2.5rem 4rem; }
.prose h1 { font-size: clamp(1.9rem, 5vw, 2.8rem); line-height: 1.3; margin: 0.6rem 0 0.4rem; }
.prose h2 { margin-top: 2.2rem; font-size: 1.45rem; }
.prose blockquote { margin: 1.5rem 0; padding: 0.8rem 1.1rem; border-inline-start: 4px solid var(--accent); background: var(--paper-2); border-radius: 8px; }
.prose code { font-family: var(--font-mono); font-size: 0.9em; background: var(--paper-2); padding: 0.1em 0.35em; border-radius: 4px; direction: ltr; unicode-bidi: isolate; }
.prose pre { direction: ltr; text-align: left; overflow-x: auto; padding: 1rem; border-radius: 10px; border: 1.5px solid var(--border); background: var(--card) !important; }
.prose pre code { background: none; padding: 0; }
.post-meta { color: var(--ink-soft); font-size: 0.85rem; display: flex; gap: 1rem; flex-wrap: wrap; }

/* Forms */
form.contact { display: grid; gap: 0.9rem; max-width: 560px; }
form.contact label { display: grid; gap: 0.3rem; font-weight: 600; }
form.contact input, form.contact textarea { font: inherit; padding: 0.65rem 0.8rem; border-radius: 10px; border: 1.5px solid var(--border);
  background: var(--card); color: var(--ink); }
.btn { font: inherit; font-weight: 700; cursor: pointer; justify-self: start; padding: 0.6rem 1.3rem; border-radius: 999px;
  border: 1.5px solid var(--border); background: var(--accent); color: #fff; box-shadow: var(--shadow); text-decoration: none; display: inline-block; }
.btn:hover { color: #fff; transform: translate(-1px, -1px); }

/* Footer */
.site-footer { border-top: 1.5px solid var(--border); padding-block: 1.6rem; color: var(--ink-soft); font-size: 0.88rem; }
.site-footer .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

.prose pre { color: var(--ink); }
.prose table { width: 100%; border-collapse: collapse; margin: 1.2rem 0; background: var(--card); border: 1.5px solid var(--border); border-radius: 10px; overflow: hidden; }
.prose th, .prose td { padding: 0.55rem 0.9rem; border-bottom: 1px solid color-mix(in srgb, var(--border) 25%, transparent); text-align: start; }
.prose th { background: var(--paper-2); }

/* ============ Grav additions ============ */
.skip { position: absolute; inset-inline-start: 1rem; top: -100px; }
.skip:focus { top: 1rem; z-index: 99; background: var(--card); padding: .4rem .8rem; border: 1.5px solid var(--border); border-radius: 8px; }
.prose ul, .prose ol { padding-inline-start: 1.3rem; }
.prose img { border-radius: 10px; border: 1.5px solid var(--border); }
.prose hr { border: 0; border-top: 1.5px dashed var(--ink-soft); margin: 2rem 0; }
.label-tag { display: inline-block; border: 1.5px dashed var(--ink-soft); padding: .1rem .6rem; border-radius: 6px; font-size: .8rem; color: var(--ink-soft); }
.pager { display: flex; gap: .5rem; justify-content: center; margin-top: 2rem; list-style: none; padding: 0; }
.pager a, .pager span { border: 1.5px solid var(--border); border-radius: 999px; padding: .1rem .7rem; text-decoration: none; background: var(--card); }
.empty { color: var(--ink-soft); border: 1.5px dashed var(--ink-soft); border-radius: 10px; padding: 1rem; }

/* Grav form plugin markup */
.lab-form form { display: grid; gap: 0.9rem; max-width: 560px; }
.lab-form .field, .lab-form .form-field { display: grid; gap: .3rem; margin: 0; }
.lab-form .form-label label, .lab-form label { font-weight: 600; }
.lab-form .form-label .required { color: var(--accent); margin-inline-start: .2rem; }
.lab-form input[type=text], .lab-form input[type=email], .lab-form textarea, .lab-form .input {
  font: inherit; width: 100%; padding: 0.65rem 0.8rem; border-radius: 10px; border: 1.5px solid var(--border); background: var(--card); color: var(--ink); }
.lab-form input:focus, .lab-form textarea:focus { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 1px; }
.lab-form input[type=email] { direction: ltr; text-align: left; }
.lab-form .form-data, .lab-form .form-input-wrapper { width: 100%; }
.lab-form .buttons, .lab-form .button-wrapper { margin-top: .4rem; }
.lab-form .form-errors, .lab-form .form-error, .lab-form .form-message { font-size: .92rem; }
.notices, .form-messages .notice, .alert { border: 1.5px solid var(--border); border-radius: 10px; padding: .7rem 1rem; margin: 1rem 0; background: var(--card); box-shadow: var(--shadow); }
.notices.green, .alert-success, .notice.green, .notices.success { border-inline-start: 6px solid #22a06b; }
.notices.red, .alert-danger, .notice.red, .notices.error { border-inline-start: 6px solid var(--accent); }
.lab-form .form-honeybear, .lab-form .form-honeypot, .lab-form [name="data[website]"] { position: absolute !important; inset: 0 auto auto 0 !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip-path: inset(50%) !important; opacity: 0 !important; pointer-events: none !important; }
.pagination { display: flex; gap: .5rem; justify-content: center; margin-top: 2rem; list-style: none; padding: 0; }
.pagination a, .pagination span { display: inline-block; border: 1.5px solid var(--border); border-radius: 999px; padding: .1rem .75rem; text-decoration: none; background: var(--card); }
.pagination .active { background: var(--accent); color: #fff; }

html, body { overflow-x: clip; }