/* THE FELT - 03-views.css
   academy, drill, play-along entry, nav, glossary, toast, footer
   Part of a multi-file build; load order is fixed in The_Felt.html. */
/* ---------- academy ---------- */
.academy-nav{position:sticky;top:74px;}
.academy-nav .sect{margin-bottom:4px;}
.academy-nav .sect>button{
  width:100%;display:flex;align-items:center;gap:9px;background:transparent;border:0;cursor:pointer;
  padding:9px 10px;border-radius:var(--r-sm);color:var(--text);font-size:13px;font-weight:600;text-align:left;
}
.academy-nav .sect>button:hover{background:rgba(255,255,255,.045);}
/* --accent is a fill and takes white ink; as 14px text on a dark ground it
   goes muddy. The section icons are text, so they take --accent-hi. */
.academy-nav .sect>button .ic{color:var(--accent-hi);font-size:14px;width:16px;text-align:center;}
.academy-nav .sect>button .ct{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--text3);}
.academy-nav .lessons{display:none;padding:2px 0 6px 25px;}
.academy-nav .sect.open .lessons{display:block;}
.academy-nav .lessons button{
  width:100%;display:flex;align-items:center;gap:7px;background:transparent;border:0;cursor:pointer;
  padding:6px 9px;border-radius:var(--r-sm);color:var(--text2);font-size:12.5px;text-align:left;
}
.academy-nav .lessons button:hover{background:rgba(255,255,255,.045);color:var(--text);}
/* the lesson you are in gets a lit left edge and a tint that falls away to
   the right, instead of a flat block of accent. The marker is an inset
   shadow rather than a border so it costs the row no width. */
.academy-nav .lessons button.on{
  background:linear-gradient(90deg,rgba(82,96,222,.26),rgba(82,96,222,.05));
  color:var(--accent-hi);box-shadow:inset 2px 0 0 var(--accent-hi);
}
.academy-nav .lessons button .done{margin-left:auto;font-size:11px;color:var(--accent-hi);}
.lesson{max-width:720px;}
.lesson h1{font-family:var(--disp);font-size:27px;font-weight:700;margin:2px 0 4px;letter-spacing:.01em;}
.lesson .lmeta{font-family:var(--mono);font-size:11px;color:var(--text3);margin-bottom:18px;}
.lesson h2{font-family:var(--disp);font-size:17px;font-weight:600;margin:24px 0 8px;color:var(--text);}
.lesson p{font-size:14px;line-height:1.75;color:var(--text2);margin:10px 0;}
.lesson p b{color:var(--text);}
.lesson ul{margin:10px 0;padding-left:20px;color:var(--text2);font-size:14px;line-height:1.7;}
.lesson ul li{margin:5px 0;}
.lesson ul li b{color:var(--text);}
/* KEY IDEA was a flat tint inside a uniform accent border, which read as a
   disabled panel rather than an aside. Now the accent is spent on one lit
   left edge and the ground fades out across the box. The border stays 1px on
   all four sides - the edge is an inset shadow, so the box takes up exactly
   the same space it always did. */
.callout{
  border:1px solid var(--border2);border-radius:var(--r-sm);
  background:linear-gradient(100deg,rgba(82,96,222,.22) 0%,rgba(82,96,222,.06) 46%,rgba(255,255,255,.014) 100%);
  box-shadow:inset 3px 0 0 var(--accent),var(--hair),0 1px 2px rgba(0,0,0,.45);
  padding:13px 15px;margin:14px 0;font-size:13.5px;line-height:1.65;color:var(--text);
}
.callout::before{content:'KEY IDEA';display:block;font-family:var(--mono);font-size:9px;letter-spacing:.24em;color:var(--accent-hi);margin-bottom:5px;}
/* a formula is quoted material, not another panel, so it is cut into the page
   rather than raised off it: the well gradient plus an inset shadow. */
.formula{
  font-family:var(--mono);font-size:14.5px;color:var(--accent-hi);text-align:center;
  background:var(--g-well);border:1px solid var(--border2);border-radius:var(--r-sm);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.45);
  padding:13px;margin:14px 0;
}
.lesson table{width:100%;border-collapse:collapse;font-size:12.5px;margin:14px 0;}
.lesson table th{text-align:left;color:var(--text3);font-size:11px;text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--border2);padding:7px 8px;}
.lesson table td{border-bottom:1px solid var(--border);padding:7px 8px;color:var(--text2);}
.lesson table td b{color:var(--text);}
/* the interactive boxes inside a lesson sit directly on the page, so they
   need to be lit to read as objects: gradient, hairline, real shadow. */
.widgetbox{border:1px solid var(--border2);background:var(--g-surface2);border-radius:var(--r);
  box-shadow:var(--shadow-sm);padding:15px;margin:16px 0;}
.widgetbox h4{margin:0 0 10px;font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--accent-hi);text-transform:uppercase;font-weight:600;}
.widgetbox .wres{font-family:var(--disp);font-size:21px;font-weight:700;color:var(--text);margin-top:8px;}
.widgetbox .wres small{font-size:12px;color:var(--text3);font-family:var(--ui);font-weight:400;}
.widgetbox input[type=range]{width:100%;accent-color:var(--accent);}
.widgetbox .wrow{display:flex;gap:14px;flex-wrap:wrap;align-items:center;}
.widgetbox .wrow>div{flex:1;min-width:130px;}
.widgetbox label{display:block;font-family:var(--mono);font-size:10px;color:var(--text3);margin-bottom:3px;letter-spacing:.08em;}
.quiz{margin-top:26px;border-top:1px solid var(--border2);padding-top:6px;}
.quiz h2{font-family:var(--disp);font-size:17px;}
.qq{margin:16px 0;}
.qq .qtext{font-size:14px;font-weight:600;color:var(--text);margin-bottom:9px;}
.qq .opts{display:grid;gap:7px;}
.qq .opt{
  text-align:left;background:var(--g-surface2);border:1px solid var(--border2);border-radius:var(--r-sm);
  box-shadow:var(--hair),0 1px 2px rgba(0,0,0,.4);
  padding:10px 13px;font-size:13px;color:var(--text2);cursor:pointer;
  transition:border-color var(--t),background var(--t),color var(--t);
}
.qq .opt:hover{border-color:var(--accent-line);background:linear-gradient(180deg,#272D38,#1C212A);color:var(--text);}
/* right and wrong keep the green/red pair. Green is otherwise reserved for
   the felt and the CALL action, but "you got it" is the same signal, and a
   quiz answer that came back indigo would read as merely selected. */
.qq .opt.right{
  border-color:rgba(63,169,106,.5);color:var(--text);
  background:linear-gradient(160deg,rgba(63,169,106,.24),rgba(63,169,106,.07));
}
.qq .opt.wrong{
  border-color:rgba(229,72,77,.5);
  background:linear-gradient(160deg,rgba(229,72,77,.20),rgba(229,72,77,.06));
}
.qq .why{font-size:12px;color:var(--text3);margin-top:7px;padding-left:2px;display:none;line-height:1.55;}
.qq.answered .why{display:block;}
.lesson-done{display:flex;align-items:center;gap:12px;margin-top:22px;padding:15px;border:1px solid var(--border2);border-radius:var(--r);background:var(--g-surface2);box-shadow:var(--shadow-sm);}

/* ---------- drill ---------- */
.drill-q{text-align:center;padding:10px 0 4px;}
.drill-line{font-size:14px;color:var(--text2);margin:12px 0;line-height:1.6;}
.drill-line b{color:var(--text);}
.drill-cards{display:flex;gap:8px;justify-content:center;margin:16px 0;}
.drill-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:14px 0;}
.tableline{display:flex;gap:5px;flex-wrap:wrap;justify-content:center;margin:6px 0 4px;}
/* the seats read as recessed slots on the panel, and the two seats that
   matter light up out of them - hero in chrome indigo, villain in raise red.
   The label is --text2, not --text3: on the near-black well ground --text3
   lands at 4.2:1 and these are 10px. Same pairing .chip uses in 01-base. */
.seatchip{font-family:var(--mono);font-size:10px;letter-spacing:.1em;border:1px solid var(--border2);
  background:var(--g-well);box-shadow:inset 0 1px 3px rgba(0,0,0,.45);
  border-radius:99px;padding:5px 11px;color:var(--text2);}
.seatchip.hero{
  border-color:var(--accent-line);color:var(--accent-hi);font-weight:700;
  background:linear-gradient(180deg,rgba(82,96,222,.30),rgba(82,96,222,.10));
  box-shadow:var(--hair),0 2px 8px -4px var(--accent-glow);
}
.seatchip.vill{
  border-color:rgba(229,72,77,.5);color:var(--raise-hi);
  background:linear-gradient(180deg,rgba(229,72,77,.20),rgba(229,72,77,.05));
  box-shadow:var(--hair);
}

/* ---------- play along: fast entry ---------- */
.parow{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-bottom:4px;}
.pafield{display:flex;flex-direction:column;gap:5px;min-width:0;}
.pafield>.cap{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--text3);}
.pafield>.cap em{font-style:normal;font-family:var(--mono);color:var(--text3);letter-spacing:0;text-transform:none;font-weight:500;}
.pafield>.cap b{font-family:var(--mono);color:var(--accent-hi);letter-spacing:0;text-transform:none;}
.pafield select{width:auto;}
.cardin{display:flex;align-items:center;gap:9px;}
.cardin input{
  width:118px;font-family:var(--mono);font-size:15px;font-weight:600;letter-spacing:.06em;
  text-transform:lowercase;padding:9px 11px;
}
.cardin input.good{border-color:var(--accent);}
.cardin input.bad{border-color:var(--raise);}
.cardin .cardline{min-height:47px;align-items:center;}
.cardin .ghosted{font-family:var(--mono);font-size:11px;color:var(--text3);}

/* the seat editor is a tray cut into the entry panel, not another card on
   top of it, so it takes the well ground. */
.seatedit{display:none;margin:12px 0 2px;border:1px solid var(--border2);border-radius:var(--r-sm);
  background:var(--g-well);box-shadow:inset 0 1px 3px rgba(0,0,0,.45);padding:10px 12px;}
.seatedit.on{display:block;}
.seatedit table{width:100%;border-collapse:collapse;}
.seatedit th{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text3);
  text-align:left;padding:3px 6px;}
.seatedit td{padding:3px 6px;border-top:1px solid var(--border);}
.seatedit input[type=text]{padding:6px 8px;font-family:var(--ui);font-size:12.5px;}
.seatedit input[type=number]{padding:6px 8px;width:82px;text-align:right;}
.seatedit .mark{display:flex;justify-content:center;}
.seatedit .rd{
  width:22px;height:22px;border-radius:50%;border:1px solid var(--border2);background:var(--g-surface2);
  box-shadow:var(--hair);
  cursor:pointer;font-family:var(--mono);font-size:9px;font-weight:700;color:var(--text3);
  display:flex;align-items:center;justify-content:center;padding:0;
  transition:background var(--t),border-color var(--t),color var(--t),box-shadow var(--t);
}
.seatedit .rd:hover{border-color:var(--accent-line);color:var(--text);}
/* white ink on the accent fill - the one pairing in this palette that is
   guaranteed readable at 9px. */
.seatedit .rd.on{background:var(--g-accent);border-color:var(--accent-lo);color:var(--accent-ink);
  box-shadow:var(--hair-strong),0 2px 8px -3px var(--accent-glow);}
/* the dealer button is a physical white puck, so it is a material colour
   rather than a token. */
.seatedit .rd.btn-on{background:linear-gradient(180deg,#FFFFFF,#D9DEE6);border-color:#C4CAD4;color:#1A1E24;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 3px rgba(0,0,0,.5);}

.quickbar{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;width:100%;margin-top:2px;}
/* skip is the only neutral action in a bar of coloured ones, so it stays on
   the ink ramp instead of borrowing a semantic hue. */
.bigbtn.skip{background:linear-gradient(160deg,var(--border3),var(--surface4));}
.bigbtn.wide{min-width:150px;}
.keyhint kbd{display:inline-block;font-family:var(--mono);font-size:9px;color:var(--text2);
  border:1px solid var(--border2);border-radius:4px;padding:0 4px;margin:0 1px;
  background:var(--g-well);box-shadow:inset 0 1px 2px rgba(0,0,0,.45);}

/* ---------- top bar: grouped nav, settings, help ---------- */
.navgrp{display:flex;gap:2px;align-items:center;}
.navgrp+.navgrp{margin-left:6px;padding-left:8px;border-left:1px solid var(--border);}
.topbar-right{display:flex;align-items:center;gap:8px;margin-left:auto;}
/* these pills sit on the blurred top bar, which has no surface of its own to
   push against, so they carry their own gradient and hairline or they look
   like holes cut in the chrome. */
.iconbtn{
  display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 11px;
  font-family:var(--ui);font-size:12px;font-weight:600;color:var(--text2);
  background:var(--g-surface2);border:1px solid var(--border2);border-radius:99px;cursor:pointer;
  box-shadow:var(--hair),0 1px 2px rgba(0,0,0,.4);
  transition:border-color var(--t),color var(--t),background var(--t),box-shadow var(--t);white-space:nowrap;
}
.iconbtn:hover{color:var(--text);border-color:var(--border3);background:linear-gradient(180deg,#282E39,#1D222A);}
.iconbtn.on{
  color:var(--accent-hi);border-color:var(--accent-line);
  background:linear-gradient(180deg,rgba(82,96,222,.32),rgba(82,96,222,.12));
  box-shadow:var(--hair),0 2px 10px -4px var(--accent-glow);
}
.iconbtn .ic{font-size:13px;line-height:1;}
.iconbtn .val{font-family:var(--mono);font-size:11px;color:var(--accent-hi);}
/* same focus ring as .btn in 01-base - the ring is read as light on a dark
   ground, which is the --accent-hi job, not --accent's. */
.iconbtn:focus-visible{outline:2px solid var(--accent-hi);outline-offset:2px;}

/* the settings drop-down */
/* it floats over everything, so it gets the heaviest shadow and a border one
   step brighter than a panel's - that separation is the only thing telling
   you it is above the page rather than in it. */
.pop{
  position:fixed;z-index:70;width:min(360px,calc(100vw - 24px));
  background:var(--g-surface);border:1px solid var(--border3);border-radius:var(--r);
  box-shadow:var(--hair),var(--shadow-lg);padding:16px;display:none;
}
.pop.on{display:block;animation:popin .14s ease;}
@keyframes popin{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
.pop h4{margin:0 0 3px;font-size:13px;font-weight:700;color:var(--text);}
.pop .sub{font-size:11.5px;color:var(--text3);line-height:1.5;margin-bottom:11px;}
.pop .grp{margin-top:15px;}
.pop .grp:first-of-type{margin-top:4px;}
.pop .lbl{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--text3);margin-bottom:7px;}
.pop .why{font-size:11.5px;color:var(--text2);line-height:1.55;margin-top:9px;
  background:var(--g-well);border:1px solid var(--border);border-radius:var(--r-sm);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.45);padding:9px 11px;}
.popveil{position:fixed;inset:0;z-index:69;display:none;}
.popveil.on{display:block;}

/* ---------- glossary ---------- */
/* a glossary word is a chrome affordance, so its underline is accent rather
   than another shade of grey - it has to be findable inside a paragraph. */
.gl{border-bottom:1px dotted var(--accent);cursor:help;}
.gl:hover{color:var(--accent-hi);border-bottom-color:var(--accent-hi);}
.glossgrid{display:grid;gap:2px;max-height:min(62vh,520px);overflow-y:auto;margin-top:4px;}
.glossrow{display:grid;grid-template-columns:112px 1fr;gap:12px;padding:9px 4px;border-bottom:1px solid var(--border);}
.glossrow:last-child{border-bottom:0;}
.glossrow .t{font-weight:700;font-size:12.5px;color:var(--accent-hi);}
.glossrow .d{font-size:12.5px;color:var(--text2);line-height:1.55;}
.glossrow .d b{color:var(--text);}
.glosssearch{margin-bottom:10px;}

/* ---------- toast ---------- */
#toasts{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:99;display:flex;flex-direction:column;gap:8px;align-items:center;}
/* floats over the felt, so same rule as the pop-over: gradient, brighter
   border, heaviest shadow. */
.toast{background:var(--g-surface2);border:1px solid var(--border3);border-radius:99px;
  box-shadow:var(--hair-strong),var(--shadow-lg);
  padding:9px 18px;font-size:12.5px;color:var(--text);animation:toastin .2s ease;}
@keyframes toastin{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

footer{max-width:1280px;margin:0 auto 30px;padding:0 18px;text-align:center;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--text3);text-transform:uppercase;}
/* --accent as 10px text straight on --bg is the one unreadable pairing in
   this palette; the text weight of the accent is --accent-hi. */
footer .d{color:var(--accent-hi);}