/* oursites-lol — furniture shared by the directory pages.
 *
 * Lifted out of the homepage so the overview and the two full pages look like one
 * site rather than three that happen to agree on a border radius. Kept separate
 * from theme.css because theme.css is byte-identical to shortn's and none of this
 * appears there.
 */

.layout{display:grid;gap:26px;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);align-items:start}
/* minmax(0,1fr) rather than 1fr: a bare 1fr track has a min-content floor, so one
   long unbroken string would push the whole page wider than the viewport */
@media(max-width:880px){.layout{grid-template-columns:minmax(0,1fr)}}
.layout>*{min-width:0}
.side{display:grid;gap:22px}

/* A page with a reading column and a narrower notes column. Same reasoning as
   .layout about minmax(0,1fr), and the same 900px collapse. */
.two{display:grid;gap:26px;grid-template-columns:minmax(0,1fr) minmax(0,270px);align-items:start}
@media(max-width:900px){.two{grid-template-columns:minmax(0,1fr)}}
.two>*{min-width:0}

.ctl{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.ctl input{flex:1;min-width:180px}
.ctl select{flex:0 0 auto;width:auto}

/* site rows */
.dom{font-weight:620;font-size:14.5px;word-break:break-all}
.srow{display:flex;align-items:center;gap:10px;padding:11px 2px;border-bottom:1px solid var(--line)}
.srow:hover{background:var(--panel)}
.bar{height:2px;background:var(--line);margin-top:7px;overflow:hidden;border-radius:1px}
.bar i{display:block;height:100%;width:0;background:var(--ok);transition:width .4s ease}
.bar i.bad{background:var(--bad)}
.bar i.wait{width:35%;background:var(--warn);animation:slide 1.1s ease-in-out infinite}
@keyframes slide{50%{transform:translateX(85%)}}

/* the two-line blurb under a site address on the overview */
.sdesc{font-size:13px;color:var(--ink2)}
.stitle{font-size:12.5px;color:var(--ink3);margin-top:5px}

/* repo rows */
.rname{font-weight:620;font-size:14.5px;letter-spacing:-.012em}
.rname:hover{text-decoration:underline;text-underline-offset:2.5px}
.pri{font-size:10.5px;font-weight:600;padding:1px 5px;border-radius:3px;background:var(--panel2);border:1px solid var(--line);color:var(--ink3)}
.topics{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px}
.topic{border:1px solid var(--line);background:none;color:var(--ink3);border-radius:3px;padding:1px 6px;font-size:11.5px;cursor:pointer;font-family:inherit}
.topic:hover{color:var(--ink);border-color:var(--line2)}
.topic.on{color:var(--ink);border-color:var(--line2);background:var(--panel2)}
.rm{font-size:12.5px;color:var(--ink3);font-family:ui-monospace,Menlo,Consolas,monospace;background:var(--sunk);border:1px solid var(--line);border-radius:6px;padding:8px 9px;max-height:72px;overflow:hidden;white-space:pre-wrap;word-break:break-word;margin:7px 0 0}
.rm.full{max-height:none}
.rmbtn{padding:3px 8px;font-size:12px;margin-top:6px}
.lang{display:inline-flex;align-items:center;gap:5px}
.lang i{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.count-note{font-size:12.5px;color:var(--ink3)}
.iconbtn{flex:0 0 auto;min-width:26px;height:26px;padding:0 6px;border-radius:5px;border:1px solid var(--line);background:transparent;color:var(--ink3);cursor:pointer;font-size:12px}
.iconbtn:hover{color:var(--ink);border-color:var(--line2)}
.plainlink{display:flex;gap:9px;align-items:baseline;padding:8px 2px;border-bottom:1px solid var(--line);font-size:13.5px;color:var(--ink2)}
.plainlink:hover{color:var(--ink)}
.plainlink b{color:var(--ink);font-weight:600}

/* ---- the full directory pages ---- */

/* A fact with a label under it, in a row that wraps rather than scrolls. */
.kvgrid{display:grid;gap:14px 22px;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));margin:16px 0 4px}
.kvgrid div{min-width:0}
.kvgrid b{display:block;font-size:19px;font-weight:640;letter-spacing:-.02em;line-height:1.15}
.kvgrid span{display:block;font-size:11.5px;color:var(--ink3);margin-top:3px}

/* A repo row on /repos/, which has more per row than the overview does. */
.rrow{padding:15px 2px;border-bottom:1px solid var(--line);min-width:0}
.rhead{display:flex;gap:9px;align-items:baseline;flex-wrap:wrap}
.rfacts{display:flex;gap:12px;flex-wrap:wrap;align-items:center;font-size:12.5px;color:var(--ink3);margin-top:7px}
.rfacts span{white-space:nowrap}
.rfacts .grow{flex:1 1 auto;min-width:0}
.rbody{font-size:13.5px;color:var(--ink2);margin-top:3px}

/* On /sites/ each site gets its own block rather than a ruled row, because there
   is room for the measured time and the history beside the description. */
.siteblock{border:1px solid var(--line);border-radius:8px;padding:14px 15px;margin-bottom:12px;background:var(--panel)}
.siteblock .rfacts{margin-top:9px}
.sstat{font-size:11.5px;font-weight:600;padding:2px 7px;border-radius:4px;border:1px solid var(--line);color:var(--ink3)}
.sstat.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,transparent)}
.sstat.bad{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 40%,transparent)}
.sstat.wait{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,transparent)}

@media(max-width:560px){
  .rfacts{gap:9px;font-size:12px}
  .rfacts .wide{display:none}
}