/* in-learn component library v1 - cream/chocolate/ink. Sharp corners, serif names, mono data. */
:root{--paper:#F6F1E7;--card:#FCFAF4;--panel:#F1EADA;--ink:#2E2119;--choc:#6B4226;--deep:#4E2E1A;--hair:#D8CDBB;--dash:#C9BBA6;--mut:#7A6A55}
*{box-sizing:border-box;margin:0}
body{background:var(--paper);color:var(--ink);font-family:Georgia,'Times New Roman',serif;line-height:1.5;-webkit-text-size-adjust:100%}
.mono{font-family:'Courier New',monospace}
/* header */
.top{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;border-bottom:3px solid var(--ink)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand .wm{font-size:23px;font-weight:700;color:var(--deep)}
.date{font-family:'Courier New',monospace;font-size:10px;font-weight:700;letter-spacing:1.5px;color:var(--choc)}
.wrap{max-width:960px;margin:0 auto;padding:0 20px}
/* hero */
.hero{padding:40px 0 24px;border-bottom:3px solid var(--ink)}
.kick{font-family:'Courier New',monospace;font-size:10px;font-weight:700;letter-spacing:2px;color:var(--choc);margin-bottom:14px}
h1{font-size:40px;line-height:1.12;color:var(--deep);max-width:640px}
.by{font-style:italic;font-size:15px;color:var(--mut);max-width:560px;margin-top:16px}
@media(max-width:640px){h1{font-size:30px}}
/* view switcher */
.views{display:flex;flex-wrap:wrap;gap:8px;padding:16px 0 4px}
.vbtn{font-family:'Courier New',monospace;font-size:10px;font-weight:700;letter-spacing:1.5px;color:var(--deep);background:var(--card);border:1.5px solid var(--ink);padding:9px 14px;cursor:pointer}
.vbtn[aria-pressed="true"]{background:var(--deep);color:var(--paper)}
.viewline{font-style:italic;font-size:14px;color:var(--mut);padding:10px 2px 0;min-height:24px}
/* section head */
.sec{padding:26px 0 4px}
.sechead{display:flex;justify-content:space-between;align-items:baseline;border-bottom:3px solid var(--ink);padding-bottom:6px;margin-bottom:2px}
.sechead .l{font-family:'Courier New',monospace;font-size:10px;font-weight:700;letter-spacing:1.5px;color:var(--deep)}
.sechead .r{font-family:'Courier New',monospace;font-size:9px;letter-spacing:1.5px;color:var(--mut)}
/* board cards */
.board{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:16px 0 6px}
@media(max-width:640px){.board{grid-template-columns:1fr}}
.bcard{background:var(--card);border:1.5px solid var(--ink);padding:16px 16px 14px}
.bcard .n{font-family:'Courier New',monospace;font-size:10px;font-weight:700;letter-spacing:1.5px;color:var(--choc);border-bottom:1px solid var(--hair);padding-bottom:8px;margin-bottom:10px}
.bcard .t{font-size:15px;font-weight:700;margin-bottom:5px;color:var(--deep)}
.bcard .d{font-size:12.5px;font-style:italic;color:var(--mut)}
/* journey trail */
.trail{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:18px 4px 8px}
.tstep{display:flex;align-items:center;gap:8px}
.tn{font-family:'Courier New',monospace;font-size:11px;font-weight:700;color:var(--paper);background:var(--choc);width:22px;height:22px;display:flex;align-items:center;justify-content:center;flex:none}
.tl{font-size:14px;font-weight:700;color:var(--deep)}
.tarr{font-family:'Courier New',monospace;color:var(--dash);font-weight:700}
/* list rows */
.crow{display:flex;align-items:center;gap:14px;padding:13px 4px;border-bottom:1px solid var(--hair);text-decoration:none;color:var(--ink);min-height:46px}
.crow:hover{background:var(--card)}
.shape{width:14px;height:14px;flex:none;background:var(--deep)}
.sq{border-radius:0}.ci{border-radius:50%}.tr{width:0;height:0;background:none;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:14px solid var(--deep)}.di{transform:rotate(45deg);width:11px;height:11px}.ho{background:none;border:2.5px solid var(--deep);width:11px;height:11px}
.code{font-family:'Courier New',monospace;font-size:11px;font-weight:700;letter-spacing:1.5px;color:var(--choc);width:26px;flex:none}
.cname{font-size:15px;font-weight:700;flex:1}
.cdesc{font-size:12.5px;font-style:italic;color:var(--mut);flex:2}
.arr{font-family:'Courier New',monospace;color:var(--choc);flex:none}
@media(max-width:640px){.cdesc{display:none}}
/* note */
.note{border-left:3px solid var(--choc);padding:10px 14px;margin:22px 0;background:var(--card)}
.note p{font-style:italic;font-size:14px;color:var(--ink)}
.note .who{font-style:normal;font-family:'Courier New',monospace;font-size:10px;letter-spacing:1.5px;color:var(--choc);margin-top:8px}
/* stamp band */
.stampband{display:flex;align-items:center;gap:20px;padding:20px 0 6px}
.stamp{width:86px;height:86px;flex:none;border:2px dashed var(--choc);border-radius:50%;display:flex;align-items:center;justify-content:center;transform:rotate(-9deg);font-family:'Courier New',monospace;font-size:10px;font-weight:700;letter-spacing:1px;color:var(--choc);text-align:center;line-height:1.4}
/* buttons */
.btn{display:inline-block;font-family:'Courier New',monospace;font-size:11px;font-weight:700;letter-spacing:1.5px;text-decoration:none;padding:11px 18px;border:1.5px solid var(--ink);cursor:pointer}
.btn.pri{background:var(--deep);color:var(--paper)}
.btn.sec{background:var(--card);color:var(--deep)}
/* chip + field */
.chip{display:inline-block;font-family:'Courier New',monospace;font-size:9.5px;font-weight:700;letter-spacing:1px;color:var(--choc);background:var(--panel);border:1px solid var(--dash);padding:5px 9px}
.field{width:100%;font-family:Georgia,serif;font-size:15px;color:var(--ink);background:var(--card);border:1.5px solid var(--ink);padding:10px 12px}
.field::placeholder{color:var(--mut);font-style:italic}
/* footer */
.foot{border-top:3px solid var(--ink);margin-top:26px;padding:16px 20px 26px;display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;justify-content:space-between}
.foot a{color:var(--ink);font-family:'Courier New',monospace;font-size:10px;font-weight:700;letter-spacing:1.5px;text-decoration:none}
.foot a:hover{color:var(--deep)}
.day{font-family:'Courier New',monospace;font-size:10px;font-weight:700;letter-spacing:1.5px;color:var(--paper);background:var(--deep);padding:6px 10px}
.cred{font-family:'Courier New',monospace;font-size:8.5px;letter-spacing:1px;color:var(--mut);width:100%;text-align:center;margin-top:8px}
/* the road - a path the student walks, dotted like a muggu line */
.road{position:relative;margin:10px 0 6px;padding:4px 0 4px 11px;border-left:2px dotted var(--dash)}
.rstop{position:relative;padding:11px 0 11px 24px}
.rstop .tn{position:absolute;left:-23px;top:11px;background:var(--paper);border:2px solid var(--choc);color:var(--choc);width:26px;height:26px;font-size:11px}
.rstop.here .tn{background:var(--deep);border-color:var(--deep);color:var(--paper)}
.rt{font-size:15.5px;font-weight:700;color:var(--deep)}
.rd{font-size:12.5px;font-style:italic;color:var(--mut);margin-top:2px;max-width:520px}
.fork{display:flex;flex-wrap:wrap;gap:8px;padding:8px 0 2px}
.fchip{display:inline-block;font-family:'Courier New',monospace;font-size:9.5px;font-weight:700;letter-spacing:1px;color:var(--deep);background:var(--card);border:1.5px solid var(--ink);padding:7px 10px}
.fchip span{color:var(--choc)}
.cpoint{display:inline-flex;align-items:center;gap:6px;font-family:'Courier New',monospace;font-size:8.5px;font-weight:700;letter-spacing:1px;color:var(--choc);margin-top:5px}
.cpoint i{display:inline-block;width:13px;height:13px;border:1.5px dashed var(--choc);border-radius:50%;transform:rotate(-9deg)}
.nextdo{border:2px solid var(--deep);background:var(--card);padding:14px 16px;margin:14px 0 4px}
.nextdo .n{font-family:'Courier New',monospace;font-size:9.5px;font-weight:700;letter-spacing:1.5px;color:var(--choc);margin-bottom:6px}
.nextdo .t{font-size:15px;font-weight:700;color:var(--deep)}
.nextdo .d{font-size:12.5px;font-style:italic;color:var(--mut);margin-top:3px}

/* lib3 - tile parts (icon tile, grid card, count chip) */
.tilegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding-top:10px}
.tile{background:var(--card);border:1px solid var(--hair);padding:16px 6px 12px;text-align:center;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:9px;color:var(--ink);font:inherit}
.tile:hover{border-color:var(--choc)}
.tile svg{width:38px;height:38px;color:var(--choc)}
.tile .tname{font-size:12.5px;font-weight:600;line-height:1.3}
.chip{font-family:'Courier New',monospace;font-size:10px;background:var(--choc);color:var(--paper);padding:2px 7px;letter-spacing:1px;white-space:nowrap}
.chip.ghost{background:transparent;color:var(--mut);border:1px solid var(--hair)}
.crumb{display:flex;align-items:center;gap:8px;padding:10px 0 2px;font-size:12px;letter-spacing:1.5px;color:var(--mut)}
.crumb button{background:none;border:1px solid var(--hair);padding:5px 12px;font:inherit;font-size:11px;letter-spacing:1.5px;cursor:pointer;color:var(--choc)}
.qrow2{display:block;width:100%;text-align:left;background:none;border:none;border-bottom:1px solid var(--hair);padding:11px 4px;cursor:pointer;font:inherit;color:inherit}
.qrow2:hover{background:var(--card)}
.qdet{padding:4px 0 12px 6px;font-size:12.5px}

/* lib3 - journey parts */
.jprog{display:flex;align-items:center;gap:12px;padding:12px 0}
.jbar{flex:1;height:3px;background:var(--hair)}
.jfill{height:3px;background:var(--choc)}
.jcard{border:1px solid var(--ink);background:var(--card);padding:22px 18px 16px;text-align:center;margin-bottom:10px}
.jic{color:var(--choc);padding-bottom:6px}
.jstep{font-family:'Courier New',monospace;font-size:10px;letter-spacing:2px;color:var(--mut);padding-bottom:4px}
.jt{font-size:24px;font-weight:700;letter-spacing:.5px}
.jd{font-size:13.5px;font-style:italic;color:var(--mut);padding:6px 0 12px;max-width:340px;margin:0 auto}
.jact{padding-bottom:12px}
.jbtn{display:inline-block;background:var(--choc);color:var(--paper);padding:10px 20px;font-size:12px;letter-spacing:1.5px;text-decoration:none}
.jbtn:hover{background:var(--deep)}
.jwrite{display:flex;flex-direction:column;gap:8px;max-width:340px;margin:0 auto}
.jdone{width:100%;background:none;border:1px solid var(--ink);padding:11px;font:inherit;font-size:11.5px;letter-spacing:2px;cursor:pointer;color:var(--ink)}
.jdone.on{background:var(--ink);color:var(--paper)}
.jnext{font-family:'Courier New',monospace;font-size:10.5px;letter-spacing:1.5px;color:var(--choc);padding-top:10px}
.jtrail .tile{padding:12px 4px 10px;gap:6px}
.jtrail .tile svg{width:28px;height:28px}
.jtrail .tile.cur{border-color:var(--choc);box-shadow:0 0 0 1px var(--choc)}
.crumb[hidden]{display:none}
/* lib4 - compact card tiles. RULE: lists default to tiles. Any list of register entries renders as .ctile cards inside .ctilegrid (icon + short name + visual badges, details on tap). Plain text rows (.qrow2/.occrow) are legacy - never use them for a new list. */
.ctilegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;padding-top:10px}
.ctile{background:var(--card);border:1px solid var(--hair);padding:12px 10px 10px;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:7px;color:var(--ink);font:inherit}
.ctile:hover{border-color:var(--choc)}
.ctile svg{width:26px;height:26px;color:var(--choc);flex:none}
.ctile>*{min-width:0}
.ctile .ct{font-size:13px;font-weight:700;line-height:1.3;overflow-wrap:anywhere}
.ctile .cbadges{display:flex;gap:5px;flex-wrap:wrap}
.ctile .cmeta{font-family:'Courier New',monospace;font-size:9.5px;letter-spacing:1px;color:var(--mut);word-break:break-all;overflow-wrap:anywhere}
.ctile .cdet{font-size:12px;font-style:italic;color:var(--mut);border-top:1px dashed var(--dash);padding-top:7px;line-height:1.45}