/* "Day and night" (Batch 4). Not a copy of Attio, but its feel: a quiet, flat workspace where structure does the work.
   - one white page, flush beside a pale sidebar, split by a single hairline (no floating cards, no shadows)
   - a slim top bar on each page: where you are on the left, help and actions on the right
   - tabs underlined, toolbars of small outline buttons, lists as real tables (hairline rows and column lines, grey headers)
   - boards as pale lanes of white bordered cards; side panels in sections split by hairlines, small grey labels above fields
   - small, even type (Inter); colour only where it means something; one dark "night" block (the Home hero) with a horizon glow
   Scoped to html.look-day (light mode only, see index.html). It is the default; ?look=old shows the previous look on that device. */
html.look-day{
  --page:#fff;--bg:#fff;--panel:#f7f7f8;--soft:#f1f1f3;--line:#ececee;--line-2:#e0e0e4;--muted:#6f737b;--faint:#9a9ea6;--ink:#17181b;
  --side:#fafafb;--hover:#f3f3f5;--sel:#ececef;--day-blue:#2f5bff;--day-blue-bg:#eef2ff;
  --night:#0e0f12;--night-line:rgba(255,255,255,.08);--night-muted:#9aa0aa;--radius:8px;--radius-card:10px}
html.look-day body{background:#fff;font-family:Inter,"Instrument Sans",system-ui,sans-serif;font-size:14px;letter-spacing:-.006em}
html.look-day :is(h1,h2,h3,h4,.h1,.logo,.pb b){font-family:Inter,"Instrument Sans",system-ui,sans-serif;letter-spacing:-.018em}

/* ---------- frame: sidebar and page ---------- */
html.look-day .app>aside{background:var(--side);border-inline-end:1px solid var(--line);padding:12px 10px}
html.look-day main{margin:0;border:0;border-radius:0;box-shadow:none;min-height:calc(100vh / var(--z, 1));padding:0 32px 56px;background:#fff}
html.look-day .logo{padding:2px 8px 14px;font-size:15px}
html.look-day .nav a{min-height:32px;padding:6px 10px;margin:1px 0;border-radius:7px;font-size:14px;font-weight:500;color:#3d4047;border:0;box-shadow:none}
html.look-day .nav a .ni{width:16px;height:16px;color:#7b7f87;stroke:currentColor}
html.look-day .nav a:hover{background:var(--hover);color:var(--ink)}
html.look-day .nav a.on,html.look-day .nav a.on:hover{background:var(--sel);color:var(--ink);font-weight:600;box-shadow:none;border:0;margin:1px 0;padding:6px 10px}
html.look-day .nav a.on::before,html.look-day .nav a.on::after{content:none!important}
html.look-day .nav a.on .ni{color:var(--ink)}
html.look-day .nav a span{background:none;color:var(--faint);font-size:12px}
html.look-day .nav-more{min-height:30px;font-size:12.5px;font-weight:500;color:var(--faint);padding:10px 10px 4px}
html.look-day .nav-in{border:0!important;padding-inline-start:0!important;margin-inline-start:0!important}
html.look-day .theme{color:#3d4047;font-size:14px}
html.look-day .side-k{background:#fff;color:var(--ink);border:1px solid var(--line-2);box-shadow:none}
html.look-day .side-k small{color:var(--muted)}

/* ---------- each board's top bar: where you are, then the title's actions ---------- */
html.look-day .bk-h{position:sticky;top:0;z-index:6;display:flex;flex-wrap:nowrap;align-items:center;gap:8px;min-height:52px;margin:0 -32px 0;padding:8px 32px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
html.look-day .bk-eye{flex-basis:auto;margin:0;font-size:14px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--muted)}
html.look-day .bk-eye span{background:none;padding:0;color:inherit;font-size:inherit;font-weight:inherit}
html.look-day .bk-eye::after{content:"/";margin-inline-start:8px;color:var(--line-2)}
html.look-day .bk-h .h1{font-size:14px;font-weight:600;letter-spacing:0;margin:0}
html.look-day .bk-how{width:22px;height:22px;font-size:12px;border:1px solid var(--line-2);background:#fff;color:var(--muted)}
html.look-day .bk-new{margin-inline-start:auto}

/* ---------- buttons and fields ---------- */
html.look-day .btn-s{min-height:32px;padding:5px 12px;font-size:13.5px;font-weight:500;background:#fff;border:1px solid var(--line-2);border-radius:8px;box-shadow:0 1px 1px rgba(16,18,24,.03);color:var(--ink)}
html.look-day .btn-s:hover{background:var(--hover)}
html.look-day .btn-s.pri{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:none}
html.look-day .btn-s.pri:hover{background:#2c2d31}
html.look-day .find{background:#fff!important;box-shadow:inset 0 0 0 1px var(--line-2)!important;border-radius:8px;font-size:13.5px}
html.look-day .find:focus{box-shadow:inset 0 0 0 1px var(--day-blue),0 0 0 3px var(--day-blue-bg)!important;outline:0}
html.look-day .wk-r1 .find,html.look-day td .find{box-shadow:none!important;background:transparent!important}
html.look-day .wk-r1 .find:hover,html.look-day td .find:hover{background:var(--hover)!important}

/* ---------- tabs: one underlined row ---------- */
html.look-day .bk-spaces{gap:4px;margin:14px 0 0;border-bottom:1px solid var(--line)}
html.look-day .bk-sp{background:none!important;border:0;border-radius:0;padding:8px 10px 10px;margin-bottom:-1px;font-size:14px;font-weight:500;color:var(--muted);box-shadow:none;border-bottom:2px solid transparent}
html.look-day .bk-sp:hover{color:var(--ink)}
html.look-day .bk-sp.on{color:var(--ink);border-bottom-color:var(--ink);background:none}
html.look-day .bk-sp :is(b,span,strong){text-decoration:none!important;border:0!important}
html.look-day .card.bk-space{background:none!important;border:0!important;border-radius:0;box-shadow:none;padding:0;margin-top:0}
html.look-day .wk-sbar.bk-tabs{background:none;padding:0;gap:2px;border-radius:0}
html.look-day .wk-sbar.bk-tabs button{border-radius:7px;padding:5px 10px;color:var(--muted);font-weight:500}
html.look-day .wk-sbar.bk-tabs button.on{background:var(--sel);color:var(--ink);box-shadow:none}
html.look-day .wk-sbar:not(.bk-tabs){background:var(--soft);border-radius:8px;padding:2px}
html.look-day .wk-sbar:not(.bk-tabs) button.on{background:#fff;box-shadow:0 0 0 1px var(--line-2)}

/* ---------- toolbar: a row of small controls under the tabs ---------- */
html.look-day .bk-bar{background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;margin:0 0 4px;padding:10px 0;box-shadow:none}
html.look-day .bk-bar :is(.btn-s,.find,select){min-height:30px;height:30px}
html.look-day .bk-q{width:220px}

/* ---------- groups: a plain heading row, not a card ---------- */
html.look-day .bk-g,html.look-day .wk-gh{background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:14px 0 8px!important;margin:6px 0 0!important}
html.look-day .bk-g>button{font-size:14px}
html.look-day .bk-g>button b{font-weight:600}
html.look-day .bk-g>button i{width:8px;height:8px;border-radius:50%}
html.look-day .bk-g>button em{background:var(--soft);color:var(--muted);border-radius:6px;padding:0 6px;font-style:normal;font-size:12px;font-weight:500}

/* ---------- lists: real tables ---------- */
html.look-day [data-list]{border-top:1px solid var(--line)}
html.look-day .wk-r1{border-radius:0!important;box-shadow:none!important;background:#fff}
html.look-day .wk-r1.head,html.look-day [data-list] .head{background:#fff;color:var(--muted);font-size:12.5px;font-weight:500;letter-spacing:0;text-transform:none;min-height:36px;border-bottom:1px solid var(--line)}
html.look-day .wk-r1:not(.head){min-height:44px;border-bottom:1px solid var(--line);font-size:13.5px}
html.look-day .wk-r1>*{border-inline-end:1px solid var(--line)}
html.look-day .wk-r1>*:last-child{border-inline-end:0}
html.look-day .wk-r1:not(.head):hover{background:#fafafb}
html.look-day table.ut,html.look-day [data-list]:is(table){border-collapse:collapse}
html.look-day [data-list] :is(th,td){border:0;border-bottom:1px solid var(--line);border-inline-end:1px solid var(--line);font-size:13.5px}
html.look-day [data-list] th{color:var(--muted);font-weight:500;font-size:12.5px;text-transform:none;letter-spacing:0;background:#fff}
html.look-day .lt-tot{border-top:0;padding:10px 12px;color:var(--faint)}

/* ---------- boards: pale lanes of white cards ---------- */
html.look-day .mw-board{gap:10px}
html.look-day .mw-col{background:var(--panel);border-radius:10px;padding:10px;gap:8px}
html.look-day :is(.mw-card,.sl-card){background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 1px 1px rgba(16,18,24,.03);padding:12px 14px}
html.look-day :is(.mw-card,.sl-card):hover{border-color:var(--line-2)}

/* ---------- cards and panels elsewhere ---------- */
html.look-day .card{background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:none}
html.look-day .sp{border:1px solid var(--line);border-radius:12px;box-shadow:0 20px 50px rgba(16,18,24,.12)}
html.look-day .sp-h{padding:14px 18px;border-bottom:1px solid var(--line)}
html.look-day .sp-b{padding:0 18px 24px;gap:0}
html.look-day .sp-b>*{padding:16px 0;border-bottom:1px solid var(--line)}
html.look-day .sp-b>*:last-child{border-bottom:0}
html.look-day .sp-b label>span,html.look-day .sp-b h3{font-size:12.5px;color:var(--muted);font-weight:500}
html.look-day .wk-pop{border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 32px rgba(16,18,24,.12)}
html.look-day :is(.bk-chip,.wk-tag){font-weight:500}

/* ---------- Home: one dark hero ("night"), then quiet rows ---------- */
html.look-day #p-home{padding-top:24px}
html.look-day .bf-hero{background:var(--night);color:#fff;border-radius:14px;box-shadow:inset 0 0 0 1px var(--night-line)}
html.look-day .bf-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% 135%,transparent 58%,rgba(255,138,61,.5) 61%,rgba(255,214,102,.42) 62.5%,rgba(255,255,255,.5) 63.5%,rgba(64,224,208,.42) 64.8%,rgba(59,91,253,.5) 66.5%,transparent 70%),
    radial-gradient(80% 60% at 50% 120%,rgba(59,91,253,.25),transparent 70%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0 1px,transparent 1px 10px)}
html.look-day .bf-hero :is(h1,h2,.bf-big){letter-spacing:-.035em}
html.look-day :is(.bf-notes,.rt-home,.gs){background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:none}
html.look-day :is(.bf-tiles,.bf-stats){gap:0!important;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
html.look-day :is(.bf-tiles,.bf-stats)>*{background:#fff!important;border-radius:0!important;box-shadow:none!important;border-inline-end:1px solid var(--line)}
html.look-day :is(.bf-tiles,.bf-stats)>*:last-child{border-inline-end:0}
html.look-day .bf-askc{background:#fff;border:1px solid var(--line-2);color:var(--ink);border-radius:8px;font-size:13px}
html.look-day .bf-three>*{background:#fff!important;border:1px solid var(--line);border-radius:10px;box-shadow:none}

/* ---------- second pass: the frame flush, titles small, every list one table, lanes visible ---------- */
html.look-day{--sheet:#fff}
html.look-day .app{background:#fff}
@media(min-width:861px){
  html.look-day .app>aside{margin:0!important;border-radius:0!important;top:0!important;height:calc(100vh / var(--z, 1))!important;background:var(--side)!important;border-inline-end:1px solid var(--line);padding:14px 10px!important}
  html.look-day main{margin:0!important;border-radius:0!important;border:0!important;min-height:calc(100vh / var(--z, 1))!important}
}
html.look-day .bk-h .h1,html.look-day .bk-h h1{font-size:15px!important;font-weight:600!important;letter-spacing:-.01em!important;line-height:1.3!important}
html.look-day .bk-h{min-height:52px}
/* the Clients list: the same table as the others, not rows of grey cards */
html.look-day .ct-table{background:#fff!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:0!important}
html.look-day .ct-tr{background:#fff!important;border-radius:0!important;box-shadow:none!important;margin:0!important;min-height:44px;border-bottom:1px solid var(--line)}
html.look-day .ct-tr>*{border-inline-end:1px solid var(--line)}
html.look-day .ct-tr>*:last-child{border-inline-end:0}
html.look-day .ct-tr:not(.ct-head2):hover{background:#fafafb!important}
html.look-day .ct-head2,html.look-day .ct-head2 *{text-transform:none!important;letter-spacing:0!important;font-size:12.5px!important;font-weight:500!important;color:var(--muted)!important}
html.look-day .ct-head2{min-height:36px;align-items:center}
html.look-day .ct-name{font-weight:600}
/* boards: lanes a visible pale grey */
html.look-day .mw-col{background:#f4f4f6!important}
/* fields inside a list row read as text until pointed at; the quick-add row is a plain row */
html.look-day [data-list] .find:not(:focus){box-shadow:none!important;background:transparent!important}
html.look-day [data-list] .find:hover{background:var(--hover)!important}
html.look-day [data-list] :is(.bk-add,.sh-add,.wk-add,[class*="-quick"]){background:#fff!important;border-radius:0!important;box-shadow:none!important;color:var(--muted)}
html.look-day .side-k .buddy{--mark:var(--ink);--eye:#fff}
html.look-day .side-k .side-k-b{background:none}
html.look-day [data-list]{border-radius:0!important;box-shadow:none!important}
html.look-day .bk-quick,html.look-day .wk-quick{background:#fff!important;border-radius:0!important;box-shadow:none!important;border-bottom:1px solid var(--line)}html.look-day .bk-quick:hover,html.look-day .wk-quick:focus-within{background:#fafafb!important}
/* fields: white with a hairline (the Hub's fields are filled grey); inside a list row they read as plain text until pointed at */
html.look-day{--field:#fff;--field-hi:#f6f6f8}
html.look-day body :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=hidden]):not([type=submit]):not([type=button]),select,textarea):not(.wk-title):not(.bare):not(.ask-in input){box-shadow:inset 0 0 0 1px var(--line-2)}
html.look-day body :is([data-list],.wk-r1,.ct-tr) :is(input:not([type=checkbox]),select):not(:focus):not(:hover){background-color:transparent!important;box-shadow:none!important}
html.look-day body :is([data-list],.wk-r1,.ct-tr) :is(input:not([type=checkbox]),select):hover{background-color:var(--hover)!important;box-shadow:none!important}
html.look-day body :is(input,textarea):focus{box-shadow:inset 0 0 0 1px var(--day-blue),0 0 0 3px var(--day-blue-bg)!important}

/* ---------- third pass: item pages, Chat, Admin titles, phones ---------- */
/* tinted blocks become white; the Hub's soft washes become a flat pale grey */
html.look-day{--tint-blue:#fff;--tint-green:#fff;--tint-amber:#fff;--tint-rose:#fff;--tint-violet:#fff;--soft-aurora:var(--panel)}
/* a client's (or a month's) header: flat on the page, not a purple banner */
html.look-day .ct-hd,html.look-day .hero{background:#fff!important;color:var(--ink)!important;border-radius:0!important;padding:14px 0 12px!important;margin:0 0 4px!important;box-shadow:none!important;border-bottom:1px solid var(--line)}
html.look-day .ct-hd :is(a,small,.ct-crumb,.ct-crumb *){color:var(--muted)}
html.look-day .ct-hd :is(h1,.mh-name){color:var(--ink)!important;font-size:22px!important;font-weight:600!important;letter-spacing:-.02em}
html.look-day .ct-hd :is(button,.am-pills,.am-pills>*,[class*="pill"]):not(.ct-st){color:var(--ink)!important;border-color:var(--line-2)!important;background:#fff!important}
html.look-day .ct-hd .cav{box-shadow:0 0 0 1px var(--line-2)}
html.look-day .ct-tabs{border-bottom:1px solid var(--line)}
/* the cards on a client's Overview: white with a hairline; their inner boxes white with a hairline */
html.look-day .ov-card{border:1px solid var(--line)!important;border-radius:10px;padding:16px 18px!important}
html.look-day .ov-card h3{font-size:15px;font-weight:600}
html.look-day .pf-stats>div{background:#fff;border:1px solid var(--line)}
/* pages that are not boards (Admin, Me, Team, Reports…): a page title, not a poster */
html.look-day main .page>h1,html.look-day main #admTitle,html.look-day main .page>.h1{font-size:24px!important;font-weight:600!important;letter-spacing:-.025em!important}
/* the month editor: the posts sit on the page, not in a grey tray */
html.look-day .ed-panel{background:#fff!important;border:0!important;box-shadow:none!important;padding:0!important}
html.look-day .ed-panel .card,html.look-day .ed-card{background:#fff!important}
html.look-day select.find{line-height:1.2}
/* Chat: a list beside the conversation, split by a hairline, one bordered frame */
html.look-day .cx{gap:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:16px}
html.look-day .cx-list{background:var(--side)!important;border-radius:0!important;border-inline-end:1px solid var(--line)}
html.look-day .cx-main{background:#fff!important;border-radius:0!important}
html.look-day .cx-row.on{background:var(--sel)}
/* the Vault stays the one dark room (night) */
/* phones: no top bar (the phone has its own header), rows as white cards with a hairline */
@media(max-width:860px){
  html.look-day .bk-h{position:static;display:none;margin:0;padding:0;border:0;min-height:0;background:none;backdrop-filter:none}
  html.look-day :is(#p-rp,#p-tm) .bk-h{display:flex}
  html.look-day main{padding:0 16px 120px}
  html.look-day .wk-r1:not(.head){background:#fff!important;border:1px solid var(--line)!important;border-radius:12px!important;box-shadow:none!important}
  html.look-day .wk-r1>*{border-inline-end:0}
  html.look-day .bk-spaces{margin-top:4px}
  html.look-day .cx{border:0;border-radius:0;margin-top:0}
}
html.look-day .pf-stats>div{background:#fff!important;background-image:none!important;border:1px solid var(--line)!important}
html.look-day .cs{background:#fff!important;border:1px solid var(--line);border-radius:10px}
html.look-day select.find{padding-top:0!important;padding-bottom:0!important}
@media(max-width:860px){html.look-day .jc-list>*{background:#fff!important;border:1px solid var(--line)!important;box-shadow:none!important;border-radius:12px!important}}
/* forms and profile sections: white with a hairline, not grey trays */
html.look-day :is(.pf-sec,.pf2 .pf-sec,.pf-head,.pf-hero){background:#fff!important;border:1px solid var(--line)!important;box-shadow:none!important;border-radius:10px!important}
html.look-day .ed-f>label,html.look-day .pf-sec label>span{color:var(--muted);font-size:12.5px;font-weight:500}
html.look-day .pc{background:#fff!important;border:1px solid var(--line)!important;box-shadow:none!important;border-radius:10px!important}html.look-day .pc-av{width:56px!important;height:56px!important;font-size:22px!important}

/* the phone's floating Quick find: the pill is the field, so the input inside draws nothing of its own */
html.look-day .fl-q input { background: transparent !important; border: 0 !important; box-shadow: none !important; outline: 0; }

/* item pages (a shoot, a branding project): their header is flat now, so its words go dark too */
html.look-day .hero :is(.ct-crumb,.ct-crumb a,.br-cl,.br-status,.br-status small){color:var(--muted)!important}
html.look-day .hero :is(.ct-crumb span,h1,.wk-title,.br-status b){color:var(--ink)!important}
html.look-day .hero .wk-title{font-size:22px;font-weight:600;letter-spacing:-.02em}
html.look-day .hero .wk-title::placeholder{color:var(--muted)}
html.look-day .hero .wk-title:is(:hover,:focus){background:var(--panel)!important}
html.look-day .hero .br-dl{--field:#fff;--field-hi:var(--panel)}
html.look-day .hero .br-dl input.br-date,html.look-day .hero .br-dl input.br-date::-webkit-datetime-edit{color:var(--ink)!important;-webkit-text-fill-color:var(--ink)!important;color-scheme:light}
html.look-day body .hero .br-dl input.br-date{background:#fff!important;box-shadow:inset 0 0 0 1px var(--line-2)}
html.look-day body .hero .br-dl input.br-date.late{background:#fdecec!important;color:#b42318!important;-webkit-text-fill-color:#b42318!important}
html.look-day .hero .br-dl .btn-s{background:#fff!important;color:var(--ink)!important;box-shadow:inset 0 0 0 1px var(--line-2)}
/* boxes that are the whole field themselves (Quick actions, the vault's terminal): no focus ring of their own */
html.look-day body .qk-q input:focus,html.look-day body .vt-term .vt-p input:focus{box-shadow:none!important;outline:0}