/* Φ Datasheet — extends dfm.css layout */

.ds-drop {
  display: grid; place-items: center; gap: var(--space-2);
  padding: var(--space-6); text-align: center;
  border: 1px dashed var(--border-1); border-radius: var(--r-2);
  color: var(--fg-1); cursor: pointer; margin-bottom: var(--space-3);
  transition: background var(--dur-base) var(--ease), border-color var(--dur-fast) var(--ease);
}
.ds-drop:hover, .ds-drop.is-over { background: var(--bg-0); border-color: var(--accent); }
.ds-drop svg { color: var(--accent-2); }
.ds-drop strong { color: var(--fg-0); }
.ds-drop span { font-size: var(--fs-12); color: var(--fg-2); }

#ds-text {
  width: 100%; min-height: 140px;
  background: var(--bg-0); border: 1px solid var(--border-1); border-radius: var(--r-2);
  padding: var(--space-4); font: inherit; font-family: var(--font-mono); font-size: var(--fs-14);
  color: var(--fg-0); resize: vertical;
}
#ds-text:focus { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent); }

/* answer card */
.ds-answer { padding: var(--space-5); display: grid; gap: var(--space-4); }
.ds-answer__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.ds-conf { font-family: var(--font-mono); font-size: var(--fs-12); padding: 4px 10px; border-radius: var(--r-full); text-transform: uppercase; letter-spacing: var(--tracking-wide); border: 1px solid; }
.ds-conf.high { color: var(--good); border-color: var(--good); background: rgba(52,211,153,.12); }
.ds-conf.medium { color: var(--warn); border-color: var(--warn); background: rgba(251,191,36,.12); }
.ds-conf.low { color: var(--bad); border-color: var(--bad); background: rgba(248,113,113,.12); }
.ds-answer__text { color: var(--fg-0); font-size: var(--fs-18); line-height: 1.6; }
.ds-cite { background: var(--bg-2); border-left: 3px solid var(--accent-2); border-radius: var(--r-2); padding: var(--space-3) var(--space-4); }
.ds-cite__quote { color: var(--fg-1); font-family: var(--font-mono); font-size: var(--fs-14); }
.ds-cite__loc { color: var(--fg-2); font-size: var(--fs-12); margin-top: 4px; }
.ds-caveat { color: var(--fg-2); font-size: var(--fs-13); border-top: 1px solid var(--border-0); padding-top: var(--space-3); }