/* Dark black & white theme, modelled on www.oqwhy.com
   (black canvas, charcoal header bar, Poppins, uppercase letter-spaced navigation, square corners). */
:root {
    --bg: #000000;
    --surface: #111111;
    --surface-2: #1a1a1a;
    --bar: #2b2b2b;
    --line: #333333;
    --line-strong: #555555;
    --text: #ffffff;
    --text-soft: #bababa;
    --muted: #8a8a8a;
    --accent: #ffffff;        /* oqwhy.com uses #ffca27 here; set it to get the yellow menu highlight */
    --ok: #d9d9d9;
    --err: #ff6b6b;
    --radius: 0;
    --track: 2.1px;           /* letter-spacing used for uppercase labels */
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* "hidden" always wins over a class that sets display */
html { background: var(--bg); scrollbar-color: #444 #0d0d0d; }
body {
    margin: 0; min-height: 100vh; display: flex; flex-direction: column;
    font: 300 15px/1.7 Poppins, "Segoe UI", sans-serif; background: var(--bg); color: var(--text-soft);
    -webkit-font-smoothing: antialiased;
}
a { color: var(--text); text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
a:hover { color: var(--accent); text-decoration-color: currentColor; }
h1, h2, h3 { color: var(--text); font-weight: 600; line-height: 1.25; }
h1 { font-size: 1.9rem; margin: 0 0 .8rem; letter-spacing: .5px; }
h2 { font-size: .9rem; margin: 1.8rem 0 .9rem; text-transform: uppercase; letter-spacing: var(--track); font-weight: 500; }
h3 { font-size: 1rem; text-transform: uppercase; letter-spacing: var(--track); font-weight: 500; }
strong { color: var(--text); font-weight: 600; }
code { font-family: ui-monospace, Consolas, monospace; color: var(--text); }
img { max-width: 100%; display: block; }
::selection { background: #fff; color: #000; }

/* ---------- header bar ---------- */
.topbar { background: var(--bar); position: sticky; top: 0; z-index: 50; }
.topbar-inner { max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; display: flex; align-items: center; gap: 1.5rem; min-height: 86px; }
.brand { display: flex; flex-direction: column; line-height: 1; text-decoration: none; color: #fff; margin-right: auto; }
.brand:hover { color: #fff; }
.brand-script { font-family: "Gochi Hand", cursive; font-size: 2rem; letter-spacing: 1px; }
.brand-sub { font-weight: 700; font-style: italic; font-size: .8rem; margin: .15rem 0 0 1.1rem; letter-spacing: .3px; }
.topbar nav { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.6rem; }
.topbar nav a, .topbar .linkbtn {
    color: #fff; text-decoration: none; font-size: 13px; font-weight: 400;
    text-transform: uppercase; letter-spacing: var(--track); padding: .4rem 0;
    border-bottom: 1px solid transparent;
}
.topbar nav a:hover, .topbar .linkbtn:hover { color: var(--accent); border-bottom-color: currentColor; }
.topbar nav a.active { color: var(--accent); border-bottom-color: currentColor; }
.menu-toggle { display: none; background: none; border: 1px solid #fff; width: 36px; height: 34px; padding: 8px 9px; cursor: pointer; }
.menu-toggle span { display: block; height: 2px; background: #fff; margin: 0 0 4px; }
.menu-toggle span:last-child { margin: 0; }

/* ---------- layout ---------- */
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 2.5rem 1.25rem 4rem; flex: 1; }
.footer { background: var(--surface-2); border-top: 10px solid var(--bar); }
.footer-inner { max-width: 1200px; margin: 0 auto; padding: 1.4rem 1.25rem; text-align: center;
                font-size: 11px; letter-spacing: 2.75px; text-transform: uppercase; color: var(--text-soft); }
.footer a { color: #fff; text-decoration: none; }
.footer .sep { margin: 0 .6rem; color: var(--line-strong); }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.pad { padding: 2rem; margin-bottom: 1.5rem; }
.pad-s { padding: .9rem 1rem 1.1rem; }
.narrow { max-width: 540px; margin: 1rem auto; }
.center { text-align: center; }
.muted { color: var(--muted); }
.small { font-size: .82rem; }
.inline { display: inline; margin: 0; }

/* ---------- buttons & badges ---------- */
.btn {
    display: inline-block; background: #fff; color: #000; border: 1px solid #fff; border-radius: var(--radius);
    padding: .8rem 1.7rem; font: 500 12px/1.2 Poppins, sans-serif; letter-spacing: var(--track); text-transform: uppercase;
    cursor: pointer; text-decoration: none; transition: background .2s, color .2s;
}
.btn:hover { background: transparent; color: #fff; }
.btn.outline { background: transparent; color: #fff; }
.btn.outline:hover { background: #fff; color: #000; }
.btn.small { padding: .5rem 1rem; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--text); cursor: pointer; text-decoration: underline;
           text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.linkbtn:hover { text-decoration-color: currentColor; }
.linkbtn.danger { color: var(--err); }
.badge {
    display: inline-block; font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 1.8px;
    border: 1px solid var(--line-strong); color: var(--text); padding: .15rem .55rem; vertical-align: middle; line-height: 1.5;
}

.flash { padding: .85rem 1.1rem; margin-bottom: 1.25rem; border: 1px solid var(--line-strong); border-left: 3px solid #fff;
         background: var(--surface-2); color: var(--text); }
.flash.err { border-color: #5a2a2a; border-left-color: var(--err); color: #ffd6d6; }
.flash.info { border-left-color: var(--muted); color: var(--text-soft); }

/* ---------- forms ---------- */
.form label { display: block; margin-bottom: 1.1rem; font-size: 11px; font-weight: 500; color: var(--text-soft);
              text-transform: uppercase; letter-spacing: 1.8px; }
.form input:not([type=radio]):not([type=checkbox]):not([type=file]), .form select, .form textarea,
.filters input, .filters select, .caption-form input {
    display: block; width: 100%; margin-top: .4rem; padding: .7rem .8rem;
    font: 300 15px/1.4 Poppins, sans-serif; letter-spacing: normal; text-transform: none; color: #fff;
    background: #000; border: 1px solid var(--line-strong); border-radius: var(--radius);
}
.form input[type=file] { display: block; margin-top: .5rem; color: var(--text-soft); font: 300 14px Poppins, sans-serif; text-transform: none; letter-spacing: normal; }
.form input[type=file]::file-selector-button { font: 500 11px Poppins, sans-serif; letter-spacing: 1.8px; text-transform: uppercase;
    background: #fff; color: #000; border: 0; padding: .6rem 1rem; margin-right: 1rem; cursor: pointer; }
.form select, .filters select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #fff 50%), linear-gradient(135deg, #fff 50%, transparent 50%);
    background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 2.2rem; }
input::placeholder, textarea::placeholder { color: #666; }
input:focus, select:focus, textarea:focus { outline: 1px solid #fff; outline-offset: -1px; border-color: #fff; }
input[readonly] { color: var(--muted) !important; }
input[type=radio], input[type=checkbox] { accent-color: #fff; }
input[type=date]::-webkit-calendar-picker-indicator { filter: invert(1); }
.row2, .row3, .row4 { display: grid; gap: 0 1.2rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.row3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.row4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: .5rem; }
.role-pick { display: flex; gap: 1rem; margin-bottom: 1.2rem; }
.role-pick label { flex: 1; border: 1px solid var(--line-strong); padding: .85rem; cursor: pointer; margin: 0; color: #fff; }
.role-pick label:has(input:checked) { border-color: #fff; background: #fff; color: #000; }

/* ---------- landing ---------- */
.hero { text-align: center; padding: 5rem 1rem 4rem; border-bottom: 1px solid var(--line); margin-bottom: 3rem; }
.hero h1 { font-size: clamp(1.8rem, 4.5vw, 3.2rem); font-weight: 700; text-transform: uppercase; letter-spacing: 3px; max-width: 900px; margin: 0 auto 1.2rem; }
.hero p { max-width: 640px; margin: 0 auto 2rem; color: var(--text-soft); font-size: 1.05rem; }
.hero-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1rem; }
.features { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.features h3 { margin-top: 0; }

/* ---------- browse ---------- */
.filters { display: grid; gap: .8rem; grid-template-columns: 2fr 1.5fr 1fr auto; align-items: center; padding: 1.2rem; }
.filters input, .filters select { margin-top: 0; }
.grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.person { text-decoration: none; color: var(--text-soft); transition: border-color .2s; }
.person:hover { border-color: #fff; color: var(--text-soft); }
.person img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: #0d0d0d; filter: grayscale(.15); transition: filter .3s, transform .4s; }
.person:hover img { filter: none; transform: scale(1.03); }
.person strong { text-transform: uppercase; letter-spacing: 1.2px; font-weight: 500; font-size: .92rem; }
.pager { display: flex; gap: .4rem; justify-content: center; margin-top: 2rem; flex-wrap: wrap; }
.pager a { min-width: 2.3rem; text-align: center; padding: .4rem .7rem; border: 1px solid var(--line-strong); text-decoration: none; color: #fff; }
.pager a:hover { border-color: #fff; }
.pager a.active { background: #fff; color: #000; border-color: #fff; }

/* ---------- profile ---------- */
.profile-head { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 2rem; align-items: start; }
/* (min-width 0: wide content such as a long shoots timeline may not stretch the column, which pushed the Edit button
   out of view on the right) */
.profile-head > div { min-width: 0; }
.avatar { width: 260px; aspect-ratio: 4 / 5; object-fit: cover; background: #0d0d0d; }
.profile-head h1 { text-transform: uppercase; letter-spacing: 2px; }
/* name with the Edit button on the right, inside the profile card */
/* (no wrapping: with a long name and badges, e.g. a photographer, the Edit button stays top right; the name wraps) */
.profile-title { display: flex; flex-wrap: nowrap; align-items: flex-start; justify-content: space-between; gap: .5rem 1rem; }
.profile-person { margin: -.6rem 0 .3rem; color: var(--text-soft); font-size: 1rem; }   /* the person's name under a company name */
.profile-title h1 { margin-top: 0; flex: 1 1 auto; min-width: 0; overflow-wrap: normal; word-break: normal; hyphens: manual; }   /* (a name wraps between words, never inside one) */
.profile-edit { flex-shrink: 0; margin-left: auto; }
/* phone: a smaller name, and the Edit button only the pencil (room for the name) */
@media (max-width: 720px) {
    .profile-head h1 { font-size: 1.45rem; letter-spacing: 1px; }
    .profile-edit .pe-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .profile-edit { padding: .45rem .6rem; }
}
.contacts { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; gap: .45rem; }
.bio { margin: 0; color: var(--text-soft); }

/* ---------- galleries ---------- */
.gallery { columns: 3 260px; column-gap: 1rem; }
.gallery figure { break-inside: avoid; margin: 0 0 1rem; overflow: hidden; }
.gallery figure img { width: 100%; transition: opacity .3s; }
.gallery figure a:hover img { opacity: .85; }
.gallery figcaption { font-size: .8rem; color: var(--muted); padding: .45rem .1rem 0; letter-spacing: .5px; }
.gallery.manage figcaption { padding: .8rem .9rem .9rem; }
.gallery.manage .is-profile { border-color: #fff; outline: 1px solid #fff; }
.caption-form { display: flex; gap: .6rem; align-items: center; }
.caption-form input { flex: 1; min-width: 0; margin: 0; padding: .45rem .6rem; font-size: 13px; }
.img-actions { display: flex; justify-content: space-between; align-items: center; margin-top: .6rem; gap: .5rem; font-size: .85rem; }

/* ---------- visibility picker ---------- */
.radio-card { display: flex !important; gap: .9rem; align-items: flex-start; border: 1px solid var(--line-strong);
              padding: 1rem 1.1rem; cursor: pointer; text-transform: none !important; letter-spacing: normal !important;
              font-size: 15px !important; font-weight: 300 !important; color: var(--text-soft) !important; }
.radio-card:has(input:checked) { border-color: #fff; background: var(--surface-2); }
.radio-card input { margin-top: .4rem; }
fieldset { border: 1px solid var(--line); padding: 1.2rem; margin: 0 0 1.4rem; }
fieldset:disabled { opacity: .35; }
legend { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 1.8px; color: #fff; padding: 0 .5rem; }
.picker-tools { display: flex; gap: 1.2rem; align-items: center; margin-bottom: .9rem; }
.picker-tools input { flex: 1; margin: 0 !important; }
.picker-list { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); max-height: 480px; overflow-y: auto; }
.pick { display: flex !important; align-items: center; gap: .7rem; margin: 0 !important; padding: .55rem; border: 1px solid var(--line);
        cursor: pointer; text-transform: none !important; letter-spacing: normal !important; font-size: 14px !important; font-weight: 300 !important; }
.pick:hover { border-color: var(--line-strong); }
.pick:has(input:checked) { border-color: #fff; background: var(--surface-2); }
.pick img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.pick > span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pick[hidden] { display: none !important; }

/* ---------- invitations ---------- */
.code-input { font-family: ui-monospace, Consolas, monospace !important; letter-spacing: .15em !important; text-transform: uppercase !important; }
.tabs { display: flex; gap: .4rem; margin: 0 0 1rem; }
.tabs a { padding: .45rem 1.1rem; text-decoration: none; border: 1px solid var(--line-strong); color: #fff;
          font-size: 11px; text-transform: uppercase; letter-spacing: 1.8px; }
.tabs a:hover { border-color: #fff; }
.tabs a.active { background: #fff; color: #000; border-color: #fff; }
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.table th, .table td { text-align: left; padding: .8rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 1.8px; color: var(--muted); background: var(--surface-2); }
.table tbody tr:hover { background: #161616; }
.code { font-family: ui-monospace, Consolas, monospace; font-size: .95rem; white-space: nowrap; color: #fff; letter-spacing: .05em; }
.nowrap { white-space: nowrap; }
.thumb-sm { width: 44px; height: 55px; object-fit: cover; background: #0d0d0d; }
/* round, like on Messages: the people in the admin tables (Users, Invitations & accounts, My models & make-up, 18+) */
/* (max-width none, flex none: a narrow table column or flex row may not squeeze it into an oval) */
.thumb-round { width: 60px; height: 60px; min-width: 60px; max-width: none; flex: none; aspect-ratio: 1; border-radius: 50%; object-fit: cover;
               display: block; background: var(--surface-2); border: 2px solid transparent; }
.av-wrap.is-inactive .thumb-round { border-color: #5a2a2a; }
.nowrap > * + * { margin-left: .9rem; }
.status { font-size: 10px; font-weight: 500; padding: .1rem .5rem; text-transform: uppercase; letter-spacing: 1.5px; border: 1px solid var(--line-strong); }
.status.open { background: #fff; color: #000; border-color: #fff; }
.status.used { color: var(--text-soft); }
.status.revoked, .status.expired { color: var(--err); border-color: #5a2a2a; }

/* ---------- managed accounts: invitation ---------- */
.manage-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.invite-panel { border-color: #fff; }
.invite-link { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin: 1rem 0; }
.invite-link input { flex: 1 1 320px; min-width: 0; padding: .6rem .7rem; background: #000; color: #fff; border: 1px solid var(--line-strong);
                     font: 400 13px ui-monospace, Consolas, monospace; }
.table td .btn.small { padding: .4rem .8rem; font-size: 10px; }

/* ---------- reservations ---------- */
.label { font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 1.8px; color: var(--muted); margin-bottom: .15rem; }
.page-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .75rem; margin-bottom: .5rem; }
.page-head h1 { margin: 0; }
.res-info { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; align-items: flex-start; }
.res-info strong { font-size: 1.15rem; }
.res-info .over, .booking-bar .over { color: var(--err); }
.res-rules { flex: 1 1 100%; margin: 0; }
.month-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1.5rem 0 .75rem; }
.month-nav h2 { margin: 0; font-size: 1.1rem; }
/* ---------- reservation calendar: light, like paper (inverted from the dark site) ---------- */
.legend { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin-bottom: .75rem; color: var(--text-soft); }
.legend .sw { display: inline-block; width: 15px; height: 15px; vertical-align: -3px; margin-right: .35rem; border: 1px solid #999; }
.sw.free { background: #fff; }
.sw.selected { background: #000; border-color: #fff; }
.sw.mine { background: #4a4a4a; }
.sw.taken { background: #d4d4d4; }
.sw.blocked { background: repeating-linear-gradient(45deg, #fff 0 3px, #cfcfcf 3px 5px); }
.sw.lm { background: linear-gradient(225deg, #000 0 32%, #e4e4e4 32%); border-color: #000; }

.cal { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 640px; background: #fff; color: #222; }
.cal th, .cal td { border: 1px solid #dedede; text-align: center; padding: 0; height: 32px; }
.cal thead th { background: #ececec; color: #555; font-weight: 500; text-transform: uppercase; letter-spacing: 1.2px; font-size: 10px; padding: .45rem .3rem; }
.cal .cal-room { color: #000; font-size: 11px; letter-spacing: 1.8px; font-weight: 600; }
.cal .cal-room.is-default { background: #d8d8d8; }
.cal .cal-room .badge { color: #000; border-color: #000; }
.cal .room-start { border-left: 2px solid #9a9a9a; }
.cal .cal-date { text-align: left; padding: 0 .6rem; white-space: nowrap; font-weight: 400; color: #222; width: 90px; }
.cal .cal-date { position: sticky; left: 0; z-index: 2; background: #fff; }
.cal thead .cal-date { background: #ececec; }
.cal tr.weekend .cal-date { color: #000; font-weight: 600; }
.cal tr.weekend td.cell.free, .cal tr.weekend th.cal-date, .cal tr.weekend td.day-cell { background-color: #f5f5f5; }
.cal tr.today .cal-date { box-shadow: inset 4px 0 0 #000; font-weight: 600; }
.cal tr.past td, .cal tr.past th { color: #b5b5b5; }
.cal tr.past td.cell.mine, .cal tr.past td.cell.taken { opacity: .55; }
/* last-minute: grey tint + black corner on free parts; corner also on parts that were booked last-minute */
.cal tr.lm td.cell.free { background: #e4e4e4; }
.cal tr.lm td.cell.free .cell-check { color: #444; }
.cal tr.lm td.cell.free::after, .cal td.cell.lm-booked::after {
    content: '; position: absolute; top: 0; right: 0; width: 0; height: 0; pointer-events: none;
    border-style: solid; border-width: 0 10px 10px 0; border-color: transparent #000 transparent transparent; }
.cal td.cell.mine.lm-booked::after, .cal tr.lm td.cell.free.selected::after { border-right-color: #fff; }
.cal tr.lm .cal-date { font-weight: 600; }
.lm-tag { font-size: 9px; font-weight: 600; letter-spacing: 1px; background: #000; color: #fff; padding: .05rem .3rem; margin-left: .35rem; }
.cell.free { background: #fff; }
.cell.mine { background: #4a4a4a !important; color: #fff; font-weight: 600; }
.cell.mine a { color: #fff; text-decoration: none; display: block; }
.cell.taken { background: #d4d4d4 !important; color: #333; font-size: 10px; letter-spacing: 1px; }
.cell.taken a { color: #000; text-decoration: none; display: block; }
.cell.blocked { background: repeating-linear-gradient(45deg, #fff 0 3px, #e1e1e1 3px 5px) !important; }
.cell.off { background: #f7f7f7; }
.cal td.cell { position: relative; }
.cell-check { display: flex; align-items: center; justify-content: center; height: 32px; cursor: pointer; color: #9a9a9a; }
.cell-check input { position: absolute; opacity: 0; pointer-events: none; }
.cell-check:hover { background: #e9e9e9; color: #000; }
.cell.selected { background: #000 !important; }
.cell.selected .cell-check { color: #fff; font-weight: 700; }
.cell.selected .cell-check:hover { background: #222; color: #fff; }
.cell-check:has(input:focus-visible) { outline: 2px solid #000; outline-offset: -3px; }
.day-btn { background: none; border: 0; color: #9a9a9a; cursor: pointer; font-size: 13px; width: 100%; height: 32px; }
.day-btn:hover { color: #000; background: #e9e9e9; }
.res-details { margin-top: 1.5rem; }
.check-line { display: flex !important; gap: .6rem; align-items: center; text-transform: none !important; letter-spacing: normal !important; font-size: 14px !important; font-weight: 300 !important; color: var(--text-soft) !important; }
.booking-bar { position: sticky; bottom: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
               padding: .9rem 1.2rem; background: var(--bar); border-top: 1px solid var(--line-strong); margin-top: 1rem; color: var(--text-soft); }
.btn:disabled { opacity: .35; cursor: not-allowed; }
.btn.danger { color: var(--err); border-color: #5a2a2a; }
.btn.danger:hover { background: var(--err); color: #000; border-color: var(--err); }

.booking-head { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.slot-list { list-style: none; margin: 0 0 1rem; padding: 0; border-top: 1px solid var(--line); }
.slot-list li { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.2rem; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.slot-date { color: #fff; min-width: 130px; }
.slot-room { text-transform: uppercase; letter-spacing: 1.5px; font-size: 11px; color: var(--text); min-width: 140px; }
.booking-note { border-left: 2px solid var(--line-strong); padding-left: .8rem; margin: 0 0 1rem; }
.booking.is-past { opacity: .6; }
.booking .actions { align-items: center; }
.input-sm { padding: .4rem .5rem; background: #000; color: #fff; border: 1px solid var(--line-strong); font: 300 14px Poppins, sans-serif; }
.input-sm.num { width: 5.5rem; }
.input-sm::placeholder { color: #666; }

/* ---------- contracts (paper look, also when printed) ---------- */
.hidden { display: none !important; }
.profile-actions { margin-top: 1.2rem; }
/* all buttons for a profile, inside the profile card */
.profile-tools { margin-top: 1.4rem; border-top: 1px solid var(--line); }
.tools-group { padding: .9rem 0; border-bottom: 1px solid var(--line); }
/* photographer: "Change profile photo" (one photo) */
.profile-photo-form { margin: .5rem 0 .3rem; }
.profile-photo-form .upload-queue { margin-top: .5rem; }
.pp-choose { cursor: pointer; }
.pp-choose:focus-within { outline: 1px solid #fff; outline-offset: 2px; }
.pp-row { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: flex-start; }
.pp-row .avatar { width: 120px; }
.tools-group:last-child { border-bottom: 0; padding-bottom: 0; }
.tools-group .label { margin-bottom: .55rem; }
.tools-buttons { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.tools-buttons form.inline { display: inline-flex; flex-wrap: wrap; gap: .5rem; }
.tools-group .small.muted { margin-top: .45rem; }
.back-nav { margin: -1rem 0 1rem; }
.person { scroll-margin-top: 110px; }   /* "back" lands on the card below the sticky menu bar */
.guardian-box { border: 1px solid #fff; padding: .9rem 1.1rem; margin: 1rem 0 .4rem; background: var(--surface-2); }
.guardian-box .contacts { margin-top: .5rem; }
.contract-new { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; }
.contract-new label { flex: 1 1 260px; margin: 0; }
.contract-bar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.contract-bar .spacer { flex: 1; }
.contract-paper { background: #fff; color: #111; max-width: 820px; margin: 0 auto; padding: 3rem 3.2rem;
                  font: 400 15px/1.65 Poppins, "Segoe UI", sans-serif; box-shadow: 0 0 0 1px #333; }
.contract-paper h1 { color: #000; text-transform: none; letter-spacing: 0; font-size: 1.45rem; margin: 0 0 1.6rem; }
.contract-paper p { margin: .25rem 0; }
.contract-paper h1 + .c-version { margin: -1.3rem 0 1.4rem; font-size: .8rem; color: #666; }
.contract-paper .c-label { font-weight: 600; margin-top: 1.1rem; color: #000; }
.contract-paper .c-note { color: #555; font-size: .9em; }
.contract-paper .c-party { margin: .3rem 0 .4rem; }
.contract-paper .indent { padding-left: 3.6rem; }
.contract-paper .cf { font: inherit; color: #000; background: #f6f6f6; border: 0; border-bottom: 1px solid #777;
                      padding: .15rem .35rem; min-width: 9rem; border-radius: 0; }
.contract-paper input.cf { field-sizing: content; max-width: 100%; }   /* fields grow with their text (where supported) */
.contract-paper .c-guardian { margin-top: .6rem; padding: .5rem .8rem; border-left: 3px solid #000; background: #fafafa; }
.contract-paper .c-guardian .c-label { margin-top: 0; }
.contract-paper .cf:focus { outline: none; background: #fffbe6; border-bottom-color: #000; }
.contract-paper .cf.wide { min-width: min(26rem, 100%); }
.contract-paper .cf.short { min-width: 0; width: 5rem; }
.contract-paper .cf.short-fee { min-width: 0; width: 7rem; text-align: right; }
.contract-paper .c-fee { margin-bottom: 1rem; padding: .5rem .8rem; border-left: 3px solid #000; background: #fafafa; }
.contract-paper .cf.block, .contract-paper .cv.block { display: block; width: 100%; min-height: 4.5rem; margin-top: .3rem; }
.contract-paper select.cf { min-width: 14rem; }
/* the contract is white paper: light form controls there (the site itself is dark) */
.contract-paper { color-scheme: light; }
.contract-paper input[type=date]::-webkit-calendar-picker-indicator { filter: none; }
/* radio buttons and checkboxes: white inside, black border, black dot / check mark when chosen */
.contract-paper input[type=radio], .contract-paper input[type=checkbox] {
    -webkit-appearance: none; appearance: none; flex: 0 0 auto;
    width: 1.15em; height: 1.15em; margin: 0 .35em 0 0; vertical-align: -.2em; cursor: pointer;
    background: #fff center / 100% 100% no-repeat; border: 1.5px solid #000;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.contract-paper input[type=radio] { border-radius: 50%; }
.contract-paper input[type=checkbox] { border-radius: 2px; }
.contract-paper input[type=radio]:checked { background-image: radial-gradient(circle, #000 0 42%, #fff 46%); }
.contract-paper input[type=checkbox]:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.contract-paper input[type=radio]:focus-visible, .contract-paper input[type=checkbox]:focus-visible { outline: 2px solid #000; outline-offset: 2px; }
.contract-paper .c-choice { display: inline-flex; align-items: center; cursor: pointer; }
.contract-paper .cv { border-bottom: 1px solid #999; padding: 0 .35rem; display: inline-block; min-width: 3rem; }
.contract-paper .cv.blank { min-width: 12rem; }
.contract-paper .cv.block { border: 1px solid #ccc; padding: .4rem .5rem; }
.contract-paper .c-choice { margin-left: 1rem; white-space: nowrap; }
.contract-paper .c-terms { margin: 1.6rem 0; padding-left: 1.4rem; }
.contract-paper .c-terms li { margin-bottom: .55rem; }
.contract-paper .c-meta { margin: 1.4rem 0; }
.c-signatures { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 1.6rem; }
.c-sig .sig-pad { position: relative; border: 1px dashed #888; background: #fff; margin: .5rem 0; }
.c-sig canvas { display: block; width: 100%; height: 170px; touch-action: none; cursor: crosshair; }
.c-sig .sig-clear { position: absolute; right: .5rem; top: .35rem; color: #555; font-size: .8rem; }
.c-sig .sig-img { display: block; max-width: 100%; height: 120px; object-fit: contain; object-position: left; margin: .4rem 0; }
.c-sig .sig-line { border-bottom: 1px solid #000; height: 90px; }
.c-sig .c-agree { display: flex; gap: .5rem; align-items: center; font-size: .85rem; margin: .4rem 0 .6rem; color: #222; }
.contract-paper .btn { background: #000; color: #fff; border-color: #000; }
.contract-paper .btn:hover { background: #fff; color: #000; }
.c-evidence { font-size: .78rem; color: #555; }
.c-footer { margin-top: 2.2rem; padding-top: .8rem; border-top: 1px solid #ccc; font-size: .72rem; color: #666; }
.c-hash { font-family: ui-monospace, Consolas, monospace; word-break: break-all; }
.c-warn { color: #b3261e; }
.contract-actions { max-width: 820px; margin: 1rem auto 0; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.c-proof { max-width: 820px; margin: 1.5rem auto 0; }

@media (max-width: 720px) {
    .contract-paper { padding: 1.5rem 1.1rem; font-size: 14px; }
    .contract-paper .indent { padding-left: 0; }
    .c-signatures { grid-template-columns: 1fr; }
}

@media print {
    @page { margin: 15mm; }
    html, body { background: #fff !important; color: #000; }
    .topbar, .footer, .no-print, .flash, .contract-actions, .c-proof { display: none !important; }
    .container { padding: 0; max-width: none; }
    .contract-paper { box-shadow: none; padding: 0; max-width: none; }
    .contract-paper .cf { background: none; border: 0; border-bottom: 1px solid #000; }
    .c-sig .sig-pad { border: 0; border-bottom: 1px solid #000; }
}

/* ---------- monochrome line icons ---------- */
.icon { width: 1em; height: 1em; vertical-align: -.15em; flex: 0 0 auto; }
.contacts li .icon { margin-right: .35rem; color: var(--text-soft); }
.btn .icon { margin-right: .3rem; vertical-align: -.12em; }
.inline-badge { display: inline-flex; width: 1.3em; height: 1.3em; align-items: center; justify-content: center;
                border-radius: 50%; background: #000; color: var(--err); box-shadow: 0 0 0 1px var(--err); font-size: .8em; vertical-align: -.25em; }
.badge-muted { color: var(--muted); border-color: var(--line); }

/* ---------- profile pictures with status symbols ---------- */
.av-wrap { position: relative; display: inline-block; line-height: 0; }
.person .av-wrap, .profile-head .av-wrap { display: block; }
.av-badges { position: absolute; top: .45rem; right: .45rem; display: flex; gap: .3rem; line-height: 1; }
.av-badge { display: flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; border-radius: 50%;
            font-size: .95rem; background: #fff; color: #000; box-shadow: 0 0 0 1.5px #000; }
.av-badge .icon { stroke-width: 2.6; }
.av-badge.av-inactive { background: #000; color: var(--err); box-shadow: 0 0 0 1.5px var(--err); }
.av-wrap.is-inactive img { filter: grayscale(1) brightness(.55); }
/* small pictures (tables, Who can see me, messages, birthdays, reports, the Payments member card): the marks small and
   at the bottom right, so they are not over the face of a portrait (large pictures keep them at the top right; the
   hearts are at their bottom right) */
td .av-badges, .pick .av-badges, .message-list .msg-avatar .av-badges, .bday-avatar .av-badges, .report-thumb .av-badges,
.fin-who .av-badges, .req-avatar .av-badges, .chat-face .av-badges, .giver .av-badges, .bday-face .av-badges,
.shoot-faces .av-badges, .inv-face .av-badges
    { top: auto; bottom: -.35rem; right: -.35rem; gap: .15rem; }
td .av-badge, .pick .av-badge, .message-list .msg-avatar .av-badge, .bday-avatar .av-badge, .report-thumb .av-badge,
.fin-who .av-badge, .req-avatar .av-badge, .chat-face .av-badge, .giver .av-badge, .bday-face .av-badge, .shoot-faces .av-badge, .inv-face .av-badge
    { width: 1.1rem; height: 1.1rem; font-size: .62rem; }
td .av-badge.av-18, .pick .av-badge.av-18, .message-list .msg-avatar .av-badge.av-18, .bday-avatar .av-badge.av-18,
.report-thumb .av-badge.av-18, .fin-who .av-badge.av-18, .req-avatar .av-badge.av-18, .chat-face .av-badge.av-18, .inv-face .av-badge.av-18,
.giver .av-badge.av-18, .bday-face .av-badge.av-18, .shoot-faces .av-badge.av-18 { width: auto; padding: 0 .3rem; }   /* ("18+" / "18-": wider) */
.chat-face .av-wrap, .bday-face .av-wrap { display: block; }
.req-avatar .av-wrap.is-inactive img { border-color: #5a2a2a; }
.pick > .av-wrap { flex: 0 0 auto; display: inline-block; }
.filters .filter-worked { grid-column: 1 / -1; margin: 0; }
.filters-more { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.filters-more select { width: auto; min-width: 12rem; flex: 0 1 auto; }
.filters-more a { margin-left: .4rem; }
/* "More filters — model details" (fold-out) */
.more-filters { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: .8rem; }
.more-filters summary { cursor: pointer; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 1.8px;
                        color: var(--text-soft); list-style: none; }
.more-filters summary::-webkit-details-marker { display: none; }
.more-filters summary::before { content: '+'; display: inline-block; width: 1.1em; color: #fff; }
.more-filters[open] summary::before { content: '–'; }
.more-filters-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem 1rem; margin-top: .9rem; align-items: end; }
.more-filters-grid label { display: block; margin: 0; font-size: 11px; font-weight: 500; text-transform: uppercase;
                           letter-spacing: 1.5px; color: var(--text-soft); }
.more-filters-grid input, .more-filters-grid select { margin-top: .35rem; }
.more-filters p { margin: .7rem 0 0; }
@media (max-width: 900px) { .more-filters-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.filters-more .sort-label { display: flex; align-items: center; gap: .5rem; margin: 0 0 0 auto; font-size: 11px; font-weight: 500;
                            text-transform: uppercase; letter-spacing: 1.8px; color: var(--text-soft); }
.pager .pager-all { width: auto; padding-left: .9rem; padding-right: .9rem; text-transform: uppercase; font-size: 11px; letter-spacing: 1.5px; }
.results-line a { white-space: nowrap; }
@media (max-width: 720px) { .filters-more .sort-label { margin-left: 0; flex: 1 1 100%; } .filters-more .sort-label select { flex: 1; } }
@media (max-width: 720px) { .filters-more select { flex: 1 1 100%; } }

/* ---------- reservation requests / modes ---------- */
.sw.pending, .cell.pending { background: repeating-linear-gradient(45deg, #ececec 0 4px, #bdbdbd 4px 8px) !important; }
.cell.pending, .cell.pending a { color: #000; font-weight: 600; text-decoration: none; }
.booking.is-pending { border-style: dashed; border-color: var(--line-strong); }
.pending-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-bottom: 1rem; padding-bottom: .9rem;
               border-bottom: 1px solid var(--line); }
.decide-form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0; }
.decide-form .input-sm { min-width: 12rem; }
.part-line { display: flex; flex-wrap: wrap; gap: .3rem .8rem; align-items: center; justify-content: space-between; padding: .2rem 0; min-height: 2.1rem; }
.part-line + .part-line { border-top: 1px dashed var(--line); }
.part-decide { display: inline-flex; gap: .35rem; white-space: nowrap; }
.table td .part-decide .btn.small { padding: .2rem .55rem; font-size: 9px; }
.part-people { display: none; }
.slot-times { margin-top: .5rem; }
.slot-time { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .8rem; padding: .6rem 1rem .2rem; margin-bottom: .8rem; }
.slot-time label { margin-bottom: .6rem; }
input[type=time]::-webkit-calendar-picker-indicator { filter: invert(1); }
/* reservation requests on a phone: one card per request instead of a sideways-scrolling table */
@media (max-width: 720px) {
    .req-table, .req-table tbody, .req-table tr, .req-table td { display: block; width: 100%; }
    .req-table thead, .req-table .req-people { display: none; }
    .req-table tr { border-bottom: 1px solid var(--line-strong); padding: .4rem 0 .8rem; }
    .req-table tr:hover { background: none; }
    .req-table td { border: 0; padding: .4rem 0; }
    .req-table .part-line { padding: .5rem 0; }
    .req-table .part-line > span:first-child { flex: 1 1 100%; }
    .req-table .part-people { display: block; }
    .req-table .part-decide { width: 100%; }
    .req-table td .part-decide .btn.small, .req-table td .decide-form .btn.small { flex: 1; padding: .6rem .5rem; font-size: 10px; text-align: center; }
    .req-table .decide-form .input-sm { flex: 1 1 100%; min-width: 0; order: -1; }
}
.admin-for { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: center; }
.admin-for .form-inline { display: flex; gap: .8rem; align-items: center; margin: 0; font-size: 11px; text-transform: uppercase;
                          letter-spacing: 1.8px; color: var(--text-soft); }
.admin-for select { padding: .55rem .7rem; background: #000; color: #fff; border: 1px solid var(--line-strong); font: 300 14px Poppins, sans-serif; }

/* ---------- model details (comp card) ---------- */
.details-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1rem 1.5rem; margin: 0; }
.details-grid dt { font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 1.8px; color: var(--muted); }
.details-grid dd { margin: .15rem 0 0; color: var(--text); }
.check-group { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.check-group legend { margin-bottom: .3rem; }
.check-group .check-line { margin: 0 !important; }
.check-group .check-line.is-disabled { opacity: .45; }
.check-group p { flex: 1 1 100%; margin: .3rem 0 0; }
.check-group .rate-field { flex: 1 1 100%; max-width: 16rem; margin: .5rem 0 0 !important; }
.input-prefix { display: flex; align-items: stretch; margin-top: .4rem; }
.input-prefix > span { display: flex; align-items: center; padding: 0 .75rem; background: var(--surface-2); color: #fff;
                       border: 1px solid var(--line-strong); border-right: 0; font-size: 15px; }
.form .input-prefix input:not([type=checkbox]) { margin-top: 0; flex: 1; min-width: 0; }

/* ---------- lightbox: photos on top of the page ---------- */
html.lb-open { overflow: hidden; }
.lb { position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, .94); display: flex; align-items: center; justify-content: center; }
.lb[hidden] { display: none; }
.lb-figure { margin: 0; display: flex; flex-direction: column; align-items: center; }
/* the photo fills the available space (keeping its proportions), also small photos */
.lb-img { width: calc(100vw - 9rem); height: calc(100vh - 8rem); object-fit: contain; transition: opacity .2s; }
.lb-img.loading { opacity: .3; }
.lb-caption { margin-top: .8rem; color: var(--text-soft); font-size: .9rem; text-align: center; }
.lb-btn { position: absolute; display: flex; align-items: center; justify-content: center; width: 3.2rem; height: 3.2rem;
          background: rgba(0, 0, 0, .55); color: #fff; border: 1px solid #555; border-radius: 50%; cursor: pointer; transition: background .2s, border-color .2s; }
.lb-btn:hover, .lb-btn:focus-visible { background: #fff; color: #000; border-color: #fff; outline: none; }
.lb-btn[hidden] { display: none; }
.lb-prev { left: 1.2rem; top: 50%; transform: translateY(-50%); }
.lb-next { right: 1.2rem; top: 50%; transform: translateY(-50%); }
.lb-close { right: 1.2rem; top: 1.2rem; }
.lb-counter { position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%); color: var(--muted); font-size: 11px;
              letter-spacing: 2px; text-transform: uppercase; }
@media (max-width: 720px) {
    .lb-img { width: 100vw; height: calc(100vh - 10rem); }
    .lb-prev, .lb-next { top: auto; bottom: .8rem; transform: none; width: 2.8rem; height: 2.8rem; }
    .lb-prev { left: .8rem; }
    .lb-next { right: .8rem; }
    .lb-close { top: .8rem; right: .8rem; }
    .lb-counter { bottom: 1.6rem; }
}

/* ---------- reservations overview: compact lines grouped per day, actions behind the line ---------- */
.res-day { margin-bottom: 1.1rem; }
.res-filters { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; }
.res-filters select { min-width: 13rem; }
.res-date { margin: 0 0 .4rem; font-size: .95rem; font-weight: 500; color: #fff; text-transform: none; letter-spacing: .3px; }
.res-date .muted { margin-left: .5rem; font-weight: 300; }
.res-day.is-weekend .res-date::after { content: 'weekend'; margin-left: .6rem; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
                                        color: var(--muted); border: 1px solid var(--line-strong); padding: 0 .4rem; }
.res-list { overflow: hidden; }
.res-row { border-bottom: 1px solid var(--line); }
.res-row:last-child { border-bottom: 0; }
.res-line { display: grid; grid-template-columns: 10.5rem 9.5rem minmax(0, 1fr) auto auto; gap: .4rem 1rem; align-items: center;
            padding: .6rem 1rem; cursor: pointer; list-style: none; }
.res-line::-webkit-details-marker { display: none; }
.res-line:hover { background: #161616; }
.res-row[open] > .res-line { background: var(--surface-2); }
.res-room { text-transform: uppercase; letter-spacing: 1.4px; font-size: 11px; color: var(--text); }
.res-people { display: flex; flex-wrap: wrap; gap: .1rem 1rem; font-size: .88rem; color: var(--text); min-width: 0; }
.res-who { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.res-who .muted { font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px; margin-right: .1rem; }
/* the people on a reservation line: small round pictures with their marks, like on the shoot request page */
.res-face { display: inline-block; line-height: 0; flex: none; }
.res-face img { width: 32px; height: 32px; min-width: 32px; max-width: none; border-radius: 50%; object-fit: cover; background: var(--surface-2);
                border: 1px solid var(--line); }
.res-face .av-wrap.is-inactive img { border-color: #5a2a2a; }
.res-face .av-badges { top: auto; bottom: -.3rem; right: -.35rem; gap: .1rem; }
.res-face .av-badge { width: .95rem; height: .95rem; font-size: .55rem; }
.res-face .av-badge.av-18 { width: auto; padding: 0 .25rem; }
.res-part .icon, .res-room .icon { color: var(--muted); }
.res-flags { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.res-toggle { justify-self: end; font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-soft);
              border: 1px solid var(--line-strong); padding: .25rem .55rem; white-space: nowrap; }
.res-toggle::after { content: ' ▾'; }
.res-row[open] .res-toggle { background: #fff; color: #000; border-color: #fff; }
.res-row[open] .res-toggle::after { content: ' ▴'; }
.res-end { justify-self: end; display: flex; gap: .5rem; align-items: center; }
.res-end .res-toggle { min-width: 5.5rem; text-align: center; }
.res-cancel-btn { padding: .25rem .6rem; font-size: 10px; letter-spacing: 1.5px; white-space: nowrap; }
.res-charge { display: inline-flex; gap: .3rem; align-items: center; font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px;
              color: var(--text-soft); white-space: nowrap; cursor: pointer; }
.res-nocancel { font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px; white-space: nowrap; cursor: help; }
.res-row.is-pending > .res-line { box-shadow: inset 3px 0 0 var(--line-strong); }
.res-row.is-past { opacity: .75; }
.res-panel { padding: .3rem 1rem 1rem; background: var(--surface-2); border-top: 1px dashed var(--line); }
.res-panel-info > div { margin: .45rem 0; }
.res-panel-info .label { display: inline; margin-right: .3rem; }
.res-panel .booking-note { margin: .5rem 0; }
.res-block { margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.res-block .label { margin-bottom: .5rem; }
.res-panel .edit-details-form { padding: .8rem 0 0; }
.res-panel .edit-details-form label { margin-bottom: .6rem; }
.res-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.res-actions .check-line { margin: 0 auto 0 0 !important; }
.res-actions .res-cancel { margin-left: auto; }
.res-actions:empty { display: none; }
.res-calendar .label { margin: 0 .4rem 0 0; }
.price-table td { white-space: nowrap; }
.price-table .input-sm.num { width: 6rem; text-align: right; }
.res-cancel.muted { display: inline-flex; gap: .3rem; align-items: center; }
.calendar-box h3 { display: flex; align-items: center; gap: .5rem; margin: 0 0 .4rem; font-size: 1rem; }
.calendar-box p { margin: .4rem 0; }
.btn.outline.is-active { background: #fff; color: #000; }   /* toggle button while its box is open */
.calendar-box form { margin-top: .3rem; }
.res-static { cursor: default; grid-template-columns: minmax(0, 1fr) auto; }
.res-static:hover { background: none; }
.fold-section { margin: 1.5rem 0; }
.fold-section > summary { cursor: pointer; list-style: none; font-size: .9rem; text-transform: uppercase; letter-spacing: 2.1px;
                          font-weight: 500; color: #fff; padding: .4rem 0; margin-bottom: .6rem; }
.fold-section > summary::-webkit-details-marker { display: none; }
.fold-section > summary::before { content: '+'; display: inline-block; width: 1.2em; }
.fold-section[open] > summary::before { content: '–'; }
@media (max-width: 720px) {
    .res-line { grid-template-columns: minmax(0, 1fr) auto; gap: .25rem .8rem; padding: .7rem .8rem; }
    .res-part { grid-column: 1; }
    .res-end { grid-column: 1 / -1; justify-self: stretch; justify-content: flex-end; flex-wrap: wrap; margin-top: .2rem; }
    .res-room, .res-people, .res-flags { grid-column: 1 / -1; justify-content: flex-start; }
    .res-actions .res-cancel { margin-left: 0; }
}

/* ---------- reservations: edit details (per reservation) ---------- */
.edit-details { margin: 0 0 1rem; border: 1px solid var(--line); }
.edit-details summary { cursor: pointer; padding: .55rem .8rem; font-size: 11px; font-weight: 500; text-transform: uppercase;
                        letter-spacing: 1.8px; color: var(--text-soft); list-style: none; }
.edit-details summary::-webkit-details-marker { display: none; }
.edit-details summary::before { content: '+'; display: inline-block; width: 1.1em; color: #fff; }
.edit-details[open] summary::before { content: '–'; }
.edit-details[open] summary { border-bottom: 1px solid var(--line); }
.edit-details-form { padding: .9rem .8rem .4rem; }

/* ---------- profile portfolio: rows in reading order (follows the order chosen on My photos) ---------- */
.gallery.portfolio { columns: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.gallery.portfolio figure { margin: 0; }
.gallery.portfolio figure img { aspect-ratio: 4 / 5; object-fit: cover; }
/* photographer's own profile: "Change order" of the portfolio (drag & drop, numbered) */
.portfolio-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.portfolio-head + .sp-order-bar { margin-bottom: 1rem; }
.gallery.portfolio.is-ordering { counter-reset: pf; }
.gallery.portfolio.is-ordering figure { position: relative; counter-increment: pf; cursor: grab; touch-action: none; user-select: none;
    -webkit-user-select: none; outline: 1px dashed var(--line-strong); }
.gallery.portfolio.is-ordering figure a, .gallery.portfolio.is-ordering figure img { pointer-events: none; }
.gallery.portfolio.is-ordering figure::before { content: counter(pf); position: absolute; z-index: 1; top: 6px; left: 6px; min-width: 24px; height: 24px;
    padding: 0 6px; background: rgba(0, 0, 0, .8); color: #fff; font: 600 12px/24px Poppins, sans-serif; text-align: center; }
.gallery.portfolio.is-ordering figure.dragging { opacity: .35; outline: 2px dashed #fff; cursor: grabbing; }

/* ---------- photo order (My photos): a grid in reading order, drag & drop or arrows ---------- */
/* the same grid when a photographer looks at the photos of a model / make-up artist he manages (not sortable there) */
.gallery.manage { columns: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1rem; }
.gallery.manage figure { margin: 0; position: relative; }
.gallery.manage figure img { aspect-ratio: 4 / 5; object-fit: cover; }
.gallery.manage.sortable figure { cursor: grab; }
.gallery.manage.sortable figure.dragging { opacity: .35; outline: 2px dashed #fff; }
.sort-tools { position: absolute; top: .4rem; left: .4rem; right: .4rem; z-index: 2; display: flex; justify-content: space-between; align-items: center; }
.sort-btn { width: 1.9rem; height: 1.9rem; border-radius: 50%; border: 1px solid #fff; background: rgba(0, 0, 0, .6); color: #fff;
            cursor: pointer; font-size: .7rem; line-height: 1; }
.sort-btn:hover, .sort-btn:focus-visible { background: #fff; color: #000; outline: none; }
.sort-pos { min-width: 1.6rem; height: 1.6rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
            background: #fff; color: #000; font-size: .72rem; font-weight: 600; }
.sort-hint .sort-status { margin-left: .5rem; color: #fff; }

/* ---------- messages: write to the administrator, replies ---------- */
.compose summary { cursor: pointer; list-style: none; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 1.8px; color: #fff; }
.compose summary::-webkit-details-marker { display: none; }
.compose summary .icon { margin-right: .3rem; }
.compose[open] summary { margin-bottom: 1rem; }
/* a line of explanation below the title (in normal letters) */
.compose summary .compose-hint { display: block; margin-top: .3rem; font-weight: 300; text-transform: none; letter-spacing: normal; }
.message-list .msg-body { flex: 1; min-width: 0; }
.message-list li.is-personal { box-shadow: inset 3px 0 0 var(--line-strong); }
.message-list li.is-personal.unread { box-shadow: inset 3px 0 0 #fff; }
.msg-text { color: var(--text); white-space: normal; margin-bottom: .2rem; }
.msg-reply { margin-top: .5rem; }
.msg-reply summary { cursor: pointer; font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-soft); list-style: none; }
.msg-reply summary::-webkit-details-marker { display: none; }
.msg-reply summary::before { content: '↩ '; }
.msg-reply form { margin-top: .5rem; }
.msg-reply textarea { margin-bottom: .5rem; }

/* ---------- private notes (only visible to the photographer who wrote them) ---------- */
.private-notes { border-style: dashed; border-color: var(--line-strong); }
.private-notes h2 .badge { margin-left: .5rem; vertical-align: middle; }
.private-notes textarea { margin: 0 0 .6rem; }
.private-notes .res-actions { justify-content: flex-end; }

/* ---------- worked with (model <-> make-up artist) ---------- */
.collab-list { display: grid; gap: 1rem; }
.collab-person h2 { margin: 0 0 .6rem; text-transform: none; letter-spacing: .3px; font-size: 1.05rem; }
.collab-person h2 .muted { margin-left: .5rem; font-weight: 300; }
.collab-sessions { list-style: none; margin: 0; padding: 0; }
.collab-sessions li { padding: .5rem 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.collab-sessions li:last-child { border-bottom: 0; }
.collab-sessions .badge { margin-left: .4rem; }
.collab-add { margin-top: 1rem; }

/* ---------- menu counters (unread messages, unseen updates, open requests) ---------- */
.nav-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.45em; height: 1.45em; padding: 0 .35em;
             margin-left: .3em; border-radius: 999px; background: #fff; color: #000; font-size: 10px; font-weight: 600;
             letter-spacing: 0; line-height: 1; vertical-align: .1em; }
.topbar nav a.active .nav-count, .topbar nav a:hover .nav-count { background: var(--accent); color: #000; }
/* in the bar itself (not in the dropdowns, not on phones): the number floats at the top right above the text, so it takes
   no room on the line */
@media (min-width: 901px) {
    .topbar nav > a, .nav-top { position: relative; }
    .topbar nav > a > .nav-count, .nav-top > .nav-count { position: absolute; top: -.45rem; right: -1rem; margin: 0; pointer-events: none; }
    .nav-top > .nav-count { right: -.55rem; }   /* (a menu with a dropdown: above its arrow) */
}

/* ---------- admin updates ---------- */
.filters-inline { margin: 0 0 1rem; }
.filters-inline select { padding: .5rem .7rem; background: #000; color: #fff; border: 1px solid var(--line-strong); font: 300 14px Poppins, sans-serif; }
.activity-list li { align-items: flex-start; }
.activity-list .act-type { flex: 0 0 auto; margin-top: .15rem; min-width: 7.5rem; text-align: center; }
.activity-list .act-body { flex: 1; min-width: 0; }
.activity-list .act-seen { flex: 0 0 auto; }
/* (the picture, as on Messages: who did it, or the Studio OQWhy logo) */
@media (max-width: 720px) {
    .activity-list .msg-avatar { flex-basis: 44px; }
    .activity-list .msg-avatar img { width: 44px; height: 44px; }
}
@media (max-width: 720px) {
    .activity-list li { flex-wrap: wrap; }
    .activity-list .act-type { min-width: 0; }
    .activity-list .act-seen { width: 100%; }
}

/* ---------- messages ---------- */
.message-list { list-style: none; margin: 0; padding: 0; }
.message-list li { display: flex; gap: .9rem; padding: .9rem 1.1rem; border-bottom: 1px solid var(--line); }
/* × on a read message: remove it */
.msg-delete { flex: none; margin: 0; align-self: flex-start; }
.msg-delete button { width: 28px; height: 28px; padding: 0; border: 1px solid transparent; background: none; color: var(--muted);
                     font: 400 20px/1 Poppins, sans-serif; cursor: pointer; transition: color .15s, border-color .15s; }
.msg-delete button:hover, .msg-delete button:focus-visible { color: #fff; border-color: var(--line-strong); }
.message-list li:last-child { border-bottom: 0; }
.message-list li.unread { background: var(--surface-2); box-shadow: inset 3px 0 0 #fff; }
.message-list li.unread a, .message-list li.unread { color: #fff; }
.message-list .msg-activate { margin: .5rem 0 .2rem; }   /* admin: "Activate the account of …" on an activation request */
.message-list .msg-icon { color: var(--muted); padding-top: .15rem; flex: 0 0 60px; text-align: center; font-size: 1.3rem; }
/* the sender's picture: round, 60 px, like on the birthday page */
.message-list .msg-avatar { flex: 0 0 60px; align-self: flex-start; }
.message-list .msg-avatar img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; display: block; background: var(--surface-2);
                                border: 2px solid transparent; }
.message-list .msg-avatar:hover img { border-color: #fff; }
.message-list .msg-studio img { background: #000; }   /* from an administrator: the Studio OQWhy logo (not a link) */
.message-list .msg-studio:hover img { border-color: transparent; }
.message-list .msg-avatar .av-wrap.is-inactive img { border-color: #5a2a2a; }

/* contract: printed tick boxes (no emoji) */
.contract-paper .c-box { display: inline-block; width: 1em; height: 1em; border: 1.5px solid #000; vertical-align: -.15em; margin-right: .3em;
                          -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.contract-paper .c-box.on { background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }

/* ---------- menu dropdowns ---------- */
.nav-group { position: relative; }
/* in the bar: each menu with a dropdown centred on the line like the plain links (as an inline box it was placed by
   its baseline, which for My account is the bottom of the profile photo, so its text sat lower than the rest) */
@media (min-width: 901px) { .nav-group { display: flex; align-items: center; } }
.nav-top { display: inline-flex; align-items: center; gap: .3rem; background: none; border: 0; border-bottom: 1px solid transparent;
           padding: .4rem 0; color: #fff; cursor: pointer; font: 400 13px Poppins, sans-serif; text-transform: uppercase; letter-spacing: var(--track); }
.nav-top:hover, .nav-group.open .nav-top { color: var(--accent); }
.nav-group.is-active > .nav-top { border-bottom-color: currentColor; }
.nav-top .icon { font-size: 1.05em; }
/* My account: the member's profile photo, as large as the bar allows; the negative margins keep the menu line (and the
   bar) the same height, also when the menu wraps onto two lines */
.nav-avatar { width: 36px; height: 36px; margin: -8px .35rem -8px 0; border-radius: 50%; object-fit: cover; flex: none;
              border: 1px solid rgba(255, 255, 255, .55); background: var(--surface-2); transition: border-color .15s; }
.nav-top:hover .nav-avatar, .nav-group.open .nav-avatar, .nav-group.is-active .nav-avatar { border-color: #fff; }
.nav-caret { width: 0; height: 0; margin-left: .15rem; border-left: 4px solid transparent; border-right: 4px solid transparent;
             border-top: 5px solid currentColor; transition: transform .15s; }
.nav-group.open .nav-caret { transform: rotate(180deg); }
.nav-menu { display: none; position: absolute; top: calc(100% + .55rem); left: -1rem; z-index: 60; min-width: 14rem;
            background: #1a1a1a; border: 1px solid var(--line-strong); box-shadow: 0 12px 30px rgba(0, 0, 0, .6); padding: .35rem 0; }
.nav-account .nav-menu, .nav-admin .nav-menu { left: auto; right: -1rem; }   /* (the menus at the right: open to the left) */
/* invisible bridge over the gap between menu item and dropdown, so the mouse can move down without it closing */
.nav-menu::before { content: ''; position: absolute; left: 0; right: 0; top: -.65rem; height: .65rem; }
.nav-group.open .nav-menu { display: block; }
.topbar .nav-menu a, .topbar .nav-menu .linkbtn { display: flex; align-items: center; justify-content: space-between; width: 100%;
            padding: .6rem 1rem; border: 0; letter-spacing: 1.5px; font-size: 12px; text-align: left; }
.topbar .nav-menu a:hover, .topbar .nav-menu .linkbtn:hover { background: #262626; color: #fff; }
.topbar .nav-menu a.active { color: #fff; box-shadow: inset 3px 0 0 #fff; background: #222; }
.nav-logout { margin: .35rem 0 0; border-top: 1px solid var(--line-strong); }
.topbar .nav-logout .linkbtn { color: var(--text-soft); }

/* ---------- shoot log ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.badge-soft { color: var(--muted); border-color: var(--line); }
.badge-solid { background: #fff; color: #000; border-color: #fff; }
.badge .icon { font-size: 1.1em; vertical-align: -2px; }
/* summary numbers */
.shoot-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); background: var(--surface);
               margin: 0 0 1.4rem; }
.shoot-stats > div { padding: .9rem 1.1rem; display: flex; align-items: baseline; gap: .5rem; }
.shoot-stats > div + div { border-left: 1px solid var(--line); }
.shoot-stats strong { font-size: 1.6rem; font-weight: 600; line-height: 1; }
.shoot-stats span { font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted); }
/* year headings: a big year with a strong line, then the months below it */
.shoot-year { display: flex; align-items: baseline; gap: 1rem; margin: 3rem 0 .2rem; padding-bottom: .5rem; border-bottom: 2px solid #fff;
              scroll-margin-top: 5rem; }
.shoot-stats + .shoot-year { margin-top: 1.8rem; }
.sy-num { font-size: 2.2rem; font-weight: 600; letter-spacing: 3px; line-height: 1; color: #fff; }
.sy-count { font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 1.8px; color: var(--muted); }
.shoot-year + .shoot-month { margin-top: 1rem; }
/* month headings */
.shoot-month { margin: 1.6rem 0 .6rem; font-size: .8rem; color: var(--muted); display: flex; align-items: center; gap: .8rem; }
.shoot-month::after { content: ''; flex: 1; height: 1px; background: var(--line); }
/* one shoot */
.shoot-list { display: grid; gap: .7rem; }
.shoot { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); overflow: visible; transition: border-color .15s; }
/* jumping to a shoot (#s8, e.g. from the timeline): the whole card lands just below the sticky menu bar */
.shoot { scroll-margin-top: 120px; }
.shoot:hover, .shoot:target { border-color: var(--line-strong); }
.shoot:target { box-shadow: inset 3px 0 0 #fff; }
.shoot-dateblock { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: .1rem;
                   padding: 1rem .4rem; border-right: 1px solid var(--line); background: var(--surface-2); text-align: center; }
.sd-day { font-size: 1.9rem; font-weight: 600; color: #fff; line-height: 1; }
.sd-month { font-size: 11px; text-transform: uppercase; letter-spacing: 2px; color: var(--text); }
.sd-wd { font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted); }
.shoot-main { padding: .95rem 1.2rem 1rem; display: grid; gap: .7rem; min-width: 0; }
.shoot-head { display: flex; align-items: flex-start; gap: .9rem; }
.shoot-faces { margin-top: .1rem; }
.shoot-faces { display: flex; flex: none; }
.shoot-faces > * { display: block; line-height: 0; }
.shoot-faces { gap: .45rem; }   /* round pictures like on Messages, side by side (not overlapping: the marks stay visible) */
.shoot-faces a:hover .thumb-round { border-color: #fff; }
.shoot-info { min-width: 0; display: grid; gap: .2rem; }
.shoot-top { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; }
.shoot-names { display: flex; flex-wrap: wrap; gap: .1rem 1rem; font-size: .84rem; color: var(--text); }
.shoot-names a { text-decoration: none; }
.shoot-names a:hover { text-decoration: underline; }
.shoot-title { margin: 0; font-size: 1.05rem; font-weight: 600; color: #fff; text-transform: none; letter-spacing: .2px; }
.pc-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: var(--surface-2); border: 1px solid var(--line); flex: none; }
.pc-role { font-size: 9px; text-transform: uppercase; letter-spacing: 1.3px; color: var(--muted); margin-right: .15rem; }
.pc-you { color: var(--text-soft); font-style: italic; }
.shoot-photos { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.shoot-photos a { display: block; line-height: 0; }
.shoot-photos img { width: 128px; height: 128px; object-fit: cover; border: 1px solid var(--line); transition: border-color .15s, opacity .15s; }
.shoot-photos a:hover img { border-color: #fff; }
.sp-item { position: relative; display: block; line-height: 0; }
.sp-pick { position: absolute; bottom: 2px; left: 2px; margin: 0; }
/* a shoot I hid from my profile: dimmed in My shoots */
.card.shoot.is-hidden { opacity: .6; }
.card.shoot.is-hidden:hover, .card.shoot.is-hidden:focus-within { opacity: 1; }
.tl-item.is-hidden { opacity: .45; }
/* Edit Shoot: the title with "Hide shoot" and "Delete" at the top right, and the photos (drag into order, × delete,
   the camera square adds photos) */
#shoot-form { scroll-margin-top: 110px; }   /* (Edit Shoot from a link: the top of the card just below the sticky menu bar) */
.sf-delete input:checked { accent-color: var(--err); }
.sf-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; margin-bottom: 1rem; }
.sf-head .actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }
.sf-head form.inline { margin: 0; }
.sf-photos { margin: 0 0 1.2rem; padding: .8rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sf-photos .label .muted { text-transform: none; letter-spacing: .2px; }
.sf-grid { margin: .5rem 0 0; }
.sf-photos p { margin: .5rem 0 0; }
.sf-grid.is-sortable .sp-item[data-id] { cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.sf-grid.is-sortable .sp-item img { -webkit-user-drag: none; }
.sf-grid.is-dragging, .sf-grid.is-dragging .sp-item[data-id] { cursor: grabbing; }
.sf-grid .sp-item.dragging { opacity: .35; }
.sf-grid .sp-item.dragging img { border-style: dashed; border-color: #fff; }
.sp-first { display: none; }
.sf-grid.is-sortable .sp-item:first-child .sp-first { display: block; position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 0;
    background: #fff; color: #000; font: 600 8px/1.4 Poppins, sans-serif; letter-spacing: 1px; text-transform: uppercase; text-align: center;
    pointer-events: none; }
/* "Add photos": a square with a camera at the end of the photos of a shoot (Edit Shoot, and the shoot card for who
   can't edit the shoot); the upload form next to it has only the hidden file input */
.sp-add { width: 128px; height: 128px; display: flex; align-items: center; justify-content: center; border: 1px dashed var(--line-strong);
          color: var(--text-soft); cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.sp-add[hidden] { display: none; }
.sp-add:hover, .sp-add:focus-within { border-color: #fff; color: #fff; background: #0b0b0b; }
.sp-add .icon { width: 34px; height: 34px; }
.shoot-add-form { margin: 0; }
.shoot-add-form.is-uploading + .upload-queue { margin-top: .5rem; }
.shoot .sp-add-hint { margin: -.3rem 0 0; font-size: .76rem; }
.sp-18 { position: absolute; top: 3px; left: 3px; padding: 0 .3rem; border-radius: 999px; background: #000; color: var(--err);
         box-shadow: 0 0 0 1px var(--err); font-size: .62rem; font-weight: 700; line-height: 1.5; pointer-events: none; }
.sp-pick button { width: 22px; height: 22px; padding: 0; border: 1px solid rgba(255, 255, 255, .6); background: rgba(0, 0, 0, .75);
                  color: #fff; font: 14px/1 sans-serif; cursor: pointer; }
.sp-pick button.is-on { background: #fff; color: #000; border-color: #fff; }
.sp-pick button:hover { border-color: #fff; }
figure.is-pick { outline: 1px dashed var(--line-strong); outline-offset: -1px; }
.shoot-tag a { color: var(--text); text-decoration: none; }
.shoot-tag a:hover { color: #fff; text-decoration: underline; }
.shoot-tag.in-photo { text-transform: none; letter-spacing: .2px; font-size: .78rem; color: var(--muted); }
.shoot .sp-hint { margin: -.3rem 0 0; font-size: .76rem; color: var(--muted); line-height: 1.5; }
/* "Change order": drag the photos; numbered, the first one marked as the timeline photo */
.shoot-photos.is-ordering { counter-reset: sp; }
.shoot-photos.is-ordering .sp-item { counter-increment: sp; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.shoot-photos.is-ordering .sp-item a, .shoot-photos.is-ordering .sp-item img { pointer-events: none; }
.shoot-photos.is-ordering .sp-pick, .shoot-photos.is-ordering .sp-delete { display: none; }
.shoot-photos.is-ordering img { border-style: dashed; border-color: var(--line-strong); }
.shoot-photos.is-ordering .sp-item::before { content: counter(sp); position: absolute; top: 2px; left: 2px; min-width: 18px; height: 18px;
    padding: 0 4px; background: rgba(0, 0, 0, .8); color: #fff; font: 600 10px/18px Poppins, sans-serif; text-align: center; }
.shoot-photos.is-ordering .sp-item:first-child img { border: 2px solid #fff; }
.shoot-photos.is-ordering .sp-item:first-child::after { content: 'Timeline'; position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 0;
    background: #fff; color: #000; font: 600 8px/1.4 Poppins, sans-serif; letter-spacing: 1px; text-transform: uppercase; text-align: center; }
.shoot-photos.is-ordering .sp-item.dragging { opacity: .35; cursor: grabbing; }
.sp-order-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem;
                padding: .6rem .8rem; border: 1px dashed var(--line-strong); }
.sp-order-bar[hidden] { display: none; }
.sob-buttons { display: flex; gap: .4rem; }
.sp-delete { position: absolute; top: 2px; right: 2px; margin: 0; }
.sp-delete button { width: 20px; height: 20px; padding: 0; border: 1px solid rgba(255, 255, 255, .6); background: rgba(0, 0, 0, .75);
                    color: #fff; font: 600 14px/1 Poppins, sans-serif; cursor: pointer; opacity: .75; transition: opacity .15s, background .15s; }
.sp-item:hover .sp-delete button, .sp-delete button:focus { opacity: 1; }
.sp-delete button:hover { background: var(--err); border-color: var(--err); }
.shoot-more { width: 64px; height: 64px; display: inline-flex; align-items: center; justify-content: center; border: 1px dashed var(--line-strong);
              color: var(--text-soft); font-size: .9rem; }
.shoot-note-text { margin: 0; display: flex; gap: .45rem; align-items: flex-start; padding: .55rem .75rem; background: #0b0b0b;
                   border-left: 2px solid var(--line-strong); font-size: .86rem; color: var(--text-soft); }
.shoot-note-text .icon { flex: none; margin-top: .2rem; }
.shoot-note-text > span:first-of-type { flex: 1; }
.shoot-note-text .muted { white-space: nowrap; font-size: .75rem; margin-left: auto; }
.shoot-actions { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem;
                 padding-top: .7rem; border-top: 1px solid var(--line); }
.sa-left, .sa-right { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.shoot-actions .btn .icon { font-size: 1.15em; vertical-align: -3px; margin-right: .15rem; }
.shoot-note-form { display: grid; gap: .5rem; }
.shoot-note-form[hidden] { display: none; }
.shoot-note-form textarea { width: 100%; padding: .6rem .7rem; background: #000; color: #fff; border: 1px solid var(--line-strong);
                            font: 300 14px/1.5 Poppins, sans-serif; resize: vertical; }
.shoot-note-form textarea:focus { outline: 1px solid #fff; outline-offset: -1px; border-color: #fff; }
.snf-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; }
.shoot-empty .icon { font-size: 2.2rem; color: var(--muted); }
@media (max-width: 720px) {
    .shoot-stats > div { flex-direction: column; gap: .3rem; padding: .7rem .8rem; }
    .shoot { grid-template-columns: 3.6rem minmax(0, 1fr); }
    .sd-day { font-size: 1.5rem; }
    .shoot-main { padding: .8rem .85rem .9rem; }
    .shoot-actions { flex-direction: column; align-items: stretch; }
    .sa-right { justify-content: flex-end; }
}
.shoot-mini { margin: 0 0 .6rem; padding-left: 1.1rem; }
.shoot-mini li { margin: .3rem 0; }
.shoot-mini .badge { margin-left: .3rem; }
.tools-group .shoot-mini { margin: .1rem 0 0; }
.tools-group .shoot-mini li { margin: .15rem 0; }
.shoot-tag { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--muted); margin-top: .15rem; }
.shoot-form-inline { margin-top: .35rem; }
.shoot-form-inline select { width: 100%; padding: .3rem .4rem; background: #000; color: var(--text-soft); border: 1px solid var(--line);
                            font: 300 12px Poppins, sans-serif; }

/* ---------- My calendar: private month view (shoots + studio reservations) ---------- */
.mycal-legend { align-items: center; }
.mc-sw { display: inline-block; width: 14px; height: 10px; vertical-align: -1px; margin-right: .35rem; }
.mc-sw.shoot { background: #fff; }
.mc-sw.studio { border: 1px solid #fff; }
.mc-sw.pending { border: 1px dashed var(--muted); }
.mycal { padding: 0; overflow: hidden; }
.mycal-head, .mycal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.mycal-head div { padding: .5rem .6rem; font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted);
                  background: var(--surface-2); border-bottom: 1px solid var(--line); }
.mycal-day { min-height: 7.2rem; padding: .35rem .4rem .5rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
             display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.mycal-grid > .mycal-day:nth-child(7n) { border-right: 0; }
.mycal-day.is-empty { background: #0a0a0a; }
.mycal-day.is-weekend:not(.is-empty) { background: #141414; }
.mycal-day.is-past .mc-num { color: var(--muted); }
.mycal-day.is-today { box-shadow: inset 0 0 0 1px #fff; }
.mc-top { display: flex; justify-content: space-between; align-items: center; }
.mc-num { font-size: .85rem; color: var(--text); font-weight: 500; }
.mycal-day.is-today .mc-num { background: #fff; color: #000; padding: 0 .35rem; }
.mc-dow { display: none; }
.mc-add { width: 20px; height: 20px; line-height: 18px; text-align: center; border: 1px solid transparent; color: var(--muted);
          text-decoration: none; font-size: 1rem; opacity: 0; transition: opacity .15s, border-color .15s, color .15s; }
.mycal-day:hover .mc-add, .mc-add:focus { opacity: 1; border-color: var(--line-strong); color: #fff; }
.mc-item { display: block; padding: .18rem .35rem; font-size: .72rem; line-height: 1.3; text-decoration: none; overflow: hidden;
           text-overflow: ellipsis; white-space: nowrap; transition: background .15s, color .15s; }
.mc-item.shoot { background: #fff; color: #000; }
.mc-item.studio { border: 1px solid #fff; color: #fff; }
.mc-item.pending { border: 1px dashed var(--muted); color: var(--text-soft); }
.mc-item:hover { background: #ddd; color: #000; }
.mc-time { font-weight: 600; margin-right: .3rem; }
@media (hover: none) { .mc-add { opacity: 1; border-color: var(--line); } }
/* phones: a list of days instead of the grid (empty days are left out, but keep their + via the button at the top) */
@media (max-width: 720px) {
    .mycal-head { display: none; }
    .mycal-grid { grid-template-columns: 1fr; }
    .mycal-day { min-height: 0; border-right: 0; flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: .3rem .5rem; padding: .55rem .7rem; }
    .mycal-day.is-empty, .mycal-day:not(.has-items):not(.is-today) { display: none; }
    .mc-top { flex: 0 0 100%; }
    .mc-dow { display: inline; color: var(--muted); font-weight: 300; }
    .mc-item { white-space: normal; flex: 1 1 100%; font-size: .82rem; padding: .35rem .55rem; }
}
.shoot-when { font-size: .8rem; color: var(--text-soft); margin-top: .15rem; }
.shoot-when .icon { vertical-align: -2px; margin-right: .2rem; }
.shoot-people-fields { align-items: start; }
.sp-field .sp-name { font-size: 10px; margin-top: -.5rem; }
/* someone not on the site: name and contact details (the administrator invites them) */
.sp-guest { margin: -.5rem 0 1rem; }
.sp-guest[hidden] { display: none; }
.sp-guest > summary { cursor: pointer; font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text); padding: .2rem 0; }
.sp-guest[open] > summary { margin-bottom: .5rem; }
.sp-guest-fields { padding: .6rem .7rem .2rem; border-left: 2px solid var(--line-strong); }
.sp-guest-fields label { margin-bottom: .6rem; }
.sp-guest-fields .muted { margin: 0 0 .5rem; }
/* is this shoot correct? (shoot card, Edit Shoot, Admin → Shoots not correct) */
.shoot-check { margin: .8rem 0 .2rem; padding: .7rem .85rem; border: 1px solid var(--line-strong); border-left: 3px solid var(--text); }
.shoot-check p { margin: 0 0 .5rem; }
.shoot-check p:last-child { margin-bottom: 0; }
.shoot-check.is-disputed { border-color: #5a2a2a; border-left-color: var(--err); }
.shoot-check .inline + p, .shoot-check p + .inline { margin-top: .5rem; }
.sc-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-start; }
.sc-no { flex: 1 1 260px; }
.sc-no > summary { list-style: none; display: inline-flex; }
.sc-no > summary::-webkit-details-marker { display: none; }
.sc-no[open] > summary { margin-bottom: .6rem; }
.sc-form label { margin-bottom: .5rem; }
.sc-form .muted { margin: .4rem 0 0; }
.badge-invalid { color: var(--err); border-color: var(--err); }
/* Admin → Shoots not correct */
.invalid-list { display: grid; gap: 1rem; }
.inv-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.inv-people { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin: .8rem 0; }
.inv-creator { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; padding-top: .8rem; border-top: 1px solid var(--line); }
.inv-creator > .small { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.inv-face { position: relative; line-height: 0; flex: none; }

/* ---------- Studio calendar (on-demand photographers): read only, click a free part to ask for it ---------- */
.cal td.ask-cell { cursor: pointer; }
.cal td.ask-cell .ask-mark { font-size: 10px; color: #777; }
.cal td.ask-cell:hover { outline: 2px solid #000; outline-offset: -2px; }
.cal td.ask-cell.picked { background: #000; }
.cal td.ask-cell.picked .ask-mark { color: #fff; }
.ask-card { margin-top: 1.2rem; }

/* ---------- Portfolio PDF: profile information (tick + edit, for this PDF only) ---------- */
.pdf-fields { display: grid; gap: .35rem; margin-top: .6rem; }
.pdf-fields > .label { margin: .9rem 0 .2rem; }
.pdf-fields > .label:first-child { margin-top: 0; }
/* the checkboxes in rows: compact tiles side by side (as many as fit), label small above the value */
.pdf-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .4rem; }
.pdf-checks-wide { grid-template-columns: 1fr; }
.form .pdf-check { display: grid; grid-template-columns: 18px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: .55rem; row-gap: .05rem;
                   margin: 0 !important; padding: .45rem .6rem; cursor: pointer; text-transform: none; letter-spacing: normal;
                   font-size: .86rem; font-weight: 300; background: #0b0b0b; border: 1px solid var(--line); transition: border-color .15s, opacity .15s; }
.form .pdf-check:hover { border-color: var(--line-strong); }
.pdf-check input { grid-row: 1 / span 2; width: 16px; height: 16px; margin: 0; align-self: center; }
.pdf-check-label { font-size: 9.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 1.3px; line-height: 1.3; }
.pdf-check-value { color: var(--text); overflow-wrap: anywhere; line-height: 1.35; }
.pdf-check > input + .pdf-check-value { grid-row: 1 / span 2; align-self: center; }   /* "About": no label */
.pdf-check:has(input:not(:checked)) { opacity: .45; }
.pdf-check:has(input:not(:checked)) .pdf-check-value { text-decoration: line-through; }
.pdf-fields > .label { margin: .8rem 0 .1rem; }
.pdf-field { display: grid; grid-template-columns: 20px 10.5rem minmax(0, 1fr); align-items: center; gap: .6rem; }
.pdf-field input[type=checkbox] { width: 18px; height: 18px; margin: 0; }
.form .pdf-field-label { margin: 0 !important; font-size: 11px; color: var(--text-soft); text-transform: uppercase; letter-spacing: 1.4px; }
.form .pdf-field input:not([type=checkbox]), .form .pdf-field textarea { margin-top: 0; padding: .5rem .65rem; font-size: 14px; }
.pdf-field-about { align-items: start; }
.pdf-field-about input[type=checkbox], .pdf-field-about .pdf-field-label { margin-top: .6rem !important; }
.pdf-field:has(input[type=checkbox]:not(:checked)) input:not([type=checkbox]),
.pdf-field:has(input[type=checkbox]:not(:checked)) textarea { opacity: .4; }
@media (max-width: 720px) {
    .pdf-field { grid-template-columns: 20px minmax(0, 1fr); }
    .pdf-field > input:not([type=checkbox]), .pdf-field > textarea { grid-column: 1 / -1; }
}

/* ---------- Portfolio PDF: photos per page ---------- */
.pdf-layout-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .6rem; }
.form .pdf-layout-option { display: flex; align-items: center; gap: .8rem; margin: 0 !important; padding: .7rem .8rem; cursor: pointer;
                           background: #0b0b0b; border: 1px solid var(--line); text-transform: none; letter-spacing: normal;
                           font-size: .9rem; font-weight: 300; color: var(--text); transition: border-color .15s; }
.pdf-layout-option:has(input:checked) { border-color: #fff; }
.pdf-layout-option input { flex: none; margin: 0; }
.pdf-layout-option strong { display: block; font-weight: 500; }
.pdf-layout-option .muted { display: block; line-height: 1.4; }
/* little page pictures: one photo / combined */
.pl-pic { flex: none; width: 34px; height: 46px; border: 1px solid var(--line-strong); padding: 3px; display: grid; gap: 2px; background: #000; }
.pl-pic i { background: #666; }
.pl-single { grid-template-columns: 1fr; }
.pl-combine { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }

.pl-custom { grid-template-columns: 1fr 1fr; grid-template-rows: 42fr 58fr; }
.pl-custom i:first-child { grid-column: 1 / -1; }

/* ---------- Portfolio PDF: photo page creator ---------- */
.page-creator { margin-top: 1rem; }
.pc-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 1rem; margin-bottom: .4rem; }
/* My portfolio: saved automatically — the state next to the number of photos */
.pc-saved { margin-left: .4rem; font-weight: 400; letter-spacing: .2px; text-transform: none; color: var(--muted); }
.pc-saved.is-done::before { content: '✓ '; }
.pc-saved.is-error { color: var(--err); }
.pc-pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(285px, 1fr)); gap: 1.2rem; margin: .8rem 0 1.2rem; }   /* ~50% bigger pages */
.pc-page { background: #0b0b0b; border: 1px solid var(--line); padding: .55rem; display: grid; gap: .45rem; }
.pc-page-head { display: flex; justify-content: space-between; align-items: center; }
.pc-page-no { font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-soft); }
.pc-tools { display: flex; gap: .2rem; }
.pc-tools button { width: 24px; height: 24px; background: none; border: 1px solid var(--line-strong); color: #fff; cursor: pointer; line-height: 1; }
.pc-tools button:hover:not(:disabled) { background: #fff; color: #000; }
.pc-tools button:disabled { opacity: .25; cursor: default; }
/* the layout choices: little pages */
.pc-layouts { display: flex; flex-wrap: wrap; gap: .3rem; }
.pc-lay { width: 22px; height: 30px; padding: 2px; display: grid; gap: 1px; background: #000; border: 1px solid var(--line-strong); cursor: pointer; }
.pc-lay i { background: #555; }
.pc-lay.is-on { border-color: #fff; }
.pc-lay.is-on i { background: #fff; }
/* the page itself (A4) and the layouts — the same shapes as in the PDF */
.pc-sheet { aspect-ratio: 1 / 1.414; background: #000; border: 1px solid var(--line-strong); padding: 6%; display: grid; gap: 4%; }
.lay-1 { grid-template-columns: 1fr; }
.lay-2v { grid-template-rows: 1fr 1fr; }
.lay-2h { grid-template-columns: 1fr 1fr; }
.lay-3t { grid-template-columns: 1fr 1fr; grid-template-rows: 42fr 58fr; }
.lay-3t > :first-child { grid-column: 1 / -1; }
.lay-3b { grid-template-columns: 1fr 1fr; grid-template-rows: 58fr 42fr; }
.lay-3b > :nth-child(3) { grid-column: 1 / -1; }
.lay-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.pc-slot { position: relative; min-width: 0; min-height: 0; }
.pc-slot-btn { width: 100%; height: 100%; padding: 0; border: 1px dashed var(--line-strong); background: #111; cursor: pointer;
               display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 1.1rem; }
.pc-slot.is-full .pc-slot-btn { border-style: solid; border-color: transparent; background: #0d0d0d; }
.pc-slot-btn img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pc-slot-btn:hover { border-color: #fff; }
.pc-slot.is-picked .pc-slot-btn { outline: 2px solid #fff; outline-offset: 1px; }
.pc-remove { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; padding: 0; border: 0; background: rgba(0, 0, 0, .8);
             color: #fff; cursor: pointer; font-size: .8rem; line-height: 18px; }
.pc-remove:hover { background: var(--err); }
.pc-tray-wrap { margin-top: .8rem; }   /* "Not on a page": above the pages */
/* My portfolio: "Not on the page" in a card of its own, above the card with the pages / rows; "View my portfolio" between them */
.pc-tray-card { margin-top: 1rem; }
.pc-tray-card .pc-tray-wrap { margin-top: 0; }
.pc-tray-title { margin: 0 0 .6rem; }
.pc-view { display: flex; justify-content: flex-end; margin: 1rem 0 0; }
/* My portfolio → PDF: the preview of the PDF, in a window over the page; "Download PDF" saves it */
.pdf-preview { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; padding: 1rem;
               background: rgba(0, 0, 0, .82); }
.pdf-preview[hidden] { display: none; }
.pv-open { overflow: hidden; }
.pv-box { display: flex; flex-direction: column; width: min(980px, 100%); height: min(92vh, 1200px); background: #111; border: 1px solid var(--line-strong);
          box-shadow: 0 20px 60px rgba(0, 0, 0, .7); }
.pv-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 1rem; border-bottom: 1px solid var(--line); }
.pv-x { width: 32px; height: 32px; padding: 0; background: none; border: 1px solid transparent; color: var(--text-soft); font: 400 24px/1 Poppins, sans-serif; cursor: pointer; }
.pv-x:hover { color: #fff; border-color: var(--line-strong); }
.pv-frame { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; background: #2a2a2a; }
.pv-frame iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.pv-wait { margin: 0; padding: 1.5rem; text-align: center; }
.pv-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .6rem; padding: .8rem 1rem; border-top: 1px solid var(--line); }
.pv-foot .pv-download[hidden] { display: none; }
@media (max-width: 560px) { .pdf-preview { padding: 0; } .pv-box { height: 100%; border: 0; } }
.pc-tray-wrap .label { margin-bottom: .4rem; }
.pc-tray { display: flex; flex-wrap: wrap; gap: .5rem; min-height: 106px; padding: .4rem; border: 1px dashed var(--line); }
.pc-thumb { width: 64px; height: 64px; padding: 0; border: 1px solid var(--line-strong); background: #000; cursor: pointer; }
.pc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-thumb.is-picked { outline: 2px solid #fff; outline-offset: 1px; }

/* ---------- drag & drop (portfolio PDF): handles, the picture that follows the pointer, drop markers ---------- */
.drag-handle, .pc-grip-area { touch-action: none; }   /* touch screens: drag the bar instead of scrolling */
/* (photos in My portfolio / The Studio builder: a swipe scrolls the page; hold a photo a moment to drag it — then it is outlined) */
.pc-photo.drag-armed { outline: 2px solid #fff; outline-offset: -2px; }
.grip { color: var(--muted); letter-spacing: -1px; margin-right: .15rem; }
body.is-dragging, body.is-dragging * { user-select: none; cursor: grabbing !important; }
.drag-ghost { position: fixed; left: 0; top: 0; z-index: 1000; pointer-events: none; opacity: .85; transform-origin: 0 0;
              box-shadow: 0 10px 30px rgba(0, 0, 0, .7); }
.pdf-photo { cursor: grab; }
.pdf-order.drag-handle { padding: .15rem .45rem; cursor: grab; }
.pc-photo { width: 100%; height: 100%; cursor: grab; }
.pc-photo img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; }
.pc-slot { border: 1px dashed var(--line-strong); background: #111; display: flex; align-items: center; justify-content: center; }
.pc-slot.is-full { border-color: transparent; background: #0d0d0d; }
.pc-empty { color: var(--muted); font-size: 1.1rem; }
.pc-slot.drop-on, .pc-tray-wrap.drop-on .pc-tray { outline: 2px solid #fff; outline-offset: 1px; background: #1c1c1c; }
.pc-page-head.pc-grip-area { cursor: grab; padding: .15rem 0; }
.pc-del { width: 24px; height: 24px; background: none; border: 1px solid var(--line-strong); color: #fff; cursor: pointer; line-height: 1; }
.pc-del:hover { background: var(--err); border-color: var(--err); }
/* ▲ / ▼ left of ×: a row / page one place up or down, or (on a header) its whole section */
.pc-moves { display: inline-flex; gap: .2rem; margin-left: auto; }
.pc-move { width: 24px; height: 24px; padding: 0; background: none; border: 1px solid var(--line-strong); color: #fff; cursor: pointer;
           font-size: 9px; line-height: 1; }
.pc-move:hover:not(:disabled) { background: #fff; color: #000; border-color: #fff; }
.pc-move:disabled { opacity: .25; cursor: default; }
.pc-page.just-moved { outline: 2px solid #fff; outline-offset: 3px; transition: outline-color .6s; }   /* (where it went) */
.page-creator.is-rows .pc-page-head .pc-layouts + .pc-moves { margin-left: 0; }   /* (rows: right after the 1 / 2 / 3 choice) */
.pc-page { position: relative; }
.pc-page.dragging { opacity: .35; }
.pc-page.drop-before::before, .pc-page.drop-after::after { content: ''; position: absolute; top: 0; bottom: 0; width: 4px; background: #fff;
                                                            box-shadow: 0 0 10px rgba(255, 255, 255, .6); }
.pc-page.drop-before::before { left: -.6rem; }
.pc-page.drop-after::after { right: -.6rem; }
.pc-thumb.pc-photo { width: 96px; height: 96px; border: 1px solid var(--line-strong); background: #000; }
.pc-thumb.pc-photo img { object-fit: cover; }

/* ---------- Portfolio PDF: choose the photos ---------- */
.pdf-pick-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 1rem; margin-top: 1.6rem; }
.pdf-pick-head h2 { margin: 0; }
.pdf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; margin: .8rem 0 1.2rem; }
.pdf-photo { position: relative; display: block; margin: 0 !important; cursor: pointer; background: var(--surface); border: 1px solid var(--line);
             text-transform: none !important; letter-spacing: normal !important; transition: border-color .15s, opacity .15s; }
.pdf-photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; transition: opacity .15s; }
.pdf-photo input { position: absolute; top: .5rem; left: .5rem; width: 20px; height: 20px; z-index: 1; }
.pdf-photo.is-on { border-color: #fff; }
.pdf-photo { cursor: grab; }
.pdf-photo.dragging { opacity: .35; }
.pdf-order { position: absolute; top: .45rem; right: .45rem; z-index: 1; display: flex; align-items: center; gap: .15rem;
             background: rgba(0, 0, 0, .75); padding: .1rem .15rem; }
.pdf-move { background: none; border: 0; color: #fff; cursor: pointer; font-size: .7rem; padding: .1rem .3rem; line-height: 1; }
.pdf-move:hover { color: #000; background: #fff; }
.pdf-pos { min-width: 1.2rem; text-align: center; font-size: .72rem; color: #fff; font-weight: 600; }
.pdf-photo.is-off img { opacity: .35; }
.pdf-meta { display: flex; flex-wrap: wrap; gap: .25rem .4rem; align-items: center; padding: .4rem .5rem; font-size: .72rem; min-height: 1.9rem; }
.pdf-go { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-bottom: 1rem; }
.pdf-go .btn .icon { vertical-align: -3px; margin-right: .3rem; }

/* ---------- My shoots: timeline of all shoots (oldest left, newest right; ‹ › when they don't all fit) ---------- */
.timeline { position: relative; display: flex; align-items: center; gap: .4rem; margin: .4rem 0 1.6rem; padding: 1rem .6rem 1.1rem;
            background: radial-gradient(120% 140% at 50% 0%, #1c1c1c 0%, #0d0d0d 60%, #080808 100%); border: 1px solid var(--line); }
.tl-viewport { flex: 1; min-width: 0; overflow: hidden; position: relative; }
.tl-track { list-style: none; margin: 0; padding: 0; position: relative;   /* --tl-cols is set on .timeline by the script */
            display: grid; grid-template-columns: repeat(var(--tl-cols, 8), minmax(0, 1fr)); }
/* more shoots than fit: all of them on one strip that slides smoothly (‹ ›) by --tl-cols at a time. It moves with "left"
   (not a transform): a transform puts the strip on its own layer at part-pixel positions, which makes the text blurry */
.timeline.is-paged .tl-track { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc(100% / var(--tl-cols, 8)); left: 0; }
.timeline.is-ready.is-paged .tl-track { transition: left .55s cubic-bezier(.22, .61, .36, 1); }
@media (prefers-reduced-motion: reduce) { .timeline.is-ready.is-paged .tl-track { transition: none; } }
.tl-track, .tl-link { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
/* the line through the dots (on the window, so it stays in place while the shoots slide) */
.tl-viewport::before { content: ''; position: absolute; left: 0; right: 0; top: 2.65rem; height: 2px;
                    background: linear-gradient(90deg, transparent, var(--line-strong) 6%, #bbb 50%, var(--line-strong) 94%, transparent);
                    box-shadow: 0 0 10px rgba(255, 255, 255, .15); }
.timeline:not(.is-paged) .tl-track { grid-template-columns: repeat(var(--tl-cols, 8), minmax(0, 136px)); justify-content: center; }
.tl-item { position: relative; min-width: 0; }
.tl-link { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: 0 .2rem; text-decoration: none; text-align: center; }
.tl-date { min-height: 2rem; display: flex; flex-direction: column; justify-content: flex-end; font-size: .72rem; color: var(--text-soft);
           white-space: nowrap; line-height: 1.2; }
.tl-year { font-size: 9px; letter-spacing: 1.6px; color: #fff; font-weight: 600; }
.tl-dot { position: relative; z-index: 1; width: 13px; height: 13px; border-radius: 50%; background: #000; border: 2px solid #fff;
          box-shadow: 0 0 0 3px rgba(255, 255, 255, .08), 0 0 12px rgba(255, 255, 255, .35); transition: transform .15s, background .15s; }
.tl-thumb { width: 112px; max-width: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background: var(--surface-2);
            border: 1px solid var(--line-strong); color: var(--muted); font-size: 2.2rem; overflow: hidden; transition: border-color .15s, transform .15s; }
.tl-thumb img { width: 100%; height: 100%; object-fit: cover; }
/* an 18+ photo on the timeline: blurred, with the 18+ mark (a blurred copy from the server for whoever may not see it) */
.tl-thumb.is-adult { position: relative; }
.tl-thumb.is-adult img { filter: blur(10px) brightness(.6); transform: scale(1.1); }
.tl-thumb.is-blurred img { filter: none; transform: none; }
.tl-thumb.is-adult::after { content: '18+'; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: .2rem .5rem;
                            border-radius: 999px; background: rgba(0, 0, 0, .7); color: var(--err); box-shadow: 0 0 0 1.5px var(--err);
                            font-weight: 700; font-size: .75rem; line-height: 1.2; pointer-events: none; }
/* (positioned, above the photo: an 18+ photo is positioned too — for its 18+ mark — and would otherwise cover them) */
.tl-faces { display: flex; margin-top: -.9rem; position: relative; z-index: 2; }
.tl-faces .pc-avatar { width: 24px; height: 24px; border: 2px solid #0d0d0d; }
.tl-faces .pc-avatar + .pc-avatar { margin-left: -7px; }
/* inactive account in a shoot (timeline and shoot cards): red border, like on Browse and the profile */
.pc-avatar.is-inactive, .tl-faces .pc-avatar.is-inactive, .shoot-faces .pc-avatar.is-inactive { border-color: #5a2a2a; }
.tl-type { font-size: 9px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--muted); max-width: 100%;
           overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-link:hover .tl-dot { transform: scale(1.3); background: #fff; }
.tl-link:hover .tl-thumb { border-color: #fff; transform: translateY(-2px); }
.tl-link:hover .tl-type { color: #fff; }
.tl-names { display: flex; flex-direction: column; max-width: 100%; font-size: .7rem; line-height: 1.3; color: var(--text-soft); }
.tl-names span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* one name per line */
.tl-link:hover .tl-names { color: #fff; }
.tl-nav { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-strong); background: #000; color: #fff;
          font-size: 1.4rem; line-height: 1; cursor: pointer; transition: background .15s, color .15s, opacity .15s; }
.tl-nav:hover:not(:disabled) { background: #fff; color: #000; }
.tl-nav:disabled { opacity: .25; cursor: default; }

/* ---------- My shoots (models / make-up artists): worked with, as clickable pictures ---------- */
.worked-section { margin: 0 0 1.6rem; }
.worked-section h2 { margin-top: 1rem; }
/* rows of small round pictures (like the shoot cards, a bit bigger): one row per group */
.people-rows { display: grid; gap: .55rem; }
.people-rows { gap: 1rem; }
.people-row { display: flex; align-items: flex-start; gap: .4rem .9rem; flex-wrap: wrap; }
.pr-label { flex: 0 0 9.5rem; padding-top: 1.9rem; font-size: 10px; text-transform: uppercase; letter-spacing: 1.4px; color: var(--muted); }
.pr-count { color: var(--text-soft); margin-left: .2rem; }
.pr-faces { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: .7rem .9rem; }
.pr-person { width: 88px; display: flex; flex-direction: column; align-items: center; gap: .35rem; text-align: center; text-decoration: none; }
.pr-avatar { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; background: var(--surface-2);
             border: 2px solid var(--line); transition: border-color .15s; }
a.pr-person:hover .pr-avatar { border-color: #fff; }
.pr-name { font-size: .78rem; line-height: 1.25; color: var(--text); overflow-wrap: anywhere; }
a.pr-person:hover .pr-name { color: #fff; text-decoration: underline; }
@media (max-width: 720px) {
    .pr-label { flex-basis: 100%; padding-top: 0; }
    .pr-person { width: 76px; }
    .pr-avatar { width: 68px; height: 68px; }
}
.sessions-label { margin: 1.1rem 0 .3rem; }
.more-sessions > summary { cursor: pointer; color: var(--text-soft); margin: .1rem 0 .2rem 1.1rem; }
/* about and model details inside the profile card */
.card-block { margin: 1.1rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line); }
.card-block .label { margin-bottom: .45rem; }
.card-block .bio { margin: 0; }
.card-block .details-grid { margin: 0; }

/* ---------- Worked with: the people, as chips with their profile picture ---------- */
.collab-people { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 .4rem; }
.collab-chip { display: inline-flex; align-items: center; gap: .55rem; border: 1px solid var(--line); background: var(--surface);
               padding: .3rem .8rem .3rem .3rem; font-size: .88rem; }
.collab-chip > a, .collab-chip > span:first-child { display: block; line-height: 0; }
.collab-chip .pc-avatar { width: 34px; height: 34px; }
.cc-text a { text-decoration: none; color: var(--text); }
.cc-text a:hover { text-decoration: underline; }
.cc-text .muted { margin-left: .3rem; font-size: .8rem; }

/* ---------- photo limits (My photos, shoot log) ---------- */
.photo-limits { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.4rem; margin: -.3rem 0 1.2rem; }
.pl-item { display: grid; grid-template-columns: auto auto; align-items: baseline; gap: .1rem .7rem; min-width: 12rem; }
.pl-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted); }
.pl-item strong { font-size: 1.15rem; text-align: right; }
.pl-bar { grid-column: 1 / -1; height: 3px; background: var(--line); }
.pl-bar span { display: block; height: 100%; background: #fff; }
.pl-item.is-full strong { color: var(--err); }
.pl-item.is-full .pl-bar span { background: var(--err); }
.pl-note { flex: 1 1 18rem; }
.err-text { color: var(--err); }
.shoot-count { font-size: 10px; text-transform: uppercase; letter-spacing: 1.3px; color: var(--muted); }
.shoot-count.is-full { color: var(--err); }

/* ---------- upload queue (many photos, one by one) ---------- */
.shoot-upload[hidden] { display: none; }
.shoot-upload { display: grid; gap: .4rem; }
.shoot-upload-form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.shoot-upload-form input[type=file] { flex: 1; min-width: 0; color: var(--text-soft); font: 300 13px Poppins, sans-serif; }
.shoot-upload-form input[type=file]::file-selector-button { font: 500 11px Poppins, sans-serif; letter-spacing: 1.5px; text-transform: uppercase;
    background: #fff; color: #000; border: 0; padding: .5rem .9rem; margin-right: .8rem; cursor: pointer; }
.shoot-upload p { margin: 0; }
.shoot-upload .upload-queue { margin-top: .2rem; }
.upload-queue { list-style: none; margin: 1.2rem 0 0; padding: 0; border-top: 1px solid var(--line); }
.upload-queue[hidden] { display: none; }
.upload-queue li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem 1rem; padding: .55rem 0;
                   border-bottom: 1px solid var(--line); font-size: .86rem; }
.uq-name { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uq-status { color: var(--muted); text-align: right; }
.uq-bar { grid-column: 1 / -1; height: 3px; background: var(--line); }
.uq-bar span { display: block; height: 100%; width: 0; background: #fff; transition: width .2s; }
.upload-queue li.is-done .uq-status { color: #fff; }
.upload-queue li.is-done .uq-bar span { background: var(--ok); }
.upload-queue li.is-error .uq-status { color: var(--err); text-align: left; grid-column: 1 / -1; }
.upload-queue li.is-error .uq-bar { display: none; }
.upload-queue li.uq-summary { display: block; color: #fff; border-bottom: 0; padding-top: .8rem; }

/* ---------- photos: hidden by the owner / uploaded by someone else ---------- */
figure.is-hidden img { opacity: .45; }
figure.is-hidden { position: relative; }
.badge-hidden { border-style: dashed; color: var(--text-soft); }
.hidden-flag { position: absolute; top: .5rem; left: .5rem; background: rgba(0, 0, 0, .75); }
.img-meta { display: flex; flex-wrap: wrap; gap: .3rem .6rem; align-items: center; margin-bottom: .35rem; }

/* ---------- installable app (PWA) ---------- */
.js-install[hidden], .install-sheet[hidden] { display: none !important; }
.topbar .nav-menu .nav-install { justify-content: flex-start; gap: .5rem; text-transform: uppercase; color: #fff; text-decoration: none; }
.footer-install .linkbtn { color: #fff; font-size: inherit; letter-spacing: inherit; text-transform: inherit; text-decoration: none; }
.install-sheet { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-end; justify-content: center;
                 background: rgba(0, 0, 0, .7); padding: 16px; }
.install-box { width: 100%; max-width: 440px; background: #1a1a1a; border: 1px solid var(--line-strong); padding: 1.3rem 1.4rem 1.4rem;
               color: var(--text-soft); margin-bottom: env(safe-area-inset-bottom); }
.install-box h2 { margin: 0 0 .6rem; }
.install-box ol { margin: 0 0 .6rem; padding-left: 1.2rem; }
.install-box li { margin: .3rem 0; }
.push-panel { padding-top: 1.1rem; padding-bottom: 1rem; }
.push-panel[hidden] { display: none; }
.push-head { display: flex; align-items: center; gap: .5rem; color: #fff; }
.push-head .label { margin: 0; }
.push-status { margin: .5rem 0 .2rem; }
.push-msg { margin: .6rem 0 0; min-height: 1em; }
.push-msg.err-text { color: var(--err); }
.share-glyph { display: inline-block; border: 1px solid var(--line-strong); padding: 0 .3rem; line-height: 1.3; color: #fff; }

/* ---------- small screens ---------- */
@media (max-width: 900px) {
    .menu-toggle { display: block; }
    .topbar-inner { flex-wrap: wrap; min-height: 72px; }
    .topbar nav { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: 0 0 1rem; }
    /* the open menu scrolls by itself, within the screen: the bar is sticky (pinned at the top), so a menu taller than
       the screen could otherwise not be scrolled to its end (the page behind it moved instead) */
    .nav-open .topbar { max-height: 100vh; max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
    .nav-open .topbar nav { display: flex; }
    .topbar nav > a { display: block; width: 100%; padding: .7rem 0; border-bottom: 1px solid #3a3a3a; }
    /* on phones every group is a heading with its links listed underneath (no second tap needed) */
    .nav-group { width: 100%; border-bottom: 1px solid #3a3a3a; padding: .2rem 0 .4rem; }
    .nav-top { pointer-events: none; color: var(--muted); font-size: 10px; padding: .6rem 0 .2rem; border: 0; }
    .nav-avatar { width: 28px; height: 28px; margin: -4px .45rem -4px 0; }   /* (phone menu: the small group heading) */
    .nav-caret { display: none; }
    .nav-menu, .nav-group.open .nav-menu { display: block; position: static; min-width: 0; background: none; border: 0; box-shadow: none; padding: 0; }
    .topbar .nav-menu a, .topbar .nav-menu .linkbtn { padding: .55rem 0 .55rem .8rem; font-size: 13px; }
    .topbar .nav-menu a.active { box-shadow: inset 3px 0 0 #fff; background: none; }
    .nav-logout { border-top: 0; margin: 0; }
}@media (max-width: 720px) {
    .container { padding: 1.5rem 1rem 3rem; }
    .pad { padding: 1.25rem; }
    .row2, .row3, .filters { grid-template-columns: 1fr; }
    .row4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .profile-head { grid-template-columns: 1fr; }
    .avatar { width: 100%; max-width: 340px; }
    .picker-tools { flex-wrap: wrap; }
    .hero { padding: 3rem .5rem 2.5rem; }
    .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
    .booking-head { grid-template-columns: 1fr; }
    .booking-bar { flex-direction: column; align-items: stretch; text-align: center; }
    .month-nav h2 { font-size: .9rem; }
    .pad-s { padding: .7rem .75rem .85rem; }
}

/* ---------- Browse: on a phone only the search row; the filters fold open with "Filters" ---------- */
.filters-toggle { display: none; }
@media (max-width: 720px) {
    .filters { grid-template-columns: minmax(0, 1fr) auto auto; gap: .5rem; padding: .7rem; margin-bottom: .8rem; }
    .filters .f-q { order: 1; }
    .filters .f-search { order: 2; padding-left: .9rem; padding-right: .9rem; }
    .filters .filters-toggle { display: inline-flex; order: 3; padding-left: .8rem; padding-right: .8rem; white-space: nowrap; }
    .filters .f-extra { order: 4; grid-column: 1 / -1; }
    .filters:not(.is-open) .f-extra { display: none; }
    .filters.is-open .filters-toggle { background: #fff; color: #000; }
    .filters input, .filters select { padding: .55rem .7rem; }
    .tabs { margin-bottom: .6rem; }
    .tabs a { padding: .35rem .8rem; }
}
/* ---------- Portfolio page (portfolio.php): the pages arranged in My portfolio, same layouts as the PDF ---------- */
.pf-head { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin: .4rem 0 1.4rem; }
.pf-head h1 { margin: 0; }
.pf-avatar img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line-strong); display: block; }
.pf-actions { margin-left: auto; }
.pf-pages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem; }
.pf-sheet { aspect-ratio: 1 / 1.414; background: #000; border: 1px solid var(--line); padding: 5%; display: grid; gap: 3%;
            box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
.pf-photo { position: relative; margin: 0; min-width: 0; min-height: 0; overflow: hidden; }
/* (not the heart: on your own photos it is a link too, "who gave a heart", and would otherwise cover the whole photo) */
.pf-photo a:not(.heart-btn) { display: block; width: 100%; height: 100%; }
.pf-photo img { width: 100%; height: 100%; object-fit: contain; display: block; transition: opacity .2s; }
.pf-photo a:hover img { opacity: .9; }
.pf-photo figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: .35rem .5rem; font-size: .7rem; line-height: 1.4;
                       color: var(--text-soft); background: linear-gradient(transparent, rgba(0, 0, 0, .85)); opacity: 0; transition: opacity .2s; }
.pf-photo:hover figcaption, .pf-photo:focus-within figcaption { opacity: 1; }
.pf-photo figcaption a { color: #fff; }
@media (max-width: 720px) {
    .pf-pages { grid-template-columns: 1fr; gap: 1rem; }
    .pf-photo figcaption { opacity: 1; }   /* no hover on a phone */
    .pf-actions { margin-left: 0; }
}
/* profile: link to the portfolio */
.portfolio-link { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.tabs .tab-count { display: inline-block; min-width: 1.5em; margin-left: .3rem; padding: 0 .35em; font-size: .75em; text-align: center;
                   border: 1px solid currentColor; border-radius: 1em; opacity: .75; }   /* My portfolio: photos per tab (independent selections) */

/* a disabled button with the reason on hover (My portfolio: Download portfolio PDF) */
.btn-tip { position: relative; display: inline-block; }
.btn-tip button:disabled { pointer-events: none; }   /* let the wrapper get the hover */
.btn-tip[data-tip]:not([data-tip=""]):hover::after, .btn-tip[data-tip]:not([data-tip=""]):focus-within::after {
    content: attr(data-tip); position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 20; width: max-content; max-width: 320px;
    padding: .55rem .75rem; background: #fff; color: #000; font-size: 12px; line-height: 1.45; text-transform: none; letter-spacing: normal;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .5); }
/* page creator: "+" between two pages (in the gap) to insert an empty page there */
.pc-insert { position: absolute; top: 50%; z-index: 3; width: 28px; height: 28px; margin-top: -14px; padding: 0; border-radius: 50%;
             border: 1px solid var(--line-strong); background: #000; color: #fff; font-size: 17px; line-height: 1; cursor: pointer;
             opacity: .6; transition: opacity .15s, background .15s, color .15s, transform .15s; }
.pc-insert { right: calc(-.6rem - 14px); }   /* centred in the gap to the next page */
/* PDF pages: also a "+" before the first page; a header (Order by shoot / photographer) over the whole width, its "+"
   below it, and the empty page area as a drop place for the first photo */
.page-creator:not(.is-rows) .pc-insert.is-start { right: auto; left: calc(-.6rem - 14px); }
.page-creator:not(.is-rows) .pc-heading { grid-column: 1 / -1; }
.page-creator:not(.is-rows) .pc-heading .pc-insert { top: auto; right: auto; bottom: calc(-.6rem - 14px); left: 50%; margin: 0 0 0 -14px; }
.page-creator:not(.is-rows) .pc-heading .pc-insert.is-start { top: calc(-.6rem - 14px); bottom: auto; }
.pc-pages.drop-on { outline: 2px dashed #fff; outline-offset: 4px; }
.pc-insert:hover, .pc-insert:focus-visible { opacity: 1; background: #fff; color: #000; border-color: #fff; transform: scale(1.15); outline: none; }
.page-creator { overflow: visible; }
/* ---------- Photos: harder to copy (see assets/protect.js; the real protection is in image.php) ---------- */
img { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
@media print {
    /* photos are not printed from the pages (the portfolio PDF is the way to print a portfolio) */
    .pf-photo img, .gallery img, .shoot-photos img, .tl-thumb img, .lb, .pc-sheet img, .pc-tray img, .pdf-photo img { visibility: hidden !important; }
}
/* browse: your own card (shown first) */
.person.is-self { outline: 1px solid #fff; outline-offset: -1px; }
/* 18+ profiles and photos: a small red "18+" mark */
.badge-18 { color: var(--err); border-color: var(--err); font-weight: 600; letter-spacing: .5px; }
.av-badge.av-18 { width: auto; padding: 0 .45rem; border-radius: 999px; background: #000; color: var(--err);
                  box-shadow: 0 0 0 1.5px var(--err); font-size: .68rem; font-weight: 700; letter-spacing: .5px; }
/* an 18+ photo in a list: blurred until it is opened (preference "Blur 18+ photos" in Edit profile) */
a.adult-blur { position: relative; display: block; overflow: hidden; }
a.adult-blur img { filter: blur(18px) brightness(.6); transform: scale(1.08); transition: filter .3s; }
a.adult-blur::after { content: '18+'; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: .25rem .6rem;
                      border-radius: 999px; background: rgba(0, 0, 0, .7); color: var(--err); box-shadow: 0 0 0 1.5px var(--err);
                      font-weight: 700; font-size: .85rem; line-height: 1.2; pointer-events: none; }
a.adult-blur.revealed img { filter: none; transform: none; }
a.adult-blur.revealed::after { display: none; }
/* "18+ Profile" on Edit profile: a checkbox shown as a button that stays pressed when on */
.toggle-btn { cursor: pointer; user-select: none; }
.toggle-btn.is-on { background: var(--err); border-color: var(--err); color: #000; }
.toggle-btn.is-disabled { cursor: not-allowed; opacity: .55; }
.toggle-btn:focus-within { outline: 2px solid #fff; outline-offset: 2px; }
.dob-status { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; margin-top: .35rem; }
/* Admin → Birthdays */
.bday-today { border-color: #fff; background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%); }
.bday-person { display: grid; grid-template-columns: auto 1fr auto; gap: .4rem 1rem; align-items: center; padding: .6rem 0; }
.bday-person + .bday-person { border-top: 1px solid var(--line); }
.bday-person .bday-avatar img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; display: block; }
.bday-person.is-big .bday-avatar img { width: 72px; height: 72px; }
.bday-person.is-big strong { font-size: 1.15rem; }
.bday-info { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.bday-sent { align-self: flex-start; }
.bday-send { grid-column: 1 / -1; }
.bday-send > summary { list-style: none; display: inline-flex; width: auto; cursor: pointer; }
.bday-send > summary::-webkit-details-marker { display: none; }
.bday-person > .bday-send:not([open]) { grid-column: auto; }
.bday-send form { margin-top: .6rem; }
.bday-send-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.bday-soon { display: grid; grid-template-columns: 7.5rem 1fr; align-items: center; gap: 0 .8rem; border-top: 1px solid var(--line); }
.bday-soon:first-of-type { border-top: 0; }
.bday-soon .bday-person { border-top: 0; }
.bday-when { font-size: .8rem; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
/* the year ahead: one month per row (month name on the left, its birthdays next to it) */
.bday-months { display: grid; grid-template-columns: 1fr; gap: .8rem; }
.bday-month { display: grid; grid-template-columns: 9rem 1fr; gap: .6rem 1.2rem; align-items: start; }
.bday-month h3 { margin: 0; text-transform: uppercase; letter-spacing: 2px; font-size: .95rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .5rem; padding-top: .9rem; }
.bday-month > p { margin: .9rem 0 0; }
.bday-month .bday-list { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .6rem 1rem; }
@media (max-width: 560px) {
    .bday-month { grid-template-columns: 1fr; }
    .bday-month h3, .bday-month > p { padding-top: 0; margin-top: 0; }
}
.bday-month.is-now { border-color: #fff; }
.bday-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.bday-list li { display: grid; grid-template-columns: 2rem 60px 1fr auto; gap: .6rem; align-items: center; }
/* the age (on that birthday) right after the name */
.bday-age { color: var(--muted); font-weight: 400; margin-left: .25rem; }
/* round photos, twice the size of the ones on a shoot card (30px) */
.bday-face img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; display: block; background: var(--surface-2);
                 border: 1px solid var(--line); }
.bday-face:hover img { border-color: #fff; }
.bday-list li.is-today .bday-face img { border: 2px solid #fff; }
.bday-list li.is-today { font-weight: 600; }
.bday-list li.is-today .bday-day { background: #fff; color: #000; }
.bday-day { display: inline-flex; justify-content: center; align-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%;
            border: 1px solid var(--line-strong); font-size: .8rem; }
.bday-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bday-later-open { margin-top: 1rem; }
@media (max-width: 560px) {
    .bday-soon { grid-template-columns: 1fr; }
    .bday-person { grid-template-columns: auto 1fr; }
    .bday-person > .bday-send:not([open]) { grid-column: 1 / -1; }
}
/* one-time notice: 18+ content is opt-in */
.adult-optin-notice { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; }
.adult-optin-notice .notice-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.adult-optin-notice form.inline { margin: 0; }
/* report page and Admin → 18+ & reports */
.report-photo img { display: block; max-width: 220px; max-height: 220px; object-fit: cover; margin: .5rem 0 1rem; }
.report-list { display: grid; gap: 1rem; }
.report-item { display: grid; grid-template-columns: 110px 1fr; gap: 1rem; align-items: start; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.report-item:last-child { border-bottom: 0; padding-bottom: 0; }
.report-thumb img { width: 110px; height: 110px; object-fit: cover; display: block; }
.report-note { margin: .3rem 0; color: var(--text-soft); }
.adult-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .8rem; }
.adult-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
/* "Report this photo" in the photo viewer */
.lb-report { position: absolute; left: 1rem; bottom: 1rem;   /* (bottom left: the heart is bottom right) */ color: var(--muted); font-size: 11px; letter-spacing: .5px; text-decoration: underline; }
.lb-report:hover { color: var(--text); }
.adult-notice-mark { display: inline-flex; align-items: center; justify-content: center; width: 4.2rem; height: 4.2rem; border-radius: 50%;
                     border: 2px solid var(--err); color: var(--err); font-weight: 700; font-size: 1.25rem; margin-bottom: .6rem; }
/* inactive account (only admins see these): red border, like the "Make inactive" button */
.person.is-inactive, .profile-head.is-inactive { border-color: #5a2a2a; }
.person.is-inactive:hover { border-color: var(--err); }
.self-badge { float: right; margin-left: .4rem; }
/* Who can see me: everybody, then per group (models, make-up artists, photographers) */
.vis-group { border: 1px solid var(--line); padding: .9rem 1rem 1rem; margin: 0 0 1rem; }
.vis-group legend { padding: 0 .4rem; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 1.8px; color: #fff; }
.vis-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.vis-choices .radio-card { margin: 0; }
.vis-group #picker { margin-top: .8rem; }
#visParts { transition: opacity .2s; }
#visParts.is-muted { opacity: .4; }
@media (max-width: 720px) { .vis-choices { grid-template-columns: 1fr; } }
/* private notes on the profile: read-only, with an Edit button */
.pn-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .8rem; }
.pn-text { line-height: 1.6; color: var(--text-soft); padding: .6rem .8rem; background: #0b0b0b; border-left: 2px solid var(--line-strong); font-size: .9rem; }
.pn-edit { margin-left: .4rem; text-transform: none; letter-spacing: normal; }
/* Edit profile: title with "Manage photos" at the top */
/* Edit profile: the profile photo top left, the same size as on the profile page (click: Change profile photo); the
   title, buttons and notes on the right */
.pe-head { display: grid; grid-template-columns: 260px 1fr; gap: 2rem; align-items: start; margin-bottom: 1.5rem; }
.pe-head h1 { margin: 0; }
.pe-photo .av-wrap { display: block; }
.pe-photo a { display: block; }
.pe-photo a:hover .avatar { outline: 2px solid currentColor; outline-offset: 2px; }
.pe-main { min-width: 0; }
.pe-title { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem 1rem; }
.pe-main .flash { margin: 1rem 0 0; }
@media (max-width: 720px) {
    .pe-head { grid-template-columns: 1fr; gap: 1.2rem; }
}

/* profile card: "Worked with" as a row of small square photos (like the timeline on My shoots) */
.people-strip { display: flex; flex-wrap: wrap; gap: .7rem .6rem; margin-top: .4rem; }
.ps-person { width: 72px; display: flex; flex-direction: column; align-items: center; gap: .2rem; text-decoration: none; text-align: center; }
.ps-img { width: 72px; height: 72px; object-fit: cover; background: var(--surface-2); border: 1px solid var(--line-strong);
          transition: border-color .15s, transform .15s; }
a.ps-person:hover .ps-img { border-color: #fff; transform: translateY(-2px); }
/* inactive account in the "Worked with" strip: red border, like on Browse */
.ps-img.is-inactive { border-color: #5a2a2a; }
a.ps-person:hover .ps-img.is-inactive { border-color: var(--err); }
.ps-name { max-width: 100%; font-size: .72rem; color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-role { font-size: 8.5px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--muted); margin-top: -.15rem; }
a.ps-person:hover .ps-name { color: #fff; }
/* the shoots timeline inside the profile card */
.tools-group .timeline { margin: .5rem 0 0; }

/* profile: portfolio card at the bottom (a random choice of photos) */
.profile-portfolio .pp-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem 1rem; margin-bottom: 1rem; }
.pp-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; }
.pp-grid a:not(.heart-btn) { display: block; line-height: 0; overflow: hidden; background: var(--surface-2); }   /* (not the heart link) */
.pp-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .3s, opacity .2s; }
.pp-grid a:hover img { transform: scale(1.04); opacity: .9; }
.profile-portfolio > .muted { margin: .7rem 0 0; }
@media (max-width: 720px) { .pp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* profile card: people worked with who are not on the shoots timeline */
.worked-extra-label { margin-top: .9rem; }
#shoots .tools-buttons { margin: .3rem 0 0; }

/* portfolio page: all buttons in one row at the top */
.pf-topbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
/* View Shoot (shoot.php): the shoot's people under its title */
.shoot-view-head h1 { margin-bottom: .3rem; }
.shoot-view-people { margin: 0 0 .25rem; font-size: .9rem; color: var(--text-soft); }
.shoot-view-people .pc-role { margin-right: .25rem; }
/* Register / Change shoot: the contract with the model of the shoot */
.shoot-contract { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem; margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.shoot-contract .label { margin: 0; }
.shoot-contract form[hidden], .shoot-contract [hidden] { display: none; }
/* profile: all buttons in one bar at the top, outside the profile card */
.profile-topbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.profile-topbar form.inline { margin: 0; }
.profile-topbar .profile-photo-form { margin: 0; }
.profile-info { display: grid; gap: .3rem; padding-top: .8rem; }

/* profile top bar: Back on the left, all other buttons on the right */
.profile-topbar { justify-content: space-between; }
.topbar-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: flex-end; margin-left: auto; }
.topbar-actions form.inline { margin: 0; }

/* ---------- My portfolio, Online tab: rows of 1, 2 or 3 photos (one long page) ---------- */
.lay-r1 { grid-template-columns: minmax(0, 1fr); }
.lay-r2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lay-r3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pc-lay.lay-r1, .pc-lay.lay-r2, .pc-lay.lay-r3 { width: 34px; height: 20px; grid-template-rows: 1fr; }
.page-creator.is-rows .pc-pages { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
.page-creator.is-rows .pc-page-head { gap: .7rem; }
.page-creator.is-rows .pc-page-head .pc-layouts { margin-left: auto; }
.pc-row { display: grid; gap: .5rem; padding: .5rem; background: #000; border: 1px solid var(--line-strong); }
.pc-row .pc-slot { height: 230px; }
@media (max-width: 720px) { .pc-row .pc-slot { height: 150px; } }
/* "+" between two rows: in the gap below the row, in the middle */
.page-creator.is-rows .pc-insert { top: auto; right: auto; bottom: calc(-.6rem - 14px); left: 50%; margin: 0 0 0 -14px; }
/* drop marker when moving a row: a line above or below it */
.page-creator.is-rows .pc-page.drop-before::before { top: -.65rem; bottom: auto; left: 0; right: 0; width: auto; height: 4px; }
.page-creator.is-rows .pc-page.drop-after::after { top: auto; bottom: -.65rem; left: 0; right: 0; width: auto; height: 4px; }

/* ---------- Portfolio page (portfolio.php): one page with a thin line, rows of 1–3 photos of equal height ---------- */
.pf-page { border: 1px solid var(--line); background: #000; padding: clamp(.6rem, 2.5vw, 1.6rem); display: grid; gap: clamp(.5rem, 1.6vw, 1rem);
           box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
.pf-row { display: flex; gap: clamp(.5rem, 1.6vw, 1rem); align-items: flex-start; }
.pf-row .pf-photo { min-width: 0; }
.pf-row .pf-photo img { width: 100%; height: auto; object-fit: contain; }
/* one photo on a row: as large as fits, never taller than the screen */
.pf-row.r1 { justify-content: center; }
.pf-row.r1 .pf-photo { flex: 0 1 auto !important; }
.pf-row.r1 .pf-photo img { width: auto; max-width: 100%; max-height: 88vh; margin: 0 auto; }
/* online portfolio: headers (per shoot / photographer), like the year headers in My shoots */
.pf-group { display: flex; align-items: baseline; gap: 1rem; margin: 1.2rem 0 .2rem; padding-bottom: .45rem; border-bottom: 2px solid #fff;
            font-size: 1.15rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: #fff; }
.pf-page > .pf-group:first-child { margin-top: 0; }
/* editor: a header bar, and the "+" on photos that are not on the page */
.pc-heading { background: transparent; border: 0; border-bottom: 2px solid #fff; padding: .3rem 0; }
.pc-heading .pc-page-no { font-size: 12px; font-weight: 600; color: #fff; letter-spacing: 1.6px; }
.pc-thumb.pc-photo { position: relative; }
.pc-addone { position: absolute; right: 3px; bottom: 3px; width: 24px; height: 24px; padding: 0; border-radius: 50%; border: 1px solid #fff;
             background: rgba(0, 0, 0, .75); color: #fff; font-size: 16px; line-height: 1; cursor: pointer; }
.pc-addone:hover, .pc-addone:focus-visible { background: #fff; color: #000; outline: none; }

/* ---------- built-in help (inc/help.php) and the guided tour (assets/tour.js) ---------- */
/* the "?" button at the bottom left (the chat button is at the bottom right); a dot until this page's help was opened */
.help-fab { position: fixed; z-index: 60; left: 1.2rem; bottom: 1.2rem; width: 44px; height: 44px; padding: 0; border-radius: 50%;
            border: 1px solid #fff; background: #000; color: #fff; font: 600 20px/1 Poppins, sans-serif; cursor: pointer;
            box-shadow: 0 4px 16px rgba(0, 0, 0, .55); transition: background .15s, color .15s, transform .15s; }
.help-fab:hover, .help-fab:focus-visible, .help-fab[aria-expanded="true"] { background: #fff; color: #000; outline: none; }
.help-fab:hover { transform: translateY(-2px); }
.help-fab.is-new::after { content: ''; position: absolute; top: 1px; right: 1px; width: 11px; height: 11px; border-radius: 50%;
                          background: var(--err); box-shadow: 0 0 0 2px #000; }
@media (prefers-reduced-motion: no-preference) {
    .help-fab.is-new { animation: help-pulse 2.4s ease-in-out 3; }
    @keyframes help-pulse { 0%, 100% { box-shadow: 0 4px 16px rgba(0, 0, 0, .55), 0 0 0 0 rgba(255, 255, 255, .45); }
                            50% { box-shadow: 0 4px 16px rgba(0, 0, 0, .55), 0 0 0 10px rgba(255, 255, 255, 0); } }
}
/* the panel with the steps, above the button */
.help-panel { position: fixed; z-index: 61; left: 1.2rem; bottom: calc(1.2rem + 54px); width: min(400px, calc(100vw - 2.4rem));
              max-height: calc(100vh - 7rem); max-height: calc(100dvh - 7rem); overflow-y: auto; overscroll-behavior: contain;
              background: #141414; border: 1px solid var(--line-strong); box-shadow: 0 12px 40px rgba(0, 0, 0, .7); padding: 1rem 1.1rem 1.1rem; }
.help-panel[hidden] { display: none; }
.help-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.help-head h2 { margin: 0; font-size: 1.05rem; }
.help-close, .tour-x { width: 28px; height: 28px; flex: none; padding: 0; background: none; border: 1px solid var(--line-strong); color: #fff;
                       font-size: 18px; line-height: 1; cursor: pointer; }
.help-close:hover, .tour-x:hover { border-color: #fff; }
.help-intro { margin: .5rem 0 .8rem; color: var(--text-soft); font-size: .9rem; }
.help-steps { list-style: none; counter-reset: help; margin: 0; padding: 0; display: grid; gap: .35rem; }
.help-steps li { counter-increment: help; }
.help-step { display: grid; grid-template-columns: 1.6rem 1fr; gap: .1rem .5rem; width: 100%; padding: .5rem .55rem; text-align: left;
             background: none; border: 1px solid transparent; color: var(--text-soft); font: 300 .86rem/1.45 Poppins, sans-serif; cursor: pointer; }
.help-step::before { content: counter(help); grid-row: span 2; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 1px solid var(--line-strong);
                     display: flex; align-items: center; justify-content: center; color: #fff; font-size: .75rem; font-weight: 600; }
.help-step strong { color: #fff; font-weight: 600; }
.help-step:hover, .help-step:focus-visible { border-color: var(--line-strong); background: #1c1c1c; outline: none; }
.help-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; margin-top: .9rem; }
/* the tour: the page dimmed except the highlighted part, and a card with the explanation */
.tour-shade { position: fixed; inset: 0; z-index: 900; background: transparent; }
.tour-shade.is-dark { background: rgba(0, 0, 0, .62); }
.tour-spot { position: fixed; z-index: 901; pointer-events: none; border: 2px solid #fff; border-radius: 6px;
             box-shadow: 0 0 0 9999px rgba(0, 0, 0, .62); transition: left .25s, top .25s, width .25s, height .25s; }
.tour-spot[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .tour-spot { transition: none; } }
.tour-card { position: fixed; z-index: 902; background: #141414; border: 1px solid #fff; padding: .9rem 1rem 1rem; color: var(--text-soft);
             box-shadow: 0 12px 40px rgba(0, 0, 0, .7); outline: none; }
.tour-card .tour-x { position: absolute; top: .55rem; right: .55rem; }
.tour-count { font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); padding-right: 2rem; }
.tour-card h3 { margin: .25rem 2rem .35rem 0; color: #fff; font-size: 1rem; }
.tour-card p { margin: 0 0 .9rem; font-size: .9rem; line-height: 1.5; }
.tour-btns { display: flex; justify-content: space-between; gap: .5rem; }
@media (max-width: 720px) {
    .help-fab { left: .8rem; bottom: .8rem; width: 40px; height: 40px; font-size: 18px; }
    .help-panel { left: .8rem; right: .8rem; width: auto; bottom: calc(.8rem + 50px); }
}
@media print { .help-fab, .help-panel { display: none !important; } }

/* ---------- The Studio (studio.php) and its page builder (studio_admin.php) ---------- */
.studio-head .pf-avatar img { background: #000; }
.studio-head .studio-edit { margin-left: auto; }
.studio-intro { max-width: 760px; margin: -.4rem 0 1.4rem; color: var(--text); font-size: 1rem; line-height: 1.65; }   /* the text above the first photos */
/* builder: a header's text is typed in its bar (#pageCreator: above the general form field style) */
.studio-creator .pc-heading .pc-page-head { gap: .6rem; }
#pageCreator .pc-head-title { flex: 1; min-width: 0; width: auto; margin: 0; padding: .25rem .4rem; background: transparent; border: 0;
                               border-bottom: 1px dashed var(--line-strong); border-radius: 0; color: #fff; font-size: .95rem; font-weight: 600;
                               letter-spacing: 1.2px; text-transform: uppercase; }
#pageCreator .pc-head-title::placeholder { color: var(--muted); text-transform: none; letter-spacing: .3px; font-weight: 400; }
#pageCreator .pc-head-title:focus { outline: none; border-bottom: 1px solid #fff; }
/* between two rows: "+" (an empty row) and "T" (a header), side by side in the gap */
.studio-creator.is-rows .pc-insert { margin-left: -32px; }
.studio-creator.is-rows .pc-insert.pc-insert-h { margin-left: 4px; font-weight: 700; font-size: 13px; }
/* tray: delete a photo for good (bottom left; "+" is bottom right) */
.pc-trash { position: absolute; left: 3px; bottom: 3px; width: 24px; height: 24px; padding: 0; border-radius: 50%; border: 1px solid var(--line-strong);
            background: rgba(0, 0, 0, .75); font-size: 12px; line-height: 1; cursor: pointer; }
.pc-trash:hover, .pc-trash:focus-visible { border-color: var(--err); background: #3a0d0d; outline: none; }
/* main menu: language switch (last item) */
.topbar nav a.nav-lang { display: inline-flex; align-items: center; gap: .35rem; opacity: .85; }
.topbar nav a.nav-lang:hover { opacity: 1; }
.topbar nav a.nav-lang .icon { font-size: 1.05em; }

/* ---------- date fields: calendar pop-up (assets/site.js) ---------- */
.dp-wrap { position: relative; display: block; }
.contract-paper .dp-wrap { display: inline-block; }
/* the real field: stays in the form (value, required) but is not seen */
input.dp-native { position: absolute !important; left: 0; bottom: 0; width: 100% !important; height: 100% !important; margin: 0 !important;
                  padding: 0 !important; opacity: 0; pointer-events: none; }
/* the calendar icon on the right (!important: the form styles set "background", which would remove it) */
input.dp-shown { cursor: text; padding-right: 2.4rem !important; background-repeat: no-repeat !important;
                 background-position: right .75rem center !important; background-size: 1rem !important;
                 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.6'%3E%3Crect x='3' y='5' width='18' height='16'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") !important; }
.contract-paper input.dp-shown { padding-right: 1.8rem !important; background-position: right .3rem center !important;
                 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Crect x='3' y='5' width='18' height='16'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") !important; }
input.dp-shown.is-readonly { cursor: default; background-image: none !important; }
input.dp-shown.is-invalid { border-color: var(--err) !important; }
.dp-pop { position: absolute; z-index: 300; width: 300px; max-width: calc(100vw - 16px); padding: .7rem; background: var(--surface);
          border: 1px solid var(--line-strong); box-shadow: 0 14px 34px rgba(0, 0, 0, .7); color: var(--text); font: 300 14px/1.4 Poppins, sans-serif; }
.dp-head { display: flex; align-items: center; gap: .3rem; margin-bottom: .5rem; }
.dp-head select { flex: 1 1 auto; min-width: 0; padding: .3rem .4rem; background: #000; color: #fff; border: 1px solid var(--line-strong);
                  font: 400 13px Poppins, sans-serif; text-transform: capitalize; }
.dp-head select.dp-year { flex: 0 0 5rem; }
.dp-nav { flex: 0 0 2rem; height: 2rem; padding: 0; background: none; border: 1px solid var(--line-strong); color: #fff; font-size: 1.2rem; line-height: 1; cursor: pointer; }
.dp-nav:hover, .dp-nav:focus-visible { border-color: #fff; outline: none; }
.dp-grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.dp-grid th { padding: .2rem 0; font-size: 10px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); text-align: center; }
.dp-grid td { padding: 1px; text-align: center; }
.dp-day { width: 100%; height: 2.2rem; padding: 0; background: none; border: 1px solid transparent; color: var(--text-soft); font: 400 13px Poppins, sans-serif; cursor: pointer; }
.dp-day:hover, .dp-day:focus-visible { border-color: #fff; color: #fff; outline: none; }
.dp-day.is-today { border-color: var(--line-strong); color: #fff; font-weight: 600; }
.dp-day.is-focus:not(.is-selected) { outline: 1px dashed #fff; outline-offset: -3px; color: #fff; }
.dp-day.is-selected { background: #fff; color: #000; font-weight: 600; }
.dp-day:disabled { opacity: .25; cursor: default; border-color: transparent; }
.dp-foot { display: flex; gap: .5rem; margin-top: .6rem; }
.dp-foot .dp-ok { margin-left: auto; }   /* OK on the right */
/* the transparent layer under the date pop-up: a click next to it doesn't reach the page (site.js) */
.dp-layer { position: fixed; inset: 0; z-index: 299; background: transparent; }
/* a date chosen but not taken over, and a click next to the pop-up: OK flashes */
.dp-ok.dp-nudge { animation: dp-nudge .55s ease-in-out 2; }
@keyframes dp-nudge { 0%, 100% { transform: none; box-shadow: none; } 50% { transform: scale(1.12); box-shadow: 0 0 0 3px rgba(255, 255, 255, .45); } }
/* time fields: typed as hh:mm (assets/site.js) */
input.time-field { font-variant-numeric: tabular-nums; }

/* ---------- Dutch addresses (assets/address.js): suggestions below the street, a hint below the postal code ---------- */
.addr-wrap { position: relative; }
.addr-list { position: absolute; z-index: 80; left: 0; right: 0; top: 100%; margin: 2px 0 0; padding: .3rem 0; list-style: none;
             background: var(--surface); border: 1px solid var(--line-strong); box-shadow: 0 14px 34px rgba(0, 0, 0, .7); }
.addr-list li { padding: .45rem .8rem; cursor: pointer; font: 300 14px/1.4 Poppins, sans-serif; letter-spacing: normal; text-transform: none; color: var(--text-soft); }
.addr-list li.is-active, .addr-list li[role=option]:hover { background: #fff; color: #000; }
.addr-list li.addr-head { cursor: default; font-size: 11px; color: var(--muted); padding-bottom: .2rem; }
.addr-hint { display: block; min-height: 1.2em; margin-top: .3rem; font-weight: 300; letter-spacing: normal; text-transform: none; color: var(--text-soft); }
.addr-hint.is-bad { color: var(--err); }

/* ---------- hearts (inc/hearts.php, assets/hearts.js): bottom right of a profile photo / photo, with the number ---------- */
.heart-host { position: relative; display: block; }
.pf-row.r1 .heart-host { width: fit-content; max-width: 100%; margin: 0 auto; }   /* (a single photo on a row: the heart on its corner) */
.heart-btn { position: absolute; z-index: 3; right: .45rem; bottom: .45rem; display: inline-flex; align-items: center; gap: .3rem;
             padding: .3rem .55rem; border: 1px solid rgba(255, 255, 255, .55); border-radius: 999px; background: rgba(0, 0, 0, .62);
             color: #fff; font: 500 12px/1 Poppins, sans-serif; letter-spacing: normal; text-transform: none; text-decoration: none; cursor: pointer;
             transition: background .15s, border-color .15s, transform .15s; }
.heart-btn .icon { width: 15px; height: 15px; }
.heart-btn:hover:not(:disabled), .heart-btn:focus-visible { background: rgba(0, 0, 0, .85); border-color: #fff; color: #fff; outline: none; }
.heart-btn.is-on .icon path, .heart-btn.is-mine .icon path { fill: currentColor; }   /* given (or mine): a filled heart */
.heart-btn.is-on { border-color: #fff; }
.heart-btn:active:not(:disabled) { transform: scale(.92); }
.heart-btn:disabled { cursor: default; }
.heart-n:empty { display: none; }
.profile-photo .heart-btn { right: .6rem; bottom: .6rem; font-size: 13px; padding: .35rem .65rem; }
.pp-grid .heart-btn { right: .3rem; bottom: .3rem; padding: .22rem .45rem; font-size: 11px; }
.pp-grid .heart-btn .icon { width: 13px; height: 13px; }
/* the photos of a shoot (shoot cards, Edit Shoot) and the change-profile-photo page: the small heart too */
.shoot-photos .heart-btn, .gallery.manage .heart-btn { right: .25rem; bottom: .25rem; padding: .2rem .42rem; font-size: 11px; }
.shoot-photos .heart-btn .icon, .gallery.manage .heart-btn .icon { width: 12px; height: 12px; }
/* my favourite photos: a bookmark at the top left of the photo (only I see it) — an outline, white when it is a favourite */
.fav-btn { position: absolute; z-index: 3; top: 3px; left: 3px; display: inline-flex; align-items: center; justify-content: center;
           width: 24px; height: 26px; padding: 0; border: 0; border-radius: 3px; background: rgba(0, 0, 0, .55); color: #fff; cursor: pointer;
           opacity: .8; transition: opacity .15s, background .15s, transform .1s; }
.fav-btn .icon { width: 16px; height: 16px; }
.fav-btn.is-on { opacity: 1; background: rgba(0, 0, 0, .7); }
.fav-btn.is-on .icon path { fill: currentColor; }
.fav-btn:hover, .fav-btn:focus-visible { opacity: 1; background: rgba(0, 0, 0, .85); outline: none; }
.fav-btn:active { transform: scale(.9); }
.sp-item.has-fav .sp-18 { left: 31px; }   /* (the 18+ mark next to the bookmark) */
.pc-thumb .fav-btn { width: 22px; height: 24px; }
/* My portfolio: the number of hearts on a photo (read only, so dragging is not in the way) */
.pc-hearts { position: absolute; left: 3px; bottom: 3px; display: inline-flex; align-items: center; gap: .2rem; padding: .1rem .35rem;
             border-radius: 999px; background: rgba(0, 0, 0, .72); color: #fff; font: 600 10px/1.3 Poppins, sans-serif; pointer-events: none; }
.pc-hearts .icon { width: 10px; height: 10px; }
.pc-hearts .icon path { fill: currentColor; }
/* in the photo viewer: bottom right, a little bigger */
.lb-heart { position: absolute; right: 1rem; bottom: .9rem; font-size: 14px; padding: .45rem .8rem; }
.lb-heart .icon { width: 18px; height: 18px; }
/* Browse: the heart behind the sort list (most hearts first: on / off) */
.heart-btn.sort-heart { position: static; flex: 0 0 auto; padding: .55rem .75rem; font-size: 15px; }
.heart-btn.sort-heart .icon { width: 17px; height: 17px; }
@media (max-width: 720px) { .filters-more .sort-label { flex: 1 1 0; } }   /* (the heart next to it, also on a phone) */
/* the number of hearts on a profile photo in lists (Browse) */
.av-hearts { position: absolute; right: .45rem; bottom: .45rem; display: inline-flex; align-items: center; gap: .25rem; padding: .2rem .5rem;
             border-radius: 999px; background: rgba(0, 0, 0, .62); color: #fff; font: 500 11px/1 Poppins, sans-serif; line-height: 1; }
.av-hearts .icon path { fill: currentColor; }
/* My hearts (hearts.php): who gave them */
.giver-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; }
.giver { display: flex; align-items: center; gap: .5rem; }
.giver > a, .giver > span:first-child { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; }
.giver img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: var(--surface-2); }
.hearts-photo { display: grid; grid-template-columns: 96px 1fr; gap: 1rem; align-items: start; padding: .9rem 0; border-top: 1px solid var(--line); }
.hearts-photo img { width: 96px; height: 96px; object-fit: cover; }
.hearts-photo .label .icon path { fill: currentColor; }

/* ---------- chat (chat.php, assets/chat.js): conversations left, the open one right (on a phone one at a time) ---------- */
.chat-title { display: flex; align-items: center; gap: .5rem; }
.chat { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 1rem; height: calc(100vh - 230px); min-height: 420px; }
.chat-list { overflow-y: auto; padding: .3rem 0; }
.chat-item { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: .7rem; align-items: center; padding: .65rem .9rem;
             text-decoration: none; color: var(--text-soft); border-left: 3px solid transparent; }
.chat-item:hover, .chat-item.is-open { background: var(--surface-2); color: var(--text-soft); }
.chat-item.is-open { border-left-color: #fff; }
.chat-item-main { min-width: 0; display: flex; flex-direction: column; }
.chat-item-top { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.chat-item-top strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-weight: 500; }
.chat-item-last { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-face img { display: block; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--surface-2); border: 2px solid transparent; }
/* a conversation that can only be read (inactive account / no longer visible): like an inactive account — in the list
   a red line on the left and the person dimmed; the open conversation gets the dark red border, red when you point at it */
.chat-item.is-closed { border-left-color: var(--err); }
.chat-item.is-closed > * { opacity: .65; }
.chat-pane.is-closed { border-color: #5a2a2a; transition: border-color .15s; }
.chat-pane.is-closed:hover { border-color: var(--err); }
.chat-item.is-closed .chat-face img, .chat-head.is-closed .chat-face img { filter: grayscale(1) brightness(.55); border-color: #5a2a2a; }
.chat-head.is-closed { border-left: 3px solid var(--err); }   /* (the person at the top of the open conversation) */
.chat-pane { display: flex; flex-direction: column; min-height: 0; }
.chat-head { display: flex; align-items: center; gap: .8rem; padding: .8rem 1rem; border-bottom: 1px solid var(--line); }
.chat-head a { text-decoration: none; }
.chat-back { display: none; }
.chat-msgs { flex: 1; min-height: 0; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .35rem; }
.chat-day { text-align: center; margin: .8rem 0 .4rem; }
.chat-day span { padding: .2rem .7rem; border: 1px solid var(--line); border-radius: 999px; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
.chat-msg { display: flex; align-items: flex-end; gap: .4rem; max-width: 78%; align-self: flex-start; }
.chat-msg.is-mine { align-self: flex-end; flex-direction: row-reverse; }
.chat-bubble { padding: .5rem .8rem; border-radius: 14px 14px 14px 4px; background: var(--surface-2); color: var(--text); font-size: 14px; line-height: 1.45;
               white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-msg.is-mine .chat-bubble { background: #fff; color: #000; border-radius: 14px 14px 4px 14px; }
.chat-time { flex: none; font-size: 10px; color: var(--muted); }
/* ---------- group chats (inc/chat_groups.php) ---------- */
.chat-list-head { padding: .45rem .9rem .55rem; border-bottom: 1px solid var(--line); }
.chat-list-head .btn { width: 100%; text-align: center; }
/* a group's picture: two or three members' faces, overlapping */
.chat-group-faces { position: relative; display: block; width: 44px; height: 44px; }
.chat-face .chat-group-faces img { position: absolute; width: 28px; height: 28px; border: 2px solid var(--surface); border-radius: 50%; }
.chat-face .chat-group-faces.n1 img { width: 44px; height: 44px; inset: 0; }
.chat-face .chat-group-faces.n2 img:nth-child(1), .chat-face .chat-group-faces.n3 img:nth-child(1) { left: 0; top: 0; }
.chat-face .chat-group-faces.n2 img:nth-child(2) { right: 0; bottom: 0; }
.chat-face .chat-group-faces.n3 img:nth-child(2) { right: 0; top: 4px; }
.chat-face .chat-group-faces.n3 img:nth-child(3) { left: 8px; bottom: 0; }
.chat-head-main { flex: 1; min-width: 0; }
.chat-group-names { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* who wrote a message (others), above the bubble; and lines like "Anna added Bram" */
.chat-msg { flex-wrap: wrap; }
.chat-sender { flex: 1 0 100%; margin: 0 0 -.1rem .5rem; font-size: 11px; color: var(--muted); letter-spacing: .3px; }
.chat-event { align-self: center; max-width: 85%; margin: .35rem 0; text-align: center; font-size: 11px; color: var(--muted); }
/* the members panel */
.chat-members { display: grid; gap: .7rem; padding: .8rem 1rem 1rem; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.chat-member-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.chat-member-list li { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-size: .9rem; }
.chat-member-list li .inline { margin-left: auto; }
/* "Add someone" and the group's name: the site's normal (full-height) fields, with the button next to them */
.chat-member-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem .7rem; margin: 0; }
.chat-member-form label { flex: 1 1 240px; margin-bottom: 0; }
.chat-member-form .btn { margin-bottom: 1px; }
.chat-new-group h2 { margin: .8rem 0 .4rem; }
.chat-hello { margin: auto; }
.chat-form { display: flex; align-items: flex-end; gap: .5rem; padding: .7rem; border-top: 1px solid var(--line); }
.chat-form textarea { flex: 1; min-height: 2.7rem; max-height: 160px; resize: none; padding: .6rem .8rem; background: #000; color: #fff;
                      border: 1px solid var(--line-strong); font: 300 15px/1.4 Poppins, sans-serif; }
.chat-closed { display: flex; align-items: center; gap: .5rem; margin: 0; padding: .8rem 1rem; border-top: 1px solid var(--line); color: var(--err); }
.chat-empty { margin: auto; }
@media (max-width: 760px) {
    .chat { grid-template-columns: minmax(0, 1fr); height: calc(100vh - 170px); }
    .chat.has-open .chat-list { display: none; }
    .chat:not(.has-open) .chat-pane { display: none; }
    .chat-back { display: inline-flex; }
}
/* the chat button on someone's profile: bottom right */
.chat-fab { position: fixed; z-index: 60; right: 1.2rem; bottom: 1.2rem; display: inline-flex; align-items: center; gap: .5rem; padding: .75rem 1.2rem;
            border-radius: 999px; background: #fff; color: #000; font: 600 12px Poppins, sans-serif; letter-spacing: 1.6px; text-transform: uppercase;
            text-decoration: none; box-shadow: 0 8px 24px rgba(0, 0, 0, .6); transition: transform .15s; }
.chat-fab:hover { color: #000; transform: translateY(-2px); }
.chat-fab .icon { width: 18px; height: 18px; }
/* the number of unread messages of this conversation: a bubble on the top right corner of the button */
.chat-fab .chat-fab-count { position: absolute; top: -7px; right: -5px; margin: 0; min-width: 1.7em; height: 1.7em; font-size: 11px;
                            background: #000; color: #fff; box-shadow: 0 0 0 2px #fff; }
.chat-fab.is-closed .chat-fab-count { background: #fff; color: #000; box-shadow: 0 0 0 2px #000; }
.chat-fab.is-closed { background: #000; color: var(--text-soft); border: 1px solid #5a2a2a; }
.chat-fab.is-closed:hover { color: var(--text); }

/* ---------- payments (finance_admin.php, subscription.php; inc/billing.php) ---------- */
.fin-totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.fin-totals strong { font-size: 1.3rem; }
.fin-member .fin-who { display: flex; align-items: center; gap: .8rem; margin-bottom: .8rem; }
.fin-member .fin-who a { text-decoration: none; }
.fin-prices input { width: 8rem; }
.fin-prices td { vertical-align: middle; }
.sub-cycles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; max-width: 560px; margin: .8rem 0 .4rem; }
.sub-cycle > span > span { color: var(--text); }
/* My subscription: what I pay is shown, not chosen (a change is asked from the administrator) */
.sub-cycle.is-current { border-color: #fff; background: var(--surface-2); }
.sub-cycle.is-other { opacity: .55; }
.sub-request { margin-top: .9rem; }
.sub-request-open { margin: .8rem 0 0; }
/* a free subscription (given by the administrator): white badge */
.badge-free { background: #fff; border-color: #fff; color: #000; font-weight: 600; vertical-align: middle; margin-left: .4rem; }
/* Payments → the member: prices and per year / per month while "Free subscription" is ticked */
.fin-form label.is-disabled { opacity: .45; }
/* Payments → the member: their open request to change the subscription */
.fin-request { display: grid; gap: .5rem; }
.fin-request .inline-form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.fin-request .inline-form input { flex: 1 1 220px; min-width: 0; }
.sub-request > summary { cursor: pointer; font-weight: 600; }
.sub-request[open] > summary { margin-bottom: .6rem; }
.sub-list { list-style: none; margin: 0 0 .5rem; padding: 0; display: grid; gap: .3rem; }
@media (max-width: 600px) { .fin-totals, .sub-cycles { grid-template-columns: minmax(0, 1fr); } }

/* ---------- main menu: "Requests!" (the shoot request board) stands out ---------- */
.topbar nav a.nav-hot { padding: .35rem .95rem; border: 1px solid #fff; font-weight: 600; letter-spacing: 2.4px;
                        box-shadow: 0 0 0 0 rgba(255, 255, 255, .45); animation: nav-hot-pulse 2.8s ease-out 1s 3; }
.topbar nav a.nav-hot:hover, .topbar nav a.nav-hot.active { background: #fff; color: #000; border-bottom-color: #fff; }
@keyframes nav-hot-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .45); } 70%, 100% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); } }
@media (prefers-reduced-motion: reduce) { .topbar nav a.nav-hot { animation: none; } }
@media (max-width: 900px) {
    .topbar nav > a.nav-hot { width: auto; align-self: flex-start; margin: .6rem 0; padding: .55rem 1.1rem; border-bottom: 1px solid #fff; }
}

/* ---------- Shoot request board (requests.php, request_edit.php) ---------- */
/* the filters above the board: types (several), from / until, inside or outside, distance */
.req-filter-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .7rem 1rem; margin: 0 0 1rem; overflow: visible; }   /* (the list of types folds out over the page) */
.req-filter-form .rf-field { display: flex; flex-direction: column; gap: .3rem; margin: 0; font-size: 10px; font-weight: 500;
                             letter-spacing: 1.8px; text-transform: uppercase; color: var(--muted); }
.req-filter-form select, .req-filter-form input:not([type=checkbox]), .req-multi > summary {
    display: block; padding: .5rem .7rem; background: #000; color: #fff; border: 1px solid var(--line-strong); border-radius: 0;
    font: 300 14px/1.4 Poppins, sans-serif; letter-spacing: normal; text-transform: none; }
.req-filter-form input.dp-shown { width: 11.5rem; }
.req-filter-form .rf-go { display: flex; align-items: center; gap: .8rem; padding-bottom: .15rem; }
.req-filter-form .geo-hint { flex-basis: 100%; }
.req-multi { position: relative; }
.req-multi > summary { list-style: none; cursor: pointer; min-width: 13rem; max-width: 20rem; padding-right: 2rem; white-space: nowrap;
                       overflow: hidden; text-overflow: ellipsis; position: relative; }
.req-multi > summary::-webkit-details-marker { display: none; }
.req-multi > summary::after { content: ''; position: absolute; right: .8rem; top: 50%; width: .4rem; height: .4rem; margin-top: -.3rem;
                              border-right: 1px solid #fff; border-bottom: 1px solid #fff; transform: rotate(45deg); }
.req-multi[open] > summary, .req-multi > summary.is-set { border-color: #fff; }
.req-multi-menu { position: absolute; z-index: 60; top: calc(100% + 4px); left: 0; min-width: 16rem; display: grid; gap: .35rem;
                  padding: .8rem; background: var(--surface); border: 1px solid var(--line-strong); box-shadow: 0 14px 34px rgba(0, 0, 0, .7); }
.req-multi-menu .check-line { margin: 0; font-size: 13px; font-weight: 300; letter-spacing: normal; text-transform: none; color: var(--text-soft); cursor: pointer; }
.req-multi-menu .rf-all { padding-bottom: .35rem; border-bottom: 1px solid var(--line); }
@media (max-width: 600px) {
    .req-filter-form .rf-field { flex: 1 1 45%; }
    .req-filter-form input.dp-shown, .req-filter-form select, .req-multi > summary { width: 100%; max-width: none; min-width: 0; }
}
/* distances ("± 12 km", inc/geo.php) */
.dist { white-space: nowrap; }
.geo-hint { display: inline-flex; align-items: center; gap: .35rem; color: var(--text-soft); }
/* two requests next to each other (one on small screens); the buttons at the bottom of each card */
.req-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: stretch; }
.req-card { scroll-margin-top: 100px; display: flex; flex-direction: column; min-width: 0; }.req-card > .req-actions { margin-top: auto; padding-top: 1rem; }
.req-list > .req-past-head { grid-column: 1 / -1; }
@media (max-width: 860px) { .req-list { grid-template-columns: minmax(0, 1fr); } }
.req-card.is-closed { opacity: .5; filter: grayscale(1); }
.req-card.is-closed:hover, .req-card.is-closed:focus-within { opacity: .8; }
/* availability (an open request for a period): dashed, so it stands apart from a shoot on a date */
.req-card.is-range { border-style: dashed; }
.badge-avail { border-style: dashed; color: #fff; }
.badge-pay { border-color: #fff; color: #fff; font-weight: 600; }   /* a paid shoot */
.req-past-head { margin-top: 1.2rem; }
.req-past-head h2 { margin: 0 0 .2rem; }
.req-past-head p { margin: 0; }
.req-head { display: flex; gap: 1rem; align-items: flex-start; }
.req-avatar img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; background: var(--surface-2); border: 1px solid var(--line); }
.req-who { min-width: 0; flex: 1; }
.req-badges { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; }
.req-subject { margin: .35rem 0 .1rem; font-size: 1.15rem; text-transform: none; letter-spacing: .3px; font-weight: 600; }
.req-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .6rem 1.2rem; margin: 1rem 0 0;
             padding: .8rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.req-facts dt { font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 1.8px; color: var(--muted); }
.req-facts dd { margin: 0; color: var(--text); }
.req-facts .req-location dd { overflow-wrap: anywhere; }
.req-desc { margin: .9rem 0 0; }
.req-mood { margin-top: .9rem; }
.req-mood-img { display: block; width: min(100%, 320px); margin-bottom: .4rem; }
.req-mood-img img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--surface-2); border: 1px solid var(--line); }
.req-mood-img:hover img { border-color: #fff; }
.req-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1rem; }
.req-respond { flex: 1 1 100%; }
.req-respond > summary { list-style: none; display: inline-flex; width: auto; cursor: pointer; }
.req-respond > summary::-webkit-details-marker { display: none; }
.req-respond form { margin-top: .6rem; }
.req-respond-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.req-responses { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.req-response { padding: .5rem 0; }
.req-response + .req-response { border-top: 1px solid var(--line); }
.req-response p { margin: .2rem 0 0; }
/* the form */
.req-date-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: .6rem; align-items: end; margin-bottom: .5rem; }
.req-date-row.req-range-row { grid-template-columns: 1fr 1fr; }
/* the kind of request: two choices side by side */
.req-kinds { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.req-kinds legend { grid-column: 1 / -1; }
.req-kind { display: flex !important; gap: .6rem; align-items: flex-start; margin: 0 !important; padding: .8rem; border: 1px solid var(--line-strong);
            cursor: pointer; text-transform: none !important; letter-spacing: normal !important; font-size: 14px !important; }
.req-kind > span { display: flex; flex-direction: column; gap: .2rem; }
.req-kind strong { font-weight: 600; }
.req-kind:has(input:checked) { border-color: #fff; background: var(--surface-2); }
.req-kind:nth-of-type(2) { border-style: dashed; }
/* TFP or paid: three choices side by side, the amount below */
.req-pay .req-kinds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.req-pay .req-kind { border-style: solid; }
.req-pay .req-fee { margin: .7rem 0 0; max-width: 420px; }
/* a shoot request in the studio: the choice, and the room (the day parts are reserved) */
.req-studio { margin: 0 0 1rem; padding: .7rem .9rem; border: 1px solid var(--line-strong); background: var(--surface-2); }
.req-studio .check-line { margin-bottom: 0; }
.req-studio-room { margin-top: .7rem; }
.req-studio-room[hidden] { display: none; }
.req-studio-room label { max-width: 360px; margin-bottom: .4rem; }
/* the studio check: free (which day parts) or not possible (why: the date / time fields red, posting blocked) */
.req-studio-check { margin: .5rem 0 0; padding: .55rem .75rem; border-left: 3px solid var(--line-strong); font-size: .88rem; color: var(--text); }
.req-studio-check[hidden] { display: none; }
.req-studio-check.is-ok { border-left-color: #fff; }
.req-studio-check.is-bad { border-left-color: var(--err); background: #2a0d0d; color: #ffd6d6; }
.form input.studio-bad, .form input.studio-bad:focus { border-color: var(--err) !important; box-shadow: 0 0 0 1px var(--err); }
.form button[type=submit]:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 600px) { .req-pay .req-kinds { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .req-kinds { grid-template-columns: 1fr; } }
.req-mood-edit { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; }
.req-mood-current { flex: 0 0 160px; }
.req-mood-current img { width: 160px; height: 160px; object-fit: cover; border: 1px solid var(--line); }
.req-mood-choice { flex: 1 1 280px; min-width: 0; }
.req-mood-choice .mb-panel { margin-top: .6rem; }
.req-mood-choice .mb-panel p { margin: .3rem 0 0; }
.mb-progress { color: var(--text); }
@media (max-width: 560px) {
    .req-date-row { grid-template-columns: 1fr 1fr; }
    .req-date-row > label:first-child { grid-column: 1 / -1; }
}