/* Frank: quiet field-notebook wireframe */
:root { --frank-paper:#f7f2e9; --frank-ink:#22201d; --frank-pencil:#716d66; --frank-rule:#d8cdbc; --frank-green:#0d8a68; --frank-green-pale:#e1f3ea; }
body {
  background-color:var(--frank-paper) !important;
  background-image:radial-gradient(rgba(34,32,29,.12) .7px,transparent .7px), linear-gradient(90deg,rgba(34,32,29,.025) 1px,transparent 1px), linear-gradient(rgba(34,32,29,.025) 1px,transparent 1px) !important;
  background-size:12px 12px,48px 48px,48px 48px !important;
  color:var(--frank-ink) !important;
}
/* The shared wireframe vocabulary used by dashboard, admin, skill, and reports. */
.card, .timeline-item {
  background:rgba(255,250,242,.84) !important;
  border:1px solid var(--frank-ink) !important;
  border-radius:4px !important;
  box-shadow:3px 3px 0 rgba(34,32,29,.10) !important;
  backdrop-filter:none !important;
}
.kicker, .card h2, .drawer-section h3 {
  color:var(--frank-pencil) !important;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  font-weight:700 !important;
  letter-spacing:.11em !important;
}
.pill, .badge, .filter-chip, .btn, a.btn, .close-drawer {
  border-color:var(--frank-ink) !important;
  border-radius:3px !important;
  box-shadow:2px 2px 0 rgba(34,32,29,.10);
}
a { color:#056b52; }
button:focus-visible, a:focus-visible, input:focus-visible, summary:focus-visible {
  outline:3px solid #e6ad48;
  outline-offset:3px;
}

/* Public dashboard */
.dashboard .wrap { max-width:1120px; padding-top:36px; }
.dashboard .header { border-bottom:2px solid var(--frank-ink); padding-bottom:24px; margin-bottom:24px; }
.dashboard .logo {
  width:54px; height:54px; border:2px solid var(--frank-ink); border-radius:4px;
  background:transparent; box-shadow:3px 3px 0 var(--frank-green); transform:rotate(-1.5deg);
}
.dashboard .logo svg { width:35px; height:35px; }
.dashboard h1 { letter-spacing:-.055em; }
.dashboard .sub { max-width:42ch; }
.dashboard .pill { background:var(--frank-paper) !important; color:var(--frank-ink) !important; padding:7px 10px; }
.dashboard .grid { grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr); gap:14px; align-items:start; }
.dashboard .column { display:grid; gap:14px; align-content:start; }
.dashboard .card { padding:20px; }
.dashboard .card h2 { border-bottom:1px solid var(--frank-rule); padding-bottom:10px; margin-bottom:16px; }
.dashboard .active { font-size:20px; line-height:1.35; }
.dashboard .current-status-item { border-color:var(--frank-rule); position:relative; padding-left:17px; }
.dashboard .current-status-item::before { content:""; position:absolute; width:8px; height:8px; left:0; top:25px; background:var(--frank-green); border-radius:50%; }
.dashboard .badge { background:var(--frank-green-pale) !important; color:#075f49 !important; padding:3px 7px; }
.dashboard li { border-color:var(--frank-rule); }
.dashboard .item-title { font-weight:750; }
.dashboard .check { color:var(--frank-green); }
.dashboard .project-button { text-decoration:underline; text-decoration-color:rgba(13,138,104,.35); text-underline-offset:3px; }
.dashboard .loop-bullets { list-style:"—  "; margin-left:22px; }
.dashboard .footer { border-top:1px solid var(--frank-rule); padding-top:14px; }
.dashboard .drawer-backdrop { background:rgba(34,32,29,.20); }
.dashboard .project-drawer { background:var(--frank-paper); border-left:2px solid var(--frank-ink); box-shadow:-5px 0 0 rgba(34,32,29,.10); }
.dashboard .drawer-head { border-bottom:2px solid var(--frank-ink); padding-bottom:16px; }
.dashboard .drawer-head h2 { font-size:clamp(28px,4vw,40px); }
.dashboard .close-drawer { background:var(--frank-paper) !important; }
.dashboard .drawer-section { border-color:var(--frank-rule); }
.dashboard .filter-chip { background:transparent !important; color:var(--frank-ink) !important; padding:5px 9px; }
.dashboard .filter-chip.active { background:var(--frank-green-pale) !important; color:#075f49 !important; }
.dashboard .timeline { gap:8px; }
.dashboard .timeline-item { padding:11px; box-shadow:none !important; }
.dashboard .timeline-item:nth-child(odd) { transform:rotate(-.15deg); }

/* Secondary pages retain the same notebook material, without changing their workflows. */
.admin-page .wrap, .skill-page .wrap, .report-page .wrap { padding-top:36px; }
.admin-page .top { border-bottom:2px solid var(--frank-ink); padding-bottom:18px; }
.admin-page .card, .skill-page .card, .report-page .card { border-radius:4px !important; }
.admin-page input { border:1px solid var(--frank-ink) !important; border-radius:3px !important; background:#fffdf8 !important; }
.admin-page button, .skill-page .btn { border-radius:3px !important; box-shadow:2px 2px 0 rgba(34,32,29,.16); }
.skill-page pre, .report-page pre { border-radius:3px !important; border-color:var(--frank-rule) !important; background:rgba(255,255,255,.42) !important; }

/* Frank Cloud: private, review-only workspace. */
.cloud-workspace { margin:0; min-height:100vh; font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.cloud-workspace * { box-sizing:border-box; }
.cloud-workspace .admin-shell { width:min(760px,calc(100% - 32px)); margin:0 auto; padding:44px 0 72px; }
.cloud-workspace .admin-header { border-bottom:2px solid var(--frank-ink); padding-bottom:22px; margin-bottom:20px; }
.cloud-workspace .eyebrow { margin:0 0 8px; color:var(--frank-pencil); font:700 12px/1.3 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; letter-spacing:.12em; text-transform:uppercase; }
.cloud-workspace h1 { margin:0; font-size:clamp(36px,8vw,62px); line-height:.95; letter-spacing:-.055em; }
.cloud-workspace .admin-header > p:last-child { max-width:54ch; margin:18px 0 0; color:var(--frank-pencil); line-height:1.6; }
.cloud-workspace .admin-card { padding:20px; background:rgba(255,250,242,.84); border:1px solid var(--frank-ink); border-radius:4px; box-shadow:3px 3px 0 rgba(34,32,29,.10); }
.cloud-workspace .section-heading { display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding-bottom:11px; border-bottom:1px solid var(--frank-rule); }
.cloud-workspace .section-heading h2 { margin:0; color:var(--frank-pencil); font:700 13px/1.3 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; letter-spacing:.11em; text-transform:uppercase; }
.cloud-workspace .section-heading span { color:var(--frank-pencil); font-size:13px; }
.cloud-workspace .open-loop-list { list-style:none; padding:0; margin:0; }
.cloud-workspace .loop-item { display:grid; grid-template-columns:30px 1fr; gap:12px; padding:18px 2px; border-bottom:1px solid var(--frank-rule); }
.cloud-workspace .loop-item:last-child { border-bottom:0; }
.cloud-workspace .loop-check { display:block; position:relative; width:24px; height:24px; cursor:pointer; }
.cloud-workspace .loop-check input { position:absolute; width:1px; height:1px; opacity:0; }
.cloud-workspace .loop-box { display:block; width:21px; height:21px; border:2px solid var(--frank-ink); border-radius:2px; background:#fffdf8; box-shadow:2px 2px 0 rgba(34,32,29,.13); }
.cloud-workspace .loop-check input:focus-visible + .loop-box { outline:3px solid #e6ad48; outline-offset:3px; }
.cloud-workspace .loop-check input:checked + .loop-box { background:var(--frank-green-pale); border-color:var(--frank-green); }
.cloud-workspace .loop-check input:disabled + .loop-box { opacity:.55; }
.cloud-workspace .loop-copy strong { display:block; font-size:17px; line-height:1.35; }
.cloud-workspace .loop-copy p { margin:7px 0 0; color:var(--frank-pencil); line-height:1.5; }
.cloud-workspace .empty-state { padding:34px 4px 16px; color:var(--frank-pencil); font-style:italic; }

/* Private dashboard: current status, active projects, recent log, drawer. */
.cloud-workspace .grid { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr); gap:14px; align-items:start; }
.cloud-workspace .column { display:grid; gap:14px; align-content:start; }
.cloud-workspace .card { padding:20px; background:rgba(255,250,242,.84); border:1px solid var(--frank-ink); border-radius:4px; box-shadow:3px 3px 0 rgba(34,32,29,.10); }
.cloud-workspace .card h2 { margin:0 0 14px; color:var(--frank-pencil); font:700 13px/1.3 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; letter-spacing:.11em; text-transform:uppercase; border-bottom:1px solid var(--frank-rule); padding-bottom:10px; }
.cloud-workspace .current-statuses { display:grid; gap:18px; }
.cloud-workspace .current-status-item { border-top:1px solid var(--frank-rule); padding-top:18px; position:relative; padding-left:17px; }
.cloud-workspace .current-status-item:first-child { border-top:0; padding-top:0; }
.cloud-workspace .current-status-item::before { content:""; position:absolute; width:8px; height:8px; left:0; top:25px; background:var(--frank-green); border-radius:50%; }
.cloud-workspace .status-lines { display:grid; gap:10px; }
.cloud-workspace .active { font-size:20px; line-height:1.35; margin:0; }
.cloud-workspace .meta { color:var(--frank-pencil); font-size:13px; margin-top:12px; display:flex; gap:8px; flex-wrap:wrap; }
.cloud-workspace .badge { color:#075f49; background:var(--frank-green-pale); border:1px solid #bbf7d0; border-radius:3px; padding:3px 7px; font-weight:650; }
.cloud-workspace .card ul { list-style:none; padding:0; margin:0; }
.cloud-workspace .card li { border-bottom:1px solid var(--frank-rule); padding:12px 2px; }
.cloud-workspace .card li:last-child { border-bottom:0; }
.cloud-workspace .item-title { font-weight:750; display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.cloud-workspace .item-text { color:var(--frank-pencil); margin-top:4px; font-size:14px; }
.cloud-workspace .check { color:var(--frank-green); }
.cloud-workspace .project-button { all:unset; cursor:pointer; color:var(--frank-ink); font-weight:680; text-decoration:underline; text-decoration-color:rgba(13,138,104,.35); text-underline-offset:3px; }
.cloud-workspace .project-button:hover { color:var(--frank-green); }
.cloud-workspace .empty { color:var(--frank-pencil); font-style:italic; padding:12px 2px; }
.cloud-workspace .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.cloud-workspace .drawer-backdrop { position:fixed; inset:0; background:rgba(34,32,29,.20); opacity:0; pointer-events:none; transition:opacity .18s ease; z-index:10; }
.cloud-workspace .drawer-backdrop.open { opacity:1; pointer-events:auto; }
.cloud-workspace .project-drawer { position:fixed; inset:0 0 0 auto; width:min(560px,100%); background:var(--frank-paper); border-left:2px solid var(--frank-ink); box-shadow:-5px 0 0 rgba(34,32,29,.10); transform:translateX(100%); transition:transform .22s ease; z-index:11; overflow:auto; padding:28px; }
.cloud-workspace .project-drawer.open { transform:translateX(0); }
.cloud-workspace .drawer-head { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; margin-bottom:20px; border-bottom:2px solid var(--frank-ink); padding-bottom:16px; }
.cloud-workspace .drawer-head h2 { color:var(--frank-ink); font-size:clamp(28px,4vw,40px); letter-spacing:-.04em; text-transform:none; margin:0; }
.cloud-workspace .close-drawer { border:1px solid var(--frank-ink); background:var(--frank-paper); color:var(--frank-ink); border-radius:3px; width:38px; height:38px; font-size:24px; line-height:1; cursor:pointer; box-shadow:2px 2px 0 rgba(34,32,29,.10); }
.cloud-workspace .drawer-section { border-top:1px solid var(--frank-rule); padding-top:18px; margin-top:18px; }
.cloud-workspace .drawer-section h3 { margin:0 0 10px; color:var(--frank-pencil); font:700 12px/1.3 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; letter-spacing:.11em; text-transform:uppercase; }
.cloud-workspace .filter-row { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.cloud-workspace .filter-chip { border:1px solid var(--frank-ink); background:transparent; color:var(--frank-ink); border-radius:3px; padding:5px 9px; cursor:pointer; font-weight:700; box-shadow:2px 2px 0 rgba(34,32,29,.10); }
.cloud-workspace .filter-chip.active { color:#075f49; background:var(--frank-green-pale); border-color:#bbf7d0; }
.cloud-workspace .timeline { display:grid; gap:8px; }
.cloud-workspace .timeline-item { padding:11px; background:rgba(255,250,242,.84); border:1px solid var(--frank-ink); border-radius:4px; }
.cloud-workspace .timeline-item.closed { opacity:.68; }
.cloud-workspace .timeline-item:nth-child(odd) { transform:rotate(-.15deg); }
.cloud-workspace .timeline-title { font-weight:750; display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.cloud-workspace .timeline-text { color:var(--frank-pencil); margin-top:4px; }
.claim-workspace form { display:grid; gap:12px; }
.claim-workspace label { color:var(--frank-pencil); font:700 12px/1.3 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; letter-spacing:.1em; text-transform:uppercase; }
.claim-workspace input { width:100%; padding:12px; color:var(--frank-ink); font:inherit; }
.claim-workspace button { justify-self:start; margin-top:4px; padding:10px 14px; border:1px solid var(--frank-ink); background:var(--frank-green-pale); color:#075f49; font:700 13px/1.3 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; cursor:pointer; }
.claim-workspace #claim-error { margin:4px 0 0; color:#8b2f27; }

@media (max-width:820px) {
  .dashboard .grid { grid-template-columns:1fr; }
  .cloud-workspace .grid { grid-template-columns:1fr; }
  .cloud-workspace .admin-shell { width:min(100% - 22px,760px); padding-top:26px; }
  .cloud-workspace .admin-card { padding:16px; }
  .cloud-workspace .project-drawer { width:100%; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none !important; } }