/* Review update: shared navigation, directory filters and measurement helpers. */
.cf-shortcuts { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 24px; }
.cf-shortcuts a { display:flex; align-items:center; gap:10px; padding:7px 12px; border:1px solid var(--line); border-radius:8px; background:var(--paper); font-size:12px; font-weight:600; }
.cf-shortcuts a span { color:var(--green); background:var(--light); border-radius:4px; padding:0 6px; }
.cf-shortcuts a:hover,.cf-shortcuts a:focus-visible { border-color:var(--green); }
.cf-sidebar { margin:20px 0; }
.cf-sidebar-title { margin:0 14px 8px; font-size:10px; text-transform:uppercase; letter-spacing:.14em; color:var(--muted); }
.cf-sidebar details { border:0; padding:0; margin:3px 0; }
.cf-sidebar summary { display:flex; gap:8px; align-items:center; justify-content:space-between; padding:8px 14px; border-radius:7px; cursor:pointer; font-size:12px; font-weight:600; }
.cf-sidebar summary::after { content:'+'; position:static; margin-left:auto; color:var(--muted); }
.cf-sidebar details[open]>summary::after { content:'−'; }
.cf-sidebar summary span { margin-left:auto; font-size:10px; color:var(--muted); }
.cf-sidebar summary:hover { background:var(--light); }
.cf-sidebar .nav-link { padding:7px 14px; white-space:normal; font-size:12px; line-height:1.5; }
.cf-sidebar details .nav-link { margin-left:10px; }
.filters { flex-wrap:wrap; }
.directory-filter { padding:8px 12px; border:1px solid transparent; border-radius:7px; color:var(--muted); background:transparent; cursor:pointer; white-space:nowrap; font-size:12px; }
.directory-filter.selected { background:var(--paper); color:var(--green); border-color:var(--line); box-shadow:0 2px 5px #00000005; }
.directory-filter:hover,.directory-filter:focus-visible { color:var(--green); border-color:var(--line); }
.tool-tile[hidden] { display:none !important; }
.cf-diagram { margin:22px 0; padding:18px; border:1px solid var(--line); border-radius:12px; background:var(--paper); }
.cf-diagram svg { display:block; width:100%; max-width:420px; height:auto; margin:auto; color:var(--green); }
.cf-solid { fill:none; stroke:currentColor; stroke-width:2; stroke-linejoin:round; }
.cf-measure { fill:none; stroke:currentColor; stroke-width:1.5; stroke-dasharray:5 4; }
.cf-diagram text { fill:currentColor; font-size:13px; }
.cf-diagram figcaption { color:var(--muted); font-size:12px; line-height:1.6; }
.cf-share-note { margin-top:12px; color:#ffffffbc; font-size:11px; }
.cf-share-link { margin-top:16px; }
.cf-share-link[hidden] { display:none; }
.cf-share-link label { display:block; color:#fff; font-size:12px; margin-bottom:6px; }
.cf-share-link input { width:100%; min-width:0; background:var(--paper); color:var(--ink); padding:10px; border:1px solid var(--line); border-radius:7px; }
.cf-share-link small { display:block; color:#ffffffbc; font-size:11px; margin-top:6px; }
.result-actions { flex-wrap:wrap; }
.cf-feet-inches-toggle { margin-top:5px; padding:0; border:0; background:transparent; color:var(--green); cursor:pointer; font-size:11px; text-decoration:underline; text-underline-offset:3px; }
.cf-feet-inches { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; margin:8px 0 0; }
.cf-feet-inches[hidden] { display:none; }
.cf-feet-inches label { display:block; font-size:11px; color:var(--muted); }
.cf-feet-inches input { min-width:0; width:100%; }
.cf-feet-inches-hint { grid-column:1/-1; color:var(--muted); font-size:10px; }
.cf-info-page { max-width:740px; padding:30px 0 60px; }
.cf-info-page h1 { font-size:clamp(28px,4vw,42px); line-height:1.2; }
.cf-info-page h2 { font-size:20px; margin:30px 0 10px; }
.cf-info-page a { color:var(--green); text-decoration:underline; }
@media (max-width:620px) {
 .filter-bar { display:block; }
 .filters { gap:4px; }
 #tool-count { display:block; margin-top:10px; }
 .cf-shortcuts { gap:6px; }
 .cf-shortcuts a { padding:7px 9px; font-size:11px; }
 .cf-diagram { padding:12px; }
 .cf-sidebar summary,.cf-sidebar .nav-link { min-height:40px; }
}
@media print { .cf-shortcuts,.cf-sidebar,.cf-feet-inches-toggle,.cf-share-note,#share-calculation { display:none !important; } }

/* The family belongs under Measurement > Cubic Feet, not above the categories. */
.cf-nav-parent { display:flex; align-items:center; gap:4px; }
.cf-nav-parent>.nav-link { flex:1; min-width:0; }
.cf-nav-toggle { flex:none; display:grid; place-items:center; width:32px; height:32px; padding:0; border:1px solid var(--line); border-radius:7px; background:var(--paper); color:var(--green); cursor:pointer; font-size:18px; line-height:1; }
.cf-nav-toggle:hover,.cf-nav-toggle:focus-visible { background:var(--light); border-color:var(--green); }
.cf-sidebar-panel { border-left:1px solid var(--line); margin:4px 0 10px 14px; padding-left:5px; }
.cf-sidebar-panel[hidden] { display:none !important; }
.cf-sidebar-panel .cf-sidebar { margin:0; }
.cf-sidebar-panel .cf-sidebar summary { font-size:11px; padding:7px 8px; }
.cf-sidebar-panel .cf-sidebar .nav-link { font-size:11px; padding:6px 8px; }
.cf-legacy-dimension { min-width:0; display:flex; flex-direction:column; align-items:stretch; margin-bottom:16px; }
.cf-legacy-dimension>.field { margin-bottom:0; }
.cf-legacy-dimension>.cf-feet-inches-toggle { align-self:flex-start; margin-top:7px; }

/* Keep breadcrumbs visible in their own row below the sticky topbar. */
:root { --cf-topbar-height:79px; --cf-topbar-offset:0px; --cf-breadcrumb-height:40px; }
.page>#main { display:flow-root; padding-top:20px; }
.page>#main>.breadcrumb { position:sticky; top:calc(var(--cf-topbar-offset) + var(--cf-topbar-height)); z-index:19; background:var(--bg); margin:0 0 24px; padding:10px 0; min-height:40px; align-items:center; border-bottom:1px solid var(--line); }
html { scroll-padding-top:calc(var(--cf-topbar-offset) + var(--cf-topbar-height) + var(--cf-breadcrumb-height) + 16px); }
@media(max-width:900px) { :root { --cf-topbar-height:65px; } }
@media(max-width:620px) { .page>#main { padding-top:12px; } .page>#main>.breadcrumb { padding:8px 0; margin-bottom:20px; } .cf-nav-toggle { width:38px; height:38px; } }
@media print { .cf-nav-toggle,.cf-sidebar-panel,.page>#main>.breadcrumb { display:none !important; } .page>#main { padding-top:0; } }

/* Size legacy volume fields by their available row width, including added items. */
body[data-tool="cubic-feet"] .calculator-input,
body[data-tool="cubic-feet"] .result-panel { min-width:0; }
body[data-tool="cubic-feet"] #volume-rows .field-grid.three {
    grid-template-columns:minmax(0,1fr);
    grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr));
    gap:0 16px;
}
body[data-tool="cubic-feet"] #volume-rows .quantity-unit {
    grid-template-columns:minmax(0,1fr) 75px;
}
body[data-tool="cubic-feet"] #volume-rows .quantity-unit input { min-width:0; }
@media(max-width:1150px) {
    body[data-tool="cubic-feet"] .calculator-card { grid-template-columns:minmax(0,1fr); }
}