/* The study desk: paper, pen, little piles of knowledge.
   Loaded after the structural stylesheet, and excluded from printable pages.
   Its colours live with the rest in app.css, so there is one palette. */

body.study-desk{
  background-image:radial-gradient(var(--desk-dot) .8px,transparent .8px);
  background-size:18px 18px;
}
.study-desk .wrap{max-width:1120px}
.study-desk .wrap.narrow{max-width:760px}
.study-desk main{padding:38px 32px 65px}
.study-desk .bare-main{padding:0}
.study-desk .btn{min-height:42px;border-radius:9px;transition:transform .18s,box-shadow .18s,background .18s}
.study-desk .btn.primary{box-shadow:0 3px 0 color-mix(in srgb,var(--accent),#000 28%)}
.study-desk .btn.primary:hover{transform:translateY(-2px);box-shadow:0 5px 0 color-mix(in srgb,var(--accent),#000 28%)}
.study-desk .btn.primary:active{transform:translateY(2px);box-shadow:none}
.study-desk .btn.sm{min-height:34px}
.study-desk .brand{letter-spacing:-.04em;white-space:nowrap}
.study-desk h1,.study-desk h2,.study-desk h3{overflow-wrap:anywhere}
.study-desk .topbar{min-height:78px;padding:13px max(24px,calc((100vw - 1360px)/2));gap:24px;background:var(--surface)}
.study-desk .topbar .search{margin-left:auto;max-width:300px;min-width:140px}
.study-desk .topbar .spacer{display:none}
.study-desk .topbar .search input{border-radius:9px;background:var(--paper);font-size:13px}
.study-desk .topbar .rail{position:static;min-height:0;padding:0;border:0;flex-direction:row;gap:14px;background:none;flex:none}
.study-desk .navlink{font-size:13px;min-height:44px;padding:8px 3px;gap:6px;position:relative;white-space:nowrap}
.study-desk .navlink[aria-current="page"]{background:none;box-shadow:none;color:var(--accent)}
.study-desk .navlink[aria-current="page"]::after{content:"";position:absolute;bottom:0;height:4px;left:0;right:0;background:var(--accent);border-radius:50%;rotate:-1deg}
.study-desk .navlink[aria-current="page"] svg{color:var(--accent)}
.study-desk .navlink .duebadge{margin-left:2px}
.study-desk .navlink:hover{background:none;color:var(--accent)}

/* The library is a desk, not a dashboard. Counts and activity are real. */
.desk-greeting{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:32px}
.desk-greeting h1{font-size:clamp(32px,4vw,46px);line-height:1.15;font-weight:800;letter-spacing:-.045em;margin-top:8px}
.desk-greeting h1 em{font-style:normal;position:relative;white-space:nowrap}
.desk-greeting h1 em::after{content:"";position:absolute;left:-3px;right:-4px;height:9px;bottom:-9px;border-top:4px solid var(--pen);border-radius:50%;rotate:-2deg}
.desk-streak{background:var(--note);color:var(--note-ink);border:2px solid var(--note-ink);border-radius:50%;width:104px;height:104px;display:flex;align-items:center;justify-content:center;flex-direction:column;rotate:10deg;box-shadow:3px 4px 0 var(--note-ink);flex:none;margin-right:5px}
.desk-streak b{font:800 32px/1 var(--f-display)}
.desk-streak span{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.02em;margin-top:6px}
.desk-today{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:35px;align-items:center;margin:38px 0 48px}
.desk-notebook{position:relative;min-width:0;background-color:var(--surface);border-radius:6px 13px 13px 6px;border:1px solid var(--deck-edge);box-shadow:3px 4px 0 -1px var(--surface),4px 5px 0 var(--deck-edge),7px 8px 0 -1px var(--surface),8px 9px 0 var(--deck-edge),var(--lift);padding:25px 26px 24px 53px;background-image:linear-gradient(90deg,transparent 37px,color-mix(in srgb,var(--pen) 35%,transparent) 37px,color-mix(in srgb,var(--pen) 35%,transparent) 38px,transparent 38px)}
.desk-binding{position:absolute;left:-10px;top:20px;bottom:20px;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none}
.desk-binding i{width:23px;height:9px;border:2px solid #72808D;border-right-color:#C2C8CD;border-radius:10px;box-shadow:0 2px 1px #25304422;background:linear-gradient(90deg,#A0A9B5,#E9EDED 55%,#8F99A4)}
.desk-notebook-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.desk-notebook-head>*{background:var(--surface)}
.desk-notebook-head>span{font-size:12px;color:var(--ink-3);white-space:nowrap}
.desk-daily-title{display:flex;align-items:center;gap:18px;margin:19px 0;flex-wrap:wrap}
.desk-daily-title strong{font:800 clamp(42px,5vw,67px)/1 var(--f-display);color:var(--accent);letter-spacing:-.06em;flex:none;white-space:nowrap}
.desk-daily-title h2{font-size:22px;line-height:1.2;max-width:200px;font-weight:700;flex:1 1 140px;min-width:0}
.desk-notebook>p{font-size:14px;margin-bottom:21px}
.desk-notebook-foot{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.desk-notebook-foot .hand{font-size:23px;rotate:-4deg}
.desk-week{position:relative;min-width:0;padding:24px 23px 19px;background:linear-gradient(140deg,#FFFFFF22,transparent 65%),var(--note);color:var(--note-ink);box-shadow:var(--lift);rotate:2deg;min-height:253px}
.desk-week h2{font-family:var(--f-hand);font-size:31px;line-height:1.2;rotate:-2deg}
.desk-week>p{font-size:13px;margin-top:12px}
.desk-week>p.desk-week-best{font-size:12px;margin-top:8px;color:#554A2C}
.desk-weekdays{display:flex;justify-content:space-between;gap:6px;margin-top:20px}
.desk-day{display:flex;flex-direction:column;align-items:center;font-size:10px;font-weight:700;gap:6px}
.desk-day i{width:29px;height:30px;border:1.5px solid #6C613A77;border-radius:5px;background:#FFEFB16B;display:grid;place-items:center;font-size:25px;font-family:var(--f-hand);font-style:normal}
.desk-day.studied i{color:#304EE5}
.desk-day.today i{border:2px solid #304EE5;rotate:-7deg}
.desk-shelf-title{display:flex;align-items:baseline;gap:12px;margin:0 0 22px;flex-wrap:wrap}
.desk-shelf-title h2{font-size:24px;font-weight:800;letter-spacing:-.03em}
.desk-shelf-title>span{font-size:13px;color:var(--ink-3)}
.library-desk .listfilter{margin-bottom:26px}

/* Decks have real depth. The link and copy button retain their own hit areas. */
.study-desk .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 28px;padding-top:5px}
.study-desk .card{--deck-color:var(--deck-coral);--sticker:var(--folder-mint);isolation:isolate;border-radius:5px;border-top:4px solid var(--deck-color);padding:25px 22px 18px;min-height:240px;box-shadow:var(--lift);background:var(--surface);transition:transform .23s cubic-bezier(.2,.7,.3,1),box-shadow .23s}
.study-desk .card::before,.study-desk .card::after{content:"";position:absolute;inset:6px 2px -5px;border:1px solid var(--deck-edge);border-radius:4px;background:var(--surface);z-index:-1;pointer-events:none;transition:transform .23s;transform:rotate(-1.5deg)}
.study-desk .card::after{inset:9px 5px -9px;z-index:-2;transform:rotate(1.5deg)}
.study-desk .deck-blue{--deck-color:var(--deck-blue);--sticker:var(--folder-blue)}
.study-desk .deck-lilac{--deck-color:var(--deck-lilac);--sticker:var(--folder-yellow)}
.study-desk .deck-mint{--deck-color:var(--deck-mint);--sticker:var(--folder-blue)}
.study-desk .deck-gold{--deck-color:var(--deck-gold);--sticker:var(--folder-pink)}
.study-desk .deck-sticker{position:absolute;right:18px;top:20px;width:43px;height:43px;display:grid;place-items:center;font:600 26px/1 var(--f-body);color:var(--ink);background:var(--sticker);border:3px solid var(--surface);box-shadow:1px 2px 3px var(--deck-shadow);border-radius:13px;rotate:12deg;pointer-events:none}
.study-desk .card h3{font-size:22px;font-weight:700;line-height:1.2;letter-spacing:-.025em;padding-right:31px;overflow-wrap:anywhere}
.study-desk .card-subj{font-size:10px;letter-spacing:.12em;max-width:calc(100% - 49px)}
.study-desk .card-course{font-size:12px;overflow-wrap:anywhere}
.study-desk .card-note{font-size:25px;line-height:1.15;margin:6px 0 12px}
.study-desk .card .meter{height:5px;border-radius:3px;margin-top:auto}
.study-desk .card .meta{border:0;flex-wrap:wrap;font-size:12px;padding-top:5px;overflow-wrap:anywhere}
.study-desk .meta-owner{min-width:0;overflow-wrap:anywhere}
.study-desk .card .meta-pct{font-size:12px}
.study-desk .grid>.card:nth-child(4n+1){transform:rotate(-1deg)}
.study-desk .grid>.card:nth-child(4n+2){transform:rotate(.8deg)}
.study-desk .grid>.card:nth-child(4n+3){transform:rotate(-.7deg)}
.study-desk .grid>.card:nth-child(4n+4){transform:rotate(.6deg)}
@media(hover:hover){
  .study-desk .grid>.card:hover{transform:translateY(-8px) rotate(0);box-shadow:0 22px 30px -20px var(--deck-shadow)}
  .study-desk .card:hover::before{transform:rotate(-3deg) translateY(1px)}
  .study-desk .card:hover::after{transform:rotate(3deg) translateY(2px)}
}
.study-desk .card:focus-within{outline:2px solid var(--accent);outline-offset:6px}
.study-desk .card.newcard{border:2px dashed var(--rule-2);background:transparent;box-shadow:none;gap:10px;transform:none;min-height:220px;text-align:center;padding:25px 18px}
.study-desk .newcard::before,.study-desk .newcard::after{display:none}
.study-desk .newcard>svg{width:44px;height:44px;padding:10px;border:1.5px solid var(--rule-2);border-radius:50%;color:var(--accent);transition:rotate .3s}
.study-desk .newcard:hover>svg{rotate:90deg}
.study-desk .newcard>span{font-family:var(--f-display);font-size:16px}
.study-desk .newcard>small{font-size:13px;font-weight:400}

/* Carry the same materials through the modes, card table, and marketing pages. */
.study-desk .sethead h1{letter-spacing:-.04em}
.study-desk .sethead-actions{gap:9px}
.study-desk .vis-chip{display:inline-flex;max-width:100%;white-space:normal;line-height:1.5}
.study-desk .modes{gap:28px 18px}
.study-desk .mode{border-color:var(--rule-2);box-shadow:0 5px 0 -2px var(--surface),0 6px 0 -2px var(--rule-2);transition:transform .2s,box-shadow .2s}
.study-desk .mode::before{border-color:var(--rule-2)}
.study-desk .mode:nth-child(odd){rotate:-.6deg}
.study-desk .mode:nth-child(even){rotate:.6deg}
.study-desk .mode:hover{transform:translateY(-5px);rotate:0deg;border-color:var(--accent)}
.study-desk .mode.disabled{rotate:0deg;box-shadow:none}
.study-desk .terms{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:24px}
.study-desk .terms>.term{border-radius:5px;min-width:0;overflow-wrap:anywhere}
.study-desk .pill{font-size:10px;letter-spacing:.05em;rotate:-4deg}
.study-desk .face{border-radius:5px;box-shadow:0 3px 0 var(--surface),0 4px 0 var(--deck-edge),0 7px 0 var(--surface),0 8px 0 var(--deck-edge),var(--lift)}
.study-desk .flipwrap{margin-bottom:27px}
.study-desk .sortrow .btn.yes{background:var(--good-soft);border-color:var(--good);color:var(--good)}
.study-desk .sortrow .btn.no{color:var(--ink-2);border-color:var(--rule-2)}
.study-desk .score{position:relative;overflow:visible}
.study-desk .score::after{content:"✦";position:absolute;right:18px;top:-23px;font-size:52px;color:var(--pen);rotate:12deg;pointer-events:none}
.study-desk .landing{max-width:1160px;padding:24px 30px 40px}
.study-desk .landing-top{margin-bottom:52px}
.study-desk .hero{gap:65px}
.study-desk .hero h1{font-size:clamp(36px,5.2vw,58px);letter-spacing:-.04em}
.study-desk .demo-card{border-radius:5px;box-shadow:var(--lift)}
.study-desk .demo-card.front{position:relative;box-shadow:3px 4px 0 -1px var(--surface),4px 5px 0 var(--deck-edge),var(--lift)}
.study-desk .demo-card.back{position:relative;margin-top:3px}
.study-desk .free{position:relative}
.study-desk .featurecard,.study-desk .landsection,.study-desk .authcard,.study-desk .aicreate,.study-desk .acct-card{border-radius:6px}
.study-desk .sitefoot{border-top:1px dashed var(--rule-2);margin-top:64px;padding-top:32px}
.study-desk .searchbig,.study-desk .listfilter{max-width:100%;min-width:0}
/* A button set inside a pill-shaped field is a pill too, and sits flush:
   the raised "press me" shadow and lift belong to free-standing buttons. */
.study-desk .searchbig .btn{border-radius:999px;box-shadow:none;min-height:0}
.study-desk .searchbig .btn:hover,.study-desk .searchbig .btn:active{transform:none;box-shadow:none}
.study-desk .listfilter input{min-width:0}
.desk-confetti{position:fixed;z-index:100;left:50%;top:38%;width:9px;height:13px;background:var(--confetti-color);pointer-events:none;animation:desk-celebrate .8s ease-out forwards}
@keyframes desk-celebrate{from{opacity:1;transform:translate(0,0) rotate(0deg)}to{opacity:0;transform:translate(var(--confetti-x),var(--confetti-y)) rotate(var(--confetti-turn))}}
@media(min-width:861px){
  .study-desk .rail a[href="/sets/new"]{display:none}
  .study-desk.tutor-page .app{display:flex}
  .study-desk.tutor-page main{flex:1;min-height:0;padding:0}
}
@media(min-width:861px) and (max-width:1150px){
  .study-desk .topbar{gap:16px;padding:13px 22px}
  .study-desk .topbar .rail{gap:12px}
  .study-desk .topbar .rail svg{display:none}
  .study-desk .topbar .brand{font-size:17px;gap:6px}
  .study-desk .topbar .search{max-width:230px;min-width:110px}
  .study-desk .topbar .search input{font-size:12px}
}
@media(max-width:860px){
  .study-desk main{padding:28px 24px 104px}
  .study-desk .bare-main{padding:0}
  .study-desk .topbar{min-height:66px;padding:12px 18px;gap:14px;flex-wrap:wrap}
  .study-desk .topbar .brand{margin-right:auto;font-size:17px}
  .study-desk .topbar .search{display:none}
  .study-desk .topbar .rail{position:fixed;top:auto;bottom:0;left:0;right:0;z-index:50;min-height:66px;padding:7px 8px calc(7px + env(safe-area-inset-bottom,0px));background:var(--surface);border-top:1px solid var(--rule);justify-content:space-around;gap:0;box-shadow:0 -4px 18px -12px var(--deck-shadow)}
  .study-desk .navlink{flex-direction:column;font-size:11px;gap:4px;min-height:44px;padding:4px 8px}
  .study-desk .navlink[aria-current="page"]::after{bottom:-4px;left:8px;right:8px;height:3px}
  .study-desk .navlink .duebadge{position:absolute;top:0;left:calc(50% + 3px);margin:0;height:17px;min-width:17px;padding:0 4px;font-size:10px}
  .desk-today{gap:27px;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
  .desk-notebook{padding:24px 22px 23px 49px}
  .desk-daily-title{gap:13px}
  .desk-daily-title h2{font-size:20px}
  .desk-week{padding:22px 19px 18px}
  .desk-week h2{font-size:28px}
  .desk-day i{width:25px;height:28px}
  .desk-weekdays{gap:4px}
  .study-desk .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 24px}
  .study-desk .hero{gap:36px}
}
@media(max-width:680px){
  .desk-today{grid-template-columns:minmax(0,1fr);gap:34px;margin-top:30px}
  .desk-week{rotate:1deg;min-height:0;padding:24px}
  .desk-weekdays{justify-content:flex-start;gap:16px}
  .desk-day i{width:29px;height:30px}
  .desk-greeting{gap:14px}
  .desk-greeting h1{font-size:34px}
  .desk-streak{width:78px;height:78px}
  .desk-streak b{font-size:27px}
  .desk-streak span{font-size:8px}
}
@media(max-width:560px){
  .study-desk main{padding:26px 20px 100px}
  .study-desk .bare-main{padding:0}
  .study-desk .landing{padding:20px 20px 32px}
  .study-desk .landing-top{margin-bottom:32px}
  .study-desk .landing-nav{gap:9px}
  .study-desk .landing-nav a:not(.btn){font-size:13px}
  .study-desk .landing-nav .btn{padding:7px 10px;font-size:13px}
  .study-desk .landing-nav .icon-btn{width:30px}
  .study-desk .grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .study-desk .card{min-height:220px}
  .study-desk .topbar{gap:9px;padding:10px 14px}
  .study-desk .topbar .brand{font-size:16px;gap:6px}
  .study-desk .topbar>.btn{font-size:12px;padding:8px 10px}
  .study-desk .topbar>.icon-btn{width:30px}
  .study-desk .topbar .brand .logo{width:22px;height:22px}
  .study-desk .sethead .t{min-width:0;width:100%;flex-basis:100%}
  .study-desk .sethead h1{font-size:32px}
  .study-desk .sethead-actions{gap:8px}
  .study-desk .sethead-actions .btn{font-size:12px;padding:8px 10px}
  .study-desk .modes{grid-template-columns:repeat(2,minmax(0,1fr));gap:25px 14px}
  .study-desk .mode{padding:17px 13px 14px}
  .study-desk .mode strong{font-size:17px}
  .study-desk .mode small{font-size:12px}
  .desk-greeting h1{font-size:30px}
  .desk-greeting .eyebrow{font-size:10px}
  .desk-streak{width:67px;height:67px}
  .desk-streak b{font-size:24px}
  .desk-streak span{font-size:7px}
  .desk-daily-title strong{font-size:56px}
  .desk-notebook-foot{gap:13px}
  .desk-notebook-foot .hand{font-size:21px}
  .desk-shelf-title h2{font-size:22px}
}
@media(max-width:360px){
  .study-desk .topbar .brand{font-size:14px;gap:4px}
  .study-desk .topbar>.btn{padding:7px 8px}
  .study-desk .topbar>.icon-btn{width:24px}
  .desk-greeting h1{font-size:27px}
  .desk-greeting{gap:8px}
  .desk-week{padding:22px 18px}
  .desk-weekdays{gap:12px}
  .desk-day i{width:26px}
}
@media(prefers-reduced-motion:reduce){
  .study-desk *, .study-desk *::before, .study-desk *::after{animation:none!important;transition:none!important}
  .study-desk .grid>.card,.study-desk .card::before,.study-desk .card::after,.study-desk .mode{transform:none!important}
  .desk-confetti{display:none}
}