/* ═══════════════════════════════════════════════════════════════════
   OWLMARK STUDIO — SCHOOL BRAND KIT
   Companion stylesheet to owlmark-brand.js.
   ═══════════════════════════════════════════════════════════════════ */

.omb-scrim{
  position:fixed;inset:0;z-index:17600;
  display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(11,18,32,0);
  transition:background .24s ease;
}
.omb-scrim.open{background:rgba(11,18,32,.56)}

.omb-panel{
  width:min(760px,100%);max-height:90vh;
  display:flex;flex-direction:column;
  border-radius:20px;overflow:hidden;
  background:linear-gradient(180deg,#FFFDF8,#F6F0E2);
  border:1px solid rgba(201,154,61,.34);
  box-shadow:0 28px 68px rgba(10,16,32,.4);
  transform:translateY(12px) scale(.99);
  transition:transform .24s cubic-bezier(.22,.8,.3,1);
}
.omb-scrim.open .omb-panel{transform:none}

.omb-head{
  display:flex;align-items:center;gap:12px;
  padding:16px 18px;border-bottom:1px solid rgba(16,26,45,.1);
}
.omb-head h2{
  margin:0;flex:1 1 auto;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1.44rem;font-weight:700;color:#101A2D;
}
body.lang-ar .omb-head h2{font-family:'Cairo',system-ui,sans-serif;font-size:1.2rem}
.omb-x{
  flex:0 0 44px;width:44px;height:44px;
  border:1px solid rgba(16,26,45,.12);border-radius:11px;
  background:rgba(16,26,45,.04);color:#3A4257;cursor:pointer;font-size:1rem;
}
.omb-x:hover{background:rgba(16,26,45,.09)}
.omb-x:focus-visible{outline:2px solid #B8862F;outline-offset:2px}

.omb-body{flex:1 1 auto;overflow:auto;padding:18px}

.omb-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:12px;margin-bottom:16px;
}
.omb-f{display:flex;flex-direction:column;gap:5px}
.omb-f.omb-wide{grid-column:1/-1}

/* ── The automatic switch ─────────────────────────────────────────────
   Sits under the Apply buttons, because it is the same action promoted
   to a standing instruction rather than a separate feature. */
.omb-auto{
  display:flex;align-items:flex-start;gap:9px;
  margin-top:12px;padding-top:11px;
  border-top:1px solid rgba(16,26,45,.1);
  cursor:pointer;
}
.omb-auto input{
  width:18px;height:18px;flex:0 0 18px;margin-top:1px;
  accent-color:#B8862F;cursor:pointer;
}
.omb-auto span{
  font-family:'Manrope',system-ui,sans-serif;
  font-size:.82rem;font-weight:700;color:#3A4257;line-height:1.4;
}
.omb-auto-note{
  margin:5px 0 0 27px;
  font-family:'Manrope',system-ui,sans-serif;
  font-size:.73rem;font-weight:500;line-height:1.5;color:#6B7488;
}
body.lang-ar .omb-auto span,body.lang-ar .omb-auto-note{font-family:'Cairo',system-ui,sans-serif}
html[dir="rtl"] .omb-auto-note{margin:5px 27px 0 0}

/* Thirteen unlabelled boxes in one run read as a form to be endured.
   Three named groups read as three short questions. */
.omb-sec{
  grid-column:1/-1;margin:8px 0 -2px;
  font-family:'Manrope',system-ui,sans-serif;
  font-size:.66rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:#8A6420;
}
.omb-sec:first-child{margin-top:0}
body.lang-ar .omb-sec{font-family:'Cairo',system-ui,sans-serif;letter-spacing:.02em}
.omb-f input::placeholder{color:rgba(16,26,45,.32);font-weight:500}
.omb-f > span{
  font-family:'Manrope',system-ui,sans-serif;
  font-size:.76rem;font-weight:700;color:#5A6478;
}
.omb-f input,.omb-f select{
  min-height:44px;padding:10px 12px;
  border:1px solid rgba(16,26,45,.16);border-radius:11px;
  background:#FFFDF8;color:#101A2D;
  font-family:'Manrope',system-ui,sans-serif;font-size:.88rem;
}
.omb-f input[type="color"]{padding:4px;cursor:pointer}
.omb-f input:focus,.omb-f select:focus{outline:2px solid #B8862F;outline-offset:-1px;border-color:#B8862F}
body.lang-ar .omb-f > span,body.lang-ar .omb-f input,body.lang-ar .omb-f select{
  font-family:'Cairo',system-ui,sans-serif;
}

.omb-img{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 12px;margin-bottom:9px;
  border:1px solid rgba(16,26,45,.12);border-radius:13px;
  background:rgba(255,255,255,.6);
}
.omb-img-lb{
  flex:1 1 130px;
  font-family:'Manrope',system-ui,sans-serif;
  font-size:.84rem;font-weight:700;color:#101A2D;
}
.omb-img-prev{
  flex:0 0 auto;
  width:64px;height:44px;
  display:flex;align-items:center;justify-content:center;
  border-radius:9px;border:1px dashed rgba(16,26,45,.18);
  /* A chequerboard, so a transparent crest reads as transparent rather
     than as a white rectangle the teacher will be surprised by in print. */
  background-image:
    linear-gradient(45deg,rgba(16,26,45,.07) 25%,transparent 25%,transparent 75%,rgba(16,26,45,.07) 75%),
    linear-gradient(45deg,rgba(16,26,45,.07) 25%,transparent 25%,transparent 75%,rgba(16,26,45,.07) 75%);
  background-size:12px 12px;background-position:0 0,6px 6px;
  overflow:hidden;
}
.omb-img-prev img{max-width:100%;max-height:100%;object-fit:contain}
.omb-img-prev em{font-size:.72rem;color:#78808F;font-style:normal}
body.lang-ar .omb-img-lb{font-family:'Cairo',system-ui,sans-serif}

.omb-apply{
  margin:16px 0 6px;padding:14px;
  border-radius:14px;
  background:rgba(201,154,61,.1);
  border:1px solid rgba(201,154,61,.28);
}
.omb-apply h3{
  margin:0 0 10px;
  font-family:'Manrope',system-ui,sans-serif;
  font-size:.86rem;font-weight:800;color:#101A2D;
}
.omb-applybtns{display:flex;flex-wrap:wrap;gap:8px}
body.lang-ar .omb-apply h3{font-family:'Cairo',system-ui,sans-serif}

.omb-foot{
  display:flex;flex-wrap:wrap;gap:8px;
  margin-top:16px;padding-top:14px;
  border-top:1px solid rgba(16,26,45,.1);
}

.omb-btn{
  min-height:44px;padding:10px 15px;
  border-radius:12px;cursor:pointer;
  border:1px solid rgba(16,26,45,.14);
  background:rgba(16,26,45,.04);color:#3A4257;
  font-family:'Manrope',system-ui,sans-serif;
  font-size:.84rem;font-weight:700;
}
.omb-btn:hover{background:rgba(16,26,45,.09)}
.omb-btn.gold{
  border-color:#A87C2A;color:#fff;
  background:linear-gradient(180deg,#D8B15C,#B8862F);
}
.omb-btn.gold:hover{background:linear-gradient(180deg,#E2BE72,#C4923A)}
.omb-btn.danger{color:#9E3B2C;border-color:rgba(158,59,44,.3);margin-inline-start:auto}
.omb-btn.danger:hover{background:rgba(158,59,44,.1)}
.omb-btn.sm{min-height:38px;padding:8px 12px;font-size:.78rem}
.omb-btn:focus-visible{outline:2px solid #B8862F;outline-offset:2px}
body.lang-ar .omb-btn{font-family:'Cairo',system-ui,sans-serif}

.omb-empty{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:32px 20px;text-align:center;
}
.omb-empty p{
  margin:0;max-width:40ch;
  font-family:'Manrope',system-ui,sans-serif;
  font-size:.9rem;line-height:1.55;color:#4A5468;
}
body.lang-ar .omb-empty p{font-family:'Cairo',system-ui,sans-serif}

@media (max-width: 560px){
  .omb-scrim{padding:0;align-items:flex-end}
  .omb-panel{max-height:94dvh;border-radius:20px 20px 0 0}
  .omb-grid{grid-template-columns:1fr}
  .omb-btn{flex:1 1 auto;text-align:center}
  .omb-btn.danger{margin-inline-start:0}
}

@media (prefers-reduced-motion: reduce){
  .omb-scrim,.omb-panel{transition:none !important}
  .omb-panel{transform:none !important}
}
@media print{.omb-scrim{display:none !important}}

/* An asset the current studio cannot place is still kept in the kit; the
   teacher is told so rather than left wondering why nothing happened. */
.omb-img-lb{display:flex;flex-direction:column;gap:2px}
.omb-img-note{
  font-size:.7rem;font-weight:500;color:#8A6420;line-height:1.35;
}