:root{font-family:system-ui,-apple-system,Segoe UI,sans-serif;color:#182438;background:#eef1f5}*{box-sizing:border-box}body{margin:0}main{max-width:700px;min-height:100dvh;margin:auto;background:white;padding:18px 16px 32px}header{display:flex;justify-content:space-between;align-items:center;padding-bottom:12px}h1{font-size:1.4rem;margin:0}header p,.note{color:#697789;font-size:.83rem;margin:5px 0}.die{font-size:2.4rem;color:#2453a1}.controls{background:#f1f5fb;padding:15px;border-radius:12px;display:grid;gap:9px}label{font-weight:600;font-size:.9rem}select,button{font:inherit;border-radius:9px;min-height:44px}select{background:white;border:1px solid #c4cedd;padding:9px}button{cursor:pointer;border:1px solid #bdc9da;background:white;color:#203c62;padding:9px 12px;font-weight:600}button:disabled{opacity:.4;cursor:not-allowed}#generate{background:#2259aa;color:white;border:0;font-size:1rem}nav{display:flex;gap:5px;overflow-x:auto;padding:16px 0 9px}nav button{white-space:nowrap;font-size:.83rem;padding:7px 10px;min-height:38px}nav button.active{background:#dfeafb;border-color:#2259aa;color:#174b99}h2{font-size:1.1rem;margin:16px 0 12px}.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.card{padding:12px;background:#f3f6fa;border-radius:9px;display:flex;flex-direction:column;gap:6px;overflow-wrap:anywhere}.card small,.item span,small{color:#64748b}.card strong{font-size:.95rem}.item,.saved{padding:13px 4px;border-bottom:1px solid #e5e9ef;display:flex;justify-content:space-between;gap:10px;align-items:center}.item span{text-align:right}.saved small{display:block;margin-top:5px}.saved>div:last-child{display:flex;gap:5px}.saved button{min-height:36px;font-size:.85rem}.danger{color:#a12929}details,.domain{border:1px solid #e0e6ed;border-radius:10px;padding:13px;margin:9px 0}summary{display:flex;justify-content:space-between;gap:10px;cursor:pointer}summary strong{text-align:right;color:#2259aa}details p,.domain p{line-height:1.5;color:#435063;font-size:.9rem}.domain h3{font-size:1rem;margin:0 0 8px;display:flex;justify-content:space-between}.domain strong{color:#2453a1}.narrative{white-space:pre-wrap;line-height:1.6;font-size:.94rem}footer{display:flex;flex-wrap:wrap;gap:7px;margin-top:22px;padding-top:15px;border-top:1px solid #e0e6ed}footer button{flex:1;font-size:.85rem;min-width:100px}.empty{text-align:center;padding:38px 10px;color:#718096}.note{text-align:center;margin-top:20px}@media(min-width:720px){main{box-shadow:0 0 25px #0001}}

.hint{font-size:.88rem;color:#53647a;line-height:1.5}.roll-card{border:1px solid #e0e6ed;border-radius:10px;padding:12px;margin:9px 0}.roll-heading{display:flex;justify-content:space-between;gap:10px;align-items:start}.roll-heading span{color:#2259aa;text-align:right;font-size:.9rem}.roll-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px}.roll-line label{color:#53647a}.roll-line small{margin-left:auto}.roll-pair{display:flex;gap:5px}.roll-card input,.roll-field input{width:70px;min-height:42px;padding:6px;border:1px solid #aabbd0;border-radius:8px;font-size:1rem}.reroll{min-width:42px;min-height:42px;padding:6px}.domain-rolls,.age-rolls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:12px 0}.roll-field{display:flex;flex-direction:column;gap:5px}.roll-field label{font-size:.78rem;color:#53647a}.domain-rolls{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.domain-rolls .roll-pair{gap:3px}.domain-rolls input{width:52px}.domain-rolls .reroll{min-width:34px;padding:3px}@media(max-width:370px){.domain-rolls{grid-template-columns:repeat(2,minmax(0,1fr))}}

.edit-controls{margin:7px 0}.edit-controls button{width:100%;background:#edf4ff;border-color:#a8c2e9}#roll-editor{padding:12px;background:#f8fafc;border:1px solid #dbe3ee;border-radius:12px;margin:10px 0 18px}#roll-editor[hidden]{display:none}.report-list{border-top:1px solid #dfe6ed}.report-row{display:flex;justify-content:space-between;gap:14px;padding:11px 3px;border-bottom:1px solid #e5e9ef;align-items:start}.report-row>strong{flex:0 0 43%;font-size:.88rem}.report-row>div,.report-row>span{flex:1;text-align:right;overflow-wrap:anywhere}.report-row small{display:block;font-weight:400;font-size:.76rem;margin-top:5px}.report-row span{font-size:.9rem}.roll-line .roll-field{flex-direction:row;align-items:center}.roll-line .roll-field label{display:none}#content h3{font-size:1rem;margin:19px 0 10px}#content .domain h3{margin:0 0 8px}

/* Compact domain header: level beside name, entrenchment at top right */
#content .domain .domain-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:10px;flex-wrap:wrap}
#content .domain .domain-top h3{display:flex;justify-content:flex-start;align-items:baseline;gap:7px;margin:0;font-size:1rem;flex-wrap:wrap}
#content .domain-level{font-size:.76rem;font-weight:500;color:#64748b;white-space:nowrap}
#content .domain-entrenchment{font-size:.78rem;font-weight:600;color:#64748b;white-space:nowrap}

/* Character-sheet section layout */
.report-groups{display:grid;grid-template-columns:minmax(0,1fr);gap:3px}.report-section{min-width:0}.report-section h3{text-transform:uppercase;letter-spacing:.035em}.report-section .report-list{border-top:1px solid #dfe6ed}@media(min-width:850px){.report-groups{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;row-gap:12px}.report-section:nth-child(1){grid-column:1;grid-row:1}.report-section:nth-child(2){grid-column:2;grid-row:1}.report-section:nth-child(3){grid-column:1;grid-row:2}.report-section:nth-child(4){grid-column:2;grid-row:2}}
/* Mobile communication tracker */
#communication{display:grid;gap:14px}#communication[hidden]{display:none}#communication .report-section{padding:14px}#communication select{width:100%;max-width:100%;margin:6px 0 12px;padding:10px;border-radius:8px;background:var(--surface,#fff);color:inherit;border:1px solid #8b98a9}.comm-actions{display:flex;flex-wrap:wrap;gap:9px;align-items:end;margin:10px 0}.comm-actions button{padding:10px 14px;border-radius:9px}.comm-pre{white-space:pre-wrap;overflow-wrap:anywhere}

.comm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(135px,1fr));gap:10px;margin:12px 0}.comm-grid label{display:flex;flex-direction:column;gap:5px}.comm-grid select,.comm-grid input{width:100%;max-width:100%;min-height:38px}.comm-pre{white-space:pre-wrap;overflow-wrap:anywhere}.comm-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:12px 0}

/* v13: interpretations use the full available content width */
#communication{grid-template-columns:minmax(0,1fr);width:100%;min-width:0}
#communication .comm-interpretations{width:100%;min-width:0;padding:0}
#communication .comm-interpretations .domain{width:100%;max-width:none;min-width:0;box-sizing:border-box;margin:10px 0;padding:14px 16px}
#communication .comm-interpretations .domain p{overflow-wrap:anywhere;white-space:normal}
#communication .comm-interpretations .comm-actions{margin:10px 0}


/* v14: compact touch-friendly controls across the whole app */
select,button{min-height:34px;border-radius:7px;font-size:.84rem;line-height:1.2}
select{padding:6px 9px}
button{padding:7px 10px;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background-color .09s ease,border-color .09s ease,color .09s ease,transform .09s ease}
.controls{padding:12px;gap:7px}
#generate{min-height:38px;font-size:.9rem}
nav{padding:12px 0 7px;gap:5px}
nav button{min-height:32px;font-size:.78rem;padding:5px 9px}
.saved button{min-height:32px;font-size:.8rem}
footer button{min-height:34px;font-size:.78rem;padding:6px 8px}
.roll-card input,.roll-field input{min-height:35px;font-size:.9rem}
.reroll{min-height:35px;min-width:35px;padding:5px}
.domain-rolls .reroll{min-width:32px}
#communication select{min-height:34px;margin:4px 0 8px;padding:6px 9px;border-radius:7px;font-size:.84rem}
#communication .comm-actions{gap:7px;margin:8px 0}
#communication .comm-actions button{min-height:34px;padding:7px 10px;border-radius:7px;font-size:.84rem}
.comm-grid{gap:8px;margin:9px 0}
.comm-grid select,.comm-grid input{min-height:34px;font-size:.84rem}
/* Obvious colour feedback while a button is being pressed, including touch. */
button:not(:disabled):active,button:not(:disabled).tap-flash{background:#b7d4ff!important;border-color:#2563eb!important;color:#103d83!important;transform:scale(.98)}
#generate:not(:disabled):active,#generate:not(:disabled).tap-flash{background:#123d83!important;color:#fff!important}
button:not(:disabled):focus-visible,select:focus-visible{outline:2px solid #2563eb;outline-offset:2px}
@media(prefers-reduced-motion:reduce){button{transition:none}}

/* v15: interpretation occupies the complete communication panel width. */
#communication{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%;align-items:start}
#communication > .report-section{min-width:0;width:100%;box-sizing:border-box}
#communication > .report-section:first-child{grid-column:1/-1}
#communication > .report-section.comm-interpretations{grid-column:1/-1 !important;grid-row:auto;width:100% !important;max-width:none !important;justify-self:stretch;padding:0}
#communication > .comm-interpretations > .domain{display:block;width:100% !important;max-width:none !important;box-sizing:border-box}
@media(max-width:540px){#communication{grid-template-columns:minmax(0,1fr)}#communication > .report-section{grid-column:1/-1}}

/* v16: tighter mobile communication layout, no large section gutters. */
#communication{gap:4px;align-items:start}
#communication > .report-section{padding:6px 8px 8px}
#communication > .report-section:first-child{padding-top:5px}
#communication .report-section h3{font-size:1rem;line-height:1.25;margin:7px 0 10px}
#communication .report-section h4{font-size:.88rem;margin:9px 0 5px}
#communication .report-section p{margin:6px 0 9px}
#communication .comm-grid{gap:7px;margin:6px 0}
#communication .comm-grid label{gap:3px;font-size:.82rem}
#communication select{margin:3px 0 5px;padding:5px 8px;min-height:34px}
#communication .comm-actions{margin:6px 0;gap:6px}
#communication .comm-actions button,#communication > .report-section > button{min-height:34px;padding:6px 9px}
#communication .hint{font-size:.8rem;line-height:1.4}
#communication > .comm-interpretations{padding:4px 8px 8px !important}
#communication .comm-interpretations .domain{margin:6px 0;padding:10px 12px}
#communication .comm-interpretations .domain p{margin:7px 0 0}
@media(max-width:540px){#communication{gap:0}#communication > .report-section{padding:5px 8px 9px}#communication > .report-section:not(:first-child){border-top:1px solid #edf0f5}#communication .report-section h3{margin:7px 0 9px}#communication .comm-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}}

/* v17: predictable single-column section layout at every viewport size.
   Only the field groups use two columns; sections never compete for width. */
#communication{display:flex !important;flex-direction:column !important;gap:0 !important;align-items:stretch !important;width:100% !important;min-width:0}
#communication > .report-section{display:block !important;width:100% !important;min-width:0 !important;max-width:none !important;grid-column:auto !important;grid-row:auto !important;padding:9px 8px 11px !important;margin:0 !important}
#communication > .report-section + .report-section{border-top:1px solid #e8edf3}
#communication .report-section h3{margin:2px 0 9px !important;font-size:.97rem;line-height:1.3;text-transform:uppercase}
#communication .comm-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 9px;margin:5px 0 7px}
#communication .comm-grid > label{min-width:0;display:flex;flex-direction:column;gap:3px}
#communication .comm-grid input,#communication .comm-grid select{min-width:0;width:100%;max-width:100%;height:35px;min-height:35px;margin:0;padding:5px 8px}
#communication label:not(.comm-grid label){display:block;min-width:0}
#communication > .report-section > label > select{display:block;width:100%;max-width:100%;margin:5px 0 8px;min-width:0}
#communication .comm-actions{margin:7px 0;gap:7px}
#communication .report-section p{margin:7px 0 8px}
#communication .report-section h4{margin:9px 0 6px}
#communication > .comm-interpretations{padding:9px 8px 11px !important}
#communication .comm-interpretations .domain{width:100%;max-width:none;margin:7px 0;padding:11px 12px}
@media(max-width:360px){#communication .comm-grid{grid-template-columns:minmax(0,1fr)}}

/* v19: compact, readable controls and vertically stacked communication sections */
#communication{gap:0!important}
#communication > .report-section{padding:5px 6px 7px!important}
#communication .report-section h3{font-size:.86rem!important;margin:2px 0 5px!important;line-height:1.2!important}
#communication .report-section h4{font-size:.78rem!important;margin:6px 0 3px!important}
#communication .comm-grid{gap:5px 7px!important;margin:3px 0 5px!important}
#communication .comm-grid > label{font-size:.74rem!important;gap:2px!important}
#communication .comm-grid input,#communication .comm-grid select{height:31px!important;min-height:31px!important;padding:3px 6px!important;font-size:.78rem!important}
#communication > .report-section > label{font-size:.78rem!important}
#communication > .report-section > label > select{height:31px;min-height:31px;margin:3px 0 5px!important;padding:3px 7px!important;font-size:.78rem}
#communication .report-section p{margin:4px 0 5px!important;font-size:.78rem;line-height:1.35}
#communication .comm-actions{margin:4px 0!important;gap:5px!important}
#communication .comm-actions button,#communication > .report-section > button{min-height:31px!important;padding:4px 8px!important;font-size:.77rem!important}
#communication .comm-actions label{font-size:.78rem}
#communication .comm-interpretations .domain{padding:8px 9px!important;margin:5px 0!important}
#communication .comm-interpretations .domain p{font-size:.8rem!important;line-height:1.45}
#communication .hint{font-size:.74rem!important}
@media(max-width:360px){#communication .comm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* v20: three compact form columns when the screen can fit them.
   Keep major sections stacked to prevent the v16 overlap. */
#communication .comm-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:5px!important}
#communication .comm-grid > label{min-width:0;overflow:hidden;font-size:.7rem!important}
#communication .comm-grid input,#communication .comm-grid select{width:100%;min-width:0;font-size:.74rem!important;padding:3px 4px!important}
#communication > .report-section{padding:5px 5px 6px!important}
#communication .report-section h3{margin:2px 0 4px!important}
@media(max-width:390px){#communication .comm-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}

/* v21: three-column controls on normal phone viewports, including 360–390px. */
#communication .comm-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:5px!important}
#communication .comm-grid>label{min-width:0!important;overflow:visible!important;font-size:.7rem!important;overflow-wrap:anywhere}
#communication .comm-grid input,#communication .comm-grid select{min-width:0!important;width:100%!important;max-width:100%!important;box-sizing:border-box!important;font-size:.72rem!important;padding:3px 3px!important}
@media(max-width:320px){#communication .comm-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}

/* v22: encounter and interpretations full width; three independent action sections in one row. */
#communication{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:0 8px!important;align-items:start!important}
#communication>.report-section{min-width:0!important;width:100%!important;grid-column:auto!important;grid-row:auto!important;padding:7px 3px 9px!important;border-top:0!important}
#communication>.report-section:first-child,#communication>.report-section.comm-interpretations{grid-column:1/-1!important}
#communication>.report-section:nth-child(2){grid-column:1!important}
#communication>.report-section:nth-child(3){grid-column:2!important}
#communication>.report-section:nth-child(4){grid-column:3!important}
#communication>.report-section:nth-child(2),#communication>.report-section:nth-child(3),#communication>.report-section:nth-child(4){border-top:1px solid #e8edf3!important}
#communication>.report-section>label>select{width:100%!important;min-width:0!important;font-size:.73rem!important;padding:3px!important}
#communication>.report-section h3{font-size:.78rem!important;overflow-wrap:anywhere}
#communication>.report-section:nth-child(3) .comm-actions{gap:3px!important}
#communication>.report-section:nth-child(3) .comm-actions label{font-size:.69rem!important;white-space:nowrap}
#communication>.report-section:nth-child(3) .comm-actions input{width:12px;height:12px;margin:0;vertical-align:middle}
#communication>.report-section:nth-child(n+2):nth-child(-n+4) button{max-width:100%;font-size:.7rem!important;padding:5px 3px!important;white-space:normal;text-align:center}
#communication>.report-section:nth-child(3)>p{font-size:.71rem!important}
#communication>.report-section.comm-interpretations{border-top:1px solid #e8edf3!important;padding:7px 3px!important}
@media(max-width:340px){#communication{gap:0 4px!important}#communication>.report-section:nth-child(n+2):nth-child(-n+4) button{font-size:.65rem!important}}

/* v23: four primary encounter fields per row; resistance controls remain three columns. */
#communication .comm-grid.comm-encounter-fields{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:5px!important}
#communication .comm-encounter-fields>label{min-width:0!important;overflow-wrap:anywhere!important}
#communication .comm-encounter-fields select,#communication .comm-encounter-fields input{min-width:0!important;width:100%!important;font-size:.7rem!important}
@media(max-width:340px){#communication .comm-grid.comm-encounter-fields{grid-template-columns:repeat(2,minmax(0,1fr))!important}}

/* v27: hidden tab must override communication grid display rules. */
#communication[hidden], #content[hidden]{display:none!important}

/* v28: two top-level tabs with Report/Narrative nested under Character. */
[hidden]{display:none!important}
.main-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:9px 0 10px;overflow:visible}
.main-tabs button{width:100%;min-width:0;font-size:.9rem;min-height:37px}
.character-subtabs{display:flex;gap:6px;padding:9px 0 4px}
.character-subtabs button{flex:1;min-width:0}
#character-tools .controls{margin:0}