/* Font loaded via in index.html — see Source Serif 4 / Playfair Display / Inter */
:root{
--ink:#2A2622;
--ink-soft:#5B5548;
--paper:#F5F1E8;
--paper-2:#FFFFFF;
--line:#DFD6C2;
--forbidden:#C8483A; --forbidden-bg:#FBEDEA; --forbidden-bg2:#F3D6CE;
--assisted:#CC9B2E; --assisted-bg:#FBF3E0; --assisted-bg2:#F0DFB8;
--integrated:#4472B0; --integrated-bg:#EBF1FB; --integrated-bg2:#D3E2F5;
--recommended:#4F9159; --recommended-bg:#EDF6EE; --recommended-bg2:#D2E9D6;
/* EdTech Leaders Alliance brand, used by the help menu */
--brand:#1774BB; --brand-bg:#EAF3FA;
--shadow: 0 1px 2px rgba(42,38,34,.08), 0 6px 16px rgba(42,38,34,.07);
--radius: 10px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
background:var(--paper);
color:var(--ink);
font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
line-height:1.5;
}
.app{max-width:1080px;margin:0 auto;padding:28px 20px 80px;}
/* ---------- Brand bar + help menu ---------- */
.brandbar{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px;}
.brandbar img{height:34px; width:auto; display:block;}
.help-wrap{position:relative;}
.help-btn{
display:flex; align-items:center; gap:6px; padding:8px 14px; border-radius:100px;
border:1px solid var(--line); background:#fff; font-family:'Inter',sans-serif;
font-weight:600; font-size:13px; color:var(--ink); cursor:pointer;
}
.help-btn:hover{background:#F3EEDF;}
.help-btn .chev{font-size:10px; color:var(--ink-soft); transition:transform .15s ease;}
.help-btn.open .chev{transform:rotate(180deg);}
.help-menu{
position:absolute; right:0; top:calc(100% + 8px); background:#fff;
border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow);
min-width:230px; padding:6px; z-index:50; display:none;
}
.help-menu.open{display:block;}
.help-menu a{
display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:7px;
text-decoration:none; color:var(--ink); font-size:13.5px; font-weight:500;
}
.help-menu a:hover{background:var(--brand-bg);}
.help-menu a .ico{color:var(--brand); font-weight:700; font-size:15px; width:18px; text-align:center;}
/* ---------- Header ---------- */
.masthead{
display:flex; align-items:flex-end; justify-content:space-between; gap:18px;
border-bottom:2px solid var(--ink); padding-bottom:16px; margin-bottom:22px;
flex-wrap:wrap;
}
.masthead .eyebrow{
font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); font-weight:600;
margin-bottom:4px;
}
.masthead h1{
font-family:'Source Serif 4', Georgia, serif;
font-size:34px; margin:0; font-weight:700; letter-spacing:-.01em;
}
.masthead p{margin:6px 0 0; color:var(--ink-soft); font-size:14.5px; max-width:520px;}
.masthead .initials{
font-family:'Source Serif 4', Georgia, serif; font-weight:700; font-size:15px;
display:flex; gap:6px;
}
.masthead .initials span{
width:30px; height:30px; border-radius:6px; display:flex; align-items:center; justify-content:center;
color:#fff; font-size:15px;
}
/* ---------- Tabs ---------- */
.tabs{display:flex; gap:4px; margin-bottom:0; flex-wrap:wrap;}
.tab-btn{
font-family:'Inter',sans-serif; font-size:14px; font-weight:600; color:var(--ink-soft);
background:transparent; border:none; padding:11px 18px; cursor:pointer;
border-radius:8px 8px 0 0; position:relative; top:1px;
}
.tab-btn:hover{background:#EDE6D3;}
.tab-btn.active{
background:var(--paper-2); color:var(--ink); box-shadow: 0 -1px 0 var(--paper-2) inset;
border:1px solid var(--line); border-bottom:none;
}
.tab-panel-wrap{
background:var(--paper-2); border:1px solid var(--line); border-radius:0 10px 10px 10px;
padding:28px; box-shadow:var(--shadow);
}
.tab-panel{display:none;}
.tab-panel.active{display:block;}
/* ---------- FAIR Dial (signature element) ---------- */
.dial{display:flex; border-radius:10px; overflow:hidden; box-shadow:var(--shadow); margin-bottom:24px;}
.dial-seg{
flex:1; padding:14px 10px; text-align:center; cursor:pointer; border:none;
font-family:'Inter',sans-serif; position:relative; transition:transform .12s ease;
border-right:1px solid rgba(255,255,255,.35);
}
.dial-seg:last-child{border-right:none;}
.dial-seg .big{font-family:'Source Serif 4', Georgia, serif; font-size:22px; font-weight:700; line-height:1;}
.dial-seg .lbl{font-size:11px; font-weight:600; letter-spacing:.04em; margin-top:2px; opacity:.9;}
.dial-seg.active{transform:translateY(-4px); box-shadow:0 6px 14px rgba(0,0,0,.18);}
.dial-seg[data-lvl="F"]{background:var(--forbidden); color:#fff;}
.dial-seg[data-lvl="A"]{background:var(--assisted); color:#fff;}
.dial-seg[data-lvl="I"]{background:var(--integrated); color:#fff;}
.dial-seg[data-lvl="R"]{background:var(--recommended); color:#fff;}
/* ---------- Generic bits ---------- */
h2.section-title{font-family:'Source Serif 4', Georgia, serif; font-size:20px; margin:0 0 4px;}
p.section-sub{color:var(--ink-soft); font-size:13.5px; margin:0 0 20px;}
label.field-label{display:block; font-size:12.5px; font-weight:600; color:var(--ink-soft); margin-bottom:5px; letter-spacing:.02em;}
input[type=text], textarea, select{
width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:7px;
font-family:'Inter',sans-serif; font-size:14px; background:#fff; color:var(--ink);
}
textarea{resize:vertical;}
input[type=color]{width:44px; height:34px; border:1px solid var(--line); border-radius:6px; padding:2px; cursor:pointer; background:#fff;}
button.btn{
font-family:'Inter',sans-serif; font-weight:600; font-size:13.5px; padding:10px 16px;
border-radius:7px; border:1px solid var(--ink); background:var(--ink); color:#fff; cursor:pointer;
}
button.btn.secondary{background:transparent; color:var(--ink); border:1px solid var(--line);}
button.btn.secondary:hover{background:#EDE6D3;}
button.btn:hover{opacity:.88;}
button.btn:disabled{opacity:.4; cursor:not-allowed;}
.row{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end;}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
@media (max-width:720px){.grid2{grid-template-columns:1fr;}}
.card{border:1px solid var(--line); border-radius:10px; padding:18px; background:#fff;}
.pill{display:inline-block; padding:3px 10px; border-radius:100px; font-size:11.5px; font-weight:700; letter-spacing:.02em;}
.small-note{font-size:12px; color:var(--ink-soft); margin-top:6px;}
.copy-btn{font-size:12px; font-weight:600; padding:5px 10px; border-radius:6px; border:1px solid var(--line); background:#fff; cursor:pointer;}
.copy-btn:hover{background:#F3EEDF;}
/* ---------- Audience selector ---------- */
.audience-bar{display:flex; gap:8px; margin-bottom:22px; flex-wrap:wrap;}
.audience-btn{
padding:8px 14px; border-radius:100px; border:1px solid var(--line); background:#fff;
font-size:13px; font-weight:600; cursor:pointer; color:var(--ink-soft);
}
.audience-btn.active{background:var(--ink); color:#fff; border-color:var(--ink);}
/* ---------- Planner tab ---------- */
table.plan-table{width:100%; border-collapse:collapse; margin-top:14px;}
table.plan-table th{text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); padding:8px 8px; border-bottom:2px solid var(--ink);}
table.plan-table td{padding:10px 8px; border-bottom:1px solid var(--line); vertical-align:top;}
.chipgroup{display:flex; gap:4px;}
.chip{
width:30px; height:30px; border-radius:6px; border:1px solid var(--line); background:#fff;
font-family:'Source Serif 4',serif; font-weight:700; font-size:14px; cursor:pointer; color:var(--ink-soft);
}
.chip.sel-F.selected{background:var(--forbidden); color:#fff; border-color:var(--forbidden);}
.chip.sel-A.selected{background:var(--assisted); color:#fff; border-color:var(--assisted);}
.chip.sel-I.selected{background:var(--integrated); color:#fff; border-color:var(--integrated);}
.chip.sel-R.selected{background:var(--recommended); color:#fff; border-color:var(--recommended);}
.rule-note{font-size:12.5px; color:var(--ink-soft); max-width:260px;}
.del-row{background:none; border:none; color:var(--ink-soft); cursor:pointer; font-size:16px;}
.del-row:hover{color:var(--forbidden);}
#policyOutput{white-space:pre-wrap; font-family:'Source Serif 4',Georgia,serif; font-size:14px; line-height:1.6; background:#FBF9F3; border:1px solid var(--line); border-radius:8px; padding:20px; margin-top:16px;}
/* ---------- Badge designer ---------- */
.designer-layout{display:grid; grid-template-columns:280px 1fr; gap:28px;}
@media (max-width:800px){.designer-layout{grid-template-columns:1fr;}}
.badge-preview-wrap{display:flex; flex-direction:column; align-items:center; gap:16px;}
.badge{
display:flex; flex-direction:column; align-items:center; justify-content:center;
border-width:6px; border-style:solid; text-align:center; padding:6%;
}
.badge .letter{font-weight:700; line-height:1;}
.badge .levelnum{font-weight:700; text-transform:uppercase; margin-top:.5em;}
.badge .levelname{margin-top:.15em;}
.badge .assignment{margin-top:.6em; font-style:italic; opacity:.85;}
.check-row{display:flex; align-items:center; gap:8px; font-size:13px; margin-top:7px; cursor:pointer;}
.check-row input{margin:0; cursor:pointer;}
.badge-card-preview{border-radius:4px;}
.control-block{margin-bottom:18px;}
.color-row{display:flex; gap:14px; align-items:center;}
.color-item{display:flex; flex-direction:column; align-items:center; gap:4px;}
.color-item span{font-size:11px; color:var(--ink-soft);}
/* ---------- Templates tab ---------- */
.template-card{border:1px solid var(--line); border-radius:10px; overflow:hidden; margin-bottom:0;}
.template-head{padding:14px 18px; display:flex; align-items:center; gap:10px; font-weight:700; font-family:'Source Serif 4',serif; font-size:17px;}
.template-body{padding:18px;}
.starters li{margin-bottom:8px; font-size:14px;}
.template-block{background:#FBF9F3; border:1px solid var(--line); border-radius:8px; padding:14px; font-size:13.5px; line-height:1.65; margin-top:10px; white-space:pre-wrap;}
/* ---------- Grade-level handout: editor chrome ---------- */
.doc-toolbar{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px;}
.layout-toggle{display:flex; border:1px solid var(--line); border-radius:8px; overflow:hidden;}
.layout-toggle button{
border:0; background:#fff; cursor:pointer; padding:6px 14px;
font-size:12px; font-weight:600; font-family:inherit; color:var(--ink-soft);
}
.layout-toggle button + button{border-left:1px solid var(--line);}
.layout-toggle button.active{background:var(--ink); color:#fff;}
.edit-hint{font-size:12px; color:var(--ink-soft); flex:1; min-width:220px;}
.doc-stage{
background:#E8E3D6; border:1px solid var(--line); border-radius:10px;
padding:20px; overflow-x:auto;
}
.doc-stage .fairdoc{box-shadow:var(--shadow);}
/* Scaled down by fitLangDoc() when it is wider than the stage. Portrait uses
max-width so it reflows on its own and never needs scaling; landscape is a
fixed-width sheet, so it gets shrunk to fit instead of scrolling sideways. */
#langDocPreview > .fairdoc{transform-origin:top left;}
.fairdoc.landscape{width:1040px;}
/* ---------- Grade-level handout: the document itself ---------- */
.fairdoc{
--doc-blue:#2C5FA8; --doc-accent:#E8912E;
--yes:#2E9E4F; --no:#D64B3F; --note:#F08C1E;
background:#fff; color:#1C1C1C; font-family:'Inter',Arial,sans-serif;
max-width:820px; overflow:hidden;
}
.fd-header{background:var(--doc-blue); color:#fff; padding:24px 30px 20px; position:relative; overflow:hidden;}
.fd-watermark{
position:absolute; right:20px; top:-14px; pointer-events:none; user-select:none;
font-family:'Source Serif 4',Georgia,serif; font-weight:700; font-size:104px;
color:rgba(255,255,255,.12); letter-spacing:.03em;
}
.fd-eyebrow{font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; font-weight:700; color:rgba(255,255,255,.72);}
.fd-title{font-family:'Source Serif 4',Georgia,serif; font-size:29px; font-weight:700; margin:6px 0 5px; line-height:1.15;}
.fd-sub{font-size:13px; color:rgba(255,255,255,.86); margin:0; max-width:640px;}
.fd-chips{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; position:relative;}
.fd-chip{
background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.22);
border-radius:100px; padding:4px 13px; font-size:11.5px; font-weight:700;
}
.fd-rule{height:5px; background:var(--doc-accent);}
.fd-body{padding:20px 26px 8px; display:flex; flex-direction:column; gap:14px;}
.fd-card{display:flex; border:1px solid; border-radius:10px; overflow:hidden; break-inside:avoid;}
.fd-card-left{width:33%; padding:15px 16px; display:flex; flex-direction:column;}
.fd-card-right{flex:1; background:#fff; padding:4px 18px;}
.fd-tile{
width:60px; border:1px solid; border-radius:8px; background:#fff;
text-align:center; padding:5px 0 4px; margin-bottom:10px;
}
.fd-tile-letter{font-family:'Source Serif 4',Georgia,serif; font-size:25px; line-height:1.1; font-weight:600;}
.fd-tile-lvl{font-size:9px; font-weight:700; letter-spacing:.03em;}
.fd-name{font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; margin-bottom:2px;}
.fd-headline{font-family:'Source Serif 4',Georgia,serif; font-size:19px; line-height:1.25; color:#1C1C1C;}
.fd-rationale{font-size:12.5px; font-style:italic; color:#57534E; margin-top:12px; line-height:1.5;}
.fd-item{display:flex; gap:11px; align-items:flex-start; padding:9px 0; border-bottom:1px solid rgba(0,0,0,.075);}
.fd-item:last-child{border-bottom:none;}
.fd-ico{
width:18px; height:18px; border-radius:50%; flex:0 0 18px; margin-top:1px;
color:#fff; font-size:11px; font-weight:700; line-height:18px; text-align:center;
}
.fd-ico.yes{background:var(--yes);}
.fd-ico.no{background:var(--no);}
.fd-ico.note{background:var(--note);}
.fd-item-text{font-size:13.5px; line-height:1.45; flex:1;}
.fd-foot{display:flex; gap:14px; padding:8px 26px 24px;}
.fd-foot-box{flex:1; background:#EEF3FC; border-radius:8px; padding:13px 16px; position:relative;}
.fd-foot-title{font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--doc-blue); margin-bottom:5px;}
.fd-foot-body{font-size:12.5px; line-height:1.5; color:#333;}
/* Landscape: four columns across */
.fairdoc.landscape{max-width:none;}
.fairdoc.landscape .fd-body{flex-direction:row; align-items:stretch;}
.fairdoc.landscape .fd-card{flex:1; flex-direction:column; border-left-width:1px !important; border-top-width:5px;}
.fairdoc.landscape .fd-card-left{width:auto; padding-bottom:10px;}
.fairdoc.landscape .fd-card-right{background:transparent; padding:0 16px 12px;}
.fairdoc.landscape .fd-tile{display:inline-block; width:52px; margin-bottom:8px;}
.fairdoc.landscape .fd-headline{font-size:17px;}
.fairdoc.landscape .fd-item-text{font-size:12.5px;}
/* Editing affordances — screen only, stripped from every export */
.fd-edit [contenteditable]{outline:none; border-radius:3px;}
.fd-edit [contenteditable]:hover{box-shadow:0 0 0 2px rgba(44,95,168,.14);}
.fd-edit [contenteditable]:focus{box-shadow:0 0 0 2px rgba(44,95,168,.5); background:rgba(255,255,255,.55);}
.fd-edit .fd-header [contenteditable]:focus{background:rgba(0,0,0,.18);}
.fd-edit .fd-ico{cursor:pointer;}
.fd-del{
border:0; background:transparent; cursor:pointer; color:#9A9A9A;
font-size:15px; line-height:1; padding:2px 4px; border-radius:4px; opacity:0; flex:0 0 auto;
}
.fd-item:hover .fd-del, .fd-foot-box:hover .fd-del{opacity:1;}
.fd-del:hover{background:#F6E3E0; color:var(--no);}
.fd-foot-box .fd-del{position:absolute; top:6px; right:6px;}
.fd-add{
border:1px dashed #C9C2B2; background:transparent; cursor:pointer; color:var(--ink-soft);
font-size:11.5px; font-weight:600; font-family:inherit;
padding:5px 10px; border-radius:6px; margin:8px 0 12px;
}
.fd-add:hover{background:#FAF7EF; color:var(--ink);}
@media print{
body *{visibility:hidden;}
#printArea, #printArea *{visibility:visible;}
#printArea{position:absolute; top:0; left:0; width:100%;}
/* Do NOT stretch the sheet to the page width: that changes its height with
no constraint and spills onto extra pages. printLangBtn pins the natural
width and scales the whole sheet to fit instead. */
#printArea .fairdoc{box-shadow:none;}
@page{margin:0.4in;}
}
#printArea{display:none;}