/* Account pages: sign in, create an account, your orders. Loaded after app.css, which holds the tokens and shared parts.
   Everything here sits on the white tee. There is no press on these pages: nothing is being made. */
.acct .site-foot-in{padding-bottom:26px}
.acct .hero{padding-right:0}
.acct-body{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;max-width:520px;padding:12px 40px 80px}
.acct-body.is-wide{max-width:1000px}
.acct-body > section{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}

/* A plain message about what just happened. Problems use .form-error, under the form they belong to. */
.note{padding:11px 14px;border-radius:6px;background:var(--cloth);font-size:15px;font-weight:600}
.note:empty{display:none}

/* Forms: straight, ink-bordered fields from app.css, one column */
.acct-form{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.acct-form .field small{font-size:13.5px;font-weight:400;color:var(--muted)}
.acct-form .cta{margin-top:4px}
.show-pw{display:inline-flex;align-items:center;gap:10px;justify-self:start;min-height:32px;margin-top:-6px;font-size:15px;font-weight:600;cursor:pointer}
.show-pw input{flex:none;width:20px;height:20px;margin:0}
.acct-links{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:15px;font-weight:600}
.acct-links a{font-weight:700}
.acct-links .text-btn{min-height:0;font-weight:700;text-align:left}
.sent-tip{font-size:18px;color:var(--text-2)}

/* Orders: open rows under the ink rule */
.acct-body .list-head{margin-top:0}
.ord-list{list-style:none;margin:-24px 0 0;padding:0}
.ord{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;padding:20px 0;border-bottom:1px solid var(--rule)}
.ord-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px}
.ord-id{font:700 15px/1.3 var(--f-mono)}
.ord-date{font-size:15px;color:var(--muted)}
.ord-status{display:inline-flex;align-items:center;gap:8px;font:italic 800 15px/1 var(--f-display);font-stretch:112%;letter-spacing:.02em;text-transform:uppercase}
/* The same marker the shop sees beside an order, in press order. The word beside it carries the meaning. */
.st{flex:none;width:14px;height:14px;transform:skewX(var(--skew));border-radius:3px;background:var(--magenta)}
.st[data-s="printed"]{background:var(--cyan)}
.st[data-s="complete"]{background:var(--ok)}
.st[data-s="cancelled"]{background:var(--cloth-2);box-shadow:inset 0 0 0 1.5px var(--muted)}
.ord-total{margin-left:auto;font:700 15px/1.3 var(--f-mono);font-variant-numeric:tabular-nums}
.ord-line{color:var(--text-2)}
.ord-thumbs{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ord-thumbs .thumb{cursor:default}
.ord-thumbs .more{padding-left:4px;font:12.5px var(--f-mono);color:var(--muted)}
.ord .rows{max-width:460px}
.ord-more summary,.pw-box summary{width:max-content;max-width:100%;padding:4px 0;cursor:pointer;font-size:15px;font-weight:700}
.ord-more table{max-width:620px}
.ord-more td:first-child{overflow-wrap:anywhere}
.ord-notes{font-size:15px;color:var(--text-2)}
.list-empty + .form-error{margin-top:-12px}
.ord-new{width:auto;justify-self:start;padding:0 34px;text-decoration:none}

.ord-actions{display:flex;flex-wrap:wrap;gap:8px}

/* A reprint: the past order's designs, the customer's details, today's price */
.reprint{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
.reprint .list-head{margin-top:12px}
.rp-list{list-style:none;margin:-20px 0 0;padding:0}
.rp-list li{display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--rule)}
.rp-list li.is-out{opacity:.55}
.rp-list .thumb{cursor:default}
.rp-name{display:grid;gap:4px;min-width:0}
.rp-name .c-name{font-size:14px}
.rp-name .chips{margin-top:2px}
.rp-list .unit input{width:64px;padding:0 10px}
.rp-hint{font-size:15px;color:var(--text-2)}
.rp-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px 24px}
.rp-price{max-width:520px;font-size:15px}
.rp-price .rp-total{justify-content:space-between;margin-top:6px;padding-top:12px;border-top:2px dashed var(--ink);align-items:flex-end}
.rp-price .rp-total::before{display:none}
.rp-price .rp-total dt{color:var(--ink);font-weight:700}
.rp-price .rp-total dd{font:italic 900 26px/1 var(--f-display);font-stretch:112%}
.reprint .ack{max-width:520px}
.reprint .cta{max-width:520px}

/* Your account */
.acct-head{margin-top:32px}
.you-rows{max-width:460px;margin-top:-8px}
.you-rows dd{overflow-wrap:anywhere;text-align:right}
.pw-box .acct-form{max-width:440px;padding-top:12px}
.you-actions{display:flex;flex-wrap:wrap;gap:8px}
a.outline-btn{display:inline-flex;align-items:center;text-decoration:none}

@media (max-width:959px){
  .acct .site-foot-in{padding-bottom:22px}
  .acct-body{padding:16px 16px 56px}
  .show-pw{min-height:44px;margin-top:-10px}
  .ord-more summary,.pw-box summary{padding:11px 0}
  .acct-links{gap:0}
  .acct-links li{display:flex;flex-wrap:wrap;align-items:center;gap:0 6px;min-height:44px}
  .ord-total{margin-left:0;flex-basis:100%}
  .rp-list li{grid-template-columns:64px minmax(0,1fr)}
  .rp-list .mini{grid-column:2;justify-items:start}
  .sent-tip{font-size:16px}
}