/*
  Shared styles for the two-pane "input → output" tools
  (YAML ⇄ JSON, JSON Schema generator). Depends on styles.css tokens.
*/

.convert-shell{border-top:1px solid var(--border);min-height:calc(100vh - 65px);display:flex;flex-direction:column;}

.convert-head{background:var(--panel);border-bottom:1px solid var(--border);padding:22px 0 18px;}
.convert-head .kicker{font-size:11px;font-weight:700;letter-spacing:0.09em;text-transform:uppercase;color:var(--blue);margin-bottom:6px;}
.convert-head h1{font-size:24px;line-height:1.25;letter-spacing:-0.02em;margin:0 0 6px;}
.convert-head p{margin:0;font-size:13.5px;color:var(--text-dim);max-width:70ch;line-height:1.6;}

/* option strip under the title */
.opt-bar{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin-top:16px;padding-top:16px;border-top:1px solid var(--border);}
.opt{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--text-dim);}
.opt label{font-size:11px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:var(--text-faint);}
.opt select{padding:6px 10px;font-size:12.5px;}
.opt input[type="checkbox"]{width:15px;height:15px;accent-color:var(--blue);cursor:pointer;margin:0;}
.opt input[type="text"]{padding:6px 10px;font-size:12.5px;min-width:160px;}
.opt-sep{width:1px;height:22px;background:var(--border);}

.convert-grid{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:0;min-height:540px;}
.convert-grid.three{grid-template-columns:1fr 1fr 1fr;}
@media(max-width:1150px){ .convert-grid.three{grid-template-columns:1fr 1fr;} .convert-grid.three .pane:last-child{grid-column:1 / -1;border-top:1px solid var(--border);} }
@media(max-width:900px){ .convert-grid, .convert-grid.three{grid-template-columns:1fr;} }

.pane{display:flex;flex-direction:column;min-width:0;background:var(--panel);border-right:1px solid var(--border);}
.pane:last-child{border-right:none;background:var(--panel-2);}
@media(max-width:900px){ .pane{border-right:none;border-bottom:1px solid var(--border);min-height:420px;} }

.pane-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 22px;border-bottom:1px solid var(--border);min-height:56px;}
.pane-title{font-size:11px;font-weight:700;letter-spacing:0.07em;text-transform:uppercase;color:var(--text-faint);margin-right:auto;display:flex;align-items:center;gap:8px;}
.pane-head button{padding:7px 12px;font-size:12.5px;}

.pane-body{flex:1;display:flex;flex-direction:column;padding:16px 22px;min-height:0;}
.code-area{flex:1;width:100%;resize:none;background:var(--panel-2);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text);font-family:'JetBrains Mono',monospace;font-size:12.5px;line-height:1.65;padding:14px;outline:none;min-height:360px;tab-size:2;white-space:pre;overflow:auto;}
.code-area:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-tint);}
.pane:last-child .code-area{background:var(--panel);}
.code-area[readonly]{color:var(--text-dim);}
.code-area.drop-active{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-tint);}

.pane-status{padding:0 22px 16px;font-family:'JetBrains Mono',monospace;font-size:11.5px;line-height:1.5;color:var(--text-faint);word-break:break-word;}
.pane-status.err{color:var(--bool);}
.pane-status.ok{color:var(--accent);}

/* direction pill used by the YAML page */
.dir-pill{display:inline-flex;border:1px solid var(--border-strong);border-radius:999px;overflow:hidden;background:var(--panel);}
.dir-pill button{border:none;border-radius:0;background:transparent;padding:7px 14px;font-size:12.5px;font-weight:600;color:var(--text-dim);}
.dir-pill button:hover{background:var(--panel-2);color:var(--blue);}
.dir-pill button.on{background:var(--blue);color:#fff;}
.dir-pill button.on:hover{background:var(--blue-dark);color:#fff;}

.note{font-size:11.5px;color:var(--text-faint);line-height:1.55;margin:10px 0 0;}
.note code, .convert-head code{font-family:'JetBrains Mono',monospace;font-size:0.92em;background:var(--panel-2);border:1px solid var(--border);border-radius:4px;padding:1px 4px;color:var(--text-dim);}

/* claim / result rows (JWT decoder, validator) */
.result-list{margin-top:12px;display:flex;flex-direction:column;gap:6px;}
.result-row{display:flex;gap:10px;align-items:baseline;font-size:12px;line-height:1.5;}
.result-row .k{font-family:'JetBrains Mono',monospace;color:var(--text-faint);min-width:90px;flex-shrink:0;}
.result-row .v{color:var(--text-dim);word-break:break-word;}
.pill{display:inline-block;font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--panel-2);color:var(--text-faint);border:1px solid var(--border);}
.pill.good{background:var(--accent-tint);color:var(--accent);border-color:transparent;}
.pill.bad{background:rgba(190,18,60,.10);color:var(--bool);border-color:transparent;}

/* ---------------- line-number gutter ---------------- */
.ca-wrap{position:relative;flex:1;display:flex;min-height:0;min-width:0;
  --gutter-w:2ch;}
.ca-wrap .code-area, .ca-wrap #editor{border-radius:0 var(--radius-md) var(--radius-md) 0;border-left:none;}
.ca-gutter{
  flex:0 0 auto;width:calc(var(--gutter-w) + 22px);margin:0;overflow:hidden;
  background:var(--panel-2);border:1px solid var(--border);border-right:none;
  border-radius:var(--radius-md) 0 0 var(--radius-md);
  font-family:'JetBrains Mono',monospace;font-size:12.5px;line-height:1.65;
  padding:14px 8px 14px 10px;text-align:right;color:var(--text-faint);
  user-select:none;cursor:pointer;white-space:pre;
}
.ca-gutter:hover{color:var(--text-dim);}
.pane:last-child .ca-gutter{background:var(--panel-2);}
.ca-wrap.no-gutter .ca-gutter{display:none;}
.ca-wrap.no-gutter .code-area{border-left:1px solid var(--border);border-radius:var(--radius-md);}

/* the line an error points at */
.ca-mark{position:absolute;left:0;right:0;pointer-events:none;z-index:1;
  background:rgba(190,18,60,.10);border-left:3px solid var(--bool);}
html[data-theme="dark"] .ca-mark{background:rgba(255,122,148,.12);}

/* presentation mode scales the type — the gutter has to follow */
body.presenting .ca-gutter{font-size:calc(12.5px * var(--present-scale, 1.35));padding:16px 8px 16px 10px;}
body.presenting.focus-mode .ca-gutter{display:none;}

/* ---------------- recent documents ---------------- */
.hist-menu{position:relative;display:inline-flex;}
.hist-menu > button{padding:7px 12px;font-size:12.5px;}
.hist-menu.has-items > button{color:var(--brand);border-color:rgba(109,74,255,.3);}
.hist-pop{position:absolute;top:calc(100% + 6px);left:0;z-index:40;min-width:290px;max-width:340px;
  background:var(--panel);border:1px solid var(--border-strong);border-radius:12px;
  box-shadow:0 18px 40px -14px rgba(20,14,50,.45);padding:6px;display:none;flex-direction:column;gap:1px;}
.hist-menu.open .hist-pop{display:flex;}
.hist-head{font-size:10.5px;font-weight:700;letter-spacing:0.07em;text-transform:uppercase;
  color:var(--text-faint);padding:8px 10px 5px;}
.hist-row{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;
  padding:8px 10px;border:none;background:transparent;border-radius:8px;text-align:left;cursor:pointer;}
.hist-row:hover{background:var(--brand-tint);border-color:transparent;}
.hist-prev{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.hist-row:hover .hist-prev{color:var(--brand);}
.hist-meta{font-size:10.5px;color:var(--text-faint);}
.hist-clear{width:100%;margin-top:4px;padding:8px 10px;border:none;border-top:1px solid var(--border);
  background:transparent;border-radius:0 0 8px 8px;font-size:12px;color:var(--text-faint);cursor:pointer;text-align:left;}
.hist-clear:hover{color:var(--bool);background:transparent;border-color:var(--border);}
.hist-empty{padding:12px 10px;font-size:12px;color:var(--text-faint);line-height:1.55;}

/* ---------------- share a link that carries the payload ---------------- */
.share-data{margin-top:12px;padding-top:12px;border-top:1px solid var(--border);}
.share-data .warn{font-size:11.5px;color:var(--text-faint);line-height:1.55;margin:8px 0 0;}
.share-data .warn strong{color:var(--bool);font-weight:600;}