/* The import review page (ui/import.js, #import). Page rules only: the tokens and the shared parts (panels, buttons, the strip, tables, status badges) live in app.css.
   Every class here carries the im- prefix, so another page's stylesheet never meets it. Motion: press feedback .97 in 140ms on the shared .btn, hover only where a pointer
   can hover, nothing animates on a keyboard action, reduced motion is handled in app.css. */
.im-w{width:100%;max-width:1040px;min-width:0}
.im-out{display:flex;flex-direction:column;gap:24px}
.im-strip{max-width:1040px}
.im-input{padding:6px 12px;min-height:var(--hit);height:auto}
.im-input::file-selector-button{margin-right:12px;min-height:30px;padding:0 16px;border:1px solid var(--accent);border-radius:var(--pill);background:var(--btn-strong);color:var(--accent);font:inherit;font-size:var(--type-s);font-weight:600;cursor:pointer;transition:background 120ms var(--ease),transform 140ms var(--ease)}
.im-input::file-selector-button:active{transform:matrix(.97,0,0,.97,0,0)}
@media (hover:hover) and (pointer:fine){.im-input::file-selector-button:hover{background:var(--btn-strong-hover)}}
.im-problems{display:flex;flex-direction:column;gap:6px;padding-left:20px;color:var(--text-secondary)}
.im-problems strong{color:var(--text-primary)}
.im-table th.name,.im-table td.name{width:40%}
.im-meter{width:100%;height:8px;border:0;border-radius:4px;background:var(--grey-bg);accent-color:var(--accent);overflow:hidden}
.im-meter::-webkit-progress-bar{background:var(--grey-bg);border-radius:4px}
.im-meter::-webkit-progress-value{background:var(--accent);border-radius:4px}
.im-meter::-moz-progress-bar{background:var(--accent);border-radius:4px}
.im-checks{list-style:none;display:flex;flex-direction:column;gap:10px}
.im-checks li{display:flex;align-items:center;gap:12px;min-width:0}
.im-checks .status{flex:none;min-width:76px;justify-content:center}
.im-ck{min-width:0;overflow-wrap:anywhere;color:var(--text-primary)}
.im-tb{display:flex;flex-direction:column;gap:16px;min-width:0}
.im-tb:empty{display:none}
.im-entry{display:flex;flex-direction:column;gap:12px}
@media (max-width:719px){.im-checks li{align-items:flex-start;flex-direction:column;gap:4px}}
/* the ledger accounts list: on a phone the account name takes a line of its own under the role and its state, and an empty one takes none */
@media (max-width:959px){.im-roles-table td.text{grid-column:1 / 4}.im-roles-table td.text:empty{display:none}}