/* Shared styles for the short "start by role" pages (solo / team / admin). */

@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400; font-display:swap; src:url("../fonts/jetbrains-mono-1.woff2") format('woff2'); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400; font-display:swap; src:url("../fonts/jetbrains-mono-5.woff2") format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:700; font-display:swap; src:url("../fonts/jetbrains-mono-1.woff2") format('woff2'); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:700; font-display:swap; src:url("../fonts/jetbrains-mono-5.woff2") format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root{
  --paper:#e9e5d8; --paper2:#f1eee4; --card:#f6f4ec;
  --ink:#16140d; --line:#16140d; --dim:#5d584a; --faint:#8c8472;
  --lime:#c2f53f; --amber:#e8a417;
  --mono:"JetBrains Mono",monospace;
}
*{box-sizing:border-box; margin:0; padding:0}
body{font-family:var(--mono); background:var(--paper); color:var(--ink); line-height:1.6; -webkit-font-smoothing:antialiased}
::selection{background:var(--lime)}
a{color:inherit; text-decoration:underline; text-underline-offset:2px}

.ph{display:flex; align-items:center; gap:16px; padding:14px 20px; border-bottom:2px solid var(--line); background:var(--paper2); position:sticky; top:0}
.ph .logo{display:flex; align-items:center; gap:8px; font-weight:700; text-decoration:none}
.ph .logo b{background:var(--lime); padding:0 3px}
.ph .langtog{display:inline-flex; margin-left:auto; border:2px solid var(--line)}
.ph .langtog button{font-family:var(--mono); font-weight:700; font-size:11px; padding:4px 9px; border:none; background:var(--paper2); color:var(--dim); cursor:pointer}
.ph .langtog button+button{border-left:2px solid var(--line)}
.ph .langtog button.on{background:var(--ink); color:var(--lime)}
.ph .back{margin-left:14px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--faint)}
.ph .back:hover{color:var(--ink)}

main{max-width:720px; margin:0 auto; padding:34px 22px 80px}
h1{font-size:26px; line-height:1.2; margin-bottom:10px}
h2{font-size:16px; margin:30px 0 10px; padding-top:16px; border-top:2px solid var(--line)}
p{margin:10px 0}
.lead{color:var(--dim); font-size:14px}
ul{margin:8px 0 8px 20px}
li{margin:5px 0}
code{background:var(--card); border:1px solid rgba(22,20,13,.15); padding:1px 5px; font-size:12.5px}
.role{display:inline-block; background:var(--lime); border:1.5px solid var(--line); padding:0 5px; font-weight:700; font-size:11px}

pre{position:relative; background:var(--ink); color:#d7d2c4; padding:15px 16px; margin:12px 0; font-size:12.5px; line-height:1.7; overflow-x:auto; border:2px solid var(--line)}
pre .p{color:var(--lime); font-weight:700; user-select:none; -webkit-user-select:none}
pre .c{color:#8c8472; user-select:none; -webkit-user-select:none}
.copybtn{position:absolute; top:8px; right:8px; font-family:var(--mono); font-size:10.5px; padding:2px 8px; border:1.5px solid #6b6656; background:transparent; color:#d7d2c4; cursor:pointer; opacity:0; transition:opacity .12s}
pre:hover .copybtn, .copybtn:focus-visible{opacity:1}
.copybtn:hover{background:var(--lime); color:var(--ink); border-color:var(--lime)}
.copybtn.done{opacity:1; background:var(--lime); color:var(--ink); border-color:var(--lime)}

.note{display:flex; gap:10px; align-items:flex-start; border:2px solid var(--line); background:var(--card); padding:12px 14px; margin:14px 0; box-shadow:4px 4px 0 var(--ink)}
.note .ic{flex:0 0 auto; width:22px; height:22px; display:grid; place-items:center; background:var(--ink); color:var(--lime); font-weight:700; font-size:13px}
.more{margin-top:28px; font-size:13px; color:var(--dim)}