/* R3 tools library (tools.html) and tool wrappers (tool-*.html).
   Author: actual claude-opus-5-5 (tools slice), 2026-10-03.
   Imported tool CSS is copied unchanged into assets/imported-tools/ and loaded after this file;
   rules inside .tl-island use :where() so the tools' own scoped styles always win. */
.page-tools,.page-tool{background:var(--paper,#eeede7);color:var(--ink,#101816)}
.tl-shell{max-width:1240px;margin:0 auto;padding-left:var(--gutter,24px);padding-right:var(--gutter,24px)}
.tl-eyebrow{font:600 12.5px/1.3 var(--body,'Inter Tight',sans-serif);letter-spacing:.12em;text-transform:uppercase;color:var(--muted,#515e56);margin:0 0 14px}

/* Library opening */
.tl-lib-head{padding-top:clamp(108px,11vw,150px);padding-bottom:20px}
.tl-lib-head h1{font:400 clamp(42px,6.2vw,86px)/.98 var(--display,'Newsreader',serif);letter-spacing:-.035em;margin:0;max-width:15ch}
.tl-lede{font:400 clamp(17px,1.45vw,20px)/1.5 var(--body,sans-serif);max-width:60ch;margin:18px 0 0}
.tl-boundary{max-width:66ch;margin:20px 0 0;padding:12px 16px;border-left:3px solid #1f6f78;background:rgba(255,255,255,.6);font:400 15px/1.5 var(--body,sans-serif)}
.tl-jump{margin:26px 0 0}
.tl-jump h2{font:600 13px/1.3 var(--body,sans-serif);letter-spacing:.08em;text-transform:uppercase;margin:0 0 10px;color:var(--muted,#515e56)}
.tl-jump ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.tl-jump a{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border:1px solid rgba(16,24,22,.28);border-radius:999px;background:#fff;color:inherit;font:500 15px/1.25 var(--body,sans-serif);text-decoration:none}
.tl-jump a:hover{border-color:var(--ink,#101816)}
.tl-jump a:focus-visible,.tl-tile:focus-visible,.tl-crumbs a:focus-visible,.tl-back:focus-visible{outline:3px solid var(--ink,#101816);outline-offset:3px}

/* Groups and tiles */
.tl-group{padding-top:36px;padding-bottom:12px;scroll-margin-top:96px}
.tl-group-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 24px;border-top:1px solid rgba(16,24,22,.18);padding-top:22px}
.tl-group-head h2{font:400 clamp(27px,3vw,38px)/1.1 var(--display,serif);letter-spacing:-.02em;margin:0}
.tl-group-head p{margin:0;font:400 15px/1.45 var(--body,sans-serif);color:var(--muted,#515e56);max-width:52ch}
.tl-grid{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(min(100%,272px),1fr))}
.tl-grid>li{min-width:0}
.tl-tile{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid rgba(16,24,22,.16);border-radius:14px;overflow:hidden;color:inherit;text-decoration:none}
.tl-tile:hover{border-color:rgba(16,24,22,.5)}
.tl-thumb{display:block;aspect-ratio:16/9;background:#dfe9e8;border-bottom:1px solid rgba(16,24,22,.1)}
.tl-thumb svg{display:block;width:100%;height:100%}
.tl-tile-body{display:flex;flex-direction:column;gap:6px;flex:1;padding:16px 18px 18px}
.tl-kind{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font:600 11.5px/1.2 var(--body,sans-serif);letter-spacing:.1em;text-transform:uppercase;color:var(--muted,#515e56)}
.tl-badge{font-weight:600;letter-spacing:.06em;padding:3px 8px;border-radius:999px;background:var(--ink,#101816);color:#fff}
.tl-tile h3{font:500 clamp(20px,1.7vw,23px)/1.2 var(--display,serif);letter-spacing:-.01em;margin:2px 0 0}
.tl-use{margin:0;font:400 15px/1.45 var(--body,sans-serif);color:#2c3832}
.tl-go{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:10px;font:600 14px/1 var(--body,sans-serif);letter-spacing:.02em}
.tl-go svg,.tl-back svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(prefers-reduced-motion:no-preference){.tl-go svg{transition:transform .2s ease}.tl-tile:hover .tl-go svg{transform:translateX(3px)}}

/* Native SVG thumbnails (code-drawn; no image files) */
.tl-thumb .ln{fill:none;stroke:#101816;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tl-thumb .wt{fill:none;stroke:#1f6f78;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.tl-thumb .wf{fill:#1f6f78;fill-opacity:.28}
.tl-thumb .gd{fill:#d8cdb1}
.tl-thumb .pv{fill:#b9bdb8}
.tl-thumb .gs{fill:none;stroke:#4f7a3e;stroke-width:2;stroke-linecap:round}
.tl-thumb .gf{fill:#9fbf8a}
.tl-thumb .ac{fill:none;stroke:#b4542a;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.tl-thumb .st{fill:#8e8a80}
.tl-thumb .dash{stroke-dasharray:5 4}

/* Closing note */
.tl-close{margin-top:36px;margin-bottom:64px}
.tl-close-box{display:grid;gap:12px;padding:clamp(22px,3vw,36px);background:#fff;border:1px solid rgba(16,24,22,.16);border-radius:14px}
.tl-close h2,.tl-next h2{font:400 clamp(26px,2.8vw,36px)/1.1 var(--display,serif);letter-spacing:-.02em;margin:0}
.tl-close p,.tl-next p{margin:0;max-width:62ch;font:400 16px/1.5 var(--body,sans-serif)}
.tl-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:6px}

/* Tool wrapper */
.tl-head{padding-top:clamp(104px,10vw,140px);padding-bottom:18px}
.tl-crumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:0 0 10px;padding:0;font:500 14px/1.4 var(--body,sans-serif)}
.tl-crumbs li+li::before{content:"/";margin-right:8px;color:var(--muted,#515e56)}
.tl-crumbs a{display:inline-block;padding:10px 0;color:inherit;text-underline-offset:3px}
.tl-crumbs [aria-current]{color:var(--muted,#515e56)}
.tl-head h1{font:400 clamp(34px,4.8vw,64px)/1.03 var(--display,serif);letter-spacing:-.03em;margin:0;max-width:22ch}
.tl-what{font:400 clamp(17px,1.4vw,19px)/1.5 var(--body,sans-serif);max-width:64ch;margin:14px 0 0}
.tl-limit{max-width:64ch;margin:14px 0 0;padding:10px 14px;border-left:3px solid #1f6f78;background:rgba(255,255,255,.6);font:400 15px/1.45 var(--body,sans-serif)}
.tl-island{max-width:1240px;margin:0 auto;padding:12px var(--gutter,24px) 40px;min-width:0;
  /* Fallbacks only, for tool colour variables the old Layout may have supplied. Tool-defined values win. */
  --ex-ink:#101816;--ex-chalk:#f4f3ee;--ex-teal:#1f6f78;--fe-ink:#101816;--fe-line:rgba(16,24,22,.22);--fe-orange:#b4542a;--fe-teal:#1f6f78;
  --pr-ink:#101816;--pr-line:rgba(16,24,22,.22);--pr-teal:#1f6f78;--rr-ink:#101816;--rr-line:rgba(16,24,22,.22);--rr-teal:#1f6f78}
.tl-island :where(*,*::before,*::after){box-sizing:border-box}
.tl-island :where(input,select,button,textarea){font:inherit;color:inherit}
.tl-island :where(svg){max-width:100%}
.tl-island :where(table){display:block;max-width:100%;overflow-x:auto}
.tl-island :where(h2){font-family:var(--display,serif);font-weight:400;line-height:1.1}
.tl-island :where(.sr-only,.visually-hidden){position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.tl-island [hidden]{display:none!important}
.tl-pending{padding:20px;border:1px dashed rgba(16,24,22,.4);border-radius:10px;background:#fff;font:400 15px/1.5 var(--body,sans-serif)}
.tl-cta{display:inline-flex;align-items:center;min-height:44px;padding:10px 0;border:0;border-bottom:1px solid currentColor;background:none;color:inherit;font:600 14px/1.4 var(--body,sans-serif);letter-spacing:.03em;cursor:pointer}
.tl-next{margin-bottom:64px}
.tl-next-box{display:grid;gap:12px;padding:clamp(22px,3vw,34px);background:#fff;border:1px solid rgba(16,24,22,.16);border-radius:14px}
.tl-back{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:inherit;font:600 14px/1.4 var(--body,sans-serif);text-underline-offset:3px}
.tl-back svg{transform:scaleX(-1)}

@media(max-width:600px){
  .tl-shell,.tl-island{padding-left:max(16px,var(--margin,20px));padding-right:max(16px,var(--margin,20px))}
  .tl-lib-head h1{font-size:clamp(38px,11vw,52px)}
  .tl-head h1{font-size:clamp(30px,8.6vw,42px)}
  .tl-jump a{font-size:14px;padding:8px 14px}
  .tl-group{padding-top:28px}
}