/* Hand-written additions on top of app.css (which is generated from the design boards). */
a{color:inherit}
a.card,a.pc,a.brand,a.gbtn,a.go,a.btn,a.btn-ink,a.btn-line,a.lg{text-decoration:none}
body{min-height:100vh}
body>main{max-width:1440px;margin:0 auto}
.top{position:relative;z-index:5}
.muted{color:var(--muted)}
.err{color:var(--down)}
img{display:block}
.ava{overflow:hidden}.ava img{width:100%;height:100%;object-fit:cover}

/* account menu */
details.me{position:relative}
details.me summary{list-style:none;display:flex;align-items:center;gap:12px;cursor:pointer}
details.me summary::-webkit-details-marker{display:none}
.me .menu{position:absolute;right:0;top:52px;min-width:220px;background:var(--card);border:1.5px solid var(--ink);border-radius:18px;box-shadow:0 5px 0 var(--ink);padding:8px;display:flex;flex-direction:column;z-index:20}
.me .menu .who{font-size:13px;color:var(--muted);padding:8px 12px 10px;border-bottom:1px solid var(--line);margin-bottom:4px;word-break:break-all}
.me .menu a,.me .menu button{display:block;width:100%;text-align:left;padding:9px 12px;border-radius:11px;color:var(--ink);text-decoration:none;font-size:15px}
.me .menu a:hover,.me .menu button:hover{background:var(--soft)}

/* pieces tab */
body.pg-pieces .card{color:inherit}
body.pg-pieces .ttl{min-width:0}
body.pg-pieces .url{overflow:hidden;text-overflow:ellipsis}
body.pg-pieces .owner{color:var(--muted);font-size:13px}
body.pg-pieces main{padding-bottom:48px}
body.pg-pieces .card.new code{display:inline-block;margin:2px 0}

/* activity tab */
body.pg-activity main{height:auto;min-height:calc(100vh - 72px)}
body.pg-activity .feed{overflow:visible;padding-bottom:48px}
body.pg-activity .acts form{display:inline}
body.pg-activity .btn.q{position:static;animation:none;font:600 14px var(--body);color:var(--muted)}
body.pg-activity .btn{display:inline-flex;align-items:center}
body.pg-activity .face.worried{background:var(--orange)}
body.pg-activity .face.worried i{border:4px solid var(--ink);border-bottom:0;border-radius:16px 16px 0 0;top:54px}
body.pg-activity a.pc{color:inherit}

/* server tab */
body.pg-server main{padding-bottom:48px}
body.pg-server .waffle{grid-template-columns:repeat(auto-fill,40px);max-width:742px}
body.pg-server .days i.d{background:var(--down)}
body.pg-server .days i:not(.w):not(.d){background:var(--ok)}
body.pg-server .acts form{display:contents}
body.pg-server .btn{display:inline-flex;align-items:center;justify-content:center}
body.pg-server .panel.empty{gap:16px;align-items:flex-start}

/* logs, agents, admin, messages */
body.pg-logs .logs,body.pg-plain .plain{padding:30px 40px 60px;display:flex;flex-direction:column;gap:22px}
.logs-h,.plain-h{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.logs-h h1,.plain-h h1{font-size:30px;letter-spacing:-.03em}
.tabs{display:flex;gap:6px}
.tabs a{padding:8px 14px;border-radius:12px;color:var(--muted);text-decoration:none;font-weight:500;font-size:15px;border:1px solid var(--line)}
.tabs a.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
pre.term{padding:22px 24px;white-space:pre-wrap;word-break:break-word;font-size:13px;line-height:1.6;max-height:calc(100vh - 220px);overflow:auto}
.plain section{display:flex;flex-direction:column;gap:12px}
.plain h2{font-family:var(--body);font-size:13px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:600}
.rows{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:20px;overflow:hidden}
.rows:empty{display:none}
.rowi{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px;border-top:1px solid var(--line)}
.rowi:first-child{border-top:0}
.rowi>div:first-child{display:flex;flex-direction:column;gap:2px;min-width:0}
.rowi b{font-weight:600}
.rowi span{font-size:14px;color:var(--muted)}
.rowi q{font-size:14px;color:var(--ink);margin-top:4px}
.rowi .tag{font-style:normal;font-size:12px;background:var(--soft);border-radius:6px;padding:1px 7px;margin-left:8px;color:var(--muted)}
.btns{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.btn-ink.sm,.btn-line.sm{height:38px;padding:0 14px;font-size:14px;border-radius:12px;display:inline-flex;align-items:center;box-shadow:none}
.btn-ink.sm{box-shadow:0 3px 0 var(--orange)}
.inline{display:flex;gap:8px;flex-wrap:wrap}
.inline input,.inline select{font:inherit;height:38px;padding:0 12px;border-radius:12px;border:1.5px solid var(--line);background:var(--card)}
.inline input{min-width:260px}
.flash{background:#e3f4ec;color:var(--ok);font-weight:600;padding:8px 14px;border-radius:12px;font-size:14px}
.plain code{font-family:var(--mono);font-size:13px;background:var(--soft);padding:2px 7px;border-radius:6px}
.btn-ink,.btn-line{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}

body.pg-msg{display:grid;place-items:center;background-image:radial-gradient(#ddd7cc 1.2px,transparent 1.2px);background-size:28px 28px}
.msg{max-width:520px;padding:32px;display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.msg-logo{width:56px;height:56px}
.msg h1{font-size:36px;letter-spacing:-.035em;line-height:1.08}
.msg p{font-size:18px;color:var(--muted)}
.go{display:inline-flex;align-items:center;height:56px;padding:0 26px;border-radius:18px;background:var(--ink);color:var(--paper);font-weight:600;font-size:17px;box-shadow:0 4px 0 var(--orange);text-decoration:none}

/* onboarding extras */
body[class^="pg-ob"] .it .s.wait{background:var(--soft);color:var(--muted)}
body[class^="pg-ob"] .it .s.bad{background:var(--down)}
body[class^="pg-ob"] .acts a{text-decoration:none}
body.pg-ob1 main,body.pg-ob2 main{padding-bottom:48px}

/* sign-in / not-member / errors fill the window instead of a fixed board */
body.pg-signin,body.pg-notmember{min-height:100vh}
body.pg-signin .gbtn{color:var(--ink)}
body.pg-e404,body.pg-nohost{min-height:100vh;overflow:hidden}
body.pg-notmember .who .ava{display:grid;place-items:center}

/* ---- narrower screens ---------------------------------------------------------------------- */
@media (max-width:1180px){
  body.pg-pieces .grid{grid-template-columns:repeat(2,1fr)}
  body.pg-server main{grid-template-columns:1fr}
  body.pg-ob2 main{grid-template-columns:1fr}
}
@media (max-width:980px){
  body.pg-signin,body.pg-notmember{grid-template-columns:1fr;padding:48px 28px;gap:24px;justify-items:start}
  body.pg-signin .stage,body.pg-notmember .set{width:260px;height:260px}
  body.pg-signin .foot{position:static}
  body.pg-activity main{grid-template-columns:1fr}
  body.pg-activity .list{border-left:0;border-top:1px solid var(--line)}
  body.pg-ob1 main,body.pg-ob3 main{grid-template-columns:1fr;gap:28px}
  body.pg-ob3 .stage svg{width:220px;height:220px}
  body.pg-pieces .hello{flex-direction:column;align-items:stretch}
  body.pg-e404 .crew,body.pg-e404 .big{display:none}
  body.pg-e404 .txt{position:static;padding:140px 28px 40px;width:auto}
  body.pg-nohost .plate{width:min(440px,88vw)}
}
@media (max-width:700px){
  .top{padding:0 18px;gap:12px;height:64px}
  .nav{margin-left:0}.nav a{padding:7px 10px;font-size:14px}
  details.me summary{font-size:0;gap:0}
  .top .brand{font-size:0;gap:0}
  body.pg-pieces main,body.pg-server main,body.pg-ob1 main,body.pg-ob2 main,body.pg-ob3 main{padding:22px 18px 40px}
  body.pg-activity .feed{padding:22px 18px 40px}
  body.pg-pieces .grid{grid-template-columns:1fr}
  body.pg-pieces .hello h1,body.pg-activity .mood h1{font-size:28px}
  body.pg-signin .word{font-size:60px}
  body.pg-ob1 h1,body.pg-ob3 h1{font-size:32px}
  body.pg-ob1 .prompt p{padding-right:0;padding-top:44px}
  [data-steps]{display:none!important}
  body.pg-logs .logs,body.pg-plain .plain{padding:22px 18px 40px}
  .rowi{flex-direction:column;align-items:flex-start}
  body.pg-nohost .crew{display:none}
  body.pg-server .waffle{grid-template-columns:repeat(16,1fr);gap:4px;max-width:none}
  body.pg-server .c{width:auto;height:auto;aspect-ratio:1;border-radius:6px}
  body.pg-server .panel{padding:18px}
  body.pg-server .kv{grid-template-columns:1fr 1fr 1fr}
  body.pg-nohost h1{font-size:34px}
}

/* wide screens: keep the sign-in and not-member compositions together in the middle */
@media (min-width:981px){
  body.pg-signin{grid-template-columns:minmax(0,600px) minmax(0,460px);justify-content:center}
  body.pg-notmember{grid-template-columns:minmax(0,560px) minmax(0,470px);justify-content:center}
  body.pg-signin .foot{left:50%;transform:translateX(-50%)}
}

/* clickable addresses and one-line deploy titles */
.ext{cursor:pointer;text-decoration:none;display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
.ext:hover{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
body.pg-server .dep div{align-items:baseline}
body.pg-server .dep .dt{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- wide screens (ultrawide): keep everything in one centered 1440 / 1280 frame ------------ */
@media (min-width:1521px){
  /* header lines up with the 1440 content column */
  .top{padding-left:calc((100vw - 1440px) / 2 + 40px);padding-right:calc((100vw - 1440px) / 2 + 40px)}
  /* activity: the side list becomes a card instead of a strip floating mid-screen */
  body.pg-activity main{min-height:0}
  body.pg-activity .list{border:1px solid var(--line);border-radius:24px;margin:28px 40px 40px 0;align-self:start}
}
@media (min-width:1281px){
  /* 404 and free-address pages were drawn on a 1280 board: center that board */
  body.pg-e404 .brand,body.pg-e404 .txt{left:calc(50% - 640px + 56px)}
  body.pg-e404 .big{right:calc(50% - 640px + 56px)}
  body.pg-e404 .crew{left:calc(50% - 640px + 600px)}
  body.pg-nohost .brand{left:calc(50% - 640px + 56px)}
  body.pg-nohost .crew{left:calc(50% - 640px);right:auto;width:1280px}
}

form.rm{display:flex;gap:6px;align-items:center}form.rm select{font:inherit;font-size:14px;height:38px;padding:0 8px;border-radius:12px;border:1.5px solid var(--line);background:var(--card)}

/* deleting a piece */
.danger-link{align-self:flex-start;font-size:14px;color:var(--down);text-decoration:none;font-weight:600;margin-top:-6px}
.danger-link:hover{text-decoration:underline;text-underline-offset:3px}
body.pg-plain .del{align-items:center;padding-top:48px}
.del-card{width:min(560px,100%);background:var(--card);border:1.5px solid var(--ink);border-radius:26px;box-shadow:0 6px 0 var(--down);padding:28px;display:flex;flex-direction:column;gap:16px}
.del-k{font-size:13px;letter-spacing:.07em;text-transform:uppercase;color:var(--down);font-weight:700}
.del-card h1{font-size:30px;letter-spacing:-.03em;line-height:1.1}
.del-list{list-style:none;display:flex;flex-direction:column;gap:6px;padding:14px 16px;border-radius:16px;background:var(--soft);font-size:15px}
.del-list:empty{display:none}
.del-list span{color:var(--muted);font-size:14px}
.del-card form{display:flex;flex-direction:column;gap:10px}
.del-card label{font-weight:600;font-size:15px}
.del-card label code{font-family:var(--mono);font-size:14px;background:var(--soft);padding:2px 7px;border-radius:6px}
.del-card .chk{font-weight:500;display:flex;gap:10px;align-items:flex-start}
.del-card .chk input{margin-top:4px;accent-color:var(--down)}
.del-card .chk small{display:block;font-size:13.5px;font-weight:400;margin-top:2px}
.del-card #confirm{font:inherit;font-family:var(--mono);height:46px;padding:0 14px;border-radius:14px;border:1.5px solid var(--line);background:var(--paper)}
.del-card #confirm:focus{outline:none;border-color:var(--ink)}
.btn-danger{height:44px;padding:0 20px;border-radius:14px;background:var(--down);color:#fff;font-weight:700;font-size:15px}
.btn-danger:disabled{background:#e9c9c9;cursor:not-allowed}