/* Converter layout for tool pages (modelled on javascriptconverter.com/convert): title and one intro paragraph, then the
   tool at once as Input / Output panes with their actions in the pane headers, an options row with the main action on
   the right, and the explanations below. Uses the site-wide tokens (Google Sans, #1f1f1f ink, #0b57d0 accent). */
#rs-main.cv-page{--cv-ink:#1f1f1f;--cv-muted:#444746;--cv-line:#c4c7c5;--cv-soft:#f0f4f9;--cv-accent:#0b57d0;--cv-input:#8a6100;
  box-sizing:border-box;width:100%;max-width:1280px!important;margin:0 auto!important;padding:24px clamp(16px,2.5vw,32px) 56px!important;color:var(--cv-ink);font-family:"Google Sans","Segoe UI",Roboto,system-ui,-apple-system,sans-serif}
#rs-main:is(.cv-page,.tf-page) .rs-tool-trail{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 18px;font-size:14px;color:var(--cv-muted)}
#rs-main:is(.cv-page,.tf-page) .rs-tool-trail .rs-trail-home{display:inline-flex;align-items:center;padding:5px 12px;border:1px solid #dadce0;border-radius:999px;background:var(--cv-soft);color:var(--cv-accent);text-decoration:none;font-size:13px}
#rs-main .cv-intro{margin:0 0 24px;max-width:900px}
#rs-main .cv-intro h1{font-size:clamp(28px,3vw,36px)!important;font-weight:700!important;line-height:1.2!important;letter-spacing:-.3px;margin:0 0 12px!important;color:#1f1f1f!important}
#rs-main .cv-intro p{margin:0;font-size:16px!important;line-height:1.65;color:#444746!important;max-width:900px}
#rs-main.tf-page .cv-intro{margin:0 0 24px}
#rs-main .cv-editors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
#rs-main .cv-editors.cv-single{grid-template-columns:1fr}
#rs-main .cv-options+.cv-editors{margin-top:12px}
#rs-main .cv-pane{display:flex;flex-direction:column;background:#fff;border:1px solid var(--cv-line);border-radius:12px;overflow:hidden;min-width:0}
#rs-main .cv-pane-head{display:flex;align-items:center;gap:8px;min-height:52px;padding:10px 16px;background:rgba(240,244,249,.6);border-bottom:1px solid var(--cv-line)}
#rs-main .cv-pane-head .cv-title{margin-right:auto;font-size:14px;font-weight:500;color:var(--cv-input)}
#rs-main .cv-pane.cv-out .cv-title{color:var(--cv-accent)}
#rs-main .cv-pane-head button,#rs-main .cv-pane-head .cv-file{display:inline-flex;align-items:center;gap:6px;font-weight:400;font-size:14px;line-height:1.4;font-family:inherit;color:var(--cv-muted);
  background:transparent!important;border:1px solid var(--cv-line)!important;border-radius:4px!important;padding:4px 12px!important;min-height:0!important;box-shadow:none!important;cursor:pointer;white-space:nowrap}
#rs-main .cv-pane-head button:hover:not(:disabled),#rs-main .cv-pane-head .cv-file:hover{color:var(--cv-ink);background:#fff}
#rs-main .cv-pane-head button:disabled{opacity:.45;cursor:default}
#rs-main .cv-pane-head .cv-file input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
#rs-main .cv-pane-head .cv-file:focus-within{outline:2px solid var(--cv-accent);outline-offset:2px}
#rs-main .cv-pane textarea,#rs-main .cv-pane .cv-output{flex:1;width:100%;min-height:432px;margin:0;padding:16px;border:0!important;border-radius:0!important;background:transparent!important;
  box-shadow:none!important;resize:vertical;color:var(--cv-ink)!important;font:14px/1.6 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace!important}
#rs-main .cv-pane textarea:focus{outline:2px solid var(--cv-accent);outline-offset:-2px}
#rs-main .cv-pane div.cv-output,#rs-main .cv-pane pre.cv-output{max-height:640px;overflow:auto;font-family:inherit!important}
#rs-main .cv-editors{align-items:start}
#rs-main .cv-editors>.cv-pane{height:100%}
#rs-main .cv-pane textarea[readonly]{background:transparent!important}
#rs-main .cv-options{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:20px 0 8px}
#rs-main .cv-options label{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--cv-muted);margin:0}
#rs-main .cv-options select,#rs-main .cv-options input:not([type=checkbox]):not([type=radio]){font-size:14px;line-height:1.4;font-family:inherit;color:var(--cv-ink);background:var(--cv-soft)!important;
  border:1px solid var(--cv-line)!important;border-radius:4px!important;padding:8px 12px!important;min-height:38px;width:auto;max-width:220px}
#rs-main .cv-options .cv-secondary{font-weight:500;font-size:14px;line-height:1.4;font-family:inherit;color:var(--cv-ink);background:#fff;border:1px solid var(--cv-line);border-radius:8px;padding:9px 16px;cursor:pointer}
#rs-main .cv-options .cv-secondary:hover{background:var(--cv-soft)}
#rs-main .cv-options .cv-spacer{flex:1}
#rs-main .cv-options kbd{font:12px ui-monospace,Consolas,monospace;color:#5f6368;background:var(--cv-soft);border:1px solid var(--cv-line);border-radius:4px;padding:2px 6px}
#rs-main .cv-options .cv-hint{font-size:13px;color:#5f6368;display:inline-flex;align-items:center;gap:4px}
#rs-main .cv-options .cv-primary{font-weight:500;font-size:16px;line-height:1.4;font-family:inherit;color:#fff!important;background:var(--cv-accent)!important;border:0!important;border-radius:8px!important;
  padding:10px 32px!important;cursor:pointer;min-height:44px}
#rs-main .cv-options .cv-primary:hover{background:#0842a0!important}
#rs-main .cv-options .cv-primary{margin-left:auto}
/* The explanations and links below the tool keep some distance from it. */
#rs-main.cv-page>:where(section,div,article,aside,nav):not(.cv-intro,.cv-editors,.cv-options,.rs-tool-trail,.cv-retired){margin-top:40px}
#rs-main .cv-status{min-height:22px;margin:4px 0 0;font-size:14px;color:var(--cv-muted)}
#rs-main .cv-note{font-size:13px;color:#5f6368;margin:6px 0 0}
#rs-main .cv-info{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;margin:48px 0 8px}
#rs-main .cv-info h2{font-size:24px;font-weight:700;line-height:1.3;margin:0 0 12px;color:var(--cv-ink)}
#rs-main .cv-info p{font-size:16px;line-height:1.7;color:var(--cv-muted);margin:0 0 12px}
#rs-main.cv-page :focus-visible{outline:2px solid var(--cv-accent);outline-offset:2px}
@media (max-width:900px){#rs-main .cv-editors,#rs-main .cv-info{grid-template-columns:1fr}#rs-main .cv-pane textarea,#rs-main .cv-pane .cv-output{min-height:260px}#rs-main .cv-options .cv-spacer,#rs-main .cv-options .cv-hint{display:none}
  #rs-main .cv-options .cv-primary{width:100%}#rs-main .cv-options label{flex-wrap:wrap;max-width:100%}#rs-main .cv-options select,#rs-main .cv-options input:not([type=checkbox]):not([type=radio]){max-width:100%;min-width:0;width:100%}}
@media print{#rs-main .cv-options,#rs-main .cv-pane-head button,#rs-main .cv-pane-head .cv-file{display:none}}
/* Pages designed dark (body.studio-dark: image generator, companions): the rebuilt intro, the breadcrumb and the eyebrows
   use light colours there. site-chrome.css sets every eyebrow to #0b57d0, which is 1.9:1 on these backgrounds. */
body.studio-dark #rs-main .cv-intro h1{color:#f3f6fc!important}
body.studio-dark #rs-main .cv-intro p{color:#c5d0e6!important}
body.studio-dark #rs-main .rs-tool-trail{color:#c5d0e6}
body.studio-dark #rs-main .rs-tool-trail .rs-trail-home{background:#1b2a44;border-color:#35465d;color:#a8c7fa}
body.studio-dark #rs-main :is([class*="eyebrow"],[class*="kicker"]){color:var(--amber,#a8c7fa)!important}