/* Pemberley — Jane Austen: Novels, White Horse Hall */
:root{
  --paper:#F2F1E6; --card:#FBFAF3; --ink:#242B20; --soft:#5E6A57;
  --sage:#8FA68E; --deep:#2E3B2C; --stone:#C0A57E; --claret:#8A4A3C; --latin:#7C6636;
  --line:rgba(46,59,44,.15); --line2:rgba(46,59,44,.28);
  --shadow:0 1px 2px rgba(20,24,18,.07), 0 18px 38px -20px rgba(20,24,18,.42);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Karla",ui-sans-serif,system-ui,-apple-system,sans-serif;
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
a{color:inherit}
h1,h2,h3{margin:0; text-wrap:balance}
p{margin:0}
button{font:inherit; cursor:pointer; border:0; background:none; color:inherit}
input,select,textarea{font:inherit; color:inherit}
.shell{max-width:1060px; margin:0 auto; padding:0 20px}

/* ---------------------------------------------------------------- topbar */
.topbar{border-bottom:1px solid var(--line); background:rgba(251,250,243,.85); backdrop-filter:blur(6px);
  position:sticky; top:0; z-index:30}
.topbar-in{display:flex; align-items:center; gap:20px; padding-block:11px}
.wordmark{text-decoration:none; display:grid; line-height:1.05}
.wordmark-nm{font-family:"EB Garamond",Georgia,serif; font-size:20px; color:var(--deep)}
.wordmark-sub{font-size:9.5px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--soft)}
.topnav{display:flex; gap:4px; margin-right:auto; flex-wrap:wrap}
.topnav a{text-decoration:none; font-size:12px; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; padding:7px 11px; border-radius:2px; color:var(--soft)}
.topnav a:hover,.topnav a:focus-visible{background:rgba(46,59,44,.07); color:var(--ink)}
.signout{display:flex; align-items:center; gap:10px}
.whoami{font-size:12px; color:var(--soft)}
.linkish{font-size:12px; font-weight:600; color:var(--deep); text-decoration:underline;
  text-underline-offset:3px; text-decoration-color:var(--line2)}
.foot{padding:34px 20px 46px; color:var(--soft); font-size:11.5px}

/* ----------------------------------------------------------------- panel */
main{padding:4px 20px 10px}
.panel{background:var(--paper); border:1px solid var(--line); border-radius:4px;
  box-shadow:var(--shadow); overflow:hidden; margin-bottom:26px}
.panel.narrow{max-width:560px}
.pad{padding:22px}
.head-block{border-bottom:1px solid var(--line)}
.stack{display:grid; gap:12px}
.rule{height:1px; background:linear-gradient(90deg,var(--line2),rgba(46,59,44,.04)); margin:16px 0}
.card{background:var(--card); border:1px solid var(--line); border-radius:3px; padding:15px}
.card.remark{background:rgba(143,166,142,.15); border-color:rgba(143,166,142,.5)}
.card.anchor{border-left:3px solid rgba(192,165,126,.7)}
.note{background:rgba(192,165,126,.16); border:1px solid rgba(192,165,126,.45); border-radius:3px;
  padding:11px 13px; font-size:12px; line-height:1.55; color:#5E4B24; margin-top:12px}
.error{background:rgba(138,74,60,.12); border:1px solid rgba(138,74,60,.4); border-radius:3px;
  padding:10px 12px; font-size:12.5px; color:var(--claret); margin-bottom:12px}

/* ------------------------------------------------------------- utilities */
.row{display:flex; align-items:center}
.row.gap{gap:10px}
.row-between{display:flex; align-items:center; justify-content:space-between; gap:12px}
.align-start{align-items:flex-start}
.align-end{align-items:flex-end}
.grow{flex:1; min-width:0}
.grow-1{flex:1; min-width:0}
.grow-2{flex:2; min-width:0}
.right{text-align:right}
.rt{text-align:right}
.ctr{text-align:center}
.mt{margin-top:14px}
.mt-xs{margin-top:5px}
.sm{font-size:11.5px}
.muted{color:var(--soft)}
.strong{font-weight:600}
.nowrap{white-space:nowrap}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px}
@media(max-width:640px){ .wrap-sm{flex-wrap:wrap} }
@media(max-width:520px){
  .topbar-in{gap:10px}
  .wordmark-nm{font-size:17px; white-space:nowrap}
  .wordmark-sub{font-size:8.5px; letter-spacing:.12em; white-space:nowrap}
  .topnav{gap:0}
  .topnav a{padding:6px 7px; font-size:11px}
  .whoami{display:none}
  .linkish{white-space:nowrap}
}

.lbl{display:block; font-size:9.5px; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:var(--soft); margin-bottom:5px}
.hint{font-size:10.5px; color:var(--soft); margin-top:4px; line-height:1.5}
.help{margin-top:12px; font-size:11.5px; color:var(--soft); line-height:1.5}
.stamp{font-size:11px; color:var(--soft); margin-top:3px}
.stamp b{color:var(--ink); font-weight:600}
.item-name{font-weight:600; font-size:13.5px}
.reading{margin-top:4px; font-size:13.5px}
.greet{font-family:"EB Garamond",Georgia,serif; font-weight:500; font-size:26px; line-height:1.15; margin-top:3px}
.ptitle{font-family:"EB Garamond",Georgia,serif; font-weight:500; font-size:21px}
.due{font-family:"EB Garamond",Georgia,serif; font-size:18px; margin-top:2px}
.quote{font-family:"EB Garamond",Georgia,serif; font-size:16px; line-height:1.5}
.prose{font-family:"EB Garamond",Georgia,serif; font-size:16px; line-height:1.6}
.prose p{margin:0 0 .6em}
.bignum{font-size:22px; font-weight:600}

/* ------------------------------------------------------------- controls */
.field{width:100%; border:1px solid var(--line2); background:#FDFDF7; border-radius:2px;
  padding:9px 11px; font-size:14px}
.field:focus-visible{outline:2px solid var(--sage); outline-offset:1px}
.field.flat{border-color:transparent; background:transparent; padding:6px 8px}
.field.flat:hover,.field.flat:focus{border-color:var(--line2); background:#FDFDF7}
.narrow-in{width:74px; text-align:center}
select.field{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--soft) 50%),
  linear-gradient(135deg,var(--soft) 50%,transparent 50%);
  background-position:calc(100% - 15px) 50%, calc(100% - 10px) 50%;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:32px}
textarea.field{resize:vertical}
.btn{display:inline-block; background:var(--deep); color:#F4F3E9; padding:10px 16px; border-radius:2px;
  font-weight:600; font-size:12.5px; letter-spacing:.03em; text-decoration:none; text-align:center}
.btn:hover{background:#243020}
.btn.wide{width:100%}
.btn-sm{display:inline-block; background:var(--deep); color:#F4F3E9; padding:7px 12px; border-radius:2px;
  font-weight:600; font-size:11.5px; text-decoration:none; text-align:center; white-space:nowrap}
.btn-sm:hover{background:#243020}
.ghost{display:inline-block; border:1px solid var(--line2); padding:9px 14px; border-radius:2px;
  font-weight:600; font-size:12px; color:var(--deep); text-decoration:none; text-align:center; background:none}
.ghost:hover{background:rgba(46,59,44,.06)}
.ghost-sm{border:1px solid var(--line2); padding:5px 9px; border-radius:2px; font-weight:600;
  font-size:11px; color:var(--deep); margin-left:4px}
.lk{color:var(--deep); text-decoration:none; border-bottom:1px dotted var(--line2); cursor:pointer}
.lk:hover{border-bottom-style:solid}
.back{margin-left:auto}

.pill{font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:4px 8px;
  border-radius:99px; white-space:nowrap}
.p-done{background:rgba(143,166,142,.3); color:#33472F}
.p-draft{background:rgba(192,165,126,.32); color:#6A5326}
.p-todo{background:rgba(46,59,44,.09); color:var(--soft)}

.toggle{display:inline-flex; border:1px solid var(--line2); border-radius:2px; overflow:hidden}
.tg{padding:8px 14px; font-size:12px; font-weight:600; color:var(--soft); cursor:pointer}
.tg input{position:absolute; opacity:0; width:0; height:0}
.tg.on,.tg:has(input:checked){background:var(--deep); color:#F4F3E9}
.tg:has(input:focus-visible){outline:2px solid var(--sage); outline-offset:-2px}

/* ------------------------------------------------------------- horizon */
/* The banner is the app's one piece of ornament, so it gets room to work.
   `cover` on a wide short box crops vertically, and 66% is the band that holds
   the whole house, the carriage, the temple and the far hills — worked out by
   rendering the candidates rather than guessing. */
.sitehead{
  height:172px; border-radius:4px; position:relative; overflow:hidden;
  margin:22px 0 4px; border:1px solid var(--line);
  background:url(/horizon.jpg?v=2) 50% 66%/cover no-repeat;
}
.sitehead::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(242,241,230,0) 62%,rgba(242,241,230,.9) 100%);
}
@media(max-width:760px){
  .sitehead{height:132px; margin-top:16px; background-position:50% 68%}
}
@media(max-width:430px){
  .sitehead{height:118px; background-position:50% 70%}
}

/* the sign-in card carries its own, taller, with the wordmark over it */
.horizon{height:206px; background:url(/horizon.jpg?v=2) 50% 72%/cover no-repeat; position:relative}
.horizon::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(242,241,230,0) 30%,rgba(242,241,230,.5) 60%,
    rgba(242,241,230,.97) 93%)}
.horizon-brand{position:absolute; left:20px; bottom:11px; z-index:2; display:grid}
.hz-nm{font-family:"EB Garamond",Georgia,serif; font-size:23px; line-height:1.1; color:var(--deep)}

/* ------------------------------------------------------------- weeknav */
.weekbar{display:flex; align-items:center; gap:14px; padding:9px 22px; border-bottom:1px solid var(--line);
  flex-wrap:wrap}
.weeknav{display:flex; align-items:center; gap:8px; flex:1}
.wn-btn{border:1px solid var(--line2); border-radius:2px; width:26px; height:26px; display:grid;
  place-items:center; color:var(--deep); font-size:14px; text-decoration:none}
.wn-btn:hover{background:rgba(46,59,44,.06)}
.wn-btn.disabled{color:rgba(46,59,44,.25); cursor:default}
.wn-sel{border:1px solid var(--line2); border-radius:2px; padding:5px 8px; font-size:12px;
  font-weight:600; background:#FDFDF7}

/* -------------------------------------------------------------- meters */
.bars{display:grid; gap:8px; max-width:340px; margin-top:8px}
.meter{height:5px; background:rgba(46,59,44,.11); border-radius:99px; overflow:hidden}
.meter i{display:block; height:100%; background:var(--sage)}
.meter.dim i{background:rgba(46,59,44,.16)}
.bar-row .row-between{margin-bottom:3px}
.grade{font-family:"EB Garamond",Georgia,serif; font-weight:500; font-size:42px; line-height:1; color:var(--deep)}
.grade.sm-grade{font-size:26px}
.latin{font-size:9.5px; font-weight:700; letter-spacing:.19em; text-transform:uppercase; color:var(--latin);
  border-top:1px solid rgba(192,165,126,.75); padding-top:5px; margin-top:5px; display:inline-block; cursor:help}
.latinchip{font-size:9px; font-weight:700; letter-spacing:.13em; color:var(--latin); cursor:help}

/* --------------------------------------------------------------- tables */
.tblwrap{overflow-x:auto}
table{width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums}
th,td{text-align:left; padding:9px 12px; white-space:nowrap; color:var(--ink)}
th{font-size:9.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--soft);
  border-bottom:1px solid var(--line2); vertical-align:bottom}
th i{display:block; font-style:normal; font-weight:600; letter-spacing:.08em; opacity:.75; margin-top:2px}
td{border-bottom:1px solid var(--line); font-size:12.5px}
tbody tr:hover{background:rgba(143,166,142,.1)}
tr.inactive td{opacity:.5}
.att td{padding:5px 6px}
.att-sel{border:1px solid transparent; background:transparent; border-radius:2px; padding:3px 5px;
  font-size:12px; font-weight:600; text-align:center}
.att-sel:hover,.att-sel:focus{border-color:var(--line2); background:#FDFDF7}
.att-sel.s-A{color:var(--claret)}
.att-sel.s-L{color:var(--latin)}
.att-sel.s-E{color:#3D6144}
.att-sel.s-none{color:var(--soft)}
.evidence{display:grid; gap:6px; background:rgba(46,59,44,.04); border-radius:3px; padding:10px 12px}

/* -------------------------------------------------------- rich editor */
.rich{margin-top:6px}
.toolbar{display:flex; gap:2px; border:1px solid var(--line2); border-bottom:0; border-radius:2px 2px 0 0;
  padding:5px; background:#F7F6EC}
.tb{width:28px; height:25px; display:grid; place-items:center; border-radius:2px; font-size:12px; color:var(--soft)}
.tb:hover{background:rgba(46,59,44,.08); color:var(--ink)}
.tb.on{background:rgba(46,59,44,.12); color:var(--deep)}
.ser{font-family:"EB Garamond",Georgia,serif}
.editor{border:1px solid var(--line2); border-radius:0 0 2px 2px; background:#FDFDF7; padding:13px;
  font-family:"EB Garamond",Georgia,serif; font-size:17px; line-height:1.55}
.editor:focus{outline:2px solid var(--sage); outline-offset:-1px}
.editor.readonly{border-radius:2px; background:rgba(46,59,44,.03)}
.editor p{margin:0 0 .55em}

/* -------------------------------------------------------------- signin */
.signin-wrap{display:flex; justify-content:center; padding-top:26px}
.signin{width:100%; max-width:390px}
.signin .field{margin-bottom:14px}

.hidden-form{display:none}

/* schedule editor */
.wrapcell{white-space:normal; min-width:200px}
.breakrow td{background:rgba(46,59,44,.04); color:var(--soft)}
.checkline{display:flex; align-items:center; gap:9px; font-size:13.5px; cursor:pointer}
.checkline input{width:16px; height:16px; accent-color:var(--deep)}

/* the commonplace wall */
.wallrow{display:flex; align-items:center; gap:14px}
.wallrow.locked{background:rgba(46,59,44,.03)}
.locked-note{color:var(--soft); font-style:italic}
.wallitem{border-bottom:1px solid var(--line); padding:15px 0}
.wallitem:last-child{border-bottom:0}
.who{font-size:11.5px; font-weight:700; letter-spacing:.05em; color:var(--deep)}
.who .normal{font-weight:400; letter-spacing:0}
.cmt{display:flex; gap:8px; align-items:baseline; padding:6px 0 0; font-size:12px; color:var(--soft);
  flex-wrap:wrap}
.cmt b{color:var(--ink); font-weight:600; font-size:11.5px; white-space:nowrap}
.cmt span{overflow-wrap:anywhere; min-width:0}
.quote,.prose{overflow-wrap:anywhere}
.cmt-del{display:inline}
.linkish.tiny{font-size:10.5px; color:var(--soft)}
.cmt-form{display:flex; gap:8px; align-items:center; margin-top:11px; flex-wrap:wrap}
.cmt-form .field{flex:1; min-width:180px}
.cmt-form .field{padding:7px 10px; font-size:13px}
.topnav a.here{color:var(--ink); background:rgba(46,59,44,.07)}

/* teacher's week */
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(112px,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:3px; overflow:hidden}
.tile{background:var(--card); padding:11px 13px}
.tilenum{font-family:"EB Garamond",Georgia,serif; font-size:23px; line-height:1.1; color:var(--deep)}
.card.mine-done{background:rgba(143,166,142,.14); border-color:rgba(143,166,142,.45)}
.wallitem.from-teacher{background:rgba(192,165,126,.11); border-radius:3px;
  padding-left:12px; padding-right:12px; border-bottom-color:rgba(192,165,126,.5)}
.teachertag{font-size:9px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--latin); border:1px solid rgba(192,165,126,.7); border-radius:99px; padding:2px 7px;
  margin-left:6px; vertical-align:1px}
.cmt b.from-teacher-name{color:var(--latin)}

/* six nav items plus a name is tight — buy back some room on the admin side */
.whoami,.linkish{white-space:nowrap}
body.admin .topnav a{padding:7px 9px; letter-spacing:.05em}
/* only ever one teacher account, so naming her in the bar earns nothing and
   costs the width that pushes six nav items onto a second line */
body.admin .whoami{display:none}
@media(max-width:1100px){
  body.admin .topnav a{padding:6px 7px; font-size:11px; letter-spacing:.03em}
}