/* Account header controls */
.account-bar{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-left:auto;font:500 13px system-ui;color:#4a5a73;min-width:0}
.account-who{overflow-wrap:anywhere}
.account-btn,.account-link{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border-radius:9px;border:1px solid #cbd5e4;background:#fff;color:#273e61;font:600 14px system-ui;text-decoration:none;cursor:pointer}
.account-primary{background:#214cdf;border-color:#214cdf;color:#fff}
.account-link{padding:0 12px;margin-left:4px}
.account-save{font-weight:600}
.account-save-error{color:#9c3445}
.account-save-conflict{color:#79510d}
.account-save-saved{color:#24633d}
.account-notice{flex-basis:100%;color:#9c3445;background:#fff2f2;padding:8px 10px;border-radius:8px}
.account-btn:focus-visible,.account-link:focus-visible{outline:3px solid #5f85ff;outline-offset:3px}
.csv-launch{min-height:44px}
.csv-launch:disabled{opacity:.6;cursor:progress}

/* Real deck versus demo dashboard */
.concept-tag{font-weight:600}
.csv-badge{display:inline-block;margin:0 0 16px;padding:4px 10px;border-radius:999px;background:#eaf7ef;color:#24633d;font:600 12px system-ui}
.csv-save-status:empty{display:none}
.csv-save-status{margin:0 0 16px;font-size:14px;font-weight:600;color:#273e61}
.csv-retry{margin-left:8px}
.csv-migrate{margin:0 0 24px;padding:16px 18px;border:1px solid #dde4ee;border-radius:10px;background:#f7f9fc;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.csv-migrate p{margin:0;flex:1 1 240px}

/* Touch targets */
.csv-close{width:44px;height:44px;flex:none}
.card-speaker{min-height:44px;min-width:44px}
.csv-primary,.csv-secondary,.csv-dialog select,.csv-topic-field input,.csv-card-topic{min-height:44px}
.csv-controls .csv-check{min-height:44px}
.csv-controls .csv-check input{width:22px;height:22px}

/* Modal: contained scrolling and safe areas */
.csv-dialog{max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow:auto;overscroll-behavior:contain;box-sizing:border-box}
.csv-preview{max-width:100%;-webkit-overflow-scrolling:touch}
.csv-body{min-width:0}

/* Card backup import and export */
.csv-backup{margin:24px 0 0;padding:16px 18px;border:1px solid #dde4ee;border-radius:10px;background:#f7f9fc;display:grid;gap:12px}
.csv-backup p{margin:4px 0 0}
.csv-backup-actions{display:flex;flex-wrap:wrap;gap:12px}
.csv-file-button{position:relative;display:inline-flex;align-items:center;justify-content:center}
.csv-file-button input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.csv-file-button:focus-within{outline:3px solid #5f85ff;outline-offset:3px}

@media (max-width:760px){
  /* Stack the header in one column. nowrap keeps a column flexbox from wrapping items into a second, offscreen column. */
  .topbar{display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;justify-content:flex-start;height:auto;min-height:0;max-width:100%}
  .topbar>*{min-width:0;max-width:100%;margin-left:0;margin-right:0}
  .brand-compact{align-self:flex-start}
  /* The base row layout gives this flex-basis:100%, which in a column means full height. */
  .concept-tag{flex:0 0 auto;margin:0}
  .topbar .btn-small{align-self:flex-start;min-height:44px}
  .csv-launch{order:4;width:100%;white-space:normal}
  .account-bar{margin-left:0;flex-direction:column;align-items:stretch;order:5;width:100%}
  .account-btn{width:100%}
  .csv-backup-actions{flex-direction:column}
  .csv-backup-actions>*{width:100%}
  .account-save{order:-1}
  .csv-dialog{width:calc(100% - 16px - env(safe-area-inset-left) - env(safe-area-inset-right));margin:auto;border-radius:16px;max-height:calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
  .csv-body{padding:18px 16px calc(18px + env(safe-area-inset-bottom))}
  .csv-head{gap:12px}
  .csv-actions{flex-direction:column;align-items:stretch}
  .csv-actions .csv-primary,.csv-actions .csv-secondary,.csv-migrate .csv-secondary{width:100%}
  .csv-controls{flex-direction:column;align-items:stretch}
  .csv-question,.csv-answer{font-size:clamp(20px,5.6vw,25px)}
  .csv-answer{padding:18px}
  .csv-ratings{grid-template-columns:1fr 1fr}
  .csv-ratings button{min-height:64px}
  .csv-preview th,.csv-preview td{min-width:120px;padding:10px}
}
@media (max-width:360px){
  .csv-head h2{font-size:21px}
  .csv-body{padding:16px 12px}
}
@media (forced-colors:active){
  .account-btn,.account-link,.csv-badge{border:1px solid ButtonText}
}