.builder-layout { display:grid; grid-template-columns:minmax(0,1fr) 350px; gap:23px; }
.quote-aside .panel { position:sticky; top:22px; }
.form-grid.three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.intro-hint { margin:-5px 0 20px; }
.calculated-pill { background:#edf4ee; color:#197652; border-radius:20px; padding:7px 12px; font-size:11px; font-weight:700; white-space:nowrap; }
.explain-line { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:20px; padding:14px; background:#f7f9f6; border-radius:8px; color:#758078; font-size:10px; }
.explain-line strong { display:block; color:#202923; font-size:13px; margin-top:3px; }
.quote-result .result-label { color:#b8cabd; font-size:11px; }
.quote-result > h2 { font-size:45px; letter-spacing:-2px; color:#dcf3b4; margin:4px 0 20px; }
.quote-line { display:flex; justify-content:space-between; gap:12px; padding:11px 0; border-bottom:1px solid #46604f; font-size:11px; }
.quote-line span { color:#b8cabd; }
.quote-line strong { color:#fff; }
.quote-line.emphasis { font-size:12px; }
.quote-line.emphasis strong { color:#dcf3b4; }
.range-note { background:#365240; border-radius:8px; padding:15px; margin:22px 0 5px; }
.range-note strong { font-size:11px; color:#fff; }
.range-note p { font-size:10px; color:#bed0c2; margin:6px 0 0; line-height:1.5; }

@media (max-width:1200px) {
  .builder-layout { grid-template-columns:minmax(0,1fr); }
  .quote-aside .panel { position:static; }
}
@media (max-width:850px) {
  .form-grid.three { grid-template-columns:1fr 1fr; }
  .sidebar nav { overflow:auto; }
}
@media (max-width:520px) {
  .form-grid.three, .explain-line { grid-template-columns:1fr; }
  .calculated-pill { white-space:normal; }
  .quote-result > h2 { font-size:38px; }
  .sidebar nav { justify-content:flex-start; }
}
.field-help { font-size:11px; font-weight:400; color:#657169; line-height:1.5; }
.help-field { min-width:0; }
.field-explanation { margin-top:8px; font-size:11px; color:#52645a; }
.field-explanation summary,.calculation-help summary { cursor:pointer; padding:7px 0; font-weight:600; }
.field-explanation p { padding:10px; background:#f1f6ef; border-radius:6px; margin:4px 0 0; line-height:1.6; }
.calculation-help { margin-top:16px; color:#e4efdf; font-size:12px; }
.calculation-help p { line-height:1.7; padding-top:8px; }
.field-explanation summary:focus-visible,.calculation-help summary:focus-visible { outline:2px solid #65ac7d; outline-offset:3px; }
.preferences { border:1px solid #dce3db; padding:16px; border-radius:8px; margin:20px 0; }
.preferences legend { font-weight:650; font-size:13px; }
.preference-card { padding:12px; border:1px solid #e4e9e5; border-radius:7px; margin:10px 0; background:#f8faf7; }
.preference-card input,input[type="checkbox"] { width:auto; }
.preference-card small { font-weight:400; line-height:1.8; }
.settings-form { max-width:780px; }
.settings-form > label { margin-bottom:20px; }
.settings-form > button { margin-top:20px; }
[hidden] { display:none!important; }
#guided-builder details { margin-top:15px; }
#guided-builder summary { cursor:pointer; padding:8px 0; }
#guided-builder details label { margin-top:12px; }
#guided-builder .form-grid { margin-top:18px; }
.auth-switch { text-align:center; margin-top:8px; font-size:13px; }
.auth-switch a { color:var(--green); font-weight:650; text-decoration:underline; }
.avatar { overflow:hidden; }
.account-signout { margin:0; flex-shrink:0; }
.signout-button { min-height:44px; padding:9px 12px; border:1px solid #cbd8ce; border-radius:7px; background:#fff; color:#25563e; font-size:12px; font-weight:650; white-space:nowrap; }
.signout-button:hover { background:#edf4ee; }
.topbar > span:first-child { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.topbar-right { flex-shrink:0; }
@media(max-width:520px) {
  .topbar { gap:10px; min-height:62px; height:auto; padding:8px 14px; }
  .topbar-right { gap:9px; }
  .account-currency { display:none; }
}
/* Avoid native iOS date controls forcing a grid track wider than its cell. */
.form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.form-grid > *, .form-grid label, .editor-layout > *, .builder-layout > * { min-width:0; max-width:100%; }
input[type="date"] { display:block; width:100%; min-width:0; max-width:100%; box-sizing:border-box; min-height:44px; }
input[type="date"]::-webkit-date-and-time-value { text-align:left; min-width:0; }
@media(max-width:600px) {
  .form-grid, .form-grid.three { grid-template-columns:minmax(0,1fr); }
  input[type="date"] { font-size:16px; }
}

/* Keep mobile date layout overrides after all component breakpoints. */
@media(max-width:600px) {
  .form-grid,.form-grid.three { grid-template-columns:minmax(0,1fr); }
  .form-grid > *,label { min-width:0; }
  input[type="date"] { width:100%; min-width:0; max-width:100%; font-size:16px; }
}

/* Date fields occupy their own row, even with a desktop-sized viewport. */
.form-grid > .date-field { grid-column:1 / -1; display:flex; min-width:0; width:100%; max-width:100%; overflow:hidden; }
.date-field input[type="date"] { -webkit-appearance:none; appearance:none; display:block; flex:0 1 auto; width:100%; min-width:0; max-width:100%; min-height:44px; box-sizing:border-box; }
.date-field input[type="date"]::-webkit-datetime-edit { display:block; padding:0; min-width:0; }
.date-field input[type="date"]::-webkit-date-and-time-value { text-align:left; white-space:nowrap; min-width:0; }
@media(max-width:850px) {
  #guided-builder .form-grid, #job-form .form-grid, .panel > form.form-grid { grid-template-columns:minmax(0,1fr); }
  .form-grid input,.form-grid select { min-width:0; max-width:100%; }
}
@media(pointer:coarse) and (max-width:1100px) {
  #guided-builder .form-grid, #job-form .form-grid, .panel > form.form-grid { grid-template-columns:minmax(0,1fr); }
}