/* 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);}

/* Drafting overlay (Components/Redprint/DraftingOverlay.razor): steps appear and join up, on a loop. */
.rp-draft{max-width:460px;}
.rp-draft__art{display:block;width:100%;height:auto;margin:14px 0 6px;}
.rp-draft__card rect:first-child{fill:var(--surface-paper);stroke:var(--text-body);stroke-width:1.2;}
.rp-draft__line{fill:var(--text-faint);opacity:.55;}
.rp-draft__card{opacity:0;transform-box:fill-box;transform-origin:center;animation:rp-draft-card 4.8s ease-in-out infinite;}
.rp-draft__pick{fill:var(--status-blocked);opacity:1;}
.rp-draft__link{fill:none;stroke:var(--status-blocked);stroke-width:1.6;stroke-dasharray:18;stroke-dashoffset:18;opacity:0;animation:rp-draft-link 4.8s ease-in-out infinite;}
.rp-draft__msgs{position:relative;height:1.5em;font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-body);}
.rp-draft__msgs span{position:absolute;inset:0;opacity:0;animation:rp-draft-msg 12s ease-in-out infinite;}
@keyframes rp-draft-card{0%{opacity:0;transform:scale(.85)}14%,80%{opacity:1;transform:scale(1)}94%,100%{opacity:0;transform:scale(1)}}
@keyframes rp-draft-link{0%{opacity:0;stroke-dashoffset:18}14%{opacity:1;stroke-dashoffset:18}30%,80%{opacity:1;stroke-dashoffset:0}94%,100%{opacity:0;stroke-dashoffset:0}}
@keyframes rp-draft-msg{0%{opacity:0;transform:translateY(4px)}4%,22%{opacity:1;transform:none}26%,100%{opacity:0;transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){
  .rp-draft__card,.rp-draft__link{animation:none;opacity:1;stroke-dashoffset:0;}
  .rp-draft__msgs span{animation:none;}
  .rp-draft__msgs span:first-child{opacity:1;}
}

/* Show/hide password button (wwwroot/redprint/password-toggle.js) */
.rp-pw{position:relative;}
.rp-pw > input.form-control{padding-right:46px;}
.rp-pw__toggle{position:absolute;top:50%;right:6px;transform:translateY(-50%);z-index:5;width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  border:0;background:transparent;color:var(--text-muted);cursor:pointer;}
.rp-pw__toggle:hover{color:var(--text-body);}
.rp-pw__toggle:focus-visible{outline:2px solid var(--status-active);outline-offset:-2px;}

/* Terms / Privacy pages */
.rp-prose{max-width:var(--measure,68ch);color:var(--text-body);line-height:1.65;}
.rp-prose h2{font-size:1.15rem;margin:var(--space-7,28px) 0 8px;}
.rp-prose p,.rp-prose ul{margin:0 0 12px;}
.rp-prose ul{padding-left:1.2em;}
.rp-prose li{margin-bottom:6px;}
.rp-prose a{color:var(--status-blocked);}
.rp-prose .rp-todo{background:#FFF1B8;color:var(--text-body);padding:0 4px;}
.rp-table-wrap{overflow-x:auto;margin:0 0 12px;}
.rp-table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.5;}
.rp-table th{text-align:left;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);padding:6px 10px 6px 0;border-bottom:2px solid var(--text-body);}
.rp-table td{vertical-align:top;padding:9px 10px 9px 0;border-bottom:1px solid var(--line-on-paper,#E3D9CB);}
.rp-table td:first-child{white-space:nowrap;font-weight:600;padding-right:16px;}
.rp-legal-links{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);}
.rp-legal-links a{color:var(--text-muted);margin-right:14px;}

/* First-run walkthrough (Components/Redprint/Tour.razor + Tour.razor.js) */
.rp-tour{position:fixed;inset:0;z-index:2000;}
.rp-tour--dim{background:rgba(26,22,20,.62);}
.rp-tour__hole{position:fixed;border-radius:3px;pointer-events:none;
  box-shadow:0 0 0 9999px rgba(26,22,20,.62), 0 0 0 2px #fff, 0 0 0 5px var(--status-blocked);}
.rp-tour__card{position:fixed;width:min(350px,calc(100vw - 24px));box-sizing:border-box;padding:16px 18px 14px;
  background:var(--surface-card);border:var(--border-card);border-top:3px solid var(--status-blocked);box-shadow:var(--shadow-sheet);color:var(--text-body);}
.rp-tour__counter{color:var(--text-faint);font-size:11px;letter-spacing:.08em;}
.rp-tour__title{margin:4px 0 6px;}
.rp-tour__body{margin:0 0 14px;font-size:14px;line-height:1.55;color:var(--text-muted);}
.rp-tour__actions{display:flex;align-items:center;gap:8px;}
.rp-tour__actions .rp-spacer{flex:1;}

/* Authenticator-app QR code (drawn on the server) */
.rp-qr{display:inline-block;margin:8px 0 14px;padding:8px;background:#fff;border:1px solid var(--line-on-paper,#E3D9CB);}
.rp-qr svg{display:block;width:200px;height:200px;}

/* Account section (Components/Account/Shared/ManageLayout.razor) */
.rp-acct{max-width:860px;}
.rp-acct__who{margin:0;color:var(--text-faint);}
.rp-acct__nav{display:flex;flex-wrap:wrap;gap:6px;margin:var(--space-6) 0 var(--space-5);}
.rp-acct__tab{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:8px 12px;text-decoration:none;
  border:1px solid var(--line-on-paper,#E3D9CB);background:var(--surface-card);color:var(--text-muted);}
.rp-acct__tab:hover{color:var(--text-body);border-color:var(--text-muted);}
.rp-acct__tab.active{background:var(--text-body);border-color:var(--text-body);color:#fff;}
.rp-acct__panel{padding:var(--space-6) var(--space-7);}
.rp-acct__panel h3{font-family:var(--font-display);font-size:1.3rem;letter-spacing:-.01em;margin:0 0 14px;}
.rp-acct__panel h4{font-size:1rem;margin:18px 0 8px;}
.rp-acct__panel hr{border:0;border-top:1px solid var(--line-on-paper,#E3D9CB);margin:14px 0;}
@media (max-width:640px){.rp-acct__panel{padding:var(--space-5);}}
.rp-acct__rows{margin:0;}
.rp-acct__rows > div{display:grid;grid-template-columns:170px 1fr auto;gap:12px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--line-on-paper,#E3D9CB);}
.rp-acct__rows > div:last-child{border-bottom:0;}
.rp-acct__rows dt{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);}
.rp-acct__rows dd{margin:0;}
.rp-acct__link a{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--status-blocked);}
@media (max-width:640px){.rp-acct__rows > div{grid-template-columns:1fr auto;}.rp-acct__rows dt{grid-column:1 / -1;}}

/* Redprint Plus waiting-list prompt (Components/Redprint/PlusInterest.razor) */
.rp-plus--compact{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px;padding:10px 12px;font-size:13px;
  background:var(--surface-card);border:1px dashed var(--line-on-paper,#E3D9CB);border-left:3px solid var(--status-active);color:var(--text-body);}