/* The owner's desk. Same palette as the public site; phone first. */
:root{color-scheme:dark;--bg:#141615;--panel:#1b1e1d;--line:#2e3230;--text:#e8e6e1;--muted:#a6aaa6;--accent:#9fd3c3;--bad:#f2b8b8;--warn:#e9cf9b}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:17px/1.5 -apple-system,"Segoe UI",Helvetica,Arial,sans-serif}
main{max-width:44em;margin:0 auto;padding:1em 1em calc(5em + env(safe-area-inset-bottom))}
a{color:var(--accent)}
h1{font-size:1.6em;line-height:1.2;margin:.3em 0 .4em;overflow-wrap:anywhere}
h2{font-size:1.1em;margin:1.8em 0 .5em;padding-top:1em;border-top:1px solid var(--line)}
h3{font-size:1em;margin:1em 0 .1em}
p{margin:0 0 .8em}
ul{padding-left:1.2em;margin:.3em 0}
.m{color:var(--muted)}
.pre{white-space:pre-wrap;overflow-wrap:anywhere}
.big{font-size:2.2em;font-weight:bold;margin:.1em 0 .3em}
.top{display:flex;justify-content:space-between;align-items:center;gap:1em}
.top h1{margin:.2em 0}

.tabs{position:fixed;z-index:9;left:0;right:0;bottom:0;display:flex;background:var(--panel);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.tabs a{flex:1;text-align:center;padding:.85em .2em;font-size:.9em;color:var(--muted);text-decoration:none}
.tabs a[aria-current]{color:var(--accent);font-weight:bold}

.btn,.btn2,.danger-btn{display:inline-block;min-height:2.75em;padding:.6em 1.2em;border-radius:6px;font:inherit;font-weight:bold;text-decoration:none;cursor:pointer}
.btn{background:var(--accent);color:var(--bg);border:0}
.btn2{background:transparent;color:var(--accent);border:1px solid var(--line)}
.btn.danger-btn{background:var(--bad);color:var(--bg)}
.danger{color:var(--bad)}
form .btn,form .btn2{margin-top:.7em}
.actions{display:flex;flex-wrap:wrap;gap:.6em}
.actions button{margin-top:.2em}
/* A phone's keyboard leaves little room: the tab bar steps aside while typing. */
@media (max-width:61.99em){
  body:has(:is(textarea,select,input:not([type=radio],[type=checkbox])):focus) .tabs{display:none}
}

label{display:block;margin:.9em 0 .2em;font-weight:bold}
label .m{font-weight:normal;font-size:.9em}
input,textarea,select{width:100%;padding:.6em;background:var(--panel);border:1px solid var(--line);border-radius:6px;color:var(--text);font:inherit;font-size:16px}
textarea{resize:vertical;min-height:5.5em;field-sizing:content}
input[type=radio],input[type=checkbox]{width:auto;min-height:0;margin:0 .4em 0 0;accent-color:var(--accent);transform:scale(1.25)}
.r{display:inline;font-weight:normal;margin:0 1.2em 0 .1em}
.two{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.5em .9em;margin-top:.6em}
.two label{margin:0}
fieldset{border:1px solid var(--line);border-radius:6px;margin:1em 0;padding:.2em .9em .9em}
legend{font-weight:bold;padding:0 .3em}
legend .m{font-weight:normal;font-size:.9em}
details{border:1px solid var(--line);border-radius:6px;margin:.6em 0;padding:.6em .9em}
summary{cursor:pointer;font-weight:bold}
summary.m{font-weight:normal;margin-top:.3em}
.search{display:flex;gap:.5em;margin:0 0 1em}
.search input{flex:1}

.flash{padding:.6em .9em;border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:6px;background:var(--panel);margin:.6em 0}
.flash.bad,.e{border-left-color:var(--bad);color:var(--bad)}
.flash.warn{border-left-color:var(--warn)}
p.e{border:0;background:none;padding:0}
.flash ul{margin:.3em 0 0}
.flash p{margin:.5em 0 0}
.todo{display:block;padding:.7em .9em;background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--warn);border-radius:6px;color:var(--warn);text-decoration:none;font-weight:bold}
.note{padding:.6em .9em;background:var(--panel);border-radius:6px}
.links{display:flex;flex-wrap:wrap;gap:.3em 1.1em;overflow-wrap:anywhere}
.copy{padding:.5em .7em;background:var(--panel);border-radius:6px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.85em}

.weeknav{display:flex;align-items:center;gap:.8em;margin:1em 0 .4em}
.weeknav a{padding:.3em .5em;text-decoration:none;font-weight:bold}
.weeknav a.m{margin-left:auto;font-weight:normal;color:var(--accent)}
.weeknav span{font-weight:bold}

.day h2{margin:1em 0 .4em;padding-top:.8em}
.day.today h2{color:var(--accent)}
details.day{padding:.4em .9em;margin:.3em 0}
details.day .rows{margin-top:.5em}
.day .m{font-weight:normal;font-size:.9em}
.rows{list-style:none;padding:0;margin:0}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:.1em .7em;min-height:3em;padding:.55em .8em;margin:0 0 .4em;background:var(--panel);border:1px solid var(--line);border-radius:6px;color:var(--text);text-decoration:none}
a.row:hover{border-color:var(--accent)}
.row.col{flex-direction:column;align-items:flex-start}
.row.free{min-height:2.4em;padding:.2em .8em;background:transparent;border-style:dashed}
.row.void{opacity:.55}
.tm{min-width:5em;font-variant-numeric:tabular-nums;font-weight:bold}
.free .tm{font-weight:normal;color:var(--muted)}
.who{flex:1 1 8em;overflow-wrap:anywhere}
.chips{display:flex;flex-wrap:wrap;gap:.3em}
.chip{display:inline-block;padding:.05em .55em;border:1px solid var(--line);border-radius:99px;font-size:.8em;color:var(--muted);white-space:nowrap}
.chip.ok{color:var(--accent);border-color:var(--accent)}
.chip.warn{color:var(--warn);border-color:var(--warn)}
.chip.bad{color:var(--bad);border-color:var(--bad)}
.totals{list-style:none;padding:0;margin:0 0 1em}
.totals li{display:flex;justify-content:space-between;padding:.25em 0;border-bottom:1px solid var(--line)}
.log{list-style:none;padding:0;font-size:.9em}
.log li{padding:.2em 0}
.kinds{margin:.8em 0}

@media (min-width:62em){
  main{max-width:70em;padding:4.2em 2em 2em}
  .tabs{top:0;bottom:auto;border-top:0;border-bottom:1px solid var(--line);justify-content:center;gap:1em;padding:0}
  .tabs a{flex:0 0 8em;font-size:1em}
  .week{display:grid;grid-template-columns:repeat(auto-fit,minmax(15em,1fr));gap:0 1.2em;align-items:start}
  form,details,.flash{max-width:46em}
}