/* Feet and inches calculator · MeisterCalc · loaded after /style.css and tools.css by the tool page and the embed */

/* "Add this calculator to your site" */
.embed-box { background: var(--surface, #1E1E1E); border: 1px solid var(--divider, #333); border-radius: var(--radius, 12px); padding: 16px; margin: 16px 0 24px; }
.embed-box textarea {
  display: block; width: 100%; min-height: 150px; resize: vertical; margin: 0 0 12px;
  background: var(--input, #2A2A2A); color: var(--white, #FFF); border: 1px solid var(--divider, #333); border-radius: 8px;
  padding: 10px 12px; font: 500 13.5px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.embed-box textarea:focus { outline: 2px solid var(--amber, #F5A623); outline-offset: 1px; }
.embed-box button {
  min-height: 44px; padding: 10px 18px; border: 0; border-radius: 8px; cursor: pointer;
  background: var(--amber, #F5A623); color: #111; font: 700 15px/1.2 var(--font, system-ui, sans-serif);
}
.embed-box button:focus-visible { outline: 2px solid var(--white, #FFF); outline-offset: 2px; }
.embed-box [hidden] { display: none !important; }

/* The embeddable copy (/embed/mm-to-feet-inches-converter): the tool alone, compact */
body.embed { padding: 0; margin: 0; min-height: 0; background: var(--bg, #121212); }
.embed-main { padding: 0; }
.embed .tool { margin: 0; border: 0; border-radius: 0; padding: 14px 14px 10px; }
.embed .tool-title { font-size: 18px; }
.embed .tool-sub { font-size: 13px; margin-bottom: 12px; }
.embed .tool-modes { margin-bottom: 12px; }
.embed .tool-seg span { padding: 8px 6px; font-size: 13.5px; }
.embed .tool-field input, .embed .tool-field select { min-height: 42px; }
.embed .tool-results { margin-top: 12px; }
.embed .tool-row { padding: 7px 0; }
.embed .tool-row.tool-hero dd { font-size: 20px; }
.embed-credit { margin: 0; padding: 8px 14px 12px; font-size: 13px; line-height: 1.4; color: var(--text-sec, #AAA); text-align: right; }
.embed-credit a { color: var(--amber, #F5A623); }

/* Feet + inches pairs and the rounding choice (v2, 1 Nov 2026). The page also gets .tool-ftin from /style.css; the
   embed loads only tools.css and this file. */
.tool-ftin { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tool-ftin .tool-input input { padding-right: 36px; }
.mf-prec-field { margin-top: 16px; }
#mf-in-add .tool-hint { margin-top: -4px; }
.embed .mf-prec-field { margin-top: 12px; }