/* mi-toolbox.page.css — restored verbatim from v62 ground-truth stylesheet, plus any post-v62 additions */

:root {
  --green:#274640; --green-dark:#1C3832; --green-light:#E8F0EE;
  --gold:#C9970C; --gold-dark:#A07A08; --gold-light:#FDF6E3;
  --white:#FFFFFF; --off-white:#F8F6F1;
  --gray-light:#EDEBE6; --gray-mid:#B8B4AC; --gray-dark:#6B6660;
  --success:#2D7A4F; --success-light:#EAF5EE;
  --danger:#C0392B; --danger-light:#FEF0EE;
  --blue:#3B5ECC; --blue-light:#EEF4FF;
  --text:#1A2E1E; --text-muted:#6B6660;
  --radius:10px; --font:'Nunito',sans-serif;
}
* { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html { scroll-behavior:smooth; }
body { font-family:var(--font); background:var(--off-white); color:var(--text); }

nav { background:var(--green); padding:0 1.5rem; height:64px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:100; }
.nav-brand img { height:40px; width:auto; display:block; }
.nav-back { color:rgba(255,255,255,0.8); font-size:13px; text-decoration:none; }
.nav-back:hover { color:white; }

.hero { background:linear-gradient(135deg, #1C3832 0%, #274640 60%, #2D6B58 100%); padding:2rem 1.5rem; text-align:center; }
.hero h1 { color:white; font-size:26px; font-weight:800; margin-bottom:0.5rem; }
.hero p { color:rgba(255,255,255,0.75); font-size:14px; max-width:580px; margin:0 auto 1.25rem; line-height:1.6; }
.hero-meta { display:flex; justify-content:center; gap:1rem; flex-wrap:wrap; }
.hero-pill { background:rgba(255,255,255,0.12); color:rgba(255,255,255,0.85); font-size:12px; font-weight:600; padding:0.3rem 0.85rem; border-radius:20px; border:1px solid rgba(255,255,255,0.2); }

main { max-width:800px; margin:0 auto; padding:1.5rem 1rem 3rem; }

.progress-bar-wrap { background:var(--white); border:1px solid var(--gray-light); border-radius:var(--radius); padding:1rem 1.25rem; margin-bottom:1.5rem; }
.progress-label { display:flex; justify-content:space-between; font-size:13px; font-weight:600; color:var(--green); margin-bottom:0.6rem; }
.progress-track { height:8px; background:var(--gray-light); border-radius:999px; overflow:hidden; }
.progress-fill { height:100%; background:var(--gold); border-radius:999px; transition:width 0.5s ease; }
.progress-sub { font-size:11px; color:var(--text-muted); margin-top:0.45rem; }

.section-header { margin:2rem 0 1rem; }
.section-header h2 { font-size:18px; font-weight:800; color:var(--green); margin-bottom:0.25rem; }
.section-header p { font-size:13px; color:var(--text-muted); line-height:1.5; }

.tool-card { background:var(--white); border:1px solid var(--gray-light); border-radius:12px; padding:1.25rem; margin-bottom:0.75rem; transition:box-shadow 0.15s; }
.tool-card:hover { box-shadow:0 2px 12px rgba(39,70,64,0.08); }
.tool-card.completed { border-color:#A8D5B8; background:var(--success-light); }
.tool-top { display:flex; align-items:flex-start; gap:1rem; }
.tool-checkbox { width:22px; height:22px; min-width:22px; border:2px solid var(--gray-mid); border-radius:6px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.15s; margin-top:2px; flex-shrink:0; background:white; touch-action:manipulation; }
.tool-checkbox.checked { background:var(--success); border-color:var(--success); }
.tool-checkbox.checked::after { content:'✓'; color:white; font-size:13px; font-weight:800; }
.tool-body { flex:1; min-width:0; }
.tool-title { font-size:14px; font-weight:700; color:var(--green); margin-bottom:0.3rem; line-height:1.4; }
.tool-card.completed .tool-title { color:var(--success); }
.tool-desc { font-size:13px; color:var(--text-muted); line-height:1.6; margin-bottom:0.6rem; }
.tool-example { background:var(--off-white); border-radius:8px; padding:0.7rem 0.875rem; font-size:12px; color:var(--green-dark); line-height:1.7; font-style:italic; border-left:3px solid var(--gold); }
.tool-card.completed .tool-example { background:rgba(255,255,255,0.6); }
.tool-tag { display:inline-block; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; padding:0.15rem 0.5rem; border-radius:20px; margin-bottom:0.5rem; }
.tag-questions { background:var(--blue-light); color:var(--blue); }
.tag-change-talk { background:var(--success-light); color:var(--success); }
.tag-resistance { background:var(--danger-light); color:var(--danger); }
.tag-rulers { background:var(--gold-light); color:var(--gold-dark); }
.tag-scripts { background:var(--green-light); color:var(--green); }
.tag-self { background:#F3F0FF; color:#6B3FA0; }

.filter-row { display:flex; gap:0.5rem; flex-wrap:wrap; margin-bottom:1.25rem; }
.filter-btn { font-size:12px; font-weight:600; padding:0.35rem 0.8rem; border-radius:20px; border:1.5px solid var(--gray-mid); background:white; color:var(--text-muted); cursor:pointer; font-family:var(--font); transition:all 0.15s; touch-action:manipulation; min-height:36px; }
.filter-btn.active { border-color:var(--green); background:var(--green); color:white; }

.summary-card { background:var(--green); color:white; border-radius:12px; padding:1.25rem 1.5rem; margin-bottom:1.5rem; display:none; }
.summary-card.show { display:block; }
.summary-card h3 { font-size:16px; font-weight:800; margin-bottom:0.4rem; }
.summary-card p { font-size:13px; opacity:0.8; line-height:1.6; }

.script-pair { margin-bottom:0.5rem; }
.script-label { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:0.07em; margin-bottom:0.2rem; }
.script-label.poor { color:var(--danger); }
.script-label.better { color:var(--gold-dark); }
.script-label.best { color:var(--success); }
.script-text { font-size:12px; line-height:1.6; font-style:italic; color:var(--green-dark); background:var(--off-white); border-radius:6px; padding:0.4rem 0.6rem; margin-bottom:0.5rem; }

.expandable-content { display:none; margin-top:0.75rem; border-top:1px solid var(--gray-light); padding-top:0.75rem; }
.expandable-content.open { display:block; }
.expand-btn { font-size:11px; font-weight:700; color:var(--blue); background:none; border:none; cursor:pointer; font-family:var(--font); padding:0; touch-action:manipulation; }

.reset-btn { background:transparent; border:1px solid var(--gray-mid); color:var(--text-muted); font-size:12px; font-family:var(--font); padding:0.4rem 0.9rem; border-radius:6px; cursor:pointer; margin-top:1rem; touch-action:manipulation; }
.reset-btn:hover { border-color:var(--danger); color:var(--danger); }
.empty-filter { text-align:center; padding:2rem; color:var(--text-muted); font-size:13px; display:none; }

/* === Global mobile/accessibility optimisation === */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{min-height:100svh;overflow-x:hidden;}
img{max-width:100%;height:auto;}
button,.btn,.btn-primary,.btn-secondary,.btn-nav,.btn-sm,.tab,a[role="button"]{min-height:44px;touch-action:manipulation;}
input,select,textarea{font-size:16px!important;max-width:100%;}
.table-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.table-scroll table{min-width:720px;}
@media (max-width:700px){
  body{font-size:16px;}
  main,.container,.wrap,.page{width:100%;max-width:100%;}
  nav{height:auto;min-height:56px;padding:0.65rem 0.85rem;gap:0.75rem;}
  .nav-brand img{height:34px!important;max-width:190px;object-fit:contain;}
  .nav-right{gap:0.5rem;}
  .nav-user{display:none!important;}
  .btn-nav{padding:0.55rem 0.75rem;font-size:13px;}
  .card,.stat-card,.module-card,.org-card,.profile-card{border-radius:14px;}
  .tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;}
  .tab{white-space:nowrap;flex:0 0 auto;scroll-snap-align:start;}
  .form-row-2,.form-row-3,.form-row-4,.profile-grid,.competency-grid{grid-template-columns:1fr!important;}
  .btn-row,.action-row,.transcript-actions{flex-direction:column!important;align-items:stretch!important;}
  .btn-row button,.action-row button,.transcript-actions button{width:100%;}
  h1{line-height:1.12;}
}
@media (max-width:420px){
  .card{padding:1rem!important;}
  .logo-wrap{margin-bottom:1rem!important;}
  .steps{font-size:11px;}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:0.01ms!important;}
}



/* ═══════════════════════════════════════════════
   DRAGONFLY MOBILE OPTIMISATION v8 — app/platform
   Targets learner, manager, admin, builder, module and demo pages.
   ═══════════════════════════════════════════════ */
html, body { max-width: 100%; overflow-x: hidden; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { min-height: 100svh; }
img, svg, video, canvas { max-width: 100%; height: auto; }
button, a, input, select, textarea { font-family: inherit; }
button, .btn-primary, .btn-secondary, .btn-nav, .btn-nav-ghost, .btn-sm, .tab, .lib-tab, .opt-btn, .continue-btn, .cert-btn, .btn-gold, .btn-outline { min-height: 44px; touch-action: manipulation; }
input, select, textarea { font-size: 16px !important; max-width: 100%; }
.table-scroll-wrap, .completed-table-wrap, .demo-table, .transcript-card { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll-wrap table, .completed-table-wrap table, .demo-table table, .transcript-card table, table.data-table { min-width: 680px; }

@media (max-width: 900px) {
  main, .page, .container, .builder-wrap { width: 100%; max-width: 100%; padding-left: 1rem; padding-right: 1rem; }
  .dashboard-grid, .journey-grid, .profile-grid, .learning-journey-grid, .demo-grid, .drill-grid, .tower-grid, .org-summary-main, .form-row-4, .form-row-3, .form-row-2, .assign-mode { grid-template-columns: 1fr !important; }
  .stats-row, .summary-stat-grid, .journey-stats-grid, .competency-grid, .attention-grid, .demo-compliance-grid, .manager-library-grid, .modules-grid, .module-stack, .locked-grid, .pathway-grid, .next-action-grid, .achievement-grid, .badge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .hero-inner, .hero > div:first-child, .panel-head, .panel-head-space, .transcript-actions, .level-card, .code-banner, .seat-status-card, .demo-module, .demo-card { flex-wrap: wrap; }
  .hero-org { width: 100%; margin-top: 1rem; }
  .library-controls, .list-toolbar, .rankings-toolbar { grid-template-columns: 1fr !important; }
  .list-toolbar .form-group, .library-search, .library-filter { min-width: 0; width: 100%; }
}

@media (max-width: 700px) {
  body { font-size: 16px; }
  nav { height: auto !important; min-height: 58px; padding: .65rem .85rem !important; gap: .6rem; align-items: center; }
  .nav-brand { min-width: 0; }
  .nav-brand img { max-width: 160px; height: auto !important; object-fit: contain; }
  .nav-right { margin-left: auto; gap: .45rem; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  .nav-user { display: none !important; }
  .btn-nav, .btn-nav-ghost { white-space: nowrap; padding: .55rem .7rem; font-size: 12px; flex: 0 0 auto; }
  main, .page, .container { padding: 1rem .9rem !important; }
  .page-title { font-size: 22px; margin-bottom: 1rem; }
  .hero, .next-action-panel, .attention-panel { border-radius: 18px !important; padding: 1rem !important; margin-bottom: 1rem !important; }
  .hero-greeting, .attention-title, .next-action-panel h2, .hero h1 { font-size: clamp(1.45rem, 7vw, 2rem) !important; line-height: 1.12; }
  .hero-sub, .attention-sub, .demo-mode-banner, .example-banner, .manager-example-banner { font-size: 14px; line-height: 1.5; }
  .tabs, .lib-tabs, .review-tabs, .stage-nav, .step-nav, .library-category-strip, .library-filters { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: .35rem; padding-bottom: .15rem; scroll-snap-type: x mandatory; }
  .tab, .lib-tab, .review-tab, .stage-btn, .step, .library-pill, .filter-chip { flex: 0 0 auto; white-space: nowrap; scroll-snap-align: start; }
  .stats-row, .summary-stat-grid, .journey-stats-grid, .competency-grid, .attention-grid, .demo-compliance-grid, .manager-library-grid, .modules-grid, .module-stack, .pathway-grid, .next-action-grid, .achievement-grid, .badge-grid { grid-template-columns: 1fr !important; gap: .85rem !important; }
  .module-card, .manager-module-card, .learning-badge-card, .profile-card, .card, .panel, .achievement-panel, .pathway-card, .stat-card, .summary-stat-card, .journey-stat-card, .competency-card, .demo-preview, .demo-mini-card, .upgrade-card { padding: 1rem !important; border-radius: 14px !important; }
  .module-card-top, .module-top, .mcc-top, .pathway-top, .demo-preview-head, .seat-status-card { flex-direction: column; align-items: flex-start !important; gap: .55rem !important; }
  .module-title, .mcc-title, .manager-module-card h3, .pathway-title { font-size: 16px !important; line-height: 1.25; }
  .module-desc, .manager-module-meta, .module-meta, .pathway-list { font-size: 13px; line-height: 1.5; }
  .module-footer, .module-actions, .manager-module-actions, .attention-actions, .result-actions, .btn-row, .editor-actions, .tower-actions, .org-actions, .demo-modal-head { display: flex; flex-direction: column !important; align-items: stretch !important; gap: .65rem !important; }
  .module-footer a, .module-footer button, .module-actions a, .module-actions button, .manager-module-actions a, .manager-module-actions button, .attention-actions button, .result-actions a, .result-actions button, .btn-row button, .btn-row a, .editor-actions button, .tower-actions button, .org-actions button { width: 100% !important; text-align: center; justify-content: center; }
  .badge, .module-badge, .demo-pill, .pathway-pill { white-space: normal; text-align: center; }
  .achievement-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .badge-tile { min-width: 0; padding: .75rem .55rem !important; }
  .badge-title { overflow-wrap: anywhere; }
  .heatmap-wrap, .heatmap, .hm-name { min-width: 0; }
  .hm-name { font-size: 12px; }
  .progress-mini, .progress-wrap, .hero-progress { width: 100%; }
  .demo-modal-backdrop { padding: 4rem .75rem .75rem !important; }
  .demo-modal { width: min(100%, 96vw); max-height: 88svh; overflow: auto; }
}

@media (max-width: 420px) {
  main, .page, .container { padding-left: .75rem !important; padding-right: .75rem !important; }
  .nav-brand img { max-width: 135px; }
  .btn-nav, .btn-nav-ghost { padding: .5rem .6rem; font-size: 11px; }
  .stat-num, .summary-stat-value, .journey-stat-value, .competency-score, .impact-score .num { font-size: 28px !important; }
  .achievement-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .badge-icon { font-size: 19px !important; }
  .badge-title { font-size: 10px !important; }
  .module-meta, .module-footer { flex-direction: column; gap: .35rem; align-items: flex-start; }
  .cpd-ring { width: 104px; height: 104px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Toolbox v2: favourites, usage-only progress, optional quick reference */
.tool-actions { display:flex; flex-direction:column; align-items:center; gap:0.45rem; flex-shrink:0; }
.tool-fav { width:28px; height:28px; border:1.5px solid var(--gray-mid); background:#fff; color:var(--gray-mid); border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:16px; line-height:1; transition:all .15s ease; touch-action:manipulation; }
.tool-fav:hover { border-color:var(--gold); color:var(--gold-dark); }
.tool-fav.favourited { border-color:var(--gold); background:var(--gold-light); color:var(--gold-dark); }
.tool-fav.favourited::before { content:'★'; }
.tool-fav::before { content:'☆'; }
.usage-stats { display:flex; justify-content:space-between; gap:1rem; margin-top:0.55rem; font-size:11px; color:var(--text-muted); flex-wrap:wrap; }
.quick-reference { margin-bottom:1.5rem; }
.quick-reference-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin:2rem 0 1rem; }
.quick-reference-head .section-header { margin:0; }
.reference-toggle { border:1.5px solid var(--gray-mid); background:white; color:var(--green); font-size:12px; font-weight:700; border-radius:999px; padding:.35rem .8rem; cursor:pointer; min-height:36px; white-space:nowrap; font-family:var(--font); }
.quick-reference-body.is-hidden { display:none; }
.dnav-reference-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:0.75rem; margin-bottom:1.5rem; }
.dnav-reference-card { border-radius:12px; padding:1rem; border:1.5px solid; background:white; }
.dnav-reference-card.discoverer { background:#EEF4FF; border-color:#3B5ECC; }
.dnav-reference-card.noticer { background:#EAF5EE; border-color:#2D7A4F; }
.dnav-reference-card.advisor { background:#FEF0EE; border-color:#C0392B; }
.dnav-reference-card.values { background:#FDF6E3; border-color:#C9970C; }
.dnav-reference-label { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; margin-bottom:.5rem; }
.dnav-reference-card.discoverer .dnav-reference-label { color:#3B5ECC; }
.dnav-reference-card.noticer .dnav-reference-label { color:#2D7A4F; }
.dnav-reference-card.advisor .dnav-reference-label { color:#C0392B; }
.dnav-reference-card.values .dnav-reference-label { color:#A07A08; }
.dnav-reference-text { font-size:12px; line-height:1.75; color:var(--text); }
@media(max-width:700px){
  .tool-top { gap:.75rem; }
  .tool-actions { gap:.35rem; }
  .tool-fav { width:30px; height:30px; font-size:17px; }
  .quick-reference-head { align-items:center; margin-top:1.25rem; }
  .dnav-reference-grid, .state-grid { grid-template-columns:1fr 1fr; gap:.65rem; }
}
@media(max-width:420px){
  .dnav-reference-grid, .state-grid { grid-template-columns:1fr; }
}


/* Toolbox v6: compact collapsible cards and mobile spacing fix */
.tool-card { padding:0 !important; overflow:hidden; border-radius:12px; }
.tool-card .tool-top { display:grid !important; grid-template-columns:58px minmax(0,1fr) auto; gap:.85rem; align-items:start; padding:1rem 1.1rem; }
.tool-actions { flex-direction:row !important; align-items:center !important; justify-content:flex-start !important; gap:.4rem !important; padding-top:.1rem; }
.tool-detail { display:none; padding:0 1.1rem 1rem 1.1rem; }
.tool-card.open .tool-detail { display:block; }
.tool-detail-inner { border-top:1px solid var(--gray-light); padding-top:.75rem; }
.tool-expand-card { border:1px solid var(--gray-light); background:var(--off-white); color:var(--green); font-size:11px; font-weight:900; border-radius:999px; padding:.32rem .62rem; min-height:32px; white-space:nowrap; cursor:pointer; font-family:var(--font); }
.tool-expand-card::after { content:' ▼'; font-size:9px; }
.tool-card.open .tool-expand-card::after { content:' ▲'; }
.tool-card.completed .tool-detail-inner { border-top-color:rgba(39,70,64,.12); }
@media(max-width:700px){
  .tool-card .tool-top { grid-template-columns:54px minmax(0,1fr) 50px; gap:.55rem; padding:.85rem .8rem; }
  .tool-actions { gap:.3rem !important; }
  .tool-checkbox { width:23px !important; height:23px !important; min-width:23px !important; }
  .tool-fav { width:27px !important; height:27px !important; min-width:27px !important; }
  .tool-desc { font-size:12.5px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:0 !important; }
  .tool-card.open .tool-desc { display:block; -webkit-line-clamp:unset; overflow:visible; margin-bottom:.6rem !important; }
  .tool-detail { padding:0 .8rem .85rem .8rem; }
  .tool-expand-card { font-size:10.5px; padding:.28rem .5rem; min-height:30px; }
}
@media(max-width:390px){
  .tool-card .tool-top { grid-template-columns:50px minmax(0,1fr) 44px; }
  .tool-actions { flex-direction:column !important; gap:.25rem !important; }
  .tool-expand-card { font-size:0; width:36px; height:30px; padding:0; }
  .tool-expand-card::after { content:'▼'; font-size:13px; }
  .tool-card.open .tool-expand-card::after { content:'▲'; font-size:13px; }
  .tool-desc { -webkit-line-clamp:1; }
}


/* === Toolbox v9: consistent toolbox UX across fixed toolboxes === */
.toolbox-instructions{background:#fff;border:1px solid var(--gray-light);border-radius:14px;padding:.9rem 1rem;margin:0 0 1rem;box-shadow:0 1px 7px rgba(39,70,64,.04);}
.toolbox-instructions h2{font-size:15px;color:var(--green);margin:0 0 .35rem;font-weight:900;}
.toolbox-instructions p{font-size:13px;line-height:1.55;color:var(--text-muted);margin:0;}
.toolbox-instructions strong{color:var(--green-dark);}
.status-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:#fff;border:1px solid var(--gray-light);border-radius:14px;padding:.28rem;gap:.25rem;box-shadow:0 1px 7px rgba(39,70,64,.04);margin-bottom:.75rem;}
.status-tab{border:0;background:transparent;color:var(--text-muted);font-size:12px;font-weight:900;border-radius:10px;padding:.62rem .4rem;cursor:pointer;min-height:42px;font-family:var(--font);}
.status-tab.active{background:var(--green);color:#fff;box-shadow:0 2px 8px rgba(39,70,64,.18);}
.category-filter-label{font-size:11px;color:var(--text-muted);font-weight:900;text-transform:uppercase;letter-spacing:.06em;margin:.65rem 0 .45rem;}
.category-pills{display:flex;gap:.45rem;flex-wrap:wrap;margin-bottom:1.25rem;overflow:visible;}
.category-pill{font-size:11.5px;font-weight:800;padding:.38rem .72rem;border-radius:999px;border:1.5px solid var(--gold);background:#fff;color:var(--gold-dark);cursor:pointer;min-height:34px;font-family:var(--font);}
.category-pill.active{background:var(--gold-light);border-color:var(--gold);color:var(--gold-dark);box-shadow:0 1px 6px rgba(201,151,12,.11);}
.filter-row{display:block !important;margin-bottom:1.25rem;}
.tool-fav{border:none !important;background:transparent !important;border-radius:0 !important;color:var(--gray-mid) !important;box-shadow:none !important;font-size:21px !important;width:32px !important;height:32px !important;min-width:32px !important;}
.tool-fav:hover{color:var(--gold-dark) !important;border:none !important;background:transparent !important;}
.tool-fav.favourited{color:var(--gold-dark) !important;background:transparent !important;border:none !important;}
.hero-pill{cursor:default;user-select:none;}
@media(max-width:650px){.status-tab{font-size:11px;padding:.55rem .2rem}.category-pills{gap:.38rem}.category-pill{font-size:10.7px;padding:.34rem .55rem;min-height:30px}.toolbox-instructions{padding:.85rem .9rem}.toolbox-instructions p{font-size:12.5px}}
@media(max-width:380px){.category-pill{font-size:10.2px;padding:.3rem .48rem}}


.toolbox-instructions-head{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-bottom:.35rem}
.toolbox-instructions-head h2{margin:0!important}
.toolbox-instructions-head button{border:1px solid var(--gray-light);background:var(--off-white);color:var(--text-muted);border-radius:999px;padding:.32rem .65rem;font-size:11px;font-weight:800;cursor:pointer;white-space:nowrap;font-family:var(--font)}
.toolbox-instructions-head button:hover{border-color:var(--gold);color:var(--gold-dark);background:var(--gold-light)}
@media(max-width:520px){.toolbox-instructions-head{align-items:flex-start}.toolbox-instructions-head button{font-size:10.5px;padding:.3rem .55rem}}



/* -- new since v62: demo paywall on locked tools -- */
.demo-tools-blur{position:relative;filter:blur(1px);opacity:.7;pointer-events:none;user-select:none}
.demo-paywall-banner{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap;background:var(--gold-light,#FDF6E3);border:1px solid rgba(201,151,12,.32);border-radius:14px;padding:.85rem 1.1rem;margin-top:.75rem;font-size:.86rem;color:var(--gold-dark,#A07A08);font-weight:800}
.demo-paywall-btns{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.6rem}
.demo-paywall-btn-primary{background:var(--gold,#C9970C);color:#fff;border:0;border-radius:var(--radius,10px);padding:.7rem 1.2rem;font-weight:700;font-family:var(--font);font-size:.85rem;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:.4rem;box-shadow:0 3px 10px rgba(201,151,12,.28);transition:transform .14s ease,box-shadow .14s ease,background-color .14s ease}
.demo-paywall-btn-primary:hover{background:var(--gold-dark,#A07A08);transform:translateY(-1px);box-shadow:0 6px 16px rgba(201,151,12,.32)}
.demo-paywall-btn-secondary{background:#fff;color:var(--green,#274640);border:1.5px solid var(--gray-light,#EDEBE6);border-radius:var(--radius,10px);padding:.7rem 1.2rem;font-weight:700;font-family:var(--font);font-size:.85rem;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:.4rem;box-shadow:0 1px 3px rgba(26,46,30,.06);transition:border-color .14s ease,background-color .14s ease}
.demo-paywall-btn-secondary:hover{border-color:var(--gold,#C9970C);background:var(--green-light,#E8F0EE)}