/* ============================================================================
   F44  A DEFECT FIXED FOR THE SUPPLIER BECOMES A VARIATION
   Tokens only, from app.css, so both themes work without a second set of
   colours. The note's own edge colour carries the state (warn: needs an
   amount, crit: not drafted); the card line borrows F43's dot.
   ============================================================================ */

/* ---------------------------------------------------------------- the card */
.tk .f44-card{font-size:11px;line-height:1.4;color:var(--ink-2)}
.tk .f44-card::before{content:"";display:inline-block;width:6px;height:6px;margin:0 6px 1px 0;border-radius:50%;
  background:var(--warn);vertical-align:middle}

/* ------------------------------------------------------------- the drawer */
.f44{margin-top:6px}
.f44-box .f44-line{display:block;margin-top:6px;color:var(--ink);overflow-wrap:anywhere}
.f44-box .f44-sub{display:block;margin-top:6px;font-size:12px;color:var(--ink-3)}
.f44-btns{margin:8px 0 2px;flex-wrap:wrap}
.f44-btns a.btn{text-decoration:none}
.f44-tick{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--ink);margin:4px 0 10px;cursor:pointer}
.f44-tick input{width:18px;height:18px;margin:0;accent-color:var(--lime, currentColor)}
.f44-form.f44-off{display:none}
.f44-row{display:grid;grid-template-columns:140px minmax(0,1fr);align-items:center;gap:10px;margin:0 0 8px}
.f44-row label{font-size:12.5px;font-weight:600;color:var(--ink-3)}
.f44-row input{font:inherit;font-size:13px;padding:6px 8px;border:1px solid var(--line);border-radius:4px;
  background:var(--panel-2);color:var(--ink);min-width:0;width:100%;box-sizing:border-box}
.f44-row input[type=number]{max-width:180px}
.f44-who{margin-top:2px}
.f44-warn{color:var(--warn)}
/* "Not saved yet": shown while the block differs from what is saved (Done saves it first). */
.f44-unsaved{align-self:center;font-size:12px;font-weight:600;color:var(--warn)}
.f44-unsaved[hidden]{display:none}
.f44-warn b{color:var(--warn)}

@media(max-width:700px){
  .f44-row{grid-template-columns:1fr;gap:4px}
  .f44-row input,.f44-row input[type=number]{max-width:none;min-height:40px;font-size:16px}
  .f44-box .f44-sub{font-size:13px}
  .f44-btns .btn,.f44 .btnrow .btn{min-height:40px}
}