:root { --mg-blue:#1e4d8c; --mg-cream:#f7f4ee; --mg-charcoal:#36454f; --mg-panel:#fbe58e; }
/* body { background:var(--mg-cream); color:#1c2430 ; font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif; } 
Changed to white*/
body { background:#ffffff; color:#1c2430; font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif; }
.site-header { background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.08); }
.header-logo { width:200px; height:100px; object-fit:contain; }
.navbar-nav .nav-link { color:var(--mg-blue)!important; font-weight:600; }
.hero-logo { width:300px; height:100px; object-fit:contain; }
.controls-card { background:var(--mg-panel); border:1px solid #e0c86a; border-radius:12px; }
@media (min-width:1200px){ .controls-home { max-width:60%; margin-left:auto; margin-right:auto; } }
.site-footer { background:var(--mg-charcoal); color:#fff; }
.site-footer a { color:#fff; }



.mixed-grid { display:grid; grid-template-columns:repeat(5,minmax(120px,1fr)); column-gap:1rem; row-gap:2.7rem; }

.problem-cell,
.div-cell {
  display: flex;
  min-height: 72px;      /* same row height */
  align-items: flex-start;
  justify-content: center;
}


.problem-cell {
  flex-direction: column;
  align-items: flex-end;
  position: relative;
  left: -60px;
}

/*
.problem-cell {
  flex-direction: column;
  align-items: flex-end;
}
*/

.problem-cell input[type="text"] { width:78px; text-align:right; font-family:"Courier New",Courier,monospace; font-weight:700; }
.problem-op-row { display:flex; align-items:center; justify-content:flex-end; gap:4px; width:100%; }
.problem-op { width:18px !important; min-width:18px !important; max-width:18px !important; text-align:center; font-weight:700; padding:2px 0 !important; }
.problem-line { width:90px; border-bottom:2px solid #222; margin-top:2px; }


.div-cell {
  flex-direction: row;
  align-items: flex-end; /* bar lines up with the stacked problem's bottom line */
  padding-top: 22px;     /* push the bar down to match the add/sub/mul line */
}


.div-cell input[type="text"] { width:52px; text-align:right; font-family:"Courier New",Courier,monospace; font-weight:700; }
.div-cell .dividend { width:70px; }
.div-bracket { position:relative; display:flex; align-items:flex-end; margin-left:2px; padding:0 2px 0 6px; border-left:3px solid #111; }
.div-bracket::before { content:""; position:absolute; left:0; top:0; width:100%; border-top:3px solid #111; }
.ws-sheet { background:#fff; width:8.5in; height:11in; max-width:100%; margin:0 auto; padding:0.38in 0.45in; box-sizing:border-box; display:flex; flex-direction:column; box-shadow:0 4px 18px rgba(0,0,0,.12); }
.ws-head { font-family:Arial,Helvetica,sans-serif; font-weight:700; font-size:22px; margin:0; line-height:1.1; }
.ws-head-2 { font-family:Arial,Helvetica,sans-serif; font-weight:700; font-size:24px; margin:2px 0 30px 0; line-height:1.1; }
.ws-grid { display:grid; grid-template-columns:repeat(5,1fr); column-gap:12px; grid-template-rows:repeat(5,auto); align-content:space-between; flex:1 1 auto; min-height:0; }


.ws-prob { display:flex; flex-direction:column; align-items:flex-end; font-family:"Courier New",Courier,monospace; font-size:22px; font-weight:700; line-height:1; }


.ws-prob .num { min-width:86px; text-align:right; }
.ws-prob .op-row { display:flex; align-items:baseline; gap:6px; margin:0; line-height:1; }
.ws-prob .line { width:96px; border-bottom:2px solid #111; margin-top:0; height:0; }




/* Division problem + answer-above-bar (add/replace these rules in css/style.css) */

.ws-div {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
  font-family: "Courier New", Courier, monospace;
  font-size: 20px;
  font-weight: 700;
}

.ws-div-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.ws-div .quotient {
  display: block;
  min-width: 72px;
  padding-left: 8px;
  text-align: left;
  font-size: 18px;
  line-height: 1.1;
  margin-bottom: 1px;
}

.ws-div .divisor {
  min-width: 40px;
  text-align: right;
  padding-right: 4px;
  align-self: flex-end;
}

.ws-div .dividend-box {
  position: relative;
  min-width: 72px;
  padding: 2px 6px 0 8px;
  border-left: 3px solid #111;
}

.ws-div .dividend-box::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  border-top: 3px solid #111;
}

.ws-brand { text-align:right; margin-top:120px; font-size:16px; font-weight:700; color:#222; }

@page { size: letter portrait; margin: 0; }
@media print { html,body{background:#fff!important;margin:0!important;} .no-print{display:none!important;} .container{max-width:none!important;padding:0!important;margin:0!important;} .ws-sheet{box-shadow:none;width:8.5in;height:11in;margin:0 auto;} }

/* Adds space between buttons on prevws.htm, gap */
.no-print.text-center {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
}