/* ============================================================
   GP Team Hub - 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 when there is one and the first letter of the name when
   there is not, at the same size and shape either way, so the corner of
   the top bar does not change shape the day somebody adds a picture. */
.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 ----
   Centered because there is one of it, and the picture is the first
   thing anybody checks when they are signed in on a machine that is
   not their own. */
.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 is the way to the account page, so it behaves like the
   links under it rather than sitting there as a label. */
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;
}
/* The team reads a step stronger than the company above the pill, since
   the team is the one a rep works in and the company is the wider thing
   they are in through it. */
.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 ----
   The way out of the site is not one more place to go, so it sits under
   a line of its own, across the whole foot of the panel, wearing the
   top bar's surface rather than the panel's. */
.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 card the page is about ----
   One object: the picture and the name across the top, the facts the
   site holds along the bottom of the same card, so the page opens on
   the account rather than on a card and a separate strip. */
.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 is never the control. The label covers it, which is a
   button on every browser, and the submit beside it is what a browser
   with no script still needs. */
.acc-file{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
.acc-js .acc-pic-go{display:none;}

/* ---- Choosing what the picture shows ----
   The canvas draws exactly what gets saved, so the circle is a preview
   rather than a promise: what is inside it is what the square holds. */
.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, so the dimming stays on the
   picture instead of spreading over the panel around it. */
.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 one
   very large shadow rather than by four positioned panels. */
.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 single-pixel gaps let the card's own line color through, which
   rules the facts apart without a border on any one of them. */
/* Six facts, six columns. A count that fitted itself to the space left
   the last one alone on a second line beside a band of empty grey, so
   the count is stated and the cells narrow instead. */
.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 ----
   Two halves of one job: take a copy, read one 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;}
}