/* Fraction Bakery site additions: models, stacked symbols, fraction wall, worksheet layouts. */
.fr{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;line-height:1.05;font-weight:900}
.fr>span{padding:0 .28em;min-width:1.1em;text-align:center}
.fr>span:first-child{border-bottom:.11em solid currentColor}

/* picture strips */
.fb-pics{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:18px;align-items:end}
.fb-fig{margin:0;text-align:center}
.fb-fig svg{display:block;width:100%;max-height:190px;margin:0 auto}
.fb-fig figcaption{font-size:15px;font-weight:700;color:var(--ink2);margin-top:6px}
.fb-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center}
.fb-row .fb-fig{flex:1 1 120px;max-width:210px}
.fb-op{font-size:40px;font-weight:900;color:var(--hot)}
@media (max-width:640px){.fb-pics{grid-template-columns:1fr 1fr;gap:12px}.fb-row .fb-fig{flex:1 1 90px}.fb-op{font-size:28px}}

/* fact table: label column stays narrow on wide screens */
table.fb-facts td:first-child{white-space:nowrap}
@media (max-width:640px){table.fb-facts td:first-child{white-space:normal}}
@media (max-width:640px){
  /* Short number charts stay real tables on phones. */
  .table-wrap table.fb-chart{background:var(--card);box-shadow:var(--shadow)}
  table.fb-chart thead{display:table-header-group}
  table.fb-chart tr{display:table-row;background:none;box-shadow:none;margin:0;padding:0}
  table.fb-chart td{display:table-cell;border-bottom:1px solid var(--bg2);padding:7px 8px;font-size:15px}
  table.fb-chart th{padding:7px 8px;font-size:14px}
  table.fb-chart td:first-child{font-size:15px}
}

/* fraction wall */
.fb-wall-wrap{overflow:hidden}
table.fb-wall{table-layout:fixed;width:100%;border-collapse:separate;border-spacing:0;background:none;box-shadow:none;border-radius:0}
.fb-wall caption{text-align:center;color:var(--ink2);font-size:15px}
.fb-wall td{padding:0;border:2px solid var(--ink);text-align:center;height:44px;vertical-align:middle;overflow:hidden}
.fb-wall a{display:block;line-height:40px;color:var(--ink);font-weight:800;text-decoration:none;font-size:clamp(10px,1.8vw,17px)}
.fb-wall a:hover{background:rgba(255,255,255,.5)}
.fb-wall .w1 td{background:#e2486d}.fb-wall .w1 a{color:#fff}
.fb-wall .w2 td{background:#f58aa3}.fb-wall .w3 td{background:#ffd76a}.fb-wall .w4 td{background:#8fd6c2}
.fb-wall .w5 td{background:#f9c189}.fb-wall .w6 td{background:#f6b3c2}.fb-wall .w8 td{background:#ffe9a0}
.fb-wall .w10 td{background:#c9e9df}.fb-wall .w12 td{background:#fbd9c0}

/* picture quiz + explorer */
.fb-quiz-pic{display:flex;justify-content:center;margin-top:10px}
.fb-quiz-pic:empty{display:none}
.fb-opt{font-size:26px;min-width:96px;min-height:70px}
.fb-opt .fr{font-size:24px}
.quiz-q{flex-wrap:wrap;font-size:26px}
.fb-explorer{background:var(--card);border-radius:22px;padding:22px;box-shadow:var(--shadow);text-align:center}
.fb-ex-ctl{display:flex;gap:26px;justify-content:center;flex-wrap:wrap;font-weight:800}
.fb-step{display:inline-flex;align-items:center;gap:10px;margin-left:8px}
.fb-step button{width:44px;height:44px;border-radius:50%;border:0;background:var(--hot);color:#fff;font-size:24px;font-weight:900;cursor:pointer}
.fb-step output{min-width:30px;font-size:28px;font-weight:900}
.fb-ex-pics{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;align-items:center;margin:16px 0}
.fb-ex-read{font-weight:700;margin:0}

/* worksheets */
.sheet-grid.fb-pics3{grid-template-columns:repeat(3,1fr)}
.sheet-grid.fb-bars{grid-template-columns:1fr 1fr}
.sheet-grid.fb-lines{grid-template-columns:1fr 1fr}
.fb-item{display:flex;flex-direction:column;gap:8px;align-items:center}
.fb-item svg{display:block;width:100%;max-width:150px}
.fb-bars .fb-item svg,.fb-lines .fb-item svg{max-width:280px}
.fb-ask{font-size:20px;color:#111}
.blank.fb-short{min-width:80px;min-height:26px}
.fb-eq{display:inline-flex;align-items:center;gap:10px;font-size:22px;font-weight:700}
.fb-box{display:inline-block;width:32px;height:30px;border:2px solid #333;border-radius:4px;box-sizing:border-box;padding:0}
.fr>.fb-box:first-child{border:2px solid #333;margin-bottom:3px}
.fb-circle{display:inline-block;width:42px;height:42px;border:2px solid #333;border-radius:50%;flex:none}
.fb-circle.sm{width:34px;height:34px}
.fb-cmp{display:flex;align-items:center;gap:8px;width:100%}
.fb-cmp>span:not(.fb-circle){flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.sheet-grid li{break-inside:avoid}
.sheet-grid.key{grid-template-columns:repeat(3,1fr)}
.sheet-preview .foot-line{font-size:13px;color:#444;margin-top:18px}
@media (max-width:640px){
  .sheet-preview{padding:18px 14px}
  .name-line{white-space:normal}
  .sheet-grid.fb-bars,.sheet-grid.fb-lines{grid-template-columns:1fr}
  .sheet-grid.fb-pics3{grid-template-columns:1fr 1fr}
  .sheet-grid.key{grid-template-columns:1fr 1fr}
}
@media print{
  body{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .sheet-grid.fb-pics3{grid-template-columns:repeat(3,1fr);gap:12px 18px}
  .sheet-grid.fb-bars,.sheet-grid.fb-lines{grid-template-columns:1fr 1fr;gap:12px 18px}
  .fb-item svg{max-width:130px}
  .fb-bars .fb-item svg,.fb-lines .fb-item svg{max-width:250px}
  .hero,.sec h2{display:none}
  .printing-one .hero{display:none}
  body:not(.printing-one) .hero{display:block}
  body:not(.printing-one) .sec h2{display:block}
}

/* The engine joins page blocks with stray commas in main: hide those text nodes. */
main{font-size:0}
main>*{font-size:18px}
@media print{main>*{font-size:14px}}
@media (max-width:640px){.fb-pics .fb-fig:last-child{grid-column:1/-1}.fb-pics .fb-fig:last-child svg{max-height:none;max-width:330px}.fb-row .fb-fig:has(svg[viewBox^="0 0 320"]){flex-basis:100%;max-width:330px}}
.embed-maker select{max-width:100%}
.embed-maker pre{max-width:100%;overflow-x:auto}
