/* =========================================================================
   Total Solutions Guards — design system (same tokens as HRMS) (ADR-014).
   Dark "Goa Parking" palette by default, using the SAME token names as
   RestaurantKOT.Web.Dark (--bg, --surface, --text …; the accent is role-named) so the two
   products stay visually diffable; [data-theme="light"] re-maps the same tokens
   to the PnS green palette. Syncfusion's own theme file is swapped with the
   mode (hrms.setTheme) and the rules at the bottom bind its components to these
   tokens. Fonts are self-hosted (Hrms.UI/wwwroot/fonts, OFL).
   ========================================================================= */

@font-face { font-family: 'Oswald'; src: url('fonts/Oswald-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Oswald'; src: url('fonts/Oswald-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Oswald'; src: url('fonts/Oswald-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/Inter-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/Inter-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/Inter-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }

:root, [data-theme="dark"] {
  --bg: #121317;
  --surface: #1c1e25;
  --surface-2: #262931;
  --line: #34373f;
  --accent: #f4c21c;          /* Goa Parking yellow: fills (primary buttons, active nav) */
  --accent-hover: #f4a52c;
  --on-accent: #1a1500;       /* text on an accent fill */
  --accent-text: #f4c21c;     /* accent used as TEXT (links, active tab) */
  --accent-ring: rgba(244, 194, 28, .25);
  --green: #34d399;  --green-dim: #0f3d30;
  --red: #f65a5a;    --red-dim: #3d1616;
  --amber: #f4a52c;  --amber-dim: #4d3212;
  --text: #eceef0;
  --text-dim: #9ba0ac;
  --shadow: 0 8px 24px rgba(0, 0, 0, .35);
  color-scheme: dark;
}

[data-theme="light"] {
  /* PnS green palette (client, 2026-09-28: "I like that green look") — values from PnS.Mobile Colors.xaml + PnS web borders. */
  --bg: #f4f6f5;              /* Canvas */
  --surface: #ffffff;         /* Surface */
  --surface-2: #e8f1ee;       /* BrandTint */
  --line: #dce1e0;
  --accent: #1f5c4a;          /* Brand */
  --accent-hover: #2e7d64;    /* BrandDark */
  --on-accent: #ffffff;
  --accent-text: #1f5c4a;
  --accent-ring: rgba(31, 92, 74, .22);
  --green: #2e7d64;  --green-dim: #e8f1ee;
  --red: #b3261e;    --red-dim: #fdecea;
  --amber: #9a5b00;  --amber-dim: #fff4de;
  --text: #151a19;            /* Ink */
  --text-dim: #5c6664;        /* Muted */
  --shadow: 0 8px 24px rgba(21, 26, 25, .08);
  color-scheme: light;
}

:root {
  --font-display: 'Oswald', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --radius-sm: 8px; --radius-md: 10px; --radius-lg: 16px; --radius-pill: 20px;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; font-family: var(--font-body); background: var(--bg); color: var(--text); font-size: 14px; }
h1, h2, h3, .brand-name { font-family: var(--font-display); letter-spacing: .3px; }
h1 { font-size: 24px; margin: 0 0 6px; font-weight: 600; }
h1:focus { outline: none; }   /* the router moves focus to the page title after navigation (for screen readers); no ring around it */
h3 { font-size: 16px; margin: 0 0 10px; font-weight: 600; }
a { color: var(--accent-text); }
a:hover { color: var(--accent-hover); }
code { background: var(--surface-2); color: var(--text); padding: 1px 6px; border-radius: 5px; font-size: 12px; }
.muted { color: var(--text-dim); }
.boot { padding: 40px; color: var(--text-dim); }

/* ---------- Top navbar (web = top, mobile apps = sidebar; client direction carried over from RestaurantKOT) ---------- */
.topnav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 12px;
  background: var(--bg); border-bottom: 1px solid var(--line); padding: 8px 20px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: 12px; }
.brand-mark { background: var(--accent); color: var(--on-accent); font-weight: 700; border-radius: 6px; padding: 3px 7px; font-family: var(--font-display); }
.brand-name { color: var(--accent-text); font-weight: 700; text-transform: uppercase; font-size: 17px; }
.menu { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.menu > li { position: relative; }
.menu-link, .menu-group > button { display: block; color: var(--text-dim); text-decoration: none; background: none; border: 0; font: inherit;
  padding: 8px 13px; border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap; }
.menu-link:hover, .menu-group > button:hover, .menu-group:focus-within > button { color: var(--text); background: var(--surface-2); }
.menu-link.active { color: var(--on-accent); background: var(--accent); }
.menu-group > button::after { content: " ▾"; font-size: 10px; }
/* The dropdown sits 6 px below its button. The invisible ::before bridge spans that gap (and the bar's bottom border), and the
   short hide delay forgives a pointer that slips outside for a moment — without them the menu closed on the way down (client, 2026-09-30). */
.submenu { position: absolute; top: 100%; left: 0; z-index: 1; min-width: 220px; list-style: none; margin: 6px 0 0; padding: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow);
  visibility: hidden; opacity: 0; transition: opacity .12s ease, visibility 0s linear .3s; }
.submenu::before { content: ""; position: absolute; left: -8px; right: -8px; top: -14px; height: 14px; }
.menu-group:hover .submenu, .menu-group:focus-within .submenu { visibility: visible; opacity: 1; z-index: 2; transition-delay: 0s; }
/* Company-scoped menus before a company is chosen (client, 2026-09-30). */
.menu-off { display: block; color: var(--text-dim); opacity: .5; padding: 8px 13px; cursor: not-allowed; white-space: nowrap; user-select: none; }
.nav-right select.needs-company { border-color: var(--amber); box-shadow: 0 0 0 2px var(--amber-dim); }
.submenu .menu-link { color: var(--text); }
.submenu .menu-link.disabled { color: var(--text-dim); opacity: .6; cursor: default; }
.submenu .menu-link em { font-style: normal; font-size: 10px; border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; margin-left: 6px; }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.nav-right select { width: auto; max-width: 280px; }
.user-name { color: var(--text-dim); white-space: nowrap; }
.hamburger { display: none; background: none; border: 1px solid var(--line); color: var(--text); border-radius: var(--radius-sm); padding: 6px 10px; font-size: 18px; cursor: pointer; }
.icon-btn { background: none; border: 1px solid var(--line); color: var(--text); border-radius: var(--radius-sm); padding: 6px 10px; cursor: pointer; }
.icon-btn:hover { background: var(--surface-2); }

.content { padding: 22px 24px 40px; max-width: 1600px; margin: 0 auto; }

/* ---------- Cards, forms, buttons ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin: 16px 0; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px; display: flex; flex-direction: column; gap: 6px; }
.form-card { margin: 14px 0; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 18px; }
.form-grid .span-2 { grid-column: span 2; }
.checks { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 14px; align-items: center; }
.form-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.mt { margin-top: 16px; }
.mr { margin-right: 16px; }
/* Approval rules (S04b): one card per amount band; the chain reads left to right and wraps on phones. */
.band { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 12px; background: var(--surface-2); display: flex; flex-direction: column; gap: 8px; }
.chain { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chain .arrow { color: var(--text-dim); }
.chain .fixed { padding: 4px 10px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); }
label { font-size: 12px; color: var(--text-dim); margin-top: 6px; display: block; }
input:not([type=checkbox]):not([class*="e-"]), select { font: inherit; padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); width: 100%; }
.check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text); margin: 0; }
.num { width: 80px; display: inline-block; }

.btn { font: inherit; border: 1px solid transparent; border-radius: var(--radius-sm); padding: 7px 15px; cursor: pointer; }
.btn-primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 600; }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-primary:disabled { opacity: .55; cursor: default; }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--text); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-sm { padding: 4px 10px; font-size: 13px; }
.btn-inline { margin: 0; }

.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 12px 0; }
.toolbar .search { width: 240px; }
.toolbar select { width: auto; }
.toolbar .spacer { flex: 1; }

.alert { border-radius: var(--radius-sm); padding: 10px 14px; margin: 10px 0; border: 1px solid transparent; }
.alert-error { background: var(--red-dim); color: var(--red); border-color: var(--red); }
.alert-ok { background: var(--green-dim); color: var(--green); border-color: var(--green); }
.alert-info { background: var(--surface-2); border-color: var(--line); }

.pill { display: inline-block; border-radius: var(--radius-pill); padding: 1px 10px; font-size: 12px; border: 1px solid; }
.pill-on { color: var(--green); border-color: var(--green); background: var(--green-dim); }
.pill-off { color: var(--text-dim); border-color: var(--line); background: var(--surface-2); }
.pill-wait { color: var(--amber); border-color: var(--amber); background: var(--amber-dim); }
.pill-err { color: var(--red); border-color: var(--red); background: var(--red-dim); }
.chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chips li { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 2px 10px; font-size: 12px; }

.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-top: 12px; overflow-x: auto; }
.tab { font: inherit; background: none; border: none; padding: 9px 16px; cursor: pointer; color: var(--text-dim); border-bottom: 2px solid transparent; white-space: nowrap; }
.tab.active { color: var(--accent-text); border-bottom-color: var(--accent); font-weight: 600; }

/* Plain tables (small in-form lists) share the grid look. */
.table-wrap { overflow-x: auto; }
.grid { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); margin-top: 12px; }
.grid th, .grid td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.grid th { background: var(--surface-2); font-weight: 600; font-size: 12px; color: var(--text-dim); }
.grid.compact th, .grid.compact td { padding: 6px 10px; }
.grid td.actions { white-space: nowrap; }
tr.muted td { color: var(--text-dim); }
.pager { display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin-top: 10px; flex-wrap: wrap; }

.picker { position: relative; display: flex; gap: 4px; }
.picker-list { position: absolute; top: 100%; left: 0; right: 0; z-index: 20; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); list-style: none; margin: 2px 0 0; padding: 4px 0; max-height: 240px; overflow: auto; box-shadow: var(--shadow); }
.picker-list li { padding: 6px 10px; cursor: pointer; }
.picker-list li:hover { background: var(--surface-2); }
.page-head a { text-decoration: none; font-size: 13px; }

.blank { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.login-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px; width: 100%; max-width: 380px; box-shadow: var(--shadow); }
.login-card .brand { margin-bottom: 18px; }
.login-card .btn { width: 100%; margin-top: 18px; }
.login-card .theme-toggle { position: fixed; top: 14px; right: 14px; }

/* ---------- Syncfusion bound to the tokens ---------- */
.e-grid { border-color: var(--line) !important; border-radius: var(--radius-md); overflow: hidden; margin-top: 12px; font-family: var(--font-body); }
.e-grid, .e-grid .e-content, .e-grid .e-gridcontent, .e-grid .e-table, .e-grid .e-rowcell, .e-grid .e-gridpager, .e-grid .e-emptyrow td {
  background-color: var(--surface) !important; color: var(--text); border-color: var(--line) !important; }
.e-grid .e-gridheader, .e-grid .e-headercell, .e-grid .e-headercontent { background-color: var(--surface-2) !important; color: var(--text-dim); border-color: var(--line) !important; }
.e-grid .e-headercelldiv { font-weight: 600; font-size: 12px; }
.e-grid.e-gridhover tr[role='row']:not(.e-disable-gridhover):not(.e-editedrow):hover .e-rowcell:not(.e-cellselectionbackground) { background-color: var(--surface-2) !important; }
.e-grid .e-row.clickable { cursor: pointer; }
.e-btn.e-primary, .e-css.e-btn.e-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.e-btn.e-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.e-input-group, .e-input-group.e-control-wrapper, .e-float-input, .e-float-input.e-control-wrapper { background: var(--surface) !important; border-color: var(--line) !important; }
.e-input-group input.e-input, .e-float-input input { color: var(--text) !important; }
.e-float-input.e-input-group label.e-float-text, .e-float-text { color: var(--text-dim) !important; }
.e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error), .e-float-input.e-input-focus { border-color: var(--accent) !important; box-shadow: 0 0 0 2px var(--accent-ring) !important; }
.e-checkbox-wrapper .e-frame.e-check { background-color: var(--accent) !important; border-color: var(--accent) !important; color: var(--on-accent) !important; }
.e-checkbox-wrapper .e-label { color: var(--text); }
.e-popup, .e-dropdownbase .e-list-item, .e-ddl.e-popup { background: var(--surface); color: var(--text); }
.e-dropdownbase .e-list-item.e-active, .e-dropdownbase .e-list-item.e-hover { background: var(--surface-2) !important; color: var(--text) !important; }
.e-toast-container .e-toast { background: var(--surface); color: var(--text); border: 1px solid var(--line); }
/* Syncfusion highlights that default to Bootstrap blue follow the accent instead. */
.e-pager .e-currentitem, .e-pager .e-currentitem:hover { background: var(--accent) !important; color: var(--on-accent) !important; }
.e-calendar .e-content td.e-selected span.e-day, .e-calendar .e-content td.e-selected:hover span.e-day { background: var(--accent) !important; color: var(--on-accent) !important; }
.e-calendar .e-content td.e-today span.e-day { border-color: var(--accent) !important; color: var(--accent-text) !important; }
.e-tab .e-tab-header .e-indicator { background: var(--accent) !important; }
.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-text { color: var(--accent-text) !important; }
.e-grid .e-sortnumber, .e-grid .e-ascending, .e-grid .e-descending { color: var(--accent-text) !important; }

/* ---------- Responsive: tablet-ready, phone-usable (mobile apps are the preferred phone experience) ---------- */
@media (max-width: 991.98px) {
  .topnav { flex-wrap: wrap; }
  .hamburger { display: block; order: 2; margin-left: auto; }
  .nav-right { order: 3; width: 100%; margin: 4px 0 0; flex-wrap: wrap; }
  .nav-right select { max-width: none; flex: 1; }
  .menu { display: none; order: 4; width: 100%; flex-direction: column; align-items: stretch; padding-top: 6px; border-top: 1px solid var(--line); }
  .topnav.open .menu { display: flex; }
  .menu-group > button { width: 100%; text-align: left; color: var(--text-dim); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; cursor: default; }
  .menu-group > button::after { content: ""; }
  .submenu { position: static; box-shadow: none; border: 0; margin: 0 0 6px; padding: 0 0 0 10px; background: transparent; min-width: 0;
    visibility: visible; opacity: 1; transition: none; }
  .submenu::before { display: none; }
  .menu-off { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
  .content { padding: 16px; }
}
@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .span-2 { grid-column: auto; }
  .toolbar .search { width: 100%; }
  .toolbar .spacer { display: none; }
  h1 { font-size: 20px; }
  .user-name { display: none; }
}

#blazor-error-ui { display: none; }

/* ---- S03 payroll inputs ---- */
.period-picker { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.field-label { display: block; font-size: 12px; color: var(--text-dim); margin-bottom: 4px; }
.file-button { position: relative; overflow: hidden; cursor: pointer; }
.file-button input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
td.right, th.right { text-align: right; }
.e-grid .e-editedbatchcell, .e-grid td.e-updatedtd { background: var(--amber-dim) !important; }

/* ---- S04a effective-dated versions (ADR-015) ---- */
.effective-from { display: grid; grid-template-columns: minmax(200px, 260px) 1fr; gap: 12px; align-items: center; margin-top: 12px; }
.hint { font-size: 12px; color: var(--text-dim); }
.hint-warn { font-size: 12px; color: var(--amber); }
.field-error { font-size: 12px; color: var(--red); }
.version-history { margin-top: 16px; }
.version-history h4 { margin: 0 0 6px; font-family: var(--font-display); font-weight: 600; }
@media (max-width: 700px) {
  .effective-from { grid-template-columns: 1fr; }
  .hide-sm { display: none; }
}

/* ---- S04 payroll runs ---- */
.run-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0; }
.confirm-box { border: 1px solid var(--amber); background: var(--amber-dim); border-radius: var(--radius-sm); padding: 8px 12px; }
.breakdown { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.breakdown table td.right, .breakdown table th.right { white-space: nowrap; }
.row-total td { font-weight: 600; border-top: 1px solid var(--line); }
.num-pos { color: var(--green); }
.num-neg { color: var(--red); }

/* ---- S04c notifications (ADR-016) ---- */
.small { font-size: 12px; }
.list-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.list-head h2, .list-head h3 { margin: 0; }
.list-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.channel-list { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.channel-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.feed { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.feed li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 10px 14px; }
.feed li.unread { border-left: 4px solid var(--accent); }
.feed-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 260px; overflow-wrap: anywhere; }
.feed-actions { display: flex; gap: 6px; align-items: flex-start; }
.bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border-radius: var(--radius-pill); color: var(--text); text-decoration: none; }
.bell:hover, .bell:focus-visible { background: var(--surface-2); }
.bell svg { width: 20px; height: 20px; }
.bell .badge { position: absolute; top: 0; right: 0; min-width: 17px; height: 17px; padding: 0 4px; border-radius: var(--radius-pill);
  background: var(--red); color: #fff; font-size: 11px; line-height: 17px; text-align: center; font-weight: 600; }
/* Top bar between the hamburger break (992 px) and wide screens: the menu, company selector, bell, theme and sign-out must fit
   without page-level horizontal scroll (tablet landscape, S04c live check). */
@media (min-width: 992px) and (max-width: 1279.98px) {
  .user-name { display: none; }
  .nav-right { gap: 6px; }
  .nav-right select { max-width: 190px; }
}

/* ---- Popup editors and row focus (client, 2026-09-30) ---- */
.e-dialog.edit-dialog { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow);
  max-width: calc(100vw - 24px); max-height: calc(100vh - 40px) !important; }  /* Syncfusion sizes it from the body, which is short on small lists */
.e-dialog.edit-dialog .e-dlg-header-content { background: var(--surface); border-bottom: 1px solid var(--line); border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: 14px 18px; }
.e-dialog.edit-dialog .e-dlg-header { color: var(--text); font-family: var(--font-display); font-size: 18px; font-weight: 600; letter-spacing: .3px; }
.e-dialog.edit-dialog .e-dlg-content { background: var(--surface); color: var(--text); padding: 14px 18px 18px; font-size: 14px; }
.e-dialog.edit-dialog .e-footer-content { background: var(--surface); border-top: 1px solid var(--line); border-radius: 0 0 var(--radius-lg) var(--radius-lg); padding: 12px 18px; }
.e-dialog.edit-dialog .e-dlg-closeicon-btn .e-btn-icon { color: var(--text-dim); }
.dialog-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-start; }
.e-dlg-overlay { background-color: rgba(0, 0, 0, .55); }
@media (max-width: 640px) {
  .e-dialog.edit-dialog { width: calc(100vw - 16px) !important; max-height: calc(100vh - 16px) !important; }
}
/* The record just saved, or reopened from its detail page: tinted, with an accent bar. */
.e-grid .e-row.row-focus .e-rowcell { background-color: var(--surface-2) !important; }
.e-grid .e-row.row-focus .e-rowcell:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.company-needed { max-width: 560px; }

/* Photo proof gallery */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-top: 12px; }
.photo-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 0; text-align: left; color: inherit; cursor: pointer; overflow: hidden; }
.photo-card:hover { border-color: var(--accent); }
.photo-card img { display: block; width: 100%; height: 150px; object-fit: cover; }
.photo-none { height: 150px; display: grid; place-items: center; color: var(--text-dim); }
.photo-meta { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; font-size: 13px; }
.photo-full { display: block; max-width: 100%; max-height: 60vh; margin: 0 auto 12px; border-radius: var(--radius); }
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 14px; }