/* 1618 Library: the founders' Clients page (clients.js) and small client-view additions to the catalogue.
   Every rule is scoped to #cl-app (the Clients page, a full-screen layer over the catalogue) or html.cat-is-client
   (a client login's catalogue), so copyparty's pages and the catalogue itself are untouched.
   Brand as catalog.css: paper #F6EDD8, ink #2E2012, accent #A6402D, sanguine #8E3924, muted #6B5940, EB Garamond.
   Phone first; nothing wider than the screen; 14px is the smallest text. */

html.cl-open, html.cl-open body { overflow: hidden !important; }

#cl-app {
  --paper: #F6EDD8; --paper-2: #FBF6EC; --panel: #EFE3C8; --line: #D9CDAE; --ink: #2E2012; --accent: #A6402D;
  --sanguine: #8E3924; --muted: #6B5940; --red: #A12A1C; --serif: 'EB Garamond', 'Iowan Old Style', Palatino, Georgia, serif;
  position: fixed; inset: 0; z-index: 2147483000; overflow-y: auto; overflow-x: hidden; background: var(--paper);
  font: 400 18px/1.45 var(--serif); color: var(--ink); -webkit-text-size-adjust: 100%;
}
#cl-app * { box-sizing: border-box; font-family: var(--serif); }
#cl-app button, #cl-app input, #cl-app textarea { font: inherit; color: inherit; }
#cl-app :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* shields against files.css rules for the home panel (#ht_spl li, li a, h1, h2 ... with !important) */
#cl-app li { margin: 0 !important; border-top: 0; border-bottom: 0; list-style: none; }
#cl-app ul, #cl-app dl { list-style: none; margin: 0; padding: 0; }
#cl-app h1 { font: 500 36px/1.1 var(--serif) !important; margin: 0 0 8px !important; color: var(--ink) !important; }
#cl-app h2 { font: 500 22px/1.2 var(--serif) !important; margin: 0 !important; color: var(--ink) !important; text-transform: none !important; letter-spacing: 0 !important; }
#cl-app a { background: none !important; color: var(--ink); }

#cl-app .cl-main { padding: 22px 16px 60px; max-width: 980px; margin: 0 auto; }
#cl-app .cl-lead { color: var(--muted); font-size: 17px; margin: 0 0 18px; max-width: 60ch; }

#cl-app .cl-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 16px;
  border: 1px solid var(--ink); background: var(--paper); color: var(--ink); border-radius: 2px; cursor: pointer;
  font-size: 17px; white-space: normal; text-align: center;
}
#cl-app .cl-btn:hover { background: var(--panel); }
#cl-app .cl-btn-main { background: var(--accent); border-color: var(--accent); color: #F6EDD8; font-weight: 500; }
#cl-app .cl-btn-main:hover { background: var(--sanguine); border-color: var(--sanguine); }
#cl-app .cl-btn[disabled] { opacity: .55; cursor: default; }
#cl-app .cl-linkbtn {
  background: none; border: 0; padding: 8px 4px; cursor: pointer; color: var(--ink); text-decoration: underline;
  text-decoration-color: var(--line); text-underline-offset: 3px; font-size: 17px; min-height: 40px;
}
#cl-app .cl-linkbtn:hover { color: var(--accent); }

#cl-app .cl-msg { min-height: 1.4em; margin: 12px 0; color: var(--red); font-size: 17px; }
#cl-app .cl-okt { color: #2F5B2A !important; }
#cl-app .cl-red { color: var(--red); }
#cl-app .cl-hint { color: var(--muted); font-size: 15px; margin: 2px 0 8px; }
#cl-app .cl-empty { color: var(--muted); padding: 18px 0; }

/* client cards */
#cl-app .cl-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 8px; }
@media (min-width: 760px) { #cl-app .cl-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
#cl-app .cl-card { border: 1px solid var(--line); background: var(--paper-2); border-radius: 3px; padding: 14px 14px 10px; min-width: 0; }
#cl-app .cl-off { opacity: .78; }
#cl-app .cl-chead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
#cl-app .cl-name { overflow-wrap: anywhere; min-width: 0; }
#cl-app .cl-chip { flex: none; font-size: 15px; padding: 2px 8px; border-radius: 2px; border: 1px solid currentColor; }
#cl-app .cl-ok { color: #2F5B2A; }
#cl-app .cl-no { color: var(--red); }
#cl-app .cl-facts { margin: 4px 0; font-size: 16px; overflow-wrap: anywhere; }
#cl-app .cl-flabel { display: block; font: 500 14px/1.3 var(--serif); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 10px 0 4px; }
#cl-app .cl-blist li { font-size: 16px; padding: 2px 0; overflow-wrap: anywhere; }
#cl-app .cl-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* the form (a layer over the page; full screen on a phone) */
html.cl-modal #cl-app { overflow: hidden; }
#cl-app .cl-panel {
  position: fixed; inset: 0; z-index: 2; background: rgba(46, 32, 18, .35); display: flex; justify-content: center;
  align-items: flex-start; overflow-y: auto; overflow-x: hidden;
}
#cl-app .cl-form {
  background: var(--paper); width: 100%; max-width: 720px; min-height: 100%; padding: 16px 16px 40px;
  border: 0; overflow-wrap: anywhere;
}
@media (min-width: 760px) { #cl-app .cl-panel { padding: 32px 16px; } #cl-app .cl-form { min-height: 0; border: 1px solid var(--line); padding: 22px 26px 30px; } }
#cl-app .cl-phead { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; }
#cl-app .cl-field { margin: 0 0 16px; }
#cl-app .cl-input {
  display: block; width: 100%; max-width: 100%; min-height: 46px; padding: 8px 10px; border: 1px solid var(--muted);
  background: #FFFDF8 !important; color: var(--ink) !important; border-radius: 2px; font-size: 18px;
}
#cl-app .cl-input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 1px var(--accent); }
#cl-app .cl-input[readonly] { background: var(--panel) !important; }
#cl-app textarea.cl-input { resize: vertical; line-height: 1.4; }
#cl-app .cl-check { display: flex; align-items: flex-start; gap: 10px; margin: 6px 0 16px; }
#cl-app .cl-check input, #cl-app .cl-bitem input { width: 22px; height: 22px; margin: 3px 0 0; flex: none; accent-color: var(--accent); }
#cl-app .cl-check label { cursor: pointer; }
#cl-app .cl-batches { border: 0; border-top: 1px solid var(--line); margin: 6px 0 0; padding: 12px 0 0; min-width: 0; }
#cl-app .cl-bpick { margin: 4px 0 10px; }
#cl-app .cl-bitem { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px dotted var(--line) !important; }
#cl-app .cl-bitem label { display: flex; flex-direction: column; min-width: 0; cursor: pointer; }
#cl-app .cl-uncleared label { color: var(--muted); }
#cl-app .cl-bitem input:disabled + label { cursor: default; }
#cl-app .cl-btitle { font-size: 18px; color: var(--ink); }
#cl-app .cl-bmeta, #cl-app .cl-bstatus { font-size: 15px; }
#cl-app .cl-override label { color: var(--red); font-weight: 500; }
#cl-app .cl-warning { color: #FFF8EE; background: var(--red); padding: 10px 12px; border-radius: 2px; font-size: 16px; margin: 6px 0 12px; }
#cl-app .cl-warning[hidden] { display: none; }
#cl-app .cl-pacts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
#cl-app .cl-cred { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; margin: 10px 0 6px; align-items: baseline; }
#cl-app .cl-cred dt { color: var(--muted); font-size: 16px; }
#cl-app .cl-cred dd { margin: 0; overflow-wrap: anywhere; }
#cl-app .cl-mono { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace !important; font-size: 18px; }
#cl-app .cl-pw { font-size: 21px; letter-spacing: .04em; background: var(--panel); padding: 4px 8px; border-radius: 2px; }
#cl-app .cl-message { font-size: 16px; }

/* a client's own catalogue: the small note under the totals and prices on the cards */
/* catalog.css gives .cat-btn display:inline-flex, which beats the hidden attribute: a hidden "Add files" must stay
   hidden (it is hidden for every account without upload rights, e.g. a client) */
#cat-app [hidden], #cat-overlay [hidden], #cl-app [hidden] { display: none !important; }
html.cat-is-client #cat-app .cat-client-note { flex-basis: 100%; }
html.cat-is-client #cat-app .cat-price { font-weight: 500; }

/* --- UI pass (feat/catalogue-ui): the same header, rules and badges as the catalogue; the form as a side panel --- */
#cl-app { --line: #DDD0B1; --line-2: #C7B78F; --warn-bg: #F5E3D9; --warn-line: #D6A595; --ease: cubic-bezier(.16, 1, .3, 1); font-variant-numeric: lining-nums; }
#cl-app p { line-height: 1.45 !important; }
#cl-app .cl-out .cl-linkbtn { font-size: 16px; color: var(--muted); text-decoration: none; min-height: 44px; }
#cl-app .cl-main { max-width: 1440px; padding: 28px 16px 72px; }
#cl-app .cl-intro { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; padding-bottom: 24px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
#cl-app .cl-intro-h { flex: 1 1 320px; min-width: 0; }
#cl-app .cl-intro h1 { margin: 0 0 10px !important; letter-spacing: -.01em; }
#cl-app .cl-lead { margin: 0; font-size: 18px; }
#cl-app .cl-intro .cl-btn-main { box-shadow: none !important; }
#cl-app .cl-msg:empty { display: none; }
#cl-app .cl-list { gap: 20px; margin-top: 24px; }
@media (min-width: 1100px) { #cl-app .cl-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
#cl-app .cl-card { background: transparent; border: 1px solid var(--line-2); padding: 18px 18px 14px; display: flex; flex-direction: column; }
#cl-app .cl-card h2 { font-size: 23px !important; }
#cl-app .cl-chip { font-size: 14px; line-height: 1.4; padding: 1px 8px 2px; border: 1px solid var(--line-2); border-radius: 2px; color: var(--muted); }
#cl-app .cl-chip.cl-ok { color: var(--ink); border-color: #B3A07A; }
#cl-app .cl-chip.cl-no { color: var(--sanguine); border-color: var(--warn-line); background: var(--warn-bg); }
#cl-app .cl-flabel { font: 500 16px/1.3 var(--serif) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--ink) !important; margin: 14px 0 4px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
#cl-app .cl-facts { color: var(--muted); }
#cl-app .cl-facts:first-of-type { color: var(--ink); }
#cl-app .cl-blist { margin-bottom: 4px; }
#cl-app .cl-acts { margin-top: auto; padding-top: 14px; }
#cl-app .cl-btn { background: transparent; }
#cl-app .cl-btn-main { background: var(--accent); }
#cl-app .cl-okt { color: var(--ink) !important; }
#cl-app .cl-red { color: var(--sanguine); }
#cl-app :focus-visible { outline-offset: 3px; }
/* the New client / Edit form slides in from the right, like the catalogue's panel */
#cl-app .cl-panel { justify-content: flex-end; align-items: stretch; padding: 0 !important; background: rgba(46, 32, 18, .36); overflow: hidden; }
#cl-app .cl-form { max-width: 600px; min-height: 0; height: 100%; overflow-y: auto; overscroll-behavior: contain; border: 0; border-left: 1px solid var(--line); padding: 0 16px 32px; box-shadow: -16px 0 40px rgba(46, 32, 18, .14); animation: cl-in .38s var(--ease); }
#cl-app .cl-phead { position: sticky; top: 0; z-index: 1; background: var(--paper); padding: 18px 0 12px; margin: 0 0 18px; border-bottom: 1px solid var(--line); }
#cl-app .cl-phead h2 { font-size: 26px !important; }
#cl-app .cl-flabel + .cl-input, #cl-app .cl-field .cl-flabel { border-bottom: 0; padding-bottom: 0; }
#cl-app .cl-input { background: var(--paper-2) !important; border-color: #8F7E62; }
@keyframes cl-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #cl-app * { animation: none !important; transition: none !important; } }
@media (min-width: 600px) {
  #cl-app .cl-main { padding: 40px 24px 72px; }
  #cl-app .cl-intro h1 { font-size: 46px !important; }
  #cl-app .cl-form { padding: 0 32px 40px; }
  #cl-app .cl-phead { padding-top: 22px; }
}
@media (min-width: 760px) { #cl-app .cl-panel { padding: 0 !important; } #cl-app .cl-form { border: 0; border-left: 1px solid var(--line); padding: 0 32px 40px; } }
#cl-app .cl-card .cl-flabel { border-bottom: 0 !important; padding-bottom: 0; }
#cl-app .cl-input { height: auto !important; min-height: 46px !important; margin: 0 !important; }
#cl-app .cl-input:focus-visible { outline: none; }
html #cl-app [tabindex="-1"]:focus-visible { outline: none !important; box-shadow: none !important; }

/* UX review (feat/ux-review-fixes): fields never look switched off (brand/files.css styles input[type=text] with !important),
   one height for every field, a fixed Create client bar, two-line batch rows */
#cl-app input.cl-input, #cl-app select.cl-input, #cl-app textarea.cl-input {
  border: 1px solid #8F7E62 !important; background: #FBF6EC !important; color: #2E2012 !important; opacity: 1 !important;
  font-family: 'EB Garamond', 'Iowan Old Style', Palatino, Georgia, serif !important; font-size: 17px !important; border-radius: 2px !important;
}
#cl-app input.cl-input { height: 46px !important; min-height: 46px !important; padding: 8px 12px !important; box-sizing: border-box !important; line-height: 1.3 !important; }
#cl-app input.cl-input[readonly] { background: #EFE3C8 !important; }
#cl-app input.cl-input:focus, #cl-app textarea.cl-input:focus { border-color: #A6402D !important; box-shadow: 0 0 0 1px #A6402D !important; }
#cl-app .cl-form { display: flex; flex-direction: column; }
#cl-app .cl-pfoot { position: sticky; bottom: 0; z-index: 2; margin: 24px -16px 0; padding: 12px 16px 14px; background: #F6EDD8; border-top: 1px solid #DDD0B1; margin-top: auto; }
@media (min-width: 600px) { #cl-app .cl-pfoot { margin-left: -32px; margin-right: -32px; padding: 14px 32px 16px; } }
#cl-app .cl-pfoot .cl-msg:empty { display: none; }
#cl-app .cl-pfoot .cl-pacts { margin: 0; }
#cl-app .cl-batches { margin-bottom: 8px; }
#cl-app .cl-bpick .cl-bitem { padding: 6px 0 !important; }
#cl-app .cl-bpick label { line-height: 1.3; }
#cl-app .cl-override { margin: 4px 0 10px; }