/* ============================================================
   VoxenMC accounts - the button in the bar, and the sign in panel.

   This is its own file, with its own custom properties, for the same
   reason toolshell.css is: the panel opens on every page on the site, and
   the 32 tool pages do not load style.css at all. They carry their own
   stylesheets and their own --bg, --panel, --ink and so on, so nothing
   here reads or writes those. Everything is vxa- prefixed and defined
   below.

   Loaded by every page, right after voxen-nav.css.
   ============================================================ */

:root,
[data-theme="dark"]{
  --vxa-slab:    #2a2d34;
  --vxa-slab-2:  #33373f;
  --vxa-deep:    #141519;
  --vxa-edge:    #0e0f12;
  --vxa-line:    #33373f;

  --vxa-lit:     rgba(255,255,255,.045);
  --vxa-lit-2:   rgba(255,255,255,.07);
  --vxa-dark:    rgba(0,0,0,.3);
  --vxa-amb:     rgba(0,0,0,.26);
  --vxa-amb-3:   rgba(0,0,0,.4);
  --vxa-well:    rgba(0,0,0,.42);

  --vxa-ink:     #eef0f3;
  --vxa-ink-2:   #a4abb6;
  --vxa-ink-3:   #6b7280;

  --vxa-green:      #43c94b;
  --vxa-green-side: #1d6b23;
  --vxa-green-ink:  #0c1a0d;
  --vxa-bad:        #ff7a6b;

  --vxa-scrim:   rgba(0,0,0,.66);
  --vxa-focus:   rgba(63,157,251,.55);
  --vxa-font:    "Segoe UI Variable Text","Segoe UI",system-ui,
                 -apple-system,Roboto,Helvetica,Arial,sans-serif;
  --vxa-r:       4px;
}

[data-theme="light"]{
  --vxa-slab:    #ffffff;
  --vxa-slab-2:  #eef1f5;
  --vxa-deep:    #dde2e9;
  --vxa-edge:    #aeb6c2;
  --vxa-line:    #d5dae1;

  --vxa-lit:     rgba(255,255,255,.75);
  --vxa-lit-2:   rgba(255,255,255,1);
  --vxa-dark:    rgba(23,29,40,.10);
  --vxa-amb:     rgba(23,29,40,.15);
  --vxa-amb-3:   rgba(23,29,40,.22);
  --vxa-well:    rgba(23,29,40,.16);

  --vxa-ink:     #14171b;
  --vxa-ink-2:   #4a525c;
  --vxa-ink-3:   #78818d;

  --vxa-green:      #2f9e3a;
  --vxa-green-side: #1a6a22;
  --vxa-green-ink:  #ffffff;
  --vxa-bad:        #c0392b;

  --vxa-scrim:   rgba(23,29,40,.45);
  --vxa-focus:   rgba(28,126,224,.55);
}

/* ---------------- the button in the bar ----------------
   voxen-nav.css paints every .vxn__icon svg with fill:currentColor, and a
   CSS fill beats the inline fill="none" - without this the person comes
   out as a filled blob rather than a drawing. */
.vxn__acct svg{
  fill:none !important;
  stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
.vxn__acct.is-in{ width:auto; padding:0 11px; }

/* The account button is added by JS after the bar is already up, and
   voxen-nav.js moves the theme button in and out of the drawer as the
   width changes - so which of the two lands in the DOM first depends on
   the page. Flex order settles it, and the pair reads the same everywhere. */
.vxn__row > .vxn__theme{  order:1; }
.vxn__row > .vxn__acct{   order:2; }
.vxn__row > .vxn__burger{ order:3; }
.vxn__row > .vxn__links{  order:4; }
.vxn__who{
  font-family:var(--vxa-font); font-weight:700; font-size:13px;
  max-width:11ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* On a phone it sits beside the burger. Both of them carried
   margin-left:auto, so the free space split between them and stranded the
   button in the middle of the bar - the auto has to be on the first of the
   pair, not on both.

   Only on a phone: on a wide screen the burger is not there, the brand's
   own margin-right:auto is already doing the pushing, and a second auto
   here would strand it again. */
@media (max-width:860px){
  .vxn__acct{ margin-left:auto; }
  .vxn__row:has(.vxn__acct) .vxn__burger{ margin-left:0; }
}

/* ---------------- the panel ----------------
   Every [hidden] rule below is load bearing. A `display` on a class
   outranks the browser's own [hidden]{display:none}, so `el.hidden = true`
   does nothing without them - which is why the close button did nothing
   and the name field showed on the sign in tab. */
.vxa{
  position:fixed; inset:0; z-index:900;
  display:grid; place-items:center;
  padding:20px;
  background:var(--vxa-scrim);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  overflow-y:auto;
  font-family:var(--vxa-font);
}
.vxa[hidden]{ display:none; }
body.vxa-open{ overflow:hidden; }

.vxa *,
.vxa *::before,
.vxa *::after{ box-sizing:border-box; }

.vxa__sheet{
  position:relative;
  width:100%; max-width:410px;
  padding:24px 24px 22px;
  background:var(--vxa-slab);
  border-radius:var(--vxa-r);
  box-shadow:
    inset 0 1px 0 var(--vxa-lit-2), inset 0 -1px 0 var(--vxa-dark),
    0 4px 0 var(--vxa-edge), 0 18px 40px rgba(0,0,0,.45);
}
.vxa__step[hidden]{ display:none; }

.vxa__x{
  position:absolute; top:12px; right:12px;
  width:32px; height:32px;
  display:grid; place-items:center;
  padding:0;
  background:var(--vxa-slab-2) !important; border:0 !important;
  border-radius:var(--vxa-r);
  color:var(--vxa-ink-2) !important;
  cursor:pointer;
  box-shadow:inset 0 1px 0 var(--vxa-lit-2), 0 2px 0 var(--vxa-edge) !important;
}
.vxa__x:hover{ color:var(--vxa-ink); filter:brightness(1.14); }
.vxa__x:active{ transform:translateY(2px); box-shadow:inset 0 2px 4px var(--vxa-amb-3); }
.vxa__x svg{ width:15px; height:15px; display:block; fill:none; stroke:currentColor; }

.vxa__sheet h2{
  margin:0 0 5px;
  /* room for the close button, so a longer heading never runs under it */
  padding-right:40px;
  font-family:var(--vxa-font); font-weight:800;
  font-size:20px; line-height:1.25; letter-spacing:-.015em;
  color:var(--vxa-ink);
  text-transform:none;
}
.vxa__lede{
  margin:0 0 14px;
  font-size:13px; line-height:1.55; color:var(--vxa-ink-3);
}
.vxa__lede:last-of-type{ margin-bottom:18px; }
.vxa__who{ color:var(--vxa-ink); }

/* ---------------- continue with Google ---------------- */
.vxa__google{
  width:100%;
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:11px 14px;
  font-family:var(--vxa-font); font-size:14px; font-weight:700;
  color:var(--vxa-ink) !important;
  background:var(--vxa-slab-2) !important;
  border:0 !important; border-radius:var(--vxa-r);
  box-shadow:
    inset 0 1px 0 var(--vxa-lit-2), inset 0 -1px 0 var(--vxa-dark),
    0 3px 0 var(--vxa-edge), 0 5px 9px var(--vxa-amb) !important;
  cursor:pointer;
  outline:2px solid transparent; outline-offset:2px;
}
.vxa__google:hover{ filter:brightness(1.12); }
.vxa__google:focus-visible{ outline-color:var(--vxa-focus); }
.vxa__google:active{ transform:translateY(3px); box-shadow:inset 0 2px 4px var(--vxa-amb-3); }
.vxa__google:disabled{ opacity:.55; cursor:not-allowed; transform:none; }
/* Google's own mark keeps its own colours rather than currentColor */
.vxa__google svg{ width:17px; height:17px; flex:0 0 17px; display:block; }
.vxa__google svg path{ stroke:none; }

.vxa__or{ position:relative; margin:16px 0; text-align:center; }
.vxa__or::before{
  content:""; position:absolute; left:0; right:0; top:50%;
  height:1px; background:var(--vxa-line);
}
.vxa__or span{
  position:relative;
  padding:0 10px;
  background:var(--vxa-slab);
  font-size:11px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--vxa-ink-3);
}

/* ---------------- tabs and the sliding panes ----------------
   The !important here is not decoration. On a tool page tooltheme.css
   paints `body button` grey with !important of its own, and !important
   beats source order however late this file is loaded - without matching
   it, the selected tab came out the same grey as the other one. */
.vxa__tabs{ display:flex; gap:6px; margin-bottom:18px; }
.vxa .vxa__tab{
  flex:1;
  padding:9px 10px;
  font-family:var(--vxa-font); font-size:13px; font-weight:700;
  color:var(--vxa-ink-3) !important;
  background:var(--vxa-deep) !important;
  border:0 !important; border-radius:var(--vxa-r);
  box-shadow:inset 0 2px 4px var(--vxa-well) !important;
  cursor:pointer;
  transform:none;
}
.vxa .vxa__tab.is-on{
  color:var(--vxa-green-ink) !important;
  background:var(--vxa-green) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),
             0 2px 0 var(--vxa-green-side) !important;
}

/* The two panes ride on one track. A flex row is as tall as its tallest
   child, so the sheet keeps one height whichever tab is showing - no jump
   when the name field appears. The 3px of padding is there so a focus ring
   is not clipped by the overflow. */
.vxa__view{ overflow:hidden; margin:0 -3px; padding:0 3px; }
.vxa__track{
  display:flex; align-items:flex-start;
  width:200%;
  transition:transform .3s cubic-bezier(.2,.9,.3,1);
}
.vxa__track.is-up{ transform:translateX(-50%); }
.vxa__pane{ flex:0 0 50%; width:50%; }
/* the pane that has slid away must not still be tabbable */
.vxa__pane[aria-hidden="true"]{ visibility:hidden; }

@media (prefers-reduced-motion:reduce){
  .vxa__track{ transition:none; }
}

/* ---------------- fields ---------------- */
.vxa__row{ display:block; margin-bottom:14px; }
.vxa__row[hidden]{ display:none; }
.vxa__row > span{
  display:block; margin-bottom:6px;
  font-size:11px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--vxa-ink-3);
}
.vxa__hint{
  display:block; margin-top:6px;
  font-size:11.5px; font-style:normal; color:var(--vxa-ink-3);
}
.vxa__row input{
  width:100%;
  padding:10px 12px;
  font-family:var(--vxa-font); font-size:14px;
  color:var(--vxa-ink);
  background:var(--vxa-deep);
  border:0; border-radius:var(--vxa-r);
  box-shadow:inset 0 2px 4px var(--vxa-well), inset 0 -1px 0 var(--vxa-lit);
  outline:2px solid transparent; outline-offset:2px;
}
.vxa__row input::placeholder{ color:var(--vxa-ink-3); opacity:.75; }
.vxa__row input:focus-visible{ outline-color:var(--vxa-focus); }

.vxa__msg{
  margin:10px 0 0;
  font-size:12.5px; color:var(--vxa-ink-3);
  min-height:1em;
}
.vxa__msg.is-bad{ color:var(--vxa-bad); }

/* The submit buttons carry .btn, which exists in style.css but not on a
   tool page - so the plate is painted here too. Tool pages also have
   tooltheme.css setting every button grey with !important, which is why
   this has to out-weigh a single class. */
.vxa .vxa__sheet button[type="submit"],
.vxa .vxa__sheet .vxa__done{
  width:100%;
  margin-top:6px;
  padding:13px 20px;
  font-family:var(--vxa-font); font-size:15px; font-weight:700;
  color:var(--vxa-green-ink) !important;
  background:var(--vxa-green) !important;
  border:0 !important; border-radius:var(--vxa-r);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 4px 0 var(--vxa-green-side), 0 6px 10px var(--vxa-amb) !important;
  cursor:pointer;
  outline:2px solid transparent; outline-offset:2px;
}
.vxa .vxa__sheet button[type="submit"]:hover,
.vxa .vxa__sheet .vxa__done:hover{ filter:brightness(1.08); }
.vxa .vxa__sheet button[type="submit"]:focus-visible,
.vxa .vxa__sheet .vxa__done:focus-visible{ outline-color:var(--vxa-focus); }
.vxa .vxa__sheet button[type="submit"]:active,
.vxa .vxa__sheet .vxa__done:active{
  transform:translateY(4px);
  box-shadow:inset 0 2px 4px var(--vxa-amb-3) !important;
}
.vxa .vxa__sheet button[type="submit"]:disabled,
.vxa .vxa__sheet .vxa__done:disabled{
  opacity:.6; cursor:not-allowed; transform:none;
}

/* "send it again" - a quiet second action under the main one, because it
   is the thing you only want when the first thing did not work */
.vxa__again{
  display:block; width:100%;
  margin-top:12px; padding:6px;
  background:none !important; border:0 !important;
  box-shadow:none !important;
  font-family:var(--vxa-font); font-size:12.5px; font-weight:600;
  color:var(--vxa-ink-3) !important; cursor:pointer;
}
.vxa__again:hover{ color:var(--vxa-ink-2) !important; text-decoration:underline; }
.vxa__again:disabled{ opacity:.5; cursor:not-allowed; text-decoration:none; }

@media (max-width:480px){
  .vxa{ padding:14px; }
  .vxa__sheet{ padding:20px 18px 18px; }
}

/* ============================================================
   FACES, THE ACCOUNT MENU, AND THE COMMENT FIELD

   All three belong here rather than in style.css for the reason at the
   top of this file: tool pages never load style.css, and these have to
   look the same on all 159 pages.
   ============================================================ */

/* ---------------- the round face ----------------
   A Google picture, or the first letter of the name in its place. Both
   are the same tile so a row of comments does not jump about depending
   on who signed in with what. */
.vxc__pic,
.vxa__mepic,
.vxn__pic{
  flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%;
  object-fit:cover;
  background:var(--vxa-deep);
  color:var(--vxa-ink-2);
  font-family:var(--vxa-font); font-weight:700;
  text-transform:uppercase;
  user-select:none;
  overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--vxa-lit);
}

.vxc__pic{ width:26px; height:26px; font-size:12px; }
.vxa__mepic{ width:38px; height:38px; font-size:16px; }
.vxn__pic{ width:20px; height:20px; margin-right:7px; font-size:11px; }

/* The letter tile is the green plate, so a comment from someone with no
   picture still reads as a person rather than a gap. */
.vxc__pic--letter,
.vxa__mepic--letter,
.vxn__pic--letter{
  background:var(--vxa-green);
  color:var(--vxa-green-ink);
  box-shadow:none;
}

/* ---------------- the account menu ----------------
   Clicking your own name in the bar opens this. It is fixed rather than
   absolute because the bar is sticky and the drawer it sometimes sits in
   clips its own children. */
.vxa__menu{
  position:fixed; z-index:1400;
  min-width:216px; max-width:min(280px, calc(100vw - 20px));
  padding:6px;
  background:var(--vxa-slab);
  border-radius:var(--vxa-r);
  box-shadow:
    inset 0 1px 0 var(--vxa-lit-2), inset 0 -1px 0 var(--vxa-dark),
    0 3px 0 var(--vxa-edge), 0 8px 18px var(--vxa-amb-3);
  font-family:var(--vxa-font);
}
.vxa__menu[hidden]{ display:none; }

.vxa__mewho{
  display:flex; align-items:center; gap:11px;
  padding:11px 12px 12px;
  border-bottom:1px solid var(--vxa-line);
  margin-bottom:6px;
}
.vxa__mewho > div{ min-width:0; }        /* so the ellipsis below can work */
.vxa__mewho b{
  display:block;
  font-size:13.5px; color:var(--vxa-ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.vxa__mewho span{
  display:block;
  font-size:11.5px; color:var(--vxa-ink-3);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* Flat rows, not plates - a plate inside a plate reads as a second panel
   rather than a list of choices. */
.vxa__meitem{
  display:block; width:100%;
  padding:9px 12px;
  background:none; border:0; border-radius:3px;
  font-family:inherit; font-size:13px; font-weight:600; text-align:left;
  color:var(--vxa-ink-2);
  cursor:pointer;
}
.vxa__meitem:hover{ background:var(--vxa-slab-2); color:var(--vxa-ink); }
.vxa__meitem:focus-visible{ outline:2px solid var(--vxa-focus); outline-offset:-2px; }
.vxa__meout:hover{ color:var(--vxa-bad); }

/* ---------------- the comment field ----------------
   tooltheme.css already dresses this on the 32 tool pages, with a
   heavier selector, so this rule is for the other 127 - the home page,
   the pack pages and contact - where nothing was styling it at all and
   the box came out as the browser's own grey rectangle. */
.vxc__form textarea{
  display:block; width:100%;
  padding:11px 13px;
  font-family:var(--vxa-font); font-size:14px; line-height:1.55;
  color:var(--vxa-ink);
  background:var(--vxa-deep);
  border:0; border-radius:var(--vxa-r);
  box-shadow:inset 0 2px 4px var(--vxa-well), inset 0 -1px 0 var(--vxa-lit);
  outline:0;
  resize:vertical;
  transition:box-shadow .1s linear;
}
.vxc__form textarea::placeholder{ color:var(--vxa-ink-3); }
.vxc__form textarea:focus{
  box-shadow:inset 0 2px 4px var(--vxa-well), 0 0 0 2px var(--vxa-focus);
}

/* ---------------- the heart on a comment ----------------
   Outline until you press it, filled after. The count sits beside it and
   is blank at zero - a row of "0"s down the page says nothing.

   On tool pages tooltheme.css paints every button inside .vxc as a green
   plate, so this is undone again there at that file's own weight; these
   are the base rules for the other 127 pages. */
.vxc__foot{ margin-top:9px; }

.vxc__like{
  display:inline-flex; align-items:center; gap:6px;
  padding:0;
  background:none; border:0; box-shadow:none;
  font-family:var(--vxa-font); font-size:12px; font-weight:700;
  line-height:1;
  color:var(--vxa-ink-3);
  cursor:pointer;
}
.vxc__like svg{
  fill:none;
  stroke:currentColor; stroke-width:1.4;
  stroke-linejoin:round;
  transition:fill .12s linear;
}
.vxc__like:hover{ color:var(--vxa-green); }
.vxc__like:focus-visible{ outline:2px solid var(--vxa-focus); outline-offset:3px; border-radius:3px; }
.vxc__like:disabled{ cursor:default; opacity:.7; }

.vxc__like.is-on{ color:var(--vxa-green); }
.vxc__like.is-on svg{ fill:currentColor; stroke:currentColor; }

.vxc__likes{ min-width:1ch; }