/* SPACING: reach for a token — `--card-pad`, `--card-gap`, `--sp-1`…`--sp-6` —
   not a raw rem, and not the value in the rule above. Cards on the padding
   contract are enforced by `test/layout-tokens.test.js`; the contract and the
   list of what is on it are in `docs/visual-language.md` → Tokens. Raw values
   still in this file are legacy from a 2px grid, not a precedent to follow. */
/* Import (Budget Converter). */
/* ══ Import ════════════════════════════════════════════════════════════ */
/* Home of the Budget Converter once it's built into the app: export status,
   the folder it scans, and its run log. Same card rhythm as Admin. */
#panel-import .admin-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--elev);
  padding:1.125rem;
  margin-bottom:1.125rem;
  min-width:0;
}
#imp-conn{margin-inline-start:auto;}
#panel-import .admin-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:1.125rem;
  margin-bottom:1.125rem;
}
#panel-import .admin-grid .admin-card{margin-bottom:0;}
#panel-import .btn:disabled{opacity:.45;cursor:not-allowed;}
.imp-conn{display:inline-flex;align-items:center;gap:.4rem;font-size:var(--fs-meta);color:var(--muted);}
.imp-conn::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--muted);opacity:.6;}
.imp-conn.on{color:var(--pos);}
.imp-conn.on::before{background:var(--pos);opacity:1;}
/* Freshness badge: colour comes from the state class, background is a tint of it. */
.imp-rows{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:var(--sp-2) var(--sp-4);
  margin:var(--sp-4) 0 .875rem;
  font-size:var(--fs-body);
}
.imp-rows dt{color:var(--muted);}
.imp-rows dd{margin:0;color:var(--text);min-width:0;overflow-wrap:anywhere;}
.imp-rows .sub{color:var(--muted);font-size:var(--fs-label);margin-inline-start:.35rem;}
.imp-legend{font-size:var(--fs-meta);color:var(--muted);}
.imp-phase{font-size:var(--fs-label);color:var(--text);font-weight:600;}
.imp-phase.busy::before{
  content:"";
  display:inline-block;
  width:.5rem;
  height:.5rem;
  border-radius:50%;
  margin-inline-end:.45rem;
  background:var(--accent);
  vertical-align:.05em;
  animation:impPulse 1.1s ease-in-out infinite;
}
@keyframes impPulse{
  50%{opacity:.25;}
}
@media (prefers-reduced-motion:reduce){
  .imp-phase.busy::before{animation:none;}
}
.imp-chips{display:flex;flex-wrap:wrap;gap:.375rem;margin:0 0 .875rem;}
.imp-chips b{font-weight:600;}
.imp-folder{
  display:flex;
  align-items:center;
  gap:.6rem;
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:.625rem var(--sp-3);
  font-size:var(--fs-label);
  min-width:0;
}
.imp-folder svg{width:1rem;height:1rem;flex:0 0 auto;color:var(--muted);}
.imp-folder span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  direction:rtl;
  text-align:left;
}
.imp-folder.empty span{color:var(--muted);direction:ltr;}
/* The span is always right to left (for the ellipsis), so its alignment is physical. */
:root[dir="rtl"] .imp-folder span{text-align:right;}
.imp-actions{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-3);}
.imp-log-head{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;margin-bottom:var(--sp-3);}
.imp-log-head h2{margin:0 !important;}
.imp-log-head .imp-actions{margin:0;margin-inline-start:auto;}
.imp-log{
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  height:20rem;
  overflow:auto;
  padding:.625rem 0;
  font:0.78rem/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--text);
}
.imp-log .line{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:var(--sp-3);padding:0 .875rem;}
.imp-log .t{color:var(--muted);}
.imp-log .lv{width:3.2em;font-weight:600;color:var(--muted);}
.imp-log .ok .lv{color:var(--pos);}
.imp-log .warn .lv{color:var(--accent);}
.imp-log .error .lv,.imp-log .error .m{color:var(--neg);}
.imp-log .m{white-space:pre-wrap;overflow-wrap:anywhere;}
.imp-log .empty{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:var(--sp-4);
  font-family:inherit;
  color:var(--muted);
}
/* The labeling-rules editor: a wide sheet with a section list and a scrolling form.
   It is the Import card's review surface, not a second modal style. */
.modal.rules-sheet{
  width:min(64rem,94vw);
  max-height:calc(100vh - var(--sp-6) * 2);
  display:flex;
  flex-direction:column;
  padding:var(--card-pad);
}
.rules-sheet .modal-head,.rules-sheet .rules-lead,.rules-sheet .modal-actions,.rules-sheet .rules-problems{flex-shrink:0;}
.rules-lead{margin:0 0 var(--sp-3);color:var(--muted);font-size:var(--fs-meta);}
.rules-layout{display:grid;grid-template-columns:12rem minmax(0,1fr);gap:var(--card-gap);min-height:0;flex:1;}
.rules-nav{display:flex;flex-direction:column;gap:var(--sp-1);align-items:stretch;}
.rules-nav button{width:100%;justify-content:space-between;}
.rules-nav button[aria-current="page"]{background:var(--hover-pill-bg);color:var(--text);border-color:var(--border-hover);}
.rules-count{color:var(--muted);font-size:var(--fs-meta);}
.rules-body{overflow:auto;min-height:0;display:flex;flex-direction:column;gap:var(--sp-3);padding-inline-end:var(--sp-1);}
.rules-block{border:1px solid var(--border);border-radius:var(--radius);padding:var(--sp-3);display:flex;flex-direction:column;gap:var(--sp-2);}
.rules-title{margin:0;font-size:var(--fs-label);}
.rules-label{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--sp-2);align-items:center;}
.rules-label.has-budget{grid-template-columns:auto minmax(6rem,1fr) minmax(5.5rem,8rem) auto;}
.rules-label-wrap{display:flex;flex-direction:column;gap:var(--sp-2);}
.rules-line{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-2);align-items:center;}
.rules-line.rules-3{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;}
.rules-line.rules-4{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr) auto;}
.rules-moves{display:flex;gap:var(--sp-1);align-items:center;flex-wrap:wrap;}
button.rules-swatch{width:var(--sp-5);height:var(--sp-5);border-radius:50%;padding:0;border:1px solid var(--border);background:var(--c);cursor:pointer;flex:0 0 auto;}
.rules-problems{color:var(--neg);font-size:var(--fs-meta);margin-top:var(--sp-3);}
.rules-problems p{margin:0;}
.rules-problems ul{margin:var(--sp-2) 0 0;padding-inline-start:var(--sp-4);}
@media(max-width:720px){
  .rules-layout{grid-template-columns:minmax(0,1fr);}
  .rules-nav{flex-direction:row;flex-wrap:wrap;}
  .rules-nav button{width:auto;}
}