/* The account panel's look, shared by every site.

   It leans on the tokens every site already defines - surface, text, border,
   accent - so it arrives wearing whatever that site wears, in whichever theme
   is on. Nothing here sets a colour of its own except the dimmed backdrop. */

.cea-wrap{position:fixed;inset:0;z-index:900;display:flex;align-items:flex-start;
  justify-content:center;padding:40px 16px;overflow:auto;background:rgba(20,18,16,.55);}
.cea-box{width:560px;max-width:100%;background:var(--surface,#fff);color:var(--text,#1B1A18);
  border:1px solid var(--border,#E3E1DE);border-radius:var(--r-lg,10px);
  box-shadow:0 18px 50px rgba(20,18,16,.3);}
.cea-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 18px;border-bottom:1px solid var(--border,#E3E1DE);}
.cea-head h2{margin:0;font-size:16px;font-weight:600;}
.cea-body{padding:18px;}

.cea-lab{display:block;font-size:10px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--text-3,#918E88);margin:0 0 5px;}
.cea-in{width:100%;box-sizing:border-box;font-family:inherit;font-size:14px;
  color:var(--text,#1B1A18);background:var(--surface-2,#F4F3F1);
  border:1px solid var(--border-strong,#C9C6C1);border-radius:var(--r-sm,4px);padding:8px 10px;}
.cea-in:focus{outline:none;border-color:var(--accent,#6E6B65);background:var(--surface,#fff);}
".cea-quiet{font-size:12.5px;color:var(--text-3,#918E88);margin:6px 0 0;line-height:1.5;}

/* boxes side by side where they belong together, stacking when there is no
   room for two - a first and last name are one line on a desk and two on a
   phone */
/* Three across: a city, a country and a state are one thought, and at two per
   row they read as three. The contact rows keep their own shape. */
.cea-field{min-width:0;margin:0;}
.cea-field.cea-wide{grid-column:span 2;}
.cea-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 16px;}
.cea-row.cea-contact{display:flex;gap:8px;margin:0 0 8px;}
@media (max-width:520px){ .cea-row{grid-template-columns:repeat(2,minmax(0,1fr));} }
.cea-lab{display:flex;align-items:baseline;justify-content:space-between;gap:8px;}
/* how much of the name is left, said in the label where it is being typed */
.cea-count{font-weight:400;letter-spacing:0;text-transform:none;
  font-size:11px;color:var(--text-3,#918E88);}
.cea-count.near{color:var(--attn,#B4640E);}
/* a thing shown rather than typed over */
.cea-fixed{font-size:14px;color:var(--text-2,#63615C);background:var(--surface-2,#F4F3F1);
  border:1px solid var(--border,#E3E1DE);border-radius:var(--r-sm,4px);padding:8px 10px;}
.cea-sec{font-size:12px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;
  color:var(--text-3,#918E88);margin:22px 0 10px;padding-top:14px;
  border-top:1px solid var(--border,#E3E1DE);}

/* The names and the picture: two rows of fields with the picture standing
   up the right-hand side of both, so it belongs to the whole name rather
   than to the display name alone. */
/* The names use the same three columns as the city, the country and the state
   below them, so every box on the form is one width and the whole thing reads
   down a single rhythm instead of two. */
.cea-top{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;align-items:start;margin:0 0 16px;}
/* The chosen name keeps the first row to itself and the given names are put on
   the second, side by side. Left to fill the grid in the order they are
   written they came out as display-then-first with the last name stranded
   underneath the display name. */
.cea-top .cea-chosen-name{grid-column:1;grid-row:1;}
.cea-top .cea-given{grid-row:2;}
/* The picture takes the third column and both rows, and the circle takes
   whatever height the word above it leaves - so it stands exactly as tall as
   the two name boxes beside it whatever those rows measure. Sized by a number
   instead it was three pixels out, and three pixels differently out for
   somebody whose rows came out a hair taller. The circle is measured from
   nothing rather than from the picture in it, because a stretched item that
   sizes itself from its contents grows the very rows it is being measured
   against - one of the three test accounts chased itself up to 130. */
.cea-avatar{grid-column:3;grid-row:1 / span 2;align-self:stretch;
  display:flex;flex-direction:column;align-items:center;gap:5px;}
/* the word sits over the middle of the circle, not over its left edge */
.cea-avatar .cea-lab{justify-content:center;text-align:center;margin:0;}
.cea-facebtn{position:relative;padding:0;border:none;background:none;cursor:pointer;
  flex:1 1 0;min-height:0;width:auto;height:auto;max-width:100%;aspect-ratio:1/1;
  border-radius:50%;overflow:hidden;display:block;}
/* faceHTML writes its own size in, which is right everywhere else it is used -
   in here the button has already been given one by the rows beside it. */
.cea-facebtn>.cea-face{width:100%!important;height:100%!important;}
.cea-facehint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:0 6px;font-size:11px;line-height:1.25;color:#fff;
  background:rgba(20,18,16,.62);opacity:0;transition:opacity .12s;}
.cea-facebtn:hover .cea-facehint,.cea-facebtn:focus-visible .cea-facehint{opacity:1;}
.cea-face{display:block;border-radius:50%;object-fit:cover;background:var(--surface-2,#F4F3F1);
  border:1px solid var(--border,#E3E1DE);}
.cea-initials{display:flex;align-items:center;justify-content:center;font-weight:600;
  color:var(--text-2,#63615C);letter-spacing:.04em;}

/* the pictures, which are their own screen */
/* The Dev Portal's filter bar, group for group: a small label over each, one
   segmented bar under it, children flush and divided by hairlines. Factions
   are pips in their own colour rather than a dropdown, because five colours
   read faster as five colours. */
.cea-fbwrap{display:flex;flex-wrap:wrap;gap:11px 20px;align-items:flex-start;margin:0 0 12px;}
.cea-fbgroup{display:flex;flex-direction:column;gap:5px;}
.cea-fblbl{font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-3,#918E88);}
.cea-bar{display:inline-flex;align-items:stretch;height:31px;max-width:100%;
  border:1px solid var(--border-strong,#C9C6C1);border-radius:var(--r-sm,4px);
  overflow:hidden;background:var(--surface,#fff);}
.cea-bar>*{height:100%;border-radius:0;box-sizing:border-box;}
.cea-bar>*+*{border-left:1px solid var(--border-strong,#C9C6C1);}
.cea-bar select,.cea-bar input{border:none;background:transparent;color:var(--text,#1B1A18);
  font-family:inherit;font-size:12px;padding:0 9px;outline:none;}
.cea-bar select{cursor:pointer;}
/* scoped to the bar on purpose: the picture tiles have been .cea-pick since
   the beginning, and an unscoped min-width here gave every one of them a
   108px floor, which pushed the grid wider than the panel */
.cea-bar .cea-pick{min-width:108px;}
.cea-bar input{width:172px;min-width:90px;}
.cea-bar input::placeholder{color:var(--text-3,#918E88);}
.cea-bar select:focus,.cea-bar input:focus{background:var(--surface-2,#F4F3F1);}
/* a round pip, in its faction's colour, dim until it is the one being asked for */
.cea-pip{width:30px;display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:transparent;}
.cea-pip:hover{background:var(--surface-2,#F4F3F1);}
.cea-pip .pip{width:14px;height:14px;border-radius:50%;border:1px solid rgba(0,0,0,.3);
  opacity:.35;transition:opacity .12s,box-shadow .12s;}
.cea-pip.on{background:var(--surface-3,#E9E8E5);}
.cea-pip.on .pip{opacity:1;box-shadow:0 0 0 2px var(--text-3,#918E88);}
.cea-grid-big{max-height:52vh;}

.cea-tabs{display:flex;gap:4px;margin:0 0 10px;}
.cea-tab{font-family:inherit;font-size:12.5px;padding:5px 11px;cursor:pointer;
  color:var(--text-2,#63615C);background:none;border:1px solid transparent;border-radius:99px;}
.cea-tab:hover{background:var(--surface-2,#F4F3F1);}
.cea-tab.on{background:var(--accent-soft,rgba(110,107,101,.13));
  border-color:var(--accent,#6E6B65);color:var(--text,#1B1A18);}

/* ONE GALLERY. The sections sit in a single scroller rather than each
   scrolling inside itself, so somebody looking for a picture scrolls once and
   passes everything there is - card art, then whatever a site has of its own,
   then the plain ones. */
#cea-gal{overflow:auto;}
#cea-gal .cea-grid{max-height:none;overflow:visible;}
/* the first heading has nothing above it to be divided from */
#cea-gal .cea-sect:first-child .cea-sec{margin-top:0;padding-top:0;border-top:none;}
/* taking a picture off sits under them all, apart from the pictures */
#cea-gal .cea-nonerow{margin-top:14px;}
#cea-gal .cea-sec{position:sticky;top:0;z-index:1;background:var(--surface,#fff);}

/* Rows size to the pictures and stack from the top. Without align-content the
   grid was given a height and shared it out between the rows, squashing every
   tile to 97 by 77 while the square picture inside it overflowed. */
.cea-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;max-height:280px;
  overflow:auto;align-content:start;}
/* The square belongs to the PICTURE, and the tile takes its height from it.
   Putting the ratio on the tile instead asks the row to size itself from an
   item whose own height depends on the row - and the browser resolves that by
   ignoring the ratio, which had the rows overlapping by thirteen pixels. */
.cea-pick{padding:0;border:2px solid transparent;border-radius:8px;background:none;cursor:pointer;
  line-height:0;overflow:hidden;}
.cea-pick img{width:100%;aspect-ratio:1/1;height:auto;object-fit:cover;display:block;
  border-radius:6px;}
.cea-pick:hover{border-color:var(--border-strong,#C9C6C1);}
.cea-pick.on{border-color:var(--accent,#6E6B65);}
.cea-none{line-height:1.2;font-family:inherit;font-size:11.5px;color:var(--text-3,#918E88);
  aspect-ratio:1/1;border:1px dashed var(--border-strong,#C9C6C1);border-radius:8px;}
.cea-none.on{border-style:solid;border-color:var(--accent,#6E6B65);color:var(--text,#1B1A18);}

.cea-more{margin:20px 0 0;border-top:1px solid var(--border,#E3E1DE);padding:14px 0 0;}
.cea-more summary{cursor:pointer;font-size:13px;color:var(--text-2,#63615C);}
.cea-more .cea-lab{margin-top:12px;}
.cea-more .cea-btn{margin-top:8px;}

.cea-msg{font-size:12.5px;color:var(--text-2,#63615C);margin:14px 0 0;min-height:17px;}
.cea-msg.bad{color:var(--danger,#B3402E);}
.cea-acts{display:flex;justify-content:flex-end;gap:8px;margin:14px 0 0;}
.cea-btn{font-family:inherit;font-size:12.5px;font-weight:500;padding:7px 14px;cursor:pointer;
  color:var(--text,#1B1A18);background:var(--surface,#fff);
  border:1px solid var(--border-strong,#C9C6C1);border-radius:var(--r-sm,4px);}
.cea-btn:hover{background:var(--surface-2,#F4F3F1);}
.cea-btn.go{background:var(--accent,#6E6B65);border-color:var(--accent,#6E6B65);
  color:var(--accent-on,#fff);}
.cea-btn:disabled{opacity:.5;cursor:default;}

@media (max-width:560px){
  .cea-wrap{padding:0;}
  .cea-box{border-radius:0;min-height:100%;}
  .cea-grid{grid-template-columns:repeat(4,1fr);}
}

/* ---------------------------------------------------------------- the contact rows
   A kind, the thing itself, and a cross. The kind box is narrow because it
   holds a word, not an address. */
/* What somebody writes is the long half: the kind of thing it is takes one
   column, like a box above it, and the thing itself has the rest of the row.
   A quarter of that row used to be empty. */
.cea-contact{align-items:flex-end;gap:8px;}
.cea-kind{flex:0 0 168px;}
.cea-value{flex:1 1 auto;}
/* Built to an input's own measurements - the same padding, border and line
   box - so that standing it at the foot of the row puts it exactly across the
   box it belongs to. It used to be a shorter button lifted ten pixels, which
   left it riding above the field. */
.cea-drop{flex:0 0 auto;margin:0;padding:8px 10px;line-height:normal;cursor:pointer;
  font-family:inherit;font-size:14px;color:var(--text-3,#918E88);background:none;
  border:1px solid var(--border,#E3E1DE);border-radius:var(--r-sm,4px);}
.cea-drop:hover{color:var(--danger,#B3402E);border-color:var(--danger,#B3402E);}
.cea-add{display:inline-flex;align-items:center;gap:7px;margin:6px 0 4px;padding:6px 12px 6px 9px;
  font-family:inherit;font-size:12.5px;cursor:pointer;color:var(--text-2,#63615C);
  background:none;border:1px dashed var(--border-strong,#C9C6C1);border-radius:99px;}
.cea-add:hover{color:var(--text,#1B1A18);border-color:var(--accent,#6E6B65);}
.cea-plus{font-size:15px;line-height:1;}

/* back to the form from the pictures: an arrow on the title, not a Close -
   closing is what the backdrop and Escape do, and this goes back rather than
   away. It is the height of the words beside it, so this header stands
   exactly as tall as the account one and nothing shifts between them. The
   drawing is the Dev Portal's, and so is the step it takes on hover. */
.cea-back{margin:0 9px 0 0;padding:0;display:flex;align-items:center;
  color:var(--text-2,#63615C);background:none;border:none;cursor:pointer;
  transition:color .18s ease;}
.cea-back svg{display:block;width:18px;height:18px;transition:transform .18s ease;}
.cea-back:hover{color:var(--text,#1B1A18);}
.cea-back:hover svg{transform:translateX(-2px);}
.cea-head h2{display:flex;align-items:center;}