/* falakbin.ir/tools (ToolPages) and the home page's small calculator.
   Loaded after public.css and pages.css. */

.flk-tl-cards { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.flk-tl-cards li { display: flex; flex-direction: column; gap: 8px; }
.flk-tl-cards a { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 18px 20px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); color: var(--fg); text-decoration: none; box-shadow: var(--shadow); }
.flk-tl-cards a:hover { border-color: var(--teal); }
.flk-tl-cards h2 { margin: 0; font-size: 1.15rem; font-weight: 850; }
.flk-tl-cards p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.95; }
.flk-tl-cards code { padding: 4px 10px; border-radius: 8px; background: var(--surface-2); font-size: .85rem; }
.flk-tl-cards .flk-btn { margin-top: auto; }
.flk-tl-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--teal-soft); color: var(--teal-ink); }
.flk-tl-icon .flk-i { width: 24px; height: 24px; }
.flk-tl-bot { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0 6px; color: var(--muted); font-size: .8rem; }

/* ---- The app box ------------------------------------------------------------------- */
.flk-tl-app { margin: 0 0 18px; padding: 16px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.flk-tl-box { display: block; }
.flk-tl-box textarea { display: block; width: 100%; box-sizing: border-box; min-height: 92px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg-2); color: var(--fg);
    font: inherit; font-size: 1.15rem; line-height: 1.8; resize: vertical; }
.flk-tl-box textarea:focus { outline: 2px solid var(--teal); outline-offset: 1px; }
.flk-tl-formula .flk-tl-box textarea { font-family: ui-monospace, Consolas, monospace; font-size: 1rem; }
.flk-tl-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 0 6px; color: var(--muted); font-size: .78rem; }
.flk-tl-out { display: flex; flex-direction: column; gap: 10px; min-height: 64px; transition: opacity .15s; }
.flk-tl-busy textarea, .flk-tl-busy input { opacity: .55; }
/* While the sum is worked out: a spinner where the answer will be; the answer then rises into place. */
.flk-tl-wait { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 64px; color: var(--muted); font-size: .9rem; }
.flk-tl-spin { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--orange); animation: flk-tl-turn .8s linear infinite; }
@keyframes flk-tl-turn { to { transform: rotate(360deg); } }
.flk-tl-in > * { animation: flk-tl-rise .35s ease-out both; }
.flk-tl-in .flk-tl-line { box-shadow: 0 0 0 1px var(--teal); transition: box-shadow 1.2s; }
.flk-tl-in.flk-tl-settled .flk-tl-line { box-shadow: none; }
@keyframes flk-tl-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .flk-tl-spin { animation-duration: 2.4s; } .flk-tl-in > * { animation: none; } }
.flk-tl-line { position: relative; overflow: hidden; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line-soft); }
/* The answer on its own lit panel; the formula under it on the card's plain ground. */
.flk-tl-main { padding: 12px 56px 12px 14px; background: var(--teal-soft); border-bottom: 1px solid var(--line); }
.flk-tl-bad .flk-tl-main { background: var(--orange-soft); padding-inline-start: 14px; }
.flk-tl-line .flk-tl-formula { margin: 0; padding: 8px 14px; border-top: 1px solid var(--line-soft); }
/* Copy: the card's top corner, with a tip that says what it does and then that it did. */
.flk-tl-copy { position: absolute; top: 10px; inset-inline-start: 10px; }
.flk-tl-copy::after { content: attr(data-tip); position: absolute; top: 50%; right: calc(100% + 8px); transform: translateY(-50%); padding: 4px 10px; border-radius: 8px; background: var(--fg); color: var(--bg); font-size: .78rem; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .15s; }
.flk-tl-copy:hover::after, .flk-tl-copy:focus-visible::after, .flk-tl-copied::after { opacity: 1; }
.flk-tl-bad { border-color: var(--warn); }
.flk-tl-read { margin: 0 0 4px; color: var(--muted); font-size: .82rem; }
.flk-tl-read code { padding: 1px 6px; border-radius: 6px; background: var(--bg-2); color: var(--fg); overflow-wrap: anywhere; }
.flk-tl-label { font-weight: 800; color: var(--fg); }
.flk-tl-ans { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; font-size: 1.5rem; }
/* Figures and formulas are Latin: they read from the left, the answer first. */
.flk-tl-ans[dir="ltr"] { justify-content: flex-start; text-align: left; }
.flk-tl-line > small { text-align: start; }
.flk-tl-formula { margin: 8px 0 0; text-align: left; }
.flk-tl-formula code { display: inline-block; padding: 3px 10px; border-radius: 8px; background: var(--bg-2); color: var(--muted); font-size: .9rem; overflow-wrap: anywhere; }
.flk-tl-sep2 { color: var(--muted); }
.flk-tl-acts { display: flex; align-items: center; gap: 8px; }
.flk-tl-go { min-width: 120px; justify-content: center; }
.flk-tl-go:disabled { opacity: .7; cursor: progress; }
.flk-tl-out:empty { display: none; }
.flk-tl-ans b { font-weight: 900; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.flk-tl-bad .flk-tl-ans { font-size: 1rem; color: var(--warn); }
.flk-tl-main small { display: block; margin-top: 2px; color: var(--muted); font-size: .86rem; line-height: 1.9; }
.flk-tl-copied { color: var(--teal-ink); border-color: var(--teal); }
.flk-tl-none { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--orange-soft); font-size: .9rem; line-height: 1.9; }
.flk-tl-note { margin: 8px 0 0; color: var(--muted); font-size: .85rem; line-height: 1.9; }
.flk-tl-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 26px; align-items: start; }
@media (max-width: 860px) { .flk-tl-two { grid-template-columns: minmax(0, 1fr); } }
.flk-tl-samples .flk-chip, .flk-tl-pieces .flk-chip { cursor: pointer; font: inherit; font-size: .84rem; }
.flk-tl-more { display: flex; gap: 8px; align-items: flex-start; margin: 14px 0 0; padding: 10px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line-soft); color: var(--muted); font-size: .86rem; line-height: 1.9; }
.flk-tl-more .flk-i { flex: none; margin-top: 5px; color: var(--teal-ink); }
.flk-tl-history { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.flk-tl-history button { display: flex; justify-content: space-between; gap: 12px; width: 100%; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--line-soft); background: var(--surface); color: var(--fg); font: inherit; font-size: .88rem; cursor: pointer; text-align: start; }
.flk-tl-history button:hover { border-color: var(--teal); }
.flk-tl-history span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flk-tl-history b { flex: none; font-variant-numeric: tabular-nums; }
.flk-sec-head [data-calc-forget][hidden] { display: none; }

/* ---- Formula ------------------------------------------------------------------------- */
.flk-tl-preview { margin: 12px 0 0; min-height: 110px; display: grid; place-items: center; padding: 18px; border-radius: 16px; background: #ffffff; color: #111111; overflow-x: auto; }
.flk-tl-preview.flk-tl-dark { background: #0b1f23; color: #eef6f5; }
.flk-tl-preview mjx-container { display: block; margin: 0; }
/* MathJax's own sheet is refused by the page's policy; its MathML copy stays for screen readers, out of sight. */
.flk-tl-preview mjx-assistive-mml { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.flk-tl-preview svg { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.flk-tl-preview .flk-muted { color: #5f7375; }
.flk-tl-error { margin: 8px 0 0; color: var(--warn); font-size: .88rem; }
.flk-tl-error[hidden] { display: none; }
.flk-tl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.flk-tl-actions .flk-chip { cursor: pointer; font: inherit; font-size: .82rem; }
.flk-tl-actions .flk-chip[aria-pressed="true"] { border-color: var(--teal); background: var(--teal-soft); color: var(--teal-ink); }
.flk-tl-actions button:disabled { opacity: .5; cursor: default; }
.flk-tl-sep { flex: 1; }

/* The words box above the editor: the formula bot's model (SiteFormula). */
.flk-tl-ask { margin: 0 0 14px; padding: 0 0 14px; border-bottom: 1px solid var(--line-soft); }
.flk-tl-ask[hidden], .flk-tl-ask [hidden], .flk-tl-ask-off[hidden] { display: none; }
.flk-tl-ask-label { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; color: var(--muted); font-size: .84rem; font-weight: 750; }
.flk-tl-ask-label .flk-i { width: 18px; height: 18px; color: var(--teal-ink); }
.flk-tl-formula .flk-tl-ask textarea { min-height: 64px; font-family: inherit; font-size: 1rem; }
/* The calculator's .flk-tl-formula (its reading, left to right) must not reach this page's section of the same name. */
.flk-tl-app.flk-tl-formula { margin: 0 0 18px; text-align: start; }
/* The box and its button side by side; the slot keeps the button's place until the script makes it. */
.flk-tl-ask-row { display: flex; align-items: stretch; gap: 10px; }
.flk-tl-ask-row textarea { flex: 1; min-width: 0; box-sizing: border-box; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg-2); color: var(--fg); resize: vertical; }
.flk-tl-ask-row textarea:focus { outline: 2px solid var(--teal); outline-offset: 1px; }
.flk-tl-go-slot { display: flex; flex: none; width: 150px; }
.flk-tl-fx-go { flex: 1; justify-content: center; font-size: 1rem; font-weight: 850; border-radius: 14px; }
.flk-tl-fx-go:disabled { opacity: .7; cursor: progress; }
@media (max-width: 600px) { .flk-tl-ask-row { flex-direction: column; } .flk-tl-go-slot { width: auto; min-height: 46px; } }
.flk-tl-ask-note { text-align: start; }
/* A request that got no formula: said in yellow, where it cannot be missed. */
.flk-tl-ask-note.flk-tl-ask-warn { padding: 10px 14px; border-radius: 12px; border: 1px solid var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--fg); }
.flk-tl-ask-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 10px 0; }
.flk-tl-ask-bar button:disabled { opacity: .6; cursor: progress; }
.flk-tl-ask .flk-chips + .flk-chips { margin-top: 8px; }
.flk-tl-ask-note { margin: 10px 0 0; color: var(--muted); font-size: .88rem; line-height: 1.9; }
/* The LaTeX behind the words box: closed until the reader wants it, or the model is shut. */
.flk-tl-code { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.flk-tl-code summary { display: flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; color: var(--muted); font-size: .88rem; font-weight: 750; }
.flk-tl-code summary::-webkit-details-marker { display: none; }
.flk-tl-code summary::after { content: "▾"; }
.flk-tl-code[open] summary::after { content: "▴"; }
.flk-tl-code summary .flk-i { width: 18px; height: 18px; color: var(--teal-ink); }
.flk-tl-tex { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; }
.flk-tl-tex[hidden] { display: none; }
.flk-tl-tex code { flex: 1; min-width: 0; padding: 8px 12px; border-radius: 10px; background: var(--bg-2); color: var(--muted); font-size: .85rem; overflow-x: auto; white-space: nowrap; }
.flk-tl-formula .flk-tl-ask textarea:placeholder-shown { font-family: inherit; }
.flk-tl-code .flk-chips { margin-top: 10px; }
.flk-tl-ask-off { margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line-soft); color: var(--muted); font-size: .88rem; line-height: 1.9; }
/* A field no person fills (SiteFormula drops a request that has it). */
.flk-tl-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); opacity: 0; pointer-events: none; }
/* ---- Units ------------------------------------------------------------------------------- */
.flk-tl-units { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 10px; }
.flk-tl-unit { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line-soft); font-size: .82rem; color: var(--muted); }
.flk-tl-unit input { width: 100%; box-sizing: border-box; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg-2); color: var(--fg); font: inherit; font-size: 1.05rem; font-weight: 700; text-align: left; }
.flk-tl-unit input:focus { outline: 2px solid var(--teal); outline-offset: 1px; }
.flk-tl-light { margin: 12px 0 0; font-weight: 750; color: var(--orange-ink); }

/* ---- The home page's small calculator ---------------------------------------------------- */
.flk-hm-calc { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin: 10px 0 0; }
.flk-hm-calc .flk-tl-out { grid-column: 1 / -1; }
.flk-hm-calc .flk-tl-go { min-width: 0; }
.flk-hm-calc input { width: 100%; box-sizing: border-box; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-2); color: var(--fg); font: inherit; font-size: 1rem; }
/* The formula writer's box on the home card: the calculator's layout; it only opens the tool page. */
.flk-hm-fx { margin-bottom: 4px; }
.flk-hm-calc input:focus { outline: 2px solid var(--teal); outline-offset: 1px; }
.flk-hm-calc .flk-tl-out { min-height: 0; margin-top: 8px; }
.flk-hm-calc .flk-tl-ans { font-size: 1.2rem; }

/* Tool audit: touch targets and keyboard feedback. */
.flk-tl-app button { min-height: 44px; }
.flk-tl-app button:focus-visible { outline: 2px solid var(--orange-ink); outline-offset: 3px; }
.flk-tl-unit input[aria-invalid="true"] { border-color: var(--orange-ink); }