/* Builder tools extend the established preview; native app files are separate. */
main { align-items: start; margin-top: 16px; }
.intro, .side-note { align-self: start; margin-top: 160px; }
.intro h1 { letter-spacing: -.035em; }
.intro-rule { position: relative; display: flex; justify-content: space-between; width: 214px; height: 34px; margin: 40px 0 14px; border-top: 1px solid #7e9275; background: repeating-linear-gradient(90deg, #7e9275 0 1px, transparent 1px 17.75px) left top / 100% 7px no-repeat; }
.intro-rule span { padding-top: 16px; font-size: 11px; font-variant-numeric: tabular-nums; color: #5c6b53; }
.calculator { padding-top: 23px; border-radius: 16px; }
.calculator-heading { margin-bottom: 16px; }
.calculator-heading h2 { font-size: 19px; letter-spacing: -.025em; }
.calculator-heading { min-height: 44px; }
.calculator-brand { display: none; }
.calculator-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.calculator-actions .icon-button { width: 44px; height: 44px; }
#settings-open[aria-pressed=true] { background: var(--mint); color: var(--green); }
.settings-heading { display: flex; align-items: center; min-height: 44px; margin: 4px 0 28px; }
.settings-heading h3 { margin: 0; font-size: 23px; font-weight: 500; letter-spacing: -.025em; }
#settings-screen { min-height: 480px; padding: 0 0 24px; }
.settings-label { display: block; font-size: 16px; font-weight: 600; }
.settings-description { margin: 9px 0 18px; font-size: 13px; color: #5f6d57; line-height: 1.7; }
#settings-screen select { width: 100%; min-height: 52px; border: 1px solid #cfd8c9; border-radius: 8px; padding: 12px; font-size: 16px; background: #f5f7f2; color: #263e35; }
.language-current { margin: 12px 0 0; font-size: 13px; line-height: 1.6; color: var(--green); }
.settings-note { font-size: 12px; line-height: 1.8; color: #5f6d57; margin: 22px 0 0; }
.settings-units { padding-top: 22px; border-top: 1px solid var(--border); }
.settings-return { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px; margin-top: 26px; padding: 13px 16px; background: var(--green); color: #fff; border-radius: 9px; font-size: 15px; line-height: 1.4; }
.settings-return:hover { background: #37634e; }
.settings-return svg { width: 18px; height: 18px; }
.screen-switch { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 10px; }
.screen-switch button { width: 50%; min-height: 44px; font-size: 13px; border-bottom: 2px solid transparent; margin-bottom: -1px; color: #5e6b61; }
.screen-switch button[aria-pressed=true] { color: var(--green); border-color: var(--green); font-weight: 600; }
.screen-switch button:hover { background: #f5f7f2; }
.editor-top { margin-bottom: 5px; }
.editor-top button { min-height: 40px; }
.measurement-row { display: grid; grid-template-columns: 1fr 118px; gap: 13px; align-items: center; padding: 9px 0; }
.measurement-row + .measurement-row { border-top: 1px solid #eef0e9; }
.measure-fields { display: flex; align-items: center; gap: 9px; min-width: 0; }
.measure-fields label { display: flex; flex-direction: column; align-items: center; gap: 5px; flex: 1; min-width: 0; font-size: 10px; color: #5d6c56; }
.measure-fields input { width: 100%; height: 56px; border: 0; background: #f5f6f2; border-radius: 8px; text-align: center; color: #263e35; font-size: 29px; font-weight: 450; padding: 4px; font-variant-numeric: tabular-nums; }
.measure-fields input::placeholder { color: #6c7a63; opacity: 1; }
.measure-fields input.selected { background: #f0f4eb; box-shadow: inset 0 0 0 1.5px #91aa79; }
.measure-fields input.long { font-size: 17px; }
.measure-fields .fraction-group { display: flex; flex-direction: column; flex: 1; align-items: center; min-width: 0; gap: 4px; }
.fraction-group input { height: 33px; font-size: 23px; }
.fraction-group .fraction-line { width: 65%; height: 1.5px; }
.fraction-group .fraction-caption { font-size: 10px; color: #5d6c56; }
.fraction-group label { width: 100%; }
.measure-meta { align-self: center; }
.measure-meta > label { display: flex; align-items: center; gap: 5px; font-size: 10px; color: #5e6b61; margin-bottom: 4px; }
.measure-meta .operation-symbol { width: 15px; height: 15px; }
.measure-meta select { width: 100%; min-height: 44px; border: 1px solid #d8dfd1; background: #fff; border-radius: 8px; font-size: 11px; padding: 5px; color: #314e3e; }
#measurements { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.measurement-row { position: relative; display: flex; flex-direction: column-reverse; align-items: stretch; gap: 10px; padding: 0; }
.measurement-row + .measurement-row { border: 0; }
.measure-meta { width: 100%; }
.measure-meta .operation-symbol { position: absolute; left: -22px; top: 95px; width: 17px; height: 17px; }
.measure-fields { min-height: 91px; }
.measure-fields > label { align-self: center; }
.mixed-result { display: inline-flex; align-items: center; gap: 7px; }
.input-hint { text-align: left; margin: 6px 0 12px; font-size: 10px; }
.answer-panel { padding: 7px 12px 10px; }
.answer-heading .icon-button { width: 40px; height: 36px; }
.answer { font-variant-numeric: tabular-nums; font-size: 39px; gap: 7px; }
.answer .stack { font-size: 21px; }
.answer .result-unit { font-size: 17px; }
.answer-detail { font-size: 11px; line-height: 1.5; padding: 2px 0; }
.formats { gap: 2px; }
.formats button { flex: 1; min-height: 40px; padding: 0 5px; font-size: 11px; }
.tape-control { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #cddbc5; margin-top: 10px; padding-top: 6px; gap: 8px; font-size: 11px; color: #48613f; }
.tape-control select { max-width: 60%; min-height: 38px; padding: 5px 4px; background: transparent; border: 0; color: #2e4c28; font-size: 11px; border-radius: 6px; }
.tape-result { margin: 3px 0 2px; font-size: 12px; line-height: 1.5; color: #34512c; }
.simple-keypad { margin-top: 12px; grid-template-rows: repeat(4, 46px); gap: 6px; }
.simple-keypad.has-decimal .zero-key { grid-column: auto; }
.preview-caption { line-height: 1.5; font-size: 10px; }
.toast { max-width: calc(100vw - 32px); width: max-content; white-space: normal; text-align: center; line-height: 1.5; }
.tool-groups { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px; margin: 18px 0 8px; padding: 4px; background: #f2f5ee; border-radius: 10px; }
.tool-groups button { min-height: 44px; padding: 8px 4px; border: 1px solid transparent; border-radius: 7px; color: #5e6b61; font-size: 12px; overflow-wrap: anywhere; }
.tool-groups button[aria-pressed=true] { background: #fff; color: var(--green); border-color: #ccd8c5; font-weight: 600; }
.tool-groups button:hover { color: var(--green); }
.tool-tabs { display: flex; gap: 2px; padding: 5px 0 12px; border-bottom: 1px solid var(--border); }
.tool-tabs button { flex: 1; min-height: 42px; font-size: 11px; padding: 0 4px; border-radius: 8px; }
.tool-tabs button:hover { background: #f3f5ef; }
.tool-tabs button[aria-pressed=true] { background: var(--green); color: #fff; }
.tool-intro { margin: 25px 0 22px; }
.tool-intro h3 { font-size: 23px; font-weight: 500; margin: 0 0 9px; letter-spacing: -.025em; }
.tool-intro p { margin: 0; line-height: 1.7; color: #62705b; font-size: 12px; }
.tool-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.tool-title-row h3 { min-width: 0; }
#tool-clear { flex-shrink: 0; min-height: 44px; padding: 8px 0 8px 8px; font-size: 11px; color: #53684a; }
#tool-clear:hover { text-decoration: underline; }
#tool-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 12px; }
.tool-form-hint { grid-column: 1 / -1; margin: -4px 0 0; color: #5f6d57; font-size: 11px; line-height: 1.7; }
.tool-status { font-size: 12px; line-height: 1.6; }
.tool-status.error { color: #8c3a26; }
.tool-empty { line-height: 1.7; }
.tool-reference { display: inline-block; color: #496440; font-size: 11px; line-height: 1.7; min-height: 44px; padding: 10px 0; text-decoration: underline; text-underline-offset: 3px; }
.tool-field { display: flex; flex-direction: column; justify-content: space-between; gap: 7px; min-width: 0; color: #51634a; font-size: 12px; }
.tool-field.wide { grid-column: 1 / -1; }
.tool-field input, .tool-field select { width: 100%; min-height: 50px; padding: 11px 12px; border-radius: 8px; border: 1px solid #cfd8c9; background: #fff; color: #263e35; font-size: 15px; font-variant-numeric: tabular-nums; }
.tool-field input { background: #f5f7f2; border-color: #e1e7dc; }
.tool-field select { font-size: 13px; }
.tool-result { background: var(--mint); border-radius: 14px; padding: 19px 17px; margin-top: 26px; }
.tool-result p { margin: 0; font-size: 11px; color: #496440; }
.tool-result .tool-answer { margin: 10px 0 8px; font-size: 32px; line-height: 1.2; color: var(--green); font-weight: 500; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tool-answer small { font-size: 18px; font-weight: 400; }
.tool-result dl { margin: 15px 0 0; padding-top: 8px; border-top: 1px solid #cadac1; }
.tool-result dl > div { display: flex; justify-content: space-between; gap: 12px; padding-top: 11px; font-size: 12px; }
.tool-result dt { color: #496440; }
.tool-result dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; overflow-wrap: anywhere; }
.tool-result.error p { color: #8c3a26; font-size: 13px; line-height: 1.7; }
.tool-note { color: #5f6d57; font-size: 11px; line-height: 1.8; margin: 18px 0 5px; }
.history-item { align-items: start; flex-direction: column; gap: 6px; font-size: 13px; }
.history-item strong { font-size: 17px; }
#tools-screen { min-height: 540px; }
@media (max-width: 720px) {
  body { min-height: 100dvh; }
  .site-header { display: none; }
  .calculator { border-radius: 0; padding-top: 0; }
  .calculator-heading { display: flex; margin: 0 0 4px; min-height: 72px; }
  .calculator-heading h2 { display: none; }
  .calculator-brand { display: block; width: 150px; height: 50px; object-fit: contain; }
  .screen-switch { margin-bottom: 0; }
  .screen-switch button { min-height: 42px; }
  .editor-top { margin-bottom: 4px; }
  .editor-top button { min-height: 34px; }
  main { margin-top: 0; }
  .measure-fields { gap: 7px; }
  .measurement-row { gap: 5px; padding: 0; }
  .measure-fields { min-height: 84px; }
  .measure-meta > label { margin-bottom: 3px; }
  .measure-meta .operation-symbol { top: 88px; }
  .measure-fields input { font-size: 27px; }
  .fraction-group input { font-size: 22px; }
  .input-hint { margin: 4px 0 8px; }
  .operators { margin-bottom: 9px; }
  .operators button { height: 40px; }
  .answer-panel { min-height: 0; }
  .answer-heading .icon-button { height: 32px; }
  .answer { min-height: 52px; }
  .answer-detail { padding: 0; }
  .formats { margin-top: 2px; }
  .tape-control { margin-top: 6px; padding-top: 2px; }
  .simple-keypad { grid-template-rows: repeat(4, 44px); margin-top: 10px; gap: 4px; }
  .calculate-button { margin-top: 5px; }
  .preview-caption { margin-top: 10px; }
  #tools-screen { min-height: 0; padding-bottom: 28px; }
}
@media (max-width: 360px) {
  .measurement-row { grid-template-columns: 1fr 99px; gap: 8px; }
  .measure-fields { gap: 5px; }
  .measure-fields input { font-size: 23px; }
  .fraction-group input { font-size: 20px; }
  .calculator-heading h2 { font-size: 18px; }
}

/* Translations may wrap; controls grow instead of clipping. */
.tool-tabs {flex-wrap:wrap}.tool-tabs button {flex:1 1 54px;padding:8px 5px;overflow-wrap:anywhere}
.screen-switch button {padding:8px}.measure-meta select {font-size:13px}
.tool-field input,.tool-field select {font-size:16px}
.tape-control {flex-wrap:wrap}.tape-control select {max-width:100%}
#measurements {min-width:0}.measurement-row {min-width:0}
@media(max-width:720px){.site-header{min-height:72px;height:auto}}

/* Native selects do not wrap their selected text. The visible label can grow
   while the original select still handles touch, keyboard and accessibility. */
.wrapping-select { position: relative; display: grid; align-items: center; width: 100%; min-width: 0; min-height: 50px; border: 1px solid #cfd8c9; border-radius: 8px; background: #fff; color: #263e35; font-size: 16px; line-height: 1.4; }
.wrapping-select .selected-value { padding: 11px 27px 11px 12px; overflow-wrap: anywhere; }
.wrapping-select::after { content: ''; position: absolute; right: 12px; top: calc(50% - 4px); width: 6px; height: 6px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); pointer-events: none; }
.wrapping-select select { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; opacity: 0; cursor: pointer; }
.wrapping-select:focus-within { outline: 3px solid #7a9e65; outline-offset: 3px; }
.measure-meta .wrapping-select { min-height: 56px; font-size: 13px; }
.measure-meta .selected-value { padding: 8px 24px 8px 8px; }
.measure-meta .operation-symbol { top: 107px; }
.formats button { flex: 1 0 auto; }
.tool-tabs button { flex: 1 1 auto; overflow-wrap: normal; }
.tool-result dt, .tool-result dd { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 720px) {
  .measure-meta .operation-symbol { top: 100px; }
}
@media (max-width: 380px) {
  /* Three mixed-number fields need a full row on the narrowest phones. */
  #measurements:has(.has-feet) { grid-template-columns: 1fr; gap: 28px; }
  #measurements:has(.has-feet) .measure-meta .operation-symbol { left: calc(50% - 8px); top: -23px; }
}