/* Digital Life, redone (card 29A-22): the category row, the index cards, the category page.
   Lines #2A4BB0 light / #8FA6EE dark (var(--accent)); orange only on buttons; labels 14 px and up.
   Loaded after pages-d.css and before teach.css's tokens apply; scoped to .dl-page so no other page is touched. */

/* site.css gives links in list items an animated underline gradient; the row, the card links and the thumbnails use their own states */
.dl-row a,.dlc a,.dlc-more{background-image:none!important}

/* ---- the one category row ---- (the header is sticky, so this row is NOT sticky: only one bar is ever fixed) */
.dl-row{background:var(--bg);border-bottom:1px solid var(--line)}
.dl-row .wrap{padding-inline:0}
.dl-row ul{position:relative;display:flex;gap:32px;list-style:none;margin:0;padding:0 var(--s3);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.dl-row ul::-webkit-scrollbar{display:none}
.dl-row li{flex:none}
.dl-row a{display:flex;align-items:center;min-height:60px;white-space:nowrap;font-size:1.0625rem;font-weight:400;color:var(--muted);text-decoration:none;border-bottom:3px solid transparent;margin-bottom:-1px;background-image:none}
.dl-row a[aria-current="page"]{font-weight:700;color:var(--text);border-bottom-color:var(--accent)}
.dl-row a:focus-visible{outline:3px solid var(--focus);outline-offset:-3px;border-radius:6px}
@media (hover:hover) and (pointer:fine){.dl-row a:hover{color:var(--text)}}

/* ---- index: shorter hero ---- */
.dl-index .home-hero.bh{min-height:clamp(320px,36svh,380px)}
.dl-index .home-hero.bh > .wrap{padding-block:36px}
.dl-index .bh h1{font-size:46px;max-width:22ch;margin-bottom:12px}
.dl-index .bh .lead{font-size:20px;margin:0;max-width:38ch}

/* ---- index: one card per category ---- */
.dl-cards{padding-block:var(--s6)}
.dl-cards > .wrap{display:flex;flex-direction:column;gap:var(--s6)}
.dlc{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--s5);align-items:center}
.dlc:nth-child(even) .dlc-thumb{order:2}
.dlc-thumb{display:block;border-radius:var(--radius-lg);overflow:hidden;background:var(--stage);box-shadow:var(--shadow);background-image:none}
.dlc-thumb .dg{margin:0}
.dlc-thumb .dg-compact{display:none!important}
.dlc-thumb .dg-wide{display:block!important}
.dlc-thumb svg{display:block;width:100%;height:auto}
/* 29A-22b: at card size the labels would be about 7 px; the thumbnail is the drawing only (no labels, leader lines or source line) */
.dlc-thumb svg text,.dlc-thumb svg .lab,.dlc-thumb svg .lead2,.dlc-thumb svg .cap{display:none}
.dl-cards .dlc h2{font-size:var(--fs-4);line-height:1.12;letter-spacing:-.01em;max-width:20ch}
.dlc h2 a{color:var(--text);text-decoration:none;background-image:none}
.dlc h2 a:hover{color:var(--accent-text)}
.dlc-tips{list-style:none;margin:var(--s3) 0 var(--s2);padding:0;border-top:1px solid var(--line)}
.dlc-tips li{border-bottom:1px solid var(--line)}
.dlc-tips a{display:block;padding:14px 0;font-size:var(--fs-1);font-weight:700;line-height:1.3;color:var(--text);text-decoration:none;background-image:none}
.dlc-tips a:hover{color:var(--accent-text)}
.dlc-more{display:inline-flex;align-items:center;gap:10px;min-height:48px;font-size:var(--fs-1);font-weight:700;color:var(--accent-text);text-decoration:none;background-image:none}
.dlc-more b{font-size:var(--fs-3);line-height:1;font-variant-numeric:tabular-nums}
.dlc-more svg{width:20px;height:20px;transition:transform 160ms ease}
.dlc-more:hover svg{transform:translateX(4px)}
.dlc a:focus-visible,.dlc-thumb:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}

/* ---- category page: compact top ---- */
.dl-top{background:var(--stage);color:#fff}
.dl-top > .wrap{padding-block:44px 40px}
.dl-top h1{font-size:46px;line-height:1.08;max-width:24ch;margin:0 0 12px;color:#fff;text-wrap:balance}
.dl-top .lead{font-size:20px;line-height:1.5;color:var(--stage-text-2);margin:0;max-width:62ch}

/* ---- category page: the reader fills its frame, the tips are one accordion ---- */
.dl-lib.tc-reader{padding-block:var(--s5) var(--s6)}
.dl-lib .tc-cat{gap:var(--s5)}
.dl-lib .tc-head h2{font-size:clamp(var(--fs-3),3.4vw,var(--fs-5));line-height:1.1;max-width:24ch;margin:0}
.dl-lib .tc-body{grid-template-columns:minmax(0,1fr);gap:var(--s2)}
.dl-lib .tc-art{aspect-ratio:auto}
.dl-lib .tc-art svg{height:auto}
.dl-lib .tc-art-wide{padding:var(--s2) var(--s3) 0}
/* the step text already sits under the drawing inside the frame (.tc-cap); the side card is gone, its two buttons sit under the frame */
.dl-lib .tc-panel{flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--s2);padding:0;border:0;background:none;box-shadow:none}
.dl-lib .tc-step-no,.dl-lib .tc-step-txt{display:none}
.dl-lib .tc-acts{flex-direction:row;flex-wrap:wrap}
.dl-lib .tc-tip-b.has-art{max-width:none}
/* 29A-22b: the tip drawing fills the whole content column (1152 px at 1440, the phone column at 390), so its 14 px labels are shown at 14 px or more */
.dl-lib .dl-tipart{max-width:none;width:100%}
.dl-lib .dl-tipart .dg,.dl-lib .dl-tipart .dg-wide,.dl-lib .dl-tipart .dg-compact{width:100%}
.dl-lib .dl-tipart svg{display:block;width:100%;height:auto}
.dl-lib .dl-tipart .dg{margin:0}
.dl-lib .tc-tip-b.has-art{gap:var(--s1)}

/* ---- closing band: the existing band, shorter padding ---- */
.dl-page .bd.h{padding-block:72px}

@media (max-width:960px){
  .dlc{grid-template-columns:minmax(0,1fr);gap:var(--s3)}
  .dlc:nth-child(even) .dlc-thumb{order:0}
}
@media (max-width:760px){
  .dl-row ul{gap:24px;padding:0 var(--s2)}
  .dl-row ul::after{content:"";flex:0 0 60%}
  /* the row reads as scrollable: a fade at the right edge, and at the left once scrolled */
  .dl-row .wrap{position:relative}
  .dl-row .wrap::before,.dl-row .wrap::after{content:"";position:absolute;top:0;bottom:0;width:44px;pointer-events:none;opacity:0;transition:opacity 160ms ease;z-index:1}
  .dl-row .wrap::before{left:0;background:linear-gradient(to right,var(--bg),transparent)}
  .dl-row .wrap::after{right:0;background:linear-gradient(to left,var(--bg),transparent)}
  .dl-row .wrap.fade-l::before,.dl-row .wrap.fade-r::after{opacity:1}
  .dl-index .home-hero.bh > .wrap{padding-block:44px 28px}
  .dl-index .bh h1{font-size:34px}
  .dl-index .bh .lead{font-size:18px}
  .dl-index .home-hero .hero-media{aspect-ratio:16/8}
  .dl-cards{padding-block:var(--s5)}
  .dl-cards > .wrap{gap:var(--s5)}
  .dl-cards .dlc h2{font-size:var(--fs-3)}
  .dl-top > .wrap{padding-block:32px 28px}
  .dl-top h1{font-size:34px}
  .dl-top .lead{font-size:18px}
  .dl-lib.tc-reader{padding-block:var(--s4) var(--s5)}
  .dl-lib .tc-art-wide{padding:0}
  .dl-page .bd.h{padding-block:48px}
}