/* Import tokens.css before this file. These classes have no data or role logic. */
.karl-panel { color:var(--karl-text); background:var(--karl-surface); border:1px solid var(--karl-divider); border-radius:var(--karl-radius-panel); padding:var(--karl-panel-padding); font:var(--karl-font-body)/var(--karl-leading-body) var(--karl-font-sans); }
.karl-panel h3 { color:var(--karl-text); font:600 26px/1.2 var(--karl-font-sans); letter-spacing:-.035em; margin:0 0 16px; }
.karl-panel p { color:var(--karl-muted); margin:0 0 20px; }
.karl-button { display:inline-flex; justify-content:center; align-items:center; gap:12px; min-height:var(--karl-control-height); min-width:44px; padding:12px 20px; font:600 14px/1.4 var(--karl-font-sans); text-decoration:none; border:1px solid var(--karl-action-bg); border-radius:var(--karl-radius-control); background:var(--karl-action-bg); color:var(--karl-action-text); cursor:pointer; transition:background var(--karl-motion-fast),border-color var(--karl-motion-fast); }
.karl-button:hover:not(:disabled) { background:var(--karl-action-hover); border-color:var(--karl-action-hover); }
.karl-button--secondary { background:transparent; border-color:var(--karl-border-strong); color:var(--karl-text); }
.karl-button--secondary:hover:not(:disabled) { color:var(--karl-action-text); }
.karl-button:disabled { cursor:not-allowed; opacity:.55; }
.karl-button[aria-busy="true"]::before { content:""; width:14px; height:14px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:karl-spin .8s linear infinite; }
@keyframes karl-spin { to { transform:rotate(360deg); } }
.karl-button:focus-visible,.karl-field select:focus-visible,.karl-field input:focus-visible,.karl-choice:has(input:focus-visible),.karl-check:has(input:focus-visible),.karl-table a:focus-visible,.karl-table-wrap:focus-visible { outline:3px solid var(--karl-focus); outline-offset:4px; }
.karl-field { display:grid; gap:8px; font:var(--karl-font-label)/1.5 var(--karl-font-sans); margin-bottom:20px; color:var(--karl-text); }
.karl-field select,.karl-field input { width:100%; min-width:0; min-height:var(--karl-control-height); padding:11px 12px; border:1px solid var(--karl-border-strong); border-radius:var(--karl-radius-control); color:var(--karl-text); background:var(--karl-surface); font:16px/1.5 var(--karl-font-sans); }
.karl-field small { color:var(--karl-muted); font-size:13px; }
.karl-field [aria-invalid="true"] { border:2px solid var(--karl-danger-text); }
.karl-field .karl-field-error { color:var(--karl-danger-text); font-size:14px; }
.karl-choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; border:0; padding:0; margin:0 0 24px; min-width:0; }
.karl-choices legend { grid-column:1/-1; margin-bottom:12px; font-size:14px; color:var(--karl-text); }
.karl-choice { min-height:68px; display:flex; align-items:center; gap:12px; border:1px solid var(--karl-border-strong); padding:14px; color:var(--karl-text); cursor:pointer; }
.karl-choice:has(input:checked) { background:var(--karl-selected-bg); color:var(--karl-selected-text); border-color:var(--karl-selected-text); box-shadow:inset 0 0 0 1px var(--karl-selected-text); }
.karl-choice input,.karl-check input { width:18px; height:18px; flex:none; accent-color:var(--karl-action-bg); }
.karl-check { display:flex; align-items:center; gap:12px; min-height:44px; color:var(--karl-text); padding:8px 0; cursor:pointer; }
.karl-status { display:inline-flex; gap:8px; align-items:center; border:1px solid currentColor; border-radius:var(--karl-radius-status); padding:5px 9px; font:13px/1.5 var(--karl-font-sans); color:var(--karl-unknown-text); background:var(--karl-unknown-bg); }
.karl-status--success { color:var(--karl-success-text); background:var(--karl-success-bg); }
.karl-status--warning { color:var(--karl-warning-text); background:var(--karl-warning-bg); }
.karl-status--danger { color:var(--karl-danger-text); background:var(--karl-danger-bg); }
.karl-notice { border-left:3px solid var(--karl-selected-text); padding:16px 20px; color:var(--karl-selected-text); background:var(--karl-selected-bg); font-size:14px; line-height:1.7; }
.karl-notice--warning { border-color:var(--karl-warning-text); color:var(--karl-warning-text); background:var(--karl-warning-bg); }
.karl-table-wrap { overflow:auto; max-width:100%; }
.karl-table { width:100%; border-collapse:collapse; text-align:left; font-size:14px; color:var(--karl-text); }
.karl-table caption { text-align:left; font:12px/1.6 var(--karl-font-mono); color:var(--karl-muted); margin-bottom:16px; }
.karl-table th { color:var(--karl-muted); font-weight:500; font-size:12px; }
.karl-table td,.karl-table th { padding:var(--karl-cell-padding) 16px var(--karl-cell-padding) 0; height:var(--karl-row-height); border-bottom:1px solid var(--karl-divider); vertical-align:middle; }
.karl-table a { color:var(--karl-selected-text); text-decoration:underline; text-underline-offset:4px; display:inline-flex; align-items:center; min-height:44px; }
@media(max-width:600px) { .karl-choices { grid-template-columns:1fr; } .karl-panel { padding:20px; } }
@media(prefers-reduced-motion:reduce) { .karl-button[aria-busy="true"]::before { animation:none; } }