/* Layout: working app shell — brand bar, sticky tab strip, one view at a time; H&E stain palette (hematoxylin violet, eosin pink) on slide-glass white */
:root{
  --bg:#F5F6FA; --surface:#FFFFFF; --surface-2:#EDEEF5; --ink:#1C1A33; --muted:#5E5B78; --line:#DCDDE8;
  --hema:#4334A3; --hema-soft:#E6E3F7; --on-hema:#FFFFFF;
  --eosin:#C93A6E; --eosin-soft:#FBE4EC;
  --good:#2E7D4F; --good-soft:#E1F2E7; --warn:#8F5A00; --warn-soft:#FBEFD9; --crit:#B4232A; --crit-soft:#F9E0E1;
  --grid:rgba(67,52,163,.06);
  --f-display:"Young Serif", Georgia, "Times New Roman", serif;
  --f-body:"Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --r:10px;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#13121C; --surface:#1B1A27; --surface-2:#242236; --ink:#ECEAF6; --muted:#A4A1BD; --line:#343249;
  --hema:#A79BFF; --hema-soft:#2C2750; --on-hema:#13121C;
  --eosin:#FF84AE; --eosin-soft:#3F2030;
  --good:#6FD196; --good-soft:#1C3426; --warn:#F2B652; --warn-soft:#3A2E15; --crit:#FF7B80; --crit-soft:#3D1C1E;
  --grid:rgba(167,155,255,.07); color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#13121C; --surface:#1B1A27; --surface-2:#242236; --ink:#ECEAF6; --muted:#A4A1BD; --line:#343249;
  --hema:#A79BFF; --hema-soft:#2C2750; --on-hema:#13121C;
  --eosin:#FF84AE; --eosin-soft:#3F2030;
  --good:#6FD196; --good-soft:#1C3426; --warn:#F2B652; --warn-soft:#3A2E15; --crit:#FF7B80; --crit-soft:#3D1C1E;
  --grid:rgba(167,155,255,.07); color-scheme:dark;
}
*{box-sizing:border-box}
body{background:var(--bg); color:var(--ink); font-family:var(--f-body); font-size:15px; line-height:1.5}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:10; background:var(--surface)}
.wrap{max-width:1120px; margin:0 auto; padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--f-display); font-weight:400; text-wrap:balance; margin:0; line-height:1.2}
h2{font-size:1.5rem} h3{font-size:1.1rem}
p{margin:0}
button,select,input,textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--hema); outline-offset:2px}
.mono{font-family:var(--f-mono); font-size:.82em; font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.eyebrow{font-size:.72rem; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); font-weight:700}

/* brand bar */
.brand{background:var(--surface); border-bottom:1px solid var(--line);
  background-image:linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:18px 18px}
.brand .wrap{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:12px 24px; padding-block:20px 16px}
.logo{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.logo h1{font-size:2rem; letter-spacing:-.01em}
.logo h1 span{color:var(--eosin)}
.pitch{color:var(--muted); max-width:52ch}
.credit{flex-basis:100%; font-size:.8rem; color:var(--muted)}
.classpill{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:.88rem}
.badge-ex{font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; font-weight:700; background:var(--eosin-soft); color:var(--eosin); padding:3px 8px; border-radius:99px}

/* tabs */
.tabs{position:sticky; top:env(safe-area-inset-top,0px); z-index:5; background:var(--surface); border-bottom:1px solid var(--line)}
.tabs .wrap{display:flex; gap:4px; overflow-x:auto; scrollbar-width:none}
.tabs a{display:block; padding:12px 14px; text-decoration:none; color:var(--muted); font-weight:700; white-space:nowrap; border-bottom:3px solid transparent}
.tabs a:hover{color:var(--ink)}
.tabs a[aria-current="page"]{color:var(--hema); border-bottom-color:var(--hema)}

main{padding-block:24px 48px}
.view{display:grid; gap:28px}
.sec{display:grid; gap:12px; min-width:0}
.sec-head{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:8px}
.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:16px}

/* chips & pills */
.chip{display:inline-flex; align-items:center; gap:6px; font-size:.78rem; padding:3px 9px; border-radius:99px; background:var(--surface-2); color:var(--ink); white-space:nowrap}
.code{font-family:var(--f-mono); font-size:.75rem; padding:2px 7px; border-radius:6px; background:var(--hema-soft); color:var(--hema); white-space:nowrap}
.pill-crit{background:var(--crit-soft); color:var(--crit)}
.pill-warn{background:var(--warn-soft); color:var(--warn)}
.pill-good{background:var(--good-soft); color:var(--good)}
.pill-eosin{background:var(--eosin-soft); color:var(--eosin)}
.nb-head .chip{white-space:normal; text-align:left; line-height:1.35; border-radius:10px}
.linkbtn{background:none; border:0; padding:0; color:var(--muted); font-weight:700; cursor:pointer; text-decoration:underline; text-underline-offset:3px}
.linkbtn:hover{color:var(--hema)}

/* pipeline */
.pipeline{display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:8px}
.stage{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:12px; display:grid; gap:4px; min-width:0}
.stage .n{font-family:var(--f-display); font-size:2rem; line-height:1}
.stage .lbl{font-size:.82rem; color:var(--muted)}
.stage .dots{display:flex; gap:3px; flex-wrap:wrap; margin-top:4px}
.stage .dots i{width:8px; height:8px; border-radius:50%; background:var(--hema)}
.stage.now{border-color:var(--hema); box-shadow:inset 0 0 0 1px var(--hema)}
@media (max-width:640px){ .pipeline{grid-template-columns:repeat(3, minmax(0,1fr))} }

/* timeline strip */
.scroll-x{overflow-x:auto}
.strip{position:relative; min-width:600px; height:108px; margin-inline:8px}
.strip .bar{position:absolute; left:0; right:0; top:34px; height:2px; background:var(--line)}
.strip .done{position:absolute; left:0; top:34px; height:2px; background:var(--hema)}
.ms{position:absolute; top:26px; transform:translateX(-50%); display:grid; justify-items:center; gap:6px; text-align:center; width:120px}
.ms i{width:14px; height:14px; border-radius:50%; background:var(--surface); border:2px solid var(--line)}
.ms.past i{background:var(--hema); border-color:var(--hema)}
.ms b{font-size:.8rem} .ms span{font-size:.75rem; color:var(--muted)}
.today{position:absolute; top:0; transform:translateX(-50%); display:grid; justify-items:center}
.today span{font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--eosin)}
.today i{width:2px; height:30px; background:var(--eosin)}

/* attention list */
.attn{display:grid; gap:8px}
.attn button{all:unset; cursor:pointer; display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:center; background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--warn); border-radius:var(--r); padding:12px 14px}
.attn button.crit{border-left-color:var(--crit)}
.attn button:hover{border-color:var(--hema)}
.attn button:focus-visible{outline:2px solid var(--hema); outline-offset:2px}
.attn .who{font-weight:700}
.attn .go{color:var(--hema); font-weight:700; font-size:.85rem}
@media (max-width:640px){ .attn button{grid-template-columns:auto minmax(0,1fr); grid-template-areas:"chip go" "text text"; gap:8px 12px} .attn .chip{grid-area:chip; justify-self:start} .attn .go{grid-area:go; justify-self:end} .attn button > span:nth-child(2){grid-area:text} }

/* table */
table{width:100%; border-collapse:collapse; font-size:.9rem}
th{text-align:left; font-size:.72rem; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); padding:10px 12px; border-bottom:1px solid var(--line); white-space:nowrap}
td{padding:11px 12px; border-bottom:1px solid var(--line); vertical-align:top}
tr.row{cursor:pointer} tr.row:hover td{background:var(--surface-2)}
.tbl{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow-x:auto}
.tbl table{min-width:820px}
.rq{max-width:42ch; color:var(--muted)}
.trail{display:flex; align-items:center; gap:8px; white-space:nowrap}
.meter{width:70px; height:6px; border-radius:99px; background:var(--surface-2); overflow:hidden}
.meter i{display:block; height:100%; background:var(--hema)}
.meter.low i{background:var(--crit)}

/* ideas */
.ideas-grid{display:grid; grid-template-columns:300px minmax(0,1fr); gap:20px; align-items:start}
@media (max-width:860px){ .ideas-grid{grid-template-columns:minmax(0,1fr)} }
.kit{display:grid; gap:16px; position:sticky; top:calc(env(safe-area-inset-top,0px) + 64px)}
@media (max-width:860px){ .kit{position:static} }
fieldset{border:0; padding:0; margin:0; display:grid; gap:6px}
legend{padding:0; margin-bottom:6px}
.check{display:flex; gap:8px; align-items:flex-start; font-size:.9rem; cursor:pointer}
.check input{margin-top:3px; accent-color:var(--hema)}
.topicchips{display:flex; flex-wrap:wrap; gap:6px}
.tchip{border:1px solid var(--line); background:var(--surface); border-radius:99px; padding:4px 10px; font-size:.8rem; cursor:pointer}
.tchip[aria-pressed="true"]{background:var(--hema); color:var(--on-hema); border-color:var(--hema)}
.filters{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.seg{display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden}
.seg button{border:0; background:var(--surface); padding:6px 12px; font-size:.85rem; cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--hema-soft); color:var(--hema); font-weight:700}
.idea{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:16px; display:grid; gap:10px; min-width:0}
.idea.common{border-style:dashed}
.idea-top{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.idea h3{font-size:1.05rem}
.idea .q{font-size:.98rem}
.idea .why{font-size:.85rem; color:var(--muted)}
.idea .twist{font-size:.88rem; border-left:3px solid var(--eosin); padding-left:10px}
.idea .actions{display:flex; flex-wrap:wrap; gap:8px}
.btn{border:1px solid var(--line); background:var(--surface); border-radius:8px; padding:7px 12px; font-size:.85rem; font-weight:700; cursor:pointer}
.btn:hover{border-color:var(--hema); color:var(--hema)}
.btn.primary{background:var(--hema); border-color:var(--hema); color:var(--on-hema)}
.btn.primary:hover{color:var(--on-hema); filter:brightness(1.08)}
.split{display:grid; gap:6px; background:var(--surface-2); border-radius:8px; padding:12px; font-size:.88rem}
.split ol{margin:0; padding-left:20px; display:grid; gap:4px}
.list{display:grid; gap:12px}
.near{font-size:.88rem}
.near li{margin-bottom:6px}

/* notebook */
.nb-head{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; align-items:start}
@media (max-width:700px){ .nb-head{grid-template-columns:minmax(0,1fr)} }
.nb-head .q{font-family:var(--f-display); font-size:1.25rem; line-height:1.3}
.stat{display:grid; gap:2px; text-align:right}
@media (max-width:700px){ .stat{text-align:left} }
.stat .big{font-family:var(--f-display); font-size:2rem; line-height:1}
.tl{list-style:none; margin:0; padding:0; display:grid; position:relative}
.tl::before{content:""; position:absolute; left:83px; top:6px; bottom:6px; width:2px; background:var(--line)}
.tl li{display:grid; grid-template-columns:70px 28px minmax(0,1fr); gap:0 0; padding-block:10px}
.tl time{font-family:var(--f-mono); font-size:.72rem; color:var(--muted); text-align:right; padding-right:8px; padding-top:2px; line-height:1.4}
.tl .dot{width:12px; height:12px; border-radius:50%; background:var(--surface); border:2px solid var(--hema); margin:4px 0 0 7px; z-index:1}
.tl .dot.crit{border-color:var(--crit); background:var(--crit)}
.tl .dot.teacher{background:var(--hema)}
.tl .dot.ai{border-color:var(--eosin)}
.tl .body{display:grid; gap:4px; min-width:0}
.tl .kind{display:flex; gap:6px; flex-wrap:wrap; align-items:center; font-size:.78rem; font-weight:700; color:var(--muted)}
.tl .txt{font-size:.92rem}
.photo{width:120px; aspect-ratio:4/3; max-width:100%; border-radius:6px; background:repeating-linear-gradient(45deg, var(--surface-2) 0 8px, var(--hema-soft) 8px 16px); display:grid; place-items:center; font-size:.7rem; color:var(--muted); font-family:var(--f-mono)}
.form{display:grid; gap:10px}
.form .row2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
@media (max-width:520px){ .form .row2{grid-template-columns:1fr} }
label.f{display:grid; gap:4px; font-size:.82rem; font-weight:700; color:var(--muted)}
select,input[type="number"],textarea{background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:8px 10px; width:100%; color:var(--ink)}
textarea{min-height:72px; resize:vertical}
.nb-grid{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:20px; align-items:start}
@media (max-width:860px){ .nb-grid{grid-template-columns:minmax(0,1fr)} }
.out{white-space:pre-wrap; font-family:var(--f-mono); font-size:.78rem; background:var(--surface-2); border-radius:8px; padding:12px; max-height:340px; overflow:auto}

/* calibration */
.cal{display:grid; gap:16px}
.cal-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:16px; display:grid; gap:12px; min-width:0}
.cal-card table{min-width:460px}
.cal-card td,.cal-card th{padding:8px 10px}
.cal-card input[type="number"]{width:64px; padding:6px 8px; text-align:center; font-family:var(--f-mono)}
@media (max-width:520px){ .cal-card{padding:12px} .cal-card table{min-width:0} .cal-card td,.cal-card th{padding:6px 3px} .cal-card th{font-size:.62rem; letter-spacing:.04em; white-space:normal} .cal-card td:first-child{font-size:.82rem} .cal-card input[type="number"]{width:44px; padding:5px 2px} }
.gap{font-family:var(--f-mono); font-weight:500; display:inline-block; min-width:2.2em; text-align:center; border-radius:6px; padding:2px 6px}
.gap.g0{background:var(--good-soft); color:var(--good)}
.gap.g1{background:var(--surface-2); color:var(--muted)}
.gap.g2{background:var(--crit-soft); color:var(--crit)}
.sum-bars{display:grid; gap:10px}
.sb{display:grid; grid-template-columns:150px minmax(0,1fr) 48px; gap:10px; align-items:center; font-size:.88rem}
@media (max-width:520px){ .sb{grid-template-columns:110px minmax(0,1fr) 40px} }
.sb .track{height:10px; background:var(--surface-2); border-radius:99px; position:relative; overflow:hidden}
.sb .track i{position:absolute; left:0; top:0; bottom:0; background:var(--hema); border-radius:99px}
.sb .track i.hot{background:var(--crit)}
.sb .v{font-family:var(--f-mono); font-size:.8rem; text-align:right}

footer{border-top:1px solid var(--line); padding-block:20px; color:var(--muted); font-size:.8rem}
.flinks{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:8px; font-weight:700; font-size:.88rem}
.flinks a{color:var(--hema); text-decoration:none}
.toast{position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); background:var(--ink); color:var(--bg); padding:10px 16px; border-radius:8px; font-size:.88rem; font-weight:700; z-index:20}
@media (prefers-reduced-motion: no-preference){ .idea,.tl li{animation:rise .25s ease both} @keyframes rise{from{transform:translateY(4px)} to{transform:none}} }

/* ---------- working app additions ---------- */
body{margin:0; min-height:100vh; display:flex; flex-direction:column}
main{flex:1; width:100%}
img{max-width:100%}
[hidden]{display:none!important}
a{color:var(--hema)}
.brand .wrap{align-items:center; padding-block:14px 12px}
.logo{display:grid; gap:2px}
.logo .home{text-decoration:none; color:var(--ink)}
.logo h1{font-size:1.75rem}
.credit{font-size:.78rem}
.who{display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:.9rem}
.who .name{font-weight:700}
.who select{width:auto; max-width:220px; padding:6px 8px}
.loading{padding:48px 0; color:var(--muted)}
.pill-info{background:var(--hema-soft); color:var(--hema)}
.btn{min-height:36px; display:inline-flex; align-items:center; justify-content:center; gap:6px; text-decoration:none; color:var(--ink)}
.btn[disabled]{opacity:.55; cursor:default}
.btn.danger{color:var(--crit); border-color:var(--crit-soft)}
.btn.danger:hover{border-color:var(--crit); color:var(--crit)}
.btn.danger.armed{background:var(--crit); border-color:var(--crit); color:#fff}
.btn.big{padding:11px 18px; font-size:.95rem}
input[type="text"],input[type="email"],input[type="password"],input[type="date"],input[type="tel"],input[type="search"]{background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:9px 10px; width:100%; color:var(--ink)}
input::placeholder,textarea::placeholder{color:var(--muted); opacity:.8}
.hint{font-size:.8rem; color:var(--muted); font-weight:400}
.err{color:var(--crit); font-size:.88rem; font-weight:700}
.err:empty{display:none}
.stack{display:grid; gap:12px}
.hrow{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.narrow{max-width:520px}

/* sign in */
.welcome{display:grid; gap:24px; padding-top:8px}
.welcome .lead{font-size:1.1rem; color:var(--muted); max-width:60ch}
.auth{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px; align-items:start}
@media (max-width:760px){ .auth{grid-template-columns:minmax(0,1fr)} }
.auth .panel{display:grid; gap:14px; padding:20px}
.auth h2{font-size:1.35rem}
.seg.full{display:flex}
.seg.full button{flex:1; padding:9px 10px}
.agree{display:flex; gap:10px; align-items:flex-start; font-size:.88rem}
.agree input{margin-top:3px; width:18px; height:18px; accent-color:var(--hema); flex:none}
.pin{font-family:var(--f-mono); letter-spacing:.4em; font-size:1.1rem!important}

/* class code */
.codebox{display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; background:var(--hema-soft); border-radius:var(--r); padding:14px 16px}
.codebox .big{font-family:var(--f-mono); font-size:1.6rem; letter-spacing:.12em; color:var(--hema); font-weight:500}
.empty{background:var(--surface); border:1px dashed var(--line); border-radius:var(--r); padding:20px; display:grid; gap:10px; justify-items:start}

/* notebook additions */
.tl .shot{display:block; width:220px; max-width:100%; border-radius:8px; border:1px solid var(--line); background:var(--surface-2); aspect-ratio:4/3; object-fit:cover; cursor:zoom-in}
.tl .shot.open{width:100%; aspect-ratio:auto; cursor:zoom-out}
.tl .txt{white-space:pre-wrap; overflow-wrap:anywhere}
.tl .dot.student{background:var(--surface)}
.rqcard{display:grid; gap:10px}
.rqcard .q{font-family:var(--f-display); font-size:1.25rem; line-height:1.3}
.deadlines{display:grid; gap:6px; margin:0; padding:0; list-style:none; font-size:.9rem}
.deadlines li{display:flex; justify-content:space-between; gap:12px; border-bottom:1px solid var(--line); padding-bottom:6px}
.deadlines li.past{color:var(--muted); text-decoration:line-through}
.deadlines li.next{font-weight:700; color:var(--hema)}
.kindpick{display:flex; flex-wrap:wrap; gap:6px}
.kindpick button{border:1px solid var(--line); background:var(--surface); border-radius:99px; padding:6px 12px; font-size:.85rem; cursor:pointer; font-weight:600}
.kindpick button[aria-pressed="true"]{background:var(--hema); color:var(--on-hema); border-color:var(--hema)}
.filepick{display:grid; gap:8px}
.filepick .preview{max-width:240px; border-radius:8px; border:1px solid var(--line)}
.tools{display:grid; gap:12px}
.tools details{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:12px 16px}
.tools summary{cursor:pointer; font-weight:700; min-height:28px}
.tools details[open] summary{margin-bottom:10px}
.kitgrid{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:16px}
.msgrid{display:grid; grid-template-columns:repeat(auto-fill, minmax(190px,1fr)); gap:12px}
.cal-actions{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end}
#cal-add .meta{display:grid; grid-template-columns:140px minmax(0,1fr); gap:10px}
@media (max-width:520px){ #cal-add .meta{grid-template-columns:minmax(0,1fr)} }
.ms.low b{margin-top:38px}
.offline{background:var(--warn-soft); color:var(--warn); text-align:center; font-size:.85rem; font-weight:700; padding:6px}

/* touch: bigger targets on phones and tablets */
@media (pointer:coarse){
  .btn,.seg button,.kindpick button,.tchip{min-height:44px}
  .tabs a{padding:14px 14px}
  select,input[type="text"],input[type="email"],input[type="password"],input[type="date"],input[type="tel"],input[type="number"],textarea{min-height:44px; font-size:16px}
  .check{min-height:32px; align-items:center}
  .check input{margin-top:0; width:20px; height:20px}
}

/* ---- F22: shell polish (bottom bar, unread dots, skeletons, phone rules) ---- */
#tablist a{position:relative}
.udot{position:absolute; top:6px; right:4px; width:9px; height:9px; border-radius:50%; background:var(--crit,#d64541); box-shadow:0 0 0 2px var(--surface)}
#bottombar{display:none}
.credit-phone{display:none}
/* Private notes (F23) */
#notes-thread, #ia-notes-thread{display:grid; gap:10px; margin:10px 0 14px}
.note-item{border-left:3px solid var(--hema); background:var(--surface); padding:8px 10px}
.note-item .txt{white-space:pre-wrap; overflow-wrap:anywhere; margin:2px 0 0}
.note-meta{font-size:.84rem; margin:0}
a.disc-mini{display:inline-flex; align-items:center; text-decoration:none}
.skel{padding:28px 0}
.skel-line{height:14px; border-radius:6px; background:var(--line); margin:12px 0; opacity:.55; animation:skel-pulse 1.2s ease-in-out infinite}
.skel-line.w40{width:40%}.skel-line.w60{width:60%}.skel-line.w70{width:70%}.skel-line.w80{width:80%}
.skel-card{height:110px; border-radius:var(--r); background:var(--line); margin:16px 0; opacity:.35; animation:skel-pulse 1.2s ease-in-out infinite}
@keyframes skel-pulse{0%,100%{opacity:.35}50%{opacity:.65}}
.btn.is-busy{position:relative; padding-right:30px}
.btn.is-busy::after{content:""; position:absolute; right:10px; top:50%; width:14px; height:14px; margin-top:-7px; border-radius:50%; border:2px solid currentColor; border-top-color:transparent; animation:lt-spin .7s linear infinite}
@keyframes lt-spin{to{transform:rotate(360deg)}}
.strip{margin-inline:64px}
.strip .ms b{white-space:normal; line-height:1.2; max-width:112px}
.nb-newbtn{display:none}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.001s !important; scroll-behavior:auto !important}
}
@media (max-width:700px){
  :root{font-size:17px}
  body{padding-bottom:84px}
  header.brand .wrap{display:flex; align-items:center; gap:10px}
  header.brand .credit{display:none}
  header.brand .who .name{display:none}
  header.brand .who .name.who-first{display:inline}
  header.brand .who{display:flex; align-items:center; gap:8px; margin-left:auto}
  header.brand select{max-width:40vw}
  .credit-phone{display:block; margin:0 0 8px}
  #tabs{display:none}
  #bottombar{display:block; position:fixed; left:0; right:0; bottom:0; z-index:30; background:var(--surface); border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom, 0px)}
  #bottombar .bb-row{display:flex; justify-content:space-around; align-items:stretch}
  #bottombar a, #bottombar button{position:relative; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-height:58px; padding:6px 2px; background:none; border:none; color:var(--ink); text-decoration:none; font:inherit; cursor:pointer}
  #bottombar .bb-ic{font-size:1.15rem; line-height:1}
  #bottombar .bb-lb{font-size:.72rem; font-weight:600}
  #bottombar a[aria-current="page"]{color:var(--hema)}
  #bottombar .udot{top:8px; right:calc(50% - 16px)}
  #bb-sheet{border-bottom:1px solid var(--line); display:flex; flex-direction:column}
  #bb-sheet[hidden]{display:none}
  #bb-sheet a{flex:none; align-items:flex-start; padding:12px 18px; min-height:48px; font-weight:600}
  .btn{min-height:44px}
  #tablist a{min-height:44px; padding:12px 10px}
  .kindpick{flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px}
  .kindpick button{min-height:44px; white-space:nowrap}
  .nb-newbtn{display:block; width:100%; margin:0 0 12px}
  .nb-formsec{display:none}
  .nb-formsec.open{display:block}
  .tbl{overflow-x:visible; border:none; background:none}
  .tbl table{min-width:0; width:100%}
  .tbl thead{display:none}
  .tbl tr.row{display:block; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); margin-bottom:10px; padding:10px 12px}
  .tbl td{display:flex; gap:10px; justify-content:space-between; align-items:baseline; border:none; padding:5px 0; text-align:left}
  .tbl td::before{content:attr(data-label); font-size:.78rem; font-weight:700; color:var(--muted); flex:none}
  .tbl td .rq{margin-top:0}
}
input::placeholder,textarea::placeholder{font-weight:400; color:var(--muted); opacity:.75}

/* F24 Part 0a: grid/flex children must be allowed to shrink below their
   content width, or a wide table widens the whole phone page. */
#main, #main .view, #main .sec, #main .panel, #main .cal { min-width: 0; max-width: 100%; }
.scroll-x { overflow-x: auto; max-width: 100%; min-width: 0; -webkit-overflow-scrolling: touch; }
.sec > .scroll-x, .panel > .scroll-x { max-width: 100%; }
/* The chain breaks at UNCLASSED wrapper divs (the Marker agreement box):
   a grid item defaults to min-width:auto and will not shrink below its
   table's intrinsic width, so EVERY section/view child may shrink. */
#main .sec > *, #main .view > *, #main .panel > *, #main .cal > *, #main .card > * { min-width: 0; max-width: 100%; }
/* pinned discussion question */
.disc-q { border: 2px solid var(--accent, #b5446e); background: #fdf3f6; }
.disc-q .q-badge { background: var(--accent, #b5446e); color: #fff; border-radius: 999px; padding: 1px 8px; font-size: .72rem; font-weight: 700; }
/* idea engine + task builder */
.idea-card { border: 1px solid var(--line, #ddd); border-radius: 10px; padding: 10px 12px; margin: 8px 0; }
.idea-card h4 { margin: 0 0 4px; font-size: .95rem; }
.chiprow { display: flex; flex-wrap: wrap; gap: 6px; }
.chiprow .chip { cursor: pointer; }
.chiprow .chip[aria-pressed="true"] { background: var(--ink, #222); color: #fff; }
.task-rubric-band { border-left: 3px solid var(--line, #ccc); padding: 4px 0 4px 10px; margin: 6px 0; }
.task-rubric-band .orig { white-space: pre-wrap; }
.task-rubric-band .clar { color: var(--muted, #555); font-style: italic; white-space: pre-wrap; }

.who-first{display:none}

/* F30 — Lab Notebook hero + IA mini-deadlines */
.nb-hero { display:flex; gap:14px; align-items:center; background:var(--hema-soft, #e4f0ec); border:1px solid var(--line); border-radius:16px; padding:12px 16px; margin-bottom:14px; }
.nb-avatar { flex:0 0 auto; line-height:0; }
.nb-avatar svg { width:72px; height:72px; }
.nb-hero-txt { min-width:0; }
.nb-welcome { margin:0 0 4px; font-weight:600; }
.nb-bubble { position:relative; margin:0; background:var(--surface, #fff); border:1px solid var(--line); border-radius:12px; padding:8px 12px; font-size:.92rem; animation:nbPop .45s ease-out; }
@keyframes nbPop { from { transform:scale(.95); opacity:.3; } to { transform:scale(1); opacity:1; } }
@media (prefers-reduced-motion: reduce) { .nb-bubble { animation:none; } }
/* F30b — notebook avatar animation (SVG markup lives in app.js NB_AVATAR_SVG) */
.nba-bob { animation:nbaBob 3.4s ease-in-out infinite; }
@keyframes nbaBob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-1.8px); } }
.nba-wave { transform-box:view-box; transform-origin:64px 67px; animation:nbaWave 1.9s ease-in-out infinite; }
@keyframes nbaWave { 0%,100% { transform:rotate(5deg); } 50% { transform:rotate(-12deg); } }
.nba-blink { transform-box:fill-box; transform-origin:center; animation:nbaBlink 4.8s infinite; }
@keyframes nbaBlink { 0%,93%,100% { transform:scaleY(1); } 96% { transform:scaleY(.06); } }
.nba-bub { transform-box:fill-box; transform-origin:center; animation:nbaBub 2.6s ease-in infinite; }
.nba-bub.b2 { animation-delay:.85s; } .nba-bub.b3 { animation-delay:1.6s; }
@keyframes nbaBub { 0% { transform:translateY(0) scale(1.5); opacity:0; } 25% { opacity:1; } 80% { opacity:.95; } 100% { transform:translateY(-11px) scale(2.3); opacity:0; } }
.nba-spark { transform-box:fill-box; transform-origin:center; animation:nbaSpark 2.8s ease-in-out infinite; }
.nba-spark.s2 { animation-delay:1.4s; }
@keyframes nbaSpark { 0%,100% { transform:scale(.55); opacity:.3; } 50% { transform:scale(1.05); opacity:1; } }
@media (prefers-reduced-motion: reduce) { .nba-bob,.nba-wave,.nba-blink,.nba-bub,.nba-spark { animation:none; } }
.nb-revision { border-left:4px solid var(--warn, #d97706); }
.nb-locked { border-left:4px solid var(--hema, #2f7f6f); }
.step-card { border-left:4px solid var(--line); }
.step-card.st-overdue { border-left-color:var(--crit, #dc2626); background:var(--crit-soft); }
.step-card.st-soon { border-left-color:var(--warn, #d97706); }
.step-card.st-complete { border-left-color:var(--good, #16a34a); }
.step-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.step-head h4 { margin:0; flex:1; min-width:160px; }
.step-n { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background:var(--hema-soft, #e4f0ec); font-weight:700; font-size:.85rem; }
.step-what summary { cursor:pointer; font-weight:600; font-size:.9rem; margin-top:6px; }
.step-instr { white-space:pre-line; font-size:.9rem; margin-top:6px; }
.step-frame { font-size:.9rem; }
.step-help { background:var(--warn-soft); border-radius:10px; padding:8px 12px; font-size:.88rem; margin-top:8px; }
.step-reply { margin-top:4px; }
.step-actions { margin-top:10px; }
.step-mats { margin-top:10px; border-top:1px dashed var(--line); padding-top:8px; }
.mat-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:6px; }
.mat-row input[type=text] { flex:1 1 130px; }
.ord-row { display:flex; gap:12px; flex-wrap:wrap; padding:4px 0; border-bottom:1px dashed var(--line); font-size:.88rem; }
.ord-group h4 { margin:12px 0 4px; }
.step-edit { border-top:1px solid var(--line); padding:12px 0; }
@media print {
  body.printing * { visibility:hidden; }
  body.printing .print-area, body.printing .print-area * { visibility:visible; }
  body.printing .print-area { position:absolute; inset:0; }
  body.printing .noprint { display:none; }
}

/* ---- F33 motion + teacher/student packs --------------------------------
   A small, shared motion language: panels rise in gently, buttons press,
   the notebook avatar celebrates finished steps with a hearts-and-
   sparkles burst, and the progress bar fills. Everything is gated on
   prefers-reduced-motion: no-preference, and all colours come from the
   theme variables so dark mode stays correct. */
.nb-avatar { position:relative; }
.nb-burst { position:absolute; left:0; top:0; width:84px; height:84px; pointer-events:none; }
.nb-burst i { position:absolute; left:50%; top:34%; font-style:normal; font-size:19px; line-height:1; opacity:0; color:#e5648a; }
.step-card { position:relative; }
.nb-burst-card i { top:12%; font-size:18px; }
/* AI progress card (F33c): shown while any AI marker/moderator runs. */
.ai-prog { margin-top:12px; border:1px solid color-mix(in srgb, var(--ink) 14%, transparent); border-radius:12px; padding:12px 14px; background:color-mix(in srgb, var(--ink) 4%, transparent); }
.ai-prog-top { display:flex; align-items:center; gap:8px; }
.ai-prog-stage { font-size:.92rem; }
.ai-prog-time { margin-left:auto; font-variant-numeric:tabular-nums; font-size:.85rem; }
.ai-prog-dot { width:9px; height:9px; border-radius:50%; background:#3d9970; flex:0 0 auto; }
.ai-prog-bar { margin-top:10px; height:8px; border-radius:99px; overflow:hidden; background:color-mix(in srgb, var(--ink) 12%, transparent); }
.ai-prog-bar i { display:block; height:100%; width:38%; border-radius:99px; background:linear-gradient(90deg, #3d9970, #6fbf73, #e5648a); }
/* High-res illustrated avatar (F33e) + fizz bubbles over its flask. */
.nb-avatar-img { width:84px; height:84px; border-radius:50%; display:block; }
.nb-fizz { position:absolute; left:0; top:0; width:84px; height:84px; pointer-events:none; }
.nb-name { display:block; margin-top:5px; text-align:center; }
.nb-name b { color:#0b7a75; font-weight:800; font-size:1rem; letter-spacing:.05em; }
@media (prefers-color-scheme: dark) { .nb-name b { color:#2dd4bf; } }
.nb-fizz i { position:absolute; border-radius:50%; background:radial-gradient(circle at 35% 35%, #eafff5, #69c24a); opacity:0; }
.nb-fizz i:nth-child(1) { left:66%; top:60%; width:9px; height:9px; }
.nb-fizz i:nth-child(2) { left:72%; top:62%; width:11px; height:11px; }
.nb-fizz i:nth-child(3) { left:77%; top:59%; width:7px; height:7px; }
.nb-fizz i:nth-child(4) { left:69%; top:63%; width:10px; height:10px; }
.nb-fizz i:nth-child(5) { left:75%; top:64%; width:8px; height:8px; }
.nb-fizz i:nth-child(6) { left:64%; top:62%; width:7px; height:7px; }
/* Markus's first-load speech bubble (F33f). */
.nb-hero { position:relative; }
.markus-say { position:absolute; left:104px; top:10px; z-index:6; max-width:210px; background:var(--surface, #fff); color:var(--ink); border:2px solid var(--hema, #2f7f6f); border-radius:16px; padding:9px 14px; font-weight:700; font-size:1.02rem; box-shadow:0 8px 22px rgba(0,0,0,.28); transition:opacity .45s ease, transform .45s ease; }
.markus-say::after { content:""; position:absolute; left:18px; bottom:-9px; width:16px; height:16px; background:inherit; border-right:2px solid var(--hema, #2f7f6f); border-bottom:2px solid var(--hema, #2f7f6f); transform:rotate(45deg); border-bottom-right-radius:4px; }
.markus-say.ms-out { opacity:0; transform:translateY(-8px) scale(.92); }
.nb-burst i:nth-child(even) { color:#d9a441; }
.nb-burst i:nth-child(3n) { color:#3d9970; }
.nb-progress { margin-bottom:12px; }
.nb-prog-top { display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
.nb-progbar { height:10px; border-radius:99px; background:color-mix(in srgb, var(--ink) 12%, transparent); overflow:hidden; }
.nb-progbar i { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg, #3d9970, #6fbf73); }
.disc-starters { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:8px 0 2px; }
.disc-starter { border:1px solid var(--line); background:var(--card, transparent); color:var(--ink); border-radius:99px; padding:4px 10px; font-size:.8rem; cursor:pointer; }
.disc-starter:hover { transform:translateY(-1px); }
.btn { transition:transform .08s ease; }
.btn:active { transform:scale(.96); }
@media (prefers-reduced-motion: no-preference){
  .panel, .cal-card { animation:rise .22s ease both; }
  .toast { animation:lt-toast-in .25s ease both; }
  .nb-progbar i { animation:nbFill .8s ease both; }
  .nb-avatar.cheer svg, .nb-avatar.cheer .nb-avatar-img { animation:nbaCheer .95s ease; }
  .nb-burst i { animation:nbBurst 1.9s ease-out both; animation-delay:calc(var(--nb-i) * 60ms); }
  .ai-prog-dot { animation:aiPulse 1.1s ease-in-out infinite; }
  .ai-prog-bar i { animation:aiSweep 1.5s ease-in-out infinite; }
  .nb-avatar-img { animation:nbaImgLife 3.4s ease-in-out infinite; }
  .nb-fizz i { animation:nbFizz 2.9s linear infinite; }
  .nb-fizz i:nth-child(2) { animation-delay:.5s; }
  .nb-fizz i:nth-child(3) { animation-delay:1s; }
  .nb-fizz i:nth-child(4) { animation-delay:1.5s; }
  .nb-fizz i:nth-child(5) { animation-delay:2s; }
  .nb-fizz i:nth-child(6) { animation-delay:2.5s; }
  .markus-say { animation:msPop .5s cubic-bezier(.2, 1.6, .4, 1) both; }
  .markus-say .ms-w { opacity:0; animation:msWord .3s ease both; }
  .markus-say .ms-w:nth-child(2) { animation-delay:.5s; }
  .markus-say .ms-w:nth-child(3) { animation-delay:1s; }
}
@keyframes lt-toast-in { from { opacity:0; transform:translate(-50%, 8px); } to { opacity:1; transform:translate(-50%, 0); } }
@keyframes aiPulse { 0%, 100% { transform:scale(1); opacity:1; } 50% { transform:scale(1.45); opacity:.55; } }
@keyframes aiSweep { 0% { transform:translateX(-110%); } 100% { transform:translateX(290%); } }
@keyframes nbaImgLife { 0%, 100% { transform:translateY(0) rotate(0deg); } 30% { transform:translateY(-2.5px) rotate(-1.6deg); } 62% { transform:translateY(0) rotate(1.6deg); } }
@keyframes nbFizz { 0% { transform:translate(0, 0) scale(.75); opacity:0; } 16% { opacity:1; } 84% { opacity:.9; } 100% { transform:translate(4px, -40px) scale(1.15); opacity:0; } }
@keyframes msPop { 0% { transform:scale(.5) translateY(8px); opacity:0; } 100% { transform:scale(1) translateY(0); opacity:1; } }
@keyframes msWord { 0% { opacity:0; transform:translateY(4px); } 100% { opacity:1; transform:translateY(0); } }
@keyframes nbFill { from { width:0; } }
@keyframes nbaCheer { 0% { transform:scale(1) translateY(0); } 30% { transform:scale(1.16) rotate(-3deg) translateY(-5px); } 55% { transform:scale(1.08) rotate(3deg) translateY(-2px); } 100% { transform:scale(1) translateY(0); } }
@keyframes nbBurst { 0% { opacity:0; transform:rotate(calc(var(--nb-i) * 45deg)) translateY(0) scale(.6); } 12% { opacity:1; } 70% { opacity:1; } 100% { opacity:0; transform:rotate(calc(var(--nb-i) * 45deg)) translateY(-58px) scale(1.15); } }

/* F34 item 3: while Markus speaks, the hero grows a clear band at the top
   and the bubble sits in it — no overlap with the welcome text, and the
   next-step bubble is nudged down briefly, never off screen. */
.nb-hero { transition:padding-top .35s ease; }
.nb-hero.markus-on { padding-top:62px; }

/* F34 items 4+5: phone-compact materials rows and MYP grade grid. */
@media (max-width:700px){
  .mat-row { display:grid; grid-template-columns:60px minmax(0, 0.9fr) minmax(0, 1.1fr); gap:6px; align-items:center; padding:8px; border:1px solid var(--line); border-radius:10px; background:var(--surface); }
  .mat-row input[type=text], .mat-row select { width:100%; min-height:32px; padding:4px 8px; font-size:.88rem; }
  .mat-row input[data-f="item"] { grid-column:1 / -1; }
  .mat-row > span { grid-column:1 / 3; }
  .mat-row > button { grid-column:3; justify-self:end; min-height:32px; }
  .myp-cmp tr { display:grid; grid-template-columns:repeat(4, 1fr); gap:2px 8px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); margin-bottom:10px; padding:8px 10px; }
  .myp-cmp td { display:block; text-align:center; padding:2px; font-weight:600; border:none; }
  .myp-cmp td::before { content:attr(data-label); display:block; font-size:.66rem; font-weight:700; letter-spacing:.07em; color:var(--muted); }
  .myp-cmp td.myp-sname { grid-column:1 / -1; text-align:left; font-weight:400; padding-bottom:4px; }
  .myp-cmp td.myp-sname::before { content:none; }
}

/* F43: sign-in screen — Student / Teacher tabs, one form at a time, fits a phone screen without scrolling */
.role-tabs{max-width:520px; margin:0}
.role-tabs button{font-size:1rem; font-weight:700; padding:12px 10px}
.role-tabs button[aria-selected="true"]{background:var(--hema); color:#fff}
.auth{grid-template-columns:minmax(0,520px)}
.auth .panel[hidden]{display:none}
@media (max-width:760px){
  .welcome{gap:12px; padding-top:0}
  .welcome .lead{display:none}
  .welcome .stack h2{font-size:1.45rem; margin:0}
  .auth .panel{gap:10px; padding:14px}
  .auth label.f{gap:4px}
  .auth #s-name{margin-top:0}
  .agree{font-size:.82rem; line-height:1.35}
  .welcome > p.muted{display:none}
}

/* F43: tab panels glide in; in-app screens a little tighter */
.auth .panel:not([hidden]){animation:lcGlide .3s cubic-bezier(.2,.7,.2,1) both}
@keyframes lcGlide{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
.role-tabs button{transition:background .2s, color .2s}
@media (prefers-reduced-motion:reduce){ .auth .panel:not([hidden]){animation:none} }

/* F43: one-screen tabs inside the signed-in screens (see panes.js) */
.lc-gone{display:none!important}
.lc-vtabs{display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; position:sticky; top:0; z-index:6; margin:0 -16px 12px; padding:8px 16px; background:rgba(251,248,241,.94); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.lc-vtabs::-webkit-scrollbar{display:none}
.lc-vtabs button{flex:none; border:1px solid var(--line); background:#fff; color:var(--ink); font:600 .92rem/1 var(--f-body,Inter,system-ui,sans-serif); padding:10px 15px; border-radius:999px; cursor:pointer; transition:background .2s,color .2s,border-color .2s,box-shadow .25s,transform .15s; min-height:40px}
.lc-vtabs button:hover{border-color:#C9BEEA; box-shadow:0 4px 14px -8px rgba(67,52,163,.5)}
.lc-vtabs button:active{transform:scale(.97)}
.lc-vtabs button[aria-selected="true"]{background:linear-gradient(135deg,#5B49C6,#4334A3); color:#fff; border-color:transparent; box-shadow:0 8px 18px -10px rgba(67,52,163,.8)}
.lc-pane{animation:lcPane .38s cubic-bezier(.2,.7,.2,1) both}
@keyframes lcPane{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}}
/* fold-out settings */
.lc-acc > :first-child{cursor:pointer; position:relative; margin:0; padding-right:28px}
.lc-acc > :first-child::after{content:""; position:absolute; right:6px; top:.55em; width:9px; height:9px; border-right:2px solid var(--hema); border-bottom:2px solid var(--hema); transform:rotate(45deg); transition:transform .25s}
.lc-acc.open > :first-child::after{transform:rotate(-135deg)}
.lc-acc:not(.open) > :first-child p{display:none}
.lc-acc:not(.open) > :not(:first-child){display:none}
.lc-acc.open > :first-child{margin-bottom:10px}
@media (min-width:761px){ .lc-vtabs{margin-inline:0; padding-inline:0; border-radius:0} }
@media (prefers-reduced-motion:reduce){ .lc-pane{animation:none} }

/* F43: the student list is three short lines per student on a phone */
@media (max-width:760px){
  .tbl tr.row{display:grid; grid-template-columns:auto 1fr auto; grid-template-areas:"n n s" "q q q" "g t l"; gap:2px 10px; padding:10px 12px; align-items:center}
  .tbl tr.row > td{padding:0; display:block; min-width:0}
  .tbl tr.row > td::before{display:none}
  .tbl tr.row > td:nth-child(1){grid-area:n; font-size:1.02rem}
  .tbl tr.row > td:nth-child(2){grid-area:q}
  .tbl tr.row > td:nth-child(2) .rq{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:.92rem}
  .tbl tr.row > td:nth-child(2) .code{display:none}
  .tbl tr.row > td:nth-child(3){grid-area:g}
  .tbl tr.row > td:nth-child(4){grid-area:t}
  .tbl tr.row > td:nth-child(5){grid-area:l; font-size:.78rem; color:var(--muted)}
  .tbl tr.row > td:nth-child(6){grid-area:s; justify-self:end}
  .tbl tr.row > td:nth-child(3) .chip{font-size:.74rem; padding:3px 8px}
  .tbl tr.row .trail{justify-content:flex-start}
  .tbl tr.row .trail .meter{max-width:80px}
}

/* Owner tables fit a phone: wrap instead of sideways scrolling so Remove is always in reach */
@media (max-width:760px){ #admin-panel table{table-layout:auto} #admin-panel td,#admin-panel th{overflow-wrap:anywhere;padding:6px 4px;font-size:.8rem} #admin-panel td .btn.small{padding:5px 8px} }