/*
 * Nicole cashier recorder. Colours, sizes and radii come from the design
 * file RecorderApp.dc.html. Most element styles sit inline in the
 * templates, copied from the design. This file holds what inline styles
 * cannot do: animations, hover and focus, the phone and desktop layouts,
 * and show or hide.
 *
 * Phone layout: below 768px wide (bottom tabs).
 * Desktop layout: 768px and wider (210px sidebar).
 */

@keyframes sr-bar { 0%,100%{transform:scaleY(.35)} 50%{transform:scaleY(1)} }
@keyframes sr-pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
@keyframes sr-spin { to{transform:rotate(360deg)} }

html, body { height:100%; margin:0; }
body { background:#F2EADB; }
#root {
  width:100%; height:100%; height:100dvh; overflow:auto;
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  color:#3A2A18; background:#F2EADB; box-sizing:border-box;
  -webkit-font-smoothing:antialiased;
}
button { -webkit-tap-highlight-color:transparent; }
[hidden] { display:none !important; }

/* Hover states (the design's style-hover). Inline backgrounds need !important. */
.h-dark:hover { background:#2a1d10 !important; }
.h-cream:hover { background:#FBF7EF !important; }
.h-beige:hover { background:#ece0cb !important; }
.h-logout:hover { background:#fbeeea !important; }
.h-redbtn:hover { background:#96302f !important; }
.h-logoutbig:hover { background:#f6e0da !important; }
.h-underline:hover { text-decoration:underline; }

/* Focus state of the login fields (the design's style-focus). */
.inp:focus { border-color:#D89A2A !important; box-shadow:0 0 0 3px rgba(216,154,42,.2); }
.inp::placeholder, .txt::placeholder { color:#b3a595; }
button:focus-visible, select:focus-visible, textarea:focus-visible, [role="button"]:focus-visible {
  outline:2px solid #D89A2A; outline-offset:2px;
}

/* Mic status hover card in the desktop header. */
.mic-status { position:relative; cursor:default; }
.mic-status .mic-tip { position:absolute; top:calc(100% + 10px); right:0; opacity:0; visibility:hidden;
  transform:translateY(-4px); transition:opacity .16s ease,transform .16s ease; pointer-events:none; z-index:40; }
.mic-status:hover .mic-tip { opacity:1; visibility:visible; transform:translateY(0); }

/* Level meter bars in the audio quality box and the mic cards. */
.lvl-bar { transition:background-color .15s linear; }
.lvl-anim { animation:sr-bar 1s ease-in-out infinite; }

/* Microphone select: a real select drawn like the design's box. */
.mic-select { appearance:none; -webkit-appearance:none; -moz-appearance:none; width:100%; height:100%;
  border:none; background:transparent; font-size:15px; font-family:inherit; color:#3A2A18; outline:none;
  padding:0 40px 0 16px; cursor:pointer; text-overflow:ellipsis; }
.mic-select:disabled { cursor:default; }

.txt { width:100%; min-height:110px; resize:vertical; box-sizing:border-box; border:1.5px solid #E4D8C2;
  border-radius:10px; padding:12px 14px; font-size:15px; font-family:inherit; color:#3A2A18; outline:none; }
.txt:focus { border-color:#D89A2A; box-shadow:0 0 0 3px rgba(216,154,42,.2); }

/* ------------------------------------------------ phone versus desktop */
.phone-only { display:none !important; }
.card { min-height:620px; padding:48px 38px 52px; }
.content-area { padding:36px 24px; }
.card-title { font-size:26px; }
.timer { font-size:56px; }

@media (max-width: 767px) {
  .desk-only { display:none !important; }
  .phone-only { display:flex !important; }
  .card { min-height:560px; padding:36px 18px 40px; }
  .content-area { padding:16px 14px 24px; }
  .card-title { font-size:22px; }
  .timer { font-size:44px; }
}

/* The bottom tabs are removed while "Read this first" or "How Nicole works" is open. */
#tabs.tabs-off { display:none !important; }

/* Buttons on the recorder card sit side by side, and wrap on a very narrow phone. */
.rec-buttons { flex-wrap:wrap; }
@media (max-width: 389px) {
  .rec-buttons button { min-width:130px !important; }
}

/* The card never shrinks below its content, and a tall card scrolls
   instead of being cut off at the top. */
.card, .content-area > * { flex-shrink:0; }
.content-area { justify-content:safe center !important; }