.settings-layout { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(250px,.7fr); gap:20px; align-items:start; }
.settings-column { display:grid; gap:16px; }
.settings-card { padding:20px; }
.settings-card h2 { margin-bottom:6px; }
.settings-card p { color:#8390a0; font-size:12px; margin-bottom:17px; }
.setting-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0; border-top:1px solid #e9edf1; }
.setting-row:first-child { border-top:0; }
.setting-row .label-strong { font-weight:700; font-size:12px; }
.setting-row .label-explain { font-size:11px; color:#8895a5; margin-top:3px; }
.setting-row .input { max-width:210px; }
.setting-row input[type="checkbox"] { accent-color:#b7242d; width:16px; height:16px; cursor:pointer; }
.settings-colors { display:grid; grid-template-columns:1fr 190px 90px; align-items:center; gap:10px; padding:8px 0; border-top:1px solid #edf0f4; }
.settings-colors input[type="color"] { width:36px; height:31px; padding:2px; border:1px solid #d7dfe7; border-radius:6px; background:#fff; }
.settings-color-fields { display:flex; justify-content:end; gap:8px; }
.settings-color-fields label { font-size:10px; color:#7c8897; display:flex; flex-direction:column; align-items:center; gap:2px; }
.settings-preview { padding:15px; background:#f7f9fb; border-radius:10px; border:1px solid var(--line); margin-top:8px; }
.settings-preview strong { display:block; margin-bottom:10px; font-size:11px; text-transform:uppercase; letter-spacing:1.1px; color:#7e8a99; }
.settings-preview .sample-cell { width:100%; max-width:280px; padding:10px; border:1px solid #dde3e9; background:#fff; border-radius:6px; }
.settings-subtitle { font-size:11px; text-transform:uppercase; letter-spacing:1px; color:#9aa5b3; margin-top:15px; margin-bottom:5px; font-weight:800; }
@media (max-width:1100px) { .settings-layout { grid-template-columns:1fr; } }
@media (max-width:620px) { .settings-colors { grid-template-columns:1fr 1fr; } .settings-color-fields { grid-column:2; } }


/* V0.3 - editable text treatments per planning type and private notes */
.settings-colors { row-gap:6px; padding:12px 0; }
.settings-colors .format-preview { text-align:center; overflow-wrap:anywhere; max-height:none; -webkit-line-clamp:3; }
.type-font-controls {
  grid-column:1/-1; display:flex; align-items:end; flex-wrap:wrap; gap:8px 11px;
  padding:7px 9px; margin-top:1px; background:#f8fafc; border:1px solid #e9edf2; border-radius:7px;
}
.font-select-label { font-size:10px; font-weight:750; color:#738092; display:flex; flex-direction:column; gap:4px; }
.font-select { min-width:117px; max-width:144px; height:30px; padding:4px 7px; font-size:11px; }
.font-size-select { width:74px; height:30px; padding:4px 5px; font-size:11px; }
.text-format-buttons { display:flex; align-items:center; gap:6px; margin-left:auto; }
.text-style-option {
  display:inline-flex; align-items:center; gap:4px;
  padding:4px 7px; border:1px solid #dbe2eb; background:#fff; border-radius:6px;
  font-size:11px; color:#5c6979; cursor:pointer; white-space:nowrap;
}
.text-style-option:has(input:checked) { border-color:#8eaaca; background:#eaf3fd; color:#174e86; }
.text-style-option input { width:13px; height:13px; accent-color:#356aa1; margin:0 2px 0 0; }
.text-style-option .format-character { min-width:12px; text-align:center; color:#263949; }
.text-style-option .format-label { font-size:10px; }
.note-style-preview {
  display:flex; align-items:baseline; gap:5px; margin-top:11px;
  padding:10px 3px; font-size:11px; color:#56606b;
}
.note-style-preview .note-lock { color:#5c6670; filter:grayscale(1); font-size:12px; }
.note-style-preview .note-copy {
  font-family:var(--type-family,inherit); font-size:var(--type-size,10px);
  font-weight:var(--type-weight,400); font-style:var(--type-italic,italic);
  text-decoration:var(--type-underline,none); color:#56606b;
}
.disclosure-button {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  text-align:left; border:0; background:none; padding:0; width:100%; color:var(--ink);
}
.disclosure-button strong { display:block; font-size:15px; letter-spacing:-.15px; }
.disclosure-button small { display:block; font-size:11px; color:#8a96a4; margin-top:5px; }
.disclosure-arrow { font-size:19px; color:#667688; }
.disclosure-button:hover strong { color:#a51e29; }
.disclosure-content { padding-top:17px; margin-top:15px; border-top:1px solid #e5eaf0; }
.disclosure-content p { margin-bottom:9px; }
@media (max-width:760px) {
  .type-font-controls { gap:8px; }
  .text-format-buttons { margin-left:0; flex-wrap:wrap; }
  .text-style-option .format-label { display:none; }
}
@media (max-width:620px) { .settings-colors { grid-template-columns:1fr 1fr; } }


/* V0.4: text alignment choices and non-destructive technician roster */
.align-buttons { display:inline-flex; gap:3px; border:1px solid #dce3eb; border-radius:6px; background:white; padding:3px; }
.align-option { border:0; border-radius:4px; padding:5px 8px; font-size:10px; background:transparent; font-weight:700; color:#596879; white-space:nowrap; cursor:pointer; }
.align-option.active { background:#e4f0fa; color:#125587; box-shadow:0 0 0 1px #b7d4e9 inset; }
.align-option:hover { background:#f1f6fb; }
.header-font-preview {
  font-family:var(--type-family,inherit);
  font-size:var(--type-size,11px);
  font-weight:var(--type-weight,750);
  font-style:var(--type-italic,normal);
  text-decoration:var(--type-underline,none);
  text-align:var(--type-align,center);
  padding:10px 12px;
  border-radius:6px;
  margin:9px 0 15px;
  border:1px solid #d7dee4;
}
.settings-colors .event-pill,
.settings-preview .event-pill { text-align:var(--type-align,left); }
.note-style-preview { justify-content:var(--note-justify,flex-start); }
.note-style-preview .note-copy { text-align:var(--type-align,left); }
.roster-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.roster-column { min-width:0; padding:12px; border:1px solid #e0e6ed; border-radius:9px; background:#fbfcfe; }
.roster-column h3 { font-size:13px; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:2px 0 10px; margin:0; border-bottom:1px solid #e4eaf0; }
.roster-scroll { max-height:420px; overflow:auto; padding:4px 0; scrollbar-width:thin; }
.roster-person { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 1px; border-bottom:1px solid #edf0f4; }
.roster-person:last-child { border-bottom:0; }
.roster-person-info { flex:1; min-width:0; display:flex; flex-direction:column; align-items:start; gap:4px; }
.roster-person-info strong { font-size:12px; overflow-wrap:anywhere; }
.roster-team-select { max-width:175px; min-width:110px; width:100%; height:30px; padding:4px 8px; font-size:11px; }
.roster-date-label { color:#8390a0; font-size:10px; display:flex; flex-direction:column; gap:3px; }
.roster-date-label input { max-width:160px; }
.roster-archive { color:#687687; }
.roster-archive:hover { color:#af2631; border-color:#edcbd0; }
.add-technician-panel { margin-top:18px; padding-top:17px; border-top:1px solid #e6eaf0; }
.add-technician-panel h3 { margin:0 0 9px; font-size:13px; }
.new-technician-form { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(150px,1fr) auto; align-items:end; gap:10px; margin:10px 0 8px; }
.new-technician-form .font-select-label { min-width:0; }
.new-technician-form .btn { margin-bottom:0; }
.roster-message { min-height:15px; color:#ac2730; }
@media (max-width:1050px) { .roster-grid { grid-template-columns:1fr; } }
@media (max-width:620px) {
  .new-technician-form { grid-template-columns:1fr; }
  .new-technician-form .btn { width:100%; }
  .align-option { padding:5px 6px; }
}