/* The craft calculator: what site.css and db.css don't already give. */
.craft-verdict { margin: 10px 0; }
.craft-verdict-head { display: flex; align-items: center; gap: 10px; }
.craft-verdict-head input { width: 6em; }
/* Several targets (a set): one line each, in one panel, so the tree isn't pushed a screen down. */
.craft-verdicts.compact { border: 1px solid var(--line); border-radius: 6px; background: var(--panel); margin: 10px 0; }
.craft-verdicts.compact .craft-verdict { margin: 0; padding: 6px 12px; border: 0; border-radius: 0; background: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.craft-verdicts.compact .craft-verdict + .craft-verdict { border-top: 1px solid var(--line); }
.craft-verdicts.compact .craft-verdict p { margin: 0; }
.craft-floor { color: var(--muted); }
.craft-good { color: var(--ok); }
.craft-warn { color: var(--warn); }
.craft-error { color: var(--danger); font-size: .85em; margin-top: 2px; }
.craft-unknown td:first-child a { color: var(--warn); }
.craft-tree td.price input { width: 7.5em; }
.craft-toggle { display: inline-block; width: 1.5em; background: none; border: 0; color: inherit; cursor: pointer; padding: 0; }
.craft-modes { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.craft-modes button { background: none; border: 0; color: var(--muted); padding: 2px 8px; cursor: pointer; font: inherit; font-size: .85em; }
.craft-modes button[aria-pressed=true] { background: var(--panel-3); color: var(--ink); }
.craft-totals { align-items: center; }
.small { font-size: .85em; }

/* Plan: a summary column beside the tree on a wide screen, a footer sheet on a narrow one. */
.craft-layout { display: block; }
.craft-summary { display: none; }
.craft-footer { position: sticky; bottom: 0; background: var(--panel); border-top: 1px solid var(--line); padding: 8px 12px; z-index: 5; }
.craft-footer > summary { cursor: pointer; display: flex; justify-content: space-between; gap: 12px; list-style: none; }
.craft-footer > summary::before { content: "▴"; color: var(--muted); }
.craft-footer[open] > summary::before { content: "▾"; }
/* Above the phone's tab bar (site.css fixes it to the bottom below 760px), not under it. */
@media (max-width: 760px) {
  .craft-footer { bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px)); }
}
/* On a phone the tree's rows are cards: the item across the top, then its numbers, each
   with its column's name, the price box and Auto/Buy/Craft, wrapping; no sideways scroll. */
@media (max-width: 640px) {
  .craft-tree thead { display: none; }
  .craft-tree, .craft-tree tbody { display: block; }
  .craft-tree tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
  .craft-tree td { display: block; padding: 0; border: 0; text-align: left; }
  .craft-tree td:first-child { flex: 1 0 100%; }
  .craft-tree td[data-label]::before { content: attr(data-label) " "; color: var(--muted); font-size: .8em; }
  .craft-tree td.price input { width: 8em; }
}
@media (min-width: 900px) {
  .craft-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 20px; align-items: start; }
  .craft-summary { display: block; position: sticky; top: 12px; }
  .craft-footer { display: none; }
}
.craft-summary-inner { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 12px; }
.craft-totals { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin: 8px 0; }
.craft-totals dd { margin: 0; text-align: right; font-family: var(--mono); }
.craft-piece { display: block; margin: 2px 0; }
.craft-picker { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.craft-sources { padding-left: 1.1em; margin: 0 0 4px; }
.craft-stale { color: var(--faint); }
.craft-hist { margin-top: 6px; }
.craft-hist-stats { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0 0 8px; }
.craft-hist-stats div { display: contents; }
.craft-hist-stats dt { color: var(--muted, inherit); }
.craft-hist-stats dd { margin: 0; }
.craft-hist-table { width: auto; }
.craft-hist-table td, .craft-hist-table th { padding: 2px 10px 2px 0; }
.craft-up { color: var(--ok, #5fd3a0); }
.craft-down { color: var(--danger, #ff6b6b); }

/* Shot profits */
.craft-mats { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.craft-mats label { display: flex; align-items: center; gap: 6px; }
.craft-mats input { width: 7em; }
.craft-shots td.price input { width: 6.5em; }
.craft-shots input[data-fee-of] { width: 6.5em; }
.craft-loss td { color: var(--danger); }
.craft-loss td a { color: var(--danger); }
.craft-gain [data-profit] { color: var(--ok); }
.craft-selected { outline: 1px solid var(--ember); }

/* The account sync (views/sync.js): Sign in, or a dot with its word; and its questions. */
.craft-account { margin-left: auto; }
.craft-sync { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.craft-sync .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.craft-sync[data-sync=saved] .dot { background: var(--ok); }
.craft-sync[data-sync=syncing] .dot { background: var(--ember); }
.craft-sync[data-sync=conflict] .dot { background: var(--warn); }
.craft-sync[data-sync=error] .dot { background: var(--danger); }
.craft-ask { background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; max-width: min(34rem, calc(100vw - 32px)); padding: 20px; }
.craft-ask::backdrop { background: rgb(0 0 0 / .6); }
.craft-ask h2 { margin-top: 0; font-size: 20px; }
.craft-ask-answers { display: flex; gap: 8px; flex-wrap: wrap; }

/* The pool chip and a clan price (views/pool.js). */
.craft-pool-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.craft-pool { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.craft-pool select { min-height: 32px; }
input[data-price][disabled], input[data-fee-of][disabled] { opacity: .7; cursor: not-allowed; }
input[data-changed] { border-color: var(--ember); animation: craft-pulse 1.2s ease-out 1; }
@keyframes craft-pulse { from { box-shadow: 0 0 0 4px rgb(255 140 60 / .55); } to { box-shadow: 0 0 0 0 rgb(255 140 60 / 0); } }
@media (prefers-reduced-motion: reduce) { input[data-changed] { animation: none; } }
.craft-est-switch { display: inline-flex; align-items: center; gap: 6px; font-size: .9em; color: var(--muted); }
.craft-suggest { display: inline-flex; align-items: center; gap: 6px; }
.craft-suggest .icon { width: 20px; height: 20px; }
.craft-sort { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-transform: inherit; letter-spacing: inherit; }
th.n .craft-sort { width: 100%; text-align: right; }
.craft-shots td:first-child { white-space: nowrap; }   /* the shot names, one line each: the table scrolls sideways instead */