/* ═══════════════════════════════════════════════════════════════════
   OWLMARK CERTIFICATE STUDIO — SHARED SYSTEMS
   Companion stylesheet to certificate-shared.js. Written to sit inside
   the studio's existing toolbar without restyling it.
   ═══════════════════════════════════════════════════════════════════ */

.cert-savestatus{
  display:inline-flex;align-items:center;
  min-height:32px;padding:5px 11px;margin-inline-start:4px;
  border-radius:999px;
  background:rgba(46,111,78,.12);
  border:1px solid rgba(46,111,78,.28);
  color:#2E6F4E;
  font-family:'Manrope',system-ui,sans-serif;
  font-size:.72rem;font-weight:700;white-space:nowrap;
}
.cert-savestatus.is-saving{
  background:rgba(201,154,61,.14);
  border-color:rgba(201,154,61,.32);
  color:#8A6420;
}

/* At narrow widths the toolbar is tight; the pill is not worth a wrap. */
@media (max-width: 900px){
  .cert-savestatus{display:none}
}

/* The recovery offer is a strip, never a dialog: it must not stand
   between a teacher and a certificate they were already working on. */
.cert-recover{
  position:fixed;z-index:16900;
  inset-inline-end:18px;bottom:18px;
  max-width:min(430px, calc(100vw - 28px));
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  padding:12px 14px;border-radius:14px;
  background:linear-gradient(180deg,#1B2A47,#101A2D);
  border:1px solid rgba(232,201,120,.38);
  box-shadow:0 16px 40px rgba(0,0,0,.36);
  color:#FAF7EF;
  font-family:'Manrope',system-ui,sans-serif;
  font-size:.82rem;line-height:1.45;
  opacity:0;transform:translateY(8px);
  transition:opacity .22s ease, transform .22s ease;
}
.cert-recover.open{opacity:1;transform:none}
.cert-recover > span{flex:1 1 100%}
.cert-recover button{
  flex:1 1 auto;min-height:44px;padding:9px 14px;
  border-radius:11px;cursor:pointer;
  border:1px solid rgba(250,247,239,.22);
  background:rgba(250,247,239,.08);
  color:#FAF7EF;font:inherit;font-weight:700;
}
.cert-recover button[data-act="restore"]{
  border-color:#A87C2A;color:#1A1207;
  background:linear-gradient(180deg,#D8B15C,#B8862F);
}
.cert-recover button:hover{filter:brightness(1.08)}
.cert-recover button:focus-visible{outline:2px solid #E8C978;outline-offset:2px}

@media (max-width: 520px){
  .cert-recover{inset-inline:12px;max-width:none}
}
@media (prefers-reduced-motion: reduce){
  .cert-recover{transition:none}
}
@media print{
  .cert-savestatus,.cert-recover{display:none !important}
}

/* ═══════════════ THE STEP BAR ON A PHONE ═══════════════
   The theme layer removes the tab strip's scroller so the four step
   tabs share the row's width — a good desktop decision that turns
   hostile at phone widths. At 390px the brand and the utility cluster
   leave the strip FOUR pixels; the tabs cannot shrink below their
   padding, so they spill out of the visible-overflow wrapper and slide
   underneath the utilities, and the mute button silently eats every
   tap meant for steps three and four. On a phone, half the wizard was
   unreachable.

   The cure is a second row. Brand and utilities keep the first; the
   strip takes the full width beneath them and scrolls if it must. The
   !importants below are regrettable and necessary: they must out-argue
   the theme layer's own !importants, and this file loads later, which
   is what settles a tie. Scoped to phone widths so the desktop design
   is untouched. */
@media (max-width: 560px){
  #stepBar{
    flex-wrap: wrap;
    gap: 4px 12px;
    padding-bottom: 6px;
  }
  #stepBar .cs-brand{ order: 0; padding-bottom: 4px; }
  #stepBar .cs-util{ order: 1; margin-inline-start: auto; padding-bottom: 4px; }
  #stepBar .cs-tabs-wrap{
    order: 2;
    flex: 1 1 100%;
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }
  #stepBar .cs-tab-strip{
    width: max-content !important;
    min-width: 100%;
  }
  #stepBar .cs-step-tab{
    flex: 0 0 auto !important;
  }
}