/* ============================================================
   Pipezoom - account.css
   The face an account wears: the disc in the top bar, the card at the
   top of the account menu, and the My Account page itself.

   COLOR RULE: no literal color values. Tokens only.
   ============================================================ */

/* The face
   A photograph, or the first letter of the name where there is no
   photograph. Both take the same size and layout. */
.face{
  width:23px;height:23px;
  border-radius:var(--radius-pill);
  flex-shrink:0;
  object-fit:cover;
  display:flex;align-items:center;justify-content:center;
}
.face-letter{
  background:var(--accent-strong);
  color:var(--ink-inverse);
  font-size:.76rem;
  font-weight:700;
  text-transform:uppercase;
  line-height:1;
}
.face-lg{width:64px;height:64px;}
.face-lg.face-letter{font-size:1.6rem;}
.face-xl{width:96px;height:96px;}
.face-xl.face-letter{font-size:2.4rem;}

/* The card at the top of the account menu
   1 card, centered, with the picture on top. A rep signed in on another
   person's machine checks the picture first. */
.pop-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  padding:15px 12px 13px;
  margin:-9px -9px 7px;
  border-bottom:1px solid var(--line);
  border-radius:calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
  background:var(--surface-raised);
  text-align:center;
  color:var(--ink);
}
/* The card links to the account page and takes the hover of the links
   under it. */
a.pop-card:hover{background:var(--surface-high);text-decoration:none;}
a.pop-card:hover .pop-card-name{text-decoration:underline;}
.pop-card-pic{display:flex;margin-bottom:7px;}
.pop-card-name{
  font-size:.98rem;font-weight:700;line-height:1.3;
  color:var(--ink);
  max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pop-card-mail,
.pop-card-at{
  font-size:.79rem;line-height:1.35;
  color:var(--ink-faint);
  max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* Because a rep works in the team and belongs to the company through it,
   the team reads a step stronger than the company above the pill. */
.pop-card-team{color:var(--ink-soft);font-weight:600;}
.pop-card-role{
  margin-top:7px;
  padding:3px 11px;
  border-radius:var(--radius-pill);
  background:var(--accent-strong);
  color:var(--ink-inverse);
  font-size:.69rem;font-weight:700;
  letter-spacing:.4px;
  text-transform:uppercase;
}

.pop-links{display:flex;flex-direction:column;gap:1px;}
.pop-ic{color:var(--ink-faint);font-size:.85rem;margin-right:7px;}
/* A line between the groups in the menu: enough to separate what a rep
   earned from what a rep owns, and not enough to read as a border. */
.pop-rule{
  display:block;
  height:1px;
  margin:6px 10px;
  background:var(--line);
}
.pop-link:hover .pop-ic{color:var(--ink);}

/* Signing out
   Because signing out leaves the site, it gets a line of its own across
   the whole foot of the panel, on the top bar's background. */
.pop-out{
  margin:8px -9px -9px;
  border-top:1px solid var(--line);
}
.pop-out-btn{
  display:block;
  width:100%;
  padding:11px 10px;
  border-radius:0 0 calc(var(--radius) - 1px) calc(var(--radius) - 1px);
  background:var(--shell-bg);
  color:var(--shell-ink);
  font-size:.89rem;
  font-weight:600;
  text-align:center;
}
.pop-out-btn:hover{background:var(--shell-high);}

/* ============================================================
   My Account
   ============================================================ */

/* The account card
   1 card: the picture and the name across the top, and the facts the
   site holds along the bottom. */
.acc-card{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:0 22px;
  align-items:center;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px 22px 0;
  overflow:hidden;
}
.acc-pic{display:flex;flex-direction:column;align-items:center;gap:10px;}
.acc-pic-acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;}
.acc-id{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1;}
.acc-id-name{font-size:1.4rem;font-weight:700;line-height:1.2;}
.acc-id-user{font-size:.9rem;color:var(--ink-soft);}
.acc-id-mail{font-size:.85rem;color:var(--ink-faint);}
.acc-id-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px;}
.acc-tag{
  padding:4px 11px;
  border-radius:var(--radius-pill);
  background:var(--surface-sunken);
  border:1px solid var(--line);
  color:var(--ink-soft);
  font-size:.76rem;font-weight:600;
}
.acc-tag-role{
  background:var(--accent-strong);
  border-color:var(--accent-strong);
  color:var(--ink-inverse);
}

/* The file input stays hidden. The label over it acts as the button on
   every browser, and the submit beside it serves a browser with no script. */
.acc-file{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
.acc-js .acc-pic-go{display:none;}

/* The crop
   The canvas draws exactly the saved picture. The circle previews it:
   the part inside the circle is the saved square. */
.crop-scrim{
  position:fixed;inset:0;
  display:flex;align-items:center;justify-content:center;
  padding:18px;
  background:var(--scrim);
  z-index:80;
}
.crop-panel{
  width:min(360px,100%);
  background:var(--surface-high);
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  box-shadow:var(--shadow-overlay);
  padding:18px;
  display:flex;flex-direction:column;align-items:center;gap:14px;
}
.crop-title{font-size:1.02rem;font-weight:700;align-self:flex-start;}
/* The stage clips the ring's shadow to the picture. */
.crop-stage{
  position:relative;
  width:280px;height:280px;
  flex-shrink:0;
  overflow:hidden;
  border-radius:var(--radius-sm);
}
.crop-canvas{
  display:block;width:280px;height:280px;
  border-radius:var(--radius-sm);
  background:var(--surface-sunken);
  touch-action:none;
  cursor:grab;
}
.crop-canvas:active{cursor:grabbing;}
/* The ring is the mask: everything outside the circle is dimmed by 1
   very large shadow. */
.crop-ring{
  position:absolute;inset:0;
  border-radius:var(--radius-pill);
  box-shadow:0 0 0 9999px var(--scrim);
  pointer-events:none;
}
.crop-zoom{display:flex;align-items:center;gap:11px;width:100%;}
.crop-zoom input{flex:1;min-width:0;accent-color:var(--accent-strong);}
.crop-zoom i{color:var(--ink-faint);font-size:.8rem;}
.crop-zoom i.crop-zoom-big{font-size:1.02rem;}
.crop-acts{display:flex;gap:8px;width:100%;}
.crop-acts .btn{flex:1;justify-content:center;}
.crop-note{font-size:.79rem;color:var(--ink-faint);text-align:center;line-height:1.45;}

/* The facts, along the foot of the same card
   The 1px gaps show the card's line color between the facts, with no
   border on any cell. */
/* 6 facts in 6 fixed columns, with cells that narrow to fit. */
.acc-facts{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:1px;
  margin:20px -22px 0;
  padding-top:1px;
  background:var(--line);
}
.acc-fact{
  background:var(--surface-raised);
  padding:12px 15px;
  display:flex;flex-direction:column;gap:3px;
}
.acc-fact-k{
  font-size:.68rem;font-weight:700;letter-spacing:.5px;
  text-transform:uppercase;color:var(--ink-faint);
}
.acc-fact-v{
  font-size:.92rem;font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

@media (max-width:1080px){
  .acc-facts{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:620px){
  .acc-facts{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* The fields a rep owns */
.acc-form,
.acc-roles{
  display:grid;
  gap:14px;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:17px 19px;
  margin-top:12px;
}
@media (min-width:720px){
  .acc-form{grid-template-columns:repeat(2,minmax(0,1fr));}
  .acc-form-acts{grid-column:1 / -1;}
}
@media (min-width:760px){
  .acc-roles{grid-template-columns:repeat(3,minmax(0,1fr));}
  .acc-roles-acts{grid-column:1 / -1;}
}
.acc-f{display:flex;flex-direction:column;gap:5px;min-width:0;}
.acc-f > span{
  font-size:.7rem;font-weight:700;letter-spacing:.5px;
  text-transform:uppercase;color:var(--ink-faint);
}
.acc-f small{
  display:block;
  font-size:.78rem;font-weight:400;letter-spacing:0;
  text-transform:none;color:var(--ink-faint);
  margin-top:4px;
  line-height:1.45;
}
.acc-in{
  width:100%;
  background:var(--surface-page);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  color:var(--ink);
  padding:9px 12px;
  font-size:.92rem;
  outline:none;
}
.acc-in::placeholder{color:var(--ink-faint);}
.acc-in:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring-soft);}
.acc-in:disabled{background:var(--surface-sunken);color:var(--ink-faint);}
.acc-form-acts,
.acc-roles-acts{display:flex;align-items:center;gap:11px;flex-wrap:wrap;}
.acc-said{font-size:.83rem;color:var(--good-ink);font-weight:600;}
.acc-said[hidden]{display:none;}

@media (max-width:640px){
  .acc-card{grid-template-columns:minmax(0,1fr);justify-items:center;gap:14px 0;}
  .acc-id{align-items:center;text-align:center;width:100%;}
  .acc-facts{margin-top:6px;justify-self:stretch;}
}

/* Backups
   2 halves of 1 job: take a copy, read a copy back. */
.bk{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-top:14px;
}
.bk-half{
  display:flex;flex-direction:column;align-items:flex-start;gap:9px;
  padding:16px 18px;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.bk-k{
  font-size:.72rem;font-weight:700;letter-spacing:.5px;
  text-transform:uppercase;color:var(--ink-faint);
}
.bk-p{
  margin:0;
  font-size:.85rem;line-height:1.5;color:var(--ink-soft);
}
.bk-list{
  margin:0;padding:0 0 0 18px;
  font-size:.83rem;line-height:1.7;color:var(--ink-soft);
}
.bk-form{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:auto;
}
.bk-file{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap;border:0;
}
.bk-file:focus + .bk-name{outline:2px solid var(--accent);outline-offset:2px;}
.bk-pick{cursor:pointer;}
.bk-name{
  font-size:.82rem;color:var(--ink-faint);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  max-width:180px;
}
@media (max-width:760px){
  .bk{grid-template-columns:1fr;}
}