/* =====================================================================
   APPLE-CARD CANVAS — mockup, 2026-10-14
   The inside pages sit on a soft canvas; the sidebar floats as its own
   card, and every panel is a white card with a large radius, no border.
   The canvas is the Blue Rail navy mixed into white, so no new colour.
   Loaded after every page stylesheet; nothing in site/ changes.
   ===================================================================== */

:root{
  --canvas:color-mix(in srgb, #102240 5%, #fff);
  --rc:28px;      /* a page panel */
  --rc-s:22px;    /* a card inside a grid */
  --card-shade:0 1px 2px rgba(16,34,64,.04);
}
/* one canvas on every page — it wins over page-specific grounds such as the
   Report's sky gradient, so no page reads as a different product */
html, body, .shell, .col, body[data-page] .col{background:var(--canvas) !important}

@media (min-width:861px){
  /* the sidebar floats, 12px off the window edges */
  .side{top:12px; height:calc(100vh - 24px); margin:12px 0 12px 12px;
    border:0 !important; border-radius:var(--rc); background:#fff}
  /* collapsed: the column grows by the 12px margin, so the floating card
     keeps the 76px rail its icons, highlight and tips were drawn for */
  html.side-min{--sw:88px}
  /* the top bar lets the canvas through instead of drawing a white strip */
  .top, .col .top{background:color-mix(in srgb, var(--canvas) 82%, transparent) !important;
    border-bottom-color:transparent !important; box-shadow:none !important}
}

/* page panels */
.card, .mys .c-sec, .pn, .dash-rail, .u3-hero, .pl-mside, .pl-mgrid, .sheet,
.main-careers .wh.wh2, .main-careers .wgrid.is-list, .main-careers .wsr-c{
  border-color:transparent !important; border-radius:var(--rc) !important; box-shadow:var(--card-shade)}
.card, .mys .c-sec, .u3-hero, .pn{padding:26px 28px}
.card-next{background:#fff !important}   /* its gradient edge was drawn as a background */

/* cards inside a grid */
.st-card, .wc, .prod, .pk2, .main-careers .pc.pw, .main-careers .ct, .main-careers .wtiles.is-list .wt{
  border-color:transparent !important; border-radius:var(--rc-s) !important; box-shadow:var(--card-shade)}
.pk2{padding:16px 12px 16px 16px}

/* ---- a world's page ---------------------------------------------------- */
/* the track tabs sit on the canvas instead of a lighter band */
.main-careers .wnav{background:color-mix(in srgb, var(--canvas) 90%, transparent) !important; border-bottom-color:transparent !important}
/* career tiles are cards: white, no border, the grid radius */
.main-careers .wgrid:not(.is-list) .wk{min-height:64px; padding:12px 10px 12px 20px; border-color:transparent !important;
  border-radius:var(--rc-s) !important; background:#fff; box-shadow:var(--card-shade)}
.main-careers .wgrid.is-list{border-color:transparent !important}
.main-careers .wn-search, .main-careers .wtools .wn-search{border-color:transparent !important; box-shadow:var(--card-shade)}

/* ---- dialogs: the sheet, and grouped tiles inside it ------------------- */
/* inside a white sheet a group is a canvas-filled tile with no border,
   its icon chip white — the same card idea turned inside out */
.dlg-in, .dlg-col .dlg-in{border-radius:32px !important}
/* the scrollbar: where it is always shown (a Mac set to "Always", Windows)
   Chrome drew a grey strip down the sheet's right edge, square across its
   rounded corner. Now a thin soft thumb with no track, and clip-path rounds
   it with the sheet. clip-path would also cut a shadow on the sheet, so the
   shadow moves to the dialog around it, the same size and radius. */
.dlg{border-radius:32px; box-shadow:0 24px 60px -30px rgba(16,34,64,.4)}
.dlg-in{scrollbar-width:thin; scrollbar-color:rgba(16,34,64,.22) transparent; clip-path:inset(0 round 32px); box-shadow:none}

/* college popup: the photo or poster sits 10px inside the 32px sheet (8px on
   a phone), so its corners are the sheet's less that gap, 22px (24px): one
   curve inside another, instead of a tight 14px under a wide one */
.cp-img, .cp-poster{border-radius:22px}
@media screen and (max-width:640px){ .cp-img, .cp-poster{border-radius:24px} }

/* career: the three facts become three tiles */
.kp-glance{gap:10px !important; border:0 !important; border-radius:0 !important; overflow:visible !important}
.kp-glance li, .kp-glance li:first-child{border:0 !important; border-radius:20px !important; background:var(--canvas) !important; padding:14px 18px 14px 14px !important}
.kp-glance li > span{background:#fff !important}
/* You'd enjoy / The hard parts */
.kp-pc > div{border:0 !important; border-radius:24px; background:var(--canvas); padding:20px 22px}
.kp-pc .is-good h3 span, .kp-pc .is-hard h3 span{background:#fff}
/* A day in … */
.kp-scene{border-radius:24px !important; background:var(--canvas) !important}

/* college: the four facts */
.cp-facts > div{border-radius:22px; background:var(--canvas); padding:16px 18px 18px}

/* ---- one hover for every card ------------------------------------------ */
/* The card rises 2px on a soft, wide shadow, and a world's picture zooms a
   little inside its frame. The scrolling rows get room above and below, so
   the shadow is never clipped into a hard band. */
:is(.st-card, .wc, .prod, .pk2, .main-careers .pc.pw, .main-careers .ct, .main-careers .wgrid:not(.is-list) .wk){
  transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s cubic-bezier(.22,1,.36,1) !important}
:is(.st-card, .wc, .prod, .pk2, .main-careers .pc.pw, .main-careers .ct, .main-careers .wgrid:not(.is-list) .wk):hover{
  border-color:transparent !important; transform:translateY(-2px) !important;
  box-shadow:0 1px 2px rgba(16,34,64,.04), 0 12px 28px -14px rgba(16,34,64,.16) !important}
.main-careers .pw-ph{overflow:hidden}
.main-careers .pw-ph svg{transition:transform .5s cubic-bezier(.22,1,.36,1)}
.main-careers .pc.pw:hover .pw-ph svg{transform:scale(1.05)}
.cx-scroll{padding:8px 6px 26px !important; margin:-8px -6px -16px !important; scroll-padding:0 6px !important}
@media (prefers-reduced-motion:reduce){
  :is(.st-card, .wc, .prod, .pk2, .main-careers .pc.pw, .main-careers .ct, .main-careers .wgrid:not(.is-list) .wk):hover{transform:none !important}
  .main-careers .pc.pw:hover .pw-ph svg{transform:none}
}

/* Picked for you: the icon, the words and the bookmark sit on one centre
   line, so a card with only a title has no gap under it */
.pk2{align-items:center !important}
.pk2-save{margin:0 !important}

/* ---- one page width ---------------------------------------------------- */
/* Every page's content starts and ends where the top bar does, at every
   window width. No page centres itself in a narrower box or stops short:
   My Space (1320 centred), Colleges (1360, its filters 1100) and the Report
   (1080 centred) each used to, so the title moved between pages. */
.main, .main-colleges{max-width:none !important}
.mys, .mys.u3{max-width:none !important; margin-left:0 !important; margin-right:0 !important}
.fbar{max-width:none !important}
.cv-bar, .cv{max-width:none !important; margin-left:0 !important; margin-right:0 !important}

/* ---- secondary buttons and controls: no outlines ----------------------- */
/* Like the cards, they are white on the canvas with the faintest shadow; a
   hover lifts them a little. Inside a white card they take the canvas as
   their fill. A search box shows the input's blue ring when you type in it. */
.btn-ghost, .pg-streak, .ms-ib, .pg-ib, .u3-today, .u3-search, .csearch,
.main-careers .wn-search, .main-careers .wtools .wn-search, .cx-arr, .sortb, .wchip, .wchips-btn, .pl-today{
  border-color:transparent !important; background:#fff; box-shadow:var(--card-shade)}
.u3-views{box-shadow:var(--card-shade) !important}
@media (min-width:861px){
  .top-saved{border-color:transparent !important; background:#fff; box-shadow:var(--card-shade)}
  .top-saved:hover{border-color:transparent !important; background:#fff; box-shadow:0 1px 2px rgba(16,34,64,.05), 0 6px 16px -10px rgba(16,34,64,.24)}
  .top-saved.on{background:var(--sky-16)}
  /* the breadcrumb keeps its width; the search gives way when the bar is
     full (Colleges adds Saved, and the crumb ran under the search) */
  .top .crumb{flex:none}
  .top .search{flex:0 1 360px; width:auto; min-width:0}
}
:is(.btn-ghost, .pg-streak, .ms-ib, .pg-ib, .u3-today, .cx-arr, .sortb, .wchip, .wchips-btn, .pl-today):hover:not(:disabled){
  border-color:transparent !important; background:#fff;
  box-shadow:0 1px 2px rgba(16,34,64,.05), 0 6px 16px -10px rgba(16,34,64,.24)}
:is(.csearch, .u3-search, .main-careers .wn-search):focus-within{
  box-shadow:inset 0 0 0 2px var(--blue), 0 0 0 4px rgba(48,112,182,.12) !important}

/* the same controls inside a white card or sheet */
:is(.card, .pn, .dash-rail, .u3-hero, .mys .c-sec, .sheet, .cv, .dlg-in, .wc, .st-card, .pl-mside, .pl-mgrid)
  :is(.btn-ghost, .ms-ib, .pg-ib, .u3-today, .u3-search, .sortb, .pl-today){background:var(--canvas); box-shadow:none}
:is(.card, .pn, .dash-rail, .u3-hero, .mys .c-sec, .sheet, .cv, .dlg-in, .wc, .st-card, .pl-mside, .pl-mgrid)
  :is(.btn-ghost, .ms-ib, .pg-ib, .u3-today, .sortb, .pl-today):hover:not(:disabled){
  background:color-mix(in srgb, #102240 9%, #fff); box-shadow:none}

/* icon tiles that were outlined: a badge not yet earned, a missed habit,
   a to-do in the agenda. A canvas fill says "not yet" without a ring. */
.u3-md.t-off, .u3-h.h-miss .u3-h-i, .u3-ag.k-todo .u3-ag-i{background:var(--canvas) !important; box-shadow:none !important}