/* Plain and simple, light. No design reference exists - see D3 - so this stays
   deliberately unopinionated: system fonts, one accent, nothing to unpick. */
:root { --ink: #1a1a1a; --muted: #666; --line: #e3e3e3; --accent: #2b5f8a; --bg: #fdfdfc; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink);
       font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
header { padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); }
header a { color: var(--ink); text-decoration: none; }
main { max-width: 38rem; margin: 0 auto; padding: 1.25rem; }
h1 { font-size: 1.4rem; margin: 0 0 1rem; font-weight: 600; }
.skills { list-style: none; margin: 0; padding: 0; }
.skills li { display: flex; justify-content: space-between; gap: 1rem;
             padding: .7rem 0; border-bottom: 1px solid var(--line); }
.since, .empty { color: var(--muted); }
.action { color: var(--accent); }
label { display: block; margin: .9rem 0 .2rem; }
input { width: 100%; padding: .55rem; border: 1px solid var(--line); border-radius: 4px;
        font: inherit; background: #fff; }
.errorlist { color: #a3251f; list-style: none; padding: 0; margin: .3rem 0 0; }
button { margin-top: 1.1rem; padding: .6rem 1rem; border: 0; border-radius: 4px;
         background: var(--accent); color: #fff; font: inherit; cursor: pointer; }

h2 { font-size: 1.05rem; margin: 1.6rem 0 .6rem; font-weight: 600; }
.inline { display: inline; }
.inline button { margin: 0; padding: .25rem .6rem; font-size: .85rem; }
.skills li .since { text-align: right; flex-shrink: 0; }

header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.signout { display: flex; align-items: center; gap: .6rem; }