/**
 * @file file-drop.css
 * @author Jouni Miikki
 * SPDX-License-Identifier: MIT
 * @description Choosing files to upload: a dashed drop area with a big arrow and two lines (drop here, or
 *   click), coral while a file is dragged over it or chosen, and under it one row per chosen file (its
 *   mark, the key it will be stored under, its size, the mark that takes it off). Drawn by
 *   FileUploadForm (views/profile/memory-tab/components.js) inside the Settings scope root (.pf).
 *   Moved unchanged out of views/profile.css; the class names stay. The drop area's 2px dashed frame
 *   reads --shape-frame (the same value); a file row's corner reads --shape-corner, a box's corner.
 *   NOTE: this file must be linked in spa.html.
 * @version-history
 *   v1.4.0 -- 2026-09-27 -- The ink face at the old app catalogue's values: the card ground, the words
 *     as its running text one under another, the faint mark, the room kept for the chosen name (appcat
 *     parity; the ink face is appcat's alone).
 *   v1.3.0 -- 2026-09-27 -- The drop area's app-catalogue face (.file-dropzone--ink, .file-drop-browse,
 *     .file-drop-chosen) for appcat's Add dialog; additive, unscoped.
 *   v1.2.2 -- 2026-09-27 -- .file-drop-or and .file-drop-size carry the small dim words that
 *     FileDrop took from the page's .pf .text-meta (the same values; a move).
 *   v1.2.1 -- 2026-09-26 -- The drop zone's focus ring reads var(--shape-frame) (2px in AIMEAT), not a
 *     literal (check:shape-tokens; fix pass).
 *   v1.2.0 -- 2026-09-26 --Drawn by components/FileDrop.js; its own names for the hidden field, the arrow,
 *     a row's mark, name and size, the keyboard ring and the closed area (component plan C5).
 *   v1.1.0 -- 2026-09-26 -- A file row's 8px corner reads --shape-corner (Jouni's note on the round's shape check: "tee samankaltaiseksi tyyli kuin muuallakin").
 *   v1.0.0 -- 2026-09-25 -- Moved out of views/profile.css (UI consolidation phase 5, a move).
 */

.pf .file-dropzone{border:var(--shape-frame) dashed var(--border,rgba(232,86,74,.3));border-radius:var(--radius,12px);padding:2rem 1.5rem;text-align:center;cursor:pointer;transition:all .2s;background:rgba(232,86,74,.03)}
.pf .file-dropzone:hover{border-color:var(--accent,#E8564A);background:rgba(232,86,74,.06)}
.pf .file-dropzone.dragover{border-color:var(--accent,#E8564A);background:rgba(232,86,74,.1);transform:scale(1.01)}
.pf .file-dropzone.has-file{border-color:var(--accent,#E8564A);background:rgba(232,86,74,.04)}
.pf .file-dropzone-empty{display:flex;flex-direction:column;align-items:center;gap:.4rem;color:var(--text-dim,#6B7280);font-size:.9rem}
.pf .file-upload-list{display:flex;flex-direction:column;gap:.5rem;margin:.75rem 0}
.pf .file-upload-item{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:var(--bg-surface);border:1px solid var(--border,rgba(232,86,74,.15));border-radius:var(--shape-corner)}
/* The FileDrop component's own names (components/FileDrop.js): the hidden file field, the big arrow
   and a file row's mark (formerly .pf-hidden, .pf-upload-icon, .pf-file-icon), a row's name field
   and size, the ring the area shows under the keyboard, and the area that cannot take a file now. */
.file-drop-input { display: none; }
.file-drop-arrow { font-size: 2rem; opacity: .5; }
.file-drop-mark { font-size: 1.2rem; flex-shrink: 0; }
.file-upload-item > .og-input, .file-drop-name { flex: 1 1 auto; min-width: 0; }
.file-drop-size { white-space: nowrap; flex-shrink: 0; }
/* The "or click" line and a row's size: the small dim words (formerly the page's .pf .text-meta,
   whose values these are). */
.pf .file-drop-or, .pf .file-drop-size { font-size: .8rem; color: var(--text-dim, #6B7280); }
.file-dropzone:focus-visible { outline: var(--shape-frame) solid var(--accent); outline-offset: 2px; }
.file-dropzone.is-off { cursor: default; opacity: .6; }
/* The app catalogue's face (FileDrop `ink`, `browseLabel`, `chosen`; the old page's #drop-zone): the
   heavy dashed ink frame on the surface, coral while a file is dragged over it; the grey words, the
   framed "Browse files" part, and the chosen file's name in coral under them. Not scoped to the
   Settings root, because the catalogue is not in it. */
.file-dropzone--ink { border: var(--shape-frame-heavy) dashed var(--text); border-radius: var(--shape-corner); background: var(--card-bg); padding: 28px 20px; text-align: center; cursor: pointer; }
.file-dropzone--ink.dragover { border-color: var(--accent); }
/* Its words stand one under another as the old page's running text did (.modal p: .95rem ink at
   1.55), the faint page mark 8px over them, "or" 10px over the Browse part (appcat parity). */
.file-dropzone--ink .file-dropzone-empty { display: block; font-size: .95rem; font-weight: var(--font-poster-text-weight); line-height: 1.55; color: var(--text); }
.file-dropzone--ink .file-dropzone-empty > span { display: block; }
.file-dropzone--ink .file-dropzone-empty > .file-drop-browse { display: inline-block; line-height: normal; }
.file-dropzone--ink .file-drop-arrow { font-size: 2rem; line-height: normal; margin-bottom: 8px; opacity: .5; }
.file-dropzone--ink .file-drop-arrow + span { margin-bottom: 4px; }
.file-dropzone--ink .file-drop-or { margin-bottom: 10px; }
/* The chosen file's name is the old page's running text too (its .modal p rule outranked the coral
   .drop-zone-selected), in ink; its line keeps 1.2em of room while nothing is chosen. */
.file-dropzone--ink .file-dropzone-empty > .file-drop-chosen { margin-top: 10px; min-height: 1.2em; font-size: inherit; font-weight: inherit; color: inherit; }
.file-drop-browse { display: inline-block; padding: 7px 18px; border: var(--shape-frame) solid var(--text); border-radius: var(--shape-corner-control); background: var(--bg); color: var(--text); font-size: .8rem; font-weight: var(--weight-heavy); }
.file-drop-chosen { margin-top: .4rem; font-size: .8rem; font-weight: 500; color: var(--accent); overflow-wrap: anywhere; }
.pf .pf-upload-icon   { font-size: 2rem; opacity: .5; }
.pf .pf-file-icon     { font-size: 1.2rem; flex-shrink: 0; }