/* Redprint component layer — hand-ported from the design system's React
   components (Button/Card/Badge/Tag/Input/Checkbox/PlanStep/ProofChip/Toolbar)
   into plain CSS classes for Razor markup. Tokens come from tokens/*.css. */

/* ---- base ---- */
body{
  background:var(--surface-paper);
  color:var(--text-body);
  font:var(--type-body);
}
h1,h2,.rp-display{
  font-family:var(--font-display);
  font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-display);
  text-transform:uppercase;
  font-variation-settings:"wdth" 108;
}
h1{font-size:var(--fs-h1);line-height:var(--lh-tight);}
h2{font-size:var(--fs-h2);line-height:var(--lh-tight);}
h3,.rp-h3{font-family:var(--font-ui);font-weight:var(--weight-semibold);font-size:var(--fs-h3);line-height:var(--lh-snug);}
a{color:var(--text-link);}
a:hover{color:var(--text-link-hover);}

/* ---- buttons ---- */
.rp-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:34px;padding:0 14px;border:1px solid transparent;
  font-family:var(--font-mono);font-size:11px;font-weight:500;
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  cursor:pointer;transition:var(--transition-ui);border-radius:0;
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,0 100%);
}
.rp-btn:active{transform:translateY(1px);}
.rp-btn:disabled{opacity:.4;cursor:not-allowed;}
.rp-btn--sm{height:26px;padding:0 10px;font-size:10px;gap:6px;}
.rp-btn--lg{height:44px;padding:0 20px;font-size:12px;gap:10px;}
.rp-btn--primary{background:var(--action-primary);color:var(--action-on-primary);border-color:var(--action-primary);}
.rp-btn--primary:hover:not(:disabled){background:var(--action-primary-hover);border-color:var(--action-primary-hover);}
.rp-btn--secondary{background:var(--surface-card);color:var(--text-body);border-color:var(--line-on-paper-strong);}
.rp-btn--secondary:hover:not(:disabled){background:var(--surface-sunken);border-color:var(--red-500);}
.rp-btn--ghost{background:transparent;color:var(--text-accent);}
.rp-btn--ghost:hover:not(:disabled){background:var(--line-on-paper-faint);}
.rp-btn--danger{background:transparent;color:var(--status-blocked);border-color:var(--status-blocked);}
.rp-btn--danger:hover:not(:disabled){background:var(--status-blocked);color:#fff;}

.rp-icon-btn{
  width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line-on-paper);background:transparent;color:var(--text-body);
  cursor:pointer;transition:var(--transition-ui);border-radius:0;
}
.rp-icon-btn:hover:not(:disabled){background:var(--surface-sunken);border-color:var(--red-400);}
.rp-icon-btn:disabled{opacity:.4;cursor:not-allowed;}

/* ---- badge / tag ---- */
.rp-badge{
  display:inline-flex;align-items:center;gap:6px;height:20px;padding:0 8px;
  border:1px solid var(--line-on-paper);font-family:var(--font-mono);font-size:10px;font-weight:500;
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted);
}
.rp-badge::before{content:"";width:5px;height:5px;background:currentColor;}
.rp-badge--done{color:var(--status-done);}
.rp-badge--active{color:#8A5F12;}
.rp-badge--blocked{color:var(--status-blocked);}
.rp-badge--proof{color:var(--status-proof);}

.rp-tag{
  display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;
  border:1px solid var(--line-on-paper);background:var(--surface-card);color:var(--text-muted);
  font-family:var(--font-ui);font-size:12px;font-weight:500;
}

/* ---- card ---- */
.rp-card{
  background:var(--surface-card);color:var(--text-body);border:var(--border-card);
}
.rp-card--lift{box-shadow:var(--shadow-lift);}
.rp-card--notch{clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%);}
.rp-card__label{font:var(--type-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-faint);}

/* ---- forms ---- */
.rp-field{display:block;}
.rp-field + .rp-field{margin-top:var(--space-6);}
.rp-field__label{display:block;font:var(--type-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-faint);margin-bottom:5px;}
.rp-input,.rp-select,.rp-textarea{
  display:block;width:100%;box-sizing:border-box;padding:0 10px;background:var(--surface-card);
  border:1px solid var(--line-on-paper-strong);font:var(--type-body);font-size:15px;color:var(--text-body);
  outline:none;transition:var(--transition-ui);border-radius:0;
}
.rp-input{height:34px;}
.rp-select{height:34px;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--red-500) 50%),linear-gradient(135deg,var(--red-500) 50%,transparent 50%);background-position:calc(100% - 16px) center,calc(100% - 11px) center;background-size:5px 5px,5px 5px;background-repeat:no-repeat;}
.rp-textarea{padding:9px 10px;resize:vertical;line-height:24px;}
.rp-input:focus,.rp-select:focus,.rp-textarea:focus{border-color:var(--red-400);box-shadow:0 0 0 2px rgba(232,163,61,.35);}

.rp-checkbox{position:relative;display:inline-flex;gap:10px;align-items:flex-start;cursor:pointer;}
.rp-checkbox input{position:absolute;opacity:0;width:16px;height:16px;margin:0;cursor:pointer;}
.rp-checkbox__box{
  width:16px;height:16px;flex:0 0 auto;margin-top:1px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line-on-paper-strong);background:transparent;transition:var(--transition-ui);
}
.rp-checkbox input:checked + .rp-checkbox__box{border-color:var(--red-400);background:var(--action-primary);}
.rp-checkbox__box svg{opacity:0;}
.rp-checkbox input:checked + .rp-checkbox__box svg{opacity:1;}

/* ---- toolbar ---- */
.rp-toolbar{display:inline-flex;align-items:center;gap:6px;padding:6px;background:var(--surface-card);border:1px solid var(--line-on-paper);}
.rp-toolbar__divider{width:1px;height:18px;background:var(--line-on-paper);flex:0 0 auto;}
.rp-mono{font-family:var(--font-mono);font-size:11px;letter-spacing:var(--tracking-wide);color:var(--text-muted);}

/* ---- plan step (canvas node) ---- */
.rp-planstep{
  width:220px;background:var(--surface-card);color:var(--text-body);
  border:1px solid var(--line-on-paper);box-shadow:var(--shadow-lift);
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%);
  cursor:pointer;transition:var(--transition-ui);user-select:none;
}
.rp-planstep.is-selected{border-color:var(--red-400);box-shadow:3px 3px 0 rgba(216,11,39,.25);}
.rp-planstep.is-done{background:var(--surface-card);}
.rp-planstep__head{display:flex;align-items:center;gap:8px;padding:7px 9px;border-bottom:1px solid var(--line-on-paper-faint);}
.rp-planstep__index{font-family:var(--font-mono);font-size:10px;letter-spacing:var(--tracking-label);color:var(--text-faint);}
.rp-planstep__dot{width:6px;height:6px;flex:0 0 auto;}
.rp-planstep__status{font-family:var(--font-mono);font-size:9px;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted);}
.rp-planstep__body{padding:9px;}
.rp-planstep__title{margin:0;font:var(--type-h3);font-size:14px;line-height:1.3;color:var(--text-body);}
.rp-planstep__foot{display:flex;align-items:center;gap:10px;padding:6px 9px;border-top:1px solid var(--line-on-paper-faint);
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.06em;color:var(--text-faint);}
.rp-planstep__foot .rp-spacer{flex:1;}

/* ---- proof chip ---- */
.rp-chip{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:7px 9px;cursor:pointer;
  background:var(--surface-card);color:var(--text-body);border:1px solid var(--line-on-paper);
  border-left:2px solid var(--signal-blue);transition:var(--transition-ui);text-decoration:none;
}
.rp-chip:hover{background:var(--surface-sunken);}
.rp-chip__title{flex:1;min-width:0;font:var(--type-body);font-size:13px;color:var(--text-body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rp-chip__kind{font-family:var(--font-mono);font-size:9px;letter-spacing:var(--tracking-label);color:var(--signal-blue);flex:0 0 auto;}

/* ---- quiz options (radio-style, distinct from the square completion checkbox) ---- */
.rp-option{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:10px 12px;
  background:var(--surface-card);border:1px solid var(--line-on-paper);cursor:pointer;transition:var(--transition-ui);
  font:var(--type-body);font-size:14px;color:var(--text-body);border-radius:0;
}
.rp-option:hover:not(:disabled){background:var(--surface-sunken);}
.rp-option:disabled{cursor:default;}
.rp-option.is-selected{border-color:var(--red-400);box-shadow:inset 0 0 0 1px var(--red-400);}
.rp-option__mark{width:16px;height:16px;flex:0 0 auto;border:1px solid var(--line-on-paper-strong);border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;}
.rp-option.is-selected .rp-option__mark{border-color:var(--red-400);}
.rp-option.is-selected .rp-option__mark::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--red-500);}
.rp-option.is-correct{border-color:var(--status-done);background:rgba(76,143,100,.08);}
.rp-option.is-incorrect{border-color:var(--status-blocked);background:rgba(255,90,60,.08);}
.rp-option.is-correct .rp-option__mark{border-color:var(--status-done);}
.rp-option.is-incorrect .rp-option__mark{border-color:var(--status-blocked);}

/* ---- notes ---- */
.rp-note{display:flex;align-items:flex-start;gap:8px;padding:7px 9px;background:var(--surface-card);border:1px solid var(--line-on-paper);}
.rp-note--positive{border-left:2px solid var(--status-done);}
.rp-note--negative{border-left:2px solid var(--signal-amber);}

/* ---- confirm dialog ---- */
.rp-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(26,22,20,.5);backdrop-filter:var(--blur-overlay);}
.rp-modal__sheet{width:100%;max-width:420px;padding:20px 22px;background:var(--surface-card);border:var(--border-card);border-top:3px solid var(--status-blocked);box-shadow:var(--shadow-sheet);}
.rp-modal__sheet--warn{border-top-color:var(--status-active);}
/* Native <dialog> flavour of the same sheet, for places where Blazor events aren't available. */
.rp-dialog{border:0;padding:0;margin:auto;background:transparent;width:calc(100% - 32px);max-width:420px;overflow:visible;
  /* Lives inside the dark top bar, so reset the text styling it would otherwise inherit. */
  color:var(--text-body);text-transform:none;letter-spacing:normal;}
.rp-dialog::backdrop{background:rgba(26,22,20,.5);backdrop-filter:var(--blur-overlay);}
.rp-modal__body{margin:10px 0 18px;color:var(--text-muted);font-size:13px;line-height:1.5;}
.rp-modal__body p{margin:0 0 8px;}
.rp-modal__body strong{color:var(--text-body);}
.rp-modal__actions{display:flex;justify-content:flex-end;gap:8px;}

/* ---- landing page feature lists ---- */
.rp-hero__list{list-style:none;margin:0;padding:0;display:grid;gap:10px;}
.rp-hero__list li{position:relative;padding-left:18px;color:var(--text-muted);font-size:14px;line-height:1.5;}
.rp-hero__list li::before{content:"";position:absolute;left:2px;top:.55em;width:7px;height:7px;background:var(--action-primary);}
.rp-hero__list strong{color:var(--text-body);}