/* The Learn page, for both apps (v4.1.1): drawn by shared/learn-view.js from what the server
   holds (learn-content.js). Reads the host's tokens and defines none. */
/* (v4.1.17 review, A6) Four cards, one row at desktop widths (1280 too). */
.learn-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:32px}
/* A card of its own, the same height as its neighbours, with what it ends on (the guides, or
   "Guides coming soon") at the foot: three cards in a row end on one line. */
.learn-card{display:flex;flex-direction:column;gap:12px;background:var(--surface);border:1px solid var(--line-card);
            border-radius:var(--r-card);padding:24px}
.learn-card h2{margin:0;font-size:var(--t-16);letter-spacing:-.01em;line-height:1.15}
.learn-blurb{margin:0;font-size:var(--t-14);line-height:1.5;color:var(--ink-2)}
.learn-list{display:flex;flex-direction:column;gap:8px;margin:auto 0 0;padding:0;list-style:none}
.learn-list li{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.learn-guide{font-size:var(--t-14);font-weight:600;color:var(--blue-text);text-decoration:none}
.learn-guide:hover{text-decoration:underline}
.learn-min{flex:0 0 auto;font-size:var(--t-12);color:var(--ink-3)}
.learn-lede{margin:8px 0 0;font-size:var(--t-14);color:var(--ink-2);max-width:60ch}
.learn-fail{margin:32px 0 0;font-size:var(--t-14);color:var(--ink-2)}
.learn-fail .btn{margin-left:12px}
@media (max-width:600px){ .learn-card{padding:20px} }
/* v4.1.17 (B8). The dashboard's cards (learn-view.js rows): above 600 px as they were, the tag and
   the chevron not shown. On a phone, one column of rows of 72: the title and a one-line blurb,
   the tag, the chevron; the card's first guide (its button or link) covers the whole row, so the
   row is the one thing to press. A section with no guide yet is a row with "Soon" and no chevron. */
.learn-tag,.learn-chev{display:none}
@media (max-width:600px){
  .learn-grid--rows{grid-template-columns:minmax(0,1fr);gap:8px;margin-top:16px}
  .learn-grid--rows .learn-card{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;
                                grid-auto-columns:20px;column-gap:12px;row-gap:4px;align-content:center;
                                min-height:72px;padding:12px 16px}
  .learn-grid--rows .learn-card h2,.learn-grid--rows .learn-blurb{grid-column:1;min-width:0;white-space:nowrap;
                                                                   overflow:hidden;text-overflow:ellipsis}
  .learn-grid--rows .learn-card h2{grid-row:1}
  .learn-grid--rows .learn-blurb{grid-row:2;line-height:1.4}
  .learn-grid--rows .learn-tag{display:block;grid-column:2;grid-row:1 / span 2;align-self:center;padding:4px 8px;
                               border-radius:var(--r-pill);background:var(--sunken);font-size:var(--t-12);
                               font-weight:600;color:var(--ink-2);white-space:nowrap}
  .learn-grid--rows .learn-chev{display:block;grid-column:3;grid-row:1 / span 2;align-self:center;color:var(--ink-3)}
  .learn-grid--rows .learn-list,.learn-grid--rows .learn-list li{display:contents}
  .learn-grid--rows .learn-min{display:none}
  .learn-grid--rows .learn-list li>:first-child{position:absolute;inset:0;width:auto;height:auto;min-height:0;margin:0;
                                                 padding:0;border:0;border-radius:inherit;background:transparent;
                                                 box-shadow:none;color:transparent;font-size:0;overflow:hidden}
  .learn-grid--rows .learn-list li>:first-child:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
  .learn-grid--rows .learn-card:has(.learn-list li>:first-child:hover){background:var(--sunken)}
}
/* v4.1.17. A guide read inside the app: "← Learn" back to the cards, then the guide (the dashboard
   draws it, docs-render.js; a studio frames the dashboard's page). */
.learn-back{display:inline-block;margin:24px 0 16px;font-size:var(--t-14);font-weight:600;color:var(--blue-text);text-decoration:none}
.learn-back:hover{text-decoration:underline}
/* In a studio: the guide in a frame of the dashboard's page, filling what is under the header. */
.learn-frame{display:block;width:100%;height:calc(100vh - 170px);min-height:420px;border:0;border-radius:var(--r-card);background:var(--bg)}
@media (max-width:600px){ .learn-frame{height:calc(100vh - 150px)} }