/* The services hub (/services/). The site's paper, ink and type, flat: one
   rule weight, no shadows, the black button the site uses for "the services". */

:root{
  --paper:#fbfaf9; --paper-2:#f4f2f0; --card:#ffffff; --ink:#16150f; --ink-2:#3d3b34; --muted:#75726a;
  --line:#e2dfda; --line-2:#cdc9c2; --accent:#1b4dd8; --bad:#b42318; --bad-soft:#fdecea; --ok:#1f7a3d;
  --warn:#8a5a00; --warn-soft:#fbf1dc;
  --sans:"Inter","Segoe UI",-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;
  --mono:"Cascadia Mono",Consolas,"SF Mono",Menlo,monospace;
  color-scheme:light;
}
html[lang=fa]{--sans:"Vazirmatn","Segoe UI",Tahoma,Arial,sans-serif}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper);color:var(--ink);font:15.5px/1.65 var(--sans);-webkit-font-smoothing:antialiased;
  min-height:100vh;display:flex;flex-direction:column}
html[lang=fa] body{line-height:1.85}
a{color:inherit}
button,input,select{font:inherit;color:inherit}
code,.mono{font-family:var(--mono);font-size:13px}
[hidden]{display:none !important}

.bar{display:flex;align-items:center;gap:16px;padding:14px clamp(16px,4vw,40px);border-bottom:1px solid var(--line);background:var(--paper)}
.brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-weight:640;font-size:17px;letter-spacing:-.02em}
.brand .mark{color:var(--ink)}
.brand small{font-weight:500;font-size:14px;color:var(--muted);letter-spacing:0;padding-inline-start:9px;border-inline-start:1px solid var(--line-2)}
.bar nav{margin-inline-start:auto;display:flex;align-items:center;gap:6px}
.bar nav a{text-decoration:none;color:var(--ink-2);font-size:14.5px;padding:6px 10px;border-radius:7px}
.bar nav a:hover{background:var(--paper-2);color:var(--ink)}

.wrap{width:100%;max-width:980px;margin:0 auto;padding:clamp(24px,5vh,48px) clamp(16px,4vw,40px) 64px;flex:1}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.mut{color:var(--muted)}
.small{font-size:13px;margin:10px 0 0}
.grow{flex:1;min-width:0}

button.ghost,.btn.ghost{border:1px solid var(--line-2);background:var(--card);border-radius:9px;padding:7px 14px;cursor:pointer;
  text-decoration:none;font-size:14px;white-space:nowrap}
button.ghost:hover,.btn.ghost:hover{border-color:var(--ink)}

/* ---- the door ---- */
.door{display:grid;place-items:center;padding:clamp(10px,4vh,40px) 0 clamp(20px,5vh,48px)}
.door-card{width:min(400px,100%);text-align:center;background:var(--card);border:1px solid var(--line);border-radius:18px;
  padding:34px clamp(20px,5vw,34px) 26px}
.door-card .mark{color:var(--ink)}
.door-card h1{font-size:23px;margin:14px 0 4px;letter-spacing:-.02em}
html[lang=fa] .door-card h1{letter-spacing:0}
.door-card .lead{margin:0 0 24px;color:var(--muted)}
.provider{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin:0 0 10px;padding:12px 16px;
  border:1px solid var(--line-2);border-radius:11px;background:var(--card);cursor:pointer;font-weight:560}
.provider:hover{border-color:var(--ink)}
.provider[data-signin=github]{background:#111;color:#fff;border-color:#111}
.provider[data-signin=github]:hover{background:#2b2b2b}
.keep{display:inline-flex;align-items:center;gap:8px;margin:8px 0 0;font-size:14px;color:var(--ink-2);cursor:pointer}
.err{margin:14px 0 0;padding:10px 12px;border-radius:10px;background:var(--bad-soft);color:var(--bad);font-size:13.5px;text-align:start}
.fine{margin:20px 0 0;font-size:12.5px;color:var(--muted)}
.fine a{color:var(--ink-2)}

/* ---- signed in ---- */
.who{display:flex;align-items:center;gap:14px}
.who b{display:block}
.who .mut{font-size:13.5px}
.avatar{width:42px;height:42px;border-radius:50%;background:#111;color:#fff;display:grid;place-items:center;font-weight:600;flex:none}

.block{margin-top:34px}
.block h2{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
html[lang=fa] .block h2{letter-spacing:0;text-transform:none;font-size:14.5px}

.services{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.service{display:flex;flex-direction:column;gap:6px;text-decoration:none;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:16px 18px;transition:border-color .15s ease}
.service:hover{border-color:var(--ink)}
.service .row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.service b{font-size:16.5px}
.service .state{font-size:12px;color:var(--muted);border:1px solid var(--line);border-radius:99px;padding:1px 9px;margin-inline-start:auto}
.service .text{color:var(--ink-2);font-size:14px}
.service .lock{font-size:12.5px;color:var(--muted)}
.service.admin{background:#111;border-color:#111;color:#fff}
.service.admin .text,.service.admin .state{color:#d6d4ce;border-color:#3a3a3a}

.key-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.key-line .mut{display:block;font-size:13px}
.reveal{margin-top:14px;border:1px solid var(--ink);border-radius:12px;padding:14px 16px;background:var(--paper-2)}
.reveal p{margin:0 0 10px;font-size:14px}
.reveal code{display:block;word-break:break-all;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:10px 12px;
  margin-bottom:10px;direction:ltr;text-align:left}

.settings{display:grid;gap:0;padding:4px 20px}
.set{display:flex;align-items:center;gap:14px;padding:14px 0;border-top:1px solid var(--line)}
.set:first-child{border-top:0}
.set > div:first-child{flex:1;min-width:0}
.set b{display:block;font-weight:560}
.set .mut{font-size:13px}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:9px;overflow:hidden}
.seg button{border:0;background:var(--card);padding:6px 13px;cursor:pointer;font-size:14px}
.seg button.on{background:#111;color:#fff}
select{border:1px solid var(--line-2);border-radius:9px;padding:6px 10px;background:var(--card)}
.switch{appearance:none;width:42px;height:24px;border-radius:99px;background:var(--line-2);position:relative;cursor:pointer;flex:none;
  transition:background-color .15s ease;margin:0}
.switch::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:18px;height:18px;border-radius:50%;background:#fff;
  transition:inset-inline-start .15s ease}
.switch:checked{background:#111}
.switch:checked::after{inset-inline-start:21px}

.note{margin-top:24px;padding:10px 14px;border-radius:10px;background:var(--warn-soft);color:var(--warn);font-size:14px}

.foot{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;padding:18px clamp(16px,4vw,40px);border-top:1px solid var(--line);
  font-size:13.5px;color:var(--muted)}
.foot a{color:var(--muted);text-decoration:none}
.foot a:hover{color:var(--ink)}

@media (max-width:560px){
  .brand small{display:none}
  .set{flex-wrap:wrap}
}