:root { --accent: #0f766e; --accent-strong: #0b5e57; --accent-soft: #e6f2f1; --bg: #f6f8f8; --surface: #ffffff; --text: #10181a; --muted: #5b6b6c; --border: #e2e8e8; --danger: #c0392b; --danger-soft: #fdecea; --success: #157f5b; --success-soft: #e6f5ef; --focus: #0ea5a0; --chip-pending-bg: #fff4e0; --chip-pending-fg: #9a5b00; --chip-sent-bg: var(--accent-soft); --chip-sent-fg: var(--accent-strong); --radius: 16px; --radius-sm: 10px; --shadow: 0 1px 2px rgba(16, 24, 26, .04), 0 8px 24px rgba(16, 24, 26, .06); --shadow-strong: 0 10px 30px rgba(15, 118, 110, .18); --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --tap: 44px; --font-ar: "Cairo", "Tajawal", "Segoe UI", system-ui, -apple-system, sans-serif; --font-num: "Cairo", "Segoe UI", system-ui, -apple-system, sans-serif; --t: 170ms ease; } /* Dark theme — reuses the same custom-property names, never raw hex values. Applied on ; the read-only page sets this from the OS preference (or the user's saved choice) on first paint. */ :root[data-theme="dark"] { --accent: #2dd4bf; --accent-strong: #5eead4; --accent-soft: #12312d; --bg: #0b1214; --surface: #131c1f; --text: #e7eef0; --muted: #8ba1a3; --border: #25343a; --danger: #f19a92; --danger-soft: #2a1715; --success: #4ade80; --success-soft: #0e2a1c; --focus: #2dd4bf; --chip-pending-bg: #3a2a10; --chip-pending-fg: #f4c96c; --shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 8px 24px rgba(0, 0, 0, .4); --shadow-strong: 0 10px 30px rgba(45, 212, 191, .14); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-ar); background: var(--bg); color: var(--text); line-height: 1.65; font-size: clamp(15px, 1.6vw, 16px); } h1, h2 { margin: 0; line-height: 1.3; } img { max-width: 100%; display: block; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; inset-inline-start: -9999px; top: var(--space-2); background: var(--accent); color: #fff; padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); z-index: 50; } .skip-link:focus { inset-inline-start: var(--space-4); } :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } /* ------------------------------------------------------------------ header */ .app-header { padding: var(--space-6) var(--space-4) var(--space-4); text-align: center; } .app-header h1 { font-size: clamp(1.5rem, 6vw, 2.1rem); font-weight: 700; letter-spacing: -.01em; } .app-sub { margin: var(--space-2) 0 0; color: var(--muted); font-size: clamp(.9rem, 3.5vw, 1rem); } .app-main { max-width: 620px; margin: 0 auto; padding: 0 var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); } .app-footer { text-align: center; color: var(--muted); font-size: .8rem; padding: var(--space-4) var(--space-4) var(--space-6); } /* ------------------------------------------------------------------- cards */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--space-5); } .card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); } .card-head h2 { font-size: clamp(1rem, 4vw, 1.15rem); font-weight: 600; } .counter { font-family: var(--font-num); font-size: .85rem; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 2px 10px; white-space: nowrap; } .muted { color: var(--muted); margin: var(--space-2) 0 var(--space-4); font-size: .9rem; } /* --------------------------------------------------------------- uploader */ .uploader { margin-top: var(--space-2); } .dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1); min-height: 132px; padding: var(--space-4); text-align: center; border: 2px dashed var(--border); border-radius: var(--radius); background: var(--bg); color: var(--muted); cursor: pointer; transition: border-color var(--t), background var(--t), transform var(--t); -webkit-tap-highlight-color: transparent; } .dropzone:hover { border-color: var(--accent); } .dropzone:active { transform: scale(.995); } .dropzone.is-dragover { border-color: var(--accent); background: var(--accent-soft); } .dropzone-icon { font-size: 1.6rem; color: var(--accent); line-height: 1; } .dropzone-title { font-weight: 600; color: var(--text); } .dropzone-hint { font-size: .8rem; } /* --------------------------------------------------------------- thumbs */ .thumbs { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--space-3); min-height: 0; } .thumbs:not(:empty) { min-height: 112px; } .thumb { position: relative; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: var(--bg); transition: box-shadow var(--t); } .thumb:hover { box-shadow: var(--shadow); } .thumb img { width: 100%; height: 84px; object-fit: cover; } .thumb-name { display: block; padding: 4px 6px; font-size: .7rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: ltr; text-align: start; } .thumb-remove { position: absolute; top: 4px; inset-inline-end: 4px; width: 28px; height: 28px; min-width: 28px; border: none; border-radius: 50%; background: rgba(16, 24, 26, .72); color: #fff; font-size: 1rem; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: background var(--t), transform var(--t); } .thumb-remove:hover { background: var(--danger); } .thumb-remove:active { transform: scale(.9); } /* ------------------------------------------------------------------ fields */ .field { margin-top: var(--space-2); } label { font-weight: 600; display: block; margin-bottom: var(--space-1); } input[type="tel"], select { width: 100%; min-height: var(--tap); padding: var(--space-3) var(--space-4); font-family: var(--font-num); font-size: 1rem; color: var(--text); background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-sm); transition: border-color var(--t), box-shadow var(--t); } input[type="tel"] { letter-spacing: .06em; } input[type="tel"]:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } input[aria-invalid="true"] { border-color: var(--danger); background: var(--danger-soft); } input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(192, 57, 43, .15); } .field-hint { margin: var(--space-1) 0 0; font-size: .8rem; color: var(--muted); } /* ------------------------------------------------------------------ errors */ .error-text { margin: var(--space-2) 0 0; color: var(--danger); background: var(--danger-soft); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); font-size: .875rem; } .error-text:empty { display: none; } .form-error { margin: 0; color: var(--danger); background: var(--danger-soft); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); font-weight: 600; } .form-error[hidden] { display: none; } /* ------------------------------------------------------------------ buttons */ .btn { font-family: inherit; font-size: 1rem; font-weight: 600; min-height: var(--tap); min-width: var(--tap); padding: var(--space-3) var(--space-5); border-radius: var(--radius-sm); border: 1.5px solid transparent; cursor: pointer; transition: background var(--t), color var(--t), transform var(--t), box-shadow var(--t), opacity var(--t); -webkit-tap-highlight-color: transparent; } .btn:active { transform: translateY(1px) scale(.995); } .btn-primary { background: var(--accent); color: #fff; box-shadow: var(--shadow-strong); } .btn-primary:hover { background: var(--accent-strong); } .btn-primary:disabled { background: var(--border); color: var(--muted); box-shadow: none; cursor: not-allowed; transform: none; } .btn-secondary { background: var(--surface); color: var(--accent); border-color: var(--border); } .btn-secondary:hover { border-color: var(--accent); background: var(--accent-soft); } .btn-danger { background: var(--danger); color: #fff; box-shadow: var(--shadow-strong); } .btn-danger:hover { background: #a93226; } .btn-danger:disabled { background: var(--border); color: var(--muted); box-shadow: none; cursor: not-allowed; transform: none; } .btn-small { min-height: 36px; padding: var(--space-2) var(--space-4); font-size: .9rem; } /* --------------------------------------------------------------- submit bar */ .submit-bar { position: sticky; bottom: 0; background: linear-gradient(to top, var(--bg) 70%, rgba(246, 248, 248, 0)); padding: var(--space-4) 0 var(--space-2); margin-top: var(--space-2); } .submit-hint { margin: 0 0 var(--space-2); font-size: .85rem; color: var(--muted); text-align: center; } .btn-submit { width: 100%; } /* --------------------------------------------------------------- success card */ .success-card { text-align: center; border-color: rgba(21, 127, 91, .3); background: var(--success-soft); animation: pop var(--t); } .success-card[hidden] { display: none; } .success-icon { width: 56px; height: 56px; margin: 0 auto var(--space-3); border-radius: 50%; background: var(--success); color: #fff; font-size: 1.8rem; display: grid; place-items: center; } .success-card h2 { color: var(--success); font-size: 1.25rem; } .success-details { display: flex; justify-content: center; gap: var(--space-6); margin: var(--space-4) 0; } .success-details dt { font-size: .78rem; color: var(--muted); } .success-details dd { margin: 2px 0 0; font-weight: 700; font-size: 1.05rem; font-family: var(--font-num); } @keyframes pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* ------------------------------------------------------------------ review */ .review-body { min-height: 100vh; display: grid; place-items: center; padding: var(--space-4); } .review-wrap { width: 100%; max-width: 440px; } .review-card { width: 100%; } .review-card h1 { font-size: 1.3rem; margin-bottom: var(--space-2); } .review-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); } .review-head h1 { margin: 0; } #login-form { margin-top: var(--space-3); } #login-form .btn { width: 100%; margin-top: var(--space-3); } .empty-state { margin: 0; padding: var(--space-6) var(--space-4); text-align: center; color: var(--muted); background: var(--bg); border: 1px dashed var(--border); border-radius: var(--radius); font-weight: 600; } /* ------------------------------------------------------------------ desktop */ @media (min-width: 768px) { .app-main { max-width: 920px; } #intake-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); } #intake-form > .card:first-child { grid-column: 1 / -1; } .submit-bar { grid-column: 1 / -1; position: static; background: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 0; } .submit-hint { text-align: start; margin: 0; } .btn-submit { width: auto; min-width: 220px; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* ============================================================ review list */ .review-page { background: var(--bg); min-height: 100vh; padding-bottom: var(--space-6); } .review-topbar { position: sticky; top: 0; z-index: 20; background: var(--surface); border-bottom: 1px solid var(--border); } .review-topbar-inner { max-width: 920px; margin: 0 auto; padding: var(--space-4); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; } .review-topbar h1 { font-size: clamp(1.1rem, 4.5vw, 1.4rem); } .view-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .view-company { color: var(--muted); font-size: .82rem; font-weight: 600; } .review-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; } .waiting-count { font-family: var(--font-num); background: var(--accent-soft); color: var(--accent-strong); border-radius: 999px; padding: 4px 12px; font-weight: 700; font-size: .85rem; white-space: nowrap; } .review-main { max-width: 920px; margin: 0 auto; padding: var(--space-4); } .review-loading { text-align: center; color: var(--muted); padding: var(--space-6); } .batch-list { display: flex; flex-direction: column; gap: var(--space-3); } .batch-row { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--space-4); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; } .batch-row-main { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; flex: 1 1 220px; } .batch-meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); align-items: center; } .batch-time { font-family: var(--font-num); font-weight: 700; } .batch-dest { color: var(--accent-strong); font-weight: 600; } .batch-phone, .batch-docs { color: var(--muted); font-size: .9rem; font-family: var(--font-num); } .batch-reason { margin: var(--space-1) 0 0; color: var(--danger); background: var(--danger-soft); border-radius: var(--radius-sm); padding: var(--space-1) var(--space-2); font-size: .82rem; } .chip { border-radius: 999px; padding: 3px 12px; font-size: .8rem; font-weight: 700; white-space: nowrap; } .chip-pending { background: var(--chip-pending-bg); color: var(--chip-pending-fg); } .chip-ready { background: var(--accent-soft); color: var(--accent-strong); } .chip-review { background: var(--danger-soft); color: var(--danger); } .chip-sent { background: var(--chip-sent-bg); color: var(--chip-sent-fg); } /* =========================================================== batch detail */ .batch-page { background: var(--bg); min-height: 100vh; } .batch-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .batch-title h1 { font-family: var(--font-num); font-size: clamp(1rem, 4vw, 1.25rem); word-break: break-all; } .batch-sub { margin: 0; color: var(--muted); font-size: .82rem; } .back-link { color: var(--accent); font-weight: 600; font-size: .85rem; text-decoration: none; } .back-link:hover { text-decoration: underline; } .batch-main { max-width: 920px; margin: 0 auto; padding: var(--space-4) var(--space-4) 120px; display: flex; flex-direction: column; gap: var(--space-4); } .cards-stack { display: flex; flex-direction: column; gap: var(--space-4); } .batch-banner { margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); font-weight: 600; } .banner-error { background: var(--danger-soft); color: var(--danger); border: 1px solid rgba(192, 57, 43, .25); } .banner-info { background: var(--accent-soft); color: var(--accent-strong); border: 1px solid var(--border); } .card-title { font-size: clamp(1rem, 4vw, 1.15rem); font-weight: 600; } .sub-title { margin: var(--space-4) 0 0; padding-top: var(--space-3); border-top: 1px dashed var(--border); font-size: .95rem; font-weight: 700; color: var(--accent-strong); } .doc-strip { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-3); } .doc-thumb { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); padding: 0; cursor: pointer; overflow: hidden; width: 116px; font-family: inherit; transition: box-shadow var(--t), border-color var(--t), transform var(--t); } .doc-thumb:hover { border-color: var(--accent); box-shadow: var(--shadow); } .doc-thumb:active { transform: scale(.98); } .doc-thumb.is-iqama { border-color: var(--accent); } .doc-thumb img { width: 100%; height: 84px; object-fit: cover; display: block; } .doc-thumb span { display: block; padding: 6px; font-size: .78rem; font-weight: 600; text-align: center; } .form-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); margin-top: var(--space-3); } @media (min-width: 640px) { .form-grid { grid-template-columns: 1fr 1fr; } } .review-field { min-width: 0; } .review-field label { font-size: .82rem; font-weight: 600; color: var(--muted); display: block; margin-bottom: var(--space-1); } .review-field input { width: 100%; min-height: var(--tap); padding: var(--space-2) var(--space-3); border: 1.5px solid var(--border); border-radius: var(--radius-sm); font-size: 1rem; font-family: var(--font-num); background: var(--surface); color: var(--text); transition: border-color var(--t), box-shadow var(--t); } .review-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .review-field input:disabled { background: var(--bg); color: var(--muted); } .review-field input[dir="ltr"] { text-align: left; } .mrz-input { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .82rem; letter-spacing: .02em; } .action-bar { position: fixed; bottom: 0; inset-inline: 0; background: var(--surface); border-top: 1px solid var(--border); padding: var(--space-3) var(--space-4); display: flex; gap: var(--space-3); justify-content: center; z-index: 30; box-shadow: 0 -4px 16px rgba(16, 24, 26, .06); } .action-bar .btn { flex: 1; max-width: 260px; } .toast { position: fixed; top: var(--space-4); inset-inline: var(--space-4); margin: 0 auto; max-width: 420px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); font-weight: 700; text-align: center; z-index: 60; box-shadow: var(--shadow); } .toast[hidden] { display: none; } .toast-ok { background: var(--success-soft); color: var(--success); border: 1px solid rgba(21, 127, 91, .3); } .toast-err { background: var(--danger-soft); color: var(--danger); border: 1px solid rgba(192, 57, 43, .3); } .no-scroll { overflow: hidden; } /* ------------------------------------------------------------------ lightbox */ .lightbox { position: fixed; inset: 0; background: rgba(6, 12, 13, .93); z-index: 100; display: flex; align-items: center; justify-content: center; padding: var(--space-4); } .lightbox[hidden] { display: none; } .lightbox img { max-width: 100%; max-height: 82vh; border-radius: var(--radius-sm); background: #000; } .lightbox-caption { position: absolute; bottom: var(--space-4); inset-inline: 0; text-align: center; color: #fff; font-weight: 600; } .lightbox-close { position: absolute; top: var(--space-3); inset-inline-end: var(--space-3); width: 44px; height: 44px; border-radius: 50%; border: none; background: rgba(255, 255, 255, .16); color: #fff; font-size: 1.3rem; cursor: pointer; } .lightbox-close:hover { background: rgba(255, 255, 255, .3); } .lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 64px; border: none; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .16); color: #fff; font-size: 1.8rem; line-height: 1; cursor: pointer; } .lightbox-nav:hover { background: rgba(255, 255, 255, .3); } .lightbox-nav.prev { inset-inline-start: var(--space-2); } .lightbox-nav.next { inset-inline-end: var(--space-2); } /* =============================================================== read-only */ .view-page { background: var(--bg); min-height: 100vh; } .view-controls { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; max-width: 1100px; margin: 0 auto; padding: 0 var(--space-4) var(--space-4); } .view-controls-label { font-size: .82rem; font-weight: 600; color: var(--muted); } .segmented { display: inline-flex; align-items: center; border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); overflow: hidden; } .segment { font-family: inherit; font-size: .9rem; font-weight: 600; min-height: var(--tap); min-width: var(--tap); padding: 0 var(--space-4); border: none; background: transparent; color: var(--muted); cursor: pointer; transition: background var(--t), color var(--t); -webkit-tap-highlight-color: transparent; } .segment + .segment { border-inline-start: 1px solid var(--border); } .segment:hover { color: var(--text); background: var(--accent-soft); } .segment[aria-pressed="true"] { background: var(--accent); color: #fff; } .segment:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; } .view-main { max-width: 1100px; margin: 0 auto; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); } .view-tools { display: flex; flex-direction: column; gap: var(--space-4); } .view-search input { width: 100%; min-height: var(--tap); padding: var(--space-3) var(--space-4); font-family: var(--font-ar); font-size: 1rem; color: var(--text); background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-sm); transition: border-color var(--t), box-shadow var(--t); } .view-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .view-filters { display: grid; grid-template-columns: 1fr; gap: var(--space-3); } .view-filter { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; } .view-filter label { font-size: .82rem; font-weight: 600; color: var(--muted); margin: 0; } .view-filter select, .view-filter input[type="date"] { width: 100%; min-height: var(--tap); padding: var(--space-2) var(--space-3); font-family: var(--font-num); font-size: 1rem; color: var(--text); background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-sm); } .view-filter select:focus, .view-filter input[type="date"]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .view-filter .btn { margin-top: auto; } .view-error { margin: 0; padding: var(--space-4); text-align: center; color: var(--danger); background: var(--danger-soft); border: 1px solid rgba(192, 57, 43, .25); border-radius: var(--radius); font-weight: 600; } .view-table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow-x: auto; -webkit-overflow-scrolling: touch; } .view-table { width: 100%; border-collapse: collapse; min-width: 720px; } .view-table th { position: sticky; top: 0; background: var(--surface); border-bottom: 1px solid var(--border); padding: 0; text-align: start; white-space: nowrap; } .th-btn { font-family: inherit; font-size: .85rem; font-weight: 700; color: var(--muted); background: none; border: none; cursor: pointer; width: 100%; padding: var(--space-3) var(--space-3); display: flex; align-items: center; gap: 4px; min-height: var(--tap); } .th-btn:hover { color: var(--accent); background: var(--accent-soft); } .view-table th[aria-sort="ascending"] .th-btn::after { content: "▲"; font-size: .7rem; } .view-table th[aria-sort="descending"] .th-btn::after { content: "▼"; font-size: .7rem; } .view-table th[aria-sort] .th-btn { color: var(--accent); } .view-table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); font-size: .9rem; white-space: nowrap; max-width: 240px; overflow: hidden; text-overflow: ellipsis; } .view-table td[dir="ltr"] { font-family: var(--font-num); } .view-row { cursor: pointer; transition: background var(--t); } .view-row:hover { background: var(--accent-soft); } .view-row:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; } .view-empty-cell { color: var(--muted); opacity: .55; } .view-pagination { display: flex; align-items: center; justify-content: center; gap: var(--space-3); } .view-page-info { font-family: var(--font-num); font-weight: 600; color: var(--muted); } .view-detail { position: fixed; inset: 0; z-index: 40; background: var(--bg); overflow-y: auto; -webkit-overflow-scrolling: touch; } .view-detail[hidden] { display: none; } .view-detail-field { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2) 0; border-bottom: 1px dashed var(--border); min-width: 0; } .view-detail-label { font-size: .78rem; font-weight: 600; color: var(--muted); } .view-detail-value { font-size: 1rem; font-family: var(--font-num); word-break: break-word; } .view-detail-value[dir="ltr"] { text-align: start; } .view-doc { margin: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); overflow: hidden; width: 148px; } .view-doc img { width: 100%; height: 96px; object-fit: cover; display: block; } .view-doc figcaption { padding: 6px; font-size: .78rem; font-weight: 600; text-align: center; } @media (min-width: 640px) { .view-filters { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .view-filters { grid-template-columns: repeat(5, 1fr); align-items: end; } }