/* ============================================================================
   F70  WEBSITE DESIGNS: the screen's cards (picture, client, status, actions),
   the saved designs and their link email line, the line in a planner job's
   drawer, and the delivery date on a planner cabinet order. Tokens only, from
   app.css, so both themes work. The phone rules sit at the end, at the width
   app.css already folds at (700px).
   ============================================================================ */

.f70-kpis{margin:0 0 14px}
.f70-filing{margin:0 0 12px}
.f70-kpis + .note{margin:0 0 12px}

/* ------------------------------------------------------------- the filter */
.f70-chips{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 14px}
.f70-chip{min-height:30px;padding:4px 11px;border-radius:999px;border:1px solid var(--line);background:var(--panel);
  color:var(--ink-2);font:inherit;font-size:12px;cursor:pointer}
.f70-chip b{color:var(--ink);font-weight:700;margin-left:2px}
.f70-chip.on{border-color:var(--lime);background:var(--lime-ghost);color:var(--ink)}
.f70-chip:focus-visible{outline:2px solid var(--lime);outline-offset:2px}

/* -------------------------------------------------------------- the cards */
.f70-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.f70-card{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.f70-card.f70-dim{opacity:.72}
.f70-pic{position:relative;aspect-ratio:4/3;background:var(--panel-2);border-bottom:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.f70-pic img{display:block;width:100%;height:100%;object-fit:cover}
.f70-pic-say{font-size:11.5px;color:var(--ink-3);padding:0 14px;text-align:center}
.f70-pic[data-f70-state="loading"] button,.f70-pic[data-f70-state="none"] button,.f70-pic[data-f70-state="failed"] button{display:none}
.f70-body{padding:13px 15px 6px;display:flex;flex-direction:column;flex:1}
.f70-tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px}
.f70-name{margin:0;font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.f70-meta{margin:3px 0 0;font-size:11.5px;color:var(--ink-3);line-height:1.45}
.f70-reach{margin:6px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink-2);word-break:break-word}
.f70-reach a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:2px}
.f70-reach a:hover{text-decoration-color:var(--lime)}
.f70-faint{color:var(--ink-3)}
.f70-ask{margin:9px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink)}
.f70-notes{margin:9px 0 0;padding:7px 10px;border-left:3px solid var(--line);background:var(--panel-2);border-radius:0 5px 5px 0;
  font-size:12px;line-height:1.5;color:var(--ink-2);white-space:pre-wrap;word-break:break-word}
.f70-where{margin:9px 0 10px;font-size:12px;line-height:1.5;color:var(--ink-2)}
.f70-where b{color:var(--ink)}
.f70-acts{margin-top:auto}

/* ---------------------------------------------- office mode, asked to try the planner */
.f70-office{align-items:center;margin:0 0 14px}
.f70-office .f70-faint{font-size:12px}
.f70-access{margin:0 0 22px}
.f70-access .sec-h{margin-top:6px}
.f70-flags{list-style:none;margin:9px 0 0;padding:7px 10px;border-left:3px solid var(--warn);background:var(--panel-2);
  border-radius:0 5px 5px 0;font-size:12px;line-height:1.5;color:var(--ink);word-break:break-word}

/* ------------------------------------------------- saved, not sent for a quote */
.f70-saved .sec-h{margin-top:26px}
.f70-link .good{color:var(--good)}
.f70-link .warn{color:var(--warn)}
.f70-link .crit{color:var(--crit)}
.f70-link .mute,.f70-link .info{color:var(--ink-2)}

/* ---------------------------------------------------------- in a job drawer */
.f70-job{margin:0 0 6px}
.f70-job .x-note{margin:4px 0 8px}

/* ----------------------------------------- the planner cabinet order's date */
.f70-po{margin:4px 0 14px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel-2)}
.f70-po h4{margin-top:0}
.f70-po p{font-size:12.5px;line-height:1.5;margin:0 0 8px}
.f70-checks{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:4px}
.f70-checks li{font-size:12.5px;line-height:1.45;padding-left:20px;position:relative;color:var(--ink)}
.f70-checks li::before{position:absolute;left:0;top:0;font-weight:800}
.f70-checks li.ok::before{content:"\2713";color:var(--good)}
.f70-checks li.todo{color:var(--warn)}
.f70-checks li.todo::before{content:"\25CB";color:var(--warn)}
.f70-date{max-width:320px}
.f70-date input[type=date]{min-height:36px}
.f70-po .x-note{margin:8px 0 0}

@media(max-width:700px){
  .f70-grid{grid-template-columns:1fr}
  .f70-chip{min-height:36px;font-size:12.5px}
  .f70-acts .btn{flex:1 1 auto;text-align:center;justify-content:center}
  .f70-date{max-width:none}
}