/* ============================================================
   DiagMyPCHub — macOS Updates, Permissions, Storage & Quirks
   (tutorial library)
   Local stylesheet. Depends on the site design tokens from
   ../../css/style.css (loaded first in <head>). All rules are
   namespaced with the "mac-" prefix so nothing leaks into other
   pages; the dark theme is handled by the site-wide token swap in
   ../../css/theme-dark.css plus the small overrides at the bottom.
   ============================================================ */

/* ---------- Reading progress ---------- */
.mac-progress{ position:fixed; top:0; left:0; right:0; height:3px; z-index:90; pointer-events:none; background:transparent; }
.mac-progress span{ display:block; height:100%; width:0; background:linear-gradient(90deg, var(--blue), var(--cyan-bright)); }

/* ---------- Layout grid (TOC + article) ---------- */
.mac-grid{ display:grid; grid-template-columns:250px minmax(0,1fr); gap:clamp(24px,4vw,48px); align-items:start; margin-top:28px; }

/* ---------- Table of contents (sticky) ---------- */
.mac-toc{ position:sticky; top:calc(var(--header-h) + 20px); max-height:calc(100vh - var(--header-h) - 40px); overflow:auto; padding:16px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); }
.mac-toc-title{ font:600 .7rem var(--font-mono); text-transform:uppercase; letter-spacing:.14em; color:var(--ink-3); margin:0 0 10px; }
.mac-toc ul{ list-style:none; margin:0; padding:0; }
.mac-toc li{ margin:0; }
.mac-toc a{ display:block; padding:5px 8px; border-radius:8px; color:var(--ink-2); font-size:.83rem; line-height:1.4; text-decoration:none; border-left:2px solid transparent; }
.mac-toc a:hover{ background:var(--tint); color:var(--ink); }
.mac-toc a[aria-current="true"]{ background:var(--tint); color:var(--blue-deep); border-left-color:var(--blue); font-weight:500; }
.mac-toc .is-hidden{ display:none; }

/* ---------- Article head ---------- */
.mac-head h1{ font-family:var(--font-display); font-size:clamp(1.7rem, 1.2rem + 2.4vw, 2.5rem); font-weight:700; letter-spacing:-.02em; line-height:1.15; margin:0 0 14px; color:var(--ink); }
.mac-meta{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 18px; }
.mac-meta-item{ font:400 .78rem var(--font-mono); color:var(--ink-3); background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:4px 12px; }
.mac-intro{ color:var(--ink-2); font-size:1.02rem; line-height:1.75; margin:0 0 16px; max-width:78ch; }
.mac-intro strong, .mac-intro em{ color:var(--ink); }

/* ---------- Hero circuit illustration ----------
   Original decorative SVG. Traces and pads use theme tokens so the
   composition follows light/dark automatically; animation is
   disabled under prefers-reduced-motion (see bottom of file). */
.mac-hero{ margin:26px 0 8px; padding:clamp(14px,2.5vw,26px); background:linear-gradient(160deg, var(--dark) 0%, var(--dark-2) 100%); border:1px solid var(--dark-line); border-radius:var(--radius); overflow:hidden; }
.mac-hero svg{ display:block; width:100%; height:auto; }
.mac-hero .mac-h-trace{ stroke:var(--dark-line); fill:none; stroke-width:2; }
.mac-hero .mac-h-signal{ stroke:var(--cyan-bright); fill:none; stroke-width:2; stroke-linecap:round; stroke-dasharray:10 130; animation:macSignal 6.5s linear infinite; opacity:.9; }
.mac-hero .mac-h-pad{ fill:var(--dark-2); stroke:var(--blue); stroke-width:2; }
.mac-hero .mac-h-node{ fill:var(--cyan-bright); animation:macPulse 3.2s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
.mac-hero .mac-h-chip{ fill:#0a1526; stroke:var(--blue-soft); stroke-width:2; }
.mac-hero .mac-h-die{ fill:var(--blue); opacity:.85; }
.mac-hero .mac-h-pin{ fill:var(--dark-line); }
.mac-hero .mac-h-grid line{ stroke:rgba(148,180,230,.07); stroke-width:1; }
.mac-hero .mac-h-label{ fill:#8aa3c4; font:600 13px var(--font-mono); letter-spacing:2px; }
.mac-hero .mac-h-sublabel{ fill:#5b7396; font:500 10px var(--font-mono); letter-spacing:1.5px; }
@keyframes macSignal{ from{ stroke-dashoffset:280; } to{ stroke-dashoffset:0; } }
@keyframes macPulse{ 0%,100%{ opacity:.35; transform:scale(1); } 50%{ opacity:1; transform:scale(1.4); } }

/* ---------- Category sections ---------- */
.mac-sec{ margin-top:clamp(48px,7vw,72px); scroll-margin-top:calc(var(--header-h) + 16px); }
.mac-sec.is-hidden{ display:none; }
.mac-sec-head{ display:flex; align-items:flex-start; gap:16px; margin-bottom:10px; }
.mac-sec-index{ font:600 .95rem var(--font-mono); color:var(--line-2); flex:none; padding-top:4px; }
.mac-sec-kicker{ font:500 .7rem var(--font-mono); text-transform:uppercase; letter-spacing:.16em; color:var(--blue); margin:0 0 4px; }
.mac-sec-head h2{ font-family:var(--font-display); font-size:clamp(1.3rem,1rem + 1.2vw,1.7rem); font-weight:600; letter-spacing:-.01em; margin:0; color:var(--ink); }
.mac-sec-lede{ color:var(--ink-2); font-size:.98rem; line-height:1.7; margin:0 0 22px; max-width:75ch; }

/* ---------- Tutorial index (search + filters + cards) ---------- */
.mac-index{ margin-top:34px; padding:clamp(16px,2.5vw,26px); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); }
.mac-index h2{ font-family:var(--font-display); font-size:1.35rem; font-weight:600; margin:0 0 6px; color:var(--ink); }
.mac-index-sub{ color:var(--ink-2); font-size:.95rem; line-height:1.65; margin:0 0 18px; max-width:75ch; }
.mac-toolbar{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom:14px; }
.mac-search{ position:relative; flex:1 1 260px; min-width:220px; }
.mac-search input{ width:100%; padding:10px 14px 10px 38px; font:400 .92rem var(--font-body); color:var(--ink); background:var(--bg); border:1px solid var(--line-2); border-radius:10px; }
.mac-search input::placeholder{ color:var(--ink-3); }
.mac-search input:focus{ outline:2px solid var(--blue); outline-offset:1px; border-color:var(--blue); }
.mac-search svg{ position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--ink-3); pointer-events:none; }
.mac-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.mac-chip{ font:500 .78rem var(--font-mono); color:var(--ink-2); background:var(--surface); border:1px solid var(--line-2); border-radius:999px; padding:6px 12px; cursor:pointer; transition:border-color .15s, background .15s, color .15s; }
.mac-chip:hover{ border-color:var(--blue); color:var(--ink); }
.mac-chip[aria-pressed="true"]{ background:var(--blue); border-color:var(--blue); color:#fff; }
.mac-index-count{ font:400 .8rem var(--font-mono); color:var(--ink-3); margin:0 0 14px; }
.mac-inline-reset{ font:500 .78rem var(--font-mono); color:var(--blue); background:none; border:none; cursor:pointer; padding:4px 6px; border-radius:6px; text-decoration:underline; text-underline-offset:2px; }
.mac-inline-reset:hover{ color:var(--blue-deep); }
.mac-cards{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:14px; }
.mac-card{ display:flex; flex-direction:column; gap:8px; padding:16px; background:var(--bg); border:1px solid var(--line); border-radius:10px; transition:border-color .15s, box-shadow .15s; }
.mac-card:hover{ border-color:var(--blue-soft); box-shadow:var(--shadow-1); }
.mac-card.is-hidden{ display:none; }
.mac-card-top{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.mac-card-num{ font:600 .72rem var(--font-mono); color:var(--ink-3); }
.mac-tag{ font:500 .68rem var(--font-mono); border-radius:999px; padding:3px 9px; border:1px solid var(--line-2); color:var(--ink-2); background:var(--surface); white-space:nowrap; }
.mac-tag-cat{ border-color:var(--blue-soft); color:var(--blue-deep); background:var(--tint); }
.mac-tag-lvl[data-level="Beginner"]{ border-color:var(--ok); color:var(--ok); }
.mac-tag-lvl[data-level="Intermediate"]{ border-color:var(--warn); color:#9a6b1f; }
.mac-tag-lvl[data-level="Advanced"]{ border-color:#e07a7a; color:#c25555; }
.mac-card h3{ margin:0; font-size:.98rem; font-weight:600; line-height:1.4; color:var(--ink); }
.mac-card h3 a{ color:inherit; text-decoration:none; }
.mac-card h3 a:hover, .mac-card h3 a:focus-visible{ color:var(--blue); text-decoration:underline; text-underline-offset:2px; }
.mac-card p{ margin:0; font-size:.85rem; line-height:1.55; color:var(--ink-2); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.mac-index-empty{ padding:26px 16px; text-align:center; color:var(--ink-2); font-size:.95rem; background:var(--bg); border:1px dashed var(--line-2); border-radius:10px; margin-top:4px; }
.mac-index-empty p{ margin:0 0 12px; }

/* ---------- Tutorial article blocks ---------- */
.mac-article{ scroll-margin-top:calc(var(--header-h) + 16px); padding:clamp(18px,3vw,30px); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); margin-bottom:22px; }
.mac-article.is-hidden{ display:none; }
.mac-article:focus{ outline:none; }
.mac-art-head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 14px; border-bottom:1px solid var(--line); padding-bottom:12px; margin-bottom:16px; }
.mac-art-num{ font:600 .85rem var(--font-mono); color:var(--blue); flex:none; }
.mac-article h3{ margin:0; font-family:var(--font-display); font-size:clamp(1.08rem,.95rem + .6vw,1.3rem); font-weight:600; line-height:1.35; color:var(--ink); }
.mac-art-meta{ display:flex; flex-wrap:wrap; gap:6px; margin-left:auto; }
.mac-article h4{ font:600 .72rem var(--font-mono); text-transform:uppercase; letter-spacing:.14em; color:var(--blue); margin:22px 0 8px; }
.mac-article p{ color:var(--ink-2); line-height:1.75; margin:0 0 14px; font-size:.96rem; }
.mac-article p strong, .mac-article p em{ color:var(--ink); }
.mac-article a{ color:var(--blue); text-decoration:underline; text-underline-offset:2px; text-decoration-color:var(--blue-soft); transition:text-decoration-color .2s; }
.mac-article a:hover{ text-decoration-color:var(--blue); }
.mac-article ul, .mac-article ol{ margin:0 0 14px; padding-left:22px; color:var(--ink-2); font-size:.96rem; line-height:1.7; }
.mac-article li{ margin-bottom:6px; }
.mac-article li::marker{ color:var(--blue); }
.mac-summary{ color:var(--ink-3); font-size:.9rem; line-height:1.6; border-left:3px solid var(--blue-soft); padding:2px 0 2px 14px; margin:0 0 6px; }

/* numbered steps */
.mac-steps{ list-style:none; counter-reset:macstep; margin:0 0 14px; padding:0; }
.mac-steps > li{ counter-increment:macstep; position:relative; padding:0 0 14px 46px; margin:0; }
.mac-steps > li::before{ content:counter(macstep); position:absolute; left:0; top:0; width:30px; height:30px; display:grid; place-items:center; font:600 .8rem var(--font-mono); color:var(--blue-deep); background:var(--tint); border:1px solid var(--blue-soft); border-radius:50%; }
.mac-steps > li p{ margin-bottom:8px; }

/* ---------- Code blocks + copy buttons ---------- */
.mac-block{ margin:14px 0; border:1px solid var(--line-2); border-radius:10px; overflow:hidden; background:var(--dark); }
.mac-block-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:7px 12px; background:rgba(255,255,255,.04); border-bottom:1px solid var(--dark-line); }
.mac-block-label{ font:500 .68rem var(--font-mono); text-transform:uppercase; letter-spacing:.12em; color:var(--dark-muted); }
.mac-code{ margin:0; padding:14px 16px; overflow-x:auto; }
.mac-code code{ font:400 .85rem/1.6 var(--font-mono); color:#d7e6fb; white-space:pre-wrap; word-break:break-word; background:none; padding:0; }
.mac-copy{ font:500 .72rem var(--font-mono); color:var(--dark-ink); background:transparent; border:1px solid var(--dark-line); border-radius:6px; padding:4px 10px; cursor:pointer; transition:border-color .15s, color .15s; }
.mac-copy:hover{ border-color:var(--cyan-bright); color:var(--cyan-bright); }
.mac-copy.is-done{ border-color:var(--ok); color:var(--ok); }
.mac-block-note{ margin:0; padding:9px 14px; font-size:.8rem; line-height:1.55; color:var(--ink-3); background:var(--bg); border-top:1px solid var(--line); }

/* ---------- Callouts ---------- */
.mac-callout{ display:flex; gap:12px; padding:14px 16px; margin:14px 0; border-radius:10px; border:1px solid var(--line-2); background:var(--tint); }
.mac-callout p{ margin:0; font-size:.9rem; line-height:1.65; color:var(--ink-2); }
.mac-callout strong{ display:block; margin-bottom:2px; color:var(--ink); font-size:.85rem; text-transform:uppercase; letter-spacing:.06em; font-family:var(--font-mono); }
.mac-callout .mac-co-ico{ flex:none; width:34px; height:34px; display:grid; place-items:center; border-radius:9px; background:var(--blue); color:#fff; }
.mac-callout.mac-warn{ background:#fdf6e8; border-color:#e8cf9a; }
.mac-callout.mac-warn .mac-co-ico{ background:var(--warn); color:#3d2c05; }
.mac-callout.mac-danger{ background:#fdeeee; border-color:#e5b3b3; }
.mac-callout.mac-danger .mac-co-ico{ background:#d9534f; color:#fff; }
.mac-callout.mac-ok{ background:#edf8f2; border-color:#a9d8c0; }
.mac-callout.mac-ok .mac-co-ico{ background:var(--ok); color:#06301e; }

/* ---------- Tables ---------- */
.mac-article .table-wrap, .mac-index .table-wrap, .howto-table-wrap{ margin:14px 0; overflow-x:auto; border:1px solid var(--line); border-radius:10px; -webkit-overflow-scrolling:touch; }
.mac-article table, .howto-table-wrap table{ width:100%; border-collapse:collapse; font-size:.87rem; min-width:520px; }
.mac-article th, .howto-table-wrap th{ text-align:left; font:600 .72rem var(--font-mono); text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); background:var(--tint); padding:10px 14px; border-bottom:1px solid var(--line-2); }
.mac-article td, .howto-table-wrap td{ padding:10px 14px; border-bottom:1px solid var(--line); color:var(--ink-2); vertical-align:top; line-height:1.55; }
.mac-article tbody tr:last-child td, .howto-table-wrap tbody tr:last-child td{ border-bottom:none; }
.mac-article code, .mac-index code{ font:500 .82em var(--font-mono); background:var(--tint); color:var(--blue-deep); padding:.1em .4em; border-radius:5px; }

/* ---------- Image placeholders (hidden until a valid image exists) ----------
   Future images: save under img/ and set data-src on the <img>.
   The figure is display:none by default; JS adds .is-ready only when a
   non-empty data-src is present, and removes it on load error — so an
   empty src, missing file or missing alt never renders a broken icon,
   an empty box or reserved space. */
.mac-figure{ display:none; margin:16px 0 8px; }
.mac-figure.is-ready{ display:block; }
.mac-figure img{ width:100%; height:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); display:block; }
.mac-figure figcaption{ margin-top:10px; font:400 .78rem var(--font-mono); color:var(--ink-3); line-height:1.5; }

/* ---------- Checklist ---------- */
.mac-check{ margin-top:26px; padding:clamp(16px,2.5vw,24px); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); }
.mac-check h2{ font-family:var(--font-display); font-size:1.3rem; font-weight:600; margin:0 0 6px; color:var(--ink); }
.mac-check-sub{ color:var(--ink-2); font-size:.92rem; line-height:1.65; margin:0 0 16px; max-width:75ch; }
.mac-check-list{ list-style:none; margin:0 0 16px; padding:0; display:grid; gap:8px; }
.mac-check-list label{ display:flex; gap:12px; align-items:flex-start; padding:10px 14px; background:var(--bg); border:1px solid var(--line); border-radius:10px; cursor:pointer; font-size:.9rem; line-height:1.55; color:var(--ink-2); }
.mac-check-list label:hover{ border-color:var(--blue-soft); }
.mac-check-box{ flex:none; width:18px; height:18px; margin-top:2px; accent-color:var(--blue); cursor:pointer; }
.mac-check-actions{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.mac-check-hint{ font-size:.78rem; color:var(--ink-3); margin-left:auto; }

/* ---------- Related guides ---------- */
.mac-related-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; }
.mac-related-card{ display:block; padding:16px; background:var(--surface); border:1px solid var(--line); border-radius:10px; color:inherit; text-decoration:none; transition:border-color .15s, box-shadow .15s; }
.mac-related-card:hover{ border-color:var(--blue-soft); box-shadow:var(--shadow-1); }
.mac-related-card h3{ margin:0 0 6px; font-size:.98rem; font-weight:600; color:var(--ink); }
.mac-related-card p{ margin:0; font-size:.85rem; line-height:1.55; color:var(--ink-2); }

/* ---------- Focus visibility (page-scoped) ---------- */
.mac-grid :is(a,button,input,[tabindex]):focus-visible{ outline:2px solid var(--blue); outline-offset:2px; border-radius:4px; }

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .mac-grid{ grid-template-columns:1fr; }
  .mac-toc{ position:static; max-height:none; order:-1; }
  .mac-art-meta{ margin-left:0; width:100%; }
}
@media (max-width: 560px){
  .mac-steps > li{ padding-left:40px; }
  .mac-steps > li::before{ width:26px; height:26px; font-size:.74rem; }
  .mac-toolbar{ align-items:stretch; flex-direction:column; }
  .mac-search{ min-width:0; }
}

/* ---------- Print ---------- */
@media print{
  .mac-progress, .mac-toc, .mac-toolbar, .mac-cards, .mac-index-empty,
  .to-top, .toast, .consent, #ad-wrap, .theme-toggle, .nav-toggle,
  .mac-copy, .mac-check-actions, .mac-hero{ display:none !important; }
  .mac-grid{ grid-template-columns:1fr; }
  .mac-article, .mac-index, .mac-check{ border-color:#bbb; box-shadow:none; break-inside:avoid-page; }
  .mac-article.is-hidden{ display:block; } /* print everything, not just the filtered view */
  body{ background:#fff; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .mac-progress{ display:none; }
  .mac-hero .mac-h-signal, .mac-hero .mac-h-node{ animation:none; opacity:.85; }
}

/* ---------- Dark theme fixes (hardcoded pieces only) ---------- */
[data-theme="dark"] .mac-callout.mac-warn{ background:#2a2110; border-color:#6b5426; }
[data-theme="dark"] .mac-callout.mac-danger{ background:#2a1414; border-color:#6b2a2a; }
[data-theme="dark"] .mac-callout.mac-ok{ background:#0f2419; border-color:#2a5c42; }
[data-theme="dark"] .mac-tag-lvl[data-level="Intermediate"]{ color:var(--warn); }
[data-theme="dark"] .mac-tag-lvl[data-level="Advanced"]{ color:#f28b82; }
[data-theme="dark"] .mac-block{ background:#060d18; }
[data-theme="dark"] .mac-code code{ color:#cfe0f7; }