/* WiseCall initial avatar, CSS version (PROPOSAL). Pair with avatar-initial.js (sets the letter and data-tone).
   The inset ring is the Live Dot outer ring: matching the SVG (r27, 2/64 stroke). Set --size (default 40px). */
.wc-avatar{--size:40px;--bg:#163C30;--fg:#F7F4EC;--ring:#DDE8DC;--edge:transparent;
  display:inline-grid;place-items:center;flex:none;width:var(--size);height:var(--size);border-radius:50%;
  background:var(--bg);color:var(--fg);
  box-shadow:inset 0 0 0 calc(var(--size)*.0234) var(--edge),inset 0 0 0 calc(var(--size)*.078) var(--bg),inset 0 0 0 calc(var(--size)*.109) var(--ring);
  font-family:"Fraunces","Iowan Old Style",Georgia,serif;font-weight:600;font-size:calc(var(--size)*.44);line-height:1;letter-spacing:-.01em;
  user-select:none;overflow:hidden}
.wc-avatar[data-tone="1"]{--bg:#163C30;--fg:#F7F4EC;--ring:#DDE8DC}
.wc-avatar[data-tone="2"]{--bg:#DDE8DC;--fg:#163C30;--ring:#2F6B55}
.wc-avatar[data-tone="3"]{--bg:#F2B33D;--fg:#121815;--ring:#163C30}
.wc-avatar[data-tone="4"]{--bg:#2F6B55;--fg:#F7F4EC;--ring:#DDE8DC}
.wc-avatar[data-tone="5"]{--bg:#F7F4EC;--fg:#163C30;--ring:#F2B33D;--edge:#E4DED0}
.wc-avatar[data-tone="6"]{--bg:#163C30;--fg:#F2B33D;--ring:#F2B33D}
/* Below 32px the ring gets too thin to read: drop it, keep the tone. */
.wc-avatar.is-small{box-shadow:inset 0 0 0 calc(var(--size)*.0234) var(--edge)}
/* Designed avatars as <img>: same circle, same edge on Paper. */
.wc-avatar-img{width:var(--size,40px);height:var(--size,40px);border-radius:50%;display:inline-block;flex:none}