/* PianoMK Members — pianomk.com
 *
 * The same soft neo-brutalism as Theory Trainer — even 2.5px borders, no offset
 * shadows, a press-scale on :active, a quiet tint on hover, dashed focus rings —
 * but with the colours taken out. Every border and every mark of type is drawn
 * in currentColor, so the forms arrive wearing whatever the theme is wearing.
 * Nothing here sets a font family or a colour value.
 *
 * Every rule is scoped under .msw, and that is not tidiness — it is specificity.
 * A bare .msw-input scores 0,1,0 and a theme's input[type="text"] scores 0,1,1,
 * so the theme would win and the borders would quietly vanish. Under .msw the
 * plugin scores 0,2,0 and keeps what it drew. Classes that sit on the same
 * element as .msw are written .msw.msw-gate rather than .msw .msw-gate.
 *
 * Escape hatches, all settable from the theme's own stylesheet:
 *   .msw{--msw-max:none}        let the form fill its column
 *   .msw{--msw-caps:none}       stop shouting the labels and buttons
 *   .msw{--msw-track:0}         drop the letter-spacing with it
 *   .msw{--msw-radius:0}        square everything off
 *   .msw{--msw-line:#1A1A1A}    draw the borders in something other than the text
 *
 * To put the Theory Trainer palette back on, uncomment this and the forms will
 * match the trainer sitting further down the page:
 *
 *   .msw{
 *     --msw-line:#1A1A1A;
 *     --msw-tint:#E8E4D8;
 *     --msw-accent:#D6F5D6;
 *     background:#FFFDF8; color:#1A1A1A;
 *     padding:clamp(16px,2.2vw,24px); border-radius:14px;
 *   }
 */

.msw{
  --msw-bw:2.5px;
  --msw-radius:13px;
  --msw-pill:999px;
  --msw-gap:14px;
  --msw-pad:12px 15px;
  --msw-tap:48px;
  --msw-max:34rem;

  /* Type. Family and size come from the theme; only the shape of the small
     labels is set here, and it can be switched off in one line. */
  --msw-caps:uppercase;
  --msw-track:.14em;
  --msw-weight:600;
  --msw-small:.72rem;
  --msw-muted:.66;

  /* Colour, such as it is: the text colour, and a wash made from it. */
  --msw-line:currentColor;
  --msw-tint:rgba(128,128,128,.14);
  --msw-accent:var(--msw-tint);
  --msw-ease:cubic-bezier(.16,1,.3,1);

  box-sizing:border-box;
  line-height:1.55;
}
@supports (background:color-mix(in srgb,currentColor 8%,transparent)){
  .msw{
    --msw-tint:color-mix(in srgb,currentColor 8%,transparent);
    --msw-accent:color-mix(in srgb,currentColor 14%,transparent);
  }
}
.msw *,.msw *::before,.msw *::after{box-sizing:border-box}

/* Themes style buttons hard — uppercase, shadows, their own font. Reset first,
   then the rules below put back only what is wanted. */
.msw button{
  font-family:inherit;font-size:inherit;line-height:inherit;color:inherit;
  margin:0;text-transform:none;letter-spacing:normal;text-shadow:none;box-shadow:none;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  -webkit-user-select:none;user-select:none;-webkit-appearance:none;appearance:none;
}

/* One focus ring for the whole plugin. */
.msw :focus-visible,
.msw .msw-password:focus-within{outline:3px dashed currentColor;outline-offset:3px}
.msw .msw-password:focus-within .msw-input:focus{outline:0}

/* ============================================================ the form body */
.msw .msw-form{
  display:flex;flex-direction:column;gap:var(--msw-gap);
  max-width:var(--msw-max);margin:0;
  /* holds the honeypot's absolute position, so parking it off to the left
     cannot give the page a horizontal scrollbar */
  position:relative;
}
.msw .msw-field{display:flex;flex-direction:column;gap:6px;margin:0;padding:0}

.msw .msw-label{
  font-size:var(--msw-small);font-weight:var(--msw-weight);
  letter-spacing:var(--msw-track);text-transform:var(--msw-caps);
  opacity:var(--msw-muted);display:block;
}
.msw .msw-hint{font-size:.85em;opacity:var(--msw-muted);line-height:1.4;display:block}

.msw .msw-input{
  font:inherit;color:inherit;background:transparent;
  width:100%;min-height:var(--msw-tap);padding:var(--msw-pad);margin:0;
  border:var(--msw-bw) solid var(--msw-line);border-radius:var(--msw-radius);
  -webkit-appearance:none;appearance:none;box-shadow:none;
}
/* Chrome paints its own tint on a remembered field; without this the border and
   the fill disagree about what colour the form is. */
.msw .msw-input:-webkit-autofill{-webkit-text-fill-color:currentColor}

/* ------------------------------------------------- password + show/hide */
/* The wrapper carries the border and the reveal button is divided off it, the
   way the trainer's segmented switches are built. */
.msw .msw-password{
  display:flex;align-items:stretch;
  border:var(--msw-bw) solid var(--msw-line);border-radius:var(--msw-radius);
  overflow:hidden;
}
.msw .msw-password .msw-input{flex:1 1 auto;min-width:0;border:0;border-radius:0}
.msw .msw-reveal{
  flex:0 0 auto;cursor:pointer;
  font-size:var(--msw-small);font-weight:var(--msw-weight);
  letter-spacing:var(--msw-track);text-transform:var(--msw-caps);
  background:transparent;
  border:0;border-left:var(--msw-bw) solid var(--msw-line);
  padding:0 16px;min-width:74px;
  transition:background-color .15s var(--msw-ease);
}
@media (hover:hover){ .msw .msw-reveal:hover{background:var(--msw-tint)} }

/* ------------------------------------------------------------- remember me */
.msw .msw-field-check{gap:0}
.msw .msw-check{
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  font-size:.92em;opacity:1;text-transform:none;letter-spacing:normal;
}
.msw .msw-check input[type="checkbox"]{
  width:20px;height:20px;margin:0;flex:0 0 auto;
  accent-color:currentColor;cursor:pointer;-webkit-appearance:auto;appearance:auto;
}

/* ================================================================= buttons */
.msw .msw-button{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:52px;padding:12px 24px;cursor:pointer;text-align:center;
  font-size:var(--msw-small);font-weight:var(--msw-weight);
  letter-spacing:var(--msw-track);text-transform:var(--msw-caps);
  color:inherit;background:var(--msw-accent);text-decoration:none;
  border:var(--msw-bw) solid var(--msw-line);border-radius:var(--msw-radius);
  -webkit-appearance:none;appearance:none;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:transform .15s var(--msw-ease),background-color .15s var(--msw-ease);
}
.msw .msw-button:active{transform:scale(.96)}
.msw .msw-button:hover,
.msw .msw-button:focus{color:inherit;text-decoration:none}
.msw .msw-button-ghost{background:transparent}
@media (hover:hover){ .msw .msw-button-ghost:hover{background:var(--msw-tint)} }

.msw .msw-actions{display:flex;flex-wrap:wrap;gap:12px;margin:0;padding:0}
.msw .msw-actions .msw-button{flex:1 1 auto}

/* A download reads as one item in a list of them, not as the point of the page,
   so it is a pill rather than a full-width slab. */
.msw .msw-button-download{
  min-height:44px;padding:10px 20px;border-radius:var(--msw-pill);
  background:transparent;
}
@media (hover:hover){ .msw .msw-button-download:hover{background:var(--msw-tint)} }

/* =============================================== notices, links, small print */
.msw .msw-notice{
  max-width:var(--msw-max);margin:0 0 var(--msw-gap);padding:12px 15px;
  border:var(--msw-bw) solid var(--msw-line);border-radius:var(--msw-radius);
  background:var(--msw-tint);font-size:.95em;
}
.msw .msw-notice-line{margin:0;padding:0}
.msw .msw-notice-line+.msw-notice-line{margin-top:6px}

.msw .msw-alt{margin:0;padding:0;font-size:.92em;opacity:var(--msw-muted)}
.msw .msw-link{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* The honeypot. Out of sight and out of the tab order, but still a real field
   that a form-stuffing robot will find and fill. Never display:none — some of
   them have learned to skip that. */
.msw .msw-hp{
  position:absolute !important;
  left:-10000px;top:0;width:1px;height:1px;
  overflow:hidden;margin:0;padding:0;
}

/* ==================================================== the wall and the gate */
/* These four sit on the same element as .msw, hence the doubled class. */
.msw.msw-gate{
  max-width:var(--msw-max);padding:clamp(16px,2.4vw,22px);
  border:var(--msw-bw) dashed var(--msw-line);border-radius:var(--msw-radius);
}
.msw .msw-gate-message{margin:0 0 var(--msw-gap);padding:0}
.msw .msw-gate-actions{display:flex;flex-wrap:wrap;gap:12px;margin:0;padding:0}
.msw .msw-gate-actions .msw-button{flex:1 1 auto}

.msw.msw-account{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin:0;padding:0;
}
.msw .msw-greeting{font-weight:var(--msw-weight)}

.msw.msw-download{display:inline-block}
.msw.msw-download-locked{font-size:.95em;opacity:var(--msw-muted)}
.msw.msw-logout{display:inline-block}

/* ================================================================== phones */
@media (max-width:480px){
  .msw{--msw-max:none}
  .msw .msw-actions,
  .msw .msw-gate-actions{flex-direction:column}
  .msw .msw-reveal{min-width:64px;padding:0 12px}
}

@media (prefers-reduced-motion:reduce){
  .msw *{transition:none !important}
  .msw .msw-button:active{transform:none}
}

/* ============================================== the item in the header menu
 * These are the only rules in the file not scoped under .msw, because the menu
 * item lives in the theme's <ul>, not in ours. The link is left completely
 * alone on purpose — it should be whatever the other items in that menu are.
 * Only the name needs a word, since it is a span where its neighbours are
 * links and would otherwise sit on the baseline wrong. */
.msw-menu-name > span{
  display:inline-block;
  padding:9px 4px;
  opacity:.7;
  white-space:nowrap;
}

/* ================================================== log in / register tabs */
/* The segmented switch from the trainer: one bordered pill, the halves divided
   off each other rather than each carrying its own outline. */
.msw .msw-tabs{
  display:inline-flex;margin:0 0 var(--msw-gap);
  border:var(--msw-bw) solid var(--msw-line);border-radius:var(--msw-pill);
  overflow:hidden;
}
.msw .msw-tab{
  cursor:pointer;background:transparent;border:0;
  padding:11px 22px;min-height:44px;
  font-size:var(--msw-small);font-weight:var(--msw-weight);
  letter-spacing:var(--msw-track);text-transform:var(--msw-caps);
  transition:transform .15s var(--msw-ease),background-color .15s var(--msw-ease);
}
.msw .msw-tab + .msw-tab{border-left:var(--msw-bw) solid var(--msw-line)}
.msw .msw-tab:active{transform:scale(.95)}
.msw .msw-tab[aria-selected="true"]{background:var(--msw-accent)}
@media (hover:hover){
  .msw .msw-tab:hover{background:var(--msw-tint)}
  .msw .msw-tab[aria-selected="true"]:hover{background:var(--msw-accent)}
}
/* Script blocked: no panel is hidden, so both forms stand one under the other
   with a little air between them and the page still works. */
.msw .msw-panel + .msw-panel{margin-top:var(--msw-gap)}

.msw .msw-notice-ok{background:transparent}