/* ==========================================================================
   AMS ABAP Knowledge Base - stylesheet (Design 1 "Fiori Light")
   ========================================================================== */

:root{
  --blue:#0a6ed1;
  --blue-dark:#0854a0;
  --blue-light:#eaf3fc;
  --ink:#32363a;
  --muted:#6a6d70;
  --faint:#8c8f92;
  --line:#e5e5e5;
  --bg:#f5f6f7;
  --card:#ffffff;
  --green:#107e3e;
  --amber:#e9730c;
  --red:#bb0000;
  --mono:Consolas,"Cascadia Mono","Courier New",monospace;
  --radius:8px;
  --shadow:0 1px 3px rgba(0,0,0,.05);
  --shadow-hi:0 6px 18px rgba(10,110,209,.16);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:15px/1.6 "Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}

/* ---------- top bar ---------------------------------------------------- */
.topbar{
  background:var(--blue-dark);color:#fff;height:48px;
  display:flex;align-items:center;gap:16px;padding:0 24px;
  position:sticky;top:0;z-index:30;
}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:16px;color:#fff}
.brand:hover{text-decoration:none}
.brand .logo{
  width:26px;height:26px;border-radius:4px;background:#fff;color:var(--blue-dark);
  display:grid;place-items:center;font-weight:700;font-size:11px;flex:none;
}
.topnav{margin-left:auto;display:flex;gap:4px}
.topnav a{color:#cfe3f7;padding:6px 14px;border-radius:4px;font-size:14px}
.topnav a.on,.topnav a:hover{background:rgba(255,255,255,.15);color:#fff;text-decoration:none}

/* ---------- hero ------------------------------------------------------- */
.hero{
  background:linear-gradient(180deg,var(--blue) 0%,#1a84e2 100%);
  color:#fff;padding:40px 24px 52px;text-align:center;
}
.hero.slim{padding:28px 24px 40px}
.hero h1{margin:0 0 6px;font-size:28px;font-weight:600;letter-spacing:-.3px}
.hero.slim h1{font-size:22px}
.hero p{margin:0 0 22px;opacity:.9;font-size:15px}

.searchwrap{max-width:640px;margin:0 auto;position:relative}
.searchwrap input{
  width:100%;height:46px;border:0;border-radius:6px;padding:0 76px 0 16px;
  font-size:15px;box-shadow:0 4px 14px rgba(0,0,0,.18);outline:none;color:var(--ink);
  font-family:inherit;
}
.searchwrap .ico{position:absolute;right:16px;top:12px;opacity:.4;font-size:16px;pointer-events:none}
.searchwrap .clear{
  position:absolute;right:40px;top:11px;width:24px;height:24px;border:0;background:#eceff1;
  border-radius:50%;cursor:pointer;color:var(--muted);font-size:15px;line-height:1;display:none;
}
.searchwrap .clear:hover{background:#dfe3e6;color:var(--ink)}
.searchwrap.has-value .clear{display:block}

/* ---------- layout ----------------------------------------------------- */
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.wrap.pull{margin-top:-28px}
.pad-top{padding-top:28px}

.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:34px 4px 14px}
.sec-head h2{margin:0;font-size:17px;font-weight:600}
.sec-head .right{font-size:13px;color:var(--muted);white-space:nowrap}

/* ---------- stats ------------------------------------------------------ */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.stat{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 16px;box-shadow:var(--shadow);
}
.stat b{display:block;font-size:22px;font-weight:600;color:var(--blue);line-height:1.3}
.stat span{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}

/* ---------- toolbar (posts.html) --------------------------------------- */
.toolbar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:12px 14px;box-shadow:var(--shadow);margin-bottom:6px;
}
.chips{display:flex;gap:7px;flex-wrap:wrap}
.chip{
  font-size:12.5px;border:1px solid var(--line);background:#fafbfc;color:var(--muted);
  padding:4px 12px;border-radius:14px;cursor:pointer;font-family:inherit;
}
.chip:hover{border-color:#b9d7f3;color:var(--blue)}
.chip.on{background:var(--blue-light);border-color:#b9d7f3;color:var(--blue-dark);font-weight:600}
.toolbar .spacer{flex:1}
.toolbar label{font-size:13px;color:var(--muted)}
.toolbar select{
  border:1px solid var(--line);border-radius:5px;padding:5px 8px;font-size:13px;
  background:#fff;color:var(--ink);font-family:inherit;cursor:pointer;
}

/* ---------- cards ------------------------------------------------------ */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;box-shadow:var(--shadow);transition:.15s;
  display:flex;flex-direction:column;min-height:148px;color:inherit;
}
.card:hover{
  box-shadow:var(--shadow-hi);transform:translateY(-2px);border-color:#b9d7f3;
  text-decoration:none;
}
.card:hover h3{color:var(--blue)}
.card h3{margin:10px 0 6px;font-size:15.5px;font-weight:600;line-height:1.35;transition:.15s}
.card p{
  margin:0;color:var(--muted);font-size:13.5px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.card .meta{
  margin-top:auto;padding-top:12px;font-size:11.5px;color:var(--faint);
  display:flex;justify-content:space-between;gap:10px;font-family:var(--mono);
}
.card .meta span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.tag{
  display:inline-block;font-size:11px;font-weight:600;letter-spacing:.3px;
  background:var(--blue-light);color:var(--blue-dark);padding:2px 8px;border-radius:10px;
  align-self:flex-start;
}
mark{background:#fff3b0;color:inherit;border-radius:2px;padding:0 1px}

/* ---------- states ----------------------------------------------------- */
.empty{
  background:var(--card);border:1px dashed #cfd4d9;border-radius:var(--radius);
  padding:44px 24px;text-align:center;color:var(--muted);
}
.empty b{display:block;color:var(--ink);font-size:16px;margin-bottom:6px}
.empty code{font-family:var(--mono);background:#f0f2f4;padding:2px 6px;border-radius:3px;font-size:13px}

.loading{padding:40px 10px;text-align:center;color:var(--muted);font-size:14px}
.spinner{
  width:22px;height:22px;border:2.5px solid #d6e4f2;border-top-color:var(--blue);
  border-radius:50%;animation:spin .7s linear infinite;margin:0 auto 12px;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- post page -------------------------------------------------- */
.post{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:34px 44px 40px;box-shadow:var(--shadow);max-width:880px;margin:0 auto;
}
.crumb{font-size:13px;color:var(--muted);margin-bottom:18px}
.crumb a{color:var(--blue)}
.post h1{
  font-size:26px;margin:0 0 4px;font-weight:600;line-height:1.3;
  border-left:4px solid var(--blue);padding-left:14px;
}
.post .sub{
  padding-left:18px;color:var(--muted);font-size:12.5px;margin-bottom:26px;
  font-family:var(--mono);
}

/* rendered markdown */
.md h2{font-size:19px;margin:30px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--line);font-weight:600}
.md h3{font-size:16.5px;margin:24px 0 8px;font-weight:600}
.md h4{font-size:15px;margin:20px 0 6px;font-weight:600;color:var(--muted)}
.md p{margin:0 0 14px}
.md ul,.md ol{margin:0 0 14px;padding-left:24px}
.md li{margin-bottom:5px}
.md li>ul,.md li>ol{margin:5px 0 0}
.md hr{border:0;border-top:1px solid var(--line);margin:26px 0}
.md a{color:var(--blue)}
.md img{border:1px solid var(--line);border-radius:6px;margin:4px 0 14px;display:block}
.md blockquote{
  margin:0 0 16px;padding:12px 16px;background:var(--blue-light);
  border-left:3px solid var(--blue);border-radius:0 4px 4px 0;
}
.md blockquote p:last-child{margin-bottom:0}

/* GitHub style alerts:  > [!NOTE] / [!TIP] / [!IMPORTANT] / [!WARNING] / [!CAUTION] */
.md .alert{
  margin:0 0 16px;padding:12px 16px;border-radius:6px;
  border:1px solid transparent;border-left-width:4px;
}
.md .alert > :last-child{margin-bottom:0}
.md .alert-title{
  display:flex;align-items:center;gap:8px;margin:0 0 6px;
  font-weight:600;font-size:14px;line-height:1.3;
}
.md .alert-title svg{flex:none;fill:currentColor}

.md .alert-note{background:#ddf4ff;border-color:#54aeff;border-left-color:#0969da;color:#1f2328}
.md .alert-note .alert-title{color:#0550ae}

.md .alert-tip{background:#dafbe1;border-color:#4ac26b;border-left-color:#1a7f37;color:#1f2328}
.md .alert-tip .alert-title{color:#116329}

.md .alert-important{background:#fbefff;border-color:#c297ff;border-left-color:#8250df;color:#1f2328}
.md .alert-important .alert-title{color:#6639ba}

.md .alert-warning{background:#fff8c5;border-color:#d4a72c;border-left-color:#9a6700;color:#1f2328}
.md .alert-warning .alert-title{color:#7d4e00}

.md .alert-caution{background:#ffebe9;border-color:#ff8182;border-left-color:#cf222e;color:#1f2328}
.md .alert-caution .alert-title{color:#a40e26}

/* code and inline code stay readable on the tinted backgrounds */
.md .alert code{background:rgba(0,0,0,.06);color:inherit}
.md .alert pre{background:rgba(255,255,255,.65)}
.md table{border-collapse:collapse;width:100%;margin:0 0 18px;font-size:14px}
.md th,.md td{border:1px solid var(--line);padding:7px 11px;text-align:left;vertical-align:top}
.md th{background:#f7f8f9;font-weight:600}
.md tr:nth-child(even) td{background:#fcfcfd}
.md code{
  background:#f0f2f4;padding:2px 6px;border-radius:3px;font-size:13px;
  font-family:var(--mono);color:#b02a37;
}
.md kbd{
  font-family:var(--mono);font-size:12px;border:1px solid #c9ced3;border-bottom-width:2px;
  border-radius:4px;padding:1px 6px;background:#fafbfc;
}

/* code blocks */
.codewrap{position:relative;margin:0 0 16px}
.codewrap .lang{
  position:absolute;top:0;right:0;font:10px var(--mono);color:var(--faint);
  background:#f0f2f4;border-left:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:3px 9px;border-radius:0 3px 0 4px;text-transform:uppercase;letter-spacing:.6px;
}
.codewrap .copy{
  position:absolute;top:6px;right:52px;font:11px/1 inherit;border:1px solid var(--line);
  background:#fff;color:var(--muted);border-radius:4px;padding:4px 9px;cursor:pointer;
  opacity:0;transition:.15s;font-family:inherit;
}
.codewrap:hover .copy{opacity:1}
.codewrap .copy:hover{border-color:var(--blue);color:var(--blue)}
.codewrap .copy.done{color:var(--green);border-color:var(--green)}
.md pre{
  background:#fafbfc;border:1px solid var(--line);border-left:3px solid var(--blue);
  border-radius:4px;padding:14px 16px;overflow:auto;font-size:13px;line-height:1.6;
  font-family:var(--mono);margin:0;
}
.md pre code{background:0;padding:0;color:#24292f;font-size:13px}

/* ABAP / generic syntax colours */
.kw{color:#0a6ed1;font-weight:600}
.str{color:#0a7d3c}
.cmt{color:#8c8f92;font-style:italic}
.num{color:#b02a37}

/* ---------- guide page -------------------------------------------------- */
.guide{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:30px 40px 38px;box-shadow:var(--shadow);max-width:960px;margin:0 auto 16px;
}
.guide > h2:first-child{margin-top:0}
.guide h2{
  font-size:20px;margin:36px 0 6px;padding-bottom:8px;border-bottom:2px solid var(--blue-light);
  font-weight:600;
}
.guide h3{font-size:16px;margin:22px 0 7px;font-weight:600}
.guide p{margin:0 0 13px}
.guide > p.intro{color:var(--muted);font-size:15.5px;margin-bottom:4px}
.guide ul,.guide ol{padding-left:22px;margin:0 0 14px}
.guide li{margin-bottom:5px}
.guide code{
  background:#f0f2f4;padding:2px 6px;border-radius:3px;font-size:13px;
  font-family:var(--mono);color:#b02a37;
}
.guide table{border-collapse:collapse;width:100%;margin:0 0 18px;font-size:14px}
.guide th,.guide td{border:1px solid var(--line);padding:7px 11px;text-align:left;vertical-align:top}
.guide th{background:#f7f8f9;font-weight:600}

/* numbered workflow */
.steps{list-style:none;counter-reset:step;padding:0;margin:0 0 8px;display:grid;gap:10px}
.steps li{
  counter-increment:step;position:relative;padding:13px 16px 13px 52px;
  background:#fafbfc;border:1px solid var(--line);border-radius:6px;margin:0;
}
.steps li:before{
  content:counter(step);position:absolute;left:15px;top:12px;width:24px;height:24px;
  background:var(--blue);color:#fff;border-radius:50%;display:grid;place-items:center;
  font-size:13px;font-weight:600;
}
.steps b{display:block;margin-bottom:2px}
.steps span{color:var(--muted);font-size:13.5px}

/* "you write" / "you get" comparison */
.cheat{
  display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);
  border-radius:6px;overflow:hidden;margin:0 0 16px;background:#fff;
}
.cheat-col{min-width:0;display:flex;flex-direction:column}
.cheat-col + .cheat-col{border-left:1px solid var(--line)}
.cheat-head{
  font:10.5px var(--mono);text-transform:uppercase;letter-spacing:.8px;color:var(--faint);
  background:#f7f8f9;border-bottom:1px solid var(--line);padding:5px 14px;
}
.cheat-src{
  margin:0;padding:14px;background:#fafbfc;font:12.5px/1.6 var(--mono);color:#24292f;
  flex:1;white-space:pre-wrap;overflow-wrap:anywhere;
}
.cheat-out{padding:14px 16px;flex:1}
.cheat-out > :last-child{margin-bottom:0}
.cheat-out p{margin:0 0 10px}
.cheat-note{
  font-size:13.5px;color:var(--muted);margin:-8px 0 18px;padding-left:2px;
}
.cheat-note b{color:var(--ink)}

/* download button */
.dl{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:var(--blue-light);border:1px solid #b9d7f3;border-radius:var(--radius);
  padding:20px 24px;margin-top:10px;
}
.dl .txt{flex:1;min-width:220px}
.dl .txt b{display:block;font-size:16px;margin-bottom:3px}
.dl .txt span{color:var(--muted);font-size:13.5px}
.btn{
  display:inline-flex;align-items:center;gap:8px;background:var(--blue);color:#fff;
  border:0;border-radius:6px;padding:11px 20px;font:600 14px inherit;cursor:pointer;
  font-family:inherit;box-shadow:0 1px 3px rgba(10,110,209,.3);transition:.15s;
}
.btn:hover{background:var(--blue-dark);text-decoration:none;box-shadow:0 4px 12px rgba(10,110,209,.35)}
.btn:active{transform:translateY(1px)}
.btn svg{fill:currentColor}
.btn.done{background:var(--green)}

@media(max-width:820px){
  .cheat{grid-template-columns:1fr}
  .cheat-col + .cheat-col{border-left:0;border-top:1px solid var(--line)}
  .guide{padding:22px 18px 28px}
}

/* ---------- footer ----------------------------------------------------- */
footer.site{
  border-top:1px solid var(--line);margin-top:56px;padding:22px 24px 40px;
  color:var(--faint);font-size:12.5px;
}
footer.site .inner{
  max-width:1080px;margin:0 auto;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
}

/* ---------- responsive ------------------------------------------------- */
@media(max-width:900px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .post{padding:26px 24px 32px}
}
@media(max-width:620px){
  .grid{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .topbar{padding:0 14px;gap:8px}
  .topnav a{padding:6px 9px;font-size:13px}
  .brand span.full{display:none}
  .wrap{padding:0 14px}
  .hero{padding:30px 16px 46px}
}

/* ---------- print ------------------------------------------------------ */
@media print{
  .topbar,.codewrap .copy,footer.site,.crumb{display:none}
  body{background:#fff}
  .post{border:0;box-shadow:none;padding:0;max-width:none}
}