/* ============================================================
   Jubelio Support Tools — panel-scoped presentation

   GENERATED by tools/port-jubelio.js from the dev's page
   (HTML_Jubelio.html). Do not hand-edit: re-run the script instead.

   Every selector below is scoped to .jbrPanel (the page stylesheet: the
   reconcile tool and the view headings) or .jbcPanel (the Excel to CSV
   tool). Both were written as whole pages, so their body / :root / * rules
   are folded onto the panel element — that keeps their CSS variables
   cascading to their own children and stops any of it reaching the rest of
   the app. The page's own sidebar/topbar rules are dropped.
   ============================================================ */

/* ---------- the page stylesheet (reconcile + headings) ---------- */
.jbrPanel{--sky:#8db1f0; --indigo:#5f55d6; --indigo-dp:#4c43bd;
  --grad:linear-gradient(118deg,#8db1f0 0%,#7183e4 46%,#5f55d6 100%);
  --grad-ink:linear-gradient(118deg,#5566d4 0%,#4b4bc4 45%,#40349f 100%);
  --grad-soft:linear-gradient(118deg,#eef4fe 0%,#eeeafc 100%);
  --navy:#40349f; --teal:#5a5ad4; --text:#1a2340; --muted:#616d8a;
  --line:#e3e8f3; --bg:#f6f8fd; --soft:#eef1fe;
  --ok:#1c8f6b; --amber:#b5811d; --red:#c0453a;
  --shadow:0 1px 2px rgba(38,50,96,.05);}
.jbrPanel,.jbrPanel *{box-sizing:border-box}
.jbrPanel{margin:0;background:var(--bg);color:var(--text);
  background-image:radial-gradient(1100px 520px at 18% -8%,#e9f0ff 0%,rgba(233,240,255,0) 62%),
                   radial-gradient(900px 460px at 100% 0%,#f0eafd 0%,rgba(240,234,253,0) 58%);
  background-attachment:fixed;
  font:14px/1.5 Archivo,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
.jbrPanel button,.jbrPanel input,.jbrPanel select{font:inherit}
.jbrPanel button{cursor:pointer}
.jbrPanel button:disabled{opacity:.55;cursor:not-allowed}
.jbrPanel button:focus-visible,.jbrPanel label:focus-within,.jbrPanel select:focus-visible{outline:2px solid var(--indigo);outline-offset:2px}
.jbrPanel [hidden]{display:none!important}
.jbrPanel .heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;gap:16px}
.jbrPanel h1{font-size:27px;letter-spacing:-.03em;line-height:1.2;margin:0 0 6px;font-weight:700}
.jbrPanel .sub{color:var(--muted);font-size:13.5px;margin:0}
.jbrPanel .kicker{font-size:10.5px;text-transform:uppercase;letter-spacing:.13em;color:var(--indigo);
  font-weight:700;margin-bottom:6px}
.jbrPanel .button{border:1px solid var(--line);background:#fff;color:var(--text);padding:10px 17px;
  border-radius:10px;font-weight:600;font-size:13px;transition:background .15s ease,border-color .15s ease,filter .15s ease}
.jbrPanel .button:hover:not(:disabled){background:var(--soft);border-color:#cdd5f7}
.jbrPanel .button.primary{background:var(--grad-ink);color:#fff;border-color:transparent;
  box-shadow:0 4px 14px rgba(64,52,159,.3)}
.jbrPanel .button.primary:hover:not(:disabled){filter:brightness(1.07);background:var(--grad-ink)}
.jbrPanel .button.danger{color:var(--red);border-color:#f0c7c1}
.jbrPanel .button.danger:hover:not(:disabled){background:#fbeae8;border-color:#e6aea6}
.jbrPanel .stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:20px}
.jbrPanel .stat{border:1px solid var(--line);border-radius:14px;background:#fff;padding:16px 18px;
  position:relative;overflow:hidden;box-shadow:var(--shadow)}
.jbrPanel .stat:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--grad)}
.jbrPanel .stat.good:before{background:linear-gradient(180deg,#59c9a5,#1c8f6b)}
.jbrPanel .stat.alert:before{background:linear-gradient(180deg,#f0bd5b,#b5811d)}
.jbrPanel .stat-label{font-size:12.5px;color:var(--muted)}
.jbrPanel .value{font-size:29px;letter-spacing:-.03em;font-weight:600;line-height:1.15;margin-top:6px;
  font-variant-numeric:tabular-nums}
.jbrPanel .stat small{color:var(--muted);font-size:11.5px}
.jbrPanel .stat.good .value{color:var(--ok)}
.jbrPanel .stat.alert .value{color:var(--amber)}
.jbrPanel .card{background:#fff;border:1px solid var(--line);border-radius:14px;margin-bottom:18px;
  overflow:hidden;box-shadow:var(--shadow)}
.jbrPanel .card-head{padding:16px 22px;display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--line);gap:16px}
.jbrPanel h2{font-size:15px;margin:0;font-weight:600;letter-spacing:-.005em}
.jbrPanel .step{font-size:10.5px;letter-spacing:.1em;color:var(--muted);font-weight:600}
.jbrPanel .upload-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;padding:22px}
.jbrPanel .upload-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px;
  font-size:12.5px;font-weight:600;gap:8px}
.jbrPanel .required{color:var(--indigo);background:var(--soft);padding:2px 8px;border-radius:6px;font-size:10.5px;font-weight:600}
.jbrPanel .optional{font-size:10.5px;color:var(--muted);font-weight:400}
.jbrPanel .drop{display:flex;align-items:center;flex-direction:column;justify-content:center;min-height:158px;
  border:1.5px dashed #c6cfe6;border-radius:12px;background:#fff;padding:19px 12px;cursor:pointer;
  text-align:center;position:relative;transition:border-color .16s ease,background .16s ease,box-shadow .16s ease}
.jbrPanel .drop:hover,.jbrPanel .drop.drag{background:var(--soft);border-color:var(--indigo);
  box-shadow:0 10px 28px -14px rgba(38,50,96,.3)}
.jbrPanel .drop.drag{border-style:solid}
.jbrPanel .drop.ready{border-style:solid;border-color:var(--ok);background:#e4f3ed}
.jbrPanel .drop input{position:absolute;width:1px;height:1px;opacity:0}
.jbrPanel .upload-icon{width:36px;height:36px;background:var(--grad-soft);border-radius:11px;color:var(--indigo);
  display:grid;place-items:center;margin-bottom:10px;font-size:19px}
.jbrPanel .drop.ready .upload-icon{background:#d7efe5;color:var(--ok)}
.jbrPanel .drop strong{font-size:12.5px;font-weight:600}
.jbrPanel .drop span{font-size:11.5px;color:var(--muted);margin-top:4px}
.jbrPanel .file-name{overflow-wrap:anywhere;color:var(--indigo)!important;max-width:100%;font-weight:500}
.jbrPanel .drop.ready .file-name{color:#14684e!important}
.jbrPanel .actions{padding:16px 22px;background:var(--grad-soft);border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:15px}
.jbrPanel .help{font-size:11.5px;color:var(--muted)}
.jbrPanel .action-buttons{display:flex;gap:9px}
.jbrPanel .status{margin:0 22px 20px;padding:12px 15px;background:var(--soft);border-radius:10px;font-size:12.5px;
  color:#465386;white-space:pre-line;border:1px solid var(--line)}
.jbrPanel .status.error{background:#fbeae8;color:#8f2f26;border-color:#f0c7c1}
.jbrPanel .status.success{background:#e4f3ed;color:#14684e;border-color:#b9e0d1}
.jbrPanel .status.warning{background:#fbf2e2;color:#8a6414;border-color:#f0dcb2}
.jbrPanel .progress{height:3px;background:#e3e8f3;overflow:hidden}
.jbrPanel .progress:after{content:"";display:block;width:35%;height:100%;background:var(--grad-ink);
  animation:loading 1.7s ease-in-out infinite}
@keyframes loading{from{transform:translateX(-100%)}to{transform:translateX(390%)}}
.jbrPanel .result-actions{display:flex;align-items:center;gap:12px}
.jbrPanel .size{font-size:11.5px;color:var(--muted)}
.jbrPanel .empty{text-align:center;padding:46px 20px;color:var(--muted)}
.jbrPanel .empty-icon{font-size:26px;color:#b3bcd4;margin-bottom:6px}
.jbrPanel .empty strong{display:block;font-weight:600;color:var(--text);font-size:14px}
.jbrPanel .empty p{font-size:12px;margin:5px 0}
.jbrPanel .table-wrap{max-height:410px;overflow:auto}
.jbrPanel table{width:100%;border-collapse:collapse;font-size:12.5px}
.jbrPanel th{font-weight:600;text-align:left;background:var(--grad-soft);color:#4a5686;font-size:10.5px;
  text-transform:uppercase;letter-spacing:.05em;position:sticky;top:0;z-index:1}
.jbrPanel th,.jbrPanel td{padding:11px 18px;border-bottom:1px solid #eef1f8;white-space:nowrap}
.jbrPanel .order{font-variant-numeric:tabular-nums;font-size:12.5px}
.jbrPanel .badge{display:inline-block;padding:3px 8px;border-radius:6px;background:var(--soft);color:var(--indigo);
  font-size:10.5px;font-weight:600}
.jbrPanel .badge.ok{background:#e4f3ed;color:var(--ok)}
.jbrPanel .badge.bad{background:#fbf2e2;color:var(--amber)}
.jbrPanel .result-foot{padding:12px 20px;font-size:11.5px;color:var(--muted);display:flex;
  justify-content:space-between;gap:16px;border-top:1px solid var(--line)}
.jbrPanel .footer{font-size:11px;color:var(--muted);display:flex;justify-content:space-between;gap:16px}
.jbrPanel details{font-size:12px;color:var(--muted);margin-top:16px}
.jbrPanel summary{cursor:pointer;width:max-content;font-weight:500;color:var(--indigo)}
.jbrPanel details p{max-width:800px;line-height:1.8}
.jbrPanel .busy .drop{pointer-events:none;opacity:.65}
@media(max-width:1100px){.jbrPanel .stats{gap:10px}
.jbrPanel .stat{padding:14px}
.jbrPanel .upload-grid{gap:10px;padding:17px}
.jbrPanel .upload-title{font-size:11.5px}}
@media(max-width:820px){.jbrPanel .stats{grid-template-columns:repeat(2,1fr)}
.jbrPanel .upload-grid{grid-template-columns:1fr}
.jbrPanel .drop{min-height:120px}
.jbrPanel .heading{align-items:flex-start;flex-direction:column}
.jbrPanel h1{font-size:23px}
.jbrPanel .card-head,.jbrPanel .actions{padding:15px}
.jbrPanel .footer{flex-direction:column;gap:5px}
.jbrPanel .result-actions{gap:6px}
.jbrPanel .progress:after{animation-duration:2s}}

/* ---------- excel to csv: the tool's own stylesheet ---------- */
.jbcPanel{--bg: #f6f8fd;
      --card: #ffffff;
      --ink: #1a2340;
      --muted: #616d8a;
      --line: #e3e8f3;
      --brand: #5f55d6;
      --brand-dark: #4c43bd;
      --good: #1c8f6b;
      --danger: #c0453a;
      --soft: #eef1fe;
      --shadow: 0 1px 2px rgba(38, 50, 96, 0.05);
      --radius: 14px;}
.jbcPanel,.jbcPanel *{box-sizing: border-box;}
.jbcPanel{margin: 0;
      min-height: 100vh;
      font-family: Arial, Helvetica, sans-serif;
      background: linear-gradient(135deg, #eef5ff 0%, #f8fafc 45%, #eef2ff 100%);
      color: var(--ink);}
.jbcPanel .wrap{width: min(1180px, calc(100% - 32px));
      margin: 32px auto;}
.jbcPanel .hero{display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      margin-bottom: 22px;}
.jbcPanel h1{margin: 0 0 8px;
      font-size: clamp(28px, 4vw, 44px);
      letter-spacing: -0.04em;}
.jbcPanel .subtitle{margin: 0;
      color: var(--muted);
      font-size: 15px;
      line-height: 1.55;}
.jbcPanel .badge{padding: 10px 14px;
      background: var(--soft);
      color: var(--brand-dark);
      border: 1px solid #bfdbfe;
      border-radius: 999px;
      font-weight: 700;
      white-space: nowrap;}
.jbcPanel .grid{display: grid;
      grid-template-columns: 390px 1fr;
      gap: 20px;}
.jbcPanel .card{background: var(--card);
      border: 1px solid rgba(219, 228, 239, 0.9);
      box-shadow: var(--shadow);
      border-radius: var(--radius);
      overflow: hidden;}
.jbcPanel .card-head{padding: 18px 20px;
      border-bottom: 1px solid var(--line);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;}
.jbcPanel .card-head h2{margin: 0;
      font-size: 18px;}
.jbcPanel .card-body{padding: 20px;}
.jbcPanel label{display: block;
      margin: 0 0 8px;
      font-size: 13px;
      font-weight: 800;
      color: #334155;
      text-transform: uppercase;
      letter-spacing: 0.04em;}
.jbcPanel input[type="file"],.jbcPanel select,.jbcPanel input[type="text"]{width: 100%;
      min-height: 44px;
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 10px 12px;
      background: #fff;
      color: var(--ink);
      outline: none;}
.jbcPanel input[type="file"]{padding: 10px;}
.jbcPanel select:focus,.jbcPanel input[type="text"]:focus{border-color: var(--brand);
      box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);}
.jbcPanel .field{margin-bottom: 16px;}
.jbcPanel .row{display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;}
.jbcPanel .check{display: flex;
      gap: 10px;
      align-items: flex-start;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #f8fafc;
      margin-bottom: 10px;}
.jbcPanel .check input{margin-top: 2px;}
.jbcPanel .check strong{display: block;
      font-size: 14px;}
.jbcPanel .check span{display: block;
      color: var(--muted);
      font-size: 12px;
      margin-top: 3px;
      line-height: 1.4;}
.jbcPanel .actions{display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
      margin-top: 18px;}
.jbcPanel button{min-height: 46px;
      border: none;
      border-radius: 12px;
      cursor: pointer;
      font-weight: 800;
      font-size: 14px;
      transition: 0.15s ease;}
.jbcPanel .primary{color: #fff;
      background: var(--brand);}
.jbcPanel .primary:hover{background: var(--brand-dark);}
.jbcPanel .secondary{color: var(--ink);
      background: #e2e8f0;}
.jbcPanel .secondary:hover{background: #cbd5e1;}
.jbcPanel button:disabled{cursor: not-allowed;
      opacity: 0.55;}
.jbcPanel .status{margin-top: 16px;
      padding: 12px 14px;
      border-radius: 12px;
      font-size: 13px;
      line-height: 1.45;
      background: #f8fafc;
      color: var(--muted);
      border: 1px solid var(--line);
      min-height: 44px;}
.jbcPanel .status.good{color: #166534;
      background: #f0fdf4;
      border-color: #bbf7d0;}
.jbcPanel .status.bad{color: #991b1b;
      background: #fef2f2;
      border-color: #fecaca;}
.jbcPanel .meta{display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      margin-bottom: 14px;}
.jbcPanel .metric{border: 1px solid var(--line);
      border-radius: 14px;
      padding: 12px;
      background: #f8fafc;}
.jbcPanel .metric small{display: block;
      color: var(--muted);
      font-weight: 700;
      margin-bottom: 6px;}
.jbcPanel .metric b{font-size: 18px;}
.jbcPanel .preview-box{border: 1px solid var(--line);
      border-radius: 14px;
      overflow: auto;
      max-height: 560px;
      background: #fff;}
.jbcPanel table{width: 100%;
      border-collapse: collapse;
      font-size: 13px;
      min-width: 680px;}
.jbcPanel th,.jbcPanel td{border-bottom: 1px solid #e5e7eb;
      border-right: 1px solid #e5e7eb;
      padding: 9px 10px;
      text-align: left;
      vertical-align: top;
      white-space: nowrap;
      max-width: 260px;
      overflow: hidden;
      text-overflow: ellipsis;}
.jbcPanel th{position: sticky;
      top: 0;
      background: #f1f5f9;
      z-index: 2;
      font-weight: 800;}
.jbcPanel td.empty{color: #cbd5e1;
      font-style: italic;}
.jbcPanel .empty-state{padding: 50px 24px;
      text-align: center;
      color: var(--muted);}
.jbcPanel .notes{margin-top: 14px;
      padding-left: 18px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.6;}
@media (max-width: 900px){.jbcPanel .grid{grid-template-columns: 1fr;}
.jbcPanel .hero{align-items: flex-start; flex-direction: column;}
.jbcPanel .meta{grid-template-columns: 1fr 1fr;}}

/* ---------- excel to csv: the dev's in-shell re-skin ---------- */
.jbcPanel{background:#f8fafc;color:#1e293b;font-family:Segoe UI,Arial,sans-serif}
.jbcPanel .hero,.jbcPanel .notes{display:none}
.jbcPanel .wrap{width:100%;margin:0;padding:12px}
.jbcPanel .grid{grid-template-columns:330px minmax(0,1fr)}
.jbcPanel .card{border:1px solid #e2e8f0;border-radius:8px;box-shadow:none}
.jbcPanel .primary{background:#6366f1}
.jbcPanel .card-head{background:#fafcfd}
.jbcPanel .check{background:#f5f8fa}
.jbcPanel .status{font-size:12px}
.jbcPanel .badge{display:none}
@media(max-width:900px){.jbcPanel .grid{grid-template-columns:1fr}}

/* ---------- embedding overrides (not from the source) ----------
   The drop painted its own page background and set its own typeface
   (Archivo, which the app does not load). Inside the app the panels sit on
   the app's page, in the app's font. */
.jbrPanel,.jbcPanel{background:none;background-image:none;font-family:inherit}
/* In its iframe the CSV tool sized unstyled text off the browser's 16px
   default; the app's page is 14px, so the panel restates the 16px. */
.jbcPanel{font-size:16px}
.jbcPanel .wrap{padding:0}

/* ---------- governing table rule (CLAUDE.md) ----------
   The CSV preview capped every cell at 260px with an ellipsis. Cut-off is
   never acceptable: cells take their natural width and .preview-box (already
   overflow:auto) scrolls sideways instead. */
.jbcPanel th,.jbcPanel td{max-width:none;overflow:visible;text-overflow:clip}

/* ---------- keeping the app's own CSS out of the panels ----------
   Scoping runs one way: this stylesheet cannot reach the app, but the app's
   generic rules reach in wherever a tool leaves a property unset. */
.jbrPanel .card,.jbcPanel .card{padding:0}
.jbcPanel .card{margin:0}
.jbrPanel .card p{color:inherit}
.jbrPanel h1,.jbrPanel h2,.jbcPanel h2{font-family:inherit;color:inherit}
.jbcPanel .grid{margin-bottom:0}
.jbcPanel .field{display:block}
.jbcPanel .check input{width:auto;min-height:0;padding:0;flex:none}
.jbcPanel .secondary:hover{color:var(--ink)}
.jbcPanel .primary,.jbcPanel .secondary{padding:1px 6px;box-shadow:none}