/* Writing admin · builds on ../assets/site.css (same tokens, nav, type). Only form/table parts live here. */
.admin{padding-top:64px;padding-bottom:120px}
.admin-intro{margin-bottom:40px}
.admin h1{font-size:clamp(28px,4vw,40px);font-weight:600;line-height:1.12;letter-spacing:-.02em}
.dim{color:var(--dim)}
.admin code{font-size:13px;background:var(--rule);padding:1px 5px}
.admin small{font-size:13px;color:var(--dim);font-weight:400}
.nav-logout{display:inline-flex}
.nav-logout button{min-height:44px;padding:0 6px;background:none;border:0;cursor:pointer;font-family:var(--font);font-size:14px;color:var(--dim)}
.nav-logout button:hover{color:var(--text)}

.head-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:32px}
.head-row a.dim{font-size:14px}
.flash{padding:12px 16px;margin-bottom:32px;border:1px solid var(--rule);font-size:14px;max-width:680px}
.flash.ok{border-color:var(--text)}
.flash.err{border-color:var(--text);font-weight:500}

.admin label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--dim);letter-spacing:.2px}
.admin input,.admin select,.admin textarea{font:inherit;font-family:var(--font);font-size:16px;color:var(--text);background:transparent;border:1px solid var(--rule);padding:0 12px;height:44px;width:100%;border-radius:0}
.admin input:focus,.admin select:focus{border-color:var(--text);outline:none}
.admin input[readonly]{color:var(--dim)}
.admin select option{background:var(--bg);color:var(--text)}
.stack{display:flex;flex-direction:column;gap:20px}
.narrow{max-width:380px}
.admin button,.admin .button{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 20px;font-family:var(--font);font-size:14px;font-weight:500;border:1px solid var(--rule);background:none;color:var(--text);cursor:pointer;text-decoration:none}
.admin button.primary,.admin .button.primary{background:var(--text);color:var(--bg);border-color:var(--text)}
.admin .button:hover,.admin button:hover{opacity:.8}
.admin button.danger{border-color:transparent;color:var(--dim);margin-left:auto;text-decoration:underline;text-underline-offset:4px}
.admin button.danger:hover{color:var(--text)}

table.posts{width:100%;border-collapse:collapse;font-size:16px}
.posts th{text-align:left;font-size:13px;font-weight:400;color:var(--dim);padding:8px 16px 8px 0;border-bottom:1px solid var(--rule)}
.posts td{padding:16px 16px 16px 0;border-bottom:1px solid var(--rule);vertical-align:baseline}
.posts td:first-child a{font-weight:500}
.posts td:first-child a:hover{text-decoration:underline;text-underline-offset:4px;opacity:1}
.num{font-variant-numeric:tabular-nums;white-space:nowrap;font-size:14px}
.right{text-align:right;white-space:nowrap;font-size:14px}
.tag{font-size:13px;color:var(--dim)}
.tag::after{content:'.'}
.tag.live{color:var(--text)}
.aside{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:40px;font-size:14px}

.grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;margin-bottom:32px}
.span2{grid-column:span 2}
.grid .span2:last-child{grid-column:1 / -1}
.admin label.check{flex-direction:row;align-items:center;gap:10px;align-self:end;height:44px;padding:0 12px;border:1px solid var(--rule);color:var(--text);font-size:14px;cursor:pointer}
.admin label.check:has(input:checked){border-color:var(--text)}
.admin label.check.plain{border:0;padding:0;align-self:center;color:var(--dim)}
.admin label.check input{width:18px;height:18px;padding:0;accent-color:var(--text)}
.field-label{font-size:13px;color:var(--dim);margin-bottom:8px;letter-spacing:.2px}
.field-label small{display:block;margin-top:2px}

/* TinyMDE, in site tokens · toolbar floats inline (admin.js) */
.editor-wrap{position:relative}
.bubble{position:absolute;z-index:20;background:var(--text);padding:2px 4px;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.bubble[hidden]{display:none}
.TinyMDE{min-height:440px;max-height:72vh;overflow:auto;padding:24px;border:1px solid var(--rule);background:var(--bg);color:var(--text);font-family:var(--font);font-size:18px;line-height:1.75}
.TinyMDE:focus-within{border-color:var(--text)}
.TMCommandBar{background:transparent;border:0;display:flex;align-items:center;white-space:nowrap}
.TMCommandButton{color:var(--bg);fill:var(--bg);width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;background:none;border:0;cursor:pointer}
.TMCommandButton_Active{color:var(--text);fill:var(--text);background:var(--bg)}
.TMCommandButton_Inactive{color:var(--bg);fill:var(--bg)}
.TMCommandButton_Inactive:hover{opacity:.6}
.TMCommandButton_Disabled{opacity:.3}
.TMCommandDivider{width:1px;height:20px;background:var(--bg);opacity:.3;margin:0 4px}
.TMMark,.TMMark_TMH1,.TMMark_TMH2{color:var(--dim)}
.TMH2{font-size:22px;font-weight:600}
.TMBlockquote{color:var(--dim)}
.TMLink,.TMLinkLabel{color:var(--text);text-decoration:underline}
.TMURL{color:var(--dim)}
.TMCode{background:var(--rule)}
.TMHTMLBlock{color:var(--dim);font-size:13px}
textarea#f-body{min-height:440px;padding:16px;height:auto;font-family:ui-monospace,Menlo,monospace;font-size:14px}

.more{margin-top:32px;border-top:1px solid var(--rule);padding-top:12px}
.more summary{cursor:pointer;font-size:14px;min-height:44px;display:flex;align-items:center}
.more .grid{margin-top:12px}
.og-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.og-thumb{width:120px;height:63px;object-fit:cover;border:1px solid var(--rule);display:block}
.admin label.upload{position:relative;flex-direction:row;align-items:center;height:44px;padding:0 20px;border:1px solid var(--rule);color:var(--text);font-size:14px;font-weight:500;cursor:pointer}
.admin label.upload:hover{border-color:var(--text)}
.admin label.upload input{position:absolute;inset:0;opacity:0;cursor:pointer;height:100%;padding:0}
.admin label.upload:focus-within{outline:2px solid var(--text);outline-offset:2px}
.actions{display:flex;align-items:center;gap:20px;margin-top:32px;padding-top:24px;border-top:1px solid var(--rule)}
.actions a{font-size:14px}

/* tabs + projects */
.tabs{display:flex;gap:8px;margin:0 0 32px -6px}
.tabs a{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;font-size:14px;color:var(--dim)}
.tabs a::after{content:'.'}
.tabs a[aria-current="page"]{color:var(--text);text-decoration:underline;text-underline-offset:4px}
.lead{font-size:16px;margin:-12px 0 28px;max-width:640px}
.proj-row{grid-template-columns:1fr 150px}
.proj-row .case-title a{color:var(--text)}
.proj-row .case-title a:hover{text-decoration:underline;text-underline-offset:4px;opacity:1}
.proj-meta{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:10px;font-size:13px;color:var(--dim)}
.proj-meta a{color:var(--text);border-bottom:1px solid var(--dim)}
.proj-meta a:hover{border-color:var(--text);opacity:1}
.proj-meta .proj-live{border-bottom-color:var(--text)}
.proj-edit{margin-top:10px;font-size:13px;color:var(--dim)}
.proj-edit summary{cursor:pointer;display:inline-flex;align-items:center;min-height:44px;list-style:none}
.proj-edit summary::-webkit-details-marker{display:none}
.proj-edit summary:hover{color:var(--text)}
.proj-edit form{display:flex;gap:8px;max-width:520px}
.proj-edit input{flex:1;min-width:0}

@media(max-width:700px){
  .proj-row{grid-template-columns:1fr}
  .proj-row .case-tag{grid-column:1;text-align:left;margin-top:0}
  .admin{padding-top:40px}
  .grid{grid-template-columns:1fr}
  .span2,.grid .span2:last-child{grid-column:auto}
  .posts th:nth-child(2),.posts td:nth-child(2){display:none}
}

/* filter keeps the site's plain dotted look (overrides .admin button) */
.admin .filter button{height:auto;min-height:44px;padding:0 6px;border:0;background:none;font-weight:400;font-size:14px;color:var(--dim)}
.admin .filter button:hover,.admin .filter button[aria-pressed="true"]{color:var(--text);opacity:1}