/* ================================================================
   Repo view: a GitHub-shaped project page.
   Loaded after style.css, which owns the palette and the shell.
   ================================================================ */

.repo-head{position:relative;z-index:1;padding:40px 0 0}

.breadcrumb{
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--mono);
  font-size:.82rem;
  color:var(--faint);
  margin:0 0 14px;
}

.breadcrumb a{color:var(--muted);transition:color .25s var(--ease)}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb .sep{color:var(--line-hi)}
.breadcrumb .here{color:var(--text)}

.repo-title{
  display:flex;
  align-items:baseline;
  gap:14px;
  flex-wrap:wrap;
  margin:0 0 8px;
}

.repo-title h1{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2rem,4.6vw,2.9rem);
  letter-spacing:-.015em;
  margin:0;
}

.repo-sub{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.1rem;
  color:var(--accent);
  margin:0 0 22px;
}

/* ---------- sticky section tabs ---------- */

.tabs{
  position:sticky;
  top:64px;
  z-index:9;
  background:rgba(7,9,11,.88);
  backdrop-filter:blur(12px) saturate(140%);
  border-bottom:1px solid var(--line);
  margin-bottom:36px;
}

.tabs-inner{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.tabs-inner::-webkit-scrollbar{display:none}

.tabs a{
  position:relative;
  padding:14px 16px;
  font-size:.9rem;
  color:var(--muted);
  white-space:nowrap;
  border-bottom:2px solid transparent;
  transition:color .2s var(--ease),border-color .2s var(--ease);
}

.tabs a:hover{color:var(--text)}
.tabs a.active{color:var(--text);border-bottom-color:var(--accent);font-weight:500}

.tabs .tally{
  display:inline-block;
  margin-left:8px;
  padding:1px 8px;
  border-radius:999px;
  background:var(--surface-hi);
  border:1px solid var(--line);
  font-family:var(--mono);
  font-size:.7rem;
  color:var(--faint);
}

.tabs a.active .tally{color:var(--text);border-color:var(--line-hi)}

/* ---------- two column layout ---------- */

.layout{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:28px;
  padding-bottom:90px;
}

@media (min-width:900px){
  .layout{grid-template-columns:minmax(0,1fr) 320px;gap:40px;align-items:start}
}

/* The sidebar scrolls with the page rather than sticking. With About,
   Languages and Activity stacked it is taller than a short viewport, and a
   sticky column would need its own scrollbar, which traps the wheel whenever
   the cursor crosses it. */

/* The heatmap sits in a narrow column, so its summary stacks instead of
   sitting on one line. */
.col-side .heat-foot{flex-direction:column;align-items:flex-start;gap:11px}
.col-side .box-body{padding:20px}

.col-main > section{scroll-margin-top:132px}
.col-main > section + section{margin-top:44px}

/* ---------- box ---------- */

.box{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
}

.box + .box{margin-top:18px}

.box-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:13px 18px;
  background:var(--surface-hi);
  border-bottom:1px solid var(--line);
  font-family:var(--mono);
  font-size:.73rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--faint);
}

.box-head strong{color:var(--text);font-weight:500}

.box-body{padding:22px}
.box-body > :first-child{margin-top:0}
.box-body > :last-child{margin-bottom:0}

/* ---------- sidebar ---------- */

.side-title{
  font-family:var(--mono);
  font-size:.73rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--faint);
  margin:0 0 14px;
}

.side-block{padding:0 0 22px;border-bottom:1px solid var(--line);margin-bottom:22px}
.side-block:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}

.side-list{margin:0;padding:0;list-style:none;font-size:.9rem}

.side-list li{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
  padding:7px 0;
  color:var(--muted);
}

.side-list li .v{color:var(--text);text-align:right}
.side-list li a.v:hover{color:var(--accent)}

/* ---------- language bar, GitHub style ---------- */

.lang-bar{
  display:flex;
  height:10px;
  border-radius:999px;
  overflow:hidden;
  background:var(--surface-hi);
  margin:0 0 18px;
  gap:2px;
}

.lang-bar i{
  display:block;
  height:100%;
  transition:opacity .25s var(--ease),transform .25s var(--ease);
  transform-origin:center bottom;
}

.lang-bar:hover i{opacity:.4}
.lang-bar i:hover{opacity:1;transform:scaleY(1.6)}

.lang-legend{margin:0;padding:0;list-style:none}

.lang-legend li{
  display:flex;
  align-items:center;
  gap:9px;
  padding:6px 0;
  font-size:.9rem;
  color:var(--muted);
}

.lang-legend .dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto}
.lang-legend .name{color:var(--text)}

.lang-legend .pct{
  margin-left:auto;
  font-family:var(--mono);
  font-size:.82rem;
  color:var(--faint);
}

/* ---------- contribution heatmap ---------- */

.heat-scroll{overflow-x:auto;padding-bottom:4px}

.heat{display:flex;gap:3px;min-width:max-content}

.heat-week{display:flex;flex-direction:column;gap:3px}

.heat-day{
  width:12px;
  height:12px;
  border-radius:3px;
  background:var(--surface-hi);
  border:1px solid rgba(255,255,255,.04);
}

.heat-day.l1{background:rgba(95,211,154,.3);border-color:rgba(95,211,154,.22)}
.heat-day.l2{background:rgba(95,211,154,.52);border-color:rgba(95,211,154,.38)}
.heat-day.l3{background:rgba(95,211,154,.76);border-color:rgba(95,211,154,.55)}
.heat-day.l4{background:var(--accent);border-color:var(--accent)}
.heat-day.future{background:transparent;border-color:transparent}

.heat-months{
  display:flex;
  gap:3px;
  min-width:max-content;
  margin:0 0 7px;
  font-family:var(--mono);
  font-size:.7rem;
  color:var(--faint);
}

/* One label column per week, matching the 12px cell width. Labels are wider
   than their column and spill over the next, which is what a contribution
   graph does; letting them set their own width would widen the whole grid. */
.heat-months span{width:12px;flex:0 0 auto;white-space:nowrap;overflow:visible}

.heat-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:18px;
  flex-wrap:wrap;
  font-size:.86rem;
  color:var(--muted);
}

.heat-key{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:.74rem;color:var(--faint)}
.heat-key .heat-day{width:11px;height:11px}

/* ---------- milestones ---------- */

.ms-progress{display:flex;align-items:center;gap:14px;margin:0 0 20px}

.ms-bar{
  flex:1;
  height:9px;
  border-radius:999px;
  background:var(--surface-hi);
  border:1px solid var(--line);
  overflow:hidden;
  display:flex;
}

.ms-bar i{display:block;height:100%}
.ms-bar i.done{background:var(--accent)}
.ms-bar i.doing{background:rgba(95,211,154,.45)}

.ms-pct{font-family:var(--mono);font-size:.82rem;color:var(--text);white-space:nowrap}

.ms-items{margin:0;padding:0;list-style:none}

.ms-items li{
  display:flex;
  gap:13px;
  align-items:center;
  padding:12px 0;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:.94rem;
}

.ms-items li:first-child{border-top:0;padding-top:0}

.ms-items .tick{
  width:19px;
  height:19px;
  border-radius:50%;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  font-size:.6rem;
  border:1px solid var(--line-hi);
  color:var(--faint);
}

.ms-items li.done .tick{background:var(--accent);border-color:var(--accent);color:#07090b}
.ms-items li.doing .tick{border-color:var(--accent);color:var(--accent)}

.ms-items .name{color:var(--text)}
.ms-items li.todo .name{color:var(--muted)}

.ms-items .when{
  font-family:var(--mono);
  font-size:.78rem;
  color:var(--faint);
  white-space:nowrap;
}

.ms-items .name em{color:var(--text)}

.ms-tags{margin-left:auto;display:flex;gap:6px;align-items:center;flex:0 0 auto}

.ms-tag{
  font-family:var(--mono);
  font-size:.7rem;
  color:var(--faint);
  padding:2px 7px;
  border:1px solid var(--line);
  border-radius:999px;
  white-space:nowrap;
}

.ms-tag.played{color:var(--accent);border-color:rgba(95,211,154,.3);background:rgba(95,211,154,.07)}

/* Roadmap phases: a stepper across the top, then one fold per phase. */

.ms-steps{
  display:flex;
  margin:0 0 22px;
  padding:0 0 6px;
  list-style:none;
  overflow-x:auto;
  scrollbar-width:thin;
  scrollbar-color:var(--line-hi) transparent;
}

.ms-steps li{flex:1 1 0;position:relative;min-width:0}

@media (max-width:720px){
  .ms-steps li{flex:0 0 72px}
}

/* The line joining each step to the next, drawn from this step's dot. */
.ms-steps li::before{
  content:"";
  position:absolute;
  top:6px;
  left:50%;
  width:100%;
  height:2px;
  background:var(--line-hi);
}
.ms-steps li:last-child::before{display:none}
.ms-steps li.done::before{background:var(--accent)}

.ms-steps a{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:0 4px;
  text-align:center;
  text-decoration:none;
  color:var(--faint);
}

.ms-steps .dot{
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--surface);
  border:2px solid var(--line-hi);
  transition:transform .2s var(--ease);
}

.ms-steps li.done .dot{background:var(--accent);border-color:var(--accent)}
.ms-steps li.doing .dot{border-color:var(--accent);box-shadow:0 0 0 4px rgba(95,211,154,.16);animation:ms-pulse 2.4s var(--ease) infinite}
.ms-steps a:hover .dot{transform:scale(1.25)}

.ms-steps .step-n{font-family:var(--mono);font-size:.66rem;color:var(--faint)}
.ms-steps .step-name{font-size:.7rem;line-height:1.25;color:var(--muted);hyphens:auto;-webkit-hyphens:auto}
.ms-steps li.doing .step-name{color:var(--accent);font-weight:600}
.ms-steps li.todo .step-name{color:var(--faint)}

@keyframes ms-pulse{
  0%,100%{box-shadow:0 0 0 3px rgba(95,211,154,.18)}
  50%{box-shadow:0 0 0 7px rgba(95,211,154,.04)}
}

@media (prefers-reduced-motion:reduce){.ms-steps li.doing .dot{animation:none}}

.ms-phases{display:flex;flex-direction:column;gap:10px}

.ms-phase{
  border:1px solid var(--line);
  border-radius:10px;
  background:rgba(255,255,255,.012);
  scroll-margin-top:120px;
}

.ms-phase.doing{border-color:rgba(95,211,154,.35);background:rgba(95,211,154,.035)}

.ms-phase summary{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  cursor:pointer;
  list-style:none;
  flex-wrap:wrap;
}

.ms-phase summary::-webkit-details-marker{display:none}

.ms-phase summary::after{
  content:"";
  width:7px;
  height:7px;
  border-right:1.5px solid var(--faint);
  border-bottom:1.5px solid var(--faint);
  transform:rotate(45deg);
  margin:-3px 2px 0 0;
  transition:transform .2s var(--ease);
}

.ms-phase[open] summary::after{transform:rotate(225deg);margin-top:3px}

.ph-n{font-family:var(--mono);font-size:.74rem;color:var(--faint)}
.ph-name{color:var(--text);font-weight:600}

.ph-state{
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid var(--line-hi);
  color:var(--faint);
}

.ms-phase.done .ph-state{color:var(--accent);border-color:rgba(95,211,154,.3)}
.ms-phase.doing .ph-state{color:#07090b;background:var(--accent);border-color:var(--accent)}

.ph-count{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--mono);
  font-size:.76rem;
  color:var(--faint);
}

.ph-bar{display:block;width:56px;height:5px;border-radius:999px;background:var(--surface-hi);overflow:hidden}
.ph-bar i{display:block;height:100%;background:var(--accent)}

.ms-phase .ms-items{padding:2px 14px 12px}
.ms-phase .ms-items li:first-child{border-top:1px solid var(--line);padding-top:12px}

@media (max-width:560px){
  .ms-items li{flex-wrap:wrap}
  .ms-items .name{flex:1 1 calc(100% - 40px)}
  .ms-tags{margin-left:32px}
}

/* ---------- gallery ---------- */

.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}

.g-item{margin:0;min-width:0}
.g-item.is-lead{grid-column:1 / -1}

.g-item a{
  display:block;
  overflow:hidden;
  border-radius:8px;
  border:1px solid var(--line);
  background:var(--surface-hi);
  aspect-ratio:16 / 9;
  cursor:zoom-in;
}

.g-item img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s var(--ease),filter .3s var(--ease);
}

.g-item a:hover img{transform:scale(1.035);filter:brightness(1.08)}

.g-item figcaption{margin-top:7px;color:var(--faint);font-size:.8rem;line-height:1.4}
.g-item.is-lead figcaption{font-size:.86rem}

/* A capture left alone on the last row spans it, closing the gallery the way
   the lead opens it. The lead is the first child, so rows start at 2, 5, 8... */
@media (min-width:641px){
  .g-item:last-child:nth-child(3n+2){grid-column:1 / -1}
}

@media (max-width:640px){
  .gallery{grid-template-columns:repeat(2,1fr);gap:10px}
  .g-item:last-child:nth-child(2n){grid-column:1 / -1}
}

/* Full-size viewer, opened from the gallery and from screenshots in the prose. */

.viewer{
  max-width:none;
  max-height:none;
  width:100vw;
  height:100vh;
  margin:0;
  padding:0;
  border:0;
  background:rgba(4,6,8,.97);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  color:var(--text);
}

.viewer::backdrop{background:rgba(4,6,8,.6)}

.viewer[open]{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}

.viewer img{max-width:calc(100vw - 32px);max-height:calc(100vh - 110px);border-radius:6px;object-fit:contain}

.viewer p{margin:0;padding:0 16px;max-width:760px;text-align:center;color:var(--muted);font-size:.9rem}

.viewer button{
  position:absolute;
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:50%;
  border:1px solid var(--line-hi);
  background:rgba(15,20,24,.8);
  color:var(--text);
  font-size:1.1rem;
  cursor:pointer;
}

.viewer button:hover{border-color:var(--accent);color:var(--accent)}
.viewer .v-close{top:16px;right:16px}
.viewer .v-prev{left:16px;top:50%;transform:translateY(-50%)}
.viewer .v-next{right:16px;top:50%;transform:translateY(-50%)}

.prose .shot img{cursor:zoom-in}

/* ---------- releases ---------- */

.rel + .rel{margin-top:18px}

.rel-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}

.rel-tag{
  font-family:var(--mono);
  font-size:.74rem;
  letter-spacing:.08em;
  color:var(--accent);
  border:1px solid rgba(95,211,154,.4);
  background:rgba(95,211,154,.1);
  border-radius:999px;
  padding:3px 11px;
}

.rel:not(:first-of-type) .rel-tag{color:var(--faint);border-color:var(--line);background:transparent}

.rel-when{font-size:.84rem;color:var(--faint);margin-left:auto}

.rel-group{margin-top:18px}

.rel-group h4{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--faint);
  font-weight:400;
  margin:0 0 10px;
}

.rel-group ul{margin:0;padding:0;list-style:none}

.rel-group li{
  color:var(--muted);
  font-size:.92rem;
  padding:0 0 10px 20px;
  position:relative;
  max-width:76ch;
}

.rel-group li::before{
  content:"";
  position:absolute;
  left:3px;
  top:.62em;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--accent);
  opacity:.6;
}

/* ---------- prose inside a box ---------- */

.prose > :first-child{margin-top:0}

.prose h3{
  font-family:var(--serif);
  font-weight:400;
  font-size:1.1rem;
  margin:26px 0 12px;
  color:var(--text);
}

.prose p{color:var(--muted);margin:0 0 16px;max-width:72ch}
.prose strong{color:var(--text);font-weight:500}
.prose a{color:var(--accent)}
.prose ul{margin:0 0 18px;padding:0;list-style:none;max-width:74ch}

.prose ul li{color:var(--muted);margin:0 0 10px;padding-left:22px;position:relative}

.prose ul li::before{
  content:"";
  position:absolute;
  left:4px;
  top:.72em;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--faint);
}

.prose ul li.has-status::before{display:none}

.prose img{display:block;max-width:100%;height:auto;border-radius:8px}
.prose .shot{margin:4px 0 22px}
.prose .shot img{width:100%;border:1px solid var(--line);background:var(--line)}
.prose .shot figcaption{margin-top:8px;color:var(--faint);font-size:.85rem}

.prose ol{margin:0 0 18px;padding-left:22px;max-width:74ch}
.prose ol li{color:var(--muted);margin:0 0 10px}

.prose .table-scroll{overflow-x:auto;margin:0 0 20px}
.prose table{border-collapse:collapse;width:100%;min-width:480px;font-size:.92rem}

.prose th{
  text-align:left;
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--faint);
  font-weight:400;
  padding:0 14px 11px 0;
  border-bottom:1px solid var(--line);
}

.prose td{
  padding:12px 14px 12px 0;
  border-bottom:1px solid var(--line);
  color:var(--muted);
  vertical-align:top;
}

.prose td strong{color:var(--text)}

.prose code,.rel-group code{
  font-family:var(--mono);
  font-size:.86em;
  background:var(--surface-hi);
  border:1px solid var(--line);
  border-radius:5px;
  padding:1px 5px;
  color:var(--text);
  overflow-wrap:anywhere;
}

.disclosure{
  margin-top:28px;
  padding:20px 22px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:12px;
  color:var(--muted);
  font-size:.88rem;
}

.disclosure strong{color:var(--text);font-weight:500}

@media (max-width:520px){
  .tabs a{padding:12px 12px;font-size:.85rem}
  .box-body{padding:18px}
  .repo-head{padding-top:28px}
}

.box[id],section[id]{scroll-margin-top:132px}

/* ---------- guide ---------- */

/* A how-to page under a project, such as /mobetta/setup/: one column of
   boxes, numbered steps and their screenshots. */

.guide{position:relative;z-index:1;padding:28px 0 90px}
.guide > section + section{margin-top:28px}
.guide > section{scroll-margin-top:132px}

.guide .prose h3{display:flex;gap:12px;align-items:baseline;margin-top:34px}
.guide .prose h3:first-child{margin-top:0}
.guide .prose h3 .n{font-family:var(--mono);font-size:.82rem;color:var(--accent);min-width:1.2em}

.guide .prose .shot{max-width:760px}
.guide .prose li .shot{margin:12px 0 4px}

.prose .pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:760px}
.prose .pair .shot{margin-bottom:22px}
@media (max-width:620px){.prose .pair{grid-template-columns:1fr}}

.prose .callout{
  border-left:2px solid #c4a86b;
  background:rgba(196,168,107,.07);
  border-radius:0 8px 8px 0;
  padding:12px 16px;
}
.prose .callout strong{color:#d9bf82}
.prose .callout.is-rec{border-left-color:var(--accent);background:rgba(95,211,154,.06)}
.prose .callout.is-rec strong{color:var(--accent)}

.prose kbd{
  font-family:var(--mono);
  font-size:.84em;
  color:var(--text);
  border:1px solid var(--line-hi);
  border-bottom-width:2px;
  border-radius:5px;
  padding:0 5px;
}

/* ---------- latest release, in the sidebar ---------- */

.box .side-list + .side-title{margin-top:18px}
.rel-files li span:first-child{font-family:var(--mono);font-size:.78rem;overflow-wrap:anywhere;min-width:0}
.rel-files li .v{white-space:nowrap}
.rel-link{margin:16px 0 0;font-size:.9rem}
.rel-link a{color:var(--accent)}