/* Shared labelled row-card layout for content tables on phone widths. */
@media(max-width:599px){
  table.responsive-stack-600{display:block;width:100%;min-width:0!important;border-collapse:collapse;}
  table.responsive-stack-600 tbody,table.responsive-stack-600 tr{display:block;width:100%;}
  table.responsive-stack-600 thead{display:none;}
  table.responsive-stack-600 tr{margin:0 0 14px;border:1px solid #d8d2c6;border-radius:8px;overflow:hidden;background:#fff;}
  table.responsive-stack-600 td{display:grid;grid-template-columns:minmax(112px,40%) minmax(0,1fr);gap:10px;border:0;border-bottom:1px solid #e6e1d6;padding:9px 10px;overflow-wrap:anywhere;text-align:left;vertical-align:top;}
  table.responsive-stack-600 td::before{content:attr(data-label);font-weight:700;color:#2f4a3c;}
}

@media(max-width:599px){
  .article-page nav.breadcrumbs{white-space:nowrap;visibility:hidden;}
  .article-page nav.breadcrumbs>a{visibility:visible;}
  .article-page nav.breadcrumbs>a::before{content:"";display:inline-block;width:11px;height:10px;margin-right:5px;vertical-align:middle;background:currentColor;clip-path:polygon(35% 0,0 50%,35% 100%,35% 65%,100% 65%,100% 35%,35% 35%);}
  .article-page nav.breadcrumbs>span{display:none;}
}

/* Shared card affordance for guide cards and Read Next cards on every page. */
a.guide-card:hover,
a.guide-card:focus-visible,
.article-page .related-reading a:hover,
.article-page .related-reading a:focus-visible{
  border-color:rgb(47,74,60);
}

/* Match the established sample-log table skin on desktop only. */
@media(min-width:600px){
  .table-wrap > table{
    width:100%;
    border:1px solid #cfd6cc;
    border-collapse:collapse;
    font-family:Karla,Arial,sans-serif;
    font-size:15px;
    line-height:1.4;
  }
  .table-wrap > table th,
  .table-wrap > table td{
    border:1px solid #cfd6cc;
    padding:10px;
    text-align:left;
    vertical-align:top;
  }
  .table-wrap > table th{
    background:#eef2ea;
    font-weight:700;
  }
}


/* Hide collapsed guide cards even when their shared card rule sets display:grid. */
a.guide-card[hidden]{display:none!important;}
@media(max-width:599px){
  table.issue-table.responsive-stack-600 tr:last-child td{border-bottom:1px solid #e6e1d6;}
}
/* Hub anchor links clear the sticky site header and category tabs. */
body.hub-page [id]{scroll-margin-top:var(--hub-anchor-offset,128px);}
body.hub-page .toc-sidebar{top:var(--hub-anchor-offset,128px);}
body.hub-page .toc-sidebar .toc-divider{display:block;height:0;border:0;border-top:1px solid #d8d2c6;margin:12px 0;}
.systems-page-layout{display:grid;grid-template-columns:minmax(0,740px) minmax(220px,1fr);gap:0 48px;align-items:start;max-width:1160px;margin:0 auto;}
.systems-page-layout .systems-main{min-width:0;}
.systems-page-layout .toc-sidebar{position:sticky;top:var(--hub-anchor-offset,128px);align-self:start;display:flex;flex-direction:column;gap:11px;padding:18px;background:#fff;border:1px solid #e6e1d6;border-radius:10px;box-shadow:0 5px 18px rgba(28,26,23,.08);font-size:13.5px;line-height:1.4;}
.systems-page-layout .toc-sidebar a{color:#2f4a3c;text-decoration:none;font-weight:650;}
.systems-page-layout .toc-sidebar a:hover,.systems-page-layout .toc-sidebar a:focus-visible,.systems-page-layout .toc-sidebar a.active{text-decoration:underline;}
@media(max-width:599px){body.hub-page [id]{scroll-margin-top:var(--hub-anchor-offset,88px);}}
@media(max-width:1000px){.systems-page-layout{display:block;}.systems-page-layout .toc-sidebar{display:none;}}

#all-guides .topic-header{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin:0 0 14px;
  padding-top:18px;
  border-top:1px solid var(--line,#e6e1d6);
}
#all-guides .topic-header h3{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:0 7px;
  margin:0;
  color:rgb(47,74,60);
  font-family:Sora,Arial,sans-serif;
  font-size:24px;
  font-weight:700;
  line-height:1.25;
}
#all-guides .topic-count{
  color:#6e685e;
  font-family:Karla,Arial,sans-serif;
  font-size:13px;
  font-weight:500;
  white-space:nowrap;
}
#all-guides .topic-header .back-to-top{
  flex:0 0 auto;
  margin:0 0 0 auto;
  color:var(--forest,#2f4a3c);
  font-size:13px;
  line-height:1.4;
  white-space:nowrap;
}
.guide-show-toggle{
  appearance:none;
  display:inline-block;
  margin:14px 0 0;
  padding:6px 14px;
  border:1.5px solid var(--ink,#1c1a17);
  border-radius:24px;
  background:#fff;
  color:var(--ink,#1c1a17);
  cursor:pointer;
  font:700 14px/1.35 Karla,Arial,sans-serif;
  text-decoration:none;
}
.guide-show-toggle:hover,
.guide-show-toggle:focus-visible{
  border-color:rgb(47,74,60);
  color:rgb(47,74,60);
}
.guide-show-toggle:focus-visible{
  outline:2px solid rgb(47,74,60);
  outline-offset:2px;
}
.guide-show-toggle[hidden]{display:none!important}
@media(max-width:700px){
  #all-guides .topic-header{gap:8px}
  #all-guides .topic-header h3{font-size:20px;gap:0 5px}
  #all-guides .topic-count{font-size:12px}
  #all-guides .topic-header .back-to-top{font-size:12px}
}
@media(max-width:599px){
  #all-guides .topic-count-separator{display:none}
  #all-guides .topic-count{flex-basis:100%}
}

/* Free Tools: one full-width row per tool, used on the Free Tools page and hub pages. */
.tool-list{display:grid;gap:16px;margin:0}
a.tool-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px 40px;padding:24px 28px;border:1px solid #d8d2c6;border-radius:10px;background:#fff;color:var(--ink,#1c1a17);text-decoration:none}
a.tool-row:hover,a.tool-row:focus-visible{border-color:rgb(47,74,60);background:#fbfcfa}
.tool-row .tool-row-title{display:block;font-family:'Sora',Arial,sans-serif;font-weight:700;font-size:clamp(19px,2vw,22px);line-height:1.3;margin:0 0 8px;color:var(--ink,#1c1a17)}
.tool-row .tool-row-text{display:block;margin:0;font-size:16px;line-height:1.6;color:#4a453d;max-width:62ch}
a.tool-row:hover .tool-row-title,a.tool-row:focus-visible .tool-row-title{text-decoration:underline;text-underline-offset:3px}


@media(max-width:700px){a.tool-row{grid-template-columns:1fr;padding:20px}}

/* Hub pages: free tool block, and a guide count and search link beside the guides heading (matches the Guides page topic headers). */
.hub-tool-block{margin:48px auto 0;padding-top:32px;border-top:1px solid #dedbd4}
.hub-tool-block h2{font-family:'Sora',Arial,sans-serif;font-size:clamp(24px,2.6vw,30px);line-height:1.2;margin:0 0 22px}
.hub-tool-block + .hub-guide-list{margin-top:40px}
.hub-list-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 22px}
.hub-guide-list .hub-list-head h2{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 7px;margin:0}
.hub-list-head .topic-count{color:#6e685e;font-family:Karla,Arial,sans-serif;font-size:14px;font-weight:500;white-space:nowrap}
.hub-list-head .hub-search-link{flex:0 0 auto;margin:0 0 0 auto;color:var(--forest,#2f4a3c);font-size:14px;font-weight:700;line-height:1.4;white-space:nowrap;text-decoration:underline;text-underline-offset:3px}
.hub-guide-list .guide-grid{max-width:none!important;margin:0!important}
@media(max-width:700px){.hub-list-head{flex-wrap:wrap;gap:8px}}
@media(max-width:599px){.hub-list-head{flex-wrap:nowrap;gap:12px}.hub-list-head .topic-count-separator{display:none}.hub-list-head .topic-count{flex-basis:100%;font-size:13px}.hub-list-head .hub-search-link{font-size:13px}}

/* Tool pages: line up with the Free Tools page column and the topic tabs. */
.article-page.tool-page{max-width:var(--mid,860px)}
.tool-page .articlehead,.tool-page article{margin-left:0;margin-right:auto}
@media(max-width:700px){.article-page.tool-page{padding-left:26px;padding-right:26px}}



/* Free Tools page and hub blocks: thumbnail on each tool row, and tool groups on the Free Tools page. */
a.tool-row.tool-row--thumb{grid-template-columns:300px minmax(0,1fr);align-items:start;gap:14px 32px}


.tool-row .tool-row-thumb{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;border-radius:6px;background:#eef2ea}
.tool-group{margin:0 0 40px}
.tool-group-head{font-family:'Sora',Arial,sans-serif;font-weight:700;font-size:clamp(20px,2.2vw,24px);line-height:1.25;margin:0 0 16px;color:var(--ink,#1c1a17)}
@media(max-width:860px){a.tool-row.tool-row--thumb{grid-template-columns:200px minmax(0,1fr);gap:12px 20px}}
@media(max-width:599px){a.tool-row.tool-row--thumb{grid-template-columns:1fr;gap:14px}a.tool-row.tool-row--thumb .tool-row-thumb{grid-row:auto}}
.hub-tool-block .hub-list-head h2{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 7px;margin:0}
@media(max-width:599px){.hub-list-head{flex-wrap:wrap;gap:6px 12px}.hub-list-head h2{flex:1 1 100%}.hub-list-head .hub-search-link{margin:0}}

/* Shared anchors, guide controls and the Apps & Software hub menu. */
body.hub-page [id]{scroll-margin-top:var(--hub-anchor-offset,128px)}
body.hub-page .toc-sidebar{top:var(--hub-anchor-offset,128px)}
body.hub-page .toc-sidebar .toc-divider{display:block;height:0;margin:10px 0 8px;border:0;border-top:1px solid #dedbd4}
.systems-outer{max-width:var(--maxw,1160px);margin:0 auto}
.systems-page-layout{display:grid;grid-template-columns:minmax(0,var(--content,740px)) minmax(0,1fr);gap:0 48px;align-items:start}
.systems-main{min-width:0}
.systems-page-layout .toc-sidebar{position:sticky;top:var(--hub-anchor-offset,128px);align-self:start;margin-top:0;padding:0 0 16px 20px;border-left:2px solid var(--line,#e6e1d6);font-size:14.5px;line-height:1.7}
.systems-page-layout .toc-sidebar .toc-label{display:block;font-family:'Sora',sans-serif;font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:#8a8172;margin-bottom:12px;padding:0}
.systems-page-layout .toc-sidebar a{display:block;padding:6px 0;text-decoration:none;color:#8a8172;font-weight:400;transition:color .15s,font-weight .1s}
.systems-page-layout .toc-sidebar a:hover,.systems-page-layout .toc-sidebar a.active{color:var(--forest,#2f4a3c)}
.systems-page-layout .toc-sidebar a.active{font-weight:700}
@media(max-width:1000px){.systems-page-layout{display:block}.systems-page-layout .toc-sidebar{display:none}}

/* Stacked check tables: label above value on phones (Standard 4A) */
@media (max-width: 599px) {
  section.check-table table td { display: block; }
  section.check-table table td::before { display: block; margin-bottom: 4px; }
}
