/* The listener style (the "Listener style" board): a light grey page, white cards with a thin edge, square corners,
   Noto Sans, blue for links and main buttons, green to start a call, red to end one, a yellow focus. Only on listener
   pages (html.vw-listener); full-screen practice (the control room, a face-to-face scene) keeps its own look. */
:root{
  --l-ink:#0b0c0c; --l-grey:#505a5f; --l-line:#b1b4b6; --l-edge:#d8d8d8; --l-page:#f3f2f1; --l-card:#ffffff;
  --l-blue:#1d70b8; --l-blue-dark:#003078; --l-green:#00703c; --l-red:#d4351c; --l-focus:#ffdd00;
  --l-purple:#4c2c92; --l-orange:#f47738; --l-note:#fff7bf;
}
html.vw-listener body:not(:has(.gv-main-full)),html.vw-listener body:not(:has(.gv-main-full)) .gv-main{background:var(--l-page)}

/* cards: every listener page's own card, one look */
html.vw-listener :is(.db-card,.db-tile,.pf-card,.pf-tile,.w2-card,.scene-card,.qz-card,.ln-card,.msg-cols,.mr-table,.cx-card,.ah-card,.card,.panel){
  background:var(--l-card)!important;border:1px solid var(--l-edge)!important;border-radius:0!important;box-shadow:none!important}
html.vw-listener :is(.db-tile,.pf-tile){border-top:1px solid var(--l-edge)!important}
html.vw-listener .mp-box{background:var(--l-card);border:1px solid var(--l-edge)!important;padding:16px 18px!important}
html.vw-listener .ln-card-key,html.vw-listener .db-strip{border-radius:0}

/* type */
html.vw-listener .gv-main h1,html.vw-listener .gv-main .h-display{font-size:32px;line-height:1.2;font-weight:700}
html.vw-listener .gv-main :is(.db-h2,.db-card-h,.pf-card h2,.w2-card h2,.qz-card h2){font-size:21px}
html.vw-listener .grey,html.vw-listener .small.grey{color:var(--l-grey)}

/* buttons: blue main, grey secondary, green to start, red to end */
html.vw-listener .btn{border-radius:0!important;font-weight:700}
html.vw-listener :is(.btn-ink,.btn-primary){background:var(--l-blue)!important;border-color:var(--l-blue)!important;color:#fff!important;box-shadow:0 2px 0 var(--l-blue-dark)!important}
html.vw-listener :is(.btn-ink,.btn-primary):hover{background:var(--l-blue-dark)!important;border-color:var(--l-blue-dark)!important}
html.vw-listener :is(.btn-outline,.btn-ghost,.btn-secondary){background:var(--l-page)!important;border-color:var(--l-page)!important;color:var(--l-ink)!important;box-shadow:0 2px 0 #929191!important}
html.vw-listener :is(.btn-go,.db-next-go .btn,.crx-take,#crxStartOne,.sc-go){background:var(--l-green)!important;border-color:var(--l-green)!important;color:#fff!important;box-shadow:0 2px 0 #002d18!important}
html.vw-listener :is(.btn-go,.db-next-go .btn,.crx-take,#crxStartOne,.sc-go):hover{background:#005a30!important}
html.vw-listener :is(.btn-end,.crx-end){background:var(--l-red)!important;border-color:var(--l-red)!important;color:#fff!important;box-shadow:0 2px 0 #55150b!important}

/* fields */
html.vw-listener .gv-main :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea){
  font:inherit;border:2px solid var(--l-ink)!important;border-radius:0!important;background:#fff;color:var(--l-ink)}

/* labels */
html.vw-listener :is(.chip,.db-chip,.pill,.tag){border-radius:0}

/* focus: the yellow highlight, everywhere */
html.vw-listener :focus-visible{outline:3px solid var(--l-focus)!important;outline-offset:0;box-shadow:0 -2px var(--l-focus),0 4px var(--l-ink)!important}
html.vw-listener a:focus-visible{background:var(--l-focus);color:var(--l-ink)!important;text-decoration:none}

/* bars (skills, progress): square, the style's colours */
html.vw-listener :is(.db-sk-bar,.db-bar){border-radius:0!important;background:#e5e6e7}
html.vw-listener :is(.db-sk-bar,.db-bar)>*{border-radius:0!important}

/* "Assigned to you" and "Set for you": black, with the yellow edge */
html.vw-listener :is(.db-next,.mp-set,.qz-set){border-left:8px solid var(--l-focus)!important}