/* =========================================================================
   FILE: microservices/ms.css
   PURPOSE: The look of every /microservices/ page (showcase, pricing,
            dashboard). Neutral on purpose; see the note below.
   ========================================================================= */

/* Neutral on purpose (Jack, 4 Oct 2026): technical pages read best like
   the docs of comparable APIs, white and grey with one accent. Bloodweb's
   violet is that accent; the purple-on-black site theme is not used here. */
:root{
  --ms-bg:#ffffff; --ms-soft:#f7f7f8; --ms-card:#ffffff; --ms-line:#e4e4e7; --ms-line-2:#d4d4d8;
  --ms-text:#18181b; --ms-muted:#52525b; --ms-faint:#71717a;
  --ms-accent:#7c3aed; --ms-accent-soft:#f3effe; --ms-on-accent:#ffffff;
  --ms-icon:#3f3f46; --ms-icon-bg:#f4f4f5;
  --ms-code-bg:#18181b; --ms-code-text:#e4e4e7;
  --ms-shadow:0 1px 2px rgba(0,0,0,.04), 0 6px 16px rgba(0,0,0,.05);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root{
    --ms-bg:#0b0b0c; --ms-soft:#111113; --ms-card:#141416; --ms-line:#27272a; --ms-line-2:#3f3f46;
    --ms-text:#f4f4f5; --ms-muted:#a1a1aa; --ms-faint:#8b8b94;
    --ms-accent:#a78bfa; --ms-accent-soft:rgba(167,139,250,.12); --ms-on-accent:#0b0b0c;
    --ms-icon:#d4d4d8; --ms-icon-bg:#1f1f23;
    --ms-code-bg:#18181b; --ms-code-text:#e4e4e7;
    --ms-shadow:none;
    color-scheme:dark;
  }
}
*{box-sizing:border-box}
body{margin:0; background:var(--ms-bg); color:var(--ms-text);
  font:400 16px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing:antialiased}
a{color:var(--ms-accent); text-underline-offset:2px}
code, pre{font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace}
:focus-visible{outline:2px solid var(--ms-accent); outline-offset:2px}

/* Header and footer */
.ms-top{position:sticky; top:0; z-index:5; background:color-mix(in srgb, var(--ms-bg) 88%, transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--ms-line)}
.ms-top-in{max-width:1040px; margin:0 auto; padding:0 16px; height:60px; display:flex; align-items:center; gap:24px}
.ms-brand{display:flex; align-items:center; gap:9px; color:var(--ms-text); text-decoration:none; font-weight:700; letter-spacing:-.2px}
.ms-brand img{border-radius:7px}
.ms-brand-sub{font-weight:500; color:var(--ms-faint)}
.ms-nav{display:flex; gap:20px; margin-left:8px}
.ms-nav a{color:var(--ms-muted); text-decoration:none; font-size:14.5px; font-weight:500}
.ms-nav a:hover, .ms-nav a[aria-current="page"]{color:var(--ms-text)}
.ms-btn{margin-left:auto; display:inline-block; padding:7px 14px; border-radius:8px; font-size:14px; font-weight:600; text-decoration:none;
  background:var(--ms-text); color:var(--ms-bg)}
.ms-btn:hover{opacity:.88}
.ms-foot{border-top:1px solid var(--ms-line); margin-top:24px}
.ms-foot-in{max-width:1040px; margin:0 auto; padding:22px 16px 32px; display:flex; flex-wrap:wrap; gap:8px 20px; color:var(--ms-faint); font-size:13.5px}
.ms-foot-in a{color:var(--ms-muted); text-decoration:none}
.ms-foot-in a:hover{color:var(--ms-text)}
.ms-foot-links{margin-left:auto; display:flex; gap:18px}

.ms-wrap{max-width:1040px; margin:0 auto; padding:44px 16px 56px}
.ms-narrow{max-width:760px}
.ms-wrap h1{font-size:clamp(28px,4.5vw,40px); margin:0 0 10px; font-weight:700; letter-spacing:-.8px; line-height:1.15}
.ms-wrap h2{font-size:18px; margin:36px 0 10px; font-weight:650; letter-spacing:-.2px}
.ms-wrap p{line-height:1.6}
.ms-lead{color:var(--ms-muted); margin:0 0 28px; line-height:1.55; font-size:17.5px; max-width:640px}
.ms-links{display:flex; gap:18px; flex-wrap:wrap; margin:-10px 0 30px; font-weight:600; font-size:15px}

/* Service tiles */
.ms-apps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px}
.ms-apps a{aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; padding:12px 10px; text-align:center;
  background:var(--ms-card); border:1px solid var(--ms-line); border-radius:14px; color:var(--ms-text); text-decoration:none;
  transition:border-color .12s ease, box-shadow .12s ease, transform .12s ease}
.ms-apps a:hover, .ms-apps a:focus-visible{border-color:var(--ms-line-2); box-shadow:var(--ms-shadow); transform:translateY(-1px)}
.ms-badge{display:grid; place-items:center; flex:none; width:52px; height:52px; border-radius:12px; color:var(--ms-icon); background:var(--ms-icon-bg)}
.ms-badge .ms-icon{width:26px; height:26px}
.ms-apps a:hover .ms-badge{color:var(--ms-accent)}
/* Room for two lines on every tile, so icons line up whether a name wraps or not. */
.ms-name{font-weight:600; font-size:14.5px; line-height:1.25; min-height:2.5em; display:flex; align-items:center}
.ms-group{font-size:12.5px; color:var(--ms-faint)}

/* One service */
.ms-back{display:inline-block; margin:0 0 24px; font-size:14.5px; color:var(--ms-muted); text-decoration:none}
.ms-back:hover{color:var(--ms-text)}
.ms-hero{display:flex; gap:18px; align-items:center; margin:0 0 4px}
.ms-hero .ms-badge{width:64px; height:64px; border-radius:16px; border:1px solid var(--ms-line)}
.ms-hero .ms-badge .ms-icon{width:32px; height:32px}
.ms-hero h1{margin:0; font-size:clamp(24px,5vw,36px)}
.ms-hero .ms-group{font-size:13.5px; margin-top:3px}
.ms-cols{display:grid; grid-template-columns:3fr 2fr; gap:16px; margin:24px 0 0}
.ms-box{background:var(--ms-soft); border:1px solid var(--ms-line); border-radius:12px; padding:18px 20px}
.ms-box h2{margin:0 0 10px; font-size:12.5px; text-transform:uppercase; letter-spacing:.7px; color:var(--ms-faint); font-weight:600}
.ms-feats{list-style:none; margin:0; padding:0}
.ms-feats li{position:relative; padding:5px 0 5px 26px; line-height:1.45}
.ms-feats li::before{content:""; position:absolute; left:3px; top:11px; width:11px; height:6px; border:solid var(--ms-accent); border-width:0 0 2px 2px; transform:rotate(-45deg)}
.ms-uses{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.ms-uses li{padding:5px 11px; border-radius:999px; font-size:14px; background:var(--ms-card); border:1px solid var(--ms-line)}
.ms-wrap pre{background:var(--ms-code-bg); color:var(--ms-code-text); border:1px solid var(--ms-line); border-radius:10px; padding:14px 16px; margin:0; white-space:pre-wrap; overflow-wrap:anywhere; font-size:13.5px; line-height:1.6}
.ms-endpoint{color:var(--ms-muted); font-size:14.5px; margin:0 0 10px}
.ms-endpoint code, .ms-params code{font-size:13.5px; background:var(--ms-icon-bg); padding:1px 6px; border-radius:5px}
.ms-method{display:inline-block; font:600 12px/1 ui-monospace, Menlo, Consolas, monospace; padding:4px 6px; border-radius:5px; background:var(--ms-accent-soft); color:var(--ms-accent); margin-right:4px}
.ms-params{width:100%; border-collapse:collapse; font-size:14.5px}
.ms-params th, .ms-params td{text-align:left; vertical-align:top; padding:10px 12px 10px 0; border-bottom:1px solid var(--ms-line)}
.ms-params th{font-size:12px; text-transform:uppercase; letter-spacing:.6px; color:var(--ms-faint); font-weight:600}
.ms-params td:first-child{white-space:nowrap}
.ms-req{color:var(--ms-accent); font-size:12px; font-weight:600}
.ms-vals{color:var(--ms-faint); font-size:13px}

/* Pricing */
.ms-packs{list-style:none; margin:8px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:14px}
.ms-pack{position:relative; background:var(--ms-card); border:1px solid var(--ms-line); border-radius:14px; padding:22px 14px 18px; text-align:center}
.ms-pack.ms-best{border:2px solid var(--ms-accent); padding:21px 13px 17px}
.ms-flag{position:absolute; top:-11px; left:50%; transform:translateX(-50%); background:var(--ms-accent); color:var(--ms-on-accent); font-size:11.5px; font-weight:700; padding:3px 9px; border-radius:999px; white-space:nowrap}
.ms-price{font-size:28px; font-weight:700; letter-spacing:-.5px}
.ms-count{font-weight:600; font-size:15.5px; margin-top:4px; white-space:nowrap}
.ms-count span{font-weight:400; font-size:12.5px; color:var(--ms-faint)}
.ms-bonus{display:inline-block; margin-top:8px; padding:2px 9px; border-radius:999px; font-size:12.5px; font-weight:600; color:var(--ms-accent); background:var(--ms-accent-soft)}
.ms-buys{font-size:12.5px; color:var(--ms-faint); margin-top:10px; line-height:1.45; white-space:nowrap}
.ms-costs td:last-child, .ms-costs th:last-child{text-align:right; white-space:nowrap}
.ms-costs a{color:var(--ms-text); text-decoration:none}
.ms-costs a:hover{color:var(--ms-accent)}
.ms-note{color:var(--ms-faint); font-size:14px}

@media (max-width:720px){
  .ms-nav a.ms-hide-sm{display:none}
}
@media (max-width:640px){
  .ms-cols{grid-template-columns:1fr}
}
@media (max-width:560px){
  .ms-top-in{gap:14px}
  .ms-brand-sub{display:none}
  .ms-nav{gap:14px; margin-left:0}
  .ms-apps{grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:12px}
  .ms-apps a{padding:10px 8px}
  .ms-apps .ms-badge{width:46px; height:46px; border-radius:11px}
  .ms-apps .ms-badge .ms-icon{width:23px; height:23px}
  .ms-hero .ms-badge{width:56px; height:56px}
  .ms-params td:first-child{white-space:normal}
  .ms-foot-links{margin-left:0}
}
@media (max-width:340px){
  .ms-buys, .ms-count{white-space:normal}
  .ms-apps .ms-badge{width:40px; height:40px}
  .ms-name{font-size:13px}
}

/* Dashboard */
.ms-dash{display:grid; grid-template-columns:1fr 2fr; gap:16px; align-items:start}
.ms-card{background:var(--ms-card); border:1px solid var(--ms-line); border-radius:14px; padding:20px 22px}
.ms-card h2{margin:0 0 12px; font-size:16px; font-weight:650}
.ms-balance{font-size:32px; font-weight:700; letter-spacing:-.6px}
.ms-balance span{font-size:15px; font-weight:400; color:var(--ms-faint)}
.ms-hint{color:var(--ms-faint); font-size:14px; margin:8px 0 0}
.ms-button{display:inline-block; padding:9px 16px; border-radius:8px; border:1px solid var(--ms-text); background:var(--ms-text); color:var(--ms-bg);
  font:600 14.5px/1.2 inherit; font-family:inherit; text-decoration:none; cursor:pointer; white-space:nowrap}
.ms-button:hover{opacity:.88}
.ms-button[disabled]{opacity:.4; cursor:not-allowed}
.ms-button.ms-ghost{background:transparent; color:var(--ms-text); border-color:var(--ms-line-2); margin-left:8px}
.ms-form label{display:block; font-size:13.5px; font-weight:600; margin:0 0 6px}
.ms-row{display:flex; gap:8px}
.ms-row input{flex:1; min-width:0}
.ms-form input[type=text]{padding:9px 12px; border:1px solid var(--ms-line-2); border-radius:8px; background:var(--ms-bg); color:var(--ms-text); font:inherit; font-size:15px}
.ms-form input[type=text]:focus{outline:2px solid var(--ms-accent); outline-offset:-1px; border-color:transparent}
.ms-keys{margin-top:18px}
.ms-keys td{vertical-align:middle}
.ms-keys form{margin:0}
.ms-link-danger{background:none; border:0; padding:0; color:#dc2626; font:inherit; font-size:14px; cursor:pointer}
.ms-link-danger:hover{text-decoration:underline}
.ms-alert{padding:11px 14px; border-radius:10px; font-size:14.5px; margin:0 0 16px; border:1px solid var(--ms-line)}
.ms-alert-ok{background:color-mix(in srgb, #16a34a 10%, transparent); border-color:color-mix(in srgb, #16a34a 30%, transparent)}
.ms-alert-error{background:color-mix(in srgb, #dc2626 10%, transparent); border-color:color-mix(in srgb, #dc2626 30%, transparent)}
.ms-alert-info{background:var(--ms-soft)}
.ms-secret-card{border:2px solid var(--ms-accent); margin:0 0 16px}
.ms-secret{display:flex; gap:10px; align-items:center; margin:12px 0}
.ms-secret code{flex:1; min-width:0; overflow-wrap:anywhere; font-size:14px; padding:10px 12px; border-radius:8px; background:var(--ms-accent-soft); color:var(--ms-text)}
.ms-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
@media (prefers-color-scheme: dark){
  .ms-link-danger{color:#f87171}
}
@media (max-width:760px){
  .ms-dash{grid-template-columns:1fr}
  .ms-keys th:nth-child(3), .ms-keys td:nth-child(3){display:none}
}
@media (max-width:480px){
  .ms-keys th:nth-child(4), .ms-keys td:nth-child(4){display:none}
  .ms-row{flex-direction:column}
}