/* Login and site manager (Operate mode). Same tokens, charcoal panels, hairlines. */
.login { display: grid; grid-template-columns: 1fr 1fr; min-height: 100svh; }
.login__media { position: relative; overflow: hidden; background: var(--charcoal); }
.login__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.login__panel { display: grid; align-items: center; padding: calc(var(--header) + 48px) var(--gutter) 96px; }
.login__inner { max-width: 440px; width: 100%; }
.form__error:empty { display: none; }
.form__error { color: var(--ink); font-size: 14px; }
.demo-accounts { margin-top: 48px; border-top: 1px solid var(--hair); padding-top: 24px; }
.demo-accounts summary { cursor: pointer; font: 500 12px/1.4 var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.demo-accounts p { margin-top: 12px; font-size: 14px; }
.demo-accounts table { width: 100%; margin-top: 16px; border-collapse: collapse; font-size: 14px; }
.demo-accounts th { text-align: left; font: 500 11px/1.4 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); padding: 8px 0; border-bottom: 1px solid var(--hair); }
.demo-accounts td { padding: 8px 0; border-bottom: 1px solid var(--hair); }

/* Manager */
.admin { min-height: 100svh; padding-top: var(--header); }
.admin__bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px var(--gutter); border-bottom: 1px solid var(--hair); }
.admin__user { font-family: var(--display); font-size: 24px; margin-top: 2px; }
.admin__bar-actions { display: flex; gap: 12px; }
.admin__bar-actions .btn { min-height: 44px; padding: 10px 20px; }
.admin__body { display: grid; grid-template-columns: 240px 1fr; min-height: calc(100svh - var(--header) - 100px); }
.admin__tabs { border-right: 1px solid var(--hair); padding: 32px 0; }
.admin__tabs ul { list-style: none; display: grid; }
.admin__tabs button { width: 100%; text-align: left; background: none; border: 0; border-left: 1px solid transparent; padding: 14px var(--gutter); cursor: pointer; font: 500 12px/1.4 var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.admin__tabs button[aria-selected="true"] { color: var(--ink); border-left-color: var(--ink); }
.admin__tabs button:hover { color: var(--ink); }
.admin__panels { padding: 40px var(--gutter) 96px; min-width: 0; }
.panel { display: grid; gap: 40px; max-width: 1100px; }
.panel__head { display: flex; align-items: end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.panel__head h2 { font-size: 34px; }
.panel__head p { color: var(--muted); font-size: 15px; margin-top: 8px; max-width: 60ch; }
.card { background: var(--charcoal); padding: 32px; display: grid; gap: 24px; }
.card h3 { font-size: 24px; font-weight: 500; }
.card .muted { font-size: 14px; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.admin-table th { text-align: left; font: 500 11px/1.4 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); padding: 10px 12px 10px 0; border-bottom: 1px solid var(--hair); }
.admin-table td { padding: 14px 12px 14px 0; border-bottom: 1px solid var(--hair); vertical-align: middle; }
.admin-table td.actions { text-align: right; white-space: nowrap; }
.admin-table tr.is-hidden td:not(.actions) { opacity: .5; }
.thumb { width: 72px; height: 54px; object-fit: cover; background: var(--lacquer); display: block; }
.thumb--tall { width: 56px; height: 70px; }
.mini { background: none; border: 1px solid var(--hair-strong); color: var(--ink); padding: 8px 14px; cursor: pointer; font: 500 11px/1.4 var(--body); letter-spacing: .16em; text-transform: uppercase; }
.mini:hover { border-color: var(--ink); }
.mini + .mini { margin-left: 8px; }
.mini--danger:hover { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.admin .form { gap: 24px; }
.admin .form__row { gap: 24px; }
.admin .field input, .admin .field textarea, .admin .field select { font-size: 15px; padding: 10px 0 12px; }
.admin .field textarea { min-height: 88px; }
.admin .form__row--3 { grid-template-columns: 1fr 1fr 1fr; }
.spec-rows { display: grid; gap: 12px; }
.spec-row { display: grid; grid-template-columns: 1fr 2fr auto; gap: 12px; align-items: end; }
.check { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-size: 15px; }
.check input { width: 16px; height: 16px; accent-color: var(--ink); margin: 0; }
.checks { display: grid; gap: 12px; }
.drop { border: 1px dashed var(--hair-strong); padding: 24px; text-align: center; color: var(--muted); font-size: 14px; display: grid; gap: 8px; justify-items: center; cursor: pointer; }
.drop.is-over { border-color: var(--ink); color: var(--ink); }
.drop input { display: none; }
.drop img { max-height: 160px; width: auto; }
.gallery-list { display: grid; gap: 12px; }
.gallery-row { display: grid; grid-template-columns: 72px 1fr 1fr auto; gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--hair); }
.gallery-row .field { gap: 6px; }
.gallery-row .field label { font-size: 10px; }
.enquiry { display: grid; grid-template-columns: 1fr auto; gap: 16px 32px; padding: 20px 0; border-bottom: 1px solid var(--hair); }
.enquiry.is-unread .enquiry__name::before { content: ""; display: inline-block; width: 6px; height: 6px; background: var(--brass); margin-right: 12px; vertical-align: middle; }
.enquiry__name { font-family: var(--display); font-size: 22px; }
.enquiry__meta { color: var(--muted); font-size: 13px; margin-top: 4px; }
.enquiry__msg { grid-column: 1 / -1; white-space: pre-wrap; max-width: 70ch; font-size: 15px; }
.tone-pills { display: flex; gap: 12px; flex-wrap: wrap; }
.admin-dialog { background: var(--charcoal); color: var(--ivory); border: 1px solid var(--hair); padding: 40px; max-width: 480px; width: calc(100% - 48px); }
.admin-dialog::backdrop { background: rgba(11, 11, 12, .7); }
.admin-dialog p { margin-top: 12px; }
.admin-dialog .btn-row { margin-top: 32px; }
.admin-toast { position: fixed; left: 50%; bottom: 32px; transform: translate(-50%, 20px); background: var(--ivory); color: var(--lacquer); padding: 12px 20px; font: 500 12px/1.4 var(--body); letter-spacing: .18em; text-transform: uppercase; opacity: 0; transition: opacity var(--t-ui) var(--ease), transform var(--t-ui) var(--ease); pointer-events: none; z-index: 80; margin: 0; }
.admin-toast.show { opacity: 1; transform: translate(-50%, 0); }
.empty { color: var(--muted); font-size: 15px; padding: 24px 0; }
.perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.role-card { border: 1px solid var(--hair); padding: 20px; display: grid; gap: 14px; }
.role-card h4 { font-family: var(--display); font-size: 22px; font-weight: 400; }
.locked { font-size: 12px; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; }
@media (max-width: 900px) {
  .login { grid-template-columns: 1fr; }
  .login__media { display: none; }
  .admin__body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .admin__bar { flex-wrap: wrap; }
  .admin__tabs { border-right: 0; border-bottom: 1px solid var(--hair); padding: 0; overflow-x: auto; }
  .admin__tabs ul { grid-auto-flow: column; }
  .admin__tabs button { white-space: nowrap; border-left: 0; border-bottom: 1px solid transparent; }
  .admin__tabs button[aria-selected="true"] { border-bottom-color: var(--ink); }
  .admin .form__row--3, .spec-row, .gallery-row { grid-template-columns: 1fr; }
  .enquiry { grid-template-columns: 1fr; }
}