/* Drawer modal */
.ws-modal{position:fixed;inset:0;display:none;z-index:9999;}
.ws-modal.open{display:block;}
.ws-overlay{position:absolute;inset:0;background:rgba(0,0,0,.35);}
.ws-dialog{position:absolute;right:0;top:0;bottom:0;width:min(600px,96vw);background:#fff;
  display:flex;flex-direction:column;box-shadow:-8px 0 24px rgba(0,0,0,.2);border-radius:12px 0 0 12px;}
.ws-header{padding:14px 18px;border-bottom:1px solid #eee;display:flex;align-items:center;justify-content:space-between;}
.ws-close{border:none;background:transparent;font-size:24px;line-height:1;cursor:pointer;color:#972141;}
.ws-body{display:flex;gap:16px;height:100%;overflow:hidden;}
.ws-left{width:46%;min-width:320px;padding:14px;overflow:auto;border-right:1px solid #f3e6ea;}
.ws-right{flex:1;padding:14px;overflow:auto;background:#fff7f8;border-left:1px solid #f6e7ea;border-radius:0 0 0 12px;}
.ws-card{background:#fff;border:1px solid #eee;border-radius:12px;padding:12px;margin-bottom:12px;}
.ws-card h3{margin:.25rem 0 .5rem;color:#972141;font-size:1rem;}
.ws-grid{display:grid;gap:10px;grid-template-columns:1fr 1fr;}
.ws-grid.three{grid-template-columns:repeat(3,1fr);}
.ws-row{display:flex;gap:16px;align-items:center;margin:.25rem 0;}
.ws-kv{display:flex;justify-content:space-between;border-bottom:1px dashed #f0d7dc;padding:.25rem 0;}
.ws-actions{position:sticky;bottom:0;background:#fff;padding:12px;border-top:1px solid #eee;display:flex;gap:10px;}
.ws-empty{color:#7b2b3d;opacity:.9;padding:8px 12px;border:1px dashed #e8c8cf;border-radius:10px;background:#fff;}
.ws-preview-meta{margin-bottom:8px;font-size:.9rem;color:#972141;}

/* safety so buttons are clickable above any stray overlays */
.assignment-right-actions{position:relative;z-index:10;}

.ws-branding{border-bottom:1px solid #eee;padding-bottom:8px;margin-bottom:8px}
.ws-q .ws-text p{margin:.25rem 0}
.ws-q .ws-mcq li .ws-bubble,
.ws-tf .ws-bubble{background:#fff}


/* --- Preview polish --- */
.ws-right{ background:#fff; }

.ws-q{
  margin:14px 0 18px;
  padding:12px;
  border:1px solid #eee;
  border-radius:12px;
  background:#fff;
}
.ws-q .ws-text p{ margin:.35rem 0; }
.ws-no{ color:#972141; }

/* MCQ: neat 2-column options */
.ws-mcq{
  display:grid;
  grid-template-columns: 1fr 1fr;       /* two columns */
  gap:12px 16px;
  list-style:none;
  padding-left:0;
  margin:10px 0 0 0;
}
.ws-mcq li{
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid #e8d4d9;
  border-radius:10px;
  padding:8px 10px;
  min-height:42px;
}
.ws-bubble{
  width:20px; height:20px;
  border:2px solid #9c2a46;
  border-radius:50%;
  flex:0 0 20px;
  background:#fff;
}

/* True/False chips */
.ws-tf{
  display:flex; gap:16px; margin-top:10px;
}
.ws-tf label{
  display:flex; align-items:center; gap:8px;
  border:1px solid #e8d4d9; border-radius:10px; padding:8px 12px;
}

/* Images inside questions */
.ws-img img{ max-width:100%; height:auto; max-height:180px; display:block; margin:6px 0; }

/* Branding block */
.ws-branding{
  border-bottom:1px solid #eee; padding-bottom:8px; margin-bottom:10px;
}

/* Print-friendly page breaks (optional for later PDF) */
@media print{
  .ws-q{ break-inside: avoid; }
}









/* Header buttons */
.ws-head-actions { display:flex; gap:8px; align-items:center; }
.ws-head-btn{ border:1px solid #e6d1d7; background:#fff; border-radius:10px; padding:6px 10px; cursor:pointer; }
.ws-head-btn:hover{ background:#f7ecef; }

/* Full-screen dialog */
.ws-dialog.full{ left:0; right:0; top:0; bottom:0; width:100vw; height:100vh; border-radius:0; }
.ws-dialog.full .ws-body{ display:block; }
.ws-dialog.full .ws-left{ display:none; }
.ws-dialog.full .ws-right{ padding:0; background:#eef1f5; }

/* Centered page canvas */
.ws-preview-container{ height:100%; max-height:calc(100vh - 58px); display:flex; justify-content:center; align-items:flex-start; gap:24px; padding:18px; overflow:auto; }
.ws-page{ background:#fff; box-shadow:0 10px 30px rgba(0,0,0,.15); padding:18mm; border-radius:8px; }

/* Exact page sizes */
.ws-page.a4.portrait    { width:210mm;  min-height:297mm; }
.ws-page.a4.landscape   { width:297mm;  min-height:210mm; }
.ws-page.letter.portrait{ width:216mm;  min-height:279mm; }
.ws-page.letter.landscape{width:279mm;  min-height:216mm; }

/* Make questions print nicely inside pages */
.ws-q{ break-inside:avoid; }
@media print {
  .ws-modal{ display:none; }      /* don’t print the modal chrome */
  .ws-page{ box-shadow:none; }    /* clean print */
}



/* ==========================================================================
   Worksheet visual polish (CSS-only, no markup changes)
   ========================================================================== */
:root{
  --ws-brand:#962343;
  --ws-ink:#1d1d1d;
  --ws-muted:#6f6f6f;
  --ws-surface:#ffffff;
  --ws-border:#ececf1;
  --ws-chip:#ead6db;
}

/* Page canvas (you already wrap preview in .ws-page) */
.ws-page{
  background:#fff;
  padding:18mm;
  box-shadow:0 14px 45px rgba(20,20,20,.14);
  border-radius:10px;
}

/* Typography */
.ws-page .ws-doc{ font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color:var(--ws-ink); }
.ws-page .ws-doc p{ margin:.4rem 0; }

/* ---------- Header (logo + title + name/date) ---------- */
.ws-head{
  display:grid; grid-template-columns:auto 1fr; gap:16px;
  /* align-items:center;  <-- change this to top-align */
  align-items:flex-start;
  margin-bottom:16px; padding-bottom:12px;
  border-bottom:1px solid var(--ws-border);
}

/* The logo is huge right now because of width:70mm.
   Make it height-driven and let width auto-scale. */
.ws-logo img{
  /* width:70mm; max-height:40mm;  <-- remove fixed width */
  max-height:30mm;                 /* tweak: 16–22mm looks neat */
  width:auto;
  object-fit:contain; display:block;
}

.ws-title{
  margin:0;
  font-size:20px;    /* a touch larger for hierarchy */
  font-weight:800;   /* crisper title */
  letter-spacing:.2px;
  color:#111;
}

.ws-meta{
  margin-top:4px;
  font-size:14px;    /* a bit calmer */
  font-weight:600;
  color:var(--ws-muted);
}

/* Name / Date row: keep tidy and aligned */
.ws-name-row{
  display:grid;
  grid-template-columns: 1fr 220px;
  gap:24px;
  margin-top:8px;
}

.ws-name-block .ws-label{
  font-size:14px;
  font-weight:700;
  color:#972141;
  margin-bottom:4px;
}
.ws-line{
  height:14px;
  border-bottom:2px solid #972141;
  border-radius:2px;
}


/* ---------- Question cards ---------- */
.ws-q{
  display:grid; grid-template-columns: 34px 1fr; gap:12px;
  background:var(--ws-surface);
  border:1px solid var(--ws-border);
  border-radius:12px;
  padding:14px 14px 12px;
  margin:14px 0 18px;
  
  break-inside: avoid;
}
.ws-qno{
  width:34px; height:34px; line-height:34px;
  text-align:center; font-weight:800; color:#fff;
  background:var(--ws-brand); border-radius:50%;
  align-self:flex-start;
}
.ws-text{ margin:.2rem 0 .6rem; font-size:15px; }
.ws-img img{ max-width:100%; height:auto; max-height:65mm; border-radius:8px; display:block; margin-top:6px; }

/* ---------- MCQ options (works with your existing lists) ---------- */
.ws-mcq, /* your earlier class */
.ws-options{                      /* our newer class (if present) */
  list-style:none; padding:0; margin:10px 0 0 0;
  display:grid; grid-template-columns: 1fr 1fr; gap:12px 16px;
}
@media (max-width:620px){ .ws-mcq, .ws-options { grid-template-columns:1fr; } }

.ws-mcq li, .ws-options li{
  display:flex; align-items:center; gap:10px;
  border:1px solid var(--ws-chip);
  background:#fff;
  border-radius:12px;
  padding:10px 12px;
  min-height:44px;
  transition: box-shadow .15s ease, transform .05s ease;
}
.ws-mcq li:hover, .ws-options li:hover{ box-shadow:0 2px 10px rgba(0,0,0,.05); }

.ws-bubble{
  width:20px; height:20px; flex:0 0 20px;
  border:2px solid var(--ws-brand); border-radius:50%;
  background:#fff;
}

/* ---------- True/False chips ---------- */
.ws-tf{ display:flex; gap:16px; margin-top:10px; }
.ws-tf label{
  display:flex; align-items:center; gap:8px;
  border:1px solid var(--ws-chip); background:#fff;
  border-radius:12px; padding:8px 12px;
}

/* ---------- Workspace (grid / dotted / ruled / blank) ---------- */
.ws-workspace {
  margin-top:12px;
  min-height:42mm;   /* default size; inline style from PHP can override */
  border:1px dashed #cfcfd4;
  border-radius:12px;
  background:#fff;
}

.ws-workspace.grid{
  background:
    repeating-linear-gradient(0deg, transparent, transparent 14px, rgba(0,0,0,.06) 14px, rgba(0,0,0,.06) 15px),
    repeating-linear-gradient(90deg, transparent, transparent 14px, rgba(0,0,0,.06) 14px, rgba(0,0,0,.06) 15px);
}
.ws-workspace.dotted{ background: radial-gradient(#bbb 1px, transparent 1px); background-size:12px 12px; }
.ws-workspace.ruled{ background: repeating-linear-gradient(0deg, transparent, transparent 14px, rgba(0,0,0,.09) 14px, rgba(0,0,0,.09) 15px); }

/* ---------- Print niceties ---------- */
@media print{
  .ws-page{ padding:16mm; box-shadow:none !important; background:#fff; }
  .ws-q{ break-inside:avoid; }
}



/* Small fill-in boxes (FIB) */
.ws-fib-row{
  display:flex; flex-wrap:wrap; gap:12px; margin-top:10px;
}
.ws-short{
  --ws-fib-w: 60mm;               /* width knob: 50–70mm works well */
  --ws-fib-h: 12mm;               /* height knob */
  width: var(--ws-fib-w);
  height: var(--ws-fib-h);
  border: 2px solid #cfcfd4;
  border-radius: 10px;
  background:#fff;
}


/*worksheet number*/
/* Ensure each control in the card stacks on its own line */
.ws-card label {
  display: block;             /* <-- forces next control to start on new line */
  margin: 0 0 10px 0;
  font-weight: 600;
}

/* Stepper row: center items, keep spacing tidy */
.ws-num {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

/* Unified control height (matches selects/inputs) */
.ws-card select,
.ws-card input[type="number"],
.ws-card input[type="text"],
.ws-num .btn-num,
#ws-num {
  height: 36px;
}

/* Stepper buttons */
.ws-num .btn-num {
  width: 36px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  line-height: 1;
  font-size: 18px;
  cursor: pointer;
}
.ws-num .btn-num:active { transform: translateY(1px); }

/* Stepper input */
#ws-num {
  width: 72px;
  padding: 0 8px;
  border: 1px solid #ddd;
  border-radius: 8px;
  text-align: center;
}

/* Keep the grid card looking neat */
.ws-card .ws-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 720px) {
  .ws-card .ws-grid { grid-template-columns: 1fr; }
}




/*marks css*/
/* Positioning context for badge */
.ws-q {
  position: relative;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 1.5rem;
  background: #fff;
  border: 1px solid #eee;
}

.ws-mark-badge {
  position: absolute;
  top: 10px;
  right: 12px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 9999px;
  background: #fdf2f5;
  color: #972141;
  border: 1px solid #f1dbe3;
  white-space: nowrap;
}

.ws-qcontent {
  margin-right: 90px; /* keep text clear of the badge */
}



/*======= Answer Key block=================== */
/* ========== Answer Key (2-col cards) ========== */
.ws-key-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:16px;
}
.ws-key-item{
  background:#fff;
  border:1px solid #e9e9ee;
  border-radius:12px;
  padding:12px 14px;
  box-shadow:0 1px 0 rgba(0,0,0,.02);
}

/* Header row inside each card */
.ws-key-item .ws-key-q{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:36px;
  height:26px;
  padding:0 8px;
  margin-right:8px;
  border-radius:999px;
  background:#f3f4f6;
  font-weight:600;
}
.ws-key-item .ws-key-a{ font-weight:600; }

/* ========== Explanation + Image ========== */
.ws-key-exp{
  margin-top:8px;
  line-height:1.45;
  white-space:normal;
  display:flex;              /* enable reordering */
  flex-direction:column;
}
.ws-key-exp p{ margin:0 0 6px; }

/* Make image appear above the text */
.ws-key-exp > .mnm-answer-image,
.ws-key-exp > img,
.ws-key-exp > p:has(img){
  order:-1;                  /* move to top */
  margin-bottom:8px;
  text-align:center;
  align-self:center;
}

/* Image sizing inside Answer Key */
.ws-key-exp img{
  display:block;
  width:100%;
  max-width:220px;
  height:auto;
  margin:8px auto;
  border-radius:8px;
}

/* General safety for any other explanation images */
.ws-exp img{ max-width:100%; height:auto; }


/**/
@page { size: auto; margin: 12mm; }  /* or lock to A4: size: A4 portrait; */
.ws-page { box-shadow: none; }       /* print */
.ws-q { break-inside: avoid; }       /* keep questions intact */
.ws-break { break-after: page; }     /* allow PHP to force new pages */
@media print { .ws-modal{display:none;} }