/* Malolo, Inc. — layout concept: a quiet editorial shell (header, tab row,
   content well, footer) that gets out of the way of whatever tab is open,
   so the embedded Procurement Academy can feel like its own place inside it. */
:root{
  --bg:#eef1ee; --surface:#ffffff; --surface2:#e3e8e2; --ink:#16201c; --muted:#5b6b63;
  --accent:#ff6b4a; --accent-ink:#2a0f08; --accent2:#ffb703; --accent2-ink:#2a1d00;
  --line:#d8ddd7; --line-strong:#c2c9c0; --good:#1f7a5c;
  --shadow:0 1px 2px rgba(20,24,18,.05), 0 10px 28px -18px rgba(20,24,18,.28);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0d1512; --surface:#141f1a; --surface2:#1a2621; --ink:#eef3ef; --muted:#93a89d;
    --accent:#ff7a57; --accent-ink:#1f0a04; --accent2:#ffc94d; --accent2-ink:#241900;
    --line:#233029; --line-strong:#2d3c33; --good:#4fd3a6;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 14px 32px -18px rgba(0,0,0,.6);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0d1512; --surface:#141f1a; --surface2:#1a2621; --ink:#eef3ef; --muted:#93a89d;
  --accent:#ff7a57; --accent-ink:#1f0a04; --accent2:#ffc94d; --accent2-ink:#241900;
  --line:#233029; --line-strong:#2d3c33; --good:#4fd3a6;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 14px 32px -18px rgba(0,0,0,.6);
  color-scheme:dark;
}

*{ box-sizing:border-box; }
body{ background:var(--bg); color:var(--ink); font-family:'Work Sans',system-ui,sans-serif; }
#site{ display:flex; flex-direction:column; min-height:100%; }
h1,h2,h3{ font-family:'Bricolage Grotesque',system-ui,sans-serif; font-weight:700; letter-spacing:-.01em; text-wrap:balance; margin:0 0 .35em; color:var(--ink); }
h1{ font-size:2.1rem; } h2{ font-size:1.5rem; } h3{ font-size:1.1rem; }
p{ line-height:1.6; margin:0 0 .9em; max-width:62ch; }
.muted{ color:var(--muted); }
a{ color:var(--accent); }
.mono{ font-family:'IBM Plex Mono',ui-monospace,monospace; font-variant-numeric:tabular-nums; }

/* ---------- top bar ---------- */
.topbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 24px; flex-wrap:wrap; max-width:1040px; margin:0 auto; width:100%; }
.brand{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:1.25rem; display:flex; align-items:center; gap:8px; }
.brand .dot{ width:10px; height:10px; border-radius:50%; background:var(--accent); display:inline-block; }
.tabs{ display:flex; gap:4px; background:var(--surface); border:1px solid var(--line); border-radius:99px; padding:4px; }
.tabbtn{ border:0; background:none; padding:9px 16px; border-radius:99px; font-family:'Work Sans',sans-serif; font-weight:600; font-size:.88rem; color:var(--muted); cursor:pointer; }
.tabbtn.active{ background:var(--accent); color:var(--accent-ink); }

main{ flex:1; width:100%; }
.panel{ max-width:1040px; margin:0 auto; padding:8px 24px 60px; }
.panel[hidden]{ display:none; }

/* ---------- home ---------- */
.hero{ padding:34px 0 10px; }
.eyebrow{ font-family:'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:.12em; font-size:.72rem; color:var(--accent); font-weight:600; margin-bottom:10px; display:inline-block; }
.hero h1{ max-width:16ch; }
.hero p.lead{ font-size:1.12rem; max-width:52ch; color:var(--muted); }
.herorow{ display:flex; gap:14px; flex-wrap:wrap; margin-top:18px; }

.teaserrow{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:34px; }
.teaser{ background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:20px; cursor:pointer; box-shadow:var(--shadow); }
.teaser:hover{ border-color:var(--accent); }
.teaser .ticon{ font-size:1.4rem; margin-bottom:10px; }
.teaser h3{ margin-bottom:6px; }
.teaser p{ font-size:.88rem; margin:0; }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; gap:8px; background:var(--accent); color:var(--accent-ink); border:0; border-radius:10px;
  padding:12px 20px; font-weight:700; font-size:.92rem; cursor:pointer; font-family:'Work Sans',sans-serif; text-decoration:none; }
.btn.alt{ background:var(--surface); color:var(--ink); border:1px solid var(--line-strong); }
.btn.small{ padding:8px 14px; font-size:.8rem; border-radius:8px; }
.btn:disabled{ opacity:.45; cursor:not-allowed; }

/* ---------- projects ---------- */
.projgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:22px; }
.projcard{ background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:24px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:10px; }
.projhead{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.projicon{ font-size:1.6rem; width:46px; height:46px; display:flex; align-items:center; justify-content:center; background:var(--surface2); border-radius:12px; flex-shrink:0; }
.status{ font-size:.68rem; font-weight:700; padding:4px 10px; border-radius:99px; letter-spacing:.03em; white-space:nowrap; }
.status.dev{ background:var(--accent2); color:var(--accent2-ink); }
.status.testing{ background:#4fd3a633; color:var(--good); border:1px solid var(--good); }
.status.shelved{ background:var(--surface2); color:var(--muted); }
.status.live{ background:var(--accent); color:var(--accent-ink); }
.projcard p{ font-size:.92rem; margin:0; }
.projmeta{ font-size:.78rem; color:var(--muted); margin-top:auto; padding-top:8px; border-top:1px dashed var(--line); }

/* ---------- blog ---------- */
.blogtop{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:10px; }
.postlist{ display:flex; flex-direction:column; gap:12px; margin-top:16px; }
.postcard{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:18px 20px; cursor:pointer; box-shadow:var(--shadow); }
.postcard:hover{ border-color:var(--accent); }
.postdate{ font-size:.74rem; color:var(--muted); font-family:'IBM Plex Mono',monospace; margin-bottom:4px; }
.postexcerpt{ font-size:.88rem; color:var(--muted); margin:6px 0 0; }
.postfull{ background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:28px; box-shadow:var(--shadow); }
.postbody{ white-space:pre-wrap; line-height:1.7; }
.postactions{ display:flex; gap:8px; margin-top:18px; }
.emptystate{ text-align:center; padding:50px 20px; color:var(--muted); border:1.5px dashed var(--line-strong); border-radius:16px; margin-top:16px; }
.editorform{ background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:22px; margin-top:16px; display:flex; flex-direction:column; gap:12px; box-shadow:var(--shadow); }
.editorform input, .editorform textarea{ width:100%; padding:11px 13px; border-radius:9px; border:1.5px solid var(--line); background:var(--bg); color:var(--ink); font-family:'Work Sans',sans-serif; font-size:.95rem; }
.editorform input{ font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:1.1rem; }
.editorform textarea{ min-height:220px; resize:vertical; font-size:.92rem; line-height:1.6; }
.editorbtns{ display:flex; gap:10px; }

/* ---------- academy mount ---------- */
/* academy.css (loaded after this file) owns all #academy-root sizing/background */
#panel-academy{ padding:0; max-width:none; }

/* ---------- footer ---------- */
.sitefoot{ text-align:center; padding:26px; font-size:.78rem; color:var(--muted); border-top:1px solid var(--line); }

@media (max-width:760px){
  .teaserrow{ grid-template-columns:1fr; }
  .projgrid{ grid-template-columns:1fr; }
  .topbar{ flex-direction:column; align-items:stretch; }
  .tabs{ justify-content:space-between; }
  .tabbtn{ flex:1; text-align:center; padding:9px 8px; }
  h1{ font-size:1.7rem; }
}