.instruction-editor { color: #24354b; line-height: 1.65; }
.instruction-editor .instruction-card { padding: 18px 20px; margin: 0 0 16px; background: #fff; border: 1px solid #dbe3ec; border-radius: 8px; box-shadow: 0 1px 2px #1228440a; }
.instruction-editor h2 { margin: 0 0 12px; font-size: 20px; }
.instruction-editor h3 { margin: 0 0 14px; font-size: 17px; color: #1f3a5f; }
.instruction-editor .instruction-lead { font-size: 14px; margin: 10px 0 18px; }
.instruction-editor .instruction-note { font-size: 12px; color: #56657a; line-height: 1.7; }
.instruction-editor .instruction-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.instruction-editor .instruction-file-menu { margin-top: 8px; font-size: 13px; }
.instruction-editor .instruction-file-menu summary { cursor: pointer; color: #52657d; }
.instruction-editor button { font: inherit; font-size: 13px; line-height: 1.5; border-radius: 5px; padding: 9px 12px; }
.instruction-editor .instruction-button-secondary { background: #e9eef5; color: #243b57; }
.instruction-editor button:disabled { cursor: not-allowed; }
.instruction-editor button:focus-visible, .instruction-editor input:focus-visible, .instruction-editor textarea:focus-visible, .instruction-editor select:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
.instruction-editor .instruction-message { padding: 10px 12px; background: #edf6ff; border: 1px solid #c0dbf5; border-radius: 5px; font-size: 13px; }
.instruction-editor .instruction-message:empty { display: none; }
.instruction-editor .instruction-message-error { background: #fff3ed; border-color: #df9f81; color: #8b3011; }
.instruction-editor .instruction-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.instruction-editor .instruction-field { min-width: 0; display: flex; flex-direction: column; gap: 5px; color: #33465f; font-size: 13px; }
.instruction-editor .instruction-field-wide { grid-column: 1 / -1; }
.instruction-editor input:not([type=checkbox]), .instruction-editor textarea, .instruction-editor select { box-sizing: border-box; width: 100%; min-width: 0; padding: 9px 10px; border: 1px solid #bfcbd9; border-radius: 4px; font: inherit; font-size: 14px; background: #fff; color: #24354b; }
.instruction-editor textarea { resize: vertical; min-height: 75px; }
.instruction-editor .instruction-count { font-weight: 700; font-size: 15px; }
.instruction-editor .instruction-hole { min-width: 0; margin: 16px 0 0; padding: 14px 16px; border: 1px solid #b9cce0; border-radius: 6px; background: #f8fbff; }
.instruction-editor .instruction-hole legend { padding: 0 6px; font-weight: 700; font-size: 14px; }
.instruction-editor .instruction-hole > button { margin-top: 12px; }
.instruction-editor .instruction-test { border-top: 1px solid #e1e7ef; padding: 14px 0; }
.instruction-editor .instruction-checkbox { display: flex; flex-direction: row; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: #24354b; }
.instruction-editor .instruction-checkbox input { width: 18px; height: 18px; margin: 0; accent-color: #245fa5; }
.instruction-editor .instruction-test .instruction-grid { margin-top: 12px; }
.instruction-editor .instruction-references { padding-left: 22px; font-size: 13px; }
.instruction-editor .instruction-references li { padding: 5px 0; overflow-wrap: anywhere; }
.instruction-editor .instruction-references a { margin-left: 12px; }
.instruction-editor .instruction-map-host { margin: 14px 0; }
.instruction-editor .instruction-lateral { grid-column: 1 / -1; border: 1px solid #cbd5e1; border-radius: 5px; padding: 12px; background: #f8fafc; font-size: 13px; }
.instruction-editor .instruction-lateral input { max-width: 160px; }
.instruction-editor .instruction-lateral details { margin: 8px 0; }
.instruction-editor .instruction-lateral summary { cursor: pointer; }
@media (max-width: 650px) {
  .instruction-editor .instruction-card { padding: 16px 12px; }
  .instruction-editor .instruction-grid { grid-template-columns: minmax(0, 1fr); }
  .instruction-editor .instruction-toolbar > button { flex: 1 1 150px; }
}

#instruction-app {max-width:1100px;}
#instruction-app .instruction-editor {display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,360px);gap:18px;align-items:start;}
.instruction-form {min-width:0;}
.instruction-editor .instruction-reference-pane {position:sticky;top:12px;min-width:0;margin-top:0;max-height:calc(100vh - 24px);overflow:auto;}
.instruction-reference-chart .nearby-boring-card {width:100%;max-width:none;box-sizing:border-box;}
.instruction-reference-chart .nearby-boring-summary {min-width:0;}
.instruction-reference-pane select {width:100%;padding:10px;border:1px solid #b9cce0;border-radius:4px;background:white;color:#24354b;}
@media(max-width:900px){#instruction-app .instruction-editor{grid-template-columns:minmax(0,1fr);}.instruction-editor .instruction-reference-pane{position:static;max-height:none;grid-row:1;}}

.instruction-depth-result{padding:12px;border-left:4px solid #d9480f;background:#fff7ed;color:#7c2d12;font-weight:600;line-height:1.7;}

.instruction-depth-extras{margin-top:14px;}
.instruction-depth-extras summary{cursor:pointer;color:#52667a;font-size:13px;}
.instruction-depth-extras[open] summary{margin-bottom:12px;}

.instruction-depth-warning{border:1px solid #e9a23b;border-left:4px solid #c77800;background:#fff8e6;padding:12px;color:#7b3f00;font-size:13px;line-height:1.7;}

.instruction-depth-spinner{position:relative;min-width:0;width:100%;}
.instruction-editor .instruction-depth-spinner input{padding-right:34px;max-width:none;appearance:textfield;-moz-appearance:textfield;}
.instruction-depth-spinner input::-webkit-inner-spin-button,.instruction-depth-spinner input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}
.instruction-depth-spinner-controls{position:absolute;right:2px;top:2px;bottom:2px;width:27px;display:flex;flex-direction:column;}
.instruction-editor .instruction-depth-spinner-controls button{padding:0;border:0;border-left:1px solid #dbe3ec;border-radius:0;background:#f2f5f9;color:#52667a;font-size:10px;line-height:1;flex:1;min-height:0;cursor:pointer;}
.instruction-editor .instruction-depth-spinner-controls button:hover{background:#dce8f6;}
.instruction-lateral .instruction-depth-spinner{max-width:160px;}

.instruction-grain-accelerations{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;font-size:13px;margin:10px 0;}
.instruction-grain-accelerations label,.instruction-grain-adopt,.instruction-grain-depth{display:flex;flex-direction:row;align-items:center;gap:6px;}
.instruction-editor .instruction-grain-accelerations input,.instruction-editor .instruction-grain-adopt input{width:17px;height:17px;accent-color:#245fa5;}
.instruction-grain-point{display:grid;grid-template-columns:40px minmax(100px,150px) minmax(0,1fr) auto;gap:8px;align-items:center;border:1px solid #dbe3ec;padding:10px;margin:8px 0;border-radius:4px;background:#fff;font-size:12px;}
.instruction-grain-point-note{grid-column:2/4;color:#855a22;}
.instruction-grain-point-order{grid-column:4;grid-row:1;display:flex;gap:4px;}
.instruction-editor .instruction-grain-point-order button{padding:4px 8px;}
@media(max-width:650px){.instruction-grain-point{grid-template-columns:34px minmax(0,1fr) auto;}.instruction-grain-point-order{grid-column:3;}.instruction-grain-point-meta,.instruction-grain-point-note{grid-column:2/4;}}

.instruction-grain-modes{display:flex;gap:8px;margin:10px 0;}
.instruction-grain-modes button[aria-pressed="true"]{background:#356db4;color:white;}
.instruction-grain-accelerations[hidden]{display:none;}

.instruction-lateral-point{display:flex;align-items:flex-end;gap:8px;margin-bottom:8px;}.instruction-lateral-point>.instruction-field{flex:1;}.instruction-lateral-point>button{flex:0 0 auto;}