:root{
  
  --ui-night:#151116;
  
  --ui-ink:#282127;
  --ui-ink-strong:#2b2327;
  --ui-ink-soft:#665a61;
  --ui-ruby:#9b1f3d;
  --ui-ruby-dark:#72152d;
  --ui-gold:#b58d4a;
  
  
  --ui-ivory:#f7f3ef;
  --ui-panel:#fffdfa;
  
  --ui-line:#ddd2ca;
  --ui-muted:#71666d;
  --ui-white:#fffdf9;
  --ui-on-dark:#fff8f2;
  
  --ui-chip-bg-soft:rgba(255,252,248,.84);
  
  

  /* Semantic result palette — one source for Edit and Reading. */
  --result-excellent-accent:#315f44;
  --result-excellent-border:#274d36;
  --result-excellent-panel-top:#c2d1ba;
  --result-excellent-panel-bottom:#adc09f;
  --result-strong-accent:#5f7135;
  --result-strong-border:#4d602c;
  --result-strong-panel-top:#c4ce8d;
  --result-strong-panel-bottom:#aebd70;
  --result-compatible-accent:#a87525;
  --result-compatible-border:#825b1c;
  --result-compatible-panel-top:#dfc47f;
  --result-compatible-panel-bottom:#cfad62;
  --result-later-accent:#915230;
  --result-later-border:#754127;
  --result-later-panel-top:#d2a27d;
  --result-later-panel-bottom:#c28a60;
  --result-fantasy-accent:#445678;
  --result-fantasy-border:#37465f;
  --result-fantasy-panel-top:#b4c0d2;
  --result-fantasy-panel-bottom:#97a8c2;
  --result-limit-accent:#7f3347;
  --result-limit-border:#652738;
  --result-limit-panel-top:#ca9faa;
  --result-limit-panel-bottom:#b47f8f;
  --result-incomplete-accent:#5d6167;
  --result-incomplete-border:#4a4e54;
  --result-incomplete-panel-top:#c4c7cc;
  --result-incomplete-panel-bottom:#aeb3b9;

    
    
     
    
      
      
  --dom-role-color:var(--person-a-role-color);
  --dom-role-dark:var(--person-a-role-dark);
  --dom-role-soft:var(--person-a-role-soft);
  --sub-role-color:var(--person-b-role-color);
  --sub-role-dark:var(--person-b-role-dark);
  --sub-role-soft:var(--person-b-role-soft);
  --role-color:var(--person-a-role-color);
  --role-dark:var(--person-a-role-dark);
  --role-soft:var(--person-a-role-soft);
   
   
       
  
  
  
  
}
*{ box-sizing:border-box; }
body{
  margin:0;  height:100dvh; min-height:100dvh; overflow:hidden;
    display:flex; flex-direction:column;
}
body > header{
  flex:0 0 auto; z-index:20; 
  backdrop-filter:blur(8px); border-bottom:1px solid var(--border);
}
.top{ max-width:1700px; margin:auto; padding:12px 16px 10px; }
h1{ margin:0 0 8px; font-size:21px; }
.version-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left:8px;
  padding:3px 7px;
  border-radius:999px;
  
  font-size:11px;
  font-weight:800;
  vertical-align:middle;
  letter-spacing:.2px;
}

.toolbar{
  display:grid; grid-template-columns:minmax(220px,1fr) 190px 190px 170px 150px;
  gap:8px; align-items:center;
}
input[type="search"],
select,
button.action{
  min-height:40px; border:1px solid var(--border); border-radius:9px;
  background:white; padding:0 11px; font-size:14px;
}
button.action{ cursor:pointer; font-weight:700; }


.randomizer{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:8px;
  padding:8px 10px; background:white; border:1px solid var(--border); border-radius:10px;
}
.randomizer label{ font-size:14px; font-weight:700; }
.randomizer select{ min-height:40px; min-width:82px; }
.randomizer .random-btn{
  min-height:40px; border:1px solid #59636b; border-radius:9px; padding:0 16px;
  background:#263238; color:white; font-size:14px; font-weight:700; cursor:pointer;
}
.random-result{
  flex:1 1 360px; min-height:40px; display:block;
  border-left:4px solid var(--accent); padding:9px 11px;
  border-radius:7px; font-size:13px; line-height:1.35;
}

.safety{
  margin-top:8px; background:white; border:1px solid var(--border); border-radius:10px; overflow:hidden;
}
.safety summary{ cursor:pointer; font-weight:800; padding:9px 11px;  }
.safety-grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; padding:10px;
}
.safety-grid label{ display:flex; flex-direction:column; gap:4px; font-size:12px; font-weight:700; }
.safety-grid input,
.safety-grid select,
.safety-grid textarea{
  width:100%; min-height:36px; border:1px solid var(--border); border-radius:8px; padding:7px;
  font:inherit; background:white;
}
.safety-grid textarea{ min-height:70px; resize:vertical; }
.safety-check-row{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
  align-items:start;
}
.safety-check{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:flex-start;
  min-height:36px;
  font-weight:600 !important;
  gap:7px !important;
  margin:0;
}
.safety-check input{ width:auto; min-height:auto; margin:0; }


main{
  width:100%; max-width:1700px; margin:10px auto 0; padding:0 16px 10px;
  flex:1 1 auto; min-height:0; display:flex; flex-direction:column;
}

.cat{ font-weight:700; font-size:12px; padding:6px; }

.practice{ font-weight:700; transition:background .12s; }

.score-btn{ border-radius:8px; border:1px solid rgba(0,0,0,.14);
  cursor:pointer; font-weight:800;  
}
.score-btn:hover{ outline:2px solid #7c858c; outline-offset:1px; }
.score-btn.selected{ outline:3px solid #202124; outline-offset:-3px; }


.done{
  width:58px; height:44px; border:2px solid #aeb5bb; border-radius:10px;
   cursor:pointer; font-size:26px; font-weight:800;
}


.after.disabled{ opacity:.55; filter:grayscale(1); pointer-events:none; }

.section-dot{
  width:12px; height:12px; border-radius:50%; border:1px solid rgba(0,0,0,.15); flex:0 0 auto;
}

.hidden{ display:none !important; }

.empty{
  text-align:center; color:var(--muted); padding:40px; background:white;
}

@media (max-width:1100px) {
  .toolbar{ grid-template-columns:1fr 1fr; }
  .random-result{ flex-basis:100%; }
  .safety-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:650px) {
  
  
  

  body{
    height:100dvh;
    min-height:100dvh;
    overflow:hidden;
  }

  header{
    border-bottom:1px solid var(--border);
  }

  h1{
    line-height:1.15;
    margin:0 0 6px;
  }

  .toolbar{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:5px;
    width:100%;
  }
  .toolbar #search{
    grid-column:1 / -1;
    min-height:40px;
    font-size:14px;
  }
  input[type="search"],
select,
button.action{
    min-height:34px;
    font-size:12px;
    padding:0 7px;
  }

  .randomizer{
    margin-top:5px;
    overflow-x:hidden;
  }
  .randomizer label{
    font-size:11px;
    align-self:center;
    white-space:nowrap;
  }
  .randomizer select,
.randomizer .random-btn{
    min-height:34px;
    min-width:0;
    font-size:11px;
    padding:0 6px;
  }
  .randomizer .random-btn{
    white-space:nowrap;
  }
  .random-result{
    min-height:auto;
  }

  .safety{
    margin-top:5px;
  }
  .safety summary{
    padding:6px 8px;
    font-size:12px;
  }
  .safety-grid{
    grid-template-columns:1fr;
    padding:7px;
    gap:7px;
  }
  .safety-check-row{
    grid-template-columns:1fr;
    gap:7px;
  }

  main{
    padding:0 8px 5px;
    min-height:0;
  }

  .legend-help{
    display:none;
  }

  .cat{
    padding:3px;
    font-size:8.5px;
  }
  
  .practice{
    font-size:11px;
    line-height:1.2;
  }

  .score-btn{
    border-radius:7px;
  }
  .done{
    width:44px;
    height:36px;
    font-size:20px;
  }

  h1{
    margin-bottom:4px;
  }
  .all-tools{
    border-radius:8px;
  }
  .all-tools > summary{
    padding:5px 8px;
    font-size:11px;
  }
  .all-tools-content{
    max-height:52vh;
    gap:5px;
  }
  .tool-section{
    padding:6px;
  }
  .tool-section h2{
    margin-bottom:5px;
    font-size:11px;
  }
  
  
  main{
    margin-top:3px;
  }

  .backup-actions{
    max-width:none;
  }
  .backup-actions .action{
    min-height:36px;
  }

  .display-filter-section{
    touch-action:pan-y pinch-zoom;
  }

  .all-tools-content,
.all-tools-content *{
    touch-action:pan-y pinch-zoom;
  }
}
.all-tools{
  border:1px solid var(--border);
  border-radius:10px;
  
  overflow:hidden;
}
.all-tools > summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  padding:7px 11px;
  font-weight:800;
  font-size:13px;
  user-select:none;
}
.all-tools > summary::-webkit-details-marker{ display:none; }
.all-tools > summary::after{
  content:"▾";
  margin-left:auto;
  transition:transform .15s ease;
}
.all-tools:not([open]) > summary::after{ transform:rotate(-90deg); }

.all-tools-content{
  max-height:min(58vh, 620px);
  overflow-y:auto;
  overflow-x:hidden;
  padding:8px;
  display:grid;
  gap:8px;
  
  scrollbar-width:thin;
}
.tool-section{
  border:1px solid var(--border);
  border-radius:9px;
  
  padding:8px;
}
.tool-section h2{
  margin:0 0 7px;
  font-size:13px;
}
.tool-section .randomizer,
.tool-section .safety{
  margin-top:0;
}

.all-tools .toolbar{
  width:100%;
  min-width:0;
}

.all-tools .toolbar > *{
  min-width:0;
  max-width:100%;
}

.all-tools .randomizer{
  width:100%;
  min-width:0;
}

.all-tools .randomizer > *{
  min-width:0;
  max-width:100%;
}

.all-tools .safety-grid,
.all-tools .tool-section{
  min-width:0;
  max-width:100%;
}
.backup-actions{
  grid-column:1 / -1;
  justify-self:end;
  display:grid;
  gap:7px;
}
.backup-actions .action{
  width:100%;
  min-width:0;
}

.all-tools-content{
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y pinch-zoom;
  overscroll-behavior-y:contain;
}


body > header{
  
  transition:background .18s ease;
}



.role-switch{
  display:grid;
  border:1px solid var(--border);
  border-radius:10px;
  overflow:hidden;
  
  box-shadow:0 1px 3px rgba(0,0,0,.06);
}
.role-choice{
  min-height:36px;
  border:0;
  
  padding:0 13px;
  font-size:12px;
  font-weight:900;
  cursor:pointer;
}
.role-choice + .role-choice{
  border-left:1px solid var(--border);
}
.role-choice.role-sub{ color:var(--sub-role-color); }
.role-choice.role-dom{ color:var(--dom-role-color); }
.role-choice.role-sub.active{
  background:var(--sub-role-color);
  color:#fff;
}
.role-choice.role-dom.active{
  background:var(--dom-role-color);
  color:#fff;
}


@media (max-width:650px) {
  
  
  
  
  .role-choice{
    padding:0 6px;
  }
}



@media (max-width:650px) {
  
  
  
}
.reset-zone{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border-top:1px solid #d8dde3;
  padding:9px 2px 1px;
  color:var(--muted);
  font-size:10px;
}
.reset-btn{
  flex:0 0 auto;
  min-height:34px;
  border:1px solid #B55252;
  border-radius:9px;
  background:#fff;
  color:#9B3030;
  padding:0 11px;
  font-size:11px;
  font-weight:900;
  cursor:pointer;
}
.reset-btn:hover{
  background:#FFF1F1;
}
.reset-btn:disabled{
  opacity:.45;
  cursor:not-allowed;
}

@media (max-width:650px) {
  
  
  

  .reset-zone{
    align-items:stretch;
    flex-direction:column;
    gap:4px;
    padding-top:7px;
  }
  .reset-btn{
    width:100%;
    min-height:36px;
  }
}

.all-tools > summary{
  gap:8px;
}


.exchange-info{
  grid-column:1 / -1;
  width:100%;
  min-width:0;
  border:1px solid #dde2e6;
  border-radius:7px;
  background:#f7f8f9;
  color:var(--muted);
  font-size:10px;
}

.random-options{
  flex:1 1 100%;
  display:flex;
  flex-wrap:wrap;
  gap:6px 14px;
  padding:5px 0 0;
}
.random-options label{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:11px;
  font-weight:700;
  cursor:pointer;
}
.random-options input{
  width:16px;
  height:16px;
}

.random-candidate-info{
  flex:1 1 100%;
  font-size:10px;
  line-height:1.25;
  color:var(--muted);
}

.random-candidate-info{
  margin-top:-2px;
}

@media (max-width:650px) {
  
  
  
  .random-candidate-info{
    font-size:9px;
  }
}
.practice{
  gap:6px;
}

.session-toolbar{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.session-toolbar .action{
  flex:1 1 170px;
}
.reset-session-btn{
  border-color:#B55252 !important;
  color:#9B3030 !important;
  background:#fff !important;
}
.session-summary{
  margin-top:6px;
  font-size:10px;
  font-weight:800;
  color:var(--muted);
}
.session-list{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-top:6px;
  max-height:280px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.session-item{
  display:grid;
  grid-template-columns:24px minmax(0,1fr) 30px 30px 30px;
  align-items:center;
  gap:4px;
  min-height:34px;
  padding:4px 5px;
  border:1px solid #dde2e6;
  border-radius:7px;
  background:#fff;
}
.session-index{
  text-align:center;
  font-size:10px;
  font-weight:900;
  color:var(--muted);
}
.session-name{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:10px;
  font-weight:800;
}
.session-move,
.session-remove{
  width:28px;
  height:28px;
  padding:0;
  border:1px solid #ccd2d7;
  border-radius:6px;
  background:#f7f8f9;
  cursor:pointer;
  font-weight:900;
}
.session-remove{
  color:#9B3030;
}
.session-move:disabled,
.session-remove:disabled{
  opacity:.35;
  cursor:not-allowed;
}


@media (max-width:650px) {
  
  
  
  .session-list{
    max-height:230px;
  }
  .session-item{
    grid-template-columns:21px minmax(0,1fr) 28px 28px 28px;
    gap:3px;
  }
  .session-move,
.session-remove{
    width:26px;
    height:26px;
  }
}
.backup-actions{
  width:min(100%, 520px);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.backup-actions .restore-backup{
  border-color:#687078;
}
.backup-actions .full-backup{
  border-color:#34383c;
  font-weight:900;
}
.backup-actions .person-a-backup{
  
  
  
  font-weight:900;
}
.backup-actions .person-b-backup{
  
  
  
  font-weight:900;
}
.backup-hint{
  grid-column:1 / -1;
  width:100%;
  min-width:0;
  color:var(--muted);
  font-size:9px;
  text-align:right;
}
@media (max-width:650px) {
  
  
  .backup-actions{
    width:100%;
    justify-self:stretch;
    gap:5px;
  }
}
.language-switch{
  display:inline-grid;
  grid-template-columns:1fr 1fr;
  border:1px solid var(--border);
  border-radius:10px;
  overflow:hidden;
  background:#fff;
}
.language-choice{
  border:0;
  border-right:1px solid var(--border);
  
  font-size:10px;
  font-weight:900;
  cursor:pointer;
}
.language-choice:last-child{ border-right:0; }

.help-button{
  height:36px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
  
  font-size:17px;
  font-weight:950;
  line-height:1;
  cursor:pointer;
}
.help-button:hover,
.help-button:focus-visible{
  border-color:var(--role-color);
  box-shadow:0 0 0 2px var(--role-soft);
  outline:none;
}

.help-modal[hidden]{ display:none !important; }
.help-modal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
}
.help-backdrop{
  position:absolute;
  inset:0;
  background:rgba(20,24,27,.66);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}
.help-dialog{
  position:relative;
  width:min(920px, 94vw);
  height:min(860px, 90vh);
  max-height:90dvh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid #bcc3c8;
  border-radius:16px;
  background:#f8f9fa;
  box-shadow:0 24px 70px rgba(0,0,0,.32);
}
.help-header{
  flex:0 0 auto;
  min-height:66px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:11px 14px 10px 17px;
  border-bottom:1px solid #d7dce0;
  background:#fff;
  box-shadow:0 1px 6px rgba(0,0,0,.05);
}
.help-kicker{
  margin-bottom:1px;
  color:var(--role-color);
  font-size:9px;
  font-weight:950;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.help-header h2{
  margin:0;
  font-size:18px;
  line-height:1.15;
}
.help-close{
  flex:0 0 auto;
  width:38px;
  height:38px;
  border:1px solid #ccd2d6;
  border-radius:10px;
  background:#f5f6f7;
  color:#2d3337;
  font-size:17px;
  font-weight:900;
  cursor:pointer;
}
.help-close:hover,
.help-close:focus-visible{
  background:#e8eaec;
  outline:2px solid var(--role-soft);
}
.help-body{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:15px 17px 26px;
  scroll-behavior:smooth;
}
.help-intro{
  margin:0 0 10px;
  padding:11px 12px;
  border-left:4px solid var(--role-color);
  border-radius:0 9px 9px 0;
  background:var(--role-soft);
  font-size:12px;
  line-height:1.45;
}

.help-section{
  scroll-margin-top:54px;
  padding:11px 0 12px;
  border-bottom:1px solid #e0e3e6;
}
.help-section h3{
  margin:0 0 7px;
  color:#252a2e;
  font-size:13px;
  line-height:1.2;
}
.help-section p{
  margin:5px 0;
  color:#454b50;
  font-size:11px;
  line-height:1.48;
}

.help-end{
  padding:17px 0 3px;
  text-align:center;
  color:#80878c;
  font-size:9px;
  font-weight:800;
}
body.help-open{
  overflow:hidden;
}

@media (max-width:650px) {
  
  
  .help-button{
    align-self:stretch;
  }

  .help-modal{
    padding:8px;
    align-items:stretch;
  }
  .help-dialog{
    width:100%;
    height:auto;
    max-height:calc(100dvh - 16px);
    border-radius:13px;
  }
  .help-header{
    min-height:58px;
    padding:9px 10px 8px 13px;
  }
  .help-header h2{
    font-size:15px;
  }
  .help-close{
    width:36px;
    height:36px;
  }
  .help-body{
    padding:11px 12px 22px;
  }
  .help-intro{
    font-size:10.5px;
  }

  .help-section{
    padding:9px 0 10px;
    scroll-margin-top:50px;
  }
  .help-section h3{
    font-size:11.5px;
  }
  .help-section p{
    font-size:10px;
    line-height:1.42;
  }

}









.role-switch,
.language-switch,
.help-button{
  box-sizing:border-box;
}
@media (max-width:820px) {
  .role-switch{ min-width:0; }
}

.language-switch{
  width:108px;
  min-width:108px;
  height:36px;
}

.language-choice{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-width:0;
  padding:0 7px;
  white-space:nowrap;
}

.flag-svg{
  display:block;
  width:23px;
  height:15px;
  flex:0 0 auto;
  border-radius:1px;
  box-shadow:0 0 0 1px rgba(0,0,0,.14);
}

.language-choice span{
  display:block;
  min-width:0;
}

.help-button{
  width:40px;
  min-width:40px;
}

@media (max-width:1180px) and (min-width:821px) {
  

  

  .role-switch,
.language-switch,
.help-button{
    height:36px;
  }

  .language-switch{
    width:100%;
    min-width:0;
  }

  .toolbar{
    grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  }

  .toolbar #search{
    grid-column:1 / -1;
  }
}
@media (max-width:820px) and (min-width:651px) {
  .top{
    padding-left:12px;
    padding-right:12px;
  }

  

  .title-extra{
    display:none;
  }

  

  .role-switch{
    width:100%;
  }

  .role-switch,
.language-switch,
.help-button{
    height:36px;
    min-height:36px;
  }

  .toolbar{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  }

  .toolbar #search{
    grid-column:1 / -1;
  }

  .safety-grid{
    grid-template-columns:1fr 1fr;
  }

  .randomizer{
    gap:6px;
  }
}
@media (max-width:650px) {

  .language-choice{
    font-size:9px;
  }
}
@media (max-width:390px) {
  .role-choice{
    font-size:9px;
    padding:0 4px;
  }

  .language-choice{
    gap:3px;
    padding:0 3px;
  }

  .flag-svg{
    width:19px;
    height:13px;
  }

}
@media (max-width:650px) {
  
  
  .randomizer{
    display:grid;
    grid-template-columns:minmax(0,1fr) 66px;
    align-items:center;
    gap:7px;
    width:100%;
    padding:8px;
    overflow:visible;
  }

  .randomizer > .random-btn{
    grid-column:1 / -1;
    width:100%;
    min-width:0;
    min-height:38px;
    white-space:normal;
    line-height:1.15;
  }

  .random-options{
    grid-column:1 / -1;
    display:grid;
    gap:6px;
    width:100%;
    padding:2px 0 0;
  }

  .random-options label{
    display:flex;
    align-items:center;
    gap:7px;
    width:100%;
    min-width:0;
    font-size:10px;
    line-height:1.2;
    white-space:normal;
  }

  .random-options input{
    flex:0 0 auto;
    width:18px;
    height:18px;
  }

  

  .random-candidate-info{
    grid-column:1 / -1;
    width:100%;
    min-width:0;
    margin:0;
    padding:1px 0 0;
    font-size:9px;
    line-height:1.25;
  }

  .random-result{
    grid-column:1 / -1;
    width:100%;
    min-width:0;
    margin:1px 0 0;
    padding:7px 9px;
    font-size:10px;
    line-height:1.3;
    overflow-wrap:anywhere;
  }
}
.exchange-info{
  display:flex;
  align-items:center;
  min-height:30px;
  margin-top:6px;
  margin-bottom:7px;
  padding:6px 9px;
  text-align:left;
  line-height:1.25;
}


.backup-hint{
  margin-top:2px;
  line-height:1.3;
}

@media (max-width:650px) {
  
  
  .backup-hint{
    margin-top:3px;
    margin-bottom:0;
    padding:0 1px;
    font-size:8.5px;
    line-height:1.3;
    text-align:left;
  }

  .exchange-info{
    min-height:31px;
    margin-top:7px;
    margin-bottom:8px;
    padding:6px 8px;
    font-size:9px;
    line-height:1.25;
  }

  

  
}
.explore-strip{
  display:grid;
  grid-template-columns:minmax(260px,1fr) auto;
  gap:8px 12px;
  align-items:center;
  margin:0 0 8px;
  padding:9px 10px;
  border:1px solid #d8dde1;
  border-radius:10px;
  background:#fff;
}
.explore-copy{
  grid-column:1 / -1;
  font-size:12px;
  line-height:1.3;
  font-weight:800;
  color:#364047;
}
.experience-controls{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  min-width:0;
}
.experience-label{
  font-size:11px;
  font-weight:900;
  white-space:nowrap;
}
.experience-switch{
  display:inline-grid;
  grid-template-columns:repeat(3,auto);
  overflow:hidden;
  border:1px solid #bcc4ca;
  border-radius:9px;
  background:#fff;
}
.experience-switch button{
  min-height:34px;
  border:0;
  border-right:1px solid #d3d8dc;
  padding:5px 10px;
  background:#fff;
  color:#354047;
  font-size:10px;
  font-weight:900;
  cursor:pointer;
  white-space:nowrap;
}
.experience-switch button:last-child{ border-right:0; }
.experience-switch button.active{
  background:var(--role-color);
  color:#fff;
}
.experience-switch button[data-experience-mode="beginner"]:not(.active){ box-shadow:inset 0 3px 0 #78A66A; }
.experience-switch button[data-experience-mode="confirmed"]:not(.active){ box-shadow:inset 0 3px 0 #D29A43; }
.experience-switch button[data-experience-mode="advanced"]:not(.active){ box-shadow:inset 0 3px 0 #A55353; }
.experience-note{
  font-size:9px;
  line-height:1.2;
  color:var(--muted);
}

.score-btn{
  width:31px;
  height:38px;
  font-size:13px;
}

.score-btn.unknown-score{
  background:#f5f6f7;
}

.score-btn.unknown-score{
  color:#59636a;
  border-style:dashed;
}
.score-btn.unknown-score.selected{
  
  outline:3px solid #59636a;
}
.risk-badge{
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
  margin-left:4px; min-width:17px; height:17px; padding:0 4px; border-radius:999px;
  font-size:9px; line-height:1; font-weight:950; border:1px solid rgba(0,0,0,.12);
}
.risk-badge.risk-caution{ background:#fff4dd; color:#7a5711; }
.risk-badge.risk-high{ background:#f7dddd; color:#8b2635; border-color:#d8a0a7; }
.limit-score{ font-size:14px !important; }

@media (max-width:980px) {
  .explore-strip{
    grid-template-columns:1fr;
  }
}
@media (max-width:650px) {
  
  
  .explore-strip{
    gap:7px;
    margin-bottom:7px;
    padding:8px;
  }
  .explore-copy{
    font-size:10px;
  }
  .experience-controls{
    display:grid;
    grid-template-columns:1fr;
    gap:4px;
    width:100%;
  }
  .experience-label{
    font-size:9px;
  }
  .experience-switch{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    width:100%;
  }
  .experience-switch button{
    min-width:0;
    padding:5px 3px;
    font-size:9px;
    white-space:normal;
    line-height:1.1;
  }
  .experience-note{
    font-size:8px;
  }

  .score-btn{
    width:29px;
    height:34px;
    font-size:11px;
  }
  
  }
.exploration-tool-section .explore-strip{
  margin-bottom:0;
}
@media (max-width:650px) {
  
  
  .exploration-tool-section .explore-strip{
    margin-bottom:0;
  }
}

.random-cycle-reset{
  border:1px solid #c8cdd1; border-radius:8px; background:#fff; color:#4f575e;
  min-height:30px; padding:0 9px; font-size:10px; font-weight:800; cursor:pointer;
}
.random-cycle-reset:hover{ background:#f1f3f4; }
.random-result-actions{ display:flex; gap:6px; flex-wrap:wrap;  }
.random-session-btn{
  min-height:32px;   
   color:#725700;  
}

.session-mode-btn{    font-weight:900 !important; }
.session-mode[hidden]{ display:none !important; }
.session-mode{
  position:fixed; inset:0; z-index:10020; display:flex; align-items:stretch; justify-content:center;
  padding:18px; background:rgba(25,30,34,.62); backdrop-filter:blur(4px);
}
body.session-mode-open{ overflow:hidden !important; }
.session-mode-panel{
  width:min(980px,100%); max-height:100%; display:flex; flex-direction:column; overflow:hidden;
  border:1px solid #cfd5da; border-radius:14px; background:#f5f6f7; box-shadow:0 18px 60px rgba(0,0,0,.28);
}
.session-mode-head{
  flex:0 0 auto; display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding:14px 16px; border-top:4px solid var(--role-color); border-bottom:1px solid var(--border); background:#fff;
}
.session-mode-head h2{ margin:0; font-size:20px; }
.session-mode-head p{ margin:4px 0 0; color:var(--muted); font-size:11px; }
.session-mode-head-actions{ flex:0 0 auto; display:flex; align-items:center; gap:7px; }

.session-mode-close{
  flex:0 0 auto; width:38px; height:38px; border:1px solid var(--border); border-radius:9px;
  background:#fff; color:#394047; font-size:24px; line-height:1; cursor:pointer;
}
.session-mode-body{ flex:1 1 auto; min-height:0; overflow:auto; padding:12px; -webkit-overflow-scrolling:touch; }
.session-mode-safety{
  margin-bottom:10px; padding:10px 12px; border:1px solid var(--border); border-left:4px solid var(--role-color);
  border-radius:10px; 
}
.session-mode-safety h3{ margin:0 0 7px; font-size:13px; }
.session-safety-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 12px; }
.session-safety-item{ min-width:0; font-size:11px; line-height:1.3; color:#3e464c; }
.session-safety-item strong{ color:#252b30; }

.session-mode-card{
  border:1px solid var(--border); border-radius:10px;  overflow:hidden;
}
.session-mode-card-head{
  display:flex; align-items:flex-start; gap:8px; padding:9px 10px 8px; border-left:5px solid var(--category-color,#9aa0a6);
}
.session-mode-index{
  flex:0 0 auto; min-width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px;   font-size:10px; font-weight:900;
}
.session-mode-title-wrap{ flex:1 1 auto; min-width:0; }
.session-mode-category{ font-size:9px; font-weight:900; color:var(--muted); margin-bottom:2px; }
.session-mode-practice{ font-size:14px; line-height:1.25; font-weight:900; color:#252b30; }
.session-mode-meta{ flex:0 0 auto; display:flex; gap:4px; align-items:center; }
.session-mode-compat{
  display:inline-flex; align-items:center; justify-content:center; height:22px;
  border-radius:999px; border:1px solid rgba(0,0,0,.12); font-size:9px; font-weight:900;
}
.session-mode-expl{ padding:0 10px 9px 47px; color:#555e65; font-size:11px; line-height:1.35; }

.session-mode-together{
  display:flex; align-items:center; gap:6px; white-space:nowrap; font-size:10px; font-weight:900; color:#3e464c;
}
.session-mode-together input{ width:18px; height:18px; }

@media (max-width:650px) {
  
  
  .session-toolbar .action{ flex:1 1 105px; font-size:10px; padding:0 5px; }
  .random-options{ grid-template-columns:1fr !important; }
  .random-cycle-reset{ width:100%; min-height:32px; }
  .session-mode{ padding:0; }
  .session-mode-panel{ width:100%; max-height:100dvh; border:0; border-radius:0; }
  .session-mode-head{ padding:10px; }
  .session-mode-head h2{ font-size:17px; }
  .session-mode-head-actions{ gap:5px; }
  
  .session-mode-close{ width:34px; height:34px; }
  .session-mode-body{ padding:8px; }
  .session-safety-grid{ grid-template-columns:1fr; gap:4px; }
  .session-mode-card-head{ padding:8px; }
  .session-mode-expl{ padding:0 8px 8px 40px; font-size:10px; }
  .session-mode-practice{ font-size:12px; }
  
  .session-mode-together{ white-space:normal; }
}
:root{
  --shadow-soft:0 1px 3px rgba(24,32,38,.06);
  
  --focus-ring:0 0 0 3px color-mix(in srgb, var(--role-color) 25%, transparent);
}

body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,Helvetica,sans-serif;
  text-rendering:optimizeLegibility;
}
button,
select,
input,
textarea{ font-family:inherit; }
button,
select,
input,
textarea{
  transition:border-color .12s ease, background-color .12s ease, box-shadow .12s ease, transform .07s ease;
}
button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible{
  outline:2px solid var(--role-color) !important;
  outline-offset:2px !important;
  box-shadow:var(--focus-ring);
}
button:disabled{ box-shadow:none !important; }


.all-tools > summary{ min-height:38px; }
.all-tools[open] > summary{
  
  border-bottom:1px solid var(--border);
}
.all-tools > summary:hover{ filter:brightness(.985); }

.tool-section h2{
  
  letter-spacing:-.01em;
}
.explore-strip{ box-shadow:none; }


input[type="search"]:hover,
select:hover{ border-color:#b7c0c7; }

.score-btn,
.session-mode-compat{
  font-variant-numeric:tabular-nums;
}

.score-btn.limit-score:hover:not(:disabled){ background:#f7dadd !important; }
.score-btn.limit-score.selected{
  outline-color:#8b2635 !important;
  box-shadow:inset 0 0 0 1px rgba(139,38,53,.16);
}


.risk-badge{ vertical-align:middle; }
.risk-badge.risk-high{ box-shadow:inset 0 0 0 1px rgba(139,38,53,.05); }


.random-session-btn:hover:not(:disabled),
.session-mode-btn:hover:not(:disabled){
  filter:brightness(.975);
}
.session-mode-card{ box-shadow:var(--shadow-soft); }


.session-mode-close:hover{ background:#f1f3f4; }
.session-mode-safety{ box-shadow:var(--shadow-soft); }

@media (max-width:650px) {
  
  
  .top{
    padding-left:max(8px, env(safe-area-inset-left, 0px));
    padding-right:max(8px, env(safe-area-inset-right, 0px));
  }
  h1{
    font-size:16px;
    letter-spacing:-.015em;
  }
  .version-badge{
    margin-left:5px;
    padding:2px 6px;
    font-size:9px;
  }
  .role-choice,
.language-switch,
.help-button{ min-height:31px; height:31px; }
  
  .all-tools > summary{ min-height:36px; }
  .all-tools-content{ padding:6px; }
  .tool-section{ border-radius:10px; }

  .session-mode-head{
    padding-top:max(10px, env(safe-area-inset-top, 0px));
    padding-left:max(10px, env(safe-area-inset-left, 0px));
    padding-right:max(10px, env(safe-area-inset-right, 0px));
  }
  .session-mode-body{
    padding-bottom:max(8px, env(safe-area-inset-bottom, 0px));
  }
}

@media (hover:hover) {
  button:not(:disabled):hover{ border-color:#aeb7be; }
  
}

@media (prefers-reduced-motion:reduce) {
  *,
*::before,
*::after{
    scroll-behavior:auto !important;
    transition-duration:.001ms !important;
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
  }
}

.score-btn.semantic-score-btn{
  width:auto;
  min-width:54px;
  padding:0 8px;
  font-size:10px;
  line-height:1.05;
  white-space:nowrap;
}
.score-btn.semantic-score-btn[data-score="0"]{
  width:42px;
  min-width:42px;
  padding:0;
  font-size:15px;
}
.score-btn.semantic-score-btn[data-score="1"],
.score-btn.semantic-score-btn[data-score="5"],
.score-btn.semantic-score-btn[data-score="2"],
.score-btn.semantic-score-btn[data-score="3"],
.score-btn.semantic-score-btn[data-score="4"]{
  width:70px;
  min-width:70px;
  padding-inline:5px;
}
.score-btn.semantic-score-btn[data-score="1"],
.score-btn.semantic-score-btn[data-score="5"],
.score-btn.semantic-score-btn[data-score="3"],
.score-btn.semantic-score-btn[data-score="4"]{
  white-space:normal;
  line-height:1.05;
}
.score-btn.semantic-score-btn{
  overflow:hidden;
  text-overflow:clip;
}
.score-btn.semantic-score-btn[data-score="1"],
.score-btn.semantic-score-btn[data-score="5"]{
  overflow:hidden;
  text-overflow:clip;
  word-break:normal;
  overflow-wrap:normal;
}

.semantic-legend{
  align-items:stretch;
  gap:6px;
}
.semantic-legend > strong{
  align-self:center;
}
.semantic-legend-item{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:38px;
  padding:5px 8px;
  border:1px solid rgba(0,0,0,.10);
  border-radius:7px;
  color:#252b30;
}
.semantic-legend-item b{ font-size:10px; line-height:1.1; }
.semantic-legend-item small{ margin-top:2px; font-size:8.5px; line-height:1.15; font-weight:600; opacity:.78; }

.session-mode-compat{ width:auto; min-width:34px; padding:0 6px; white-space:nowrap; }
@media (max-width:650px) {
  
  
  .score-btn.semantic-score-btn{
    height:34px;
    padding:0 6px;
    font-size:9px;
  }
  .score-btn.semantic-score-btn[data-score="0"]{
    width:38px;
    min-width:38px;
    padding:0;
  }
  .score-btn.semantic-score-btn[data-score="1"],
.score-btn.semantic-score-btn[data-score="5"],
.score-btn.semantic-score-btn[data-score="2"],
.score-btn.semantic-score-btn[data-score="3"],
.score-btn.semantic-score-btn[data-score="4"]{
    width:59px;
    min-width:59px;
    padding-inline:3px;
  }

  .semantic-legend{ display:grid; grid-template-columns:1fr; width:100%; }
  .semantic-legend > strong,
.semantic-legend .legend-help{ grid-column:1 / -1; }
  .semantic-legend-item{ min-height:34px; }
}
.help-intro,
.help-section p{
  text-wrap:pretty;
  overflow-wrap:break-word;
}

@media (min-width:651px) {
  .backup-actions{
    grid-column:1 / -1;
    width:100%;
    max-width:none;
    justify-self:stretch;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px;
  }
  .backup-actions .action{
    width:100%;
    min-width:0;
  }
  .backup-hint{
    grid-column:1 / -1;
    text-align:right;
    margin-top:-1px;
  }
}
@media (max-width:650px) {
  
  
  .backup-actions{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (min-width:1101px) {
  .toolbar{
    grid-template-columns:minmax(220px,1fr) 205px 205px 225px 175px;
  }
}


.fantasy-session-badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:2px 6px;
  border:1px solid #7890b8;
  border-radius:999px;
  background:#dce5f5;
  color:#314a70;
  font-size:9px;
  font-weight:900;
  line-height:1.2;
  white-space:nowrap;
}
.session-item.is-fantasy{
  border-color:#9db0cf;
  background:#f5f8fd;
}
.random-fantasy-warning,
.session-mode-fantasy-banner{
  margin:7px 0;
  padding:7px 9px;
  border:1px solid #7890b8;
  border-left:4px solid #5d78a6;
  border-radius:7px;
  background:#eef3fb;
  color:#2f466b;
  font-size:10px;
  font-weight:800;
  line-height:1.35;
}
.session-mode-card.fantasy-only{
  border-color:#7890b8;
  box-shadow:inset 0 0 0 1px rgba(93,120,166,.12), var(--shadow-soft);
}
@media (max-width:650px) {
  
  
  
  
  
  .fantasy-session-badge{ font-size:8px; }
}
@media (min-width:1900px) and (min-aspect-ratio:2/1) {
  .top,
main{
    max-width:min(96vw, 3200px);
  }

  .top,
main{
    padding-left:18px;
    padding-right:18px;
  }

  .all-tools-content{
    grid-template-columns:minmax(0,1.22fr) minmax(560px,.78fr);
    grid-template-areas:
      "explore explore"
      "filters random"
      "safety session"
      "display display";
    grid-auto-flow:row;
    align-items:start;
    align-content:start;
    max-height:min(48vh, 560px);
    gap:7px;
  }

  .exploration-tool-section{ grid-area:explore; }
  .filters-backup-section{ grid-area:filters; }
  .random-tool-section{ grid-area:random; }
  .safety-tool-section{ grid-area:safety; }
  .session-section{ grid-area:session; }
  .display-filter-section{ grid-area:display; }

  .toolbar{
    grid-template-columns:minmax(300px,1fr) 190px 190px 215px 165px;
    gap:6px;
  }

  .backup-actions{
    width:100%;
    grid-template-columns:repeat(4,minmax(0,1fr));
  }

  .randomizer{
    align-content:start;
  }

  .random-result{
    flex-basis:100%;
  }

  .safety-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
  .safety-slow-word{ grid-column:1; grid-row:1; }
  .safety-slow-signal{ grid-column:1; grid-row:2; }
  .safety-stop-word{ grid-column:2; grid-row:1; }
  .safety-stop-signal{ grid-column:2; grid-row:2; }
  .safety-marks{ grid-column:3; grid-row:1; }
  .safety-hard-limits{ grid-column:3; grid-row:2; }
  .safety-media{ grid-column:4; grid-row:1; }
  .safety-aftercare{ grid-column:4; grid-row:2; }

  .safety-check-row{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .session-list{
    max-height:120px;
    overflow:auto;
  }

}
@media (min-width:1900px) and (min-aspect-ratio:2/1) and (max-height:760px) {
  .all-tools-content{
    max-height:44vh;
  }
  .explore-strip{
    padding:5px 7px;
    margin-bottom:0;
  }
  .tool-section{
    padding:6px;
  }
  .tool-section h2{
    margin-bottom:5px;
  }
  
}
html.adult-gate-required{ overflow:hidden; }
.adult-gate{
  display:none;
  position:fixed;
  inset:0;
  z-index:20000;
  align-items:center;
  justify-content:center;
  padding:20px;
}
html.adult-gate-required .adult-gate{ display:flex; }
.adult-gate-backdrop,
.info-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,19,22,.78);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}
.adult-gate-dialog{
  position:relative;
  width:min(620px, 94vw);
  max-height:90dvh;
  overflow:auto;
  border:1px solid #bcc3c8;
  border-radius:18px;
  background:#fff;
  box-shadow:0 28px 90px rgba(0,0,0,.42);
  padding:22px;
}
.adult-gate-badge{
  width:56px;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 12px;
  border-radius:50%;
  
  
  font-size:20px;
  font-weight:950;
  letter-spacing:.2px;
}
.adult-gate-dialog h2{
  margin:0 0 10px;
  text-align:center;
  font-size:22px;
}
.adult-gate-dialog p{
  margin:8px 0;
  color:#444d54;
  font-size:13px;
  line-height:1.5;
}
.adult-gate-notice{
  margin:14px 0;
  padding:11px 12px;
  border-left:4px solid #B58B00;
  border-radius:8px;
  
  
  font-size:12px;
  line-height:1.45;
}
.adult-gate-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  margin-top:16px;
}
.adult-gate-actions button{
  min-height:44px;
  border-radius:10px;
  border:1px solid var(--border);
  padding:0 13px;
  font:inherit;
  font-weight:900;
  cursor:pointer;
}
.adult-accept{
  background:#263238;
  border-color:#263238 !important;
  color:#fff;
}

.adult-gate-privacy{
  margin-top:11px !important;
  text-align:center;
  color:var(--muted) !important;
  font-size:11px !important;
}
html[lang="fr"] .adult-lang-en,
html[lang="en"] .adult-lang-fr{ display:none !important; }

.site-footer{
  flex:0 0 auto;
  min-height:25px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:3px 10px calc(3px + env(safe-area-inset-bottom));
  border-top:1px solid var(--border);
  
  
  font-size:10px;
  z-index:19;
}
.site-footer button{
  border:0;
  padding:2px 3px;
  background:transparent;
  color:#4d5961;
  font:inherit;
  font-weight:800;
  text-decoration:underline;
  text-underline-offset:2px;
  cursor:pointer;
}
.site-footer button:hover,
.site-footer button:focus-visible{ color:#202124; outline:1px solid #8c969d; border-radius:4px; }

.info-modal[hidden]{ display:none !important; }
.info-modal{
  position:fixed;
  inset:0;
  z-index:15000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.info-modal-dialog{
  position:relative;
  width:min(760px, 94vw);
  max-height:88dvh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid #bcc3c8;
  border-radius:16px;
  background:#f8f9fa;
  box-shadow:0 24px 70px rgba(0,0,0,.32);
}
.info-modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border-bottom:1px solid #d7dce0;
  background:#fff;
}
.info-modal-head h2{ margin:0; font-size:18px; }
.info-modal-close{
  width:36px;
  height:36px;
  border:1px solid var(--border);
  border-radius:9px;
  background:#fff;
  font-weight:900;
  cursor:pointer;
}
.info-modal-body{ overflow:auto; padding:14px; }
.info-modal-section{
  padding:12px 13px;
  margin:0 0 10px;
  border:1px solid #dce1e5;
  border-radius:10px;
  background:#fff;
  scroll-margin-top:10px;
}
.info-modal-section:last-child{ margin-bottom:0; }
.info-modal-section h3{ margin:0 0 7px; font-size:14px; }
.info-modal-section p,
.info-modal-section li{ font-size:12px; line-height:1.5; color:#4c555c; }
.info-modal-section p{ margin:6px 0; }
.info-modal-section ul{ margin:6px 0 0; padding-left:19px; }

@media (max-width:640px) {
  .adult-gate{ padding:10px; }
  .adult-gate-dialog{ padding:17px 14px; border-radius:14px; }
  .adult-gate-dialog h2{ font-size:19px; }
  .adult-gate-actions{ grid-template-columns:1fr; }
  .site-footer{ font-size:9px; gap:3px; }
  .info-modal{ padding:8px; }
  .info-modal-dialog{ width:100%; max-height:96dvh; }
}


.site-footer a{ color:inherit; text-decoration:underline; text-underline-offset:2px; font:inherit; }


@media (min-width:1181px) {
  
  
.role-switch,

.language-switch,

.help-button{ grid-column:auto; grid-row:auto; }
}

@media (max-width:1180px) and (min-width:821px) {
  
  
.role-switch,

.language-switch,

.help-button{ grid-column:auto; grid-row:auto; }
}

@media (max-width:820px) and (min-width:651px) {
  
  
  .role-switch{ grid-column:2 / span 3; grid-row:1; }
  .language-switch{ grid-column:5; grid-row:1; width:100%; min-width:0; }
  .help-button{ grid-column:6; grid-row:1; width:100%; min-width:0; }

}
.role-choice{
  padding-inline:8px;
}
@media (min-width:1361px) {
  
  
}
@media (max-width:1360px) and (min-width:951px) {
  
  
  
.role-switch,

.language-switch,

.help-button{ width:100%; }
  .language-switch,
.help-button{ min-width:0; }
}
@media (max-width:950px) and (min-width:651px) {
  
  
  
.role-switch,

.language-switch,

.help-button{ width:100%; min-width:0; }
}
@media (min-width:1361px) {
  
  .role-choice{
    font-size:11px;
    padding-inline:8px;
  }
}

@media (max-width:1360px) and (min-width:651px) {
  .role-switch{
    min-width:250px;
  }
  .role-choice{
    font-size:11px;
    padding-inline:7px;
  }
}







.role-switch{
  width:100%;
  min-width:0;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
}
.role-choice{
  min-width:0;
  white-space:nowrap;
  overflow:visible;
  text-overflow:clip;
}
@media (min-width:1401px) {
  
  
  .role-switch{ min-width:292px; }
  .role-choice{ font-size:11px; padding-inline:9px; }
}
@media (max-width:1400px) and (min-width:901px) {
  
  
  
.role-switch,

.language-switch,

.help-button{
    width:100%;
    min-width:0;
  }
  .role-switch{ min-width:270px; }
  .role-choice{ font-size:11px; padding-inline:7px; }
}
@media (max-width:900px) and (min-width:651px) {
  
  
  
  .role-switch{ grid-area:auto; grid-column:3 / span 6; grid-row:1; width:100%; min-width:0; }
  .language-switch{ grid-area:auto; grid-column:9 / span 4; grid-row:1; width:100%; min-width:0; }
  .help-button{ grid-area:auto; grid-column:1 / span 2; grid-row:2; width:100%; min-width:0; }

  .role-choice{ font-size:10.5px; padding-inline:5px; }
}
@media (max-width:650px) {
  
  
  .top{
    padding:7px 8px 6px;
  }
  
  
  .title-extra{ display:none !important; }

  

  
  
  

  .role-switch{
    grid-area:auto;
    grid-column:2 / 10;
    grid-row:1;
    width:100%;
    min-width:0;
    height:31px;
  }
  .role-choice{
    min-width:0;
    min-height:31px;
    height:31px;
    padding-inline:2px;
    font-size:9px;
    line-height:1;
    white-space:nowrap;
  }

  .language-switch{
    grid-area:auto;
    grid-column:10 / 13;
    grid-row:1;
    width:100%;
    min-width:0;
    height:31px;
  }
  .language-choice{
    min-width:0;
    height:31px;
    padding:0 2px;
    gap:0;
  }
  .language-choice span{ display:none !important; }
  .flag-svg{ width:18px; height:12px; }

  .help-button{
    grid-area:auto;
    grid-column:1;
    grid-row:2;
    width:32px;
    min-width:32px;
    height:33px;
    min-height:33px;
  }

}
@media (max-width:360px) {
  .top{ padding-inline:6px; }
  
  
  
.help-button{ width:30px; min-width:30px; }
  .role-choice{ font-size:8.4px; padding-inline:1px; }
  .flag-svg{ width:17px; height:11px; }
  
}
@media (max-width:650px) {
  
  
  header .top{
    padding:7px 8px 6px !important;
  }

  

  

  header .title-extra{ display:none !important; }

  
  


  
  
  

  
  header .role-choice{
    display:block !important;
    height:31px !important;
    min-height:31px !important;
    padding:0 2px !important;
    font-size:9px !important;
    line-height:31px !important;
    white-space:nowrap !important;
    text-overflow:clip !important;
  }

  
  header .language-choice{
    display:flex !important;
    height:31px !important;
    min-height:31px !important;
    gap:0 !important;
  }
  header .language-choice span{ display:none !important; }
  header .flag-svg{ width:18px !important; height:12px !important; }

  

}

@media (max-width:360px) {
  header .top{ padding-inline:6px !important; }
  
  
  

  header .role-choice{ font-size:8.3px !important; padding-inline:1px !important; }
  header .flag-svg{ width:17px !important; height:11px !important; }
  
}
@media (orientation:landscape) and (max-height:520px) and (max-width:1100px) {
  

  html,
body{
    width:100%;
    height:100dvh !important;
    min-height:100dvh !important;
    overflow:hidden !important;
  }
  header{
    border-top-width:3px !important;
    border-bottom-width:1px !important;
  }
  header .top{
    max-width:none !important;
    padding:2px max(5px,env(safe-area-inset-right,0px)) 2px max(5px,env(safe-area-inset-left,0px)) !important;
  }
  
  
  header .title-extra{ display:none !important; }
  header .version-badge{
    margin-left:3px !important;
    padding:1px 4px !important;
    font-size:7.5px !important;
    vertical-align:1px !important;
  }

  
  

  
  
  

  
  header .role-choice{
    width:100% !important;
    min-width:0 !important;
    height:26px !important;
    min-height:26px !important;
    padding:0 3px !important;
    font-size:8.5px !important;
    line-height:1 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:clip !important;
  }

  
  header .language-choice{
    width:100% !important;
    min-width:0 !important;
    height:26px !important;
    min-height:26px !important;
    padding:0 !important;
    gap:0 !important;
  }
  header .language-choice span{ display:none !important; }
  header .flag-svg{ width:17px !important; height:11px !important; }

  

  header .all-tools{
    margin:0 !important;
    border-radius:6px !important;
  }
  header .all-tools > summary{
    min-height:25px !important;
    height:25px !important;
    padding:2px 7px !important;
    gap:5px !important;
    font-size:9px !important;
    line-height:1 !important;
  }
  
  header .all-tools-content{
    max-height:calc(100dvh - 60px) !important;
    overflow:auto !important;
    padding:4px !important;
    gap:4px !important;
  }
  header .tool-section{
    padding:5px !important;
  }
  header .tool-section h2{
    margin:0 0 4px !important;
    font-size:10px !important;
  }
  main{
    width:100% !important;
    max-width:none !important;
    margin:2px 0 0 !important;
    padding:0 max(4px,env(safe-area-inset-right,0px)) 2px max(4px,env(safe-area-inset-left,0px)) !important;
    min-height:0 !important;
  }

  .site-footer{
    display:none !important;
  }

  .practice{
    font-size:9.5px !important;
    line-height:1.08 !important;
  }
  .risk-badge{
    font-size:7px !important;
  }

  .section-dot{ width:7px !important; height:7px !important; }

  .score-btn.semantic-score-btn{
    height:31px !important;
    min-height:31px !important;
    padding-inline:3px !important;
    font-size:8px !important;
  }
  .score-btn.semantic-score-btn[data-score="0"]{
    width:34px !important;
    min-width:34px !important;
    font-size:13px !important;
  }
  .score-btn.semantic-score-btn[data-score="1"],
.score-btn.semantic-score-btn[data-score="5"],
.score-btn.semantic-score-btn[data-score="2"],
.score-btn.semantic-score-btn[data-score="3"],
.score-btn.semantic-score-btn[data-score="4"]{
    width:56px !important;
    min-width:56px !important;
  }

}
@media (orientation:landscape) and (max-height:430px) and (max-width:760px) {
  
  
  
  
  header .role-choice{ font-size:7.8px !important; }
  
}

/* Première utilisation et contrôle après fusion */
.first-use-modal[hidden]{display:none!important;}
.first-use-modal{position:fixed;inset:0;z-index:2400;display:grid;place-items:center;padding:18px;}
.first-use-backdrop{position:absolute;inset:0;background:rgba(16,22,28,.68);backdrop-filter:blur(4px);}
.first-use-dialog{position:relative;z-index:1;width:min(760px,calc(100vw - 28px));max-height:min(88dvh,760px);overflow:auto;background:#fff;border:1px solid #cfd8df;border-radius:20px;box-shadow:0 24px 70px rgba(0,0,0,.28);padding:22px;}
.first-use-kicker{display:inline-flex;padding:4px 9px;border-radius:999px;background:#eef3f6;color:#42515c;font-size:.72rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase;}
.first-use-dialog h2{margin:10px 0 7px;font-size:clamp(1.3rem,3vw,2rem);line-height:1.08;color:#20292f;}
.first-use-intro,
.first-use-local,
.first-use-once{color:#55636d;line-height:1.45;}
.first-use-intro{margin:0 0 14px;}
.first-use-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.first-use-card{display:flex;flex-direction:column;gap:5px;padding:12px 13px;border:1px solid #d9e1e6;border-radius:13px;background:#f8fafb;line-height:1.38;}
.first-use-card strong{color:#27343c;}
.first-use-card span{color:#5b6871;font-size:.92rem;}
.first-use-local{margin:12px 0 0;padding:10px 12px;border-left:4px solid var(--dominant-accent,#4f819f);background:#f3f7f9;border-radius:8px;}
.first-use-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;}
.first-use-actions button{min-height:40px;border-radius:11px;padding:8px 14px;font:inherit;font-weight:850;cursor:pointer;}
.first-use-primary{border:1px solid #315f78;background:#315f78;color:#fff;}
.first-use-secondary{border:1px solid #c8d2d8;background:#fff;color:#26343c;}
.first-use-once{margin:10px 0 0;font-size:.8rem;}
body.first-use-open{overflow:hidden;}

.merge-review-banner{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:8px auto 0;width:min(1180px,calc(100% - 24px));padding:10px 12px;border:1px solid #c8d8df;border-radius:12px;background:#f2f8fa;box-shadow:0 4px 16px rgba(30,55,70,.08);}
.merge-review-copy{display:flex;flex-direction:column;gap:2px;min-width:0;}
.merge-review-copy strong{color:#254454;}
.merge-review-copy span{color:#566872;font-size:.88rem;line-height:1.3;}
.merge-review-actions{display:flex;gap:7px;flex:0 0 auto;}
.merge-review-actions button{min-height:34px;border:1px solid #bdccd3;border-radius:9px;background:#fff;padding:6px 10px;font:inherit;font-size:.82rem;font-weight:800;cursor:pointer;}
.merge-review-actions [data-merge-open]{background:#315f78;border-color:#315f78;color:#fff;}

@media (max-width:650px){
  .first-use-modal{padding:8px;}
  .first-use-dialog{width:calc(100vw - 16px);max-height:92dvh;border-radius:15px;padding:14px;}
  .first-use-grid{grid-template-columns:1fr;gap:7px;}
  .first-use-card{padding:9px 10px;}
  .first-use-card span{font-size:.84rem;}
  .first-use-dialog h2{font-size:1.25rem;}
  .first-use-intro,
.first-use-local{font-size:.88rem;}
  .first-use-actions{position:sticky;bottom:-14px;background:#fff;padding:9px 0 2px;margin-top:10px;}
  .first-use-actions button{flex:1 1 170px;}
  .merge-review-banner{margin:5px 6px 0;width:calc(100% - 12px);padding:8px;gap:8px;align-items:stretch;flex-direction:column;}
  .merge-review-actions button{flex:1;}
  .merge-review-actions{width:100%;}
}
@media (orientation:landscape) and (max-height:520px) and (max-width:1100px){
  .first-use-dialog{max-height:95dvh;padding:10px 12px;}
  .first-use-dialog h2{font-size:1.08rem;margin:5px 0;}
  .first-use-kicker{font-size:.62rem;padding:2px 7px;}
  .first-use-intro,
.first-use-local,
.first-use-once{font-size:.76rem;line-height:1.25;}
  .first-use-grid{grid-template-columns:1fr 1fr;gap:5px;}
  .first-use-card{padding:6px 8px;gap:2px;line-height:1.22;}
  .first-use-card span{font-size:.72rem;}
  .first-use-actions{margin-top:6px;padding:4px 0 0;position:static;}
  .first-use-actions button{min-height:30px;padding:4px 8px;font-size:.75rem;}
  .merge-review-banner{font-size:.75rem;padding:5px 7px;margin-top:3px;}
  .merge-review-copy span{font-size:.72rem;}
  .merge-review-actions button{min-height:28px;padding:3px 7px;font-size:.7rem;}
}

/* Profile shortcut */
.profile-edit-button{margin-left:auto;min-height:36px;padding:7px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:inherit;font-weight:700;cursor:pointer;}@media(max-width:650px){.profile-edit-button{margin-left:0;}}

/* Header & active-person controls */
.title-extra{ display:none !important; }

/* Active-person selector: name first, role second. */
header .role-switch{
  min-height:38px !important;
  height:38px !important;
}
header .role-choice{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:1px !important;
  min-height:38px !important;
  height:38px !important;
  line-height:1 !important;
}
.role-choice-name{
  display:block;
  width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:10.5px;
  font-weight:900;
}
.role-choice-ds{
  display:block;
  width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  opacity:.72;
  font-size:7px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.035em;
}
.role-choice.active .role-choice-ds{ opacity:.9; }

@media (max-width:650px) {

  /* Existing header had hard 31px role controls; allow the two-line V2 labels. */
  header .role-switch{
    min-height:34px !important;
    height:34px !important;
  }
  header .role-choice{
    padding:2px !important;
  }
  header .role-choice-name{ font-size:8.3px !important; }
  header .role-choice-ds{ font-size:5.8px !important; }

  
  
  
  
  
  
  

  
}

/* Individual edit mode */


.role-switch [data-person-choice].active .role-choice-name{ color:var(--role-accent); }

.individual-editor{ width:min(1500px,calc(100% - 16px)); margin:8px auto 20px; }
.individual-editor-bulk-btn{ flex:1 1 0; min-height:36px; border:1px solid #d9dde2; border-radius:12px;   font-weight:800; font-size:.9rem; box-shadow:0 1px 3px rgba(0,0,0,.04); }
.individual-editor-bulk-btn:active{ transform:translateY(1px); }

.individual-editor-legend{ margin:5px 0 7px; padding:5px 8px; border-radius:7px; border:1px solid #e5e5e5;  color:#5b5b5b; font-size:.69rem; line-height:1.2; }
.individual-editor-list{ display:flex; flex-direction:column; gap:5px; }
.individual-practice-card{ min-width:0; overflow:hidden; border:1px solid #dedede; border-radius:9px; background:#fff; box-shadow:0 1px 5px rgba(0,0,0,.025); }
.individual-practice-card > header{ display:flex; justify-content:space-between; align-items:flex-start; gap:6px; min-height:28px; padding:5px 7px; border-bottom:1px solid #ededed; background:linear-gradient(180deg,#fff,#fcfcfc); }
.individual-practice-headmain{ min-width:0; flex:1 1 auto; }
.individual-practice-titleline{ min-width:0; display:flex; align-items:center; gap:5px; }
.individual-practice-card h3{ min-width:0; margin:0; font-size:.83rem; line-height:1.12; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.individual-practice-explanation{ margin:3px 0 0;  font-size:.68rem; line-height:1.22; }
.individual-practice-category{ flex:0 0 auto; padding:1px 4px; border-radius:999px;   font-size:.55rem; font-weight:850; text-transform:uppercase; letter-spacing:.02em; }
.individual-practice-card > header .risk-badge{ flex:0 0 auto; }
.individual-slots,
.individual-slots.has-multiple{ display:block; }
.individual-slot{ min-width:0; padding:5px 7px; }
.individual-slot + .individual-slot{ border-top:1px solid #ececec; }
.individual-slot.is-incompatible{ background:#faf7f7; opacity:.8; }
.individual-slot-main{ display:grid; grid-template-columns:64px minmax(0,1fr) auto; align-items:center; gap:4px; }
.individual-slot-label-wrap{ min-width:0; display:flex; align-items:center; gap:3px; }
.individual-slot-label{ color:#4f4f4f; font-size:.62rem; font-weight:900; line-height:1; letter-spacing:.025em; white-space:nowrap; }
.individual-applicability{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; padding:0; border-radius:50%; background:#f0dddd; color:#7c3e3e; font-size:.57rem; font-weight:900; }
.individual-score-row{ width:100%; max-width:310px; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); align-items:center; gap:2px; }
.individual-score-row .score-btn,
.individual-score-row .score-btn.semantic-score-btn,
.individual-score-row .score-btn.semantic-score-btn[data-score]{ width:100%; min-width:0; height:28px; min-height:28px; padding:0; border-radius:6px; font-size:11.5px; line-height:1; white-space:nowrap; }
.individual-score-row .score-btn.semantic-score-btn[data-score="0"]{ width:100%; min-width:0; }
.individual-slot-tools{ display:flex; align-items:center; gap:3px; }
.individual-prior{ display:inline-flex; align-items:center; justify-content:center; gap:2px; min-height:28px; border:1px solid #d6d6d6; border-radius:6px; background:#fff; padding:3px 6px; color:#686868; font-size:.62rem; font-weight:750; white-space:nowrap; cursor:pointer; }
.individual-prior.checked{ border-color:#7aa47a; background:#f1f8f1; color:#356435; }
.individual-note-toggle{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:28px; min-width:28px; height:28px; padding:0; overflow:hidden; border:1px solid #d6d6d6; border-radius:6px; background:#fff; color:#666; font-size:.72rem; cursor:pointer; }
.individual-note-toggle:hover,
.individual-note-toggle.is-open{ border-color:#8ba4bd; background:#f3f7fb; }
.individual-note-toggle.has-note{ border-color:#9d88a0; background:#faf5fa; }
.individual-note-toggle > i{ position:absolute; top:2px; right:2px; width:5px; height:5px; border-radius:50%; background:#8a4f78; box-shadow:0 0 0 1px #fff; }


.individual-editor-empty{ padding:20px; text-align:center; color:#777; }

@media (min-width:1100px) {
.individual-score-row{ max-width:none; }
}

@media (max-width:760px) {
  .individual-editor{ width:calc(100% - 4px); margin:3px auto 10px; }
  .individual-editor-bulk-btn{ min-height:32px; border-radius:10px; font-size:.76rem; }
  
  .individual-editor-legend{ display:none; }
  .individual-practice-explanation{ display:block; font-size:.62rem; }
  .individual-editor-list{ gap:3px; }
.individual-practice-card{ border-radius:7px; }
  .individual-practice-card > header{ min-height:25px; padding:3px 5px; }
  .individual-practice-card h3{ font-size:.76rem; }
  .individual-practice-category{ font-size:.5rem; padding:1px 3px; }
  .individual-slot{ padding:4px 5px; }
  .individual-slot-main{ grid-template-columns:50px minmax(0,1fr) auto; gap:3px; }
  .individual-slot-label{ font-size:.55rem; letter-spacing:0; }
  .individual-applicability{ width:14px; height:14px; font-size:.5rem; }
  .individual-score-row{ max-width:none; gap:2px; }
  .individual-score-row .score-btn,
.individual-score-row .score-btn.semantic-score-btn,
.individual-score-row .score-btn.semantic-score-btn[data-score]{ height:29px; min-height:29px; border-radius:5px; font-size:10.5px; }
  .individual-slot-tools{ gap:2px; }
  .individual-prior{ width:29px; min-width:29px; min-height:29px; height:29px; padding:0; border-radius:5px; font-size:.57rem; }
  .individual-prior-text{ display:none; }
  .individual-note-toggle{ width:29px; min-width:29px; height:29px; border-radius:5px; font-size:.68rem; }
  
  
  
  
  
  
}

@media (max-width:430px) {
  .individual-slot-main{ grid-template-columns:47px minmax(0,1fr) auto; }
  .individual-slot-label{ font-size:.52rem; }
  .individual-score-row .score-btn,
.individual-score-row .score-btn.semantic-score-btn,
.individual-score-row .score-btn.semantic-score-btn[data-score]{ font-size:10px; }
}

@media (max-width:360px) {
  .individual-slot-main{ grid-template-columns:43px minmax(0,1fr) auto; gap:2px; }
  .individual-score-row{ gap:1px; }
  .individual-score-row .score-btn,
.individual-score-row .score-btn.semantic-score-btn,
.individual-score-row .score-btn.semantic-score-btn[data-score]{ height:28px; min-height:28px; font-size:9.5px; }
  .individual-note-toggle,
.individual-prior{ width:28px; min-width:28px; height:28px; min-height:28px; }
}

@media (orientation:landscape) and (max-height:520px) and (max-width:1100px) {
  .individual-editor{ margin-top:2px; }
  .individual-editor-legend{ display:none; }
  .individual-practice-explanation{ display:block; font-size:.62rem; }
}

/* Couple reading mode — compact rows.
   One practice title, one row per compatible variant. Personal history and
   notes stay collapsed until explicitly opened.
*/
.couple-reader{width:min(1320px,calc(100% - 16px));margin:8px auto 28px;}


.couple-reader-list{--reader-rail-width:38px;--reader-results-width:156px;display:flex;flex-direction:column;gap:6px;}
.individual-category-head:focus-visible,
.couple-reader-category-head:focus-visible{outline:2px solid color-mix(in srgb,var(--accent,#5aa0c2) 70%,white);outline-offset:1px;}
.couple-reader-category-head::after,
.individual-category-head::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:rgba(0,0,0,.06);pointer-events:none;}
.couple-reader-category-chevron{flex:none;font-size:.72rem;color:#666;}
.couple-result-head{flex:none;width:var(--reader-results-width);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;text-align:center;}
.couple-result-head>span{display:flex;min-width:0;flex-direction:column;align-items:center;justify-content:center;line-height:1.05;}
.couple-result-head b{display:block;max-width:100%;font-size:.58rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.couple-result-head small{margin-top:2px;color:#687077;font-size:.48rem;font-weight:800;white-space:nowrap;}
/* Opaque foreground shield: once the first category reaches the sticky stack,
   absolutely nothing from the scrolling list (including the colored left rail)
   may remain visible behind Filters + current category. */


.couple-practice{--result-bg:#f1f2f3;--result-panel:#f1eee8;--result-border:#d2c7be;position:relative;border-top:1px solid rgba(96,84,78,.20);background:var(--result-panel);box-shadow:inset 0 1px 0 rgba(255,255,255,.18);}
.couple-practice:first-child{border-top:0;}
.couple-practice-row{display:grid;grid-template-columns:var(--reader-rail-width) minmax(0,1fr) var(--reader-results-width);align-items:center;gap:6px;min-height:64px;padding:6px 7px;}
.couple-practice-rail{align-self:stretch;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px;padding-top:1px;}
.couple-reader-pin{display:inline-flex;align-items:center;justify-content:center;width:30px;min-width:30px;height:30px;min-height:30px;padding:0;border:1px solid rgba(0,0,0,.08);border-radius:9px;font-size:.9rem;line-height:1;cursor:pointer;}

.couple-reader-pin.is-selected{box-shadow:inset 0 0 0 1px #e1b542,0 1px 2px rgba(120,84,0,.14);}
.couple-reader-pin:disabled{opacity:.42;cursor:not-allowed;}
.couple-reader-risk{display:flex;align-items:center;justify-content:center;min-height:16px;}
.couple-reader-risk .risk-badge{margin:0;transform:scale(.88);}
.couple-practice-copy{min-width:0;align-self:center;}
.couple-practice-title-line{display:flex;align-items:center;gap:5px;min-width:0;}
.couple-practice-title-line strong{min-width:0;flex:1;font-size:.86rem;line-height:1.08;white-space:normal;overflow-wrap:anywhere;color:#202326;text-shadow:0 1px 0 rgba(255,255,255,.25);}
.couple-practice-description{margin-top:3px;color:var(--result-copy-muted,#3b3f42);font-size:.62rem;line-height:1.22;display:block;overflow:visible;overflow-wrap:anywhere;-webkit-line-clamp:unset;-webkit-box-orient:initial;}
.couple-result-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;width:100%;align-items:stretch;}
.couple-result-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;min-height:52px;padding:4px 2px;border:2px solid var(--result-border);border-radius:10px;background:linear-gradient(180deg,color-mix(in srgb,var(--result-bg) 88%,white) 0%,var(--result-bg) 100%);text-align:center;}
.couple-result-emoji{display:block;font-size:1.18rem;line-height:1;}
.couple-result-tick{display:flex;align-items:center;justify-content:center;margin-top:4px;min-width:23px;min-height:15px;padding:0 4px;border:1px solid rgba(24,20,24,.12);border-radius:999px;font-size:.6rem;font-weight:950;line-height:1;box-shadow:inset 0 1px 0 rgba(255,255,255,.55);}
.couple-result-icon{display:inline-flex;align-items:center;justify-content:center;position:relative;flex:0 0 auto;}
.couple-result-icon-check{font-weight:950;line-height:1;}
.couple-result-icon-cross{width:.72em;height:.72em;}
.couple-result-icon-cross::before,
.couple-result-icon-cross::after{content:"";position:absolute;left:50%;top:50%;width:.88em;height:1.55px;border-radius:999px;background:currentColor;opacity:.96;transform-origin:center;box-shadow:0 .35px 0 rgba(255,255,255,.18);}
.couple-result-icon-cross::before{transform:translate(-50%,-50%) rotate(45deg);}
.couple-result-icon-cross::after{transform:translate(-50%,-50%) rotate(-45deg);}
button.couple-result-tick{font-family:inherit;cursor:pointer;}
button.couple-result-tick:hover{background:rgba(255,255,255,.94);}
button.couple-result-tick:disabled{cursor:not-allowed;opacity:.52;}
.couple-before-tick,
.couple-together-tick{
  width:auto;
  min-width:0;
  max-width:100%;
  height:15px;
  min-height:15px;
  max-height:15px;
  padding:0 4px;
  gap:2px;
  border-color:rgba(50,42,47,.48);
  background:rgba(255,255,255,.90);
  color:#4d454a;
  font-size:.47rem;
  font-weight:950;
  white-space:nowrap;
  box-sizing:border-box;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.86),0 1px 2px rgba(37,24,31,.10);
}
.couple-before-tick{cursor:default;}
.couple-together-tick:not(:disabled):hover,
.couple-before-tick:hover{border-color:rgba(44,34,42,.68);background:#fff;}
.couple-together-tick.is-done,
.couple-before-tick.is-done{
  color:#fff;
  border-color:#315f39;
  background:linear-gradient(180deg,#4f8157 0%,#386b42 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 0 0 1px rgba(29,73,38,.22),0 1px 2px rgba(32,72,39,.22);
}




.couple-reader-empty{padding:24px;text-align:center;color:#777;}

@media (max-width:760px){
  .couple-reader{width:calc(100% - 4px);margin:2px auto 10px;}
  .couple-reader-list{--reader-rail-width:33px;--reader-results-width:124px;gap:3px;}
  
  
  
  
.couple-result-head{gap:2px;}
  .couple-result-head b{font-size:.48rem;}
  .couple-result-head small{font-size:.41rem;}
  .couple-practice-row{gap:4px;min-height:58px;padding:5px 4px;}
  .couple-reader-pin{width:27px;min-width:27px;height:27px;min-height:27px;border-radius:8px;font-size:.78rem;}
  .couple-reader-risk .risk-badge{transform:scale(.8);}
  .couple-practice-title-line{gap:3px;}
  .couple-practice-title-line strong{font-size:.76rem;line-height:1.07;}
  .couple-practice-description{margin-top:2px;font-size:.55rem;line-height:1.18;}
  .couple-result-grid{gap:3px;}
  .couple-result-cell{min-height:45px;padding:3px 1px;border-radius:8px;}
  .couple-result-emoji{font-size:1.04rem;}
  .couple-result-tick{margin-top:3px;min-width:20px;min-height:14px;font-size:.53rem;}
  .couple-before-tick,.couple-together-tick{height:14px;min-height:14px;max-height:14px;padding:0 2px;gap:1px;font-size:.43rem;}
  
  
}
@media (max-width:370px){
  .couple-reader-list{--reader-rail-width:30px;--reader-results-width:112px;}
.couple-result-head b{font-size:.44rem;}
  .couple-result-head small{font-size:.37rem;}
  .couple-practice-row{gap:3px;padding-left:3px;padding-right:3px;}
  .couple-reader-pin{width:25px;min-width:25px;height:25px;min-height:25px;font-size:.72rem;}
  .couple-practice-title-line strong{font-size:.7rem;}
  .couple-practice-description{font-size:.51rem;}
  .couple-result-grid{gap:2px;}
  .couple-result-cell{min-height:42px;border-radius:7px;}
  .couple-result-emoji{font-size:.96rem;}
  .couple-result-tick{min-width:18px;font-size:.49rem;}
  .couple-before-tick,.couple-together-tick{font-size:.40rem;padding:0 1px;}
}

/* ========================================================================== 
   UNIFIED UX
   One page: individual editing + couple reading. Couple tools live in Reading.
*/


body[data-view-mode="edit"] .random-tool-section,
body[data-view-mode="edit"] .session-section,
body[data-view-mode="edit"] #coupleReader{display:none!important;}
body[data-view-mode="read"] #individualEditor{display:none!important;}
body[data-view-mode="read"] .random-tool-section,
body[data-view-mode="read"] .session-section,
body[data-view-mode="read"] #coupleReader{display:block!important;}
body[data-view-mode="read"] .display-filter-section{display:block!important;}


.session-mode-list{display:flex;flex-direction:column;gap:9px;}

.random-result-actions{margin-top:8px;}
.random-session-btn{border:1px solid #cbd7e3;border-radius:9px;background:#f3f7fb;padding:7px 10px;font:inherit;font-size:.78rem;font-weight:850;cursor:pointer;}
.random-session-btn:disabled{opacity:.55;cursor:not-allowed;}
@media(max-width:760px){
  
}
body[data-view-mode="edit"] .safety-tool-section{display:none!important;}
body[data-view-mode="read"] .safety-tool-section{display:block!important;}
body[data-view-mode="read"] .role-switch{display:none!important;}

/* ========================================================================== 
   MOBILE HEADER
   Keep the compact header readable: primary controls on row 1, Edit/Reading
   navigation on its own row, then Tools & options below without overlap.
*/
@media (max-width:650px) {
  
  
  header .top{
    padding:7px 8px 7px !important;
    overflow:visible !important;
  }

  

  

  

  

  

  header .role-choice{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:1px !important;
    width:100% !important;
    min-width:0 !important;
    height:34px !important;
    min-height:34px !important;
    padding:2px 4px !important;
    line-height:1 !important;
    overflow:hidden !important;
  }

  header .role-choice-name{
    display:block !important;
    max-width:100% !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    font-size:9.5px !important;
    line-height:1.05 !important;
  }

  header .role-choice-ds{
    display:block !important;
    max-width:100% !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    font-size:6.5px !important;
    line-height:1 !important;
  }

  

  header .language-choice{
    width:100% !important;
    min-width:0 !important;
    height:34px !important;
    min-height:34px !important;
    padding:0 2px !important;
  }
  header .flag-svg{ width:19px !important; height:13px !important; }

  

  
header .all-tools{
    margin:6px 0 0 !important;
    clear:both !important;
    border-radius:10px !important;
    overflow:visible !important;
  }

  header .all-tools > summary{
    min-height:34px !important;
    height:auto !important;
    padding:7px 10px !important;
    gap:7px !important;
    font-size:11px !important;
    line-height:1.15 !important;
  }

  

  
}

@media (max-width:380px) {
  
  

  
  header .role-choice-name{ font-size:8.8px !important; }
  header .role-choice-ds{ font-size:6px !important; }
}


/* Main scrollport
   The unified editor/reader renders inside <main>. The document shell keeps
   body locked so the header/footer stay fixed; therefore <main> must own the
   vertical scroll.
*/
body[data-view-mode="edit"] main,
body[data-view-mode="read"] main{
  overflow-y:auto !important;
  overflow-x:hidden !important;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
  touch-action:pan-y pinch-zoom;
  scrollbar-gutter:stable;
}

/* The active unified sections must grow naturally inside the scrollport. */
body[data-view-mode="edit"] #individualEditor,
body[data-view-mode="read"] #coupleReader{
  flex:0 0 auto;
  min-height:min-content;
}

@media (max-width:650px) {
  
  
  body[data-view-mode="edit"] main,
body[data-view-mode="read"] main{
    overscroll-behavior-y:auto;
    touch-action:pan-y pinch-zoom;
    scrollbar-gutter:auto;
  }
}

/* Responsive density */
@media (max-width:760px) {
  body[data-view-mode="edit"] main,
body[data-view-mode="read"] main{
    padding-left:2px;
    padding-right:2px;
  }
}

/* Reading filter state hooks */

/* Sticky category headers.
   IMPORTANT: no ancestor between these headers and <main> may use overflow
   hidden/auto/scroll. <main> is intentionally the sticky scrollport. */
:root{
  --edit-category-sticky-top:0px;
  
}

/* Compact sticky Reading filters */
body[data-view-mode="read"] #minFilterScore{display:none!important;}
.reader-filter-dock{
  position:sticky;
  top:0;
  z-index:24;
  isolation:isolate;
  margin:8px 0 0;
  border:1px solid #d9dde2;
  border-radius:12px 12px 0 0;
  
  
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  overflow:hidden;
}
.reader-filter-dock > summary{list-style:none;}
.reader-filter-dock > summary::-webkit-details-marker{display:none;}
.reader-filter-summary-row{
  position:relative;
  z-index:3;
  min-height:38px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  padding:6px 9px;
  cursor:pointer;
  user-select:none;
  
}
.reader-filter-summary-title{font-size:.76rem;font-weight:900;white-space:nowrap;}
.reader-filter-summary-value{min-width:0;font-size:.7rem;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right;}
.reader-filter-chevron{font-size:.8rem;transition:transform .15s ease;}
.reader-filter-dock[open] .reader-filter-chevron{transform:rotate(180deg);}
.reader-filter-content{
  position:relative;
  z-index:3;
  display:grid;
  gap:7px;
  padding:7px 9px 8px;
  border-top:1px solid #eceff1;
  
}
.reader-filter-group{
  display:grid;
  grid-template-columns:116px minmax(0,1fr);
  align-items:center;
  gap:8px;
}
.reader-filter-group[hidden]{display:none!important;}
.reader-filter-label{font-size:.67rem;font-weight:900;white-space:nowrap;}
.reader-filter-chips{display:flex;align-items:center;gap:4px;min-width:0;flex-wrap:wrap;}
.reader-filter-chip{
  min-height:29px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:3px 8px;
  border:1px solid #d7dce0;
  border-radius:999px;
  
  
  font:inherit;
  font-size:.68rem;
  font-weight:800;
  line-height:1;
  cursor:pointer;
  white-space:nowrap;
}


.reader-filter-chip-count{
  min-width:18px;
  padding:2px 4px;
  border-radius:999px;
  
  
  font-size:.58rem;
  font-weight:900;
  line-height:1;
  text-align:center;
}
.reader-filter-chip.is-active .reader-filter-chip-count{background:rgba(255,255,255,.18);color:#fff;}
.reader-filter-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:1px;}
.reader-filter-fantasy{display:inline-flex;align-items:center;gap:5px;min-height:28px;font-size:.67rem;font-weight:800;cursor:pointer;}
.reader-filter-fantasy input{margin:0;width:15px;height:15px;}


@media (max-width:700px){
  .reader-filter-dock{
    margin:3px 0 0;
    border-radius:8px 8px 0 0;
    box-shadow:0 2px 8px rgba(0,0,0,.08);
  }
  .reader-filter-summary-row{min-height:31px;gap:5px;padding:4px 6px;}
  .reader-filter-summary-title{font-size:.65rem;}
  .reader-filter-summary-value{font-size:.57rem;}
  .reader-filter-chevron{font-size:.67rem;}
  .reader-filter-content{gap:5px;padding:5px 6px 6px;}
  .reader-filter-group{display:block;}
  .reader-filter-label{display:block;margin:0 0 3px;font-size:.56rem;letter-spacing:.02em;text-transform:uppercase;}
  .reader-filter-chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;}
  .reader-filter-group + .reader-filter-group .reader-filter-chips{grid-template-columns:repeat(5,minmax(0,1fr));}
  .reader-filter-chip{width:100%;min-width:0;min-height:27px;padding:2px 4px;border-radius:7px;font-size:.6rem;gap:3px;overflow:hidden;}
  .reader-filter-chip-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .reader-filter-chip-count{min-width:15px;padding:2px 3px;font-size:.5rem;}
  .reader-filter-bottom{gap:5px;}
  .reader-filter-fantasy{min-width:0;font-size:.58rem;line-height:1.05;}
  .reader-filter-fantasy input{width:14px;height:14px;flex:0 0 auto;}
}

@media (max-width:390px){
  .reader-filter-summary-title{font-size:.61rem;}
  .reader-filter-summary-value{font-size:.53rem;}
  .reader-filter-chip{font-size:.56rem;}
  .reader-filter-chip-count{display:none;}
  .reader-filter-fantasy{font-size:.54rem;}
}

/* Two independent, order-neutral Reading minimums */
.reader-dual-minimum-group{align-items:start;}
.reader-filter-hint{font-size:.56rem;font-weight:700;white-space:nowrap;}
.reader-minimum-row{grid-column:2;display:grid;grid-template-columns:68px minmax(0,1fr);align-items:center;gap:6px;min-width:0;}
.reader-minimum-row-label{font-size:.61rem;font-weight:850;color:#656d72;white-space:nowrap;}
.reader-dual-minimum-group>.reader-filter-label{grid-column:1;grid-row:1;}
.reader-dual-minimum-group>.reader-filter-hint{grid-column:1;grid-row:2/4;align-self:start;margin-top:2px;}
@media (max-width:700px){
  .reader-dual-minimum-group{display:grid!important;grid-template-columns:1fr;gap:3px;}
  .reader-dual-minimum-group>.reader-filter-label,
.reader-dual-minimum-group>.reader-filter-hint,
.reader-minimum-row{grid-column:1;}
  .reader-dual-minimum-group>.reader-filter-hint{grid-row:auto;margin:0 0 1px;font-size:.5rem;}
  .reader-minimum-row{display:grid;grid-template-columns:54px minmax(0,1fr);gap:4px;}
  .reader-minimum-row .reader-filter-chips{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px;}
  .reader-minimum-row-label{font-size:.54rem;}
}

/* ========================================================================== 
   Reading header controls, result palette and clickable risk
   ========================================================================== */

.reader-header-ds{
  width:100%;min-width:0;height:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  overflow:hidden;border:1px solid #d5dadd;border-radius:10px;}
.reader-header-ds[hidden]{display:none!important;}
.reader-header-ds-choice{
  --reader-person-color:#6b747b;--reader-person-dark:#4e565d;--reader-person-soft:#f0f2f3;
  min-width:0;border:0;border-right:1px solid color-mix(in srgb,var(--reader-person-color) 28%,#d5dadd);padding:5px 7px;
  font:inherit;font-size:.68rem;font-weight:850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;
  transition:background .14s ease,color .14s ease,box-shadow .14s ease
;}
.reader-header-ds-choice[data-reader-header-ds="a-dominant"]{--reader-person-color:var(--person-a-role-color);--reader-person-dark:var(--person-a-role-dark);--reader-person-soft:var(--person-a-role-soft);}
.reader-header-ds-choice[data-reader-header-ds="b-dominant"]{--reader-person-color:var(--person-b-role-color);--reader-person-dark:var(--person-b-role-dark);--reader-person-soft:var(--person-b-role-soft);}
.reader-header-ds-choice:last-child{border-right:0;}
.reader-header-ds-choice.active,
.reader-header-ds-choice[aria-pressed="true"]{
  background:var(--reader-person-color);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--reader-person-dark) 45%,transparent),inset 0 -2px 0 var(--reader-person-dark)
;}
body[data-view-mode="edit"] .reader-header-ds{display:none!important;}
body[data-view-mode="read"] .reader-header-ds:not([hidden]){display:grid!important;}

/* Risk badges are real buttons: clicking them opens a concise explanation. */
button.risk-badge{
  appearance:none;-webkit-appearance:none;font-family:inherit;cursor:pointer;margin-left:4px
;}
button.risk-badge:hover,
button.risk-badge:focus-visible{filter:brightness(.97);outline:2px solid rgba(35,111,145,.28);outline-offset:1px;}
.couple-reader-risk button.risk-badge{margin-left:0;}
.risk-info-overlay[hidden]{display:none!important;}
.risk-info-overlay{position:fixed;inset:0;z-index:17000;display:flex;align-items:center;justify-content:center;padding:16px;}
.risk-info-backdrop{position:absolute;inset:0;background:rgba(22,25,28,.48);}
.risk-info-dialog{position:relative;width:min(420px,94vw);overflow:hidden;border:1px solid #bcc3c8;border-radius:14px;background:#fff;box-shadow:0 18px 55px rgba(0,0,0,.30);}
.risk-info-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-bottom:1px solid #d9dde0;background:#f8f9fa;}
.risk-info-head h2{margin:0;font-size:1rem;}
.risk-info-close{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:1px solid #d2d7da;border-radius:8px;background:#fff;font:inherit;font-weight:900;cursor:pointer;}
.risk-info-body{padding:13px 14px;}
.risk-info-body p{margin:0;color:#4d555b;font-size:.78rem;line-height:1.45;}

@media (max-width:650px){
  
  header .reader-header-ds-choice{padding:2px 3px!important;font-size:8.7px!important;line-height:1!important;}
}
@media (max-width:380px){
  header .reader-header-ds-choice{font-size:7.9px!important;padding-inline:2px!important;}
}
@media (max-width:900px) and (min-width:651px){
  
  header .reader-header-ds-choice{font-size:10px;padding-inline:5px;}
}

/* ========================================================================== 
   Grouped bidirectional practices in Reading
   ========================================================================== */
.couple-practice-grouped{background:#fff;}
.couple-group-variants{display:flex;flex-direction:column;}
.couple-group-variant-block{
  --result-bg:#e7e9eb;--result-panel:#ebe7e1;--result-border:#c9beb5;
  background:var(--result-panel);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28)
;}
.couple-group-variant-block+ .couple-group-variant-block{border-top:1px solid rgba(80,88,94,.16);}
/* Shared result palette for single- and multi-direction Reading cards.
   Each panel also defines a dark explanation color with strong contrast against
   its own result background; explanations remain readable even at mobile sizes. */


.couple-group-variant-row{
  display:grid;grid-template-columns:var(--reader-rail-width) minmax(0,1fr) var(--reader-results-width);
  align-items:center;gap:6px;min-height:50px;padding:5px 7px
;}
.couple-group-variant-block:first-child .couple-group-variant-row{min-height:64px;padding-top:6px;padding-bottom:6px;}

@media (max-width:760px){
  .couple-group-variant-row{gap:4px;min-height:43px;padding:4px;}
  .couple-group-variant-block:first-child .couple-group-variant-row{min-height:58px;padding-top:5px;padding-bottom:5px;}
  }
@media (max-width:370px){
  .couple-group-variant-row{gap:3px;padding-left:3px;padding-right:3px;}
  }

/*  stronger profile color cues across names and edit mode */
.profile-inline-name{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  max-width:100%;
  padding:3px 9px;
  border-radius:999px;
  border:1px solid transparent;
  font-weight:900;
  line-height:1.05;
  vertical-align:middle;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.profile-inline-name.is-compact{padding:2px 7px;font-size:.92em;}
.profile-inline-name.person-a{
  color:var(--person-a-role-dark);
  background:color-mix(in srgb,var(--person-a-role-soft) 82%,white);
  border-color:color-mix(in srgb,var(--person-a-role-color) 34%,white);
}
.profile-inline-name.person-b{
  color:var(--person-b-role-dark);
  background:color-mix(in srgb,var(--person-b-role-soft) 82%,white);
  border-color:color-mix(in srgb,var(--person-b-role-color) 34%,white);
}
.profile-inline-text{font-weight:900;vertical-align:middle;}
.flow-arrow{display:inline-flex;align-items:center;justify-content:center;min-width:14px;color:#61707a;font-weight:900;}

.role-switch [data-person-choice="person-a"]{ --role-accent:var(--person-a-role-color); --role-accent-dark:var(--person-a-role-dark); --role-soft:var(--person-a-role-soft);  }
.role-switch [data-person-choice="person-b"]{ --role-accent:var(--person-b-role-color); --role-accent-dark:var(--person-b-role-dark); --role-soft:var(--person-b-role-soft);  }
.role-switch [data-person-choice]{
  
  
  border-color:color-mix(in srgb,var(--role-accent) 36%,#d7d7d7);
}
.role-switch [data-person-choice] .role-choice-name,
.role-switch [data-person-choice] .role-choice-ds{color:inherit;}
.role-switch [data-person-choice].active{
  background:linear-gradient(180deg,color-mix(in srgb,var(--role-accent) 92%,#fff) 0%, var(--role-accent) 100%);
  
  border-color:var(--role-accent);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--role-accent) 24%,transparent), 0 4px 10px rgba(0,0,0,.12);
}


body[data-view-mode="edit"][data-active-edit-person="person-a"] .individual-editor,
.individual-editor[data-person="person-a"]{
  --editor-person-color:var(--person-a-role-color);
  --editor-person-soft:var(--person-a-role-soft);
  --editor-person-dark:var(--person-a-role-dark);
}
body[data-view-mode="edit"][data-active-edit-person="person-b"] .individual-editor,
.individual-editor[data-person="person-b"]{
  --editor-person-color:var(--person-b-role-color);
  --editor-person-soft:var(--person-b-role-soft);
  --editor-person-dark:var(--person-b-role-dark);
}
.individual-editor{
  padding:8px;
  border-radius:14px;
  
  border:1px solid color-mix(in srgb,var(--editor-person-color,#d6dbe0) 28%, white);
}

.individual-editor-legend{
  border-color:color-mix(in srgb,var(--editor-person-color,#e5e5e5) 24%, white);
  background:color-mix(in srgb,var(--editor-person-soft,#fafafa) 72%, white);
}
.individual-editor-bulk-btn{
  border-color:color-mix(in srgb,var(--editor-person-color,#d9dde2) 28%, white);
  background:color-mix(in srgb,var(--editor-person-soft,#fff) 62%, white);
  color:var(--editor-person-dark,#36424d);
}


.reader-filter-summary-value,
.reader-header-ds-choice,
.couple-result-head b{display:flex;align-items:center;gap:4px;flex-wrap:wrap;}


.reader-header-ds-choice .profile-inline-name{max-width:70%;}
.couple-result-head b{justify-content:center;}
.couple-result-head b .profile-inline-name{max-width:100%;font-size:inherit;padding:1px 5px;}
.couple-result-cell.person-a{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--person-a-role-color) 28%,rgba(255,255,255,.3)),0 1px 2px rgba(0,0,0,.07);}
.couple-result-cell.person-b{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--person-b-role-color) 28%,rgba(255,255,255,.3)),0 1px 2px rgba(0,0,0,.07);}

@media (max-width:760px){
  .individual-editor{padding:4px;border-radius:10px;}
  .profile-inline-name{padding:2px 6px;}
  .profile-inline-name.is-compact{padding:1px 5px;}
  .reader-header-ds-choice .profile-inline-name{max-width:60%;}
}


:root{
  --luxe-black:var(--ui-night);
  --luxe-ink:var(--ui-ink);
  
  --luxe-ruby:var(--ui-ruby);
  --luxe-ruby-dark:var(--ui-ruby-dark);
  
  --luxe-gold:var(--ui-gold);
  
  
  --luxe-ivory:var(--ui-ivory);
  --luxe-panel:var(--ui-panel);
  
  --luxe-line:var(--ui-line);
  --luxe-muted:var(--ui-muted);

  --person-a-role-color:#355f6e;
  --person-a-role-dark:#274956;
  --person-a-role-soft:#e7eef0;
  --person-b-role-color:#7b3854;
  --person-b-role-dark:#5e2940;
  --person-b-role-soft:#f1e6eb;
  --theme-person-color:var(--person-a-role-color);
  --theme-person-dark:var(--person-a-role-dark);
  --theme-person-soft:var(--person-a-role-soft);
  --dom-role-color:var(--person-a-role-color);
  --dom-role-dark:var(--person-a-role-dark);
  --dom-role-soft:var(--person-a-role-soft);
  --sub-role-color:var(--person-b-role-color);
  --sub-role-dark:var(--person-b-role-dark);
  --sub-role-soft:var(--person-b-role-soft);
  --role-color:var(--person-a-role-color);
  --role-dark:var(--person-a-role-dark);
  --role-soft:var(--person-a-role-soft);
  
  
  
  

  
  --panel:var(--luxe-panel);
  
  --muted:var(--luxe-muted);
  --border:var(--luxe-line);
  
  --accent:var(--luxe-ruby);
  --variant-bg:var(--luxe-ivory);
  --variant-header:rgba(247,243,239,.985);

  --s0:var(--result-limit-panel-top);
  --s1:var(--result-later-panel-top);
  --s2:var(--result-fantasy-panel-top);
  --s3:var(--result-compatible-panel-top);
  --s4:var(--result-strong-panel-top);
  --s5:var(--result-excellent-panel-top);
}

body{
  background:var(--luxe-ivory);
  color:var(--luxe-ink);
}
body > header{
  background:var(--variant-header);
  border-bottom-color:var(--luxe-line);
  box-shadow:0 3px 15px rgba(39,25,31,.055);
}
h1{color:var(--luxe-black);}
.version-badge{
  background:linear-gradient(145deg,var(--luxe-ruby) 0%,var(--luxe-ruby-dark) 100%);
  color:#fff8f1;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.13),0 2px 5px rgba(88,14,39,.18);
}

/* Core controls */
input[type="search"],

select,

button.action,

.role-switch,

.language-switch,

.help-button{
  border-color:var(--luxe-line);
  background:var(--luxe-panel);
  color:var(--luxe-ink);
  box-shadow:0 1px 3px rgba(52,35,41,.045);
}
input[type="search"]:hover,

select:hover,

.help-button:hover{
  border-color:#c5b4aa;
  background:#fbf8f5;
}
input[type="search"]:focus,
select:focus,
button:focus-visible,
a:focus-visible{
  outline:2px solid color-mix(in srgb,var(--luxe-ruby) 58%,white);
  outline-offset:2px;
}
button.action:hover{background:#f2ebe7;}

.language-choice{background:var(--luxe-panel);color:#554c51;}
.language-choice.active{
  background:linear-gradient(145deg,#211a20 0%,var(--luxe-black) 100%);
  color:#fff8f1;
}
.help-button{color:var(--luxe-black);}


/* Person / role identity remains distinct but less disconnected from the luxe UI */
.role-switch{background:#f8f4f0;}
.role-choice{background:var(--luxe-panel);}
.role-choice + .role-choice{border-left-color:var(--luxe-line);}
.role-choice.role-sub.active,
.role-choice.role-dom.active{
  color:#fffaf6;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}

/* Tools */
.all-tools{
  border-color:var(--luxe-line);
  background:var(--luxe-panel);
  box-shadow:0 3px 12px rgba(51,34,40,.055);
}
.all-tools > summary{
  background:color-mix(in srgb,var(--role-soft) 74%,var(--luxe-ivory));
  border-left-color:var(--role-color);
  color:var(--luxe-ink);
}
.all-tools[open] > summary{
  background:color-mix(in srgb,var(--role-soft) 68%,var(--luxe-panel));
  border-bottom-color:var(--luxe-line);
}
.all-tools-content{background:#f1ece8;}
.tool-section{
  background:var(--luxe-panel);
  border-color:var(--luxe-line);
  box-shadow:0 2px 7px rgba(53,36,43,.035);
}
.tool-section h2{color:#352a30;}

.randomizer,
.safety{background:var(--luxe-panel);border-color:var(--luxe-line);}
.safety summary{background:#f2ebe7;color:#40363c;}
.randomizer .random-btn,
.adult-accept,
.first-use-primary,
.merge-review-actions [data-merge-open]{
  background:linear-gradient(145deg,var(--luxe-ruby) 0%,var(--luxe-ruby-dark) 100%) !important;
  border-color:var(--luxe-ruby-dark) !important;
  color:#fff9f5 !important;
  box-shadow:0 2px 7px rgba(109,21,45,.18);
}
.session-mode-btn{
  border-color:#a9813f !important;
  background:linear-gradient(180deg,#f6eddb,#ead8b9) !important;
  color:#62491f !important;
}
.random-result{border-left-color:var(--luxe-ruby);background:#fffaf7;}

/* Edit mode score palette: semantic, subdued, premium */
.score-btn{background:#eeeae7;color:#352f33;border-color:#d3c8c2;}
.score-btn:hover{outline-color:#9a888d;}


.score-btn.limit-score{background:#ead4da !important;color:#7c3045 !important;border-color:#c995a2 !important;}
.done{background:#ece8e5;border-color:#c6bbb5;color:#443a3f;}
.done.checked{background:#becfb8;border-color:#79916f;color:#2e452b;}

/* Edit panels */
.individual-editor{
  background:linear-gradient(180deg,color-mix(in srgb,var(--editor-person-soft,#fff) 56%,#f8f3ef) 0%,#f8f4f0 120px);
  border-color:color-mix(in srgb,var(--editor-person-color,#d6dbe0) 24%,var(--luxe-line));
}
.individual-editor-legend,
.individual-editor-bulk-btn,
.individual-practice-card{
  background:var(--luxe-panel);
  border-color:var(--luxe-line);
}
.individual-practice-category{background:#eee7e2;color:#6b6065;}
.individual-practice-explanation{color:#665b61;}


/* Reading chrome and sticky stack */


.reader-filter-dock{
  border-color:var(--luxe-line);
  background:var(--luxe-panel);
  box-shadow:0 4px 15px rgba(54,34,42,.075);
}
.reader-filter-summary-row{
  background:linear-gradient(180deg,var(--ui-panel) 0%,#f7f2ee 100%);
}
.reader-filter-summary-title{color:#3a3035;}
.reader-filter-summary-value{color:#665a60;}
.reader-filter-chevron{color:#8a7b82;}
.reader-filter-content{background:var(--luxe-panel);border-top-color:#e7ddd6;}
.reader-filter-label{color:#665a60;}
.reader-filter-hint{color:#988b90;}
.reader-filter-chip{
  border-color:#ded3cc;
  background:#fffaf7;
  color:#53494e;
}
.reader-filter-chip:hover{background:#f2ebe7;border-color:#cabbb2;}
.reader-filter-chip.is-active{
  border-color:#6c555e;
  background:linear-gradient(145deg,#3b3036,#241d21);
  color:#fff8f3;
  box-shadow:0 2px 6px rgba(43,29,35,.15);
}
.reader-filter-chip-count{background:#eee7e2;color:#6c6066;}

.reader-filter-fantasy{color:#5f555a;}
/* Results: keep meaning, harmonise saturation and warmth */
:is(.couple-practice,.couple-group-variant-block)[data-result="excellent"]{
  --result-bg:var(--result-excellent-accent);--result-panel:linear-gradient(180deg,var(--result-excellent-panel-top) 0%,var(--result-excellent-panel-bottom) 100%);--result-border:var(--result-excellent-border);--result-copy-muted:#26392b;
}
:is(.couple-practice,.couple-group-variant-block)[data-result="strong"]{
  --result-bg:var(--result-strong-accent);--result-panel:linear-gradient(180deg,var(--result-strong-panel-top) 0%,var(--result-strong-panel-bottom) 100%);--result-border:var(--result-strong-border);--result-copy-muted:#393923;
}
:is(.couple-practice,.couple-group-variant-block)[data-result="compatible"]{
  --result-bg:var(--result-compatible-accent);--result-panel:linear-gradient(180deg,var(--result-compatible-panel-top) 0%,var(--result-compatible-panel-bottom) 100%);--result-border:var(--result-compatible-border);--result-copy-muted:#453719;
}
:is(.couple-practice,.couple-group-variant-block)[data-result="later"]{
  --result-bg:var(--result-later-accent);--result-panel:linear-gradient(180deg,var(--result-later-panel-top) 0%,var(--result-later-panel-bottom) 100%);--result-border:var(--result-later-border);--result-copy-muted:#493125;
}
:is(.couple-practice,.couple-group-variant-block)[data-result="fantasy"]{
  --result-bg:var(--result-fantasy-accent);--result-panel:linear-gradient(180deg,var(--result-fantasy-panel-top) 0%,var(--result-fantasy-panel-bottom) 100%);--result-border:var(--result-fantasy-border);--result-copy-muted:#283342;
}
:is(.couple-practice,.couple-group-variant-block)[data-result="limit"]{
  --result-bg:var(--result-limit-accent);--result-panel:linear-gradient(180deg,var(--result-limit-panel-top) 0%,var(--result-limit-panel-bottom) 100%);--result-border:var(--result-limit-border);--result-copy-muted:#43252e;
}
:is(.couple-practice,.couple-group-variant-block)[data-result="incomplete"]{
  --result-bg:var(--result-incomplete-accent);--result-panel:linear-gradient(180deg,var(--result-incomplete-panel-top) 0%,var(--result-incomplete-panel-bottom) 100%);--result-border:var(--result-incomplete-border);--result-copy-muted:#3b3d41;
}
.couple-result-cell{
  box-shadow:inset 0 0 0 1px rgba(255,250,244,.15),0 2px 5px rgba(47,30,36,.10);
}
.couple-result-tick{background:rgba(255,248,238,.76);color:#5a514d;}
.couple-reader-pin{background:rgba(255,252,247,.84);border-color:rgba(72,52,59,.11);}
.couple-reader-pin:hover{background:#f6eee9;border-color:#c3b3aa;}
.couple-reader-pin.is-selected{background:#f1dfb9;border-color:#aa8141;color:#6e4f1f;}


/* Session / dialogs */
.session-mode-panel,
.info-modal-dialog,
.help-dialog,
.adult-gate-dialog{
  border-color:#cdbfb7;
  background:var(--luxe-panel);
  box-shadow:0 26px 75px rgba(31,19,24,.28);
}
.session-mode-head,
.info-modal-head{background:#f2ebe7;border-bottom-color:var(--luxe-line);}
.session-mode-card{background:var(--luxe-panel);border-color:#d9cec7;}
.session-mode-card:hover{border-color:#c3b2a8;}
.session-mode-index{background:#2b2227;color:#fff6ef;}
.session-mode-safety{background:#fbf4e7;border-color:#d7bf8a;}
.adult-gate-badge{
  background:radial-gradient(circle at 35% 30%,#2f2429 0%,var(--luxe-black) 70%);
  color:#e3b65e;
  border:1px solid rgba(181,141,74,.55);
  box-shadow:0 4px 18px rgba(34,18,25,.18);
}
.adult-gate-notice{border-left-color:var(--luxe-gold);background:#fbf3df;color:#493d2c;}
.adult-exit{background:#fffaf7;color:#6d2638;border-color:#c9909e !important;}

/* Footer */
.site-footer{
  background:#f5efeb;
  border-top-color:#d9cec7;
  color:#766970;
}


/* Premium gold used sparingly for status / selected accents */
.random-session-btn:hover:not(:disabled),
.session-mode-btn:hover:not(:disabled){
  box-shadow:0 0 0 2px rgba(181,141,74,.16),0 2px 6px rgba(73,53,28,.10);
}


/* Reading mode dominant-tinted surfaces: removes harsh white backgrounds and
   instantly communicates who currently dominates. */
:root{
  --dominant-color:var(--person-a-role-color);
  --dominant-dark:var(--person-a-role-dark);
  --dominant-soft:var(--person-a-role-soft);
}
body[data-view-mode="read"],
body[data-view-mode="read"] header,
body[data-view-mode="read"] main,
body[data-view-mode="read"] .site-footer,
body[data-view-mode="read"] .top{
  background:var(--variant-bg);
}
body[data-view-mode="read"] header h1{
  color:var(--ui-on-dark);
  text-shadow:0 1px 2px rgba(18,13,17,.32);
}
body[data-view-mode="read"] :is(.language-switch,.help-button,.all-tools,.reader-filter-dock,.couple-reader-category,.site-footer){
  border-color:var(--read-dominant-line);
}

body[data-view-mode="read"] .language-switch,

body[data-view-mode="read"] .help-button,

body[data-view-mode="read"] .all-tools,

body[data-view-mode="read"] .reader-filter-dock,

body[data-view-mode="read"] .couple-reader-category,

body[data-view-mode="read"] .site-footer{
  background:var(--read-dominant-panel);
  color:var(--read-dominant-ink);
}
body[data-view-mode="read"] .all-tools > summary,
body[data-view-mode="read"] .reader-filter-dock > summary,
body[data-view-mode="read"] .all-tools-content,
body[data-view-mode="read"] .reader-filter-content,
body[data-view-mode="read"] .reader-filter-dock::after{
  background:var(--variant-bg);
}


/*  Reading categories follow the current dominant instead of using
   unrelated catalogue colors. This keeps the visual language cohesive while
   result colors remain semantic. */
body[data-view-mode="read"] .couple-reader-category-chevron,
body[data-view-mode="read"] .couple-reader-category-count,
body[data-view-mode="read"] .couple-result-head small{
  color:color-mix(in srgb,var(--dominant-dark) 74%,#5f565b 26%);
}


/*  Edit mode follows the colour of the person currently answering,
   using the same global-theme system as Reading mode. */
body[data-view-mode="edit"],
body[data-view-mode="edit"] header,
body[data-view-mode="edit"] main,
body[data-view-mode="edit"] .site-footer,
body[data-view-mode="edit"] .top{
  background:var(--variant-bg);
}
body[data-view-mode="edit"] header h1{
  color:var(--ui-on-dark);
  text-shadow:0 1px 2px rgba(18,13,17,.32);
}
body[data-view-mode="edit"] :is(.language-switch,.help-button,.all-tools,.individual-editor,.site-footer){
  border-color:var(--edit-theme-line);
}

body[data-view-mode="edit"] .language-switch,

body[data-view-mode="edit"] .help-button,

body[data-view-mode="edit"] .all-tools,

body[data-view-mode="edit"] .individual-editor,

body[data-view-mode="edit"] .site-footer{
  background:var(--edit-theme-panel);
  color:var(--edit-theme-ink);
}
body[data-view-mode="edit"] .all-tools > summary,
body[data-view-mode="edit"] .individual-editor-legend,
body[data-view-mode="edit"] .individual-editor-bulk-btn{
  background:var(--edit-theme-panel-2);
  color:var(--edit-theme-ink);
  border-color:var(--edit-theme-line);
}
body[data-view-mode="edit"] .all-tools-content{
  background:var(--edit-theme-panel);
}
/*  Edit readability tuning */
body[data-view-mode="edit"] .individual-editor{
  background:var(--edit-theme-panel);
  border-color:var(--edit-theme-line);
  box-shadow:0 10px 30px rgba(24,14,19,.08);
}
body[data-view-mode="edit"] .individual-practice-card h3,

body[data-view-mode="edit"] .individual-slot-label{
  color:var(--edit-theme-ink);
}
body[data-view-mode="edit"] .individual-practice-explanation,
body[data-view-mode="edit"] .individual-practice-category,
body[data-view-mode="edit"] .individual-applicability,
body[data-view-mode="edit"] .individual-prior,
body[data-view-mode="edit"] .individual-note-toggle{
  color:var(--edit-theme-muted);
}
body[data-view-mode="edit"] .individual-practice-category{
  background:rgba(255,252,248,.82);
  border:1px solid color-mix(in srgb,var(--dominant-dark) 9%,#e9e1dc 91%);
}


body[data-view-mode="edit"] .individual-prior,

body[data-view-mode="edit"] .individual-note-toggle{
  border-color:color-mix(in srgb,var(--dominant-dark) 15%,#d9ccc5 85%);
  
}

body[data-view-mode="edit"] .individual-note-toggle:hover,
body[data-view-mode="edit"] .individual-note-toggle.is-open{
  border-color:color-mix(in srgb,var(--dominant-color) 34%,#92a4b7 66%);
  background:color-mix(in srgb,var(--dominant-soft) 24%,#f5f8fb 76%);
}
body[data-view-mode="edit"] .individual-note-toggle.has-note{
  border-color:color-mix(in srgb,var(--dominant-color) 24%,#a48aa0 76%);
  background:color-mix(in srgb,var(--dominant-soft) 24%,#fbf5fa 76%);
}


/*  Global contrast pass
   Prevent dark-on-dark and light-on-light combinations across the full UI. */
:root{
  --contrast-ink-strong:#2b2327;
  --contrast-ink:#463c41;
  --contrast-ink-soft:#665a61;
  --contrast-chip-bg:rgba(255,252,248,.9);
  
}

/* Shared chips and inline labels */
.profile-inline-name.person-a,
.profile-inline-name.person-b{
  background:var(--contrast-chip-bg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38);
}
.profile-inline-text{color:var(--contrast-ink);}

/* Header person selector */
.role-switch [data-person-choice]{
  background:rgba(255,251,247,.96);
  color:var(--contrast-ink-strong);
}
.role-switch [data-person-choice] .role-choice-name{color:var(--contrast-ink-strong);}
.role-switch [data-person-choice] .role-choice-ds{color:var(--contrast-ink-soft);opacity:.92;}
.role-switch [data-person-choice].active{
  color:var(--ui-white);
}
.role-switch [data-person-choice].active .role-choice-name,
.role-switch [data-person-choice].active .role-choice-ds{
  color:var(--ui-white);
  text-shadow:0 1px 1px rgba(0,0,0,.18);
}
.role-switch [data-person-choice].active .profile-inline-name{
  background:rgba(255,250,244,.92);
  border-color:rgba(255,255,255,.34);
  color:var(--role-accent-dark, #3a2b15);
}

/* Reading dominant selector */
.reader-header-ds{
  background:rgba(255,251,247,.96);
  border-color:rgba(86,68,76,.20);
}
.reader-header-ds-choice{
  background:color-mix(in srgb,var(--reader-person-soft) 72%,#fff 28%);
  color:var(--reader-person-dark);
}
.reader-header-ds-choice .profile-inline-text{color:inherit;}
.reader-header-ds-choice .profile-inline-name{
  background:rgba(255,251,247,.9);
  border-color:color-mix(in srgb,var(--reader-person-color) 24%,#fff 76%);
}
.reader-header-ds-choice.active,
.reader-header-ds-choice[aria-pressed="true"]{
  color:#fffdf8;
}
.reader-header-ds-choice.active .profile-inline-text,
.reader-header-ds-choice[aria-pressed="true"] .profile-inline-text,
.reader-header-ds-choice.active .flow-arrow,
.reader-header-ds-choice[aria-pressed="true"] .flow-arrow{
  color:#fffdf8;
}
.reader-header-ds-choice.active .profile-inline-name,
.reader-header-ds-choice[aria-pressed="true"] .profile-inline-name{
  background:rgba(255,250,245,.92);
  border-color:rgba(255,255,255,.26);
  color:var(--reader-person-dark);
}

/* Better summary / control contrast */
.reader-filter-summary-value,

.individual-practice-category,

.individual-applicability,

.individual-prior,

.individual-note-toggle,

.couple-result-head small{
  color:var(--contrast-ink);
}

/* Reading cards and categories */
.couple-reader-category-head > strong,
.reader-filter-dock > summary,
.all-tools > summary,
.individual-category-head strong,
.individual-practice-card h3,
.couple-practice-title-line strong{
  color:var(--contrast-ink-strong);
}
.couple-practice-description,
.individual-practice-explanation{
  color:#50464b;
}
body[data-view-mode="read"] .reader-filter-summary-value{
  background:rgba(255,252,248,.86);
  color:var(--contrast-ink-strong);
}

/* Edit cards readability */
body[data-view-mode="edit"] .individual-practice-card h3,

body[data-view-mode="edit"] .individual-slot-label,

body[data-view-mode="edit"] .individual-category-head strong,

body[data-view-mode="edit"] .all-tools > summary,

body[data-view-mode="edit"] .individual-editor-bulk-btn{
  color:var(--contrast-ink-strong);
}
body[data-view-mode="edit"] .individual-practice-explanation,
body[data-view-mode="edit"] .individual-practice-category,
body[data-view-mode="edit"] .individual-prior,
body[data-view-mode="edit"] .individual-note-toggle,
body[data-view-mode="edit"] .individual-applicability{
  color:#5a5056;
}
body[data-view-mode="edit"] .individual-practice-category,
/* Buttons with clear selected state */
.score-btn.selected{
  outline-color:#2f272b;
  box-shadow:inset 0 0 0 1px rgba(28,21,24,.10),0 0 0 1px rgba(255,255,255,.28);
}


/*  visual rail cleanup + header scope fix */
body > header{border-top:0!important;}
.all-tools > summary{border-left:0!important;}
.individual-practice-card > header{border-top:0!important;}
.random-result,
.explore-strip,
.help-intro{border-left-width:1px!important;}


/*  Edit mode color refactor
   Bring edit cards much closer to reading mode by tinting practices and slot rows
   with the same result language, while keeping strong readability. */
body[data-view-mode="edit"] .individual-editor-bulk-btn,
body[data-view-mode="edit"] .all-tools > summary,
body[data-view-mode="edit"] .all-tools-content{
  background:color-mix(in srgb,var(--dominant-soft) 46%,#fff 54%);
}
body[data-view-mode="edit"] .individual-practice-card{
  
  --edit-result-panel:#f3efe8;
  --edit-result-panel-strong:#e9e2d8;
  --edit-result-line:#d7ccc0;
  
  
  
}


body[data-view-mode="edit"] .individual-slot + .individual-slot{border-top-color:color-mix(in srgb,var(--edit-result-line) 75%,#fff 25%);}

body[data-view-mode="edit"] .individual-practice-card[data-result-key="excellent"]{--edit-result-panel:var(--result-excellent-panel-top);--edit-result-panel-strong:var(--result-excellent-panel-bottom);--edit-result-line:var(--result-excellent-border);}
body[data-view-mode="edit"] .individual-practice-card[data-result-key="strong"]{--edit-result-panel:var(--result-strong-panel-top);--edit-result-panel-strong:var(--result-strong-panel-bottom);--edit-result-line:var(--result-strong-border);}
body[data-view-mode="edit"] .individual-practice-card[data-result-key="compatible"]{--edit-result-panel:var(--result-compatible-panel-top);--edit-result-panel-strong:var(--result-compatible-panel-bottom);--edit-result-line:var(--result-compatible-border);}
body[data-view-mode="edit"] .individual-practice-card[data-result-key="later"]{--edit-result-panel:var(--result-later-panel-top);--edit-result-panel-strong:var(--result-later-panel-bottom);--edit-result-line:var(--result-later-border);}
body[data-view-mode="edit"] .individual-practice-card[data-result-key="fantasy"]{--edit-result-panel:var(--result-fantasy-panel-top);--edit-result-panel-strong:var(--result-fantasy-panel-bottom);--edit-result-line:var(--result-fantasy-border);}
body[data-view-mode="edit"] .individual-practice-card[data-result-key="limit"]{--edit-result-panel:var(--result-limit-panel-top);--edit-result-panel-strong:var(--result-limit-panel-bottom);--edit-result-line:var(--result-limit-border);}

body[data-view-mode="edit"] .individual-practice-card[data-result-key] .individual-practice-category{
  background:rgba(255,250,244,.82);
  border-color:rgba(71,54,40,.12);
  color:#544841;
}
body[data-view-mode="edit"] .individual-practice-card[data-result-key] h3,

body[data-view-mode="edit"] .individual-practice-card[data-result-key] .individual-slot-label{
  color:#2f2628;
}
body[data-view-mode="edit"] .individual-practice-card[data-result-key] .individual-practice-explanation,
body[data-view-mode="edit"] .individual-practice-card[data-result-key] .individual-prior,
body[data-view-mode="edit"] .individual-practice-card[data-result-key] .individual-note-toggle{
  color:#53484c;
}


body[data-view-mode="edit"] .individual-slot[data-result-key] .individual-slot-main{
  padding:4px 5px;
  border:1px solid var(--edit-slot-border);
  border-radius:8px;
  background:rgba(255,253,250,.28);
}


body[data-view-mode="edit"] .individual-prior,

body[data-view-mode="edit"] .individual-note-toggle{
  background:rgba(255,251,247,.9);
}
body[data-view-mode="edit"] .individual-slot.is-incompatible{
  background:rgba(245,238,235,.85);
  opacity:1;
}
body[data-view-mode="edit"] .individual-slot.is-incompatible .individual-slot-main{
  background:rgba(249,245,242,.82);
}


/*  Edit/read color alignment
   1) practice header uses the editor theme
   2) DOM/SUB rows reuse the exact reading-mode result palette
   3) text contrast is reinforced everywhere. */


body[data-view-mode="edit"] .individual-practice-card h3,

body[data-view-mode="edit"] .individual-practice-card .individual-slot-label{
  color:#2c2427;
}
body[data-view-mode="edit"] .individual-practice-card .individual-practice-explanation,
body[data-view-mode="edit"] .individual-practice-card .individual-prior,
body[data-view-mode="edit"] .individual-practice-card .individual-note-toggle,
body[data-view-mode="edit"] .individual-practice-card .individual-applicability{
  color:#4e4449;
}
body[data-view-mode="edit"] .individual-practice-card .individual-practice-category{
  background:rgba(255,251,247,.92);
  border-color:rgba(73,57,62,.12);
  color:var(--dominant-dark);
}


body[data-view-mode="edit"] .individual-slot[data-result-key] .individual-prior,

body[data-view-mode="edit"] .individual-slot[data-result-key] .individual-note-toggle{
  background:rgba(255,250,245,.88);
  border-color:rgba(80,60,50,.18);
  color:#43393e;
}
body[data-view-mode="edit"] .individual-slot[data-result-key] .individual-prior.checked{
  background:rgba(245,250,243,.92);
  color:#2f4e34;
}


/*  Edit slot refinement
   Neutral row background, result color only inside the rounded frame,
   dominant/editor color on the frame border. */


/*  Remove pale internal seams in edit cards */
body[data-view-mode="edit"] .individual-practice-card{
  
  border-color:color-mix(in srgb,var(--dominant-color) 34%,#fff 66%);
}

body[data-view-mode="edit"] .individual-slots,
body[data-view-mode="edit"] .individual-slots.has-multiple{
  display:block;
  padding:2px 0 4px;
  background:transparent;
}
body[data-view-mode="edit"] .individual-slot{
  padding:2px 5px 0;
  background:transparent;
}
body[data-view-mode="edit"] .individual-slot:first-child{
  padding-top:0;
}
body[data-view-mode="edit"] .individual-slot + .individual-slot{
  border-top:0;
  margin-top:2px;
}


@media (max-width:760px){
  body[data-view-mode="edit"] .individual-slots,
body[data-view-mode="edit"] .individual-slots.has-multiple{padding:2px 0 3px;}
  body[data-view-mode="edit"] .individual-slot{padding:2px 4px 0;}
  
}


/*  Reduce excess white in edit mode */
body[data-view-mode="edit"] .individual-editor,

body[data-view-mode="edit"] .individual-editor-bulk-btn,

body[data-view-mode="edit"] .all-tools > summary,

body[data-view-mode="edit"] .all-tools-content,

body[data-view-mode="edit"] .tool-section{
  background:color-mix(in srgb,var(--dominant-soft) 84%,var(--dominant-color) 16%);
}
body[data-view-mode="edit"] .individual-editor,
body[data-view-mode="edit"] .individual-editor-bulk-btn,
body[data-view-mode="edit"] .all-tools,
body[data-view-mode="edit"] .all-tools > summary,
body[data-view-mode="edit"] .all-tools-content{
  border-color:color-mix(in srgb,var(--dominant-color) 34%,#fff 66%);
}


body[data-view-mode="edit"] .individual-practice-card .individual-practice-category,
body[data-view-mode="edit"] .reader-filter-summary-value{
  background:color-mix(in srgb,var(--dominant-soft) 78%,#fff 22%);
}


body[data-view-mode="edit"] .individual-practice-explanation,
body[data-view-mode="edit"] .individual-prior,
body[data-view-mode="edit"] .individual-note-toggle,
body[data-view-mode="edit"] .individual-applicability{
  color:#4a4146;
}
body[data-view-mode="edit"] .individual-practice-card h3,

body[data-view-mode="edit"] .individual-slot-label,

body[data-view-mode="edit"] .individual-editor-bulk-btn,

body[data-view-mode="edit"] .all-tools > summary{
  color:#2e2528;
}


/*  Stronger separation between practice cards and page background */
body[data-view-mode="edit"] .individual-practice-card{
  background:color-mix(in srgb,var(--dominant-soft) 74%,#fff 26%);
  border:1px solid color-mix(in srgb,var(--dominant-color) 46%,#fff 54%);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--dominant-dark) 14%,transparent 86%),0 5px 14px rgba(34,18,31,.12);
}
body[data-view-mode="edit"] .individual-practice-card > header{
  
  border-bottom:1px solid color-mix(in srgb,var(--dominant-dark) 22%,#fff 78%);
}
body[data-view-mode="edit"] .individual-practice-card[data-result-key="excellent"]{background:linear-gradient(180deg,#d5e2cf 0%,#cbdbc3 100%);border-color:color-mix(in srgb,var(--dominant-color) 38%,var(--result-excellent-border) 62%);}
body[data-view-mode="edit"] .individual-practice-card[data-result-key="strong"]{background:linear-gradient(180deg,#e4e2b6 0%,#dad6a6 100%);border-color:color-mix(in srgb,var(--dominant-color) 38%,var(--result-strong-border) 62%);}
body[data-view-mode="edit"] .individual-practice-card[data-result-key="compatible"]{background:linear-gradient(180deg,#ead6aa 0%,#e0c993 100%);border-color:color-mix(in srgb,var(--dominant-color) 38%,var(--result-compatible-border) 62%);}
body[data-view-mode="edit"] .individual-practice-card[data-result-key="later"]{background:linear-gradient(180deg,#e6cab4 0%,#dcbba0 100%);border-color:color-mix(in srgb,var(--dominant-color) 38%,var(--result-later-border) 62%);}
body[data-view-mode="edit"] .individual-practice-card[data-result-key="fantasy"]{background:linear-gradient(180deg,#d0d8e5 0%,#c1cde0 100%);border-color:color-mix(in srgb,var(--dominant-color) 38%,var(--result-fantasy-border) 62%);}
body[data-view-mode="edit"] .individual-practice-card[data-result-key="limit"]{background:linear-gradient(180deg,#e2cbd1 0%,#d5b7c0 100%);border-color:color-mix(in srgb,var(--dominant-color) 38%,var(--result-limit-border) 62%);}
body[data-view-mode="edit"] .individual-practice-card[data-result-key="incomplete"]{background:linear-gradient(180deg,#efebe5 0%,#e5ded6 100%);border-color:color-mix(in srgb,var(--dominant-color) 38%,var(--result-incomplete-border) 62%);}
@media (max-width:760px){
body[data-view-mode="edit"] .individual-practice-card{box-shadow:0 0 0 1px color-mix(in srgb,var(--dominant-dark) 12%,transparent 88%),0 4px 11px rgba(34,18,31,.11);}
}


/*  Practice card color must follow the editor, not the result */
body[data-view-mode="edit"] .individual-practice-card,
body[data-view-mode="edit"] .individual-practice-card[data-result-key],
body[data-view-mode="edit"] .individual-practice-card[data-result-key="excellent"],
body[data-view-mode="edit"] .individual-practice-card[data-result-key="strong"],
body[data-view-mode="edit"] .individual-practice-card[data-result-key="compatible"],
body[data-view-mode="edit"] .individual-practice-card[data-result-key="later"],
body[data-view-mode="edit"] .individual-practice-card[data-result-key="fantasy"],
body[data-view-mode="edit"] .individual-practice-card[data-result-key="limit"],
body[data-view-mode="edit"] .individual-practice-card[data-result-key="incomplete"]{
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--dominant-soft) 86%,#fff 14%) 0%,
    color-mix(in srgb,var(--dominant-soft) 78%,var(--dominant-color) 22%) 100%);
  border-color:color-mix(in srgb,var(--dominant-color) 52%,#fff 48%);
  box-shadow:
    0 0 0 1px color-mix(in srgb,var(--dominant-dark) 14%,transparent 86%),
    0 5px 14px rgba(34,18,31,.12);
}
body[data-view-mode="edit"] .individual-practice-card > header,
body[data-view-mode="edit"] .individual-practice-card[data-result-key] > header{
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--dominant-color) 56%,#fff 44%) 0%,
    color-mix(in srgb,var(--dominant-color) 42%,#fff 58%) 100%);
  border-bottom:1px solid color-mix(in srgb,var(--dominant-dark) 24%,#fff 76%);
}
body[data-view-mode="edit"] .individual-practice-card .individual-practice-category,
body[data-view-mode="edit"] .individual-practice-card[data-result-key] .individual-practice-category{
  background:color-mix(in srgb,var(--dominant-soft) 78%,#fff 22%);
  border-color:color-mix(in srgb,var(--dominant-color) 24%,#fff 76%);
  color:var(--dominant-dark);
}
body[data-view-mode="edit"] .individual-practice-card h3,
body[data-view-mode="edit"] .individual-practice-card .individual-practice-explanation,
body[data-view-mode="edit"] .individual-practice-card[data-result-key] h3,
body[data-view-mode="edit"] .individual-practice-card[data-result-key] .individual-practice-explanation{
  color:#2e2528;
}


/*  Premium reading filters + remove DS counts */
body[data-view-mode="read"] .reader-filter-dock{
  margin:10px 0 2px;
  border:1px solid color-mix(in srgb,var(--dominant-dark) 22%,#efe4da 78%);
  border-radius:16px;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--read-dominant-panel) 82%,#fff 18%) 0%,
    color-mix(in srgb,var(--read-dominant-panel-2) 88%,#fff 12%) 100%);
  box-shadow:0 10px 24px rgba(40,24,34,.12), inset 0 1px 0 rgba(255,255,255,.16);
  overflow:hidden;
}
body[data-view-mode="read"] .reader-filter-dock > summary{
  list-style:none;
}
body[data-view-mode="read"] .reader-filter-summary-row{
  min-height:46px;
  gap:10px;
  padding:10px 12px;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--read-dominant-panel) 66%,#fff 34%) 0%,
    color-mix(in srgb,var(--read-dominant-panel-2) 78%,#fff 22%) 100%);
}
body[data-view-mode="read"] .reader-filter-summary-title{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-width:0;
  font-size:.82rem;
  font-weight:900;
  color:var(--read-dominant-ink);
  letter-spacing:.01em;
}
body[data-view-mode="read"] .reader-filter-summary-title > span[aria-hidden="true"]{
  display:inline-grid;
  place-items:center;
  width:24px;
  height:24px;
  border-radius:999px;
  background:color-mix(in srgb,var(--dominant-soft) 76%,#fff 24%);
  border:1px solid color-mix(in srgb,var(--dominant-color) 24%,#fff 76%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32);
}
body[data-view-mode="read"] .reader-filter-summary-value{
  justify-self:end;
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:center;
  gap:5px;
  max-width:min(68%,540px);
  padding:6px 10px;
  border-radius:999px;
  border:1px solid color-mix(in srgb,var(--dominant-color) 22%,#fff 78%);
  background:linear-gradient(180deg,rgba(255,252,248,.92) 0%,rgba(246,238,231,.82) 100%);
  color:color-mix(in srgb,var(--read-dominant-ink) 82%,#574b52 18%);
  font-size:.72rem;
  font-weight:850;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38), 0 3px 10px rgba(44,27,35,.06);
}


body[data-view-mode="read"] .reader-filter-chevron{
  font-size:.95rem;
  color:color-mix(in srgb,var(--dominant-dark) 70%,#fff 30%);
}
body[data-view-mode="read"] .reader-filter-content{
  gap:10px;
  padding:10px 12px 12px;
  
  
}
body[data-view-mode="read"] .reader-filter-group{
  grid-template-columns:124px minmax(0,1fr);
  
}
body[data-view-mode="read"] .reader-filter-label{
  color:var(--read-dominant-ink);
  font-size:.69rem;
  font-weight:900;
}
body[data-view-mode="read"] .reader-filter-hint{
  color:color-mix(in srgb,var(--read-dominant-ink) 56%,#9b8d94 44%);
}
body[data-view-mode="read"] .reader-minimum-row{
  
  padding:8px 10px;
  border:1px solid color-mix(in srgb,var(--dominant-color) 14%,#fff 86%);
  border-radius:12px;
  background:rgba(255,251,247,.44);
}
body[data-view-mode="read"] .reader-minimum-row-label{
  color:color-mix(in srgb,var(--read-dominant-ink) 76%,#6a5d64 24%);
  font-weight:800;
}
body[data-view-mode="read"] .reader-filter-chip{
  border-radius:999px;
  border-color:color-mix(in srgb,var(--dominant-color) 16%,#fff 84%);
  background:rgba(255,250,246,.88);
  color:#544a50;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.36);
}
body[data-view-mode="read"] .reader-filter-chip:hover{
  
  border-color:color-mix(in srgb,var(--dominant-color) 28%,#fff 72%);
}
body[data-view-mode="read"] .reader-filter-chip.is-active{
  border-color:color-mix(in srgb,var(--dominant-dark) 58%,#fff 42%);
  
  
  box-shadow:0 3px 10px rgba(43,29,35,.16), inset 0 1px 0 rgba(255,255,255,.12);
}
body[data-view-mode="read"] .reader-filter-chip-count{
  background:rgba(255,250,246,.66);
  color:color-mix(in srgb,var(--read-dominant-ink) 70%,#77676f 30%);
}
body[data-view-mode="read"] .reader-filter-bottom{
  display:flex;
  align-items:center;
  
  gap:10px;
  padding-top:2px;
}
body[data-view-mode="read"] .reader-filter-fantasy{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border:1px solid color-mix(in srgb,var(--dominant-color) 14%,#fff 86%);
  border-radius:12px;
  background:rgba(255,251,247,.46);
  color:#5e5359;
}
body[data-view-mode="read"] 
body[data-view-mode="read"] .reader-header-ds-choice .profile-inline-name{max-width:none;}
@media (max-width:760px){
  body[data-view-mode="read"] .reader-filter-summary-row{padding:9px 10px;gap:8px;}
  body[data-view-mode="read"] .reader-filter-summary-title{font-size:.78rem;}
  body[data-view-mode="read"] .reader-filter-summary-value{font-size:.68rem;padding:5px 8px;}
  body[data-view-mode="read"] .reader-filter-group{grid-template-columns:1fr;gap:8px;}
  body[data-view-mode="read"] .reader-filter-bottom{flex-direction:column;align-items:stretch;}
}


/* Reading filter dock inside the fixed header */
header .reader-top-dock{
  display:none;
  position:relative;
  top:auto;
  z-index:auto;
  gap:6px;
  margin:8px 0 0 !important;
  padding:0;
  background:transparent;
}
body[data-view-mode="read"] header .reader-top-dock{display:grid;}
body[data-view-mode="edit"] header .reader-top-dock{display:none;}


@media (max-width:760px){
  header .reader-top-dock{margin:6px 0 0 !important;gap:5px;}
  
  
  
  body[data-view-mode="read"] header .reader-filter-dock{border-radius:14px;}
}


/*  Slightly darker read-mode practice backgrounds for better readability */


body[data-view-mode="read"] .couple-practice{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
body[data-view-mode="read"] .couple-practice-description{
  color:color-mix(in srgb,var(--result-copy-muted,#3b3f42) 92%,#1f2022 8%);
}


/* Premium tools/options header block */
header .all-tools{
  position:relative;
  
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  
  overflow:visible !important;
}
header .all-tools > summary{
  position:relative;
  
  
  
  border:1px solid color-mix(in srgb,var(--luxe-line) 78%,#fff 22%) !important;
  
  
  
  box-shadow:0 10px 22px rgba(42,28,35,.10), inset 0 1px 0 rgba(255,255,255,.28) !important;
}
header .all-tools > summary::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26), inset 0 -1px 0 rgba(98,74,85,.05);
}
header .all-tools > summary::after{
  content:"▾";
  
  
  display:inline-grid;
  place-items:center;
  
  
  
  
  
  
  
  
  transition:transform .18s ease,background .18s ease;
}


header .all-tools[open] > summary{
  border-bottom-left-radius:16px !important;
  border-bottom-right-radius:16px !important;
}
header .all-tools-content{
  
  border:1px solid color-mix(in srgb,var(--luxe-line) 64%,#fff 36%) !important;
  
  background:linear-gradient(180deg,#f4eeea 0%,#ece3de 100%) !important;
  box-shadow:0 14px 28px rgba(39,27,33,.12), inset 0 1px 0 rgba(255,255,255,.24) !important;
}
@media (max-width:760px){
  header .all-tools{margin:6px 0 0 !important;}
  header .all-tools > summary{
    min-height:42px !important;
    padding:7px 10px 7px 12px !important;
    border-radius:16px !important;
  }
  header .all-tools > summary::after{
    width:26px;
    min-width:26px;
    height:26px;
  }
  
  header .all-tools-content{
    margin-top:6px !important;
    border-radius:16px !important;
  }
}

/*  couple configuration exchange */
.filters-backup-section .config-share{
  grid-column:1 / -1;
  justify-self:end;
  width:min(100%,520px);
  
  border-color:#8d7046;
  background:linear-gradient(180deg,#f8f1e6,#eee1cf);
  color:#60471f;
  font-weight:900;
}
.filters-backup-section .config-share:hover{background:linear-gradient(180deg,#fff8ed,#f3e5d1);}

.config-conflict-modal{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;padding:16px;}
.config-conflict-backdrop{position:absolute;inset:0;background:rgba(20,14,18,.72);backdrop-filter:blur(4px);}
.config-conflict-dialog{position:relative;width:min(660px,100%);max-height:min(88dvh,720px);overflow:auto;padding:18px;border:1px solid #b9a5ae;border-radius:18px;background:#fff;color:#30262b;box-shadow:0 28px 80px rgba(0,0,0,.38);}
.config-conflict-kicker{display:inline-flex;margin-bottom:7px;padding:4px 8px;border:1px solid #d8c3aa;border-radius:999px;background:#f7efe4;color:#73552c;font-size:.7rem;font-weight:900;text-transform:uppercase;letter-spacing:.055em;}
.config-conflict-dialog h2{margin:0 0 7px;font-size:1.25rem;}
.config-conflict-dialog p{margin:0;color:#665a60;font-size:.86rem;line-height:1.48;}
.config-conflict-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px;}
.config-conflict-actions button{min-height:42px;border-radius:11px;padding:7px 10px;font:inherit;font-size:.8rem;font-weight:900;cursor:pointer;}
.config-conflict-local{border:1px solid #6c8795;background:#eef5f8;color:#254d61;}
.config-conflict-incoming{border:1px solid #9b6b79;background:#f7edf1;color:#71374b;}
.config-conflict-cancel{grid-column:1/-1;border:1px solid #cfc5c9;background:#f5f3f4;color:#62575c;}
@media(max-width:620px){
  .config-conflict-dialog{padding:14px;border-radius:15px;}
  .config-conflict-actions{grid-template-columns:1fr;}
  .config-conflict-cancel{grid-column:auto;}
  .config-conflict-actions button{min-height:40px;}
  .filters-backup-section .config-share{width:100%;}
}


/*  profile-only options moved out of onboarding */
.tool-check{display:flex;align-items:center;gap:9px;width:max-content;max-width:100%;margin-top:10px;padding:8px 10px;border:1px solid color-mix(in srgb,currentColor 13%,transparent);border-radius:11px;background:rgba(255,255,255,.045);font-size:.76rem;font-weight:750;cursor:pointer;}
.tool-check input{width:17px;height:17px;margin:0;accent-color:var(--dominant-color);}
.tool-check span{min-width:0;}

/*  fixed edit controls + one note per person/practice */
header .editor-top-dock{
  display:none;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;
  gap:6px;
  margin:6px 0 0;
}
body[data-view-mode="edit"] header .editor-top-dock{display:grid;}

header .editor-top-dock .individual-editor-bulk-btn,
header .editor-top-dock .profile-edit-button{
  min-height:38px;
  margin:0;
  padding:6px 10px;
  border:1px solid color-mix(in srgb,var(--edit-theme-line) 72%,#fff 28%);
  border-radius:12px;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--edit-theme-panel-2) 86%,#fff 14%) 0%,
    color-mix(in srgb,var(--edit-theme-panel-3) 94%,#fff 6%) 100%);
  color:var(--edit-theme-ink);
  font:inherit;
  font-size:.78rem;
  font-weight:850;
  box-shadow:0 3px 10px rgba(38,24,34,.08),inset 0 1px 0 rgba(255,255,255,.24);
  cursor:pointer;
}
header .editor-top-dock .profile-edit-button{
  min-width:104px;
  white-space:nowrap;
}
header .editor-top-dock button:active{transform:translateY(1px);}


.individual-practice-headtools{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:4px;
}
.individual-practice-headtools .individual-note-toggle{
  width:28px;
  min-width:28px;
  height:28px;
  margin:0;
  border-color:color-mix(in srgb,var(--dominant-color) 35%,#b9b0b5 65%);
  background:rgba(255,250,246,.72);
}


@media (max-width:760px){
  header .editor-top-dock{gap:5px;margin-top:5px;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 92px;}
  header .editor-top-dock .individual-editor-bulk-btn,
header .editor-top-dock .profile-edit-button{
    min-height:36px;
    padding:5px 6px;
    border-radius:11px;
    font-size:.69rem;
  }
  header .editor-top-dock .profile-edit-button{min-width:0;}
  
  .individual-practice-headtools .individual-note-toggle{
    width:26px;
    min-width:26px;
    height:26px;
    font-size:.66rem;
  }
  
  
  
}


/* Compact backup status */
.backup-status-row{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:1fr;
  gap:6px;
  align-items:stretch;
  margin-top:7px;
}
.backup-status-row .exchange-info{
  min-width:0;
  min-height:31px;
  margin:0;
  padding:6px 9px;
  border:1px solid #dde2e6;
  border-radius:8px;
  background:#f7f8f9;
  color:var(--muted);
  font-size:9.5px;
  line-height:1.2;
}


@media(max-width:650px){
  .backup-status-row{gap:5px;}
  .backup-status-row .exchange-info{min-height:30px;padding:5px 7px;font-size:8.5px;}
}


/* Compact reading filters in the fixed header */


body[data-view-mode="read"] header .reader-filter-summary-value{
  
  
  
  line-height:1.05;
  
}


@media (max-width:760px){
  body[data-view-mode="read"] header .reader-top-dock{margin:3px 0 0 !important;gap:3px;}
  body[data-view-mode="read"] header .reader-filter-dock{border-radius:12px;}
  body[data-view-mode="read"] header .reader-filter-summary-row{min-height:34px;gap:6px;padding:5px 8px;}
  body[data-view-mode="read"] header .reader-filter-summary-title{font-size:.69rem;}
  body[data-view-mode="read"] header .reader-filter-summary-title > span[aria-hidden="true"]{width:18px;height:18px;font-size:.72rem;}
  body[data-view-mode="read"] header .reader-filter-summary-value{max-width:min(72%,420px);font-size:.58rem;padding:4px 7px;gap:3px;}
  
  body[data-view-mode="read"] header .reader-filter-chevron{font-size:.76rem;}
}

/* Kink-luxe fixed header */
:root{
  
  
  
  
  --kink-gold:var(--ui-gold);
  
  --kink-ivory:var(--ui-ivory);
  
}

/* One visual family, not three cream cards. */
header .all-tools > summary,
body[data-view-mode="read"] header .reader-filter-dock{
  border-color:color-mix(in srgb,var(--kink-gold) 44%,#423239 56%) !important;
  box-shadow:0 5px 14px rgba(15,8,12,.16), inset 0 1px 0 rgba(255,255,255,.045) !important;
}

/* Tools becomes a utility rail rather than a large card. */
header .all-tools{
  margin:4px 0 0 !important;
  border-radius:12px !important;
}
header .all-tools > summary{
  min-height:34px !important;
  padding:4px 7px 4px 11px !important;
  gap:8px !important;
  border-radius:12px !important;
  background:linear-gradient(180deg,#251b21 0%,#1a1317 100%) !important;
  color:var(--kink-ivory) !important;
  font-size:.74rem !important;
  font-weight:850 !important;
}

header .all-tools > summary::after{
  width:22px !important;
  min-width:22px !important;
  height:22px !important;
  border-radius:8px !important;
  border-color:rgba(184,149,82,.34) !important;
  
  
  
  font-size:.7rem !important;
}

header .all-tools-content{
  margin-top:4px !important;
  border-radius:14px !important;
}

/* Reading filters: dark bar, jewel-like chips, compatibility belongs here. */


body[data-view-mode="read"] header .reader-filter-summary-value{
  
  
  
  
  
  
  color:#ddd0d3 !important;
  font-size:.58rem !important;
  
}

body[data-view-mode="read"] header .reader-filter-summary-value .profile-inline-name{
  background:#f0e6d8 !important;
  border-color:#c9ad73 !important;
  color:#39282f !important;
  box-shadow:none !important;
}


body[data-view-mode="read"] .reader-filter-content{
  border-top:1px solid rgba(184,149,82,.24) !important;
  background:linear-gradient(180deg,#f5eee5 0%,#ece1d7 100%) !important;
}

/* Reduce the visual seams between the fixed rows. */
header .all-tools > summary,
body[data-view-mode="read"] header .reader-filter-dock{
  outline:none !important;
}

@media (max-width:760px){
header .all-tools{margin-top:3px !important;}
  header .all-tools > summary{
    min-height:32px !important;
    padding:4px 6px 4px 10px !important;
    border-radius:11px !important;
    font-size:.71rem !important;
  }
  header .all-tools > summary::after{
    width:21px !important;
    min-width:21px !important;
    height:21px !important;
  }
  body[data-view-mode="read"] header .reader-top-dock{margin-top:3px !important;}
  body[data-view-mode="read"] header .reader-filter-dock{border-radius:11px !important;}
  body[data-view-mode="read"] header .reader-filter-summary-row{
    min-height:33px !important;
    padding:4px 6px 4px 8px !important;
  }
  body[data-view-mode="read"] header .reader-filter-summary-title{font-size:.66rem !important;}
  body[data-view-mode="read"] header .reader-filter-summary-value{
    max-width:72% !important;
    font-size:.54rem !important;
  }
  
}


/* Unified Exploration & session dock */
body[data-view-mode="read"] header .reader-filter-content{
  display:grid;
  
  
  overflow:auto;
  overscroll-behavior:contain;
  
  scrollbar-gutter:stable;
}
body[data-view-mode="read"] .reader-explore-section{
  min-width:0;
  margin:0 !important;
  
  border:1px solid rgba(184,149,82,.22) !important;
  
  
  box-shadow:inset 0 1px 0 rgba(255,255,255,.52) !important;
}
body[data-view-mode="read"] .reader-explore-section-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  
  
}
body[data-view-mode="read"] .reader-explore-section-head h2{
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  color:#35252d !important;
  
  font-weight:950 !important;
  letter-spacing:.01em;
}
body[data-view-mode="read"] .reader-explore-section-head small{
  color:#796970;
  
  font-weight:750;
  
}
body[data-view-mode="read"] .reader-filter-compat-count{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:0 10px;
  border:1px solid rgba(181,141,74,.30);
  border-radius:999px;
  background:rgba(181,141,74,.08);
  color:#795d25;
  font-size:.66rem;
  font-weight:950;
  line-height:1;
  white-space:nowrap;
}
body[data-view-mode="read"] .reader-filter-compat-count[hidden]{display:none!important;}

body[data-view-mode="read"] .reader-random-section .randomizer{
  display:grid;
  grid-template-columns:minmax(150px,.72fr) minmax(0,1.28fr);
  
  width:100%;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
body[data-view-mode="read"] .reader-random-section .random-btn{
  grid-column:1;
  grid-row:1;
  
  margin:0;
}
body[data-view-mode="read"] .reader-random-section .random-options{
  grid-column:2;
  grid-row:1 / span 3;
  align-content:start;
}

body[data-view-mode="read"] .reader-random-section .random-result{
  margin:0;
  
  line-height:1.35;
}

body[data-view-mode="read"] .reader-session-section .session-toolbar .action{
  min-height:32px;
  padding:4px 7px;
  font-size:.62rem;
}
body[data-view-mode="read"] .reader-session-section .session-summary{
  margin-top:6px;
  padding:6px 8px;
  font-size:.61rem;
}
body[data-view-mode="read"] .reader-session-section .session-list{
  margin-top:6px;
  
  overflow:auto;
}
@media (max-width:760px){
  body[data-view-mode="read"] header .reader-filter-content{
    max-height:64vh;
    gap:6px;
    padding:6px !important;
  }
  body[data-view-mode="read"] .reader-explore-section{padding:7px !important;border-radius:10px !important;}
  body[data-view-mode="read"] .reader-explore-section-head{align-items:flex-start;margin-bottom:6px;}
  body[data-view-mode="read"] .reader-explore-section-head h2{font-size:.68rem !important;}
  body[data-view-mode="read"] .reader-explore-section-head small{font-size:.52rem;text-align:right;max-width:48%;}
  body[data-view-mode="read"] .reader-filter-compat-count{min-height:22px;padding:0 9px;font-size:.61rem;}
  body[data-view-mode="read"] .reader-random-section .randomizer{grid-template-columns:1fr;gap:6px;}
  body[data-view-mode="read"] .reader-random-section .random-btn,
body[data-view-mode="read"] .reader-random-section .random-options{grid-column:1;grid-row:auto;}
  body[data-view-mode="read"] .reader-random-section .random-options{display:grid;grid-template-columns:1fr 1fr;gap:4px 8px;}
  body[data-view-mode="read"] .reader-random-section .random-options label{font-size:.56rem;line-height:1.2;}
  body[data-view-mode="read"] .reader-session-section .session-toolbar{display:grid;grid-template-columns:1fr 1fr;}
}


/* Tools grid after moving random/session into Exploration & session */
body[data-view-mode="read"] .reader-filter-content > .random-tool-section,
body[data-view-mode="read"] .reader-filter-content > .session-section{grid-area:auto!important;}
@media (min-width:1101px){
  body[data-view-mode="read"] .all-tools-content{
    grid-template-areas:
      "explore explore"
      "filters safety"
      "display display";
  }
  body[data-view-mode="edit"] .all-tools-content{
    grid-template-areas:
      "explore explore"
      "filters filters"
      "display display";
  }
}


/* clean reading header and native sticky category headers */
:root{--read-category-sticky-top:0px!important;}


body[data-view-mode="read"] .couple-reader{
  padding-top:0!important;
  margin-top:4px!important;
}

/* Exploration & séance: one compact light row when closed. */
body[data-view-mode="read"] header .reader-top-dock{
  margin:4px 0 0!important;
  gap:0!important;
}
body[data-view-mode="read"] header .reader-filter-dock{
  margin:0!important;
  border:1px solid color-mix(in srgb,var(--read-dominant-line) 78%,#eadfcf 22%)!important;
  border-radius:12px!important;
  
  box-shadow:0 4px 14px rgba(45,30,20,.08)!important;
  overflow:hidden!important;
}
body[data-view-mode="read"] header .reader-filter-summary-row{
  min-height:32px!important;
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:7px!important;
  padding:4px 7px!important;
  
}
body[data-view-mode="read"] header .reader-filter-summary-title{
  display:inline-flex!important;
  align-items:center!important;
  gap:5px!important;
  min-width:0!important;
  color:var(--read-dominant-ink)!important;
  font-size:.66rem!important;
  font-weight:950!important;
  line-height:1!important;
  white-space:nowrap!important;
}
body[data-view-mode="read"] header .reader-filter-summary-title > span[aria-hidden="true"]{
  width:16px!important;
  height:16px!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid rgba(181,141,74,.28)!important;
  border-radius:999px!important;
  background:rgba(255,252,247,.74)!important;
  color:#8a6829!important;
  font-size:.62rem!important;
  box-shadow:none!important;
}
body[data-view-mode="read"] header .reader-filter-summary-value{
  min-width:0!important;
  max-width:none!important;
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr)!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:5px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:hidden!important;
  white-space:nowrap!important;
}

body[data-view-mode="read"] header .reader-filter-summary-inline{
  grid-column:2!important;
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:color-mix(in srgb,var(--read-dominant-ink) 90%,#5e4d42 10%)!important;
  font-size:.59rem!important;
  font-weight:850!important;
  line-height:1!important;
  text-align:left!important;
}
body[data-view-mode="read"] header .reader-filter-summary-name{
  font-weight:950!important;
  color:var(--read-dominant-ink)!important;
}
body[data-view-mode="read"] header .reader-filter-chevron{
  color:#806735!important;
  font-size:.68rem!important;
  line-height:1!important;
}
body[data-view-mode="read"] header .reader-filter-content{
  border-top:1px solid rgba(181,141,74,.14)!important;
  
}
@media(max-width:430px){
  body[data-view-mode="read"] header .reader-filter-summary-row{min-height:30px!important;padding:3px 6px!important;gap:5px!important;}
  body[data-view-mode="read"] header .reader-filter-summary-title{font-size:.62rem!important;}
  
  body[data-view-mode="read"] header .reader-filter-summary-inline{font-size:.54rem!important;}
}

/* Each result cell owns its semantic colour; the practice background still follows the common result. */


body[data-view-mode="read"] .couple-result-cell[data-result-key]{
  box-shadow:inset 0 0 0 1px rgba(255,250,244,.13),0 2px 5px rgba(47,30,36,.12)!important;
}

/* random draw keeps filters and focuses the chosen practice */
body[data-view-mode="read"] .reader-filter-bottom{
  justify-content:flex-start!important;
}
body[data-view-mode="read"] :is(.couple-practice,.couple-group-variant-block).is-random-picked{
  position:relative;
  z-index:3;
  outline:3px solid color-mix(in srgb,var(--luxe-gold,var(--ui-gold)) 78%,#fff 22%);
  outline-offset:-3px;
  box-shadow:inset 0 0 0 2px rgba(255,250,238,.58),0 0 0 2px rgba(73,52,29,.18),0 8px 22px rgba(46,31,20,.20)!important;
}


/* shared tools cleanup */
.reset-zone[hidden]{display:none!important;}

/* reading mode cleanup: remove autosave chip, add bulk controls, compact exploration panel */
body[data-view-mode="read"] header .reader-filter-content{
  gap:6px !important;
  padding:6px !important;
  max-height:min(50vh,430px) !important;
}
body[data-view-mode="read"] .reader-explore-section{
  padding:7px 8px !important;
  border-radius:10px !important;
}
body[data-view-mode="read"] .reader-explore-section-head{
  margin:0 0 5px !important;
  gap:6px !important;
}
body[data-view-mode="read"] .reader-explore-section-head h2{
  font-size:.68rem !important;
}
body[data-view-mode="read"] .reader-explore-section-head small{
  font-size:.52rem !important;
  line-height:1.15 !important;
}
body[data-view-mode="read"] .reader-filter-group{
  gap:6px !important;
}
body[data-view-mode="read"] .reader-minimum-row{
  gap:4px !important;
}
body[data-view-mode="read"] .reader-minimum-row-label,
body[data-view-mode="read"] .reader-filter-label,
body[data-view-mode="read"] .reader-filter-hint{
  font-size:.58rem !important;
}
body[data-view-mode="read"] .reader-filter-chip{
  min-height:26px !important;
  padding:4px 6px !important;
  font-size:.55rem !important;
}
body[data-view-mode="read"] .reader-random-section .randomizer{
  gap:6px 8px !important;
}
body[data-view-mode="read"] .reader-random-section .random-btn{
  min-height:32px !important;
  font-size:.74rem !important;
}
body[data-view-mode="read"] .reader-random-section .random-options{
  gap:4px 8px !important;
}
body[data-view-mode="read"] .reader-random-section .random-options label{
  font-size:.58rem !important;
  line-height:1.2 !important;
}
body[data-view-mode="read"] .reader-random-section .random-cycle-reset,
body[data-view-mode="read"] .reader-session-section .session-toolbar .action{
  min-height:30px !important;
  padding:5px 8px !important;
  font-size:.63rem !important;
}
body[data-view-mode="read"] .reader-session-section :is(.session-summary,.session-list){
  margin-top:4px !important;
  font-size:.6rem !important;
}
body[data-view-mode="read"] .reader-session-section .session-toolbar{
  gap:6px !important;
}
body[data-view-mode="read"] .reader-session-section .session-list{
  max-height:140px !important;
}
@media (max-width:760px){
  body[data-view-mode="read"] header .reader-filter-content{max-height:min(42vh,340px) !important;gap:5px !important;padding:5px !important;}
  body[data-view-mode="read"] .reader-explore-section{padding:6px 7px !important;}
  body[data-view-mode="read"] .reader-explore-section-head h2{font-size:.64rem !important;}
  body[data-view-mode="read"] .reader-explore-section-head small{font-size:.49rem !important;max-width:46%;}
  body[data-view-mode="read"] .reader-random-section .randomizer{grid-template-columns:1fr !important;gap:5px !important;}
  body[data-view-mode="read"] .reader-random-section .random-options{display:grid !important;grid-template-columns:1fr 1fr !important;gap:4px 6px !important;}
  body[data-view-mode="read"] .reader-random-section .random-options label{font-size:.54rem !important;}
  body[data-view-mode="read"] .reader-random-section .random-btn{min-height:30px !important;font-size:.69rem !important;}
  body[data-view-mode="read"] .reader-random-section .random-cycle-reset,
body[data-view-mode="read"] .reader-session-section .session-toolbar .action{min-height:28px !important;font-size:.58rem !important;}
  body[data-view-mode="read"] .reader-session-section .session-toolbar{display:grid !important;grid-template-columns:1fr 1fr !important;}
  body[data-view-mode="read"] .reader-session-section .session-toolbar .reset-session-btn{grid-column:1 / -1;}
  body[data-view-mode="read"] .reader-session-section .session-list{max-height:110px !important;}
}


body[data-view-mode="read"] header .editor-top-dock{
  display:grid !important;
}


body[data-view-mode="read"] header .all-tools-content{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  grid-template-areas:
    "explore"
    "filters"
    "safety"
    "display" !important;
  align-items:start !important;
  align-content:start !important;
  gap:7px !important;
  padding:7px !important;
  max-height:min(58vh,580px) !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
}
body[data-view-mode="read"] header .all-tools-content > .exploration-tool-section{grid-area:explore !important;}
body[data-view-mode="read"] header .all-tools-content > .filters-backup-section{grid-area:filters !important;}
body[data-view-mode="read"] header .all-tools-content > .safety-tool-section{grid-area:safety !important;}
body[data-view-mode="read"] header .all-tools-content > .display-filter-section{grid-area:display !important;}

body[data-view-mode="read"] header .all-tools-content > .tool-section{
  width:100% !important;
  min-width:0 !important;
  margin:0 !important;
  padding:8px !important;
  border:1px solid color-mix(in srgb,var(--read-dominant-line) 58%,#fff 42%) !important;
  border-radius:12px !important;
  background:color-mix(in srgb,var(--read-dominant-panel) 84%,var(--dominant-soft) 16%) !important;
  color:var(--read-dominant-ink) !important;
  box-shadow:0 3px 10px rgba(42,28,35,.055),inset 0 1px 0 rgba(255,255,255,.22) !important;
}
body[data-view-mode="read"] header .all-tools-content > .tool-section > h2{
  margin:0 0 7px !important;
  color:var(--read-dominant-ink) !important;
  font-size:.72rem !important;
  line-height:1.15 !important;
  text-wrap:balance;
}

/* Reading filters/backups: same rhythm as Edit, but with intentional rows. */
body[data-view-mode="read"] .filters-backup-section .toolbar{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:6px !important;
  align-items:stretch !important;
}
body[data-view-mode="read"] .filters-backup-section .toolbar > #search{
  grid-column:1 / -1 !important;
}
body[data-view-mode="read"] .filters-backup-section :is(input[type="search"],select,button.action){
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
}
body[data-view-mode="read"] .filters-backup-section .backup-actions{
  width:100% !important;
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:6px !important;
  margin-top:7px !important;
}
body[data-view-mode="read"] .filters-backup-section .config-share{
  width:100% !important;
  margin-top:7px !important;
}
body[data-view-mode="read"] .filters-backup-section .backup-hint{
  width:100% !important;
  margin:7px 0 0 !important;
  padding:0 2px !important;
  color:color-mix(in srgb,var(--read-dominant-ink) 62%,#7c7075 38%) !important;
  font-size:.58rem !important;
  line-height:1.35 !important;
  text-align:left !important;
  white-space:pre-line !important;
  overflow-wrap:anywhere !important;
  text-wrap:pretty;
}
body[data-view-mode="read"] .filters-backup-section .backup-status-row{
  width:100% !important;
  margin-top:7px !important;
}
body[data-view-mode="read"] .filters-backup-section .exchange-info{
  white-space:pre-line !important;
  overflow-wrap:anywhere !important;
  text-wrap:pretty;
}

/* Exploration section: avoid compressed one-line controls in Reading. */
body[data-view-mode="read"] .exploration-tool-section .explore-strip{
  grid-template-columns:minmax(0,1fr) !important;
  gap:6px !important;
  padding:7px 8px !important;
}
body[data-view-mode="read"] .exploration-tool-section .explore-copy{
  grid-column:1 !important;
  font-size:.65rem !important;
  line-height:1.34 !important;
  text-wrap:pretty;
}
body[data-view-mode="read"] .exploration-tool-section .experience-controls{
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) !important;
  gap:5px 8px !important;
  align-items:center !important;
}
body[data-view-mode="read"] .exploration-tool-section .experience-label{
  white-space:pre-line !important;
  line-height:1.15 !important;
}
body[data-view-mode="read"] .exploration-tool-section .experience-switch{
  width:100% !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}
body[data-view-mode="read"] .exploration-tool-section .experience-note{
  grid-column:1 / -1 !important;
  white-space:pre-line !important;
  line-height:1.25 !important;
  text-wrap:pretty;
}
body[data-view-mode="read"] .exploration-tool-section .incompatible-display-toggle{
  margin-top:6px !important;
  white-space:pre-line !important;
  line-height:1.25 !important;
}

/* Safety: readable rows instead of squeezed columns. */
body[data-view-mode="read"] .safety-tool-section .safety-grid{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:7px !important;
  padding:8px !important;
}
body[data-view-mode="read"] .safety-tool-section .safety-grid label{
  min-width:0 !important;
  line-height:1.25 !important;
  white-space:pre-line !important;
  overflow-wrap:anywhere !important;
  text-wrap:pretty;
}
body[data-view-mode="read"] .safety-tool-section :is(.safety-hard-limits,.safety-aftercare){
  grid-column:1 / -1 !important;
}
body[data-view-mode="read"] .safety-tool-section .safety-check-row{
  grid-column:1 / -1 !important;
  grid-template-columns:1fr !important;
  gap:5px !important;
}
body[data-view-mode="read"] .safety-tool-section .safety-check{
  min-height:30px !important;
  line-height:1.25 !important;
}

/* Legend wording should wrap naturally in Reading. */
body[data-view-mode="read"] .display-filter-section :is(.semantic-legend-item,.legend-help,.reading-legend-line){
  white-space:pre-line !important;
  overflow-wrap:anywhere !important;
  text-wrap:pretty;
}

/* Reset remains an Edit-only destructive action. */
body[data-view-mode="read"] .reset-zone{display:none !important;}

@media (max-width:650px){
  body[data-view-mode="read"] header .all-tools-content{
    gap:6px !important;
    padding:6px !important;
    max-height:min(55vh,500px) !important;
  }
  body[data-view-mode="read"] header .all-tools-content > .tool-section{
    padding:7px !important;
    border-radius:10px !important;
  }
  body[data-view-mode="read"] header .all-tools-content > .tool-section > h2{
    margin-bottom:6px !important;
    font-size:.68rem !important;
  }
  body[data-view-mode="read"] .filters-backup-section .toolbar{
    gap:5px !important;
  }
  body[data-view-mode="read"] .filters-backup-section :is(input[type="search"],select,button.action){
    min-height:35px !important;
    padding-left:8px !important;
    padding-right:8px !important;
    font-size:.66rem !important;
  }
  body[data-view-mode="read"] .filters-backup-section .backup-actions{gap:5px !important;margin-top:6px !important;}
  body[data-view-mode="read"] .filters-backup-section .backup-hint{font-size:.55rem !important;line-height:1.3 !important;}
  body[data-view-mode="read"] .exploration-tool-section .experience-controls{
    grid-template-columns:1fr !important;
    gap:4px !important;
  }
  body[data-view-mode="read"] .exploration-tool-section .experience-switch{
    grid-column:1 !important;
  }
  body[data-view-mode="read"] .safety-tool-section .safety-grid{
    grid-template-columns:1fr !important;
    gap:6px !important;
    padding:7px !important;
  }
  body[data-view-mode="read"] .safety-tool-section :is(.safety-hard-limits,.safety-aftercare){grid-column:1 !important;}
}

@media (max-width:390px){
  body[data-view-mode="read"] .filters-backup-section .toolbar{
    grid-template-columns:1fr !important;
  }
  body[data-view-mode="read"] .filters-backup-section .toolbar > #search{grid-column:1 !important;}
  body[data-view-mode="read"] .filters-backup-section .backup-actions{
    grid-template-columns:1fr 1fr !important;
  }
}


body[data-view-mode="read"] .display-filter-section .reading-legend-card{
  grid-column:1 / -1;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  gap:5px !important;
  width:100%;
  min-width:0;
  padding:8px 9px !important;
  box-sizing:border-box;
}
body[data-view-mode="read"] .display-filter-section .reading-legend-card > strong{
  display:block !important;
  margin:0 0 2px !important;
  font-size:.72rem !important;
  line-height:1.15 !important;
}
body[data-view-mode="read"] .display-filter-section .reading-legend-line{
  display:block !important;
  width:100% !important;
  margin:0 !important;
  line-height:1.34 !important;
  white-space:pre-line !important;
  overflow-wrap:break-word !important;
  word-break:normal !important;
  text-wrap:pretty;
}
body[data-view-mode="read"] .display-filter-section .reading-legend-subtitle{
  padding-left:2px !important;
  margin-top:3px !important;
  font-weight:850 !important;
}
body[data-view-mode="read"] .display-filter-section .reading-legend-pin{
  margin-top:3px !important;
  padding-top:5px !important;
  border-top:1px solid color-mix(in srgb,var(--read-dominant-line) 45%,transparent) !important;
}
@media (max-width:650px){
  body[data-view-mode="read"] .display-filter-section .reading-legend-card{
    gap:4px !important;
    padding:7px 8px !important;
  }
  body[data-view-mode="read"] .display-filter-section .reading-legend-card > strong{
    font-size:.69rem !important;
  }
  body[data-view-mode="read"] .display-filter-section .reading-legend-line{
    font-size:.59rem !important;
    line-height:1.32 !important;
  }
}


:is(body[data-view-mode="edit"],body[data-view-mode="read"]){
  --variant-bg:color-mix(in srgb,var(--dominant-color) 88%,var(--ui-night) 12%);
  --variant-header:var(--variant-bg);
  
  
  
  --theme-line:color-mix(in srgb,var(--dominant-color) 42%,var(--ui-line) 58%);
  
  
  
  
  

  /* Backward-compatible aliases. */
  --read-dominant-panel:var(--theme-panel);
  --read-dominant-panel-2:var(--theme-panel-2);
  
  --read-dominant-line:var(--theme-line);
  
  --edit-theme-panel:var(--theme-panel);
  --edit-theme-panel-2:var(--theme-panel-2);
  --edit-theme-panel-3:var(--theme-panel-3);
  --edit-theme-line:var(--theme-line);
  
  
  
  
  --edit-slot-bg:var(--ui-panel);
  
}

:is(body[data-view-mode="edit"],body[data-view-mode="read"]),
:is(body[data-view-mode="edit"],body[data-view-mode="read"]) header,
:is(body[data-view-mode="edit"],body[data-view-mode="read"]) main,
:is(body[data-view-mode="edit"],body[data-view-mode="read"]) .top{
  background:var(--variant-bg) !important;
}
:is(body[data-view-mode="edit"],body[data-view-mode="read"]) header h1{
  color:var(--ui-on-dark) !important;
  text-shadow:0 1px 2px color-mix(in srgb,var(--ui-night) 52%,transparent) !important;
}

/* Shared header chrome. */
:is(body[data-view-mode="edit"],body[data-view-mode="read"]) :is(.language-switch,.help-button,.all-tools,.site-footer){
  border-color:var(--theme-line) !important;
  background:var(--theme-panel) !important;
  color:var(--theme-ink) !important;
}
:is(body[data-view-mode="edit"],body[data-view-mode="read"]) header .all-tools > summary{
  border-color:var(--theme-line) !important;
  background:var(--theme-panel-2) !important;
  color:var(--theme-ink) !important;
}
:is(body[data-view-mode="edit"],body[data-view-mode="read"]) header .all-tools-content{
  background:var(--theme-panel) !important;
  border-color:var(--theme-line) !important;
}
:is(body[data-view-mode="edit"],body[data-view-mode="read"]) header .all-tools-content > .tool-section{
  border-color:color-mix(in srgb,var(--theme-line) 72%,var(--ui-panel) 28%) !important;
  background:var(--theme-section) !important;
  color:var(--theme-ink) !important;
}
:is(body[data-view-mode="edit"],body[data-view-mode="read"]) header .all-tools-content > .tool-section > h2{
  color:var(--theme-ink) !important;
}
:is(body[data-view-mode="edit"],body[data-view-mode="read"]) header .editor-top-dock :is(.individual-editor-bulk-btn,.profile-edit-button){
  border-color:var(--theme-line) !important;
  background:var(--theme-panel-2) !important;
  color:var(--theme-ink) !important;
}

/* Reading exploration uses the same surfaces as Edit / Tools. */

body[data-view-mode="read"] header .reader-filter-summary-row{
  background:var(--theme-panel-2) !important;
  color:var(--theme-ink) !important;
}
body[data-view-mode="read"] header .reader-filter-summary-title,
body[data-view-mode="read"] header .reader-filter-summary-inline,
body[data-view-mode="read"] header .reader-filter-chevron{
  color:var(--theme-ink) !important;
}

body[data-view-mode="read"] header .reader-filter-content{
  border-top-color:var(--theme-line) !important;
  background:var(--theme-panel) !important;
}
body[data-view-mode="read"] .reader-explore-section{
  border-color:color-mix(in srgb,var(--theme-line) 72%,var(--ui-panel) 28%) !important;
  background:var(--theme-section) !important;
}
body[data-view-mode="read"] .reader-explore-section-head :is(h2,small){
  color:var(--theme-ink) !important;
}

/* The semantic result language is also shared: same exact tokens everywhere. */
.score-btn[data-score="0"]{background:var(--result-limit-panel-top) !important;border-color:var(--result-limit-accent) !important;color:var(--result-limit-border) !important;}
.score-btn[data-score="1"]{background:var(--result-later-panel-top) !important;border-color:var(--result-later-accent) !important;color:var(--result-later-border) !important;}
.score-btn[data-score="5"]{background:var(--result-fantasy-panel-top) !important;border-color:var(--result-fantasy-accent) !important;color:var(--result-fantasy-border) !important;}
.score-btn[data-score="2"]{background:var(--result-compatible-panel-top) !important;border-color:var(--result-compatible-accent) !important;color:var(--result-compatible-border) !important;}
.score-btn[data-score="3"]{background:var(--result-strong-panel-top) !important;border-color:var(--result-strong-accent) !important;color:var(--result-strong-border) !important;}
.score-btn[data-score="4"]{background:var(--result-excellent-panel-top) !important;border-color:var(--result-excellent-accent) !important;color:var(--result-excellent-border) !important;}


body[data-view-mode="read"] :is(.couple-practice,.couple-group-variant-block)[data-result="excellent"]{--result-panel:linear-gradient(180deg,var(--result-excellent-panel-top),var(--result-excellent-panel-bottom));}
body[data-view-mode="read"] :is(.couple-practice,.couple-group-variant-block)[data-result="strong"]{--result-panel:linear-gradient(180deg,var(--result-strong-panel-top),var(--result-strong-panel-bottom));}
body[data-view-mode="read"] :is(.couple-practice,.couple-group-variant-block)[data-result="compatible"]{--result-panel:linear-gradient(180deg,var(--result-compatible-panel-top),var(--result-compatible-panel-bottom));}
body[data-view-mode="read"] :is(.couple-practice,.couple-group-variant-block)[data-result="later"]{--result-panel:linear-gradient(180deg,var(--result-later-panel-top),var(--result-later-panel-bottom));}
body[data-view-mode="read"] :is(.couple-practice,.couple-group-variant-block)[data-result="fantasy"]{--result-panel:linear-gradient(180deg,var(--result-fantasy-panel-top),var(--result-fantasy-panel-bottom));}
body[data-view-mode="read"] :is(.couple-practice,.couple-group-variant-block)[data-result="limit"]{--result-panel:linear-gradient(180deg,var(--result-limit-panel-top),var(--result-limit-panel-bottom));}
body[data-view-mode="read"] :is(.couple-practice,.couple-group-variant-block)[data-result="incomplete"]{--result-panel:linear-gradient(180deg,var(--result-incomplete-panel-top),var(--result-incomplete-panel-bottom));}

body[data-view-mode="read"] .couple-result-cell[data-result-key="excellent"]{background:var(--result-excellent-accent) !important;border-color:var(--result-excellent-border) !important;}
body[data-view-mode="read"] .couple-result-cell[data-result-key="strong"]{background:var(--result-strong-accent) !important;border-color:var(--result-strong-border) !important;}
body[data-view-mode="read"] .couple-result-cell[data-result-key="compatible"]{background:var(--result-compatible-accent) !important;border-color:var(--result-compatible-border) !important;}
body[data-view-mode="read"] .couple-result-cell[data-result-key="later"]{background:var(--result-later-accent) !important;border-color:var(--result-later-border) !important;}
body[data-view-mode="read"] .couple-result-cell[data-result-key="fantasy"]{background:var(--result-fantasy-accent) !important;border-color:var(--result-fantasy-border) !important;}
body[data-view-mode="read"] .couple-result-cell[data-result-key="limit"]{background:var(--result-limit-accent) !important;border-color:var(--result-limit-border) !important;}
body[data-view-mode="read"] .couple-result-cell[data-result-key="incomplete"]{background:var(--result-incomplete-accent) !important;border-color:var(--result-incomplete-border) !important;}

/* Selected answer in Edit = exact same accent used by the corresponding Reading result cell. */
.score-btn.unknown-score.selected{background:var(--result-incomplete-accent) !important;border-color:var(--result-incomplete-border) !important;color:var(--ui-white) !important;}
.score-btn[data-score="0"].selected{background:var(--result-limit-accent) !important;border-color:var(--result-limit-border) !important;color:var(--ui-white) !important;}
.score-btn[data-score="1"].selected{background:var(--result-later-accent) !important;border-color:var(--result-later-border) !important;color:var(--ui-white) !important;}
.score-btn[data-score="5"].selected{background:var(--result-fantasy-accent) !important;border-color:var(--result-fantasy-border) !important;color:var(--ui-white) !important;}
.score-btn[data-score="2"].selected{background:var(--result-compatible-accent) !important;border-color:var(--result-compatible-border) !important;color:var(--ui-white) !important;}
.score-btn[data-score="3"].selected{background:var(--result-strong-accent) !important;border-color:var(--result-strong-border) !important;color:var(--ui-white) !important;}
.score-btn[data-score="4"].selected{background:var(--result-excellent-accent) !important;border-color:var(--result-excellent-border) !important;color:var(--ui-white) !important;}

/* Same typography colours over both Edit and Reading practice surfaces. */
body[data-view-mode="edit"] :is(.individual-practice-card h3,.individual-slot-label),
body[data-view-mode="read"] :is(.couple-practice-title-line strong){
  color:var(--ui-ink-strong) !important;
}
body[data-view-mode="edit"] :is(.individual-practice-explanation,.individual-prior,.individual-note-toggle,.individual-applicability),
body[data-view-mode="read"] :is(.couple-practice-description){
  color:var(--ui-ink-soft) !important;
}
body[data-view-mode="edit"] .individual-practice-category{
  border-color:color-mix(in srgb,var(--theme-line) 55%,transparent) !important;
  background:var(--ui-chip-bg-soft) !important;
  color:var(--theme-ink) !important;
}

/* Shared secondary text colours in Tools & options. */
:is(body[data-view-mode="edit"],body[data-view-mode="read"]) :is(.backup-hint,.exchange-info,.explore-copy,.experience-label,.experience-note,.tool-check,.safety label,.legend-help,.reading-legend-line){
  color:var(--theme-muted) !important;
}
:is(body[data-view-mode="edit"],body[data-view-mode="read"]) :is(input[type="search"],select,button.action,.config-share){
  border-color:color-mix(in srgb,var(--theme-line) 76%,var(--ui-panel) 24%) !important;
  background:var(--ui-panel) !important;
  color:var(--theme-ink) !important;
}


:root{
  --readability-ink-strong:#20191d;
  --readability-ink:#352d32;
  --readability-ink-soft:#51464d;
  --readability-chip-bg:rgba(255,251,247,.94);
}

:is(body[data-view-mode="edit"],body[data-view-mode="read"]){
  --theme-panel:color-mix(in srgb,var(--dominant-soft) 26%,#fff 74%);
  --theme-panel-2:color-mix(in srgb,var(--dominant-soft) 34%,#fff 66%);
  --theme-panel-3:color-mix(in srgb,var(--dominant-soft) 42%,#fff 58%);
  --theme-section:color-mix(in srgb,var(--dominant-soft) 22%,#fff 78%);
  --theme-category-start:color-mix(in srgb,var(--dominant-soft) 32%,#fff 68%);
  --theme-category-end:color-mix(in srgb,var(--dominant-soft) 44%,#fff 56%);
  --theme-ink:var(--readability-ink-strong);
  --theme-muted:var(--readability-ink-soft);
  --edit-theme-ink:var(--readability-ink-strong);
  --edit-theme-muted:var(--readability-ink-soft);
  --read-dominant-ink:var(--readability-ink-strong);
}

/* Shared control surfaces */
:is(body[data-view-mode="edit"],body[data-view-mode="read"]) :is(.all-tools > summary,.individual-editor-bulk-btn,.profile-edit-button,.reader-filter-summary-row){
  color:var(--readability-ink-strong) !important;
}
:is(body[data-view-mode="edit"],body[data-view-mode="read"]) :is(.reader-filter-summary-value,.individual-category-head > span:nth-of-type(2)){
  background:var(--readability-chip-bg) !important;
  color:var(--readability-ink) !important;
}

/* Edit mode */
body[data-view-mode="edit"] .individual-practice-card{
  color:var(--readability-ink) !important;
}
body[data-view-mode="edit"] .individual-practice-card > header{
  background:color-mix(in srgb,var(--edit-result-panel-strong,#efe7e1) 70%,#fff 30%) !important;
  border-bottom-color:color-mix(in srgb,var(--edit-result-line,#d7ccc0) 82%,#fff 18%) !important;
}


body[data-view-mode="edit"] .individual-practice-card :is(h3,.individual-slot-label,.individual-category-head strong){
  color:var(--readability-ink-strong) !important;
}
body[data-view-mode="edit"] .individual-practice-card :is(.individual-practice-explanation,.individual-practice-category,.individual-prior,.individual-note-toggle,.individual-applicability){
  color:var(--readability-ink-soft) !important;
}
body[data-view-mode="edit"] .individual-practice-category,
body[data-view-mode="edit"] .individual-prior,
body[data-view-mode="edit"] .individual-note-toggle{
  background:var(--readability-chip-bg) !important;
}

/* Reading mode */
body[data-view-mode="read"] .couple-result-head small,
body[data-view-mode="read"] .couple-practice-title-line strong,
body[data-view-mode="read"] .reader-filter-summary-title,
body[data-view-mode="read"] .reader-filter-summary-inline,
body[data-view-mode="read"] .reader-filter-chevron{
  color:var(--readability-ink-strong) !important;
}
body[data-view-mode="read"] .couple-practice-description,
body[data-view-mode="read"] .reader-filter-label,
body[data-view-mode="read"] .reader-filter-hint,
body[data-view-mode="read"] .reader-filter-fantasy{
  color:var(--readability-ink-soft) !important;
}
body[data-view-mode="read"] .couple-result-tick:not(.couple-together-tick):not(.couple-before-tick),
body[data-view-mode="read"] .reader-filter-chip,
body[data-view-mode="read"] .reader-filter-chip-count{
  background:var(--readability-chip-bg) !important;
  color:var(--readability-ink) !important;
}
body[data-view-mode="read"] .reader-filter-chip:hover{
  background:rgba(255,247,241,.96) !important;
}
body[data-view-mode="read"] .reader-filter-chip.is-active{
  background:linear-gradient(145deg,#372b31,#21191d) !important;
  color:#fffaf6 !important;
}
body[data-view-mode="read"] .reader-filter-chip.is-active .reader-filter-chip-count{
  background:rgba(255,255,255,.18) !important;
  color:#fffaf6 !important;
}

/* Tools copy / helper texts */
:is(body[data-view-mode="edit"],body[data-view-mode="read"]) :is(.backup-hint,.exchange-info,.explore-copy,.experience-label,.experience-note,.tool-check,.safety label,.legend-help,.reading-legend-line,.tool-section p,.tool-section li){
  color:var(--readability-ink-soft) !important;
}


.random-picked-card{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.random-picked-title{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  color:var(--readability-ink-strong,var(--theme-ink,#20191d));
  font-size:.96rem;
  line-height:1.2;
}
.random-picked-title strong{
  font-weight:900;
  color:inherit;
}
.random-picked-risk{
  display:inline-flex;
  align-items:center;
}
.random-picked-risk .risk-badge{
  position:static;
  transform:none;
}
.random-picked-explanation{
  color:var(--readability-ink,#352d32);
  line-height:1.35;
  font-size:.94rem;
}

.random-picked-compat{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
  color:var(--readability-ink,#352d32);
  line-height:1.25;
}

body[data-view-mode="read"] .reader-random-section .random-result{
  font-size:.72rem;
}
@media (max-width:760px){
  .random-picked-title{font-size:.88rem;}
  .random-picked-explanation{font-size:.82rem;}
  .random-picked-compat{font-size:.8rem;}
}


.random-picked-compat{
  margin-top:1px;
}
.random-picked-compat-value{
  color:var(--readability-ink-strong,var(--theme-ink,#20191d));
  font-weight:850;
}


header .all-tools > summary{
  display:flex !important;
  align-items:center !important;
}
header .all-tools > summary::after{
  margin-left:auto !important;
  margin-right:0 !important;
  order:99 !important;
  
  
  
  
}


/* Keep the first row compact after removing the home button. */





@media (max-width:380px){
  
}

/* Invert the utility disclosure button style: light fill, black frame, black arrow. */

header .all-tools[open] > summary::after,
header .all-tools > summary:hover::after{
  border-color:#171212 !important;
  background:linear-gradient(180deg,#fffdfa 0%,#f0e9e0 100%) !important;
  color:#171212 !important;
}


@media (max-width: 760px){
  
header .all-tools{
    margin-top:4px !important;
  }
  header .all-tools > summary{
    min-height:42px !important;
    padding:0 12px !important;
  }

  header .editor-top-dock{
    gap:4px !important;
    margin-top:4px !important;
  }
  header .editor-top-dock .individual-editor-bulk-btn,
  header .editor-top-dock .profile-edit-button{
    min-height:40px !important;
    padding:8px 10px !important;
  }

  body[data-view-mode="read"] header .reader-top-dock{
    margin-top:4px !important;
    gap:4px !important;
  }
  body[data-view-mode="read"] header .reader-filter-dock{
    border-radius:12px !important;
  }
  body[data-view-mode="read"] header .reader-filter-summary-row{
    min-height:34px !important;
    padding:5px 8px !important;
    gap:6px !important;
  }
  body[data-view-mode="read"] header .reader-filter-content{
    padding:5px !important;
    gap:5px !important;
  }

body[data-view-mode="read"] .couple-practice-row{
    min-height:60px !important;
    padding:5px 6px !important;
    gap:5px !important;
  }

body[data-view-mode="edit"] .individual-practice-card > header{
    padding:5px 7px !important;
  }

  .legend.semantic-legend,
  .reading-legend-card,
  .tool-section,
  .reader-session-section,
  .random-tool-section{
    margin-top:6px !important;
  }
}


.backup-actions .person-a-backup,
.backup-actions .person-b-backup{
  position:relative;
  overflow:hidden;
  min-height:50px;
  padding:10px 12px;
  border-width:1px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 1px 2px rgba(0,0,0,.04);
}
.backup-actions .person-a-backup{
  background:color-mix(in srgb,var(--person-a-role-soft) 88%, white);
  color:var(--contrast-ink-strong);
  border-color:color-mix(in srgb,var(--person-a-role-color) 38%, #cabaa4 62%);
  box-shadow:inset 0 -5px 0 color-mix(in srgb,var(--person-a-role-color) 72%, transparent), inset 0 1px 0 rgba(255,255,255,.55), 0 1px 2px rgba(0,0,0,.04);
}
.backup-actions .person-b-backup{
  background:color-mix(in srgb,var(--person-b-role-soft) 88%, white);
  color:var(--contrast-ink-strong);
  border-color:color-mix(in srgb,var(--person-b-role-color) 38%, #cabaa4 62%);
  box-shadow:inset 0 -5px 0 color-mix(in srgb,var(--person-b-role-color) 72%, transparent), inset 0 1px 0 rgba(255,255,255,.55), 0 1px 2px rgba(0,0,0,.04);
}
.backup-actions .person-a-backup .profile-inline-name,
.backup-actions .person-b-backup .profile-inline-name{
  font-size:1rem;
  padding:4px 11px;
  border-width:1px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
}


.exploration-tool-section .explore-copy{
  
  
  
  color:#4c4348 !important;
}
.exploration-tool-section .experience-controls{
  display:grid !important;
  
  
  
  width:100% !important;
}

.exploration-tool-section .experience-switch{
  
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}


@media (max-width:650px){
  .backup-actions .person-a-backup,
  .backup-actions .person-b-backup{
    min-height:46px;
    padding:8px 10px;
  }
  .backup-actions .person-a-backup .profile-inline-name,
  .backup-actions .person-b-backup .profile-inline-name{
    font-size:.96rem;
    padding:3px 10px;
  }
  .exploration-tool-section .explore-strip{
    gap:5px !important;
    padding:7px 8px !important;
  }
  .exploration-tool-section .explore-copy{
    font-size:9px !important;
    line-height:1.18 !important;
  }
  .exploration-tool-section .experience-controls{
    grid-template-columns:1fr !important;
    gap:3px !important;
  }
  .exploration-tool-section .experience-label{
    display:none !important;
  }
  .exploration-tool-section .experience-switch button{
    min-height:29px !important;
    padding:4px 3px !important;
    font-size:8.5px !important;
  }
  .exploration-tool-section .experience-note{
    font-size:7.5px !important;
  }
  .exploration-tool-section .incompatible-display-toggle > span{
    font-size:10px !important;
  }
}


.filters-backup-section{
  background:linear-gradient(180deg,rgba(255,255,255,.97) 0%, rgba(252,250,255,.97) 100%);
}
.filters-backup-section .toolbar{
  gap:5px !important;
  align-items:stretch !important;
}
.filters-backup-section :is(input[type="search"],select){
  min-height:39px;
  padding:8px 12px;
  border-radius:12px;
  border-color:color-mix(in srgb,var(--border) 74%,var(--edit-theme-line) 26%);
  background:linear-gradient(180deg,#fff 0%,#fbf9fd 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 1px 2px rgba(29,12,28,.04);
}
.filters-backup-section .backup-actions{
  gap:6px !important;
  margin-top:6px !important;
}
.filters-backup-section .backup-actions .action{
  min-height:42px;
  border-radius:13px;
  font-size:.82rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72), 0 2px 5px rgba(32,16,27,.05);
}
.filters-backup-section .restore-backup,
.filters-backup-section .full-backup{
  background:linear-gradient(180deg,#fffdfa 0%,#f7f3f7 100%);
}
.filters-backup-section .person-a-backup,
.filters-backup-section .person-b-backup{
  position:relative;
  isolation:isolate;
  align-items:center;
  justify-content:center;
}
.filters-backup-section .person-a-backup::after,
.filters-backup-section .person-b-backup::after{
  
  position:absolute;
  left:8px;
  right:8px;
  bottom:6px;
  height:4px;
  border-radius:999px;
  opacity:.95;
  z-index:0;
}
.filters-backup-section .person-a-backup::after{ background:var(--person-a-role-color); }
.filters-backup-section .person-b-backup::after{ background:var(--person-b-role-color); }


.filters-backup-section .person-a-backup .profile-inline-name,
.filters-backup-section .person-b-backup .profile-inline-name{
  position:relative;
  z-index:1;
  font-size:1rem;
  padding:4px 11px;
  border-radius:999px;
}
.filters-backup-section .config-share{
  margin-top:6px !important;
  min-height:42px !important;
  border-radius:13px !important;
}
.filters-backup-section .backup-hint{
  margin-top:5px !important;
  padding-inline:2px !important;
  font-size:.64rem !important;
  line-height:1.34 !important;
  color:color-mix(in srgb,var(--muted) 82%,#6b5e68 18%) !important;
}
.filters-backup-section .backup-status-row{
  margin-top:6px !important;
}
.filters-backup-section .backup-status-row .exchange-info{
  min-height:30px;
  border-radius:10px;
  background:linear-gradient(180deg,#f9fafb 0%,#f3f5f7 100%);
}

.exploration-tool-section{
  background:linear-gradient(180deg,rgba(255,255,255,.98) 0%,rgba(250,248,252,.98) 100%);
}
.exploration-tool-section .explore-strip{
  gap:5px 8px !important;
  padding:7px 8px !important;
  border-radius:11px !important;
  background:linear-gradient(180deg,#fff 0%,#faf8fc 100%) !important;
}
.exploration-tool-section .explore-copy{
  font-size:9.5px !important;
  line-height:1.16 !important;
  font-weight:780 !important;
  letter-spacing:-.01em;
}
.exploration-tool-section .experience-controls{
  grid-template-columns:auto minmax(0,1fr) !important;
  gap:3px 7px !important;
  align-items:center !important;
}
.exploration-tool-section .experience-label{
  font-size:9.5px !important;
  line-height:1.05 !important;
  white-space:nowrap;
}
.exploration-tool-section .experience-switch{
  align-self:center;
  width:100% !important;
}
.exploration-tool-section .experience-switch button{
  min-height:28px !important;
  padding:4px 6px !important;
  font-size:9px !important;
  line-height:1.05 !important;
}
.exploration-tool-section .experience-note{
  grid-column:2 / -1 !important;
  margin-top:-2px !important;
  font-size:7.6px !important;
  line-height:1.1 !important;
  opacity:.88;
}
.exploration-tool-section .incompatible-display-toggle{
  margin-top:5px !important;
  padding:7px 9px !important;
  border-radius:10px !important;
}
.exploration-tool-section .incompatible-display-toggle > span{
  font-size:10.5px !important;
  line-height:1.15 !important;
}

@media (max-width:760px){
  .filters-backup-section .toolbar{ gap:4px !important; }
  .filters-backup-section :is(input[type="search"],select){ min-height:37px; padding:7px 10px; border-radius:11px; }
  .filters-backup-section .backup-actions .action{ min-height:40px; font-size:.76rem; }
  .filters-backup-section .person-a-backup::after,
  .filters-backup-section .person-b-backup::after{ left:7px; right:7px; bottom:5px; height:3px; }
  .filters-backup-section .backup-hint{ font-size:.58rem !important; line-height:1.24 !important; }

  .exploration-tool-section .explore-strip{ gap:4px !important; padding:6px 7px !important; }
  .exploration-tool-section .explore-copy{ font-size:8.4px !important; line-height:1.12 !important; }
  .exploration-tool-section .experience-controls{ grid-template-columns:1fr !important; gap:3px !important; }
  .exploration-tool-section .experience-label{ display:none !important; }
  .exploration-tool-section .experience-switch button{ min-height:27px !important; padding:3px 2px !important; font-size:8px !important; }
  .exploration-tool-section .experience-note{ grid-column:1 / -1 !important; font-size:7px !important; line-height:1.05 !important; margin-top:-1px !important; }
  .exploration-tool-section .incompatible-display-toggle > span{ font-size:9.8px !important; }
}


.header-utility-row{display:contents;}
.tools-label-mobile{display:none;}

@media (max-width:650px){
  :root{
    --mobile-header-row-h:34px;
    --mobile-header-gap:4px;
    --mobile-header-radius:11px;
  }

  body > header{box-shadow:none!important;}

  header .top{
    display:flex!important;
    flex-direction:column!important;
    gap:var(--mobile-header-gap)!important;
    width:100%!important;
    padding:5px 6px 6px!important;
    overflow:visible!important;
  }

  

  
  
  
  header .title-extra{display:none!important;}

  /* Row 1: people/dynamic + language + help. Row 2: Edit/Reading. */
  
  
  
  
header .role-switch, header .reader-header-ds, header .language-switch, header .help-button{width:66px!important;min-width:66px!important;}
  

  header .role-choice,
  header .reader-header-ds-choice,
  header .language-choice{
    height:var(--mobile-header-row-h)!important;
    min-height:var(--mobile-header-row-h)!important;
  }
  header .role-choice{padding:2px 4px!important;gap:1px!important;}
  header .role-choice-name{font-size:9px!important;line-height:1!important;}
  header .role-choice-ds{font-size:6px!important;line-height:1!important;}
  header .reader-header-ds-choice{padding:2px 4px!important;font-size:8.7px!important;line-height:1!important;}
  header .language-choice{padding:0 1px!important;}
  header .flag-svg{width:17px!important;height:11px!important;}

/* Row 3: four explicit utility cells. */
  header .header-utility-row{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:var(--mobile-header-gap)!important;
    width:100%!important;
    min-width:0!important;
    align-items:start!important;
  }
  header .header-utility-row > .all-tools{
    grid-column:1!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    border-radius:var(--mobile-header-radius)!important;
    overflow:hidden!important;
    box-shadow:none!important;
  }
  header .all-tools > summary{
    width:100%!important;
    min-width:0!important;
    height:var(--mobile-header-row-h)!important;
    min-height:var(--mobile-header-row-h)!important;
    padding:3px 5px!important;
    gap:3px!important;
    border-radius:var(--mobile-header-radius)!important;
    font-size:10px!important;
    line-height:1!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    box-shadow:none!important;
  }
  header .tools-label-full{display:none!important;}
  header .tools-label-mobile{
    display:block!important;
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:10px!important;
    font-weight:850!important;
  }
  
  header .all-tools > summary::after{
    flex:0 0 18px!important;
    width:18px!important;
    min-width:18px!important;
    height:18px!important;
    margin-left:auto!important;
    margin-right:0!important;
    border:1.4px solid #171212!important;
    border-radius:6px!important;
    background:#fffdfa!important;
    color:#171212!important;
    box-shadow:none!important;
    font-size:.56rem!important;
  }

  header .header-utility-row > .editor-top-dock{
    grid-column:2 / -1!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:var(--mobile-header-gap)!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
  }
  header .editor-top-dock .individual-editor-bulk-btn,
  header .editor-top-dock .profile-edit-button{
    width:100%!important;
    min-width:0!important;
    height:var(--mobile-header-row-h)!important;
    min-height:var(--mobile-header-row-h)!important;
    margin:0!important;
    padding:0 3px!important;
    border-radius:var(--mobile-header-radius)!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    overflow:hidden!important;
    font-size:9px!important;
    line-height:1!important;
    font-weight:850!important;
    white-space:nowrap!important;
    box-shadow:none!important;
  }
  header .editor-top-dock .individual-editor-bulk-btn span,
  header .editor-top-dock .profile-edit-button span{
    min-width:0!important;
    max-width:100%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }

  /* Open tools: full-width content, actions move to a clean second row. */
  header .header-utility-row > .all-tools[open]{
    grid-column:1 / -1!important;
    width:100%!important;
  }
  header .header-utility-row > .all-tools[open] + .editor-top-dock{
    grid-column:1 / -1!important;
  }
  header .all-tools[open] > summary{
    height:var(--mobile-header-row-h)!important;
    min-height:var(--mobile-header-row-h)!important;
  }
  header .all-tools-content{margin-top:4px!important;}

  /* Row 4 in Reading: exactly the same visible height. */
  body[data-view-mode="read"] header .reader-top-dock{
    display:grid!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
  }
  body[data-view-mode="edit"] header .reader-top-dock{display:none!important;}
  body[data-view-mode="read"] header .reader-filter-dock{
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    border-radius:var(--mobile-header-radius)!important;
    box-shadow:none!important;
    overflow:hidden!important;
  }
  body[data-view-mode="read"] header .reader-filter-summary-row{
    height:var(--mobile-header-row-h)!important;
    min-height:var(--mobile-header-row-h)!important;
    padding:3px 7px!important;
    gap:5px!important;
    border-radius:var(--mobile-header-radius)!important;
  }
  body[data-view-mode="read"] header .reader-filter-summary-title{font-size:.66rem!important;line-height:1!important;}
  body[data-view-mode="read"] header .reader-filter-summary-inline{font-size:.55rem!important;line-height:1!important;}
  
}

@media (max-width:380px){
  :root{--mobile-header-row-h:33px;--mobile-header-gap:3px;}
  
  
  
  header .all-tools > summary,
  header .tools-label-mobile{font-size:9.2px!important;}
  header .editor-top-dock .individual-editor-bulk-btn,
  header .editor-top-dock .profile-edit-button{font-size:8.2px!important;padding-inline:2px!important;}
}


/* Personal backup buttons use the actual selected profile colour as the whole
   surface. The former underline is removed entirely. */
.filters-backup-section .person-a-backup::after,
.filters-backup-section .person-b-backup::after{
  content:none !important;
  display:none !important;
}
.filters-backup-section .person-a-backup{
  background:var(--person-a-role-color) !important;
  border-color:var(--person-a-role-dark) !important;
  color:#fffaf5 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 2px 5px rgba(32,16,27,.08) !important;
}
.filters-backup-section .person-b-backup{
  background:var(--person-b-role-color) !important;
  border-color:var(--person-b-role-dark) !important;
  color:#fffaf5 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 2px 5px rgba(32,16,27,.08) !important;
}
.filters-backup-section .person-a-backup .profile-inline-name{
  background:color-mix(in srgb,var(--person-a-role-soft) 90%,white) !important;
  color:var(--person-a-role-dark) !important;
  border-color:rgba(255,255,255,.48) !important;
}
.filters-backup-section .person-b-backup .profile-inline-name{
  background:color-mix(in srgb,var(--person-b-role-soft) 90%,white) !important;
  color:var(--person-b-role-dark) !important;
  border-color:rgba(255,255,255,.48) !important;
}

/* This block exists inside Tools even while the page is in Edit mode.
   Therefore its layout must NOT be scoped to body[data-view-mode="read"]. */
.display-filter-section .reading-legend-card{
  grid-column:1 / -1 !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  gap:5px !important;
  width:100% !important;
  min-width:0 !important;
  padding:8px 9px !important;
  box-sizing:border-box !important;
}
.display-filter-section .reading-legend-card > strong{
  display:block !important;
  margin:0 0 2px !important;
  font-size:.72rem !important;
  line-height:1.15 !important;
}
.display-filter-section .reading-legend-results{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:2px !important;
  padding:5px 7px !important;
  border:1px solid color-mix(in srgb,var(--theme-line) 48%,transparent) !important;
  border-radius:9px !important;
  background:color-mix(in srgb,var(--theme-panel-2) 88%,white) !important;
}
.display-filter-section .reading-legend-line{
  display:block !important;
  width:100% !important;
  margin:0 !important;
  white-space:normal !important;
  line-height:1.32 !important;
  overflow-wrap:break-word !important;
  word-break:normal !important;
  text-wrap:pretty !important;
}
.display-filter-section .reading-legend-subtitle{
  display:block !important;
  margin-top:4px !important;
  padding-top:5px !important;
  border-top:1px solid color-mix(in srgb,var(--theme-line) 42%,transparent) !important;
  font-weight:850 !important;
}
.display-filter-section .reading-legend-pin{
  display:block !important;
  margin-top:4px !important;
  padding-top:5px !important;
  border-top:1px solid color-mix(in srgb,var(--theme-line) 42%,transparent) !important;
}

@media (max-width:650px){
  .display-filter-section .reading-legend-card{
    gap:4px !important;
    padding:7px 8px !important;
  }
  .display-filter-section .reading-legend-card > strong{
    font-size:.69rem !important;
  }
  .display-filter-section .reading-legend-results{
    gap:2px !important;
    padding:5px 6px !important;
  }
  .display-filter-section .reading-legend-line{
    font-size:.62rem !important;
    line-height:1.3 !important;
  }
}


.filters-backup-section .backup-actions .person-a-backup,
.filters-backup-section .backup-actions .person-b-backup{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  font-weight:900 !important;
  letter-spacing:-.01em;
  padding-inline:12px !important;
}
.filters-backup-section .backup-actions .person-a-backup{
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--person-a-role-soft) 90%, white) 0%,
    color-mix(in srgb,var(--person-a-role-soft) 82%, #f6f3ea) 100%) !important;
  color:var(--person-a-role-dark) !important;
  border-color:color-mix(in srgb,var(--person-a-role-color) 45%, #c8b07a 55%) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72), 0 2px 5px rgba(32,16,27,.05) !important;
}
.filters-backup-section .backup-actions .person-b-backup{
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--person-b-role-soft) 90%, white) 0%,
    color-mix(in srgb,var(--person-b-role-soft) 82%, #f3edf4) 100%) !important;
  color:var(--person-b-role-dark) !important;
  border-color:color-mix(in srgb,var(--person-b-role-color) 45%, #c4b5c0 55%) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72), 0 2px 5px rgba(32,16,27,.05) !important;
}
.filters-backup-section .backup-actions .person-a-backup::before,
.filters-backup-section .backup-actions .person-b-backup::before,
.filters-backup-section .backup-actions .person-a-backup::after,
.filters-backup-section .backup-actions .person-b-backup::after{
  content:none !important;
  display:none !important;
}


body[data-view-mode="edit"] .individual-slot-main{
  grid-template-columns:58px minmax(0,1fr) 78px !important;
  gap:3px !important;
}
body[data-view-mode="edit"] .individual-slot-tools{
  display:grid !important;
  grid-template-columns:46px 29px !important;
  align-items:center !important;
  gap:3px !important;
  width:78px !important;
  min-width:78px !important;
}
body[data-view-mode="edit"] .individual-prior{
  width:46px !important;
  min-width:46px !important;
  height:29px !important;
  min-height:29px !important;
  padding:0 4px !important;
  gap:2px !important;
  border:1px solid rgba(72,62,67,.42) !important;
  border-radius:6px !important;
  background:rgba(255,255,255,.88) !important;
  color:#5b5357 !important;
  font-size:.58rem !important;
  line-height:1 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 1px 2px rgba(34,25,30,.08) !important;
}
body[data-view-mode="edit"] .individual-prior.checked{
  border-color:#315f39 !important;
  background:linear-gradient(180deg,#4f8157 0%,#386b42 100%) !important;
  color:#fff !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 0 0 1px rgba(29,73,38,.22),0 1px 2px rgba(32,72,39,.22) !important;
}
body[data-view-mode="edit"] .individual-prior:not(.checked):hover{
  border-color:rgba(72,62,67,.62) !important;
  background:#fff !important;
}
body[data-view-mode="edit"] .individual-prior-check{
  display:inline-block !important;
  width:8px !important;
  min-width:8px !important;
  text-align:center !important;
  font-size:.66rem !important;
  font-weight:950 !important;
}
body[data-view-mode="edit"] .individual-prior-text{
  display:inline !important;
  color:inherit !important;
  font-size:.58rem !important;
  font-weight:850 !important;
  line-height:1 !important;
}
body[data-view-mode="edit"] .individual-prior-check{color:inherit !important;}
body[data-view-mode="edit"] .slot-note-toggle{
  width:29px !important;
  min-width:29px !important;
  height:29px !important;
  min-height:29px !important;
  border-radius:6px !important;
  font-size:.68rem !important;
}
body[data-view-mode="edit"] .individual-slot-note-panel[hidden]{
  display:none !important;
}
body[data-view-mode="edit"] .individual-slot-note-panel{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:start;
  gap:5px;
  margin:3px 4px 0;
  padding:4px 5px;
  border:1px solid color-mix(in srgb,var(--editor-person-color,#b9a47b) 20%,#ded5ca 80%);
  border-radius:7px;
  background:rgba(255,252,247,.72);
}
body[data-view-mode="edit"] .individual-slot-note-panel > span{
  padding-top:5px;
  color:var(--edit-theme-ink,#342b30);
  font-size:.58rem;
  font-weight:850;
  line-height:1.1;
  white-space:nowrap;
}
body[data-view-mode="edit"] .individual-slot-note-panel textarea{
  width:100%;
  min-width:0;
  min-height:34px;
  height:34px;
  max-height:110px;
  resize:vertical;
  box-sizing:border-box;
  padding:5px 7px;
  border:1px solid color-mix(in srgb,var(--editor-person-color,#b9a47b) 22%,#d9d2ca 78%);
  border-radius:6px;
  background:rgba(255,255,255,.86);
  color:var(--edit-theme-ink,#342b30);
  font:inherit;
  font-size:.66rem;
  line-height:1.25;
}
body[data-view-mode="edit"] .individual-practice-headtools:empty{
  display:none !important;
}


@media (max-width:650px){
  body[data-view-mode="edit"] .individual-slot-main{
    grid-template-columns:42px minmax(0,1fr) 72px !important;
    gap:2px !important;
  }
  body[data-view-mode="edit"] .individual-score-row{
    gap:1px !important;
  }
  body[data-view-mode="edit"] .individual-score-row .score-btn,
  body[data-view-mode="edit"] .individual-score-row .score-btn.semantic-score-btn,
  body[data-view-mode="edit"] .individual-score-row .score-btn.semantic-score-btn[data-score]{
    min-width:0 !important;
    height:29px !important;
    min-height:29px !important;
    padding:0 !important;
    font-size:9.8px !important;
  }
  body[data-view-mode="edit"] .individual-slot-tools{
    grid-template-columns:41px 29px !important;
    gap:2px !important;
    width:72px !important;
    min-width:72px !important;
  }
  body[data-view-mode="edit"] .individual-prior{
    width:41px !important;
    min-width:41px !important;
    height:29px !important;
    min-height:29px !important;
    padding:0 2px !important;
  }
  body[data-view-mode="edit"] .individual-prior-check{
    width:7px !important;
    min-width:7px !important;
    font-size:.6rem !important;
  }
  body[data-view-mode="edit"] .individual-prior-text{
    display:inline !important;
    font-size:8px !important;
  }
  body[data-view-mode="edit"] .slot-note-toggle{
    width:29px !important;
    min-width:29px !important;
    height:29px !important;
  }
  body[data-view-mode="edit"] .individual-slot-note-panel{
    grid-template-columns:45px minmax(0,1fr);
    margin:2px 4px 0;
    padding:3px 4px;
    gap:4px;
  }
  body[data-view-mode="edit"] .individual-slot-note-panel > span{
    padding-top:5px;
    font-size:8px;
  }
  body[data-view-mode="edit"] .individual-slot-note-panel textarea{
    min-height:31px;
    height:31px;
    padding:4px 6px;
    font-size:9px;
  }
}

@media (max-width:380px){
  body[data-view-mode="edit"] .individual-slot-main{
    grid-template-columns:38px minmax(0,1fr) 66px !important;
  }
  body[data-view-mode="edit"] .individual-slot-tools{
    grid-template-columns:37px 27px !important;
    width:66px !important;
    min-width:66px !important;
  }
  body[data-view-mode="edit"] .individual-prior{
    width:37px !important;
    min-width:37px !important;
    padding:0 1px !important;
  }
  body[data-view-mode="edit"] .individual-prior-text{font-size:7.3px !important;}
  
  body[data-view-mode="edit"] .individual-score-row .score-btn,
  body[data-view-mode="edit"] .individual-score-row .score-btn.semantic-score-btn,
  body[data-view-mode="edit"] .individual-score-row .score-btn.semantic-score-btn[data-score]{
    font-size:9px !important;
  }
}


body[data-view-mode="read"] .couple-before-tick,
body[data-view-mode="read"] .couple-together-tick{background:rgba(255,255,255,.90) !important;color:#4d454a !important;border-color:rgba(50,42,47,.48) !important;}
body[data-view-mode="read"] .couple-before-tick.is-done,
body[data-view-mode="read"] .couple-together-tick.is-done{background:linear-gradient(180deg,#4f8157 0%,#386b42 100%) !important;color:#fff !important;border-color:#315f39 !important;}


body[data-view-mode="read"] .couple-before-tick{
  background:#fff !important;
  color:#171717 !important;
  border-color:rgba(18,18,18,.58) !important;
  cursor:default !important;
  pointer-events:none !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 1px 2px rgba(30,24,28,.08) !important;
}
body[data-view-mode="read"] .couple-before-tick.is-done{
  background:linear-gradient(180deg,#4f8157 0%,#386b42 100%) !important;
  color:#fff !important;
  border-color:#315f39 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 0 0 1px rgba(29,73,38,.22),0 1px 2px rgba(32,72,39,.22) !important;
}


body[data-view-mode="read"] .couple-before-tick .couple-result-icon{margin-right:1px;}
body[data-view-mode="read"] .couple-before-tick.is-done .couple-result-icon-check{color:#fff!important;}
body[data-view-mode="read"] .couple-before-tick:not(.is-done) .couple-result-icon-cross{color:#171717!important;}
body[data-view-mode="read"] .couple-before-tick:not(.is-done) .couple-result-icon-cross::before,
body[data-view-mode="read"] .couple-before-tick:not(.is-done) .couple-result-icon-cross::after{height:1.45px!important;opacity:.94!important;box-shadow:0 .4px 0 rgba(255,255,255,.28)!important;}


/* Mobile-only reader shell/category grammar. Desktop has one canonical layout below. */
@media (max-width:760px){
body[data-view-mode="read"] .couple-reader{
  width:min(1500px,calc(100% - 16px)) !important;
  margin:8px auto 20px !important;
  padding:8px !important;
  border:1px solid color-mix(in srgb,var(--dominant-color) 34%,#fff 66%) !important;
  border-radius:14px !important;
  background:color-mix(in srgb,var(--dominant-soft) 84%,var(--dominant-color) 16%) !important;
  box-shadow:0 10px 30px rgba(24,14,19,.08) !important;
}
body[data-view-mode="read"] .couple-reader-list{
  display:flex !important;
  flex-direction:column !important;
  gap:5px !important;
}
body[data-view-mode="read"] .couple-reader-category{
  position:relative !important;
  margin:0 !important;
  scroll-margin-top:calc(var(--read-category-sticky-top,0px) + 8px) !important;
  border:0 !important;
  border-radius:9px !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
}
body[data-view-mode="read"] .couple-reader-category-head{
  
  
  
  width:100% !important;
  min-height:31px !important;
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) auto auto !important;
  align-items:center !important;
  gap:6px !important;
  padding:5px 8px !important;
  border:1px solid var(--theme-line) !important;
  border-radius:8px 8px 0 0 !important;
  background:linear-gradient(90deg,var(--theme-category-start) 0%,var(--theme-category-end) 100%) !important;
  color:var(--theme-ink) !important;
  text-align:left !important;
  cursor:pointer !important;
  margin:0 !important;
  box-sizing:border-box !important;
  isolation:isolate !important;
  box-shadow:0 2px 8px rgba(26,15,20,.08) !important;
}

body[data-view-mode="read"] .couple-reader-category-head::after{
  left:0 !important;
  background:rgba(87,63,71,.10) !important;
  right:0 !important;
  bottom:-1px !important;
}
body[data-view-mode="read"] .couple-reader-category-head > strong{
  min-width:0 !important;
  font-size:.78rem !important;
  line-height:1.1 !important;
  color:var(--dominant-dark) !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
body[data-view-mode="read"] .couple-reader-category-count{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:0 !important;
  min-height:0 !important;
  padding:1px 5px !important;
  border-radius:999px !important;
  background:var(--readability-chip-bg) !important;
  color:var(--readability-ink) !important;
  font-size:.62rem !important;
  font-weight:800 !important;
  line-height:1 !important;
  white-space:nowrap !important;
}
body[data-view-mode="read"] .couple-result-head{gap:3px !important;}
body[data-view-mode="read"] .couple-result-head > span{line-height:1.05 !important;}
body[data-view-mode="read"] .couple-result-head b{font-size:.58rem !important;}
body[data-view-mode="read"] .couple-result-head small{
  margin-top:2px !important;
  color:color-mix(in srgb,var(--dominant-dark) 74%,#5f565b 26%) !important;
  font-size:.48rem !important;
  font-weight:800 !important;
}
body[data-view-mode="read"] .couple-reader-category-body{
  display:flex !important;
  flex-direction:column !important;
  position:relative !important;
  box-sizing:border-box !important;
  margin:0 !important;
  overflow:hidden !important;
  border-left:1px solid var(--theme-line) !important;
  border-right:1px solid var(--theme-line) !important;
  border-bottom:1px solid var(--theme-line) !important;
  border-radius:0 0 8px 8px !important;
  background:var(--theme-panel) !important;
  box-shadow:0 2px 8px rgba(26,15,20,.08) !important;
}
body[data-view-mode="read"] .couple-reader-category-body > .couple-practice:first-child,
body[data-view-mode="read"] .couple-reader-category-body > .couple-practice-grouped:first-child{
  margin-top:0 !important;
}





  body[data-view-mode="read"] .couple-reader{
    width:calc(100% - 4px) !important;
    margin:3px auto 10px !important;
    padding:4px !important;
    border-radius:10px !important;
  }
  body[data-view-mode="read"] .couple-reader-list{gap:3px !important;}
  
  
  
  body[data-view-mode="read"] .couple-reader-category-head > strong{font-size:.72rem !important;}
  body[data-view-mode="read"] .couple-reader-category-count{font-size:.56rem !important;}
  body[data-view-mode="read"] .couple-reader-category-body{border-radius:0 0 7px 7px !important;}
  
  
}










/* Edit outer panel: same geometry/surface as Reading. */
body[data-view-mode="edit"] .individual-editor{
  width:min(1500px,calc(100% - 16px)) !important;
  margin:8px auto 20px !important;
  padding:8px !important;
  border:1px solid color-mix(in srgb,var(--dominant-color) 34%,#fff 66%) !important;
  border-radius:14px !important;
  background:color-mix(in srgb,var(--dominant-soft) 84%,var(--dominant-color) 16%) !important;
  box-shadow:0 10px 30px rgba(24,14,19,.08) !important;
}
body[data-view-mode="edit"] .individual-editor-list{
  display:flex !important;
  flex-direction:column !important;
  gap:5px !important;
}
body[data-view-mode="edit"] .individual-category{
  position:relative !important;
  width:100% !important;
  scroll-margin-top:calc(var(--edit-category-sticky-top,0px) + 8px) !important;
  margin:0 !important;
  border:0 !important;
  border-radius:9px !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
}

/* Edit category header: same dimensions and surface as Reading. */
body[data-view-mode="edit"] .individual-category-head{
  width:100% !important;
  min-height:31px !important;
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) auto auto !important;
  align-items:center !important;
  gap:6px !important;
  margin:0 !important;
  padding:5px 8px !important;
  box-sizing:border-box !important;
  border:1px solid var(--theme-line) !important;
  border-radius:8px !important;
  background:linear-gradient(90deg,var(--theme-category-start) 0%,var(--theme-category-end) 100%) !important;
  color:var(--theme-ink) !important;
  text-align:left !important;
  cursor:pointer !important;
  isolation:isolate !important;
  box-shadow:0 2px 8px rgba(26,15,20,.08) !important;
}



body[data-view-mode="edit"] .individual-category-head strong{
  min-width:0 !important;
  font-size:.78rem !important;
  line-height:1.1 !important;
  color:var(--dominant-dark) !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
body[data-view-mode="edit"] .individual-category-head .section-dot{
  width:10px !important;
  height:10px !important;
  border:1px solid rgba(0,0,0,.15) !important;
  border-radius:50% !important;
  background:var(--dominant-dark) !important;
  box-sizing:border-box !important;
}
body[data-view-mode="edit"] .individual-category-head > span:nth-of-type(2){
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:0 !important;
  min-height:0 !important;
  padding:1px 5px !important;
  border-radius:999px !important;
  background:var(--readability-chip-bg) !important;
  color:var(--readability-ink) !important;
  font-size:.62rem !important;
  font-weight:800 !important;
  line-height:1 !important;
  white-space:nowrap !important;
}
body[data-view-mode="edit"] .individual-category-head > b{
  justify-self:end !important;
  color:var(--theme-ink) !important;
  font-size:.72rem !important;
  line-height:1 !important;
}

/* Edit body and practices: same connected-category construction as Reading. */
body[data-view-mode="edit"] .individual-category-cards{
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  box-sizing:border-box !important;
  display:flex !important;
  flex-direction:column !important;
  gap:0 !important;
  border-left:1px solid var(--theme-line) !important;
  border-right:1px solid var(--theme-line) !important;
  border-bottom:1px solid var(--theme-line) !important;
  border-radius:0 0 8px 8px !important;
  background:var(--theme-panel) !important;
  box-shadow:0 2px 8px rgba(26,15,20,.08) !important;
  overflow:hidden !important;
}
body[data-view-mode="edit"] .individual-category-cards > .individual-practice-card,
body[data-view-mode="edit"] .individual-category-cards > .individual-practice-card[data-result-key]{
  width:100% !important;
  margin:0 !important;
  border-left:0 !important;
  border-right:0 !important;
  border-bottom:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
body[data-view-mode="edit"] .individual-category-cards > .individual-practice-card:first-child,
body[data-view-mode="edit"] .individual-category-cards > .individual-practice-card[data-result-key]:first-child{
  border-top:0 !important;
  border-top-left-radius:0 !important;
  border-top-right-radius:0 !important;
}


@media (max-width:760px){
  
  body[data-view-mode="edit"] .individual-editor{
    width:calc(100% - 4px) !important;
    margin:3px auto 10px !important;
    padding:4px !important;
    border-radius:10px !important;
  }
  body[data-view-mode="edit"] .individual-editor-list{gap:3px !important;}
  
  
  
  body[data-view-mode="edit"] .individual-category-head strong{font-size:.72rem !important;}
  body[data-view-mode="edit"] .individual-category-head > span:nth-of-type(2){font-size:.56rem !important;}
  body[data-view-mode="edit"] .individual-category-head .section-dot{
    width:9px !important;
    height:9px !important;
  }
  body[data-view-mode="edit"] .individual-category-head > b{font-size:.66rem !important;}
  body[data-view-mode="edit"] .individual-category-cards{border-radius:0 0 7px 7px !important;}
}

@media (max-width:650px){
  
  
}


.reader-header-ds-choice{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:1px !important;
  text-align:center !important;
}
.reader-header-ds-choice .reader-ds-line{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  min-width:0 !important;
  line-height:1 !important;
}
.reader-header-ds-choice .reader-ds-line-name .profile-inline-name{
  max-width:100% !important;
}
.reader-header-ds-choice .reader-ds-line-verb .profile-inline-text{
  font-size:7px !important;
  font-weight:800 !important;
  letter-spacing:.03em !important;
  text-transform:uppercase !important;
}
@media (max-width:760px){
  .reader-header-ds-choice{
    gap:1px !important;
  }
  .reader-header-ds-choice .reader-ds-line-verb .profile-inline-text{
    font-size:5.8px !important;
  }
}


:root{
  --premium-control-bg:rgba(255,251,247,.96);
  --premium-control-bg-soft:rgba(255,251,247,.76);
  --premium-control-border:color-mix(in srgb,var(--luxe-line) 72%,#fff 28%);
  --premium-control-shadow:0 1px 3px rgba(52,35,41,.055);
  --premium-control-radius:10px;
}

/* Version is metadata, not a primary action. */
header .version-badge{
  margin-left:6px !important;
  padding:2px 6px !important;
  border:1px solid rgba(255,255,255,.38) !important;
  border-radius:999px !important;
  background:rgba(255,251,247,.88) !important;
  color:color-mix(in srgb,var(--dominant-dark) 84%,#332c30 16%) !important;
  font-size:9px !important;
  font-weight:850 !important;
  letter-spacing:.015em !important;
  text-shadow:none !important;
  box-shadow:0 1px 2px rgba(38,24,32,.10) !important;
}

/* Language + help use the same ivory control family as the rest of the header. */
header .language-switch,
header .help-button{
  border-color:var(--premium-control-border) !important;
  background:var(--premium-control-bg) !important;
  color:var(--contrast-ink-strong) !important;
  box-shadow:var(--premium-control-shadow) !important;
}
header .language-switch{border-radius:var(--premium-control-radius) !important;}
header .language-choice{
  background:transparent !important;
  color:color-mix(in srgb,var(--contrast-ink-strong) 82%,#766b70 18%) !important;
  transition:background .15s ease,color .15s ease,box-shadow .15s ease !important;
}
header .language-choice + .language-choice{
  border-left:1px solid color-mix(in srgb,var(--luxe-line) 55%,#fff 45%) !important;
  border-right:0 !important;
}

header .help-button{
  border-radius:var(--premium-control-radius) !important;
  font-weight:850 !important;
}
header .help-button:hover,
header .help-button:focus-visible{
  border-color:color-mix(in srgb,var(--dominant-color) 35%,var(--luxe-line) 65%) !important;
  background:#fffdfa !important;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--dominant-soft) 62%,transparent),var(--premium-control-shadow) !important;
}









/* Utility hierarchy: Tools/Profile are primary utilities; collapse/expand are quieter. */
header .all-tools > summary,
header .editor-top-dock .profile-edit-button{
  border-color:var(--premium-control-border) !important;
  background:var(--premium-control-bg) !important;
  color:var(--contrast-ink-strong) !important;
  box-shadow:var(--premium-control-shadow) !important;
}
header .editor-top-dock .individual-editor-bulk-btn{
  border-color:color-mix(in srgb,var(--luxe-line) 56%,#fff 44%) !important;
  background:var(--premium-control-bg-soft) !important;
  color:color-mix(in srgb,var(--contrast-ink-strong) 76%,#80757a 24%) !important;
  box-shadow:none !important;
  font-weight:800 !important;
}
header .editor-top-dock .individual-editor-bulk-btn:hover{
  background:rgba(255,251,247,.91) !important;
  color:var(--contrast-ink-strong) !important;
}
header .all-tools > summary::before{display:none !important;}
header .all-tools > summary::after{
  border:0 !important;
  background:transparent !important;
  color:color-mix(in srgb,var(--contrast-ink-strong) 68%,#867a80 32%) !important;
  box-shadow:none !important;
}

/* Reading summary: clearer hierarchy, quieter metadata. */
body[data-view-mode="read"] header .reader-filter-dock{
  border-color:var(--premium-control-border) !important;
  background:var(--premium-control-bg) !important;
  box-shadow:var(--premium-control-shadow) !important;
}
body[data-view-mode="read"] header .reader-filter-summary-row{
  background:linear-gradient(180deg,rgba(255,252,248,.97) 0%,rgba(249,244,240,.96) 100%) !important;
}
body[data-view-mode="read"] header .reader-filter-summary-title{
  color:var(--dominant-dark) !important;
  letter-spacing:.005em !important;
}
body[data-view-mode="read"] header .reader-filter-summary-title > span[aria-hidden="true"]{
  width:15px !important;
  height:15px !important;
  border-color:color-mix(in srgb,var(--dominant-color) 24%,#d8cec7 76%) !important;
  background:rgba(255,251,247,.72) !important;
  color:color-mix(in srgb,var(--dominant-dark) 70%,#8b7c83 30%) !important;
  font-size:.56rem !important;
}
body[data-view-mode="read"] header .reader-filter-summary-inline{
  color:color-mix(in srgb,var(--dominant-dark) 68%,#756b70 32%) !important;
  font-weight:750 !important;
}
body[data-view-mode="read"] header .reader-filter-summary-name{font-weight:900 !important;}
body[data-view-mode="read"] header .reader-filter-chevron{
  color:color-mix(in srgb,var(--dominant-dark) 58%,#92868b 42%) !important;
  opacity:.82 !important;
}


body[data-view-mode="read"] .couple-reader-category-count,
body[data-view-mode="edit"] .individual-category-head > span:nth-of-type(2){
  background:rgba(255,251,247,.72) !important;
  color:color-mix(in srgb,var(--dominant-dark) 68%,#766b70 32%) !important;
  font-weight:800 !important;
}


/* Footer: quieter and less visually abrupt against the purple application shell. */
.site-footer{
  min-height:23px !important;
  gap:4px !important;
  padding:2px 8px calc(2px + env(safe-area-inset-bottom)) !important;
  border-top:1px solid color-mix(in srgb,var(--luxe-line) 62%,#fff 38%) !important;
  background:rgba(250,247,244,.96) !important;
  color:#6f656a !important;
  font-size:9.5px !important;
  box-shadow:0 -1px 4px rgba(36,23,30,.035) !important;
}
.site-footer > span[aria-hidden="true"]{opacity:.32 !important;}
.site-footer button,
.site-footer a{
  color:inherit !important;
  text-decoration-color:rgba(111,101,106,.48) !important;
  text-decoration-thickness:.7px !important;
  text-underline-offset:2px !important;
}
.site-footer button:hover,
.site-footer button:focus-visible,
.site-footer a:hover{color:var(--dominant-dark) !important;}

@media (max-width:760px){
  
  
  header .editor-top-dock .individual-editor-bulk-btn{font-weight:780 !important;}
  .site-footer{font-size:9px !important;gap:3px !important;}
}


header .language-choice.active .flag-svg,
header .language-choice[aria-pressed="true"] .flag-svg{
  filter:saturate(1.02) contrast(1.02) !important;
}


header .language-choice{
  background:rgba(255,251,247,.96) !important;
  color:var(--contrast-ink-strong) !important;
  box-shadow:none !important;
}
header .language-choice.active,
header .language-choice[aria-pressed="true"]{
  background:linear-gradient(180deg,color-mix(in srgb,var(--dominant-color) 92%,#fff 8%) 0%,var(--dominant-color) 100%) !important;
  color:#fff !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16) !important;
}
header .language-choice:not(.active):not([aria-pressed="true"]){
  background:rgba(255,251,247,.96) !important;
}


body[data-view-mode="edit"] .individual-category-cards > .individual-practice-card,
body[data-view-mode="edit"] .individual-category-cards > .individual-practice-card[data-result-key]{
  border-top:1px solid color-mix(in srgb,var(--theme-line) 68%,#fff 32%) !important;
}

body[data-view-mode="edit"] .individual-category-cards > .individual-practice-card:first-child,
body[data-view-mode="edit"] .individual-category-cards > .individual-practice-card[data-result-key]:first-child{
  border-top:0 !important;
}
@media (max-width:760px){
  body[data-view-mode="edit"] .individual-category-cards{
    gap:5px !important;
  }
}


body[data-view-mode="edit"] .individual-slot[data-result-key="excellent"] .individual-slot-main{background:rgba(233,244,228,.96) !important;}
body[data-view-mode="edit"] .individual-slot[data-result-key="strong"] .individual-slot-main{background:rgba(239,239,211,.96) !important;}
body[data-view-mode="edit"] .individual-slot[data-result-key="compatible"] .individual-slot-main{background:rgba(247,236,207,.96) !important;}
body[data-view-mode="edit"] .individual-slot[data-result-key="later"] .individual-slot-main{background:rgba(244,225,211,.96) !important;}
body[data-view-mode="edit"] .individual-slot[data-result-key="fantasy"] .individual-slot-main{background:rgba(226,233,245,.96) !important;}
body[data-view-mode="edit"] .individual-slot[data-result-key="limit"] .individual-slot-main{background:rgba(243,225,231,.96) !important;}
body[data-view-mode="edit"] .individual-slot[data-result-key="incomplete"] .individual-slot-main{background:rgba(246,242,237,.96) !important;}


body[data-view-mode="edit"] .individual-category-cards > .individual-practice-card,
body[data-view-mode="edit"] .individual-category-cards > .individual-practice-card[data-result-key]{
  position:relative !important;
  margin:0 !important;
}
body[data-view-mode="edit"] .individual-category-cards > .individual-practice-card + .individual-practice-card,
body[data-view-mode="edit"] .individual-category-cards > .individual-practice-card[data-result-key] + .individual-practice-card[data-result-key]{
  margin-top:0 !important;
  border-top:0 !important;
  box-shadow:0 -1px 0 rgba(255,255,255,.18) !important;
}
body[data-view-mode="edit"] .individual-category-cards > .individual-practice-card + .individual-practice-card::before,
body[data-view-mode="edit"] .individual-category-cards > .individual-practice-card[data-result-key] + .individual-practice-card[data-result-key]::before{
  content:none !important;
  display:none !important;
}
/* Title/description and DOM/SUB belong to the same practice: only a subtle tone-on-tone seam. */


@media (max-width:760px){
  body[data-view-mode="edit"] .individual-category-cards{
    gap:4px !important;
  }
}


body[data-view-mode="edit"] .individual-slot[data-result-key]{
  --edit-slot-bg:linear-gradient(180deg,rgba(255,252,248,.96) 0%,rgba(252,248,243,.96) 100%);
  --edit-slot-border:rgba(79,63,52,.10);
}
body[data-view-mode="edit"] .individual-slot[data-result-key="excellent"]{
  --edit-slot-bg:linear-gradient(180deg,var(--result-excellent-panel-top) 0%,var(--result-excellent-panel-bottom) 100%);
  --edit-slot-border:var(--result-excellent-border);
}
body[data-view-mode="edit"] .individual-slot[data-result-key="strong"]{
  --edit-slot-bg:linear-gradient(180deg,var(--result-strong-panel-top) 0%,var(--result-strong-panel-bottom) 100%);
  --edit-slot-border:var(--result-strong-border);
}
body[data-view-mode="edit"] .individual-slot[data-result-key="compatible"]{
  --edit-slot-bg:linear-gradient(180deg,var(--result-compatible-panel-top) 0%,var(--result-compatible-panel-bottom) 100%);
  --edit-slot-border:var(--result-compatible-border);
}
body[data-view-mode="edit"] .individual-slot[data-result-key="later"]{
  --edit-slot-bg:linear-gradient(180deg,var(--result-later-panel-top) 0%,var(--result-later-panel-bottom) 100%);
  --edit-slot-border:var(--result-later-border);
}
body[data-view-mode="edit"] .individual-slot[data-result-key="fantasy"]{
  --edit-slot-bg:linear-gradient(180deg,var(--result-fantasy-panel-top) 0%,var(--result-fantasy-panel-bottom) 100%);
  --edit-slot-border:var(--result-fantasy-border);
}
body[data-view-mode="edit"] .individual-slot[data-result-key="limit"]{
  --edit-slot-bg:linear-gradient(180deg,var(--result-limit-panel-top) 0%,var(--result-limit-panel-bottom) 100%);
  --edit-slot-border:var(--result-limit-border);
}

body[data-view-mode="edit"] .individual-slot[data-result-key] .individual-slot-main{
  background:var(--edit-slot-bg) !important;
  border-color:color-mix(in srgb,var(--edit-slot-border) 72%,#fff 28%) !important;
}


body[data-view-mode="edit"] .individual-practice-card[data-result-key]{
  --edit-practice-frame-bg:linear-gradient(180deg,color-mix(in srgb,var(--edit-result-panel) 88%,#fff 12%) 0%,color-mix(in srgb,var(--edit-result-panel-strong) 82%,#fff 18%) 100%);
  
}
body[data-view-mode="edit"] .individual-practice-card[data-result-key] .individual-slots,
body[data-view-mode="edit"] .individual-practice-card[data-result-key] .individual-slots.has-multiple{
  background:var(--edit-practice-frame-bg) !important;
  border-top:1px solid color-mix(in srgb,var(--edit-result-line) 52%,#fff 48%) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34) !important;
}
body[data-view-mode="edit"] .individual-practice-card[data-result-key] .individual-slot{
  background:transparent !important;
}


body[data-view-mode="read"] .couple-result-head .reader-person-dot.person-a{
  background:var(--person-a-role-color) !important;
}
body[data-view-mode="read"] .couple-result-head .reader-person-dot.person-b{
  background:var(--person-b-role-color) !important;
}
@media (max-width:760px){
  body[data-view-mode="read"] .couple-result-head .reader-person-dot{
    width:9px !important;
    height:9px !important;
  }
}


body[data-view-mode="read"] .couple-result-head .reader-person-dot{
  display:grid !important;
  place-items:center !important;
  width:15px !important;
  height:15px !important;
  border-radius:50% !important;
  border:1px solid rgba(255,255,255,.78) !important;
  color:#fff !important;
  font-size:8px !important;
  font-style:normal !important;
  font-weight:950 !important;
  line-height:1 !important;
  text-shadow:0 1px 1px rgba(0,0,0,.22) !important;
  box-shadow:0 0 0 1px rgba(58,43,51,.20),inset 0 1px 0 rgba(255,255,255,.32) !important;
}
@media (max-width:760px){
  body[data-view-mode="read"] .couple-result-head .reader-person-dot{
    width:14px !important;
    height:14px !important;
    font-size:7.5px !important;
  }
}


body[data-view-mode="edit"] .individual-slot[data-result-key] .individual-slot-main{
  border-color:color-mix(in srgb,var(--edit-slot-border) 48%,#fff 52%) !important;
}

@media (max-width:650px){
  body[data-view-mode="edit"] .individual-prior{
    padding-inline:1px !important;
  }
  body[data-view-mode="edit"] .individual-prior-text{
    font-size:7.7px !important;
    letter-spacing:-.01em !important;
  }
}

@media (max-width:760px){
  body[data-view-mode="read"] .couple-result-head .reader-person-dot{
    width:16px !important;
    height:16px !important;
    font-size:8.5px !important;
  }
}


/* Reading initials: slightly larger, lighter border/shadow. */
body[data-view-mode="read"] .couple-result-head .reader-person-dot{
  width:18px !important;
  height:18px !important;
  border-width:.75px !important;
  border-color:rgba(255,255,255,.70) !important;
  font-size:9.4px !important;
  box-shadow:0 0 0 .75px rgba(58,43,51,.14), inset 0 1px 0 rgba(255,255,255,.24) !important;
}
/* Common-column icon: same optical weight and centered like the initials. */
body[data-view-mode="read"] .couple-result-head > span:last-child{
  display:grid !important;
  place-items:center !important;
}
body[data-view-mode="read"] .couple-result-head > span:last-child b{
  display:grid !important;
  place-items:center !important;
  width:18px !important;
  height:18px !important;
  margin:0 !important;
  line-height:1 !important;
}
body[data-view-mode="read"] .couple-result-head > span:last-child .profile-inline-text{
  display:block !important;
  font-size:11px !important;
  line-height:1 !important;
  opacity:.76 !important;
  transform:none !important;
}
/* Edit prior-state control: keep full word but reclaim a little horizontal room. */
body[data-view-mode="edit"] .individual-slot-tools{
  grid-template-columns:43px 29px !important;
  width:75px !important;
  min-width:75px !important;
}
body[data-view-mode="edit"] .individual-prior{
  width:43px !important;
  min-width:43px !important;
  padding-inline:1px !important;
  gap:1px !important;
}
body[data-view-mode="edit"] .individual-prior-text{
  font-size:.55rem !important;
  letter-spacing:-.015em !important;
}
/* Slightly tighter breathing room between practices, still clearly separated. */
body[data-view-mode="edit"] .individual-category-cards{
  gap:4px !important;
}
@media (max-width:760px){
  body[data-view-mode="read"] .couple-result-head .reader-person-dot{
    width:17px !important;
    height:17px !important;
    font-size:8.9px !important;
  }
  body[data-view-mode="read"] .couple-result-head > span:last-child b{
    width:17px !important;
    height:17px !important;
  }
  body[data-view-mode="read"] .couple-result-head > span:last-child .profile-inline-text{
    font-size:10.5px !important;
  }
  body[data-view-mode="edit"] .individual-category-cards{
    gap:3px !important;
  }
}


body[data-view-mode="edit"] .individual-practice-card[data-result-key] > header{
  border-bottom:1px solid color-mix(in srgb,var(--edit-result-line) 14%,transparent) !important;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.12) !important;
}
body[data-view-mode="edit"] .individual-practice-card[data-result-key] .individual-slots,
body[data-view-mode="edit"] .individual-practice-card[data-result-key] .individual-slots.has-multiple{
  border-top:0 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20) !important;
}
body[data-view-mode="edit"] .individual-practice-card[data-result-key="incomplete"]{
  
  --edit-result-panel:#ded7d0 !important;
  --edit-result-panel-strong:#cfc6be !important;
  --edit-result-line:#8b8179 !important;
}
body[data-view-mode="edit"] .individual-slot[data-result-key="incomplete"]{
  --edit-slot-bg:linear-gradient(180deg,#e4ded8 0%,#d6cec7 100%) !important;
  --edit-slot-border:#91877f !important;
}


.custom-practice-tool{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px;}
.custom-practice-tool small{font-size:.72rem;color:#6d6267;}
.custom-practice-add{min-height:34px;}
body[data-view-mode="read"] .custom-practice-tool{display:none!important;}
.custom-practice-modal[hidden]{display:none!important;}
.custom-practice-modal{position:fixed;inset:0;z-index:1250;display:grid;place-items:center;padding:12px;}
.custom-practice-backdrop{position:absolute;inset:0;background:rgba(20,14,18,.72);backdrop-filter:blur(4px);}
.custom-practice-dialog{position:relative;width:min(620px,100%);max-height:94dvh;overflow:auto;border:1px solid #b9a5ae;border-radius:18px;background:#fff;color:#30262b;box-shadow:0 28px 80px rgba(0,0,0,.38);}
.custom-practice-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:15px 16px 11px;border-bottom:1px solid #ded3d8;background:#f4eeeb;}
.custom-practice-kicker{display:inline-flex;margin-bottom:5px;padding:3px 7px;border:1px solid #cbb8c0;border-radius:999px;background:#fff8f4;color:#755367;font-size:.66rem;font-weight:900;text-transform:uppercase;letter-spacing:.055em;}
.custom-practice-head h2{margin:0;font-size:1.18rem;}
.custom-practice-close{width:34px;height:34px;border:1px solid #cbbdc3;border-radius:10px;background:#fff;color:#5d4d55;font:inherit;font-weight:900;cursor:pointer;}
.custom-practice-body{display:grid;gap:12px;padding:14px 16px;}
.custom-field{display:grid;gap:5px;font-size:.79rem;font-weight:850;}
.custom-field input,.custom-field select,.custom-field textarea{width:100%;min-height:40px;border:1px solid #cfc3c8;border-radius:10px;background:#fff;padding:7px 9px;font:inherit;color:#30262b;}
.custom-field textarea{min-height:88px;resize:vertical;line-height:1.4;}
.custom-practice-variable-hint{margin:-1px 0 2px;color:#70646a;font-size:.69rem;line-height:1.35;}
.custom-anatomy{margin:0;padding:10px;border:1px solid #ddd1d6;border-radius:12px;}
.custom-anatomy legend{padding:0 5px;font-size:.78rem;font-weight:900;}
.custom-anatomy-side{display:grid;gap:6px;margin-top:7px;}
.custom-anatomy-side>strong{font-size:.72rem;letter-spacing:.055em;}
.custom-anatomy-list{display:flex;flex-wrap:wrap;gap:5px;}
.custom-anatomy-chip{position:relative;display:inline-flex;cursor:pointer;}
.custom-anatomy-chip input{position:absolute;opacity:0;pointer-events:none;}
.custom-anatomy-chip span{display:inline-flex;align-items:center;min-height:29px;padding:4px 8px;border:1px solid #cfc3c8;border-radius:999px;background:#fff;color:#5b4c53;font-size:.7rem;font-weight:800;}
.custom-anatomy-chip input:checked+span{border-color:var(--dominant-color);background:color-mix(in srgb,var(--dominant-color) 16%,#fff 84%);color:var(--dominant-dark);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--dominant-color) 28%,transparent 72%);}
.custom-practice-hint{margin:0;color:#70646a;font-size:.72rem;line-height:1.4;}
.custom-practice-actions{display:flex;justify-content:flex-end;gap:7px;padding:10px 16px 14px;border-top:1px solid #e3dade;}
.custom-practice-actions .action{min-height:38px;}
.custom-submit{border-color:var(--dominant-color)!important;background:var(--dominant-color)!important;color:#fff!important;}
.custom-practice-card-action{display:inline-grid;place-items:center;width:25px;height:25px;padding:0;border:1px solid color-mix(in srgb,var(--dominant-color) 28%,#bdb2b7 72%);border-radius:8px;background:rgba(255,255,255,.72);color:#493b42;font:inherit;font-size:.82rem;font-weight:900;cursor:pointer;}
.custom-practice-card-action.custom-delete{font-size:1rem;color:#7b3446;}
@media(max-width:700px){
  .custom-practice-modal{padding:6px;}
  .custom-practice-dialog{border-radius:14px;max-height:97dvh;}
  .custom-practice-head{padding:11px 12px 9px;}
  .custom-practice-body{padding:10px 12px;gap:9px;}
  .custom-practice-actions{padding:8px 12px 11px;}
  .custom-anatomy-chip span{min-height:27px;padding:3px 7px;font-size:.66rem;}
  .custom-practice-card-action{width:23px;height:23px;border-radius:7px;}
}

.custom-practice-variables{display:grid;gap:.45rem}
.custom-practice-variable-hint{margin:0;font-size:.84rem;opacity:.8}
.custom-practice-variable-buttons{display:flex;flex-wrap:wrap;gap:.4rem}
.custom-practice-variable-buttons button{border:1px solid rgba(255,255,255,.18);border-radius:.65rem;padding:.45rem .65rem;background:rgba(255,255,255,.06);color:inherit;font:inherit;cursor:pointer}
.custom-practice-variable-buttons button:hover{background:rgba(255,255,255,.11)}
.custom-field textarea{width:100%;box-sizing:border-box;resize:vertical}


body[data-view-mode="edit"] .individual-practice-explanation .profile-inline-name{
  display:inline-flex;
  vertical-align:baseline;
  padding:1px 5px;
  margin:0 1px;
  font-size:.92em;
  line-height:1.05;
}


@media (max-width:650px){
  body[data-view-mode="edit"] .individual-slot{
    padding-left:2px !important;
    padding-right:2px !important;
  }
  body[data-view-mode="edit"] .individual-slot-main{
    grid-template-columns:31px minmax(0,1fr) 69px !important;
    gap:1px !important;
  }
  body[data-view-mode="edit"] .individual-slot-label-wrap{
    width:31px !important;
    min-width:31px !important;
    justify-content:center !important;
    gap:1px !important;
  }
  body[data-view-mode="edit"] .individual-slot-label{
    width:auto !important;
    font-size:.58rem !important;
    letter-spacing:0 !important;
    text-align:center !important;
  }
  body[data-view-mode="edit"] .individual-score-row{
    width:100% !important;
    max-width:none !important;
    gap:1px !important;
  }
  body[data-view-mode="edit"] .individual-slot-tools{
    grid-template-columns:40px 28px !important;
    gap:1px !important;
    width:69px !important;
    min-width:69px !important;
  }
  body[data-view-mode="edit"] .individual-prior{
    width:40px !important;
    min-width:40px !important;
    padding-inline:1px !important;
    gap:1px !important;
  }
  body[data-view-mode="edit"] .individual-prior-text{
    font-size:7.6px !important;
    letter-spacing:-.015em !important;
  }
  body[data-view-mode="edit"] .slot-note-toggle{
    width:28px !important;
    min-width:28px !important;
  }
}
@media (max-width:380px){
  body[data-view-mode="edit"] .individual-slot-main{
    grid-template-columns:29px minmax(0,1fr) 65px !important;
  }
  body[data-view-mode="edit"] .individual-slot-label-wrap{
    width:29px !important;
    min-width:29px !important;
  }
  body[data-view-mode="edit"] .individual-slot-tools{
    grid-template-columns:37px 27px !important;
    width:65px !important;
    min-width:65px !important;
  }
  body[data-view-mode="edit"] .individual-prior{
    width:37px !important;
    min-width:37px !important;
  }
  body[data-view-mode="edit"] .slot-note-toggle{
    width:27px !important;
    min-width:27px !important;
  }
}


/* ===== CANONICAL UI OVERRIDES ===== */
/* ==========================================================================
   CHECKLIST BDSM — UI OVERRIDES
   Stable override layer for desktop Edit, tools and mobile-specific behavior.
   Desktop Reading is isolated in its own canonical section below.
   ========================================================================== */
.desktop-editor-table-head,
.desktop-reader-table-head{display:none;}
@media  (min-width:761px){
  body[data-view-mode="edit"] main,
  body[data-view-mode="read"] main{padding-left:10px !important;padding-right:10px !important;overflow-x:auto !important;overflow-y:auto !important;overscroll-behavior-x:contain;touch-action:pan-x pan-y pinch-zoom;--edit-category-sticky-top:43px;--read-category-sticky-top:43px;}
  body[data-view-mode="edit"] .individual-editor,
  body[data-view-mode="read"] .couple-reader{width:min(1700px,calc(100% - 8px)) !important;max-width:none !important;padding:7px !important;overflow:visible !important;}
  body[data-view-mode="edit"] .individual-editor-list{min-width:1390px;gap:5px !important;}
  body[data-view-mode="edit"] .desktop-editor-table-head{display:grid;position:sticky;top:0;z-index:40;align-items:stretch;margin:0 0 5px;overflow:hidden;border:1px solid #2a2227;border-radius:8px;background:#342b31;color:#fff;box-shadow:0 2px 7px rgba(24,16,20,.12);}
  body[data-view-mode="edit"] .desktop-editor-table-head>span{display:flex;align-items:center;justify-content:center;min-width:0;border-right:1px solid rgba(255,255,255,.17);font-weight:900;line-height:1.05;text-align:center;}
  body[data-view-mode="edit"] .desktop-editor-table-head>span:first-child{position:sticky;left:0;z-index:2;justify-content:flex-start;background:#342b31;box-shadow:4px 0 8px rgba(0,0,0,.14);}
  body[data-view-mode="edit"] .desktop-editor-table-head>span:last-child{border-right:0;}
  body[data-view-mode="edit"] .individual-category,
  body[data-view-mode="edit"] .individual-category-cards{min-width:1390px !important;}
  body[data-view-mode="edit"] .individual-category-head{min-width:1390px !important;left:0 !important;}
  body[data-view-mode="edit"] .individual-category-cards{overflow:visible !important;}
  body[data-view-mode="edit"] .individual-practice-card,
  body[data-view-mode="edit"] .individual-category-cards>.individual-practice-card,
  body[data-view-mode="edit"] .individual-category-cards>.individual-practice-card[data-result-key]{display:grid !important;align-items:stretch;overflow:visible !important;background:var(--edit-practice-frame-bg,#fff) !important;}
  body[data-view-mode="edit"] .individual-practice-card>header,
  body[data-view-mode="edit"] .individual-practice-headmain{display:contents !important;}
  body[data-view-mode="edit"] .individual-practice-titleline{grid-column:1;grid-row:1;left:0;z-index:7;border-right:1px solid var(--theme-line);}
  body[data-view-mode="edit"] .individual-practice-card h3{min-width:0;white-space:normal !important;overflow:visible !important;overflow-wrap:anywhere;text-overflow:clip !important;}
  body[data-view-mode="edit"] .individual-practice-category{flex:0 0 auto;font-size:.50rem !important;}
  body[data-view-mode="edit"] .individual-practice-explanation{grid-column:2;grid-row:1;align-items:center;border-right:1px solid var(--theme-line);}
  body[data-view-mode="edit"] .individual-practice-headtools{grid-column:1;grid-row:1;justify-self:end;align-self:center;width:max-content;max-width:78px;margin-right:5px;gap:2px !important;background:transparent;}
  body[data-view-mode="edit"] .individual-practice-headtools .risk-badge{transform:scale(.82);transform-origin:center;margin:0 !important;}
  body[data-view-mode="edit"] .custom-practice-card-action{width:21px !important;min-width:21px !important;height:21px !important;min-height:21px !important;padding:0 !important;font-size:.66rem !important;}
  body[data-view-mode="edit"] .individual-slots,
  body[data-view-mode="edit"] .individual-slots.has-multiple{grid-row:1;display:flex !important;flex-direction:column;padding:0 !important;border-top:0 !important;background:var(--edit-practice-frame-bg,#fff) !important;}
  body[data-view-mode="edit"] .individual-slot{min-width:0;padding:0 !important;background:transparent !important;}
  body[data-view-mode="edit"] .individual-slot+.individual-slot{margin-top:0 !important;border-top:1px solid color-mix(in srgb,var(--edit-result-line,#d7ccc0) 72%,#fff 28%) !important;}
  body[data-view-mode="edit"] .individual-slot-main{display:grid !important;gap:0 !important;align-items:stretch !important;padding:0 !important;border:0 !important;border-radius:0 !important;background:var(--edit-slot-bg,#fff) !important;}
  body[data-view-mode="edit"] .individual-slot-label-wrap{display:flex;align-items:center;justify-content:center;width:auto !important;min-width:0 !important;border-right:1px solid color-mix(in srgb,var(--edit-slot-border,#d7ccc0) 72%,#fff 28%);}
  body[data-view-mode="edit"] .individual-slot-label{text-align:center;}
  body[data-view-mode="edit"] .individual-score-row{width:100% !important;max-width:none !important;display:grid !important;grid-template-columns:repeat(7,minmax(0,1fr)) !important;align-items:center;border-right:1px solid color-mix(in srgb,var(--edit-slot-border,#d7ccc0) 72%,#fff 28%);box-sizing:border-box;}
  body[data-view-mode="edit"] .individual-score-row .score-btn,
  body[data-view-mode="edit"] .individual-score-row .score-btn.semantic-score-btn,
  body[data-view-mode="edit"] .individual-score-row .score-btn.semantic-score-btn[data-score]{width:auto !important;min-width:0 !important;padding-inline:3px !important;}
  body[data-view-mode="edit"] .individual-slot-tools{display:grid !important;align-items:center !important;justify-content:center !important;box-sizing:border-box;}
  body[data-view-mode="edit"] .individual-prior{justify-content:center;}
  body[data-view-mode="edit"] .individual-prior-text{display:inline !important;font-size:.57rem !important;}
  body[data-view-mode="edit"] .slot-note-toggle{width:38px !important;min-width:38px !important;height:31px !important;min-height:31px !important;}
  body[data-view-mode="edit"] .individual-slot-note-panel{grid-template-columns:72px minmax(0,1fr) !important;margin:0 !important;padding:5px 7px !important;border-width:1px 0 0 !important;border-radius:0 !important;background:var(--edit-practice-frame-bg,rgba(255,252,247,.92)) !important;}
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  body[data-view-mode="edit"] :is(.score-btn,.individual-prior,.slot-note-toggle,.custom-practice-card-action):focus-visible{position:relative;z-index:12;outline:2px solid #252027 !important;outline-offset:1px !important;}
}
.desktop-inline-note{display:none;}
@media  (min-width:761px){
  body[data-view-mode="edit"] .individual-practice-card>header{grid-column:1;grid-row:1;position:sticky;left:0;z-index:7;display:flex !important;align-items:stretch;min-width:0;min-height:100%;margin:0 !important;padding:0 !important;border:0 !important;border-right:1px solid var(--theme-line) !important;border-radius:0 !important;background:color-mix(in srgb,var(--edit-result-panel-strong,#efe7e1) 70%,#fff 30%) !important;box-shadow:4px 0 8px rgba(0,0,0,.055);}
  body[data-view-mode="edit"] .individual-practice-headmain{display:flex !important;flex:1 1 auto;flex-direction:column;justify-content:center;min-width:0;}
  body[data-view-mode="edit"] .individual-practice-titleline{position:static !important;display:flex !important;align-items:center;min-width:0;min-height:0;gap:6px !important;padding:0 !important;border:0 !important;background:transparent !important;box-shadow:none !important;}
  body[data-view-mode="edit"] .individual-practice-explanation{position:static !important;display:block !important;min-width:0;min-height:0;margin:3px 0 0 !important;padding:0 !important;border:0 !important;background:transparent !important;overflow-wrap:anywhere;}
  body[data-view-mode="edit"] .individual-practice-headtools{position:absolute !important;top:50%;right:5px;left:auto !important;z-index:8;transform:translateY(-50%);margin:0 !important;}
  body[data-view-mode="edit"] .individual-slots,
  body[data-view-mode="edit"] .individual-slots.has-multiple{grid-column:2;}
  body[data-view-mode="edit"] .individual-slot-tools{grid-template-columns:1fr !important;gap:0 !important;border-right:1px solid color-mix(in srgb,var(--edit-slot-border,#d7ccc0) 72%,#fff 28%);}
  body[data-view-mode="edit"] .individual-prior{min-width:0 !important;}
  body[data-view-mode="edit"] .slot-note-toggle{display:none !important;}
  body[data-view-mode="edit"] .individual-slot-note-panel{display:none !important;}
  body[data-view-mode="edit"] .desktop-inline-note{display:flex;grid-column:4;min-width:0;align-items:stretch;padding:0;}
  body[data-view-mode="edit"] .desktop-inline-note>span{display:none;}
  body[data-view-mode="edit"] .desktop-inline-note textarea{display:block;width:100%;min-width:0;height:100%;margin:0;border:0;border-radius:0;outline:0;font:inherit;box-sizing:border-box;}
  body[data-view-mode="edit"] .desktop-inline-note:focus-within{position:relative;z-index:11;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--dominant-color) 72%,#fff 28%);background:#fff;}
  
  
  body[data-view-mode="edit"] .desktop-inline-note textarea:focus-visible{outline:none !important;}
}
body[data-view-mode="edit"] .individual-prior-text-long{display:none !important;}
@media  (min-width:761px){
  body[data-view-mode="edit"] .individual-editor-list,
  body[data-view-mode="edit"] .individual-category,
  body[data-view-mode="edit"] .individual-category-cards,
  body[data-view-mode="edit"] .individual-category-head{width:100% !important;min-width:1318px !important;}
  body[data-view-mode="edit"] .desktop-editor-table-head{width:100% !important;min-width:1318px !important;min-height:34px !important;grid-template-columns:440px 68px minmax(420px,1fr) 130px minmax(260px,.75fr) !important;}
  body[data-view-mode="edit"] .desktop-editor-table-head>span{padding:5px 7px !important;font-size:.66rem !important;}
  body[data-view-mode="edit"] .individual-practice-card,
  body[data-view-mode="edit"] .individual-category-cards>.individual-practice-card,
  body[data-view-mode="edit"] .individual-category-cards>.individual-practice-card[data-result-key]{width:100% !important;min-width:1318px !important;min-height:39px !important;grid-template-columns:440px minmax(878px,1fr) !important;}
  body[data-view-mode="edit"] .individual-practice-headmain{padding:5px 74px 5px 8px !important;}
  body[data-view-mode="edit"] .individual-practice-explanation{margin-top:1px !important;font-size:.62rem !important;line-height:1.20 !important;}
  body[data-view-mode="edit"] .individual-practice-card h3{font-size:.73rem !important;line-height:1.12 !important;}
  body[data-view-mode="edit"] .individual-slots,
  body[data-view-mode="edit"] .individual-slots.has-multiple{width:100% !important;min-width:878px !important;}
  body[data-view-mode="edit"] .individual-slot-main{width:100% !important;min-height:39px !important;grid-template-columns:68px minmax(420px,1fr) 130px minmax(260px,.75fr) !important;}
  body[data-view-mode="edit"] .individual-slot-label-wrap{padding:3px 4px !important;}
  body[data-view-mode="edit"] .individual-slot-label{font-size:.59rem !important;}
  body[data-view-mode="edit"] .individual-score-row{gap:3px !important;padding:4px 6px !important;}
  body[data-view-mode="edit"] .individual-score-row .score-btn,
  body[data-view-mode="edit"] .individual-score-row .score-btn.semantic-score-btn,
  body[data-view-mode="edit"] .individual-score-row .score-btn.semantic-score-btn[data-score]{height:27px !important;min-height:27px !important;border-radius:5px !important;font-size:9.6px !important;}
  body[data-view-mode="edit"] .individual-slot-tools{width:130px !important;min-width:130px !important;padding:4px 6px !important;}
  body[data-view-mode="edit"] .individual-prior{width:100% !important;height:27px !important;min-height:27px !important;gap:4px !important;padding-inline:6px !important;}
  body[data-view-mode="edit"] .individual-prior-text-short{display:none !important;}
  body[data-view-mode="edit"] .individual-prior-text-long{display:inline !important;font-size:.55rem !important;white-space:nowrap;}
  body[data-view-mode="edit"] .desktop-inline-note{min-height:39px !important;}
  body[data-view-mode="edit"] .desktop-inline-note textarea{min-height:39px !important;padding:5px 8px !important;font-size:.64rem !important;line-height:1.20 !important;resize:vertical;}
}
@media (max-width:760px){
  body[data-view-mode="edit"] .individual-slot.has-persistent-note .individual-slot-note-panel{display:grid !important;}
  body[data-view-mode="edit"] .individual-slot.has-persistent-note .slot-note-toggle{cursor:default !important;}
}
@media (min-width:651px){
  
  
  
  
  
  
}
@media (min-width:651px) and (max-width:1080px){
  
  
  
  
}
@media  (min-width:761px){
  body[data-view-mode="read"] header .reader-filter-content{max-height:none !important;height:auto !important;overflow:visible !important;overscroll-behavior:auto !important;scrollbar-gutter:auto !important;}
  body[data-view-mode="read"] .reader-session-section .session-list{max-height:none !important;overflow:visible !important;}
}
@media  (min-width:761px){
  body[data-view-mode="edit"] header .all-tools-content{grid-template-areas:"explore explore"
      "filters random"
      "safety session"
      "display display"
      "reset reset" !important;}
  body[data-view-mode="edit"] header .all-tools-content > .display-filter-section{grid-area:display !important;}
  body[data-view-mode="edit"] header .all-tools-content > .reset-zone{grid-area:reset !important;width:100% !important;margin:0 !important;}
  body[data-view-mode="edit"] .display-filter-section{display:grid !important;grid-template-columns:minmax(0,1fr) !important;align-items:start !important;gap:10px !important;}
  body[data-view-mode="edit"] .display-filter-section > h2{margin-bottom:0 !important;}
  body[data-view-mode="edit"] .display-filter-section .semantic-legend{display:grid !important;grid-template-columns:minmax(320px,.92fr) minmax(360px,1.08fr) !important;grid-auto-rows:min-content !important;align-items:start !important;gap:8px 14px !important;width:100% !important;}
  body[data-view-mode="edit"] .display-filter-section .semantic-legend > strong{grid-column:1 / -1 !important;margin:0 !important;font-size:1rem !important;}
  body[data-view-mode="edit"] .display-filter-section .semantic-legend-item{grid-column:1 !important;min-height:36px !important;}
  body[data-view-mode="edit"] .display-filter-section .legend-help{grid-column:1 !important;margin-top:2px !important;align-self:start !important;}
  body[data-view-mode="edit"] .display-filter-section .reading-legend-card{grid-column:2 !important;grid-row:2 / span 10 !important;align-self:stretch !important;display:flex !important;flex-direction:column !important;gap:7px !important;min-height:100% !important;margin:0 !important;padding:10px 11px !important;border:1px solid color-mix(in srgb,var(--theme-line) 50%,transparent) !important;border-radius:11px !important;background:color-mix(in srgb,var(--theme-panel-2) 88%,white) !important;}
  body[data-view-mode="edit"] .display-filter-section .reading-legend-results{gap:4px !important;padding:8px 10px !important;}
  body[data-view-mode="edit"] .display-filter-section .reading-legend-line{font-size:.94rem !important;line-height:1.38 !important;}
  body[data-view-mode="edit"] .display-filter-section .reading-legend-subtitle,
  body[data-view-mode="edit"] .display-filter-section .reading-legend-pin{margin-top:6px !important;padding-top:7px !important;}
  body[data-view-mode="edit"] .reset-zone{display:grid !important;grid-template-columns:auto minmax(0,1fr) !important;align-items:center !important;gap:12px !important;border-top:1px solid color-mix(in srgb,var(--theme-line) 58%,transparent) !important;padding:10px 2px 2px !important;}
  body[data-view-mode="edit"] .reset-zone > .reset-btn{justify-self:start !important;}
  body[data-view-mode="edit"] .reset-zone > span{justify-self:end !important;text-align:right !important;}
}
@media  (min-width:761px) and (max-width:1180px){
  body[data-view-mode="edit"] .display-filter-section .semantic-legend{grid-template-columns:minmax(280px,.95fr) minmax(300px,1.05fr) !important;gap:8px 12px !important;}
  body[data-view-mode="edit"] .display-filter-section .reading-legend-line{font-size:.87rem !important;}
}
@media  (min-width:761px){
  body[data-view-mode="read"] .reader-random-section .randomizer{grid-template-columns:minmax(420px,1.08fr) minmax(360px,.92fr) !important;grid-template-areas:"button options"
      "info options"
      "result options" !important;gap:8px 14px !important;align-items:start !important;}
  body[data-view-mode="read"] .reader-random-section .random-btn{grid-area:button !important;width:100% !important;min-height:40px !important;}
  body[data-view-mode="read"] .reader-random-section .random-candidate-info{grid-area:info !important;margin:0 !important;align-self:start !important;}
  body[data-view-mode="read"] .reader-random-section .random-result{grid-area:result !important;width:100% !important;min-height:154px !important;margin:0 !important;align-self:stretch !important;}
  body[data-view-mode="read"] .reader-random-section .random-options{grid-area:options !important;display:grid !important;grid-template-columns:1fr !important;gap:8px !important;align-content:start !important;align-items:start !important;justify-items:start !important;width:100% !important;min-width:0 !important;padding:2px 0 0 !important;}
  body[data-view-mode="read"] .reader-random-section .random-options label{display:flex !important;align-items:flex-start !important;gap:8px !important;width:100% !important;min-width:0 !important;font-size:.69rem !important;line-height:1.25 !important;}
  body[data-view-mode="read"] .reader-random-section .random-options input{flex:0 0 auto !important;margin-top:1px !important;}
  body[data-view-mode="read"] .reader-random-section .random-cycle-reset{justify-self:start !important;margin-top:2px !important;}
  body[data-view-mode="read"] .reader-random-section .random-picked-card{min-height:100% !important;}
}
@media  (min-width:761px) and (max-width:1180px){
  body[data-view-mode="read"] .reader-random-section .randomizer{grid-template-columns:minmax(360px,1fr) minmax(300px,.92fr) !important;gap:7px 11px !important;}
  body[data-view-mode="read"] .reader-random-section .random-options label{font-size:.64rem !important;}
}

@media  (min-width:1081px){
  
}
@media  (min-width:1400px){
  
  
  
}
@media  (min-width:1081px){
  header .language-choice{padding-inline:6px !important;gap:4px !important;}
  header .language-choice > span{display:inline-block !important;min-width:1.35em !important;white-space:nowrap !important;}
}
@media  (min-width:761px){
  body[data-view-mode="edit"] .desktop-inline-note{background:color-mix(in srgb,var(--edit-slot-bg,#fff) 32%,#fff 68%) !important;}
  body[data-view-mode="edit"] .desktop-inline-note textarea{background:rgba(255,255,255,.42) !important;color:#2f282c !important;}
  body[data-view-mode="edit"] .desktop-inline-note textarea::placeholder{color:rgba(47,40,44,.62) !important;}
}
body[data-view-mode="edit"] .individual-slot-note-panel textarea{color:#2f282c !important;}
body[data-view-mode="edit"] .individual-slot-note-panel textarea::placeholder{color:rgba(47,40,44,.62) !important;}
:root{--result-limit-accent:#a63d55;--result-limit-border:#7e263c;--result-limit-panel-top:#d9a2b0;--result-limit-panel-bottom:#c78395;--result-later-accent:#a65b2f;--result-later-border:#7d3e20;--result-later-panel-top:#ddb083;--result-later-panel-bottom:#c98b5f;--result-fantasy-accent:#456ca8;--result-fantasy-border:#304f7e;--result-fantasy-panel-top:#b4c8e5;--result-fantasy-panel-bottom:#91acd2;--result-compatible-accent:#b88618;--result-compatible-border:#7d5c0e;--result-compatible-panel-top:#e8d17b;--result-compatible-panel-bottom:#d8b94d;--result-strong-accent:#347c3e;--result-strong-border:#225a2b;--result-strong-panel-top:#b8d77c;--result-strong-panel-bottom:#92c260;--result-excellent-accent:#174f32;--result-excellent-border:#103823;--result-excellent-panel-top:#84b88f;--result-excellent-panel-bottom:#5e9972;}
body[data-view-mode="edit"] .individual-practice-card[data-result-key="excellent"]{background:linear-gradient(180deg,var(--result-excellent-panel-top) 0%,var(--result-excellent-panel-bottom) 100%) !important;}
body[data-view-mode="edit"] .individual-practice-card[data-result-key="strong"]{background:linear-gradient(180deg,var(--result-strong-panel-top) 0%,var(--result-strong-panel-bottom) 100%) !important;}
body[data-view-mode="edit"] .individual-practice-card[data-result-key="compatible"]{background:linear-gradient(180deg,var(--result-compatible-panel-top) 0%,var(--result-compatible-panel-bottom) 100%) !important;}
body[data-view-mode="edit"] .individual-practice-card[data-result-key="later"]{background:linear-gradient(180deg,var(--result-later-panel-top) 0%,var(--result-later-panel-bottom) 100%) !important;}
body[data-view-mode="edit"] .individual-practice-card[data-result-key="fantasy"]{background:linear-gradient(180deg,var(--result-fantasy-panel-top) 0%,var(--result-fantasy-panel-bottom) 100%) !important;}
body[data-view-mode="edit"] .individual-practice-card[data-result-key="limit"]{background:linear-gradient(180deg,var(--result-limit-panel-top) 0%,var(--result-limit-panel-bottom) 100%) !important;}
.score-btn[data-score="3"].selected{box-shadow:inset 0 0 0 2px rgba(255,255,255,.22),0 0 0 1px var(--result-strong-border) !important;}
.score-btn[data-score="4"].selected{box-shadow:inset 0 0 0 2px rgba(255,255,255,.18),0 0 0 2px var(--result-excellent-border) !important;}
@media  (min-width:761px){
  body[data-view-mode="edit"] .desktop-editor-table-head{color:#fbf8f4 !important;position:sticky;}
  body[data-view-mode="edit"] .desktop-editor-table-head::before{content:"";position:absolute;left:0;right:0;top:0;pointer-events:none;}
  body[data-view-mode="edit"] .desktop-editor-table-head > span{letter-spacing:.01em !important;text-shadow:0 1px 0 rgba(0,0,0,.18) !important;}
  body[data-view-mode="edit"] .desktop-editor-table-head > span:first-child{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0) 45%),
      linear-gradient(135deg,#463d47 0%,#342c35 52%,#282229 100%) !important;box-shadow:4px 0 10px rgba(0,0,0,.16) !important;}
  body[data-view-mode="edit"] .individual-category-head{gap:8px !important;border:1px solid color-mix(in srgb,var(--theme-line) 72%,rgba(92,72,82,.22) 28%) !important;}
  body[data-view-mode="edit"] .individual-category-head strong{font-weight:900 !important;color:color-mix(in srgb,var(--dominant-dark) 88%,#241b21 12%) !important;}
  body[data-view-mode="edit"] .individual-category-head .section-dot{filter:drop-shadow(0 1px 0 rgba(255,255,255,.26));}
  body[data-view-mode="edit"] .individual-category-head > span:nth-of-type(2){padding:2px 7px !important;border:1px solid rgba(82,62,70,.12) !important;background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(247,242,235,.92)) !important;color:#5a4a52 !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.78) !important;}
  
  
}
@media  (min-width:1081px){
  header .top{width:100% !important;}
  
  
  
  
  
  
  
  
  
  
  
}
@media  (min-width:1400px){
  
  
}
@media  (min-width:761px){
  body[data-view-mode="edit"] .desktop-editor-table-head{min-height:40px !important;border:1px solid rgba(49,40,46,.94) !important;border-bottom-color:rgba(33,27,31,.94) !important;background:linear-gradient(180deg,#3d353c 0%,#30292f 58%,#292329 100%) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.09),
      0 5px 14px rgba(22,15,19,.13) !important;overflow:hidden !important;}
  body[data-view-mode="edit"] .desktop-editor-table-head::before{height:1px !important;background:linear-gradient(90deg,transparent 0%,rgba(239,222,180,.42) 18%,rgba(255,255,255,.12) 50%,rgba(239,222,180,.30) 82%,transparent 100%) !important;}
  body[data-view-mode="edit"] .desktop-editor-table-head > span{padding:7px 10px !important;border-right:1px solid rgba(255,255,255,.09) !important;font-size:.68rem !important;font-weight:900 !important;}
  body[data-view-mode="edit"] .individual-category-head{min-height:33px !important;padding:5px 10px !important;border-color:color-mix(in srgb,var(--theme-line) 74%,#d8d0c9 26%) !important;background:linear-gradient(180deg,
      color-mix(in srgb,var(--theme-category-start) 42%,#fff 58%) 0%,
      color-mix(in srgb,var(--theme-category-end) 54%,#fff 46%) 100%) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.68),0 2px 6px rgba(31,22,27,.055) !important;}
  body[data-view-mode="edit"] .individual-category-head strong{font-size:.78rem !important;letter-spacing:.005em !important;text-shadow:none !important;}
  
  
  
  body[data-view-mode="edit"] .individual-category-cards{border-radius:0 0 10px 10px !important;}
}
@media  (min-width:761px){
  body[data-view-mode="read"] .display-filter-section{display:grid !important;grid-template-columns:minmax(0,1fr) !important;align-items:start !important;gap:10px !important;}
  body[data-view-mode="read"] .display-filter-section > h2{margin-bottom:0 !important;}
  body[data-view-mode="read"] .display-filter-section .semantic-legend{display:grid !important;grid-template-columns:minmax(320px,.92fr) minmax(360px,1.08fr) !important;grid-auto-rows:min-content !important;align-items:start !important;gap:8px 14px !important;width:100% !important;}
  body[data-view-mode="read"] .display-filter-section .semantic-legend > strong{grid-column:1 / -1 !important;margin:0 !important;font-size:1rem !important;}
  body[data-view-mode="read"] .display-filter-section .semantic-legend-item{grid-column:1 !important;min-height:36px !important;}
  body[data-view-mode="read"] .display-filter-section .legend-help{grid-column:1 !important;margin-top:2px !important;align-self:start !important;}
  body[data-view-mode="read"] .display-filter-section .reading-legend-card{grid-column:2 !important;grid-row:2 / span 10 !important;align-self:stretch !important;display:flex !important;flex-direction:column !important;gap:7px !important;min-height:100% !important;margin:0 !important;padding:10px 11px !important;border:1px solid color-mix(in srgb,var(--theme-line) 50%,transparent) !important;border-radius:11px !important;background:color-mix(in srgb,var(--theme-panel-2) 88%,white) !important;}
  body[data-view-mode="read"] .display-filter-section .reading-legend-results{gap:4px !important;padding:8px 10px !important;}
  body[data-view-mode="read"] .display-filter-section .reading-legend-line{font-size:.94rem !important;line-height:1.38 !important;}
  body[data-view-mode="read"] .display-filter-section .reading-legend-subtitle,
  body[data-view-mode="read"] .display-filter-section .reading-legend-pin{margin-top:6px !important;padding-top:7px !important;}
}
@media  (min-width:761px) and (max-width:1180px){
  body[data-view-mode="read"] .display-filter-section .semantic-legend{grid-template-columns:minmax(280px,.95fr) minmax(300px,1.05fr) !important;gap:8px 12px !important;}
  body[data-view-mode="read"] .display-filter-section .reading-legend-line{font-size:.87rem !important;}
}
@media  (min-width:761px){
  body[data-view-mode="edit"] .individual-editor-list{gap:0 !important;}
  body[data-view-mode="edit"] .desktop-editor-table-head{margin:0 !important;z-index:46 !important;border-radius:12px 12px 0 0 !important;}
  body[data-view-mode="edit"] .desktop-editor-table-head + .individual-category{margin-top:0 !important;position:relative !important;}
  body[data-view-mode="edit"] .desktop-editor-table-head + .individual-category .individual-category-head{border-top:0 !important;border-radius:0 0 10px 10px !important;overflow:hidden !important;background-clip:padding-box !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.58),
      0 2px 5px rgba(31,22,27,.045) !important;}
  body[data-view-mode="edit"] .desktop-editor-table-head + .individual-category .individual-category-head::after{display:none !important;}
  
  body[data-view-mode="edit"] .desktop-editor-table-head + .individual-category .individual-category-cards{margin-top:0 !important;border-top:0 !important;border-radius:0 0 10px 10px !important;overflow:hidden !important;box-shadow:0 8px 18px rgba(25,15,20,.06) !important;}
  body[data-view-mode="edit"] .desktop-editor-table-head + .individual-category .individual-category-cards > .individual-practice-card:first-child{margin-top:0 !important;}
}
.couple-reader-list{--reader-results-width:168px;}
.couple-result-head{gap:5px;}
.couple-result-head > span{padding-top:1px;padding-bottom:1px;}
.couple-practice-row,
.couple-group-variant-row{gap:8px;}
.couple-result-grid{gap:7px;}
.couple-result-cell{position:relative;overflow:hidden;min-height:58px;padding:6px 4px 5px;border:1px solid color-mix(in srgb,var(--result-border) 82%,rgba(32,24,29,.30) 18%);border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0) 34%),
    linear-gradient(180deg,color-mix(in srgb,var(--result-bg) 86%,white 14%) 0%,var(--result-bg) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 -1px 0 rgba(0,0,0,.04),
    0 1px 2px rgba(26,18,22,.10);}
.couple-result-cell::before{content:"";position:absolute;left:1px;right:1px;top:1px;height:34%;border-radius:11px 11px 18px 18px;background:linear-gradient(180deg,rgba(255,255,255,.20),rgba(255,255,255,0));pointer-events:none;}
.couple-result-emoji{position:relative;z-index:1;font-size:1.34rem;line-height:1;filter:drop-shadow(0 1px 0 rgba(255,255,255,.20));}
.couple-result-tick{position:relative;z-index:1;margin-top:5px;min-width:34px;min-height:17px;padding:0 6px;border:1px solid rgba(38,30,35,.16);border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(244,241,238,.94));color:#443d41;font-size:.61rem;font-weight:950;line-height:1;letter-spacing:.005em;box-shadow:inset 0 1px 0 rgba(255,255,255,.72),
    0 1px 2px rgba(34,24,31,.12);}
button.couple-result-tick:hover{background:linear-gradient(180deg,#ffffff,#f7f4ef);border-color:rgba(44,34,42,.28);}
.couple-before-tick,
.couple-together-tick{min-height:17px;max-height:17px;padding:0 6px;gap:2px;border-width:1px;border-radius:999px;font-size:.50rem;font-weight:950;letter-spacing:.01em;color:#464044;background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(244,241,238,.94));box-shadow:inset 0 1px 0 rgba(255,255,255,.78),
    0 1px 2px rgba(37,24,31,.10);}
.couple-together-tick.is-done,
.couple-before-tick.is-done{color:#fff;border-color:#244e2f;background:linear-gradient(180deg,#5c8c67 0%,#376545 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),
    0 1px 2px rgba(32,72,39,.20);}
.couple-result-cell[data-score="excellent"],
.couple-result-cell[data-score="strong"],
.couple-result-cell[data-score="compatible"],
.couple-result-cell[data-score="later"],
.couple-result-cell[data-score="fantasy"],
.couple-result-cell[data-score="limit"]{backdrop-filter:saturate(1.02);}
@media  (min-width:761px){
  
  .couple-result-head b{font-size:.62rem;}
  .couple-result-head small{font-size:.50rem;}
}
@media (max-width:760px){
  .couple-reader-list{--reader-results-width:132px;}
  .couple-practice-row,
  .couple-group-variant-row{gap:5px;}
  .couple-result-grid{gap:4px;}
  .couple-result-cell{min-height:51px;padding:4px 2px 4px;border-radius:10px;}
  .couple-result-cell::before{border-radius:9px 9px 14px 14px;}
  .couple-result-emoji{font-size:1.16rem;}
  .couple-result-tick{margin-top:4px;min-width:28px;min-height:16px;padding:0 4px;font-size:.55rem;}
  .couple-before-tick,
  .couple-together-tick{min-height:16px;max-height:16px;padding:0 4px;font-size:.46rem;}
}
@media (max-width:370px){
  .couple-reader-list{--reader-results-width:118px;}
  .couple-result-cell{min-height:47px;}
  .couple-result-emoji{font-size:1.06rem;}
  .couple-result-tick{min-width:24px;font-size:.50rem;}
  .couple-before-tick,
  .couple-together-tick{font-size:.43rem;}
}

@media (max-width:760px){
  body[data-view-mode="read"] .couple-practice-row,
  body[data-view-mode="read"] .couple-group-variant-row{grid-template-columns:var(--reader-rail-width) minmax(0,1fr) var(--reader-results-width) !important;grid-auto-rows:auto !important;}
  body[data-view-mode="read"] .couple-practice-copy{grid-column:2 !important;grid-row:1 !important;}
  body[data-view-mode="read"] .couple-result-grid{grid-column:3 !important;grid-row:1 !important;}
  
  
}

/* ========================================================================== 
   DESKTOP READING — CANONICAL LAYOUT
   One desktop source of truth. Header/category/rows are aligned by the same
   grid variables. Mobile remains governed by the existing <=760px rules.
   ========================================================================== */
@media (min-width:761px){
  body[data-view-mode="read"] main{
    --reader-head-h:40px;
    --read-category-sticky-top:var(--reader-head-h) !important;
    overflow-x:hidden !important;
  }

  body[data-view-mode="read"] .couple-reader{
    width:min(1660px,calc(100% - 12px)) !important;
    max-width:none !important;
    margin:8px auto 28px !important;
    padding:8px !important;
    overflow:visible !important;
    border:1px solid color-mix(in srgb,var(--dominant-color) 34%,#fff 66%) !important;
    border-radius:14px !important;
    background:color-mix(in srgb,var(--dominant-soft) 84%,var(--dominant-color) 16%) !important;
    box-shadow:0 10px 30px rgba(24,14,19,.08) !important;
  }

  body[data-view-mode="read"] .couple-reader-list{
    --reader-rail:44px;
    --reader-results:210px;
    --reader-notes:clamp(320px,32vw,520px);
    --reader-grid:var(--reader-rail) minmax(280px,1fr) var(--reader-results) var(--reader-notes);
    display:flex !important;
    flex-direction:column !important;
    gap:0 !important;
    width:100% !important;
    min-width:0 !important;
  }

  /* ---------- Shared geometry ---------- */
  body[data-view-mode="read"] .desktop-reader-table-head,
  body[data-view-mode="read"] .couple-reader-row{
    display:grid !important;
    grid-template-columns:var(--reader-grid) !important;
    width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }

  /* ---------- Header ---------- */
  body[data-view-mode="read"] .desktop-reader-table-head{
    position:sticky !important;
    top:0 !important;
    z-index:50 !important;
    height:var(--reader-head-h) !important;
    min-height:var(--reader-head-h) !important;
    max-height:var(--reader-head-h) !important;
    margin:0 !important;
    overflow:hidden !important;
    border:1px solid rgba(43,34,40,.96) !important;
    border-bottom-color:rgba(55,43,50,.92) !important;
    border-radius:14px 14px 0 0 !important;
    background:linear-gradient(180deg,#3a3339 0%,#2d282d 100%) !important;
    background-clip:padding-box !important;
    color:#fbf7f1 !important;
    box-shadow:0 2px 7px rgba(21,14,18,.10) !important;
    isolation:isolate !important;
  }
  body[data-view-mode="read"] .desktop-reader-table-head > span:first-child{
    border-top-left-radius:13px !important;
  }
  body[data-view-mode="read"] .desktop-reader-table-head > span:last-child{
    border-top-right-radius:13px !important;
  }
  body[data-view-mode="read"] .desktop-reader-table-head::before,
  body[data-view-mode="read"] .desktop-reader-table-head::after{display:none !important;content:none !important;}
  body[data-view-mode="read"] .desktop-reader-table-head>span{
    min-width:0 !important;
    height:100% !important;
    box-sizing:border-box !important;
    border-right:1px solid rgba(255,255,255,.09) !important;
    color:#fbf7f1 !important;
    font-weight:900 !important;
    line-height:1 !important;
  }
  body[data-view-mode="read"] .desktop-reader-table-head>span:last-child{border-right:0 !important;}

  body[data-view-mode="read"] .desktop-reader-practice-head{
    grid-column:1 / 3 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    padding:0 14px !important;
    font-size:.69rem !important;
  }

  body[data-view-mode="read"] .desktop-reader-results-head{
    grid-column:3 !important;
    display:grid !important;
    grid-template-columns:repeat(3,52px) !important;
    justify-content:center !important;
    align-items:center !important;
    column-gap:9px !important;
    padding:0 8px !important;
  }
  body[data-view-mode="read"] .desktop-reader-results-title{display:none !important;}
  body[data-view-mode="read"] .desktop-reader-results-head>b{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:52px !important;
    min-width:52px !important;
    max-width:52px !important;
    min-height:20px !important;
    padding:0 4px !important;
    border:1px solid rgba(255,255,255,.11) !important;
    border-radius:999px !important;
    background:rgba(255,255,255,.045) !important;
    color:#f7f2ec !important;
    font-size:.48rem !important;
    font-weight:850 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    box-sizing:border-box !important;
  }

  body[data-view-mode="read"] .desktop-reader-notes-head{
    grid-column:4 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    padding:0 14px !important;
    font-size:.69rem !important;
  }

  /* ---------- Categories / sticky shield ---------- */
  body[data-view-mode="read"] .couple-reader-category{
    position:relative !important;
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    scroll-margin-top:calc(var(--reader-head-h) + 8px) !important;
    overflow:visible !important;
    border:0 !important;
    border-radius:9px !important;
    background:transparent !important;
    box-shadow:none !important;
  }
  body[data-view-mode="read"] .desktop-reader-table-head + .couple-reader-category{margin-top:0 !important;}
  body[data-view-mode="read"] .couple-reader-category + .couple-reader-category{margin-top:6px !important;}
  body[data-view-mode="read"] .couple-reader-category-head{
    
    
    
    display:grid !important;
    grid-template-columns:auto minmax(0,1fr) auto !important;
    align-items:center !important;
    gap:6px !important;
    width:100% !important;
    min-width:0 !important;
    min-height:32px !important;
    margin:0 !important;
    padding:5px 8px !important;
    box-sizing:border-box !important;
    border:1px solid var(--theme-line) !important;
    border-radius:8px 8px 0 0 !important;
    background:linear-gradient(90deg,var(--theme-category-start) 0%,var(--theme-category-end) 100%) !important;
    color:var(--theme-ink) !important;
    text-align:left !important;
    cursor:pointer !important;
    isolation:isolate !important;
    box-shadow:0 2px 8px rgba(26,15,20,.08) !important;
  }
  body[data-view-mode="read"] .couple-reader-category-head .couple-result-head{display:none !important;}
  body[data-view-mode="read"] .couple-reader-category-head > strong{
    min-width:0 !important;
    font-size:.78rem !important;
    line-height:1.1 !important;
    color:var(--dominant-dark) !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  body[data-view-mode="read"] .couple-reader-category-count{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:1px 5px !important;
    border-radius:999px !important;
    background:var(--readability-chip-bg) !important;
    color:var(--readability-ink) !important;
    font-size:.62rem !important;
    font-weight:800 !important;
    line-height:1 !important;
    white-space:nowrap !important;
  }
  
  
  
  
  
  body[data-view-mode="read"] .desktop-reader-table-head + .couple-reader-category .couple-reader-category-head{
    border-top:0 !important;
    border-left:1px solid var(--theme-line) !important;
    border-right:1px solid var(--theme-line) !important;
    border-bottom:1px solid var(--theme-line) !important;
    border-radius:0 0 10px 10px !important;
    box-shadow:none !important;
  }
  
  body[data-view-mode="read"] .desktop-reader-table-head + .couple-reader-category .couple-reader-category-body{
    border-radius:0 0 10px 10px !important;
  }
  body[data-view-mode="read"] .couple-reader-category-body{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    border-left:1px solid var(--theme-line) !important;
    border-right:1px solid var(--theme-line) !important;
    border-bottom:1px solid var(--theme-line) !important;
    border-radius:0 0 9px 9px !important;
    background:var(--theme-panel) !important;
    box-shadow:0 2px 7px rgba(26,15,20,.06) !important;
  }

  /* ---------- Rows ---------- */
  body[data-view-mode="read"] .couple-practice,
  body[data-view-mode="read"] .couple-practice.couple-practice-grouped{
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    overflow:visible !important;
    border:0 !important;
    border-radius:0 !important;
    background:var(--result-panel,#fff) !important;
    box-shadow:none !important;
  }
  /* Parent wrappers never draw separators. Every visible row owns exactly one separator. */
  body[data-view-mode="read"] .couple-practice + .couple-practice,
  body[data-view-mode="read"] .couple-group-variant-block + .couple-group-variant-block{
    border-top:0 !important;
  }
  body[data-view-mode="read"] .couple-group-variants{display:block !important;}
  body[data-view-mode="read"] .couple-practice.couple-practice-grouped{
    background:transparent !important;
  }
  body[data-view-mode="read"] .couple-group-variant-block,
  body[data-view-mode="read"] .couple-group-variant-block[data-result]{
    border:0 !important;
    background:var(--result-panel,#fff) !important;
    box-shadow:none !important;
  }

  body[data-view-mode="read"] .couple-reader-row{
    grid-template-areas:"rail copy results notes" !important;
    align-items:stretch !important;
    gap:0 !important;
    min-height:58px !important;
    padding:0 !important;
    border:0 !important;
    border-bottom:1px solid color-mix(in srgb,var(--result-border,#6d7f59) 72%,var(--theme-line,#66705a) 28%) !important;
    background:transparent !important;
    box-shadow:none !important;
    box-sizing:border-box !important;
  }

  body[data-view-mode="read"] .couple-reader-category-body > .couple-practice:last-child:not(.couple-practice-grouped) .couple-practice-row:last-child,
  body[data-view-mode="read"] .couple-reader-category-body > .couple-practice:last-child.couple-practice-grouped .couple-group-variant-block:last-child .couple-group-variant-row{
    border-bottom:0 !important;
  }

  body[data-view-mode="read"] .couple-practice-rail{
    grid-area:rail !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:3px !important;
    min-width:0 !important;
    padding:5px 4px !important;
    border-right:1px solid rgba(83,71,76,.08) !important;
    background:rgba(255,255,255,.08) !important;
  }
  body[data-view-mode="read"] .couple-reader-pin{
    width:29px !important;min-width:29px !important;height:29px !important;min-height:29px !important;
    border-radius:8px !important;background:rgba(255,252,247,.92) !important;
  }
  body[data-view-mode="read"] .couple-reader-risk .risk-badge{transform:scale(.78) !important;transform-origin:center !important;}

  body[data-view-mode="read"] .couple-practice-copy{
    grid-area:copy !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    min-width:0 !important;
    min-height:100% !important;
    margin:0 !important;
    padding:7px 11px !important;
    border-right:1px solid rgba(83,71,76,.07) !important;
    background:transparent !important;
    box-shadow:none !important;
  }
  body[data-view-mode="read"] .couple-practice-title-line{
    display:flex !important;align-items:center !important;min-width:0 !important;margin:0 !important;padding:0 !important;
    border:0 !important;background:transparent !important;box-shadow:none !important;
  }
  body[data-view-mode="read"] .couple-practice-title-line strong{
    min-width:0 !important;font-size:.80rem !important;line-height:1.14 !important;white-space:normal !important;overflow-wrap:anywhere !important;
  }
  body[data-view-mode="read"] .couple-practice-description{
    display:block !important;min-width:0 !important;margin:3px 0 0 !important;padding:0 !important;border:0 !important;
    background:transparent !important;color:var(--result-copy-muted,#3b3f42) !important;font-size:.59rem !important;line-height:1.28 !important;overflow-wrap:anywhere !important;
  }

  /* ---------- Results: compact icon tokens ---------- */
  body[data-view-mode="read"] .couple-result-grid{
    grid-area:results !important;
    display:grid !important;
    grid-template-columns:repeat(3,52px) !important;
    justify-content:center !important;
    align-content:center !important;
    column-gap:9px !important;
    row-gap:0 !important;
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:4px 8px !important;
    border-right:1px solid rgba(83,71,76,.07) !important;
    background:rgba(255,255,255,.018) !important;
    box-sizing:border-box !important;
  }
  body[data-view-mode="read"] .couple-result-cell,
  body[data-view-mode="read"] .couple-result-cell[data-result-key]{
    --reader-icon-accent:#d9dde1;--reader-icon-border:#aeb5bb;
    display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:center !important;
    gap:2px !important;width:52px !important;min-width:52px !important;min-height:48px !important;padding:0 !important;
    overflow:visible !important;border:0 !important;border-radius:0 !important;background:transparent !important;box-shadow:none !important;
  }
  body[data-view-mode="read"] .couple-result-cell::before{display:none !important;content:none !important;}
  body[data-view-mode="read"] .couple-result-cell[data-result-key="excellent"]{--reader-icon-accent:var(--result-excellent-accent);--reader-icon-border:var(--result-excellent-border);}
  body[data-view-mode="read"] .couple-result-cell[data-result-key="strong"]{--reader-icon-accent:var(--result-strong-accent);--reader-icon-border:var(--result-strong-border);}
  body[data-view-mode="read"] .couple-result-cell[data-result-key="compatible"]{--reader-icon-accent:var(--result-compatible-accent);--reader-icon-border:var(--result-compatible-border);}
  body[data-view-mode="read"] .couple-result-cell[data-result-key="later"]{--reader-icon-accent:var(--result-later-accent);--reader-icon-border:var(--result-later-border);}
  body[data-view-mode="read"] .couple-result-cell[data-result-key="fantasy"]{--reader-icon-accent:var(--result-fantasy-accent);--reader-icon-border:var(--result-fantasy-border);}
  body[data-view-mode="read"] .couple-result-cell[data-result-key="limit"]{--reader-icon-accent:var(--result-limit-accent);--reader-icon-border:var(--result-limit-border);}
  body[data-view-mode="read"] .couple-result-cell[data-result-key="incomplete"]{--reader-icon-accent:var(--result-incomplete-accent);--reader-icon-border:var(--result-incomplete-border);}
  body[data-view-mode="read"] .couple-result-emoji{
    display:flex !important;align-items:center !important;justify-content:center !important;
    width:32px !important;min-width:32px !important;height:32px !important;min-height:32px !important;
    border:1px solid var(--reader-icon-border) !important;border-radius:9px !important;
    background:linear-gradient(180deg,color-mix(in srgb,var(--reader-icon-accent) 80%,#fff 20%),var(--reader-icon-accent)) !important;
    font-size:.98rem !important;line-height:1 !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.20),0 1px 3px rgba(33,23,28,.09) !important;
  }
  body[data-view-mode="read"] .couple-result-tick{
    margin:0 !important;min-width:31px !important;min-height:15px !important;padding:0 5px !important;
    border:1px solid rgba(53,43,49,.14) !important;border-radius:999px !important;
    background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(245,241,237,.94)) !important;
    color:#443d41 !important;font-size:.46rem !important;font-weight:950 !important;box-shadow:0 1px 1px rgba(36,25,31,.06) !important;
  }
  body[data-view-mode="read"] .couple-before-tick.is-done,
  body[data-view-mode="read"] .couple-together-tick.is-done{
    border-color:#315f39 !important;background:linear-gradient(180deg,#5b875f 0%,#386b42 100%) !important;color:#fff !important;
  }

  
  
  
  
  
  
  
  
  
}

@media (min-width:761px) and (max-width:1100px){
  body[data-view-mode="read"] .couple-reader-list{
    --reader-rail:42px;
    --reader-results:190px;
    --reader-notes:clamp(270px,31vw,350px);
    --reader-grid:var(--reader-rail) minmax(230px,1fr) var(--reader-results) var(--reader-notes);
  }
  body[data-view-mode="read"] .desktop-reader-results-head,
  body[data-view-mode="read"] .couple-result-grid{
    grid-template-columns:repeat(3,48px) !important;
    column-gap:7px !important;
  }
  body[data-view-mode="read"] .desktop-reader-results-head>b,
  body[data-view-mode="read"] .couple-result-cell,
  body[data-view-mode="read"] .couple-result-cell[data-result-key]{
    width:48px !important;min-width:48px !important;max-width:48px !important;
  }
  body[data-view-mode="read"] .desktop-reader-results-head>b{font-size:.44rem !important;}
  
}


/* =====================================================================
   Reader desktop layout — canonical geometry
   Single clean structure for header/category/rows on desktop reading mode.
   ===================================================================== */
@media (min-width:761px){
  body[data-view-mode="read"] .couple-reader{
    border-radius:16px !important;
    overflow:visible !important;
  }

  body[data-view-mode="read"] .couple-reader-list{
    --reader-rail:44px;
    --reader-results:225px;
    --reader-notes:clamp(300px,29vw,420px);
    --reader-grid:var(--reader-rail) minmax(340px,1fr) var(--reader-results) var(--reader-notes);
    gap:0 !important;
  }

  body[data-view-mode="read"] .desktop-reader-table-head{
    display:grid !important;
    grid-template-columns:var(--reader-grid) !important;
    align-items:stretch !important;
    position:sticky !important;
    top:0 !important;
    z-index:60 !important;
    margin:0 !important;
    min-height:42px !important;
    height:42px !important;
    overflow:hidden !important;
    border:1px solid rgba(47,39,45,.96) !important;
    border-bottom:0 !important;
    border-radius:14px 14px 0 0 !important;
    background:linear-gradient(180deg,#3b353b 0%,#2d282d 100%) !important;
    box-shadow:0 4px 12px rgba(18,12,16,.10) !important;
  }
  body[data-view-mode="read"] .desktop-reader-table-head > span{
    display:flex !important;
    align-items:center !important;
    min-width:0 !important;
    height:100% !important;
    border-right:1px solid rgba(255,255,255,.08) !important;
    color:#f8f4ee !important;
    box-sizing:border-box !important;
  }
  body[data-view-mode="read"] .desktop-reader-table-head > span:last-child{border-right:0 !important;}
  body[data-view-mode="read"] .desktop-reader-practice-head{
    grid-column:1 / 3 !important;
    justify-content:flex-start !important;
    padding:0 14px !important;
    font-size:.78rem !important;
    font-weight:900 !important;
    letter-spacing:.01em !important;
  }
  body[data-view-mode="read"] .desktop-reader-results-head{
    grid-column:3 !important;
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    align-items:center !important;
    justify-items:center !important;
    gap:6px !important;
    padding:0 10px !important;
  }
  body[data-view-mode="read"] .desktop-reader-results-title{display:none !important;}
  body[data-view-mode="read"] .desktop-reader-results-head b{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-width:0 !important;
    width:100% !important;
    max-width:62px !important;
    padding:2px 7px !important;
    border-radius:999px !important;
    border:1px solid rgba(255,255,255,.12) !important;
    background:rgba(255,255,255,.05) !important;
    color:#f7f2ec !important;
    font-size:.56rem !important;
    font-weight:850 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  body[data-view-mode="read"] .desktop-reader-notes-head{
    grid-column:4 !important;
    justify-content:flex-start !important;
    padding:0 14px !important;
    font-size:.78rem !important;
    font-weight:900 !important;
    letter-spacing:.01em !important;
  }

  body[data-view-mode="read"] .desktop-reader-table-head + .couple-reader-category{margin-top:0 !important;}
  body[data-view-mode="read"] .desktop-reader-table-head + .couple-reader-category .couple-reader-category-head{
    
    border-top:1px solid rgba(47,39,45,.18) !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }
  body[data-view-mode="read"] .couple-reader-category{
    margin:0 !important;
    border:0 !important;
    background:transparent !important;
  }
  body[data-view-mode="read"] .couple-reader-category + .couple-reader-category{margin-top:8px !important;}
  body[data-view-mode="read"] .couple-reader-category-head{
    
    
    
    min-height:34px !important;
    padding:6px 10px !important;
    border:1px solid rgba(116,98,68,.26) !important;
    border-bottom:1px solid rgba(116,98,68,.26) !important;
    border-radius:0 !important;
    background:linear-gradient(180deg,rgba(255,250,244,.98),rgba(249,243,233,.98)) !important;
    box-shadow:0 1px 0 rgba(255,255,255,.75) inset !important;
  }
  
  body[data-view-mode="read"] .couple-reader-category-head > strong{
    font-size:.82rem !important;
    font-weight:900 !important;
    color:#59492e !important;
  }
  body[data-view-mode="read"] .couple-reader-category-head .couple-reader-category-chevron{
    color:#7a6642 !important;
    font-size:.76rem !important;
    line-height:1 !important;
  }
  body[data-view-mode="read"] .couple-reader-category-count{
    min-width:24px !important;
    padding:2px 7px !important;
    background:#fffaf4 !important;
    border:1px solid rgba(116,98,68,.18) !important;
    color:#6f603f !important;
    font-size:.64rem !important;
  }
  body[data-view-mode="read"] .couple-reader-category-body{
    border:1px solid rgba(116,98,68,.22) !important;
    border-top:0 !important;
    border-radius:0 0 12px 12px !important;
    overflow:hidden !important;
    background:rgba(255,255,255,.20) !important;
    box-shadow:none !important;
  }

  body[data-view-mode="read"] .couple-reader-row{
    display:grid !important;
    grid-template-columns:var(--reader-grid) !important;
    grid-template-areas:"rail copy results notes" !important;
    align-items:stretch !important;
    min-height:66px !important;
    border-bottom:1px solid color-mix(in srgb,var(--result-border,#7d8d66) 70%,rgba(79,89,68,.34) 30%) !important;
    background:transparent !important;
  }
  body[data-view-mode="read"] .couple-practice-rail{
    grid-area:rail !important;
    padding:7px 5px !important;
    gap:4px !important;
    border-right:1px solid rgba(83,71,76,.08) !important;
    background:rgba(255,255,255,.06) !important;
  }
  body[data-view-mode="read"] .couple-practice-copy{
    grid-area:copy !important;
    padding:10px 14px !important;
    border-right:1px solid rgba(83,71,76,.06) !important;
  }
  body[data-view-mode="read"] .couple-practice-title-line strong{
    font-size:.88rem !important;
    line-height:1.16 !important;
    color:#2f2a2d !important;
  }
  body[data-view-mode="read"] .couple-practice-description{
    margin-top:4px !important;
    font-size:.64rem !important;
    line-height:1.34 !important;
    color:rgba(45,42,45,.72) !important;
  }
  body[data-view-mode="read"] .couple-result-grid{
    grid-area:results !important;
    grid-template-columns:repeat(3,56px) !important;
    justify-content:center !important;
    align-content:center !important;
    gap:8px !important;
    padding:6px 12px !important;
    border-right:1px solid rgba(83,71,76,.06) !important;
    background:rgba(255,255,255,.025) !important;
  }
  body[data-view-mode="read"] .couple-result-cell,
  body[data-view-mode="read"] .couple-result-cell[data-result-key]{
    width:56px !important;
    min-width:56px !important;
    min-height:50px !important;
    gap:3px !important;
  }
  body[data-view-mode="read"] .couple-result-emoji{
    width:34px !important;
    min-width:34px !important;
    height:34px !important;
    min-height:34px !important;
    border-radius:10px !important;
    font-size:1rem !important;
  }
  body[data-view-mode="read"] .couple-result-tick{
    min-width:34px !important;
    min-height:16px !important;
    padding:0 6px !important;
    font-size:.48rem !important;
  }
  
  
  
  
  
  body[data-view-mode="read"] .couple-reader-category:last-child .couple-reader-category-body{
    border-bottom-left-radius:12px !important;
    border-bottom-right-radius:12px !important;
  }
}
@media (min-width:761px) and (max-width:1150px){
  body[data-view-mode="read"] .couple-reader-list{
    --reader-results:208px;
    --reader-notes:clamp(260px,27vw,340px);
    --reader-grid:var(--reader-rail) minmax(260px,1fr) var(--reader-results) var(--reader-notes);
  }
  body[data-view-mode="read"] .couple-result-grid{grid-template-columns:repeat(3,52px) !important;gap:6px !important;}
  body[data-view-mode="read"] .couple-result-cell,body[data-view-mode="read"] .couple-result-cell[data-result-key]{width:52px !important;min-width:52px !important;}
}


/* ========================================================================== 
   Edit desktop shell — canonical geometry
   The editor list owns the outer corners. Header/category/content no longer
   stack independent radii, which removes the left/right corner artifacts.
   ========================================================================== */
@media (min-width:761px){
  body[data-view-mode="edit"] .individual-editor-list{
    position:relative !important;
    gap:0 !important;
    overflow:hidden !important;
    border:1px solid color-mix(in srgb,var(--theme-line) 70%,rgba(55,43,50,.34) 30%) !important;
    border-radius:14px !important;
    background:var(--edit-theme-panel,var(--theme-panel,#fff)) !important;
    box-shadow:0 5px 16px rgba(25,16,21,.075) !important;
    box-sizing:border-box !important;
  }

  body[data-view-mode="edit"] .desktop-editor-table-head{
    width:100% !important;
    min-width:1318px !important;
    margin:0 !important;
    overflow:visible !important;
    border:0 !important;
    border-bottom:1px solid rgba(49,40,46,.94) !important;
    border-radius:0 !important;
    background:linear-gradient(180deg,#3d353c 0%,#30292f 58%,#292329 100%) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08) !important;
  }
  body[data-view-mode="edit"] .desktop-editor-table-head::before,
  body[data-view-mode="edit"] .desktop-editor-table-head::after{
    display:none !important;
    content:none !important;
  }
  body[data-view-mode="edit"] .desktop-editor-table-head > span,
  body[data-view-mode="edit"] .desktop-editor-table-head > span:first-child,
  body[data-view-mode="edit"] .desktop-editor-table-head > span:last-child{
    border-radius:0 !important;
  }
  body[data-view-mode="edit"] .desktop-editor-table-head > span:first-child{
    background:linear-gradient(180deg,#3d353c 0%,#30292f 58%,#292329 100%) !important;
    box-shadow:none !important;
  }

  /* The first category is part of the same shell as the table header. */
  body[data-view-mode="edit"] .desktop-editor-table-head + .individual-category{
    margin:0 !important;
    border:0 !important;
    border-radius:0 !important;
  }
  
  body[data-view-mode="edit"] .desktop-editor-table-head + .individual-category .individual-category-head::after{
    display:none !important;
    content:none !important;
  }
  body[data-view-mode="edit"] .desktop-editor-table-head + .individual-category .individual-category-cards{
    margin:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }

  /* Internal categories remain clean sections, but never protrude beyond shell. */
  body[data-view-mode="edit"] .individual-category{
    border-radius:0 !important;
  }
  body[data-view-mode="edit"] .individual-category + .individual-category{
    margin-top:0 !important;
    border-top:1px solid color-mix(in srgb,var(--theme-line) 58%,rgba(255,255,255,.32) 42%) !important;
  }
  
  body[data-view-mode="edit"] .individual-category-cards{
    border-radius:0 !important;
  }

  /* The shell clips both extreme sides so the header cannot show stray corners. */
  body[data-view-mode="edit"] .individual-editor-list > :first-child{
    border-top-left-radius:13px !important;
    border-top-right-radius:13px !important;
  }
  body[data-view-mode="edit"] .individual-editor-list > :last-child,
  body[data-view-mode="edit"] .individual-editor-list > :last-child .individual-category-cards{
    border-bottom-left-radius:13px !important;
    border-bottom-right-radius:13px !important;
  }
}


/* ========================================================================== 
   Edit notes — clear empty / filled / focus states
   ========================================================================== */
body[data-view-mode="edit"] :is(.desktop-inline-note textarea,.individual-slot-note-panel textarea){
  transition:background-color .14s ease,border-color .14s ease,box-shadow .14s ease,color .14s ease !important;
}

/* Empty note: clearly looks like an invitation to type. */
body[data-view-mode="edit"] :is(.desktop-inline-note textarea,.individual-slot-note-panel textarea):placeholder-shown{
  background:rgba(255,255,255,.20) !important;
  color:rgba(47,40,44,.58) !important;
  font-style:italic !important;
  font-weight:500 !important;
  box-shadow:inset 0 0 0 1px rgba(76,65,71,.08) !important;
}
body[data-view-mode="edit"] :is(.desktop-inline-note textarea,.individual-slot-note-panel textarea)::placeholder{
  color:rgba(47,40,44,.38) !important;
  font-style:italic !important;
  font-weight:500 !important;
  opacity:1 !important;
}

/* Filled note: reads as real content, not as placeholder text. */
body[data-view-mode="edit"] :is(.desktop-inline-note textarea,.individual-slot-note-panel textarea):not(:placeholder-shown){
  background:rgba(255,255,255,.76) !important;
  color:#211c1f !important;
  font-style:normal !important;
  font-weight:700 !important;
  box-shadow:
    inset 3px 0 0 color-mix(in srgb,var(--dominant-color,#6b5c94) 72%,#fff 28%),
    inset 0 0 0 1px rgba(53,44,49,.12) !important;
}

/* Active editing state. */
body[data-view-mode="edit"] :is(.desktop-inline-note textarea,.individual-slot-note-panel textarea):focus{
  background:#fffdf9 !important;
  color:#1d191b !important;
  font-style:normal !important;
  font-weight:700 !important;
  box-shadow:
    inset 0 0 0 2px color-mix(in srgb,var(--dominant-color,#6b5c94) 76%,#fff 24%),
    0 0 0 2px color-mix(in srgb,var(--dominant-soft,#ddd6ee) 58%,transparent 42%) !important;
  outline:none !important;
}

@media (min-width:761px){
  body[data-view-mode="edit"] .desktop-inline-note{
    background:rgba(255,255,255,.10) !important;
  }
  body[data-view-mode="edit"] .desktop-inline-note:has(textarea:not(:placeholder-shown)){
    background:rgba(255,255,255,.34) !important;
  }
  body[data-view-mode="edit"] .desktop-inline-note:focus-within{
    background:rgba(255,255,255,.50) !important;
    box-shadow:none !important;
  }
}


/* ========================================================================== 
   CANONICAL DESKTOP SHELL / SCROLL / HEADER / NOTES
   Single maintained implementation for the current HTML structure.
   ========================================================================== */

/* ---------- Clean top header (current HTML structure only) ---------- */
header .clean-header-row,
header .clean-header-controls,
header .clean-header-role,
header .clean-mode-switch,
header .clean-mode-button{
  box-sizing:border-box;
}

@media (min-width:761px){
  header .clean-header-row{
    display:grid !important;
    grid-template-columns:minmax(280px,1fr) max-content !important;
    align-items:center !important;
    column-gap:22px !important;
    width:100% !important;
    min-width:0 !important;
    margin:0 0 7px !important;
    padding:0 !important;
  }
  header .clean-header-title{
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    align-self:center !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  header .clean-header-controls{
    display:flex !important;
    flex-flow:row nowrap !important;
    align-items:center !important;
    justify-content:flex-end !important;
    justify-self:end !important;
    gap:8px !important;
    width:max-content !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
  }
  header .clean-header-role{
    flex:0 0 clamp(300px,29vw,450px) !important;
    width:clamp(300px,29vw,450px) !important;
    min-width:300px !important;
    height:38px !important;
    margin:0 !important;
    padding:0 !important;
  }
  header .clean-header-role > :is(.role-switch,.reader-header-ds){
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    height:38px !important;
    min-height:38px !important;
    margin:0 !important;
  }
  header .clean-header-controls > .language-switch{
    flex:0 0 104px !important;
    width:104px !important;
    min-width:104px !important;
    height:38px !important;
    min-height:38px !important;
    margin:0 !important;
  }
  header .clean-header-controls > .help-button{
    flex:0 0 40px !important;
    width:40px !important;
    min-width:40px !important;
    height:38px !important;
    min-height:38px !important;
    margin:0 !important;
    padding:0 !important;
  }

  /* Fresh mode switch: exactly two equal buttons, no third/blank area. */
  header .clean-header-controls > .clean-mode-switch{
    flex:0 0 320px !important;
    width:320px !important;
    min-width:320px !important;
    max-width:320px !important;
    height:38px !important;
    min-height:38px !important;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    align-items:stretch !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    border:1px solid rgba(255,255,255,.72) !important;
    border-radius:11px !important;
    background:rgba(255,255,255,.10) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.14) !important;
  }
  header .clean-mode-switch > .clean-mode-button{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:7px !important;
    width:100% !important;
    min-width:0 !important;
    height:36px !important;
    min-height:36px !important;
    margin:0 !important;
    padding:0 12px !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    color:#fff !important;
    font:inherit !important;
    font-size:.78rem !important;
    font-weight:900 !important;
    line-height:1 !important;
    cursor:pointer !important;
    box-shadow:none !important;
  }
  header .clean-mode-switch > .clean-mode-button + .clean-mode-button{
    border-left:1px solid rgba(255,255,255,.28) !important;
  }
  header .clean-mode-switch > .clean-mode-button[aria-pressed="true"],
  header .clean-mode-switch > .clean-mode-button.active{
    background:rgba(255,252,248,.97) !important;
    color:#2d282d !important;
  }
  header .clean-mode-switch .mode-icon{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:15px !important;
    height:15px !important;
    flex:0 0 15px !important;
  }
  header .clean-mode-switch .mode-icon svg{
    width:14px !important;
    height:14px !important;
    fill:none !important;
    stroke:currentColor !important;
    stroke-width:1.8 !important;
    stroke-linecap:round !important;
    stroke-linejoin:round !important;
  }
  header .clean-mode-switch .mode-label{
    display:block !important;
    min-width:0 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
}

@media (min-width:761px) and (max-width:1200px){
  header .clean-header-row{
    grid-template-columns:minmax(230px,1fr) max-content !important;
    column-gap:12px !important;
  }
  header .clean-header-role{
    flex-basis:250px !important;
    width:250px !important;
    min-width:250px !important;
  }
  header .clean-header-controls > .language-switch{
    flex-basis:88px !important;
    width:88px !important;
    min-width:88px !important;
  }
  header .clean-header-controls > .clean-mode-switch{
    flex-basis:280px !important;
    width:280px !important;
    min-width:280px !important;
    max-width:280px !important;
  }
}

@media (max-width:760px){
  header .clean-header-row{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:5px !important;
    width:100% !important;
    margin:0 0 5px !important;
    padding:0 !important;
  }
  header .clean-header-title{
    margin:0 !important;
    min-width:0 !important;
    font-size:12px !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  header .clean-header-controls{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 66px 34px !important;
    grid-template-rows:34px 34px !important;
    gap:3px !important;
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
  }
  header .clean-header-role{
    grid-column:1 !important;
    grid-row:1 !important;
    min-width:0 !important;
    width:100% !important;
    height:34px !important;
  }
  header .clean-header-role > :is(.role-switch,.reader-header-ds){
    width:100% !important;
    min-width:0 !important;
    height:34px !important;
    min-height:34px !important;
  }
  header .clean-header-controls > .language-switch{
    grid-column:2 !important;
    grid-row:1 !important;
    width:66px !important;
    min-width:66px !important;
    height:34px !important;
    min-height:34px !important;
  }
  header .clean-header-controls > .help-button{
    grid-column:3 !important;
    grid-row:1 !important;
    width:34px !important;
    min-width:34px !important;
    height:34px !important;
    min-height:34px !important;
    padding:0 !important;
  }
  header .clean-header-controls > .clean-mode-switch{
    grid-column:1 / -1 !important;
    grid-row:2 !important;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    height:34px !important;
    min-height:34px !important;
    overflow:hidden !important;
    border:1px solid rgba(255,255,255,.72) !important;
    border-radius:10px !important;
    background:rgba(255,255,255,.10) !important;
  }
  header .clean-mode-switch > .clean-mode-button{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:5px !important;
    min-width:0 !important;
    height:32px !important;
    min-height:32px !important;
    padding:0 8px !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    color:#fff !important;
    font-size:.7rem !important;
    font-weight:900 !important;
  }
  header .clean-mode-switch > .clean-mode-button + .clean-mode-button{
    border-left:1px solid rgba(255,255,255,.28) !important;
  }
  header .clean-mode-switch > .clean-mode-button[aria-pressed="true"],
  header .clean-mode-switch > .clean-mode-button.active{
    background:rgba(255,252,248,.97) !important;
    color:#2d282d !important;
  }
}

/* ---------- Desktop practices-only scrollport ---------- */
@media (min-width:761px){
  body[data-view-mode="edit"] main,
  body[data-view-mode="read"] main{
    flex:1 1 auto !important;
    min-height:0 !important;
    overflow:hidden !important;
    overscroll-behavior:none !important;
    touch-action:auto !important;
  }

  body[data-view-mode="edit"] .individual-editor:not([hidden]),
  body[data-view-mode="read"] .couple-reader:not([hidden]){
    display:flex !important;
    flex-direction:column !important;
    flex:1 1 auto !important;
    min-height:0 !important;
    max-height:100% !important;
    margin-top:0 !important;
    margin-bottom:0 !important;
    overflow:hidden !important;
  }

  body[data-view-mode="edit"] .individual-editor{
    padding:0 !important;
    border:0 !important;
    border-radius:14px !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  body[data-view-mode="edit"] .individual-editor-legend,
  body[data-view-mode="edit"] .individual-editor-empty,
  body[data-view-mode="read"] .couple-reader-empty{
    flex:0 0 auto !important;
  }

  body[data-view-mode="edit"] .individual-editor-list,
  body[data-view-mode="read"] .couple-reader-list{
    flex:1 1 auto !important;
    min-width:0 !important;
    min-height:0 !important;
    max-height:100% !important;
    overflow:auto !important;
    overscroll-behavior:contain !important;
    scrollbar-gutter:auto !important;
    scrollbar-width:thin;
    scrollbar-color:#8f7441 rgba(255,248,241,.96);
    -webkit-overflow-scrolling:touch !important;
    touch-action:pan-x pan-y pinch-zoom !important;
  }

  body[data-view-mode="edit"] .individual-editor-list{
    --practice-scroll-head-h:40px;
    position:relative !important;
    width:100% !important;
    margin:0 !important;
    border-radius:14px !important;
    background:var(--edit-theme-panel,var(--theme-panel,#fff)) !important;
    scroll-padding-top:calc(var(--practice-scroll-head-h) + 34px) !important;
  }
  body[data-view-mode="read"] .couple-reader-list{
    --practice-scroll-head-h:42px;
    position:relative !important;
    scroll-padding-top:calc(var(--practice-scroll-head-h) + 34px) !important;
  }

  body[data-view-mode="edit"] .individual-editor-list::-webkit-scrollbar,
  body[data-view-mode="read"] .couple-reader-list::-webkit-scrollbar{
    width:12px;
    height:12px;
  }
  body[data-view-mode="edit"] .individual-editor-list::-webkit-scrollbar-track,
  body[data-view-mode="read"] .couple-reader-list::-webkit-scrollbar-track{
    background:linear-gradient(180deg,rgba(252,247,241,.98),rgba(242,233,224,.98));
    border-left:1px solid rgba(118,96,67,.18);
    border-top:1px solid rgba(118,96,67,.10);
    border-radius:999px;
  }
  body[data-view-mode="edit"] .individual-editor-list::-webkit-scrollbar-thumb,
  body[data-view-mode="read"] .couple-reader-list::-webkit-scrollbar-thumb{
    background:linear-gradient(180deg,#b49a69 0%,#8b7142 55%,#755c35 100%);
    border:2px solid rgba(250,243,236,.98);
    border-radius:999px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 1px 3px rgba(55,40,22,.22);
  }
  body[data-view-mode="edit"] .individual-editor-list::-webkit-scrollbar-thumb:hover,
  body[data-view-mode="read"] .couple-reader-list::-webkit-scrollbar-thumb:hover{
    background:linear-gradient(180deg,#c1a672 0%,#967944 55%,#7d643a 100%);
  }
  body[data-view-mode="edit"] .individual-editor-list::-webkit-scrollbar-corner,
  body[data-view-mode="read"] .couple-reader-list::-webkit-scrollbar-corner{
    background:linear-gradient(180deg,#3b353b 0%,#2d282d 100%);
  }

  /* Sticky table headers: square corners by design. */
  body[data-view-mode="edit"] .desktop-editor-table-head,
  body[data-view-mode="read"] .desktop-reader-table-head{
    position:sticky !important;
    top:0 !important;
    z-index:100 !important;
    margin:0 !important;
    border-radius:0 !important;
    overflow:hidden !important;
    background-clip:padding-box !important;
    isolation:isolate !important;
    box-shadow:0 2px 5px rgba(22,15,19,.14) !important;
  }
  body[data-view-mode="edit"] .desktop-editor-table-head::before,
  body[data-view-mode="edit"] .desktop-editor-table-head::after,
  body[data-view-mode="read"] .desktop-reader-table-head::before,
  body[data-view-mode="read"] .desktop-reader-table-head::after{
    content:none !important;
    display:none !important;
  }
  body[data-view-mode="edit"] .desktop-editor-table-head > span:first-child,
  body[data-view-mode="edit"] .desktop-editor-table-head > span:last-child,
  body[data-view-mode="read"] .desktop-reader-table-head > span:first-child,
  body[data-view-mode="read"] .desktop-reader-table-head > span:last-child{
    border-radius:0 !important;
  }
  body[data-view-mode="edit"] .desktop-editor-table-head{
    height:var(--practice-scroll-head-h) !important;
    min-height:var(--practice-scroll-head-h) !important;
    max-height:var(--practice-scroll-head-h) !important;
    min-width:1390px !important;
  }
  body[data-view-mode="read"] .desktop-reader-table-head{
    height:var(--practice-scroll-head-h) !important;
    min-height:var(--practice-scroll-head-h) !important;
    max-height:var(--practice-scroll-head-h) !important;
  }

  
  

  body[data-view-mode="edit"] .desktop-editor-table-head + .individual-category,
  body[data-view-mode="read"] .desktop-reader-table-head + .couple-reader-category{
    margin-top:0 !important;
  }
  body[data-view-mode="edit"] .desktop-editor-table-head + .individual-category .individual-category-head,
  body[data-view-mode="read"] .desktop-reader-table-head + .couple-reader-category .couple-reader-category-head{
    
  }

  body[data-view-mode="edit"] :is(.individual-category,.individual-category-cards,.individual-category-head){
    min-width:1390px !important;
  }
}


/* ---------- Category folding / sticky state: single implementation ---------- */
.individual-category-cards[hidden],
.couple-reader-category-body[hidden],
.individual-category.is-collapsed .individual-category-cards,
.couple-reader-category.is-collapsed .couple-reader-category-body{
  display:none !important;
}

.individual-category.is-collapsed .individual-category-head,
.couple-reader-category.is-collapsed .couple-reader-category-head{
  position:relative !important;
  top:auto !important;
  z-index:20 !important;
  border-radius:8px !important;
  box-shadow:0 1px 4px rgba(26,15,20,.065) !important;
}

.individual-category.is-collapsed .individual-category-chevron,
.couple-reader-category.is-collapsed .couple-reader-category-chevron{
  opacity:.82 !important;
}

@media (min-width:761px){
  body[data-view-mode="edit"] .individual-category:not(.is-collapsed) .individual-category-head,
  body[data-view-mode="read"] .couple-reader-category:not(.is-collapsed) .couple-reader-category-head{
    position:sticky !important;
    top:var(--practice-scroll-head-h) !important;
    z-index:90 !important;
  }
  body[data-view-mode="edit"] .individual-category:not(.is-collapsed) .individual-category-head.is-stuck,
  body[data-view-mode="read"] .couple-reader-category:not(.is-collapsed) .couple-reader-category-head.is-stuck{
    box-shadow:0 2px 5px rgba(31,22,26,.09) !important;
  }
  body[data-view-mode="edit"] .desktop-editor-table-head + .individual-category .individual-category-head,
  body[data-view-mode="read"] .desktop-reader-table-head + .couple-reader-category .couple-reader-category-head{
    margin-top:0 !important;
  }
}

@media (max-width:760px){
  body[data-view-mode="edit"] .individual-category:not(.is-collapsed) .individual-category-head,
  body[data-view-mode="read"] .couple-reader-category:not(.is-collapsed) .couple-reader-category-head{
    position:sticky !important;
    z-index:23 !important;
    border-radius:8px 8px 0 0 !important;
  }
  body[data-view-mode="edit"] .individual-category:not(.is-collapsed) .individual-category-head{
    top:var(--edit-category-sticky-top,0px) !important;
  }
  body[data-view-mode="read"] .couple-reader-category:not(.is-collapsed) .couple-reader-category-head{
    top:var(--read-category-sticky-top,0px) !important;
  }
}

/* ---------- Reader notes: compact premium rows ---------- */
@media (min-width:761px){
  body[data-view-mode="read"] .reader-note-stack{
    grid-area:notes !important;
    display:grid !important;
    grid-auto-rows:28px !important;
    align-content:center !important;
    gap:4px !important;
    min-width:0 !important;
    min-height:100% !important;
    margin:0 !important;
    padding:4px 8px !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    box-sizing:border-box !important;
  }
  body[data-view-mode="read"] .reader-note-stack.is-empty{
    display:none !important;
  }
  body[data-view-mode="read"] .reader-note-line{
    display:grid !important;
    grid-template-columns:12ch 36px minmax(0,1fr) !important;
    align-items:center !important;
    gap:6px !important;
    width:100% !important;
    min-width:0 !important;
    height:28px !important;
    min-height:28px !important;
    margin:0 !important;
    padding:3px 8px !important;
    overflow:hidden !important;
    border:1px solid rgba(92,78,58,.15) !important;
    border-radius:9px !important;
    background:linear-gradient(180deg,rgba(255,255,255,.38),rgba(255,255,255,.22)) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 1px 2px rgba(56,43,31,.05) !important;
    box-sizing:border-box !important;
  }
  body[data-view-mode="read"] .reader-note-name{
    display:flex !important;
    align-items:center !important;
    width:12ch !important;
    min-width:12ch !important;
    max-width:12ch !important;
    overflow:hidden !important;
  }
  body[data-view-mode="read"] .reader-note-name .profile-inline-name{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    height:18px !important;
    padding:2px 7px !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    border-radius:999px !important;
    box-sizing:border-box !important;
    font-size:.52rem !important;
    font-weight:900 !important;
    line-height:1 !important;
  }
  body[data-view-mode="read"] .reader-note-role{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:36px !important;
    min-width:36px !important;
    max-width:36px !important;
    height:18px !important;
    min-height:18px !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    border:1px solid rgba(92,78,58,.12) !important;
    border-radius:999px !important;
    background:rgba(255,255,255,.58) !important;
    color:#332d31 !important;
    font-size:.49rem !important;
    font-weight:950 !important;
    letter-spacing:.035em !important;
    line-height:1 !important;
    text-transform:uppercase !important;
    white-space:nowrap !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.48) !important;
    box-sizing:border-box !important;
  }
  body[data-view-mode="read"] .reader-note-role[data-role="dominant"]{
    background:color-mix(in srgb,var(--dom-role-soft) 72%,white 28%) !important;
    border-color:color-mix(in srgb,var(--dom-role-color) 28%,transparent 72%) !important;
    color:var(--dom-role-dark) !important;
  }
  body[data-view-mode="read"] .reader-note-role[data-role="submissive"]{
    background:color-mix(in srgb,var(--sub-role-soft) 72%,white 28%) !important;
    border-color:color-mix(in srgb,var(--sub-role-color) 28%,transparent 72%) !important;
    color:var(--sub-role-dark) !important;
  }
  body[data-view-mode="read"] .reader-note-text{
    display:block !important;
    min-width:0 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    padding-left:7px !important;
    border-left:1px solid rgba(92,78,58,.13) !important;
    color:color-mix(in srgb,var(--ui-ink-strong) 91%,#3e353a 9%) !important;
    font-size:.64rem !important;
    font-weight:780 !important;
    line-height:1.1 !important;
    letter-spacing:.006em !important;
  }
}

@media (max-width:760px){
  body[data-view-mode="read"] .reader-note-stack{
    grid-area:notes;
    display:grid;
    grid-auto-rows:26px;
    align-content:center;
    gap:3px;
    min-width:0;
    padding:3px 5px;
  }
  body[data-view-mode="read"] .reader-note-stack.is-empty{display:none;}
  body[data-view-mode="read"] .reader-note-line{
    display:grid;
    grid-template-columns:10ch 34px minmax(0,1fr);
    align-items:center;
    gap:4px;
    height:26px;
    min-height:26px;
    padding:3px 6px;
    overflow:hidden;
    border:1px solid rgba(92,78,58,.14);
    border-radius:8px;
    background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,.20));
  }
  body[data-view-mode="read"] .reader-note-name{
    width:10ch;
    min-width:10ch;
    max-width:10ch;
    overflow:hidden;
  }
  body[data-view-mode="read"] .reader-note-name .profile-inline-name{
    width:100%;
    max-width:100%;
    padding:2px 5px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:.49rem;
  }
  body[data-view-mode="read"] .reader-note-role{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:17px;
    padding:0;
    border-radius:999px;
    background:rgba(255,255,255,.56);
    border:1px solid rgba(92,78,58,.12);
    font-size:.46rem;
    font-weight:950;
    text-transform:uppercase;
    white-space:nowrap;
  }
  body[data-view-mode="read"] .reader-note-text{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    padding-left:5px;
    border-left:1px solid rgba(92,78,58,.12);
    font-size:.58rem;
    font-weight:750;
  }
}

/* === Canonical application width : 16:9 reference frame ===
   Desktop reference = 1920 px wide. Larger displays keep the application
   centered at that width; smaller displays shrink fluidly to the viewport. */
:root{
  --app-frame-max-width:1920px;
  --app-frame-side-gap:8px;
}

/* Header content: title, controls, tools, fold buttons and exploration dock. */
body > header > .top{
  width:min(calc(100% - (2 * var(--app-frame-side-gap))), var(--app-frame-max-width));
  max-width:var(--app-frame-max-width);
  margin-inline:auto;
}

/* The practices workspace follows exactly the same horizontal frame. */
body[data-view-mode="edit"] #individualEditor:not([hidden]),
body[data-view-mode="read"] #coupleReader:not([hidden]){
  width:min(calc(100% - (2 * var(--app-frame-side-gap))), var(--app-frame-max-width)) !important;
  max-width:var(--app-frame-max-width) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Prevent the internal desktop tables from making the outer frame wider. */
body[data-view-mode="edit"] #individualEditor,
body[data-view-mode="read"] #coupleReader{
  overflow-x:hidden !important;
}

/* Footer uses the same visible width instead of spanning a large display. */
.site-footer{
  width:min(calc(100% - (2 * var(--app-frame-side-gap))), var(--app-frame-max-width));
  max-width:var(--app-frame-max-width);
  margin-inline:auto;
}

@media (max-width:760px){
  :root{ --app-frame-side-gap:2px; }
}

/* Canonical identity colors.
   Edit mode highlights the person currently answering. Reading mode highlights
   the current dominant. These late rules intentionally override older role
   classes left in the stylesheet for compatibility. */
header .role-switch [data-person-choice="person-a"]{
  --identity-color:var(--person-a-role-color);
  --identity-dark:var(--person-a-role-dark);
  --identity-soft:var(--person-a-role-soft);
}
header .role-switch [data-person-choice="person-b"]{
  --identity-color:var(--person-b-role-color);
  --identity-dark:var(--person-b-role-dark);
  --identity-soft:var(--person-b-role-soft);
}
header .role-switch [data-person-choice].active,
header .role-switch [data-person-choice][aria-pressed="true"]{
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--identity-color) 88%,#fff 12%) 0%,
    var(--identity-color) 100%) !important;
  border-color:var(--identity-dark) !important;
  color:#fffdf8 !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.18),
    inset 0 -2px 0 color-mix(in srgb,var(--identity-dark) 78%,transparent),
    0 0 0 2px color-mix(in srgb,var(--identity-soft) 72%,transparent),
    0 4px 10px rgba(24,14,19,.12) !important;
}
header .role-switch [data-person-choice].active :is(.role-choice-name,.role-choice-ds),
header .role-switch [data-person-choice][aria-pressed="true"] :is(.role-choice-name,.role-choice-ds){
  color:#fffdf8 !important;
  text-shadow:0 1px 1px rgba(0,0,0,.18) !important;
}

body[data-view-mode="read"] header .reader-header-ds-choice.active,
body[data-view-mode="read"] header .reader-header-ds-choice[aria-pressed="true"]{
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--reader-person-color) 88%,#fff 12%) 0%,
    var(--reader-person-color) 100%) !important;
  border-color:var(--reader-person-dark) !important;
  color:#fffdf8 !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.18),
    inset 0 -2px 0 color-mix(in srgb,var(--reader-person-dark) 78%,transparent),
    0 0 0 2px color-mix(in srgb,var(--reader-person-soft) 72%,transparent) !important;
}
body[data-view-mode="read"] header .reader-header-ds-choice.active .profile-inline-text,
body[data-view-mode="read"] header .reader-header-ds-choice[aria-pressed="true"] .profile-inline-text{
  color:#fffdf8 !important;
}

header .clean-mode-switch{
  --mode-active-color:var(--theme-person-color,var(--dominant-color));
  --mode-active-dark:var(--theme-person-dark,var(--dominant-dark));
  --mode-active-soft:var(--theme-person-soft,var(--dominant-soft));
  border-color:color-mix(in srgb,var(--mode-active-soft) 62%,rgba(255,255,255,.42)) !important;
  background:rgba(255,255,255,.16) !important;
}
body[data-view-mode="edit"][data-active-edit-person="person-a"] header .clean-mode-switch{
  --mode-active-color:var(--person-a-role-color);
  --mode-active-dark:var(--person-a-role-dark);
  --mode-active-soft:var(--person-a-role-soft);
}
body[data-view-mode="edit"][data-active-edit-person="person-b"] header .clean-mode-switch{
  --mode-active-color:var(--person-b-role-color);
  --mode-active-dark:var(--person-b-role-dark);
  --mode-active-soft:var(--person-b-role-soft);
}
body[data-view-mode="read"][data-dominant-side="person-a"] header .clean-mode-switch{
  --mode-active-color:var(--person-a-role-color);
  --mode-active-dark:var(--person-a-role-dark);
  --mode-active-soft:var(--person-a-role-soft);
}
body[data-view-mode="read"][data-dominant-side="person-b"] header .clean-mode-switch{
  --mode-active-color:var(--person-b-role-color);
  --mode-active-dark:var(--person-b-role-dark);
  --mode-active-soft:var(--person-b-role-soft);
}
body[data-view-mode="edit"][data-active-edit-person="person-a"] header #modeEdit.clean-mode-button,
body[data-view-mode="read"][data-dominant-side="person-a"] header #modeRead.clean-mode-button{
  --mode-active-color:var(--person-a-role-color);
  --mode-active-dark:var(--person-a-role-dark);
  --mode-active-soft:var(--person-a-role-soft);
}
body[data-view-mode="edit"][data-active-edit-person="person-b"] header #modeEdit.clean-mode-button,
body[data-view-mode="read"][data-dominant-side="person-b"] header #modeRead.clean-mode-button{
  --mode-active-color:var(--person-b-role-color);
  --mode-active-dark:var(--person-b-role-dark);
  --mode-active-soft:var(--person-b-role-soft);
}
header .clean-mode-switch > .clean-mode-button:not(.active):not([aria-pressed="true"]){
  background-color:#fffdf8 !important;
  background-image:none !important;
  color:var(--mode-active-dark) !important;
  opacity:1 !important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mode-active-soft) 72%,#d8cec7 28%) !important;
  text-shadow:none !important;
}
header .clean-mode-switch > .clean-mode-button.active,
header .clean-mode-switch > .clean-mode-button[aria-pressed="true"]{
  border:1px solid var(--mode-active-dark) !important;
  background-color:var(--mode-active-color) !important;
  background-image:linear-gradient(180deg,
    color-mix(in srgb,var(--mode-active-color) 88%,#fff 12%) 0%,
    var(--mode-active-color) 100%) !important;
  color:#fffdf8 !important;
  opacity:1 !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.18),
    inset 0 -2px 0 color-mix(in srgb,var(--mode-active-dark) 76%,transparent),
    0 0 0 2px color-mix(in srgb,var(--mode-active-soft) 58%,transparent) !important;
}
body[data-view-mode="edit"][data-active-edit-person="person-a"] header #modeEdit.clean-mode-button.active,
body[data-view-mode="edit"][data-active-edit-person="person-a"] header #modeEdit.clean-mode-button[aria-pressed="true"],
body[data-view-mode="read"][data-dominant-side="person-a"] header #modeRead.clean-mode-button.active,
body[data-view-mode="read"][data-dominant-side="person-a"] header #modeRead.clean-mode-button[aria-pressed="true"]{
  border:1px solid var(--person-a-role-dark) !important;
  background-color:var(--person-a-role-color) !important;
  background-image:linear-gradient(180deg,
    color-mix(in srgb,var(--person-a-role-color) 88%,#fff 12%) 0%,
    var(--person-a-role-color) 100%) !important;
  color:#fffdf8 !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.18),
    inset 0 -2px 0 color-mix(in srgb,var(--person-a-role-dark) 76%,transparent),
    0 0 0 2px color-mix(in srgb,var(--person-a-role-soft) 58%,transparent) !important;
}
body[data-view-mode="edit"][data-active-edit-person="person-b"] header #modeEdit.clean-mode-button.active,
body[data-view-mode="edit"][data-active-edit-person="person-b"] header #modeEdit.clean-mode-button[aria-pressed="true"],
body[data-view-mode="read"][data-dominant-side="person-b"] header #modeRead.clean-mode-button.active,
body[data-view-mode="read"][data-dominant-side="person-b"] header #modeRead.clean-mode-button[aria-pressed="true"]{
  border:1px solid var(--person-b-role-dark) !important;
  background-color:var(--person-b-role-color) !important;
  background-image:linear-gradient(180deg,
    color-mix(in srgb,var(--person-b-role-color) 88%,#fff 12%) 0%,
    var(--person-b-role-color) 100%) !important;
  color:#fffdf8 !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.18),
    inset 0 -2px 0 color-mix(in srgb,var(--person-b-role-dark) 76%,transparent),
    0 0 0 2px color-mix(in srgb,var(--person-b-role-soft) 58%,transparent) !important;
}
header .clean-mode-switch > .clean-mode-button.active :is(.mode-icon,.mode-label),
header .clean-mode-switch > .clean-mode-button[aria-pressed="true"] :is(.mode-icon,.mode-label){
  color:#fffdf8 !important;
  text-shadow:0 1px 1px rgba(0,0,0,.18) !important;
}

/* Unified segmented controls: people, language and mode all share the same
   active/inactive grammar. Active is coloured, inactive is white. */
header :is(.role-switch,.reader-header-ds,.language-switch,.clean-mode-switch){
  border:1px solid color-mix(in srgb,var(--theme-person-soft,var(--dominant-soft)) 58%,rgba(255,255,255,.50)) !important;
  border-radius:11px !important;
  background:rgba(255,255,255,.18) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 1px 2px rgba(24,14,19,.05) !important;
  overflow:hidden !important;
}

header .language-switch{
  --language-active-color:var(--theme-person-color,var(--dominant-color));
  --language-active-dark:var(--theme-person-dark,var(--dominant-dark));
  --language-active-soft:var(--theme-person-soft,var(--dominant-soft));
}

header :is(.role-choice,.reader-header-ds-choice,.language-choice,.clean-mode-button):not(.active):not([aria-pressed="true"]){
  background-color:#fffdf8 !important;
  background-image:none !important;
  opacity:1 !important;
  text-shadow:none !important;
  box-shadow:inset 0 0 0 1px rgba(83,66,55,.08) !important;
}

header .role-switch [data-person-choice]:not(.active):not([aria-pressed="true"]){
  color:var(--identity-dark) !important;
}
header .role-switch [data-person-choice]:not(.active):not([aria-pressed="true"]) :is(.role-choice-name,.role-choice-ds){
  color:inherit !important;
  text-shadow:none !important;
}

body[data-view-mode="read"] header .reader-header-ds-choice:not(.active):not([aria-pressed="true"]){
  color:var(--reader-person-dark) !important;
}
body[data-view-mode="read"] header .reader-header-ds-choice:not(.active):not([aria-pressed="true"]) :is(.profile-inline-text,.profile-inline-name,.flow-arrow){
  color:inherit !important;
  text-shadow:none !important;
}

header .language-choice:not(.active):not([aria-pressed="true"]){
  color:var(--language-active-dark) !important;
}
header .clean-mode-switch > .clean-mode-button:not(.active):not([aria-pressed="true"]){
  color:var(--mode-active-dark) !important;
}

header .language-choice.active,
header .language-choice[aria-pressed="true"]{
  border-color:var(--language-active-dark) !important;
  background-color:var(--language-active-color) !important;
  background-image:linear-gradient(180deg,
    color-mix(in srgb,var(--language-active-color) 88%,#fff 12%) 0%,
    var(--language-active-color) 100%) !important;
  color:#fffdf8 !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.18),
    inset 0 -2px 0 color-mix(in srgb,var(--language-active-dark) 76%,transparent),
    0 0 0 2px color-mix(in srgb,var(--language-active-soft) 58%,transparent) !important;
}

header .role-switch > .role-choice[data-person-choice="person-a"]{
  --seg-active-color:var(--person-a-role-color);
  --seg-active-dark:var(--person-a-role-dark);
  --seg-active-soft:var(--person-a-role-soft);
}
header .role-switch > .role-choice[data-person-choice="person-b"]{
  --seg-active-color:var(--person-b-role-color);
  --seg-active-dark:var(--person-b-role-dark);
  --seg-active-soft:var(--person-b-role-soft);
}
header .reader-header-ds > .reader-header-ds-choice[data-reader-header-ds="a-dominant"]{
  --seg-active-color:var(--person-a-role-color);
  --seg-active-dark:var(--person-a-role-dark);
  --seg-active-soft:var(--person-a-role-soft);
}
header .reader-header-ds > .reader-header-ds-choice[data-reader-header-ds="b-dominant"]{
  --seg-active-color:var(--person-b-role-color);
  --seg-active-dark:var(--person-b-role-dark);
  --seg-active-soft:var(--person-b-role-soft);
}
header .language-switch > .language-choice,
header .clean-mode-switch > .clean-mode-button{
  --seg-active-color:var(--theme-person-color,var(--dominant-color));
  --seg-active-dark:var(--theme-person-dark,var(--dominant-dark));
  --seg-active-soft:var(--theme-person-soft,var(--dominant-soft));
}
body[data-view-mode="edit"][data-active-edit-person="person-a"] header .language-switch > .language-choice,
body[data-view-mode="edit"][data-active-edit-person="person-a"] header #modeEdit.clean-mode-button,
body[data-view-mode="read"][data-dominant-side="person-a"] header .language-switch > .language-choice,
body[data-view-mode="read"][data-dominant-side="person-a"] header #modeRead.clean-mode-button{
  --seg-active-color:var(--person-a-role-color);
  --seg-active-dark:var(--person-a-role-dark);
  --seg-active-soft:var(--person-a-role-soft);
}
body[data-view-mode="edit"][data-active-edit-person="person-b"] header .language-switch > .language-choice,
body[data-view-mode="edit"][data-active-edit-person="person-b"] header #modeEdit.clean-mode-button,
body[data-view-mode="read"][data-dominant-side="person-b"] header .language-switch > .language-choice,
body[data-view-mode="read"][data-dominant-side="person-b"] header #modeRead.clean-mode-button{
  --seg-active-color:var(--person-b-role-color);
  --seg-active-dark:var(--person-b-role-dark);
  --seg-active-soft:var(--person-b-role-soft);
}

header :is(.role-switch,.reader-header-ds,.language-switch,.clean-mode-switch) > :is(.role-choice,.reader-header-ds-choice,.language-choice,.clean-mode-button):not(.active):not([aria-pressed="true"]){
  border-color:var(--seg-active-dark,var(--theme-person-dark,var(--dominant-dark))) !important;
  background:#fffdf8 !important;
  background-image:none !important;
  color:var(--seg-active-dark,var(--theme-person-dark,var(--dominant-dark))) !important;
  opacity:1 !important;
  text-shadow:none !important;
  box-shadow:inset 0 0 0 1px rgba(83,66,55,.08) !important;
}
header :is(.role-switch,.reader-header-ds,.language-switch,.clean-mode-switch) > :is(.role-choice,.reader-header-ds-choice,.language-choice,.clean-mode-button).active,
header :is(.role-switch,.reader-header-ds,.language-switch,.clean-mode-switch) > :is(.role-choice,.reader-header-ds-choice,.language-choice,.clean-mode-button)[aria-pressed="true"]{
  border-color:var(--seg-active-dark,var(--theme-person-dark,var(--dominant-dark))) !important;
  background-color:var(--seg-active-color,var(--theme-person-color,var(--dominant-color))) !important;
  background-image:linear-gradient(180deg,
    color-mix(in srgb,var(--seg-active-color,var(--theme-person-color,var(--dominant-color))) 88%,#fff 12%) 0%,
    var(--seg-active-color,var(--theme-person-color,var(--dominant-color))) 100%) !important;
  color:#fffdf8 !important;
  opacity:1 !important;
  text-shadow:0 1px 1px rgba(0,0,0,.18) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.18),
    inset 0 -2px 0 color-mix(in srgb,var(--seg-active-dark,var(--theme-person-dark,var(--dominant-dark))) 76%,transparent),
    0 0 0 2px color-mix(in srgb,var(--seg-active-soft,var(--theme-person-soft,var(--dominant-soft))) 58%,transparent) !important;
}
header :is(.role-switch,.reader-header-ds,.language-switch,.clean-mode-switch) > :is(.role-choice,.reader-header-ds-choice,.language-choice,.clean-mode-button).active :is(.role-choice-name,.role-choice-ds,.profile-inline-text,.profile-inline-name,.flow-arrow,.mode-icon,.mode-label),
header :is(.role-switch,.reader-header-ds,.language-switch,.clean-mode-switch) > :is(.role-choice,.reader-header-ds-choice,.language-choice,.clean-mode-button)[aria-pressed="true"] :is(.role-choice-name,.role-choice-ds,.profile-inline-text,.profile-inline-name,.flow-arrow,.mode-icon,.mode-label){
  color:#fffdf8 !important;
  text-shadow:0 1px 1px rgba(0,0,0,.18) !important;
}
header :is(.role-switch,.reader-header-ds,.language-switch,.clean-mode-switch) > :is(.role-choice,.reader-header-ds-choice,.language-choice,.clean-mode-button):not(.active):not([aria-pressed="true"]) :is(.role-choice-name,.role-choice-ds,.profile-inline-text,.profile-inline-name,.flow-arrow,.mode-icon,.mode-label){
  color:inherit !important;
  text-shadow:none !important;
}

header .role-switch > button.role-choice[data-person-choice="person-a"]:not(.active):not([aria-pressed="true"]),
header .reader-header-ds > button.reader-header-ds-choice[data-reader-header-ds="a-dominant"]:not(.active):not([aria-pressed="true"]){
  border-color:var(--person-a-role-dark) !important;
  background:#fffdf8 !important;
  background-color:#fffdf8 !important;
  background-image:none !important;
  color:var(--person-a-role-dark) !important;
  box-shadow:inset 0 0 0 1px rgba(83,66,55,.08) !important;
}
header .role-switch > button.role-choice[data-person-choice="person-b"]:not(.active):not([aria-pressed="true"]),
header .reader-header-ds > button.reader-header-ds-choice[data-reader-header-ds="b-dominant"]:not(.active):not([aria-pressed="true"]){
  border-color:var(--person-b-role-dark) !important;
  background:#fffdf8 !important;
  background-color:#fffdf8 !important;
  background-image:none !important;
  color:var(--person-b-role-dark) !important;
  box-shadow:inset 0 0 0 1px rgba(83,66,55,.08) !important;
}
header .role-switch > button.role-choice[data-person-choice="person-a"].active,
header .role-switch > button.role-choice[data-person-choice="person-a"][aria-pressed="true"],
header .reader-header-ds > button.reader-header-ds-choice[data-reader-header-ds="a-dominant"].active,
header .reader-header-ds > button.reader-header-ds-choice[data-reader-header-ds="a-dominant"][aria-pressed="true"]{
  border-color:var(--person-a-role-dark) !important;
  background-color:var(--person-a-role-color) !important;
  background-image:linear-gradient(180deg,
    color-mix(in srgb,var(--person-a-role-color) 88%,#fff 12%) 0%,
    var(--person-a-role-color) 100%) !important;
  color:#fffdf8 !important;
}
header .role-switch > button.role-choice[data-person-choice="person-b"].active,
header .role-switch > button.role-choice[data-person-choice="person-b"][aria-pressed="true"],
header .reader-header-ds > button.reader-header-ds-choice[data-reader-header-ds="b-dominant"].active,
header .reader-header-ds > button.reader-header-ds-choice[data-reader-header-ds="b-dominant"][aria-pressed="true"]{
  border-color:var(--person-b-role-dark) !important;
  background-color:var(--person-b-role-color) !important;
  background-image:linear-gradient(180deg,
    color-mix(in srgb,var(--person-b-role-color) 88%,#fff 12%) 0%,
    var(--person-b-role-color) 100%) !important;
  color:#fffdf8 !important;
}
body header .language-switch > button.language-choice:not(.active):not([aria-pressed="true"]),
body header .clean-mode-switch > button.clean-mode-button:not(.active):not([aria-pressed="true"]){
  border-color:var(--seg-active-dark,var(--theme-person-dark,var(--dominant-dark))) !important;
  background:#fffdf8 !important;
  background-color:#fffdf8 !important;
  background-image:none !important;
  color:var(--seg-active-dark,var(--theme-person-dark,var(--dominant-dark))) !important;
  box-shadow:inset 0 0 0 1px rgba(83,66,55,.08) !important;
}
body header .language-switch > button.language-choice.active,
body header .language-switch > button.language-choice[aria-pressed="true"],
body header .clean-mode-switch > button.clean-mode-button.active,
body header .clean-mode-switch > button.clean-mode-button[aria-pressed="true"]{
  border-color:var(--seg-active-dark,var(--theme-person-dark,var(--dominant-dark))) !important;
  background-color:var(--seg-active-color,var(--theme-person-color,var(--dominant-color))) !important;
  background-image:linear-gradient(180deg,
    color-mix(in srgb,var(--seg-active-color,var(--theme-person-color,var(--dominant-color))) 88%,#fff 12%) 0%,
    var(--seg-active-color,var(--theme-person-color,var(--dominant-color))) 100%) !important;
  color:#fffdf8 !important;
}

header :is(.role-switch,.reader-header-ds,.language-switch,.clean-mode-switch) .profile-inline-name{
  background:#fffdf8 !important;
  background-image:none !important;
  border-color:color-mix(in srgb,currentColor 24%,#fff 76%) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.62),0 1px 2px rgba(24,14,19,.08) !important;
  text-shadow:none !important;
}
header :is(.role-switch,.reader-header-ds,.language-switch,.clean-mode-switch) .profile-inline-name.person-a{
  color:var(--person-a-role-dark) !important;
}
header :is(.role-switch,.reader-header-ds,.language-switch,.clean-mode-switch) .profile-inline-name.person-b{
  color:var(--person-b-role-dark) !important;
}
body header :is(.role-switch,.reader-header-ds,.language-switch,.clean-mode-switch) > :is(.role-choice,.reader-header-ds-choice,.language-choice,.clean-mode-button).active .profile-inline-name.person-a,
body header :is(.role-switch,.reader-header-ds,.language-switch,.clean-mode-switch) > :is(.role-choice,.reader-header-ds-choice,.language-choice,.clean-mode-button)[aria-pressed="true"] .profile-inline-name.person-a{
  background:#fffdf8 !important;
  background-image:none !important;
  border-color:color-mix(in srgb,var(--person-a-role-color) 24%,#fff 76%) !important;
  color:var(--person-a-role-dark) !important;
  text-shadow:none !important;
}
body header :is(.role-switch,.reader-header-ds,.language-switch,.clean-mode-switch) > :is(.role-choice,.reader-header-ds-choice,.language-choice,.clean-mode-button).active .profile-inline-name.person-b,
body header :is(.role-switch,.reader-header-ds,.language-switch,.clean-mode-switch) > :is(.role-choice,.reader-header-ds-choice,.language-choice,.clean-mode-button)[aria-pressed="true"] .profile-inline-name.person-b{
  background:#fffdf8 !important;
  background-image:none !important;
  border-color:color-mix(in srgb,var(--person-b-role-color) 24%,#fff 76%) !important;
  color:var(--person-b-role-dark) !important;
  text-shadow:none !important;
}

/* Header help keeps a neutral surface; the active person/dominant supplies the accent. */
header .clean-header-controls > .help-button{
  --help-accent:var(--theme-person-color,var(--dominant-color,#9c7a45));
  --help-accent-dark:var(--theme-person-dark,var(--dominant-dark,#5d4828));
  --help-accent-soft:var(--theme-person-soft,var(--dominant-soft,#f4ebdc));
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  border:1px solid color-mix(in srgb,var(--help-accent) 30%,#fff 70%) !important;
  border-radius:var(--premium-control-radius,11px) !important;
  background:#fffdf8 !important;
  color:var(--help-accent-dark) !important;
  font:inherit !important;
  font-size:1.05rem !important;
  font-weight:950 !important;
  line-height:1 !important;
  text-shadow:none !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72),0 1px 3px rgba(24,14,19,.10) !important;
}

body[data-view-mode="edit"][data-active-edit-person="person-a"] header .clean-header-controls > .help-button,
body[data-view-mode="read"][data-dominant-side="person-a"] header .clean-header-controls > .help-button{
  --help-accent:var(--person-a-role-color);
  --help-accent-dark:var(--person-a-role-dark);
  --help-accent-soft:var(--person-a-role-soft);
}

body[data-view-mode="edit"][data-active-edit-person="person-b"] header .clean-header-controls > .help-button,
body[data-view-mode="read"][data-dominant-side="person-b"] header .clean-header-controls > .help-button{
  --help-accent:var(--person-b-role-color);
  --help-accent-dark:var(--person-b-role-dark);
  --help-accent-soft:var(--person-b-role-soft);
}

header .clean-header-controls > .help-button:hover,
header .clean-header-controls > .help-button:focus-visible{
  border-color:color-mix(in srgb,var(--help-accent) 52%,#fff 48%) !important;
  background:color-mix(in srgb,var(--help-accent-soft) 30%,#fff 70%) !important;
  color:var(--help-accent-dark) !important;
  outline:none !important;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--help-accent) 22%,transparent),inset 0 1px 0 rgba(255,255,255,.78),0 1px 3px rgba(24,14,19,.12) !important;
}

header .clean-header-controls > .help-button[aria-expanded="true"]{
  border-color:color-mix(in srgb,var(--help-accent) 62%,#fff 38%) !important;
  background:color-mix(in srgb,var(--help-accent-soft) 45%,#fff 55%) !important;
  color:var(--help-accent-dark) !important;
}

@media (min-width:761px){
  header .clean-header-controls > .help-button{
    flex:0 0 40px !important;
    width:40px !important;
    min-width:40px !important;
    height:38px !important;
    min-height:38px !important;
  }
}

@media (max-width:760px){
  header .clean-header-controls > .help-button{
    grid-column:3 !important;
    grid-row:1 !important;
    width:34px !important;
    min-width:34px !important;
    height:34px !important;
    min-height:34px !important;
    font-size:.98rem !important;
  }
}

/* Mobile reading notes sit below the practice and result cells when present. */
@media (max-width:760px){
  body[data-view-mode="read"] .couple-reader-row{
    grid-template-columns:var(--reader-rail-width) minmax(0,1fr) var(--reader-results-width) !important;
    grid-template-areas:
      "rail copy results"
      "notes notes notes" !important;
    align-items:stretch !important;
    row-gap:0 !important;
  }

  body[data-view-mode="read"] .reader-note-stack{
    grid-area:notes !important;
    display:grid !important;
    grid-auto-rows:auto !important;
    align-content:start !important;
    gap:3px !important;
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:3px 5px 5px !important;
    border-top:1px solid rgba(83,71,76,.07) !important;
    background:rgba(255,255,255,.11) !important;
    box-sizing:border-box !important;
  }

  body[data-view-mode="read"] .reader-note-stack.is-empty{
    display:none !important;
  }

  body[data-view-mode="read"] .reader-note-line{
    grid-template-columns:minmax(54px,10ch) 34px minmax(0,1fr) !important;
    height:auto !important;
    min-height:24px !important;
    padding:3px 6px !important;
  }

  body[data-view-mode="read"] .reader-note-text{
    overflow:visible !important;
    text-overflow:clip !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    line-height:1.18 !important;
  }
}

/* Performance pass: large practice lists keep every row in the DOM for search,
   keyboard focus and saved state, but the browser can skip off-screen paint. */
@supports (content-visibility:auto){
  @media (min-width:761px){
    .individual-category-cards > .individual-practice-card,
    .couple-reader-category-body > .couple-practice,
    .couple-group-variant-block{
      content-visibility:auto;
      contain-intrinsic-size:72px;
    }
    .individual-slot,
    .couple-reader-row,
    .couple-result-cell,
    .score-btn{
      contain:layout paint;
    }
  }
}