/* Studio admin (/admin). One page, one script (admin.js); the address after # says which screen is open. */
:root { --yellow: #f7ca4d; --ink: #242524; --graphite: #5d5e5c; --mist: #f0f0ee; --rule: #d9d9d6; --ok: #1f7a4a; --warn: #b4441b; --gutter: clamp(16px, 4vw, 40px); }
* { box-sizing: border-box; }
html { scroll-padding-top: 120px; }
body { margin: 0; font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif; color: var(--ink); background: var(--mist); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.hidden, [hidden] { display: none !important; }
h1, h2 { margin: 0; font-weight: 800; font-stretch: 120%; letter-spacing: -0.02em; line-height: 1.05; }
h1 { font-size: clamp(28px, 4vw, 40px); overflow-wrap: anywhere; }
h2 { font-size: 20px; }
h3 { margin: 10px 0 0; font-size: 16px; font-weight: 800; font-stretch: 112%; }
h3 .meta { font-weight: 500; font-stretch: 100%; margin-left: 6px; }
p { margin: 0; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 2px solid var(--ink); background: var(--ink); color: #fff; font-weight: 700; cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn.line { background: transparent; color: var(--ink); }
.btn.line:hover { background: var(--ink); color: #fff; }
.btn.yellow { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
.btn.sm { min-height: 36px; padding: 0 14px; font-size: 14px; }
.btn.danger { background: transparent; color: var(--warn); border-color: var(--warn); }
.btn.danger:hover { background: var(--warn); color: #fff; }
.btn:disabled { opacity: .5; cursor: default; }
.text-btn { background: none; border: 0; padding: 4px 0; font-weight: 700; text-decoration: underline; cursor: pointer; color: var(--ink); }
.text-btn.danger { color: var(--warn); }

/* Sign in */
.login { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--yellow); }
.login-card { width: min(440px, 100%); background: #fff; border-radius: 28px; padding: 32px; display: grid; gap: 16px; }
.login-card form { display: grid; gap: 14px; margin-top: 12px; }
.login-card summary { cursor: pointer; font-weight: 600; color: var(--graphite); }
.login h1 { font-size: 34px; }
.login p { color: var(--graphite); }
label { font-weight: 700; font-size: 15px; display: grid; gap: 6px; }
label small, .hint { font-weight: 500; color: var(--graphite); font-size: 14px; }
input[type=password], input[type=search], input[type=text], input[type=email], input[type=tel], input[type=url], input[type=date], input[type=time], input[type=number], textarea, select { width: 100%; border: 2px solid transparent; background: var(--mist); border-radius: 14px; padding: 12px 14px; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--ink); background: #fff; }
textarea { resize: vertical; min-height: 48px; }
label input, label select, label textarea { font-weight: 500; }
input, select, textarea { font-size: 16px; }
.err { color: var(--warn); font-weight: 600; min-height: 1.4em; }

/* Top bar: always there, so every screen is one click from every other */
.top { position: sticky; top: 0; z-index: 20; background: var(--ink); color: #fff; }
.top-in { max-width: 1240px; margin: 0 auto; padding: 10px var(--gutter) 0; display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; }
.top-brand { font-weight: 800; font-stretch: 115%; font-size: 18px; text-decoration: none; }
/* Search everything */
.find { position: relative; flex: 1 1 220px; max-width: 460px; margin: 0 auto; }
.find input[type=search] { background: rgba(255, 255, 255, .12); color: #fff; padding: 9px 14px; border-radius: 999px; }
.find input::placeholder { color: rgba(255, 255, 255, .65); }
.find input:focus { background: #fff; color: var(--ink); border-color: var(--yellow); }
.find-list { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; background: #fff; color: var(--ink); border-radius: 16px; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .45); max-height: min(70vh, 520px); overflow-y: auto; padding: 6px; }
.find-list a { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px; text-decoration: none; }
.find-list a:hover, .find-list a:first-child { background: var(--mist); }
.find-list .kind { flex: none; width: 70px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--graphite); }
.find-list strong { display: block; overflow-wrap: anywhere; }
.find-list small { display: block; color: var(--graphite); font-size: 13px; overflow-wrap: anywhere; }
.find-list .amt { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; }
.find-list p { padding: 12px; color: var(--graphite); }
.top-end { display: flex; gap: 8px; margin-left: auto; }
.top .btn.line { color: #fff; border-color: rgba(255, 255, 255, .5); }
.top .btn.line:hover { background: #fff; color: var(--ink); }
.nav { order: 3; flex-basis: 100%; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1); padding: 6px var(--gutter) 0; }
.nav::-webkit-scrollbar { display: none; }
.nav a { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 10px 11px; font-size: 15px; border-radius: 12px 12px 0 0; font-weight: 700; text-decoration: none; color: rgba(255, 255, 255, .78); }
.nav a:hover { color: #fff; }
.nav a[aria-current="page"] { background: var(--mist); color: var(--ink); }
.badge { background: var(--yellow); color: var(--ink); border-radius: 999px; padding: 0 8px; font-size: 13px; min-width: 22px; text-align: center; font-weight: 800; }

main { max-width: 1240px; margin: 0 auto; padding: 22px var(--gutter) 96px; min-height: 70vh; }
.wait { padding: 60px 0; text-align: center; color: var(--graphite); }

/* Head of every screen: Back, title, the main things to do */
.page-head { display: grid; gap: 10px; margin-bottom: 20px; }
.back { justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px 0 12px; border-radius: 999px; background: #fff; font-weight: 700; text-decoration: none; border: 2px solid transparent; }
.back:hover { border-color: var(--ink); }
.page-title { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.page-title .row { margin-left: auto; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.row select { width: auto; padding: 8px 12px; }
.meta { color: var(--graphite); font-size: 14px; }
.grow { flex: 1 1 auto; min-width: 0; }

.bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.bar input[type=search] { max-width: 340px; margin-left: auto; background: #fff; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { border: 2px solid var(--rule); background: #fff; border-radius: 999px; padding: 6px 14px; font-weight: 600; cursor: pointer; font-size: 14px; }
.chip[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: #fff; }
.chip small { opacity: .65; font-size: 12px; margin-left: 2px; }

.list { display: grid; gap: 12px; }
.card { background: #fff; border-radius: 20px; padding: 18px 20px; display: grid; gap: 10px; border-left: 6px solid transparent; min-width: 0; }
.card.s-new, .card.s-pending { border-left-color: var(--yellow); }
.card.s-booked, .card.s-approved { border-left-color: var(--ok); }
.card.s-off { opacity: .75; }
.card-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: baseline; }
.card-head strong { font-size: 18px; }
.msg { white-space: pre-wrap; overflow-wrap: anywhere; }
.stars { color: #e9b42a; letter-spacing: 2px; }
.empty { background: #fff; border-radius: 20px; padding: 40px 20px; text-align: center; color: var(--graphite); display: grid; gap: 14px; justify-items: center; }
.toast { position: fixed; left: 50%; bottom: 24px; translate: -50% 0; z-index: 50; background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 999px; font-weight: 600; opacity: 0; transition: opacity .2s; pointer-events: none; max-width: calc(100vw - 24px); text-align: center; }
.toast.show { opacity: 1; }

/* Rows that open something: clients, contracts, invoices */
.rows { display: grid; gap: 2px; background: #fff; border-radius: 20px; overflow: hidden; }
.rowlink { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: center; padding: 14px 20px; text-decoration: none; border-bottom: 1px solid var(--mist); }
.rowlink:last-child { border-bottom: 0; }
.rowlink:hover { background: #fafaf8; }
.rowlink strong { font-size: 17px; overflow-wrap: anywhere; }
.rowlink .meta { grid-column: 1; overflow-wrap: anywhere; }
.rowlink .end { grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: center; gap: 12px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.rowlink .end::after { content: '›'; font-size: 24px; line-height: 1; color: var(--graphite); font-weight: 400; }
.rowlink.with-img { grid-template-columns: 84px minmax(0, 1fr) auto; }
.rowlink.with-img img, .rowlink.with-img .noimg { grid-row: 1 / span 2; width: 84px; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 8px; background: var(--mist); display: block; }
.rowlink.with-img strong, .rowlink.with-img .meta { grid-column: 2; }
.rowlink.with-img .end { grid-column: 3; }

.pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; background: #e4e4e1; white-space: nowrap; }
.pill.live, .pill.signed, .pill.paid { background: #dff3e6; color: var(--ok); }
.pill.draft { background: var(--yellow); }
.pill.sent { background: #e3ecfb; color: #1c4f9c; }
.pill.overdue { background: #fbe4dc; color: var(--warn); }

/* Home */
.quick { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.panel { background: #fff; border-radius: 20px; padding: 20px; display: grid; gap: 12px; min-width: 0; }
.panel > h2 { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.panel > h2 .meta, .panel > h2 a { font-size: 14px; font-weight: 600; font-stretch: 100%; letter-spacing: 0; }
.panel.wide { grid-column: 1 / -1; }
.todo { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.todo a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--mist); text-decoration: none; }
.todo a:hover { background: #e6e6e3; }
.todo a > span:not(.num):not(.amt) { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.todo a::after { content: '›'; font-size: 22px; line-height: 1; color: var(--graphite); }
.todo .num { flex: none; min-width: 30px; height: 30px; border-radius: 999px; background: var(--yellow); display: grid; place-items: center; font-weight: 800; padding: 0 8px; }
.todo small { display: block; color: var(--graphite); font-size: 14px; }
.todo .amt { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.stat { background: var(--mist); border-radius: 14px; padding: 12px 14px; }
.stat strong { display: block; font-size: clamp(20px, 2.4vw, 28px); font-stretch: 112%; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.15; }
.stat span { font-size: 14px; color: var(--graphite); }
.stat.warn strong { color: var(--warn); }
.stats.flat .stat { background: #fff; }
.acts { list-style: none; margin: 0; padding: 0; display: grid; }
.acts li { display: flex; gap: 12px; justify-content: space-between; padding: 9px 0; border-top: 1px solid var(--mist); }
.acts li:first-child { border-top: 0; }
.acts a { text-decoration: none; overflow-wrap: anywhere; min-width: 0; }
.acts a:hover { text-decoration: underline; }
.acts .meta { flex: none; }
.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.check-list li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; }
.check-list li::before { content: '!'; width: 24px; height: 24px; border-radius: 50%; background: var(--yellow); display: grid; place-items: center; font-weight: 800; font-size: 14px; }
.check-list li.done::before { content: '✓'; background: #dff3e6; color: var(--ok); }
code { background: var(--mist); padding: 2px 8px; border-radius: 8px; font-size: 14px; overflow-wrap: anywhere; }

/* Forms */
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: end; }
.form .wide { grid-column: 1 / -1; }
label.check { display: flex; align-items: center; gap: 8px; font-weight: 600; }
label.check input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--ink); flex: none; }
.note { background: #fff; border-radius: 16px; padding: 14px 18px; margin-bottom: 12px; display: flex; gap: 10px 14px; align-items: center; flex-wrap: wrap; }
.note.warn { border-left: 6px solid var(--warn); }
.note.in { background: var(--mist); margin: 0; }
.note input[type=number] { width: 84px; padding: 8px 10px; border-radius: 12px; }
.note input[type=text] { flex: 1 1 220px; width: auto; min-width: 0; padding: 8px 12px; border-radius: 12px; }
.note.in input[type=number] { background: #fff; }
.note .meta { flex-basis: 100%; }
.stack { display: grid; gap: 16px; }
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 26px 0 10px; }
.sec-head h2 small { font-size: 14px; font-weight: 600; font-stretch: 100%; letter-spacing: 0; color: var(--graphite); margin-left: 6px; }
.quiet { background: #fff; border-radius: 20px; padding: 18px 20px; color: var(--graphite); }

/* Gallery screen */
.gal-top { display: grid; grid-template-columns: 132px 1fr; gap: 16px; align-items: start; }
.gal-cover { width: 132px; aspect-ratio: 3 / 2; object-fit: contain; background: var(--mist); border-radius: 10px; display: block; }
.people { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.people li { display: flex; gap: 6px 12px; align-items: center; flex-wrap: wrap; justify-content: space-between; background: var(--mist); border-radius: 12px; padding: 8px 12px; }
.people strong { overflow-wrap: anywhere; }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; max-height: 460px; overflow-y: auto; padding: 4px; background: var(--mist); border-radius: 12px; }
.th { position: relative; padding: 0; border: 0; background: #ddd; aspect-ratio: 1; cursor: pointer; overflow: hidden; border-radius: 6px; }
.th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.th.fav::after { content: '\2665\FE0E'; position: absolute; right: 4px; bottom: 4px; width: 24px; height: 24px; border-radius: 50%; background: var(--yellow); display: grid; place-items: center; font-size: 13px; }
.th.cover { outline: 4px solid var(--ink); outline-offset: -4px; }
.th.cover::before { content: 'Cover'; position: absolute; left: 4px; top: 4px; background: var(--ink); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 999px; z-index: 1; }
.thumbs.favonly .th:not(.fav) { display: none; }
.log { list-style: none; margin: 0; padding: 0; font-size: 14px; display: grid; gap: 4px; max-height: 220px; overflow-y: auto; }

/* Contract and invoice screens */
.doc-body { min-height: 380px; font-family: Georgia, 'Times New Roman', serif; font-size: 16px; line-height: 1.6; }
.fields { display: flex; flex-wrap: wrap; gap: 6px; }
.fields button { border: 0; background: var(--mist); border-radius: 8px; padding: 4px 8px; font-size: 13px; font-family: ui-monospace, Consolas, monospace; cursor: pointer; }
.fields button:hover { background: var(--yellow); }
.steps { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; margin: 0; padding: 0; font-size: 14px; color: var(--graphite); }
.steps li.done { color: var(--ink); font-weight: 600; }
.steps li.done::before { content: '✓ '; color: var(--ok); }
.record { background: #dff3e6; border-radius: 16px; padding: 16px 18px; display: grid; gap: 4px; }
.record strong { font-size: 18px; }
.record img { max-width: 260px; max-height: 90px; background: #fff; border-radius: 8px; margin-top: 6px; }
.record code { font-size: 13px; overflow-wrap: anywhere; }
.paper { white-space: pre-wrap; overflow-wrap: anywhere; font-family: Georgia, 'Times New Roman', serif; line-height: 1.6; background: var(--mist); border-radius: 14px; padding: 18px; max-height: 520px; overflow-y: auto; }
.items { display: grid; gap: 8px; }
.item { display: grid; grid-template-columns: minmax(0, 1fr) 84px 124px 108px 36px; gap: 8px; align-items: center; }
.item.head { font-size: 13px; font-weight: 700; color: var(--graphite); }
.item .amt { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.item input { padding: 10px 12px; }
.item .x { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--mist); cursor: pointer; font-size: 18px; line-height: 1; }
.item .x:hover { background: var(--warn); color: #fff; }
.totals { justify-self: end; display: grid; grid-template-columns: auto auto; gap: 4px 0; font-variant-numeric: tabular-nums; text-align: right; }
.totals > :nth-child(even) { padding-left: 28px; }
.totals .big { font-size: 22px; font-weight: 800; font-stretch: 112%; border-top: 2px solid var(--ink); padding-top: 6px; margin-top: 4px; }
.pay-form { display: grid; grid-template-columns: 130px 150px 170px minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.pays { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pays li { display: flex; gap: 6px 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; background: var(--mist); border-radius: 12px; padding: 8px 12px; }
.tpl { border-top: 1px solid var(--mist); padding-top: 12px; display: grid; gap: 10px; }
.tpl:first-of-type { border-top: 0; padding-top: 0; }
.tpl summary { cursor: pointer; font-weight: 700; }

@media (max-width: 900px) { .cols { grid-template-columns: 1fr; } .pay-form { grid-template-columns: 1fr 1fr; } .pay-form .wide { grid-column: 1 / -1; } }
@media (max-width: 640px) {
  .bar input[type=search] { max-width: none; margin-left: 0; }
  .card, .panel { padding: 16px; }
  .form { grid-template-columns: 1fr; }
  .gal-top { grid-template-columns: 88px 1fr; } .gal-cover { width: 88px; }
  .stats { grid-template-columns: 1fr; }
  .page-title .row { margin-left: 0; flex-basis: 100%; }
  .rowlink { padding: 12px 14px; }
  .rowlink.with-img { grid-template-columns: 64px minmax(0, 1fr) auto; } .rowlink.with-img img, .rowlink.with-img .noimg { width: 64px; }
  .item { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px; padding-bottom: 10px; border-bottom: 1px solid var(--mist); }
  .item > :first-child { grid-column: 1 / -1; }
  .item.head, .item .amt { display: none; }
  .top-end .btn { min-height: 32px; padding: 0 10px; }
  .top-brand span { display: none; }
  .find { order: 2; flex-basis: 100%; max-width: none; }
  .btn { white-space: normal; text-align: center; padding-top: 6px; padding-bottom: 6px; }
}

/* Pay to unlock, and the payment plan on an invoice */
.th.held img { opacity: .35; }
.th.held::after { content: 'Locked'; position: absolute; right: 4px; top: 4px; padding: 1px 6px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 10px; font-weight: 800; }
.th.held.fav::after { content: '\2665\FE0E  Locked'; }
.pair { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.end .pill + .pill { margin-left: 6px; }

/* Bookings: the details form inside a contract, what was accepted, and the small forms that record an answer */
/* "Are you sure?": its own window, before anything that reaches a client or cannot be taken back */
.sure { border: 0; border-radius: 20px; padding: 26px; width: min(520px, calc(100vw - 32px)); box-shadow: 0 24px 80px rgba(0, 0, 0, .35); color: var(--ink); }
.sure::backdrop { background: rgba(36, 37, 36, .55); }
.sure h2 { font-size: 24px; line-height: 1.15; margin: 0 0 12px; }
.sure p { margin: 0 0 10px; color: var(--graphite); overflow-wrap: anywhere; }
.sure .row { margin-top: 20px; justify-content: flex-end; }
.sure .btn:disabled { opacity: .45; }
/* Fields that read what is typed: a date with its calendar button, a number with its unit, the note under a field */
.pickf, .unitf { display: flex; gap: 8px; align-items: center; }
.pickf input[type=text], .unitf input { flex: 1; min-width: 0; }
.calb { position: relative; flex: none; display: flex; }
.cal-btn { width: 50px; height: 50px; padding: 0; display: grid; place-items: center; border-radius: 14px; background: #fff; }
.calb .cal { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.unitf > span { font-weight: 600; color: var(--graphite); white-space: nowrap; }
.ferr { display: block; margin-top: 6px; color: var(--warn); font-weight: 600; }
.ferr.soft { color: var(--graphite); }
[aria-invalid=true] { border-color: var(--warn) !important; }
.bkf { padding: 16px; border-radius: 16px; background: var(--mist); }
.bkf .bk-h { margin-top: 8px; padding-top: 14px; border-top: 2px solid #fff; }
.bkf .item .x { background: #fff; }
.bkf .item .x:hover { background: var(--warn); }
/* A new client typed right in a contract's or an invoice's form */
.newc { padding: 14px 16px; border-radius: 16px; background: var(--mist); }
.newc input { background: #fff; }
/* The parts of a form that are rarely needed: folded until asked for, or until they hold something */
details.fold > summary { cursor: pointer; font-weight: 700; }
details.fold > summary .meta { font-weight: 500; font-size: 14px; margin-left: 6px; }
details.fold[open] > summary { margin-bottom: 14px; }
/* Whole panels that are closed until asked for (fold() in admin.js): a name and where it stands, on one line */
.folds { display: grid; gap: 8px; }
details.foldp { display: block; padding: 0; }
details.foldp > summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 3px 14px; padding: 15px 20px; cursor: pointer; list-style: none; border-radius: 20px; }
details.foldp > summary::-webkit-details-marker { display: none; }
details.foldp > summary:hover h2 { text-decoration: underline; }
details.foldp > summary h2 { font-size: 17px; }
details.foldp > summary::after { content: ''; grid-column: 3; grid-row: 1; width: 9px; height: 9px; margin: -5px 4px 0 2px; border-right: 2px solid var(--graphite); border-bottom: 2px solid var(--graphite); transform: rotate(45deg); }
details.foldp[open] > summary::after { transform: rotate(-135deg); margin-top: 5px; }
.foldp-say { min-width: 0; color: var(--graphite); font-size: 14px; text-align: right; overflow-wrap: anywhere; }
/* on a phone: where it stands goes under the name, and the arrow stays at the right */
@media (max-width: 640px) {
  details.foldp > summary { grid-template-columns: minmax(0, 1fr) auto; padding: 14px 16px; }
  details.foldp > summary::after { grid-column: 2; grid-row: 1 / span 2; }
  .foldp-say { grid-column: 1; text-align: left; }
  .foldp-in { padding: 2px 16px 16px; }
}
.foldp-say.warn { color: var(--ink); font-weight: 700; }
.foldp-say.warn::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 7px; border-radius: 50%; background: var(--yellow); }
.foldp-in { display: grid; gap: 12px; padding: 2px 20px 20px; min-width: 0; }
.tpl summary .meta { font-weight: 500; margin-left: 4px; }
.tpl > .rows { margin-top: 2px; }
.tpl .rowlink { background: var(--mist); }
.bkf .note.in { background: #fff; }
.row .keep-name { width: auto; flex: 1 1 240px; min-width: 0; padding: 8px 12px; }
.bkf input, .bkf select, .bkf textarea { background: #fff; }
.kv { display: grid; grid-template-columns: minmax(130px, 34%) minmax(0, 1fr); gap: 6px 16px; margin: 0; }
.kv dt { font-weight: 700; }
.kv dd { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
details.mini { margin-top: 8px; }
details.mini summary { cursor: pointer; font-size: 14px; font-weight: 600; text-decoration: underline; }
details.mini .form { margin-top: 10px; padding: 12px; border-radius: 12px; background: var(--mist); }
details.mini input, details.mini select { background: #fff; }
.todo li.job { display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.todo li.job.done { opacity: .6; }
.people li > .row { flex: none; }
/* a web address or a long word in a list line breaks instead of pushing the line out of a small screen */
.people li > span { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 400px) { .row > .btn { white-space: normal; text-align: center; max-width: 100%; } }

/* "Opens another site" arrow and the small "play" triangle. Drawn, not typed: as characters (\2197, \25B6) iPads and
   iPhones replace them with colored emoji. */
.ext { display: inline-block; width: .62em; height: .62em; margin-left: .16em; vertical-align: .03em; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.2 1.6h7.2v7.2M10.4 1.6 1.6 10.4' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.2 1.6h7.2v7.2M10.4 1.6 1.6 10.4' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.play-ico { display: inline-block; width: 0; height: 0; border-style: solid; border-width: .42em 0 .42em .7em; border-color: transparent transparent transparent currentColor; }

/* A client's own picture (they add it on their page): round, in the list and on their page; their initial when there is none */
.rowlink.with-face { grid-template-columns: 44px minmax(0, 1fr) auto; }
.rowlink.with-face img, .rowlink.with-face .face { grid-row: 1 / span 2; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--mist); display: grid; place-items: center; font-weight: 800; color: var(--graphite); }
.rowlink.with-face strong, .rowlink.with-face .meta { grid-column: 2; }
.rowlink.with-face .end { grid-column: 3; }
.cl-self { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.cl-self img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: none; }

/* Calendar: a month of days; a booking is a link to its contract, what is only on his Google Calendar is plain text */
.cal { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-head { font-size: 13px; font-weight: 700; color: var(--graphite); padding: 0 6px 2px; }
.cal-day { min-height: 98px; background: var(--mist); border-radius: 12px; padding: 6px; display: grid; gap: 4px; align-content: start; min-width: 0; }
.cal-day.today { box-shadow: inset 0 0 0 2px var(--ink); }
.cal-num { font-weight: 800; font-size: 14px; padding: 0 2px; }
.cal-num small { display: none; font-weight: 600; font-size: 13px; color: var(--graphite); }
.cal-item { display: grid; padding: 4px 8px; border-radius: 8px; background: #fff; font-size: 13px; line-height: 1.25; text-decoration: none; min-width: 0; border-left: 4px solid var(--rule); }
.cal-item strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-item span { color: var(--graphite); font-size: 12px; overflow-wrap: anywhere; }
.cal-item b { color: var(--warn); }
.cal-item.confirmed { border-left-color: var(--ok); }
.cal-item.hold { border-left-color: var(--yellow); }
.cal-item.draft { border-left-style: dashed; border-left-color: var(--graphite); }
.cal-item.g { background: transparent; border-left-color: #8fa9d6; }
a.cal-item:hover { box-shadow: 0 0 0 2px var(--ink); }
.cal-key { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin: 0 5px 0 12px; background: var(--graphite); }
.cal-key.confirmed { background: var(--ok); }
.cal-key.hold { background: var(--yellow); }
.cal-key.g { background: #8fa9d6; }
.cal-none { text-align: center; padding: 8px 0; }
@media (max-width: 760px) {
  /* a list of the days that have something, instead of a grid too narrow to read */
  .cal { grid-template-columns: 1fr; gap: 6px; }
  .cal-head, .cal-pad, .cal-day.free { display: none; }
  .cal-day { min-height: 0; position: relative; padding: 8px 8px 8px 72px; }
  .cal-num { position: absolute; left: 10px; top: 12px; }
  .cal-num small { display: inline; }
  .cal-item strong { white-space: normal; }
  .cal-key { margin-left: 8px; }
}
/* The narrowest phones: the name, "Website" and "Log out" stay on one line */
@media (max-width: 380px) { .top-brand { font-size: 16px; } .top-in { column-gap: 8px; } .top-end { gap: 6px; } .top-end .btn { padding: 0 8px; } }

/* A choice among a few, each with a line about what it means (Move the date, Cancel the booking) */
.choices { display: grid; gap: 10px; }
.choices .check { flex-wrap: wrap; row-gap: 2px; }
.choices .check input[type=radio] { width: 20px; height: 20px; margin: 0; accent-color: var(--ink); flex: none; }
.choices .check .meta { flex-basis: 100%; padding-left: 28px; font-weight: 400; }

/* Who a contract, an invoice or a gallery is for: named above its title, a link to their page (2026-10-17: "i feel
   like i have to look for the specific client sometimes, as opposed to the shoot") */
.who { justify-self: start; font-size: 17px; font-weight: 700; text-decoration: none; color: var(--graphite); }
.who:hover { color: var(--ink); text-decoration: underline; }
.rowlink strong .dim { color: var(--graphite); font-weight: 500; }
/* A list under small headings: Coming up, No date, Past … */
h2.grp { font-size: 15px; font-stretch: 110%; color: var(--graphite); margin: 22px 0 8px 4px; }
h2.grp:first-child { margin-top: 0; }
h2.grp small { font-weight: 600; font-stretch: 100%; margin-left: 4px; }

/* One job in four steps (jobLine in admin.js): contract, payment, shoot, gallery */
.jobline { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; counter-reset: js; }
.jobline a { position: relative; display: grid; gap: 2px; align-content: start; height: 100%; padding: 12px 14px 12px 46px; border-radius: 16px; background: #fff; text-decoration: none; border: 2px solid transparent; }
.jobline a:hover { border-color: var(--rule); }
.jobline .here a { border-color: var(--ink); }
.jobline a::before { counter-increment: js; content: counter(js); position: absolute; left: 12px; top: 12px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; background: var(--mist); color: var(--graphite); }
.jobline .js-k { font-weight: 800; font-size: 15px; }
.jobline .js-s { font-size: 14px; color: var(--graphite); overflow-wrap: anywhere; }
/* done: a tick drawn, not typed (no emoji on phones) */
.jobline .s-done a::before { content: ''; background: var(--ok); }
.jobline .s-done a::after { content: ''; position: absolute; left: 21px; top: 17px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.jobline .s-wait a::before { background: #e3ecfb; color: #1c4f9c; }
.jobline .s-now a::before { background: var(--yellow); color: var(--ink); }
.jobline .s-now .js-s { color: var(--ink); font-weight: 600; }
.jobline .s-off a { background: transparent; border-color: var(--rule); }
.jobline .s-off .js-k, .jobline .s-off .js-s { color: var(--graphite); }
@media (max-width: 760px) { .jobline { grid-template-columns: 1fr 1fr; } }
@media (max-width: 380px) { .jobline { grid-template-columns: 1fr; } }

/* Home: the shoots coming up, the day first */
.todo.soon a { gap: 14px; }
.todo.soon a > span.when { flex: none; min-width: 108px; white-space: nowrap; font-weight: 800; }
.todo.soon a > span.pill { flex: none; }
.todo.soon .when small { font-weight: 500; }
@media (max-width: 640px) { .todo.soon a { flex-wrap: wrap; } .todo.soon a > span.when { width: auto; flex-basis: 100%; } }
/* On a phone a row's status and amount go under its words, so the client's name and the shoot keep the width */
@media (max-width: 640px) {
  .rowlink .end { grid-column: 1 / -1; grid-row: auto; justify-content: flex-start; text-align: left; flex-wrap: wrap; }
  .rowlink .end::after { margin-left: auto; }
  .rowlink.with-img .end, .rowlink.with-face .end { grid-column: 2 / -1; }
  .rowlink .end:empty, .rowlink.with-face .end:empty { grid-column: -2; grid-row: 1 / span 2; }
}

/* Portfolio: the photos of the public site (admin.js, "Portfolio"). Nothing is cropped in a photo's box, except where
   the website itself crops (the home page's rows: 4:3 and 4:5), so he sees what visitors see. Fields are 16 px: an
   iPhone zooms the whole page into a smaller one. */
.pf-entries { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-bottom: 14px; }
.pf-entry { background: #fff; border-radius: 20px; padding: 14px; display: grid; gap: 6px; text-decoration: none; border: 2px solid transparent; }
.pf-entry:hover { border-color: var(--ink); }
.pf-entry strong { font-size: 17px; display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.pf-entry-imgs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-bottom: 4px; }
.pf-entry-imgs img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; background: var(--mist); display: block; }
.pf-find { margin: 0 0 6px; }
.pf-find input { width: 100%; font-size: 16px; padding: 12px 16px; border: 2px solid var(--rule); border-radius: 999px; background: #fff; }
.pf-hits { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px; margin-top: 10px; }
.pf-hit { display: flex; gap: 10px; align-items: center; background: #fff; border-radius: 12px; padding: 6px; text-decoration: none; }
.pf-hit:hover { outline: 2px solid var(--ink); }
.pf-hit img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; flex: none; background: var(--mist); }
.pf-hit span { font-size: 14px; line-height: 1.3; min-width: 0; overflow-wrap: anywhere; }
.pf-hit small { display: block; color: var(--graphite); }
.pf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; padding: 8px; margin: 0 -8px; border-radius: 16px; min-height: 64px; }
.pf-grid.pf-over { background: #fbf1cf; outline: 2px dashed var(--yellow); }
.pf-card, .pf-spot { position: relative; background: #fff; border: 2px solid var(--mist); border-radius: 14px; padding: 8px; display: grid; gap: 6px; align-content: start; min-width: 0; }
.pf-card[draggable="true"] { cursor: grab; }
.pf-card.cover { border-color: var(--ink); }
.pf-card.pf-over { box-shadow: -7px 0 0 -2px var(--yellow); }
.pf-card.pf-dragging { opacity: .35; }
.pf-card.pf-flash { animation: pfflash 2.4s ease-out 1; }
@keyframes pfflash { 0%, 40% { border-color: var(--yellow); box-shadow: 0 0 0 4px var(--yellow); } 100% { box-shadow: none; } }
.pf-img { position: relative; aspect-ratio: 1; background: var(--mist); border-radius: 8px; overflow: hidden; }
.pf-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pf-img.wide { aspect-ratio: 4 / 3; } .pf-img.wide img { object-fit: cover; }
.pf-img.tall { aspect-ratio: 4 / 5; } .pf-img.tall img { object-fit: cover; }
.pf-tag { position: absolute; left: 6px; bottom: 6px; background: var(--yellow); color: var(--ink); font-size: 12px; font-weight: 800; padding: 2px 8px; border-radius: 999px; pointer-events: none; }
.pf-tag.dark { background: var(--ink); color: #fff; left: auto; right: 6px; }
.pf-handle { position: absolute; left: 6px; top: 6px; width: 40px; height: 40px; border-radius: 12px; border: 0; background: rgba(255, 255, 255, .92); box-shadow: 0 1px 4px rgba(0, 0, 0, .25); cursor: grab; touch-action: none; display: grid; place-items: center; padding: 0; }
.pf-handle span { width: 14px; height: 20px; background: radial-gradient(circle, var(--ink) 2px, transparent 2.5px) 0 0 / 7px 7px; }
.pf-handle:active { cursor: grabbing; }
.pf-star { position: absolute; right: 6px; top: 6px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .92); box-shadow: 0 1px 4px rgba(0, 0, 0, .25); font-size: 19px; line-height: 1; cursor: pointer; color: #b9b9b5; padding: 0; }
.pf-star[aria-pressed="true"] { background: var(--yellow); color: var(--ink); }
.pf-card textarea, .pf-spot textarea { width: 100%; resize: none; overflow: hidden; font-size: 16px; line-height: 1.35; padding: 8px 10px; border: 2px solid var(--rule); border-radius: 10px; background: #fff; min-height: 64px; }
.pf-card textarea.short, .pf-spot textarea.short { border-color: var(--yellow); background: #fffbea; }
.pf-card textarea.pf-writing, .pf-spot textarea.pf-writing { background: linear-gradient(90deg, #fff, #f6f0dc, #fff) 0 0 / 200% 100%; animation: pfwrite 1.4s linear infinite; }
@keyframes pfwrite { to { background-position: -200% 0; } }
.pf-aiw { font-size: 13px; line-height: 1.3; color: var(--graphite); min-height: 0; }
.pf-aiw:empty { display: none; }
.pf-aiw.done { color: var(--ok); }
.pf-aiw.failed { color: var(--warn); }
.pf-used { font-size: 13px; line-height: 1.3; color: var(--graphite); }
.pf-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.pf-more { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 2px solid var(--rule); background: #fff; font-weight: 700; font-size: 15px; cursor: pointer; }
.pf-more:hover { border-color: var(--ink); }
.pf-more span { width: 16px; height: 4px; background: radial-gradient(circle, var(--ink) 2px, transparent 2.5px) 0 0 / 6px 4px; }
.pf-ghost { position: fixed; z-index: 50; width: 92px; height: 92px; object-fit: cover; border-radius: 12px; pointer-events: none; transform: translate(-50%, -110%); box-shadow: 0 8px 24px rgba(0, 0, 0, .3); border: 3px solid #fff; }
.pf-sec { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 14px; padding-top: 14px; border-top: 2px solid var(--mist); }
.pf-sec:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.pf-sec input { flex: 1 1 240px; min-width: 0; font-weight: 800; font-size: 17px; padding: 8px 12px; border: 2px solid var(--rule); border-radius: 12px; }
.pf-sec small { color: var(--graphite); font-weight: 600; }
.pf-empty { grid-column: 1 / -1; padding: 18px 8px; text-align: center; }
.pf-add { cursor: pointer; }
.pf-spots { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.pf-rowspots { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); margin-bottom: 6px; }
.pf-spot-l { font-weight: 800; font-size: 15px; }
.pf-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.pf-pickrow { display: flex; align-items: center; gap: 10px; background: var(--mist); border-radius: 999px; padding: 6px 8px 6px 6px; }
.pf-pickrow img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; background: #ddd; }
.pf-pickrow span { flex: 1; font-weight: 600; min-width: 0; }
.pf-bar { position: sticky; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 5; margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; background: var(--ink); color: #fff; border-radius: 999px; padding: 8px 10px 8px 22px; box-shadow: 0 6px 24px rgba(0, 0, 0, .18); }
.pf-bar > span { flex: 1 1 auto; }
.pf-bar .btn.line { color: #fff; border-color: #fff; }
.pf-bar .btn.line:hover { background: #fff; color: var(--ink); }
.pf-lock[inert] { opacity: .55; }
/* the "More" choices of a photo: a box in the middle on a computer, a sheet from the bottom on a phone */
dialog.pf-menu { border: 0; padding: 0; border-radius: 20px; width: min(400px, calc(100vw - 24px)); max-height: calc(100vh - 40px); background: #fff; box-shadow: 0 12px 40px rgba(0, 0, 0, .25); }
dialog.pf-menu::backdrop, dialog.pf-pickd::backdrop { background: rgba(36, 37, 36, .45); }
.pf-menu-in { display: grid; gap: 4px; padding: 12px; }
.pf-menu-h { display: flex; gap: 10px; align-items: center; padding: 4px 4px 10px; border-bottom: 2px solid var(--mist); margin-bottom: 4px; }
.pf-menu-h img { width: 52px; height: 52px; object-fit: cover; border-radius: 10px; flex: none; background: var(--mist); }
.pf-menu-h span { font-size: 14px; line-height: 1.3; color: var(--graphite); min-width: 0; overflow-wrap: anywhere; }
.pf-menu-b { text-align: left; min-height: 48px; padding: 0 14px; border: 0; border-radius: 12px; background: none; font-weight: 700; font-size: 16px; cursor: pointer; }
.pf-menu-b:hover, .pf-menu-b:focus-visible { background: var(--mist); }
.pf-menu-b.danger { color: var(--warn); }
.pf-menu-b.quiet { color: var(--graphite); text-align: center; }
.pf-menu-note { font-size: 14px; color: var(--graphite); padding: 8px 14px; line-height: 1.4; }
/* choosing a photo for one of the home page's places */
dialog.pf-pickd { border: 0; padding: 0; border-radius: 20px; width: min(900px, calc(100vw - 24px)); height: min(720px, calc(100vh - 40px)); background: #fff; }
.pf-pick { display: grid; grid-template-rows: auto auto 1fr; gap: 10px; height: 100%; padding: 16px; }
.pf-pick-top { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.pf-pick input { width: 100%; font-size: 16px; padding: 10px 14px; border: 2px solid var(--rule); border-radius: 999px; }
.pf-pick-grid { overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; align-content: start; padding: 2px; }
.pf-pk { border: 3px solid transparent; border-radius: 12px; background: var(--mist); padding: 0; cursor: pointer; text-align: left; overflow: hidden; display: grid; }
.pf-pk img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.pf-pk span { font-size: 12px; line-height: 1.25; padding: 4px 6px 6px; color: var(--graphite); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pf-pk.on { border-color: var(--ink); }
.pf-pk:hover { border-color: var(--yellow); }
ol.steps { margin: 8px 0 0; padding-left: 22px; display: grid; gap: 6px; }
/* numbered steps inside a line of Settings → Connections: ordinary numbered lines, not more check-list items */
.check-list ol.steps { list-style: decimal; }
.check-list ol.steps li { display: list-item; }
.check-list ol.steps li::before { content: none; }
@media (max-width: 640px) {
  .pf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pf-card, .pf-spot { padding: 6px; }
  .pf-spots, .pf-rowspots { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pf-bar { border-radius: 20px; padding: 10px 12px; }
  .pf-bar-say { display: none; }
  .pf-more { padding: 0 12px; }
  dialog.pf-menu { margin: auto 0 0; width: 100vw; max-width: 100vw; border-radius: 20px 20px 0 0; padding-bottom: env(safe-area-inset-bottom); }
  dialog.pf-pickd { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .pf-pick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 340px) { .pf-grid, .pf-spots, .pf-rowspots { grid-template-columns: minmax(0, 1fr); } }