/* Week 6 guided lesson: the Resource finder in Edge, the test table, the before and after of one changed line,
 * the course home and the post-test start screen, plus program badges for the course review.
 * Markup comes from scripts/dl2/mission-control/ui_week6.py. Original schematic drawings, not screenshots.
 * Loaded only by Week 6, after ui-drawings.css and guided.css. Sizes are cqw of the .deck. No text below 1.15cqw. */

/* Program identity for the course review: Practice Mail, Windows Settings and Outlook Calendar. */
.app-badge-mail { background:#8a3ab9; }
.app-badge-settings { background:#4a5568; }
.app-badge-outlook { background:#0f6cbd; }
.guided-deck .hud .app-mail { background:#8a3ab9; color:#fff; }
.guided-deck .hud .app-settings { background:#4a5568; color:#fff; }
.guided-deck .hud .app-outlook { background:#0f6cbd; color:#fff; }
.guided-deck .g-foot .app-mail { background:#8a3ab9; color:#fff; }
.guided-deck .g-foot .app-edge { background:#0c7a8a; color:#fff; }

/* Taller than the shared 27cqw cap: the finder page lists up to three entries. */
.ui.ui-finder, .ui.ui-finder-table, .ui.ui-request-box, .ui.ui-post-test, .ui.ui-course-home, .ui.ui-worksheet-top { max-height:34cqw; }

/* ---------------------------------------------------------------- the Resource finder page */
.ui .f-pg { position:relative; padding:.5cqw 1.4cqw .7cqw; background:#f5f7fa; color:#16243a; white-space:normal; }
.ui .f-link { display:inline-block; font-size:1.15cqw; color:#164e79; text-decoration:underline; margin-bottom:.1cqw; }
.ui .f-h { font-size:1.9cqw; font-weight:800; line-height:1.15; color:#1b365d; margin-bottom:.2cqw; }
.ui .f-lab { font-size:1.2cqw; font-weight:700; margin-top:.15cqw; line-height:1.15; }
.ui .f-in, .ui .f-sel { position:relative; display:flex; align-items:center; min-height:2.2cqw; padding:0 .8cqw; border:.18cqw solid #1b365d; border-radius:.5cqw; background:#fff; font-size:1.35cqw; }
.ui .f-in { width:100%; box-sizing:border-box; }
.ui .f-sel { display:inline-flex; gap:.6cqw; }
.ui .f-ph { color:#667; }
.ui .f-typed { font-weight:600; }
.ui .f-row { display:flex; align-items:flex-end; gap:1.2cqw; flex-wrap:wrap; }
.ui .f-btn { position:relative; display:inline-flex; align-items:center; min-height:2.2cqw; padding:0 1cqw; border-radius:.5cqw; background:#1b365d; color:#fff; font-size:1.3cqw; font-weight:700; }
.ui .f-st { position:relative; display:inline-block; margin-top:.35cqw; font-size:1.25cqw; font-weight:800; }
.ui .f-st.u-t { padding:.1cqw .5cqw; background:#fff; }
.ui .f-results { position:relative; margin-top:.4cqw; min-height:1.2cqw; }
.ui .f-results.u-t { padding:.3cqw .6cqw; background:#fff; }
.ui .f-res { display:flex; align-items:baseline; justify-content:space-between; gap:1cqw; padding:.15cqw 0; border-bottom:.1cqw solid #a4b4c4; }
.ui .f-res b { font-size:1.45cqw; color:#1b365d; }
.ui .f-res span { font-size:1.15cqw; color:#334; }
.ui .f-ver { margin-top:.3cqw; padding:.15cqw .6cqw; line-height:1.15; border-left:.4cqw solid #1b365d; background:#e1efed; font-size:1.15cqw; }
/* The page's own focus ring: thick, solid, brown. A dark outer line keeps it visible on the white boxes. */
.ui .f-focus { outline:.4cqw solid #a65a00; outline-offset:.35cqw; box-shadow:0 0 0 .1cqw #fff; }
.ui .f-pg.f-zoom { padding-top:1.3cqw; }
.ui .f-zoom .f-h { font-size:2.5cqw; }
.ui .f-zoom .f-lab { font-size:1.5cqw; }
.ui .f-zoom .f-in, .ui .f-zoom .f-sel, .ui .f-zoom .f-btn { font-size:1.6cqw; min-height:2.8cqw; }
.ui .f-zoom .f-row { flex-direction:column; align-items:flex-start; gap:.4cqw; }
.ui .f-zoom .f-st { font-size:1.5cqw; margin-top:.4cqw; }
.ui .f-zoom .f-res b { font-size:1.7cqw; }
.ui .f-zoom .f-ver { display:none; }
.ui .f-zchip { position:absolute; top:.6cqw; right:.8cqw; padding:.2cqw .7cqw; border:.15cqw solid #1b365d; border-radius:.4cqw; background:#fff; font-size:1.2cqw; font-weight:700; }

/* ---------------------------------------------------------------- the test table on the worksheet */
.ui .f-tbl { margin-top:.6cqw; border:.15cqw solid #1b365d; border-radius:.4cqw; background:#fff; }
.ui .f-tr { position:relative; display:grid; grid-template-columns:30% 1fr; align-items:stretch; min-height:2.6cqw; border-bottom:.1cqw solid #c5cfdc; }
.ui .f-tr:last-child { border-bottom:0; }
.ui .f-tr.u-t { border-radius:0; }
.ui .f-hd { background:#e6ecf5; font-weight:800; }
.ui .f-th, .ui .f-td { display:flex; align-items:center; padding:.3cqw .8cqw; font-size:1.25cqw; }
.ui .f-q { font-weight:700; font-family:Consolas, "Courier New", monospace; }
.ui .f-fill { font-weight:600; color:#0d2c4a; }
.ui .u-part { margin:.3cqw 0 0; font-size:1.3cqw; font-weight:700; color:#1b365d; }
.ui .f-rbox { position:relative; margin-top:.6cqw; min-height:9cqw; padding:.6cqw .9cqw; border:.15cqw solid #1b365d; border-radius:.4cqw; background:#fff; font-size:1.3cqw; }
.ui .f-rl { display:block; font-weight:600; }

/* ---------------------------------------------------------------- before and after of one line */
.ui .f-ch { padding:1cqw 1.2cqw; border:.2cqw solid #1b365d; border-radius:.6cqw; background:#f5f7fa; color:#0d1b2a; white-space:normal; }
.ui .f-chh { display:flex; flex-direction:column; gap:.4cqw; margin-bottom:.6cqw; }
.ui .f-tag { align-self:flex-start; padding:.2cqw .9cqw; border:.2cqw solid #0d1b2a; border-radius:.4cqw; background:#fff; font-size:1.5cqw; font-weight:800; letter-spacing:.04em; }
.ui .f-no .f-tag { background:#0d1b2a; color:#fff; }
.ui .f-cap { font-size:1.3cqw; font-weight:600; }
.ui .f-bl { margin:.5cqw 0 .2cqw; font-size:1.2cqw; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#334; }
.ui .f-code { display:flex; gap:.7cqw; padding:.5cqw .7cqw; background:#fff; border:.1cqw solid #8a97aa; border-radius:.3cqw; font-family:Consolas, "Courier New", monospace; font-size:1.25cqw; line-height:1.3; }
.ui .f-sign { flex:none; font-weight:900; }
.ui .f-ln { min-width:0; overflow-wrap:anywhere; }
.ui .f-chg { padding:0 .2cqw; border:.18cqw dashed #0d1b2a; font-weight:800; background:#fff6c9; }

/* ---------------------------------------------------------------- course home and post-test */
.ui .f-nav { display:flex; flex-wrap:nowrap; gap:.8cqw; padding:.7cqw 1cqw 2cqw; background:#fff; border-bottom:.1cqw solid #ccd; font-size:1.15cqw; }
.ui .f-nl { position:relative; padding:.2cqw .8cqw; border:.12cqw solid #1b365d; border-radius:.4cqw; color:#1b365d; font-weight:700; }
.ui .f-nl.u-t { background:#fff; }
.ui .f-hbtns { display:flex; gap:1.4cqw; margin-top:1cqw; flex-wrap:wrap; }
.ui .f-hb { position:relative; padding:.6cqw 1.3cqw; border-radius:.4cqw; background:#1b365d; color:#fff; font-size:1.35cqw; font-weight:700; }
.ui .f-hb1 { background:#fff; color:#1b365d; border:.15cqw solid #1b365d; }
.ui .f-pt { padding:1cqw 1.6cqw 1.3cqw; background:#f5f7fa; color:#16243a; white-space:normal; }
.ui .f-pth { font-size:1.2cqw; font-weight:700; color:#555; }
.ui .f-pl { font-size:1.3cqw; margin:.3cqw 0 .6cqw; }
.ui .f-go { position:relative; display:inline-flex; margin-top:.9cqw; padding:.5cqw 1.3cqw; border-radius:.4cqw; background:#1b365d; color:#fff; font-size:1.35cqw; font-weight:700; }