/* kamran.uk: parts used by the larger tools (seller calculator, PDF organiser, image studio, CSV studio).
   Built only from the site's own colours, type and spacing, so the new tools look like the old ones. */
.tool-dialog.studio-wide{width:min(1120px,calc(100% - 34px))}
.studio-loading{font-size:12px;color:var(--muted);padding:26px 0}
.steps{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px;padding:0}
.steps li{display:flex;align-items:center;gap:8px;font-size:10px;font-weight:600;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:6px 11px 6px 7px;background:var(--surface)}
.steps .step-n{width:19px;height:19px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--surface-alt);font-size:9px}
.steps .step-n svg{width:11px;height:11px}
.steps li.current{color:var(--ink);border-color:var(--muted)}
.steps li.current .step-n{background:var(--lime);color:#29372b}
.steps li.done .step-n{background:var(--surface-alt);color:var(--ink)}
.studio-form{display:flex;flex-direction:column;gap:14px}
.studio-group{border:1px solid var(--line);border-radius:11px;padding:18px;margin:0;min-width:0}
.studio-group legend{font-size:9px;letter-spacing:1.5px;font-weight:650;color:var(--muted);text-transform:uppercase;padding:0 7px}
.studio-group .tool-form{margin-top:4px}
.field .row-list,.row-list{display:flex;flex-direction:column;gap:8px}
.row-item{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) auto;gap:8px;align-items:center}
.row-item input{border:1px solid var(--line);background:var(--bg);border-radius:7px;padding:10px 12px;color:var(--ink);min-height:44px;font-size:13px;width:100%}
.button.studio-small{min-height:38px;padding:8px 13px;font-size:11px;gap:7px;align-self:flex-start}
.button.studio-small svg,.button svg{width:15px;height:15px}
.metric-hint{display:block;font-size:10px;color:var(--muted);margin-top:4px;line-height:1.5}
.data-table{width:100%;border-collapse:collapse;margin-top:22px;font-size:12px}
.data-table caption{text-align:left;font-size:9px;letter-spacing:1.5px;font-weight:650;color:var(--muted);text-transform:uppercase;padding-bottom:8px}
.data-table th,.data-table td{text-align:left;padding:9px 8px;border-bottom:1px solid var(--line);font-weight:400;vertical-align:top}
.data-table thead th{font-size:10px;color:var(--muted);font-weight:600}
.data-table .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.data-table tr.in th,.data-table tr.in td{color:var(--ink);font-weight:600}
.data-table tr.total th,.data-table tr.total td{font-weight:650;border-bottom:0;border-top:2px solid var(--ink)}
.yes,.no{display:inline-flex;align-items:center;gap:5px;font-weight:600}
.yes svg,.no svg{width:14px;height:14px}
.yes{color:var(--money-ink)}
.no{color:var(--accent)}
:root[data-theme="dark"] .yes{color:var(--lime)}
.preset-box{margin-top:16px;border-top:1px solid var(--line);padding-top:12px}
.preset-box summary{cursor:pointer;display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;list-style:none;min-height:36px}
.preset-box summary::-webkit-details-marker{display:none}
.preset-box summary svg{width:15px;height:15px;color:var(--accent)}
.preset-inner{padding-top:8px}
.preset-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.preset-row select,.preset-row input{flex:1 1 200px;border:1px solid var(--line);background:var(--bg);border-radius:7px;padding:10px 12px;color:var(--ink);min-height:44px;font-size:13px;min-width:0}
.studio-drop.dragging{border-color:var(--focus);background:var(--surface)}
@media(max-width:570px){.studio-group{padding:14px}.row-item{grid-template-columns:minmax(0,1fr) 92px auto}.data-table{font-size:11px}.data-table th,.data-table td{padding:8px 5px}.preset-row select,.preset-row input{font-size:16px}.row-item input{font-size:16px}}
/* CSV studio */
.studio-h{font-size:15px;font-weight:650;margin:4px 0 14px}
.studio-details{margin-top:14px}
.studio-details>summary{cursor:pointer;font-size:12px;font-weight:600;min-height:36px;display:flex;align-items:center}
.studio-details[open]>summary{margin-bottom:10px}
.cs-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding:12px 0;border-bottom:1px solid var(--line)}
.cs-source{flex:1 1 220px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:13px;overflow-wrap:anywhere}
.cs-inline{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:570}
.cs-inline select{border:1px solid var(--line);background:var(--bg);border-radius:7px;padding:8px 10px;color:var(--ink);min-height:38px;font-size:12px}
.cs-check{display:flex;align-items:center;gap:8px;font-size:12px;margin:8px 0;min-height:32px;cursor:pointer}
.cs-check input,.cs-cols input{width:18px;height:18px;accent-color:var(--focus);flex-shrink:0}
.cs-warning{display:flex;gap:9px;align-items:flex-start;font-size:12px;line-height:1.7;background:var(--surface-alt);border:1px solid var(--line);border-radius:7px;padding:10px 12px;margin:10px 0 0}
.cs-warning svg{width:16px;height:16px;flex-shrink:0;margin-top:3px;color:var(--accent)}
.cs-panels{margin-top:14px;border:1px solid var(--line);border-radius:11px;padding:6px 16px 16px}
.cs-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:0 -16px 14px;padding:0 10px;overflow-x:auto}
.cs-tabs button{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--muted);padding:12px 12px 10px;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;min-height:44px}
.cs-tabs button svg{width:15px;height:15px}
.cs-tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}
.cs-form{grid-template-columns:repeat(3,minmax(0,1fr))}
.cs-cols{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 10px}
.cs-cols label{display:flex;align-items:center;gap:7px;font-size:12px;border:1px solid var(--line);border-radius:6px;padding:6px 10px;background:var(--surface);cursor:pointer;min-height:36px;max-width:100%;overflow-wrap:anywhere}
.cs-opform{margin:12px 0 4px}
.cs-opform .tool-form{margin:8px 0}
.cs-preview-count{font-size:13px;line-height:1.7}
.cs-samples{margin:10px 0 0 18px;font-size:12px;line-height:1.8;overflow-wrap:anywhere}
.cs-history{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin:16px 0 8px;font-size:12px;color:var(--muted)}
.cs-history-buttons{display:flex;gap:8px;flex-wrap:wrap}
.cs-grid{height:420px;overflow:auto;border:1px solid var(--line);border-radius:9px;background:var(--surface)}
.cs-table{border-collapse:separate;border-spacing:0;font-size:12px;min-width:100%}
.cs-table th,.cs-table td{height:34px;max-width:260px;min-width:110px;padding:0 10px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);white-space:pre;overflow:hidden;text-overflow:ellipsis;text-align:left;font-weight:400}
.cs-table thead th{position:sticky;top:0;background:var(--surface-alt);z-index:2;font-weight:650;padding:0}
.cs-table thead th button{width:100%;height:100%;text-align:left;padding:0 10px;font-weight:650;font-size:12px;min-height:34px;white-space:pre;overflow:hidden;text-overflow:ellipsis}
.cs-table .cs-rownum{position:sticky;left:0;background:var(--surface-alt);color:var(--muted);min-width:52px;width:52px;font-size:10px;z-index:1;text-align:right}
.cs-table thead .cs-rownum{z-index:3;padding:0 10px}
.cs-table td.cs-blank{background:repeating-linear-gradient(135deg,transparent 0 6px,var(--surface-alt) 6px 8px)}
.cs-table .cs-spacer td{padding:0;border:0;height:auto}
.cs-none{color:var(--muted);text-align:center!important}
.cs-log{margin:10px 0 0 18px;font-size:11px;color:var(--muted);line-height:1.8}
@media(max-width:900px){.cs-form{grid-template-columns:1fr 1fr}}
@media(max-width:570px){.cs-form{grid-template-columns:1fr}.cs-grid{height:360px}.cs-table th,.cs-table td{min-width:90px}.cs-panels{padding:4px 12px 12px}.cs-tabs{margin:0 -12px 12px}}
.cs-span{grid-column:1/-1}
.cs-tabs button{scroll-snap-align:start}@media(max-width:570px){.cs-tabs button{padding:12px 8px 10px;font-size:11px}}
/* PDF page organiser */
.po-files{margin-bottom:6px}
.po-file-name{flex:1;display:flex;flex-wrap:wrap;align-items:center;gap:7px;overflow-wrap:anywhere;font-size:13px}
.po-file-name svg{width:16px;height:16px;color:var(--muted)}
.po-toolbar{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.po-tool-group{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.po-pick{border:1px solid var(--line);background:var(--bg);border-radius:7px;padding:8px 10px;color:var(--ink);min-height:38px;font-size:12px;width:150px}
.po-add{cursor:pointer;position:relative}
[data-sel="right"] svg,.po-cw svg{transform:scaleX(-1)}
.po-hint{margin:10px 0}
.po-grid{list-style:none;padding:0;margin:0 0 18px;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.po-page{border:1px solid var(--line);border-radius:10px;padding:9px;background:var(--surface);display:flex;flex-direction:column;gap:6px;cursor:grab;min-width:0}
.po-page.selected{border-color:var(--focus);box-shadow:0 0 0 2px var(--focus) inset}
.po-page.dragging{opacity:.45}
.po-page.drop-before{box-shadow:-4px 0 0 var(--accent)}
.po-thumb{position:relative;aspect-ratio:1/1;background:var(--surface-alt);border-radius:7px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.po-img{width:88%;height:88%;display:flex;align-items:center;justify-content:center;transition:transform .2s}
.po-img img{max-width:100%;max-height:100%;object-fit:contain;box-shadow:0 2px 10px rgba(0,0,0,.18);background:#fff}
.po-wait{font-size:20px;font-weight:650;color:var(--muted)}
.po-bad{color:var(--accent)}
.po-num{position:absolute;bottom:6px;right:6px;font-size:9px;font-weight:650;background:#29372b;color:#f7fbed;border-radius:4px;padding:3px 6px}
.po-sel{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;cursor:pointer;min-height:28px}
.po-sel input{width:18px;height:18px;accent-color:var(--focus)}
.po-src{font-size:10px;color:var(--muted);overflow-wrap:anywhere;min-height:15px}
.po-acts{display:flex;justify-content:space-between;gap:2px}
.po-acts .icon-button{width:28px;height:32px}
.po-acts .icon-button svg{width:15px;height:15px}
.po-acts .icon-button:disabled{opacity:.3}
.po-numbers{margin-top:6px}

.po-export{margin-top:16px}
.po-export .field{max-width:420px}
@media(max-width:570px){.po-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.po-pick{width:120px;font-size:16px}.po-acts .icon-button{width:26px}}

/* Batch image studio */
.is-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.is-bar .studio-h{margin:0}
.is-bar-buttons{display:flex;gap:8px;flex-wrap:wrap}
.is-bar-buttons label.button{cursor:pointer;position:relative}
.is-bar-buttons label.button:focus-within{outline:2px solid var(--focus);outline-offset:2px}
.is-bar-buttons .is-disabled{opacity:.5;pointer-events:none}
.is-list{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:8px;max-height:min(520px,60vh);overflow:auto;border-radius:10px}
.is-list.dragging{outline:2px dashed var(--focus);outline-offset:-2px}
.is-item{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:12px;align-items:start;border:1px solid var(--line);border-radius:10px;padding:9px;background:var(--surface)}
.is-thumb{width:64px;height:64px;border-radius:7px;background:var(--surface-alt);display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--muted)}
.is-thumb img{max-width:100%;max-height:100%;object-fit:contain}
.is-thumb svg{width:22px;height:22px}
.is-info{display:flex;flex-direction:column;gap:3px;min-width:0;font-size:12px;line-height:1.55}
.is-name{font-size:13px;overflow-wrap:anywhere}
.is-line{color:var(--muted);overflow-wrap:anywhere}
.is-new{color:var(--ink);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.is-new svg{width:13px;height:13px;flex:none}
.is-note{font-size:11px}
.is-status{font-weight:600;display:flex;gap:6px;align-items:center}
.is-status svg{width:14px;height:14px;flex:none}
.is-good{color:var(--money-ink)}
.is-bad{color:var(--accent)}
.is-acts{display:flex;gap:2px}
.is-acts .icon-button{width:32px;height:32px}
.is-acts .icon-button:disabled{opacity:.35;cursor:default}
.is-progress{border:1px solid var(--line);border-radius:10px;padding:12px;margin:14px 0;background:var(--surface-alt)}
.is-progress-line{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12px;margin-bottom:8px}
.is-progress progress{width:100%;height:8px;accent-color:var(--focus)}
.is-compare{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.is-compare figure{margin:0;min-width:0}
.is-compare figcaption{font-size:11px;color:var(--muted);margin-bottom:6px;overflow-wrap:anywhere}
.is-frame{border:1px solid var(--line);border-radius:8px;background:var(--surface-alt);display:flex;align-items:center;justify-content:center;height:260px;overflow:hidden}
.is-frame img{max-width:100%;max-height:100%;object-fit:contain}
/* the checks show only through see-through parts of the new image, never around it */
.is-checker img{background-color:var(--surface);background-image:linear-gradient(45deg,var(--line) 25%,transparent 25%,transparent 75%,var(--line) 75%),linear-gradient(45deg,var(--line) 25%,transparent 25%,transparent 75%,var(--line) 75%);background-size:16px 16px;background-position:0 0,8px 8px}
.is-problems{font-size:12px;color:var(--accent);margin:10px 0 0;padding-left:18px}
.studio-group input[type="color"]{min-height:44px;padding:4px;width:100%;cursor:pointer}
@media(max-width:570px){.is-item{grid-template-columns:48px minmax(0,1fr)}.is-thumb{width:48px;height:48px}.is-acts{grid-column:1/-1;justify-content:flex-end}.is-compare{grid-template-columns:1fr}.is-frame{height:200px}.is-list{max-height:none}}

/* Shared across tools: the New badge, the next step in a workflow, problem reports, Saved in this browser */
.card-badge.card-badge-new{color:var(--money-ink);background:var(--money);border-color:transparent}
.tool-next{margin-top:22px;display:grid;gap:8px}
.next-step{display:flex;justify-content:space-between;align-items:center;gap:8px 14px;flex-wrap:wrap;border:1px solid var(--line);border-radius:10px;padding:10px 14px;background:var(--surface-alt);font-size:12px}
.next-label{font-weight:600}
.next-count{color:var(--muted);font-weight:400;margin-left:6px}
.next-link{display:inline-flex;align-items:center;gap:6px;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.next-link svg{width:14px;height:14px}
.next-done{color:var(--muted)}
.next-inline{margin-top:12px}
.tool-bottom-note .report-link{margin-left:auto;font-size:10px;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.report-panel{margin-top:12px}
.report-panel textarea{width:100%;font:12px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;padding:10px 12px;border-radius:8px;border:1px solid var(--line);background:var(--surface-alt);color:var(--ink);resize:vertical}
.ws-list{list-style:none;padding:0;margin:14px 0;display:grid;gap:6px}
.ws-item{display:flex;justify-content:space-between;align-items:center;gap:12px;border:1px solid var(--line);border-radius:9px;padding:9px 12px;font-size:13px}
.ws-item>span{display:flex;flex-direction:column;gap:2px;min-width:0}
.ws-size{font-size:11px;color:var(--muted)}
.ws-empty{color:var(--muted)}
.ws-message{font-size:13px;font-weight:600;margin:12px 0}
.ws-actions label.button{cursor:pointer}
.ws-actions label.button:focus-within{outline:2px solid var(--focus);outline-offset:2px}
.ws-preview{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-top:12px;font-size:13px;background:var(--surface-alt)}
.ws-preview ul{margin:6px 0 8px;padding-left:18px}

/* A tool's own page: the tool sits in the page, with what it does, its limits and related tools below */
.tool-page-main{padding-top:6px}
.crumbs{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:12px;color:var(--muted);margin:4px 0 16px}
.crumbs a{text-decoration:underline;text-underline-offset:3px;color:var(--ink)}
.tool-dialog.tool-inline{position:static;display:block;width:auto;max-width:none;max-height:none;margin:0 0 30px;box-shadow:none;animation:none;overflow:visible}
.tool-dialog.tool-inline.studio-wide{width:auto}
.tool-intro h1{font-size:31px;padding-right:62px}
.tool-intro h1:focus{outline:none}
.tool-page-moved{border:1px solid var(--line);border-radius:10px;padding:10px 14px;font-size:13px;background:var(--surface-alt);margin:0 0 14px}
.tool-page-moved a{text-decoration:underline;text-underline-offset:3px}
.tool-page-info{margin-bottom:34px}
.page-columns{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,340px);gap:34px;align-items:start}
.page-text section{margin-bottom:24px}
.page-text h2,.page-side h2,.all-tools h2{font-size:18px;margin:0 0 10px}
.page-text h3{font-size:14px;margin:14px 0 6px}
.page-text p{font-size:14px;line-height:1.75;margin:0 0 10px;max-width:72ch}
.page-text .text-link{display:inline;font-size:inherit;text-decoration:underline;text-underline-offset:3px}
.page-list{margin:0;padding-left:20px;font-size:14px;line-height:1.75}
.page-pre{white-space:pre-wrap;overflow-wrap:anywhere;font:12px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:var(--surface-alt);border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin:0;max-height:220px;overflow:auto}
.page-side{display:grid;gap:22px}
.page-flow{border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:var(--surface)}
.page-flow h2{font-size:15px}
.page-steps{margin:0;padding-left:20px;display:grid;gap:8px;font-size:13px}
.page-steps li{line-height:1.5}
.page-steps li>span:last-child{display:block;color:var(--muted);font-size:12px}
.page-steps a{text-decoration:underline;text-underline-offset:3px;font-weight:600}
.page-cards{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.page-cards-wide{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));margin-bottom:26px}
.page-link-card{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:10px;padding:12px;background:var(--surface);height:100%;transition:border-color .18s,transform .18s}
.page-link-card:hover{border-color:var(--muted)}
.page-link-card .tool-icon{width:34px;height:34px;border-radius:8px}
.page-link-card .tool-icon svg{width:18px;height:18px}
.page-link-card strong{display:block;font-size:13px}
.page-link-card small{display:block;color:var(--muted);font-size:12px;line-height:1.5;margin-top:2px}
.page-all a{font-size:13px;text-decoration:underline;text-underline-offset:3px}
.all-tools h1{font-size:34px;margin:6px 0 8px}
.all-tools>p{margin:0 0 26px}
@media(max-width:980px){.page-columns{grid-template-columns:1fr}}
@media(max-width:570px){.tool-intro h1{font-size:25px}.tool-dialog.tool-inline{padding:18px 16px;width:auto}.page-text p,.page-list{font-size:13px}}