/* My Projects — the shelf everything you have started sits on.
   Tokens and type come from the studio so this reads as the same product. */
:root{
  --ink:#14243b; --navy:#0d1c31; --cream:#fbf8f1; --paper:#fffdf8;
  --coral:#ee755b; --coral-dark:#d95f47; --teal:#3e9997; --mint:#dbecea;
  --line:#dedfdc; --muted:#647080;
}
*{box-sizing:border-box}
body{margin:0;background:var(--cream);color:var(--ink);font:400 17px/1.65 "DM Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
img{max-width:100%}
.skip-link{position:fixed;z-index:100;top:8px;left:8px;padding:10px 15px;border-radius:8px;background:#fff;color:var(--ink);transform:translateY(-150%)}
.skip-link:focus{transform:none}
:focus-visible{outline:2px solid var(--coral);outline-offset:3px}

/* Top bar ------------------------------------------------------------- */
.library-topbar{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;padding:18px 32px;background:var(--navy);color:#fff}
.brand{display:flex;align-items:center;gap:9px;color:#fff;font:400 14px/1 "DM Sans",sans-serif;letter-spacing:.07em;text-decoration:none;white-space:nowrap}
.brand-signature{width:48px;height:auto}
.brand b{font-weight:700}
.studio-account{display:flex;flex-wrap:wrap;align-items:center;gap:16px;font-size:14px}
.allowance{padding:8px 12px;border-radius:999px;background:rgba(219,236,234,.14);color:var(--mint);font:700 12px/1 "Space Mono",monospace;letter-spacing:.08em;text-decoration:none}
.allowance:hover{background:rgba(219,236,234,.22);color:#fff}
.studio-email{color:rgba(255,255,255,.62);font:400 13px/1 "Space Mono",monospace;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.text-button{border:0;background:none;padding:2px;color:var(--coral);font:700 14px/1 "DM Sans",sans-serif;cursor:pointer;text-decoration:underline;text-underline-offset:4px}

/* Page head ----------------------------------------------------------- */
.library{max-width:1180px;margin:0 auto;padding:40px 32px 72px}
.library-head{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-end;justify-content:space-between;margin-bottom:32px}
.section-kicker{margin:0 0 10px;font:700 13px/1 "Space Mono",monospace;letter-spacing:.14em;color:var(--coral-dark)}
.library h1{margin:0 0 8px;font:400 clamp(30px,4vw,42px)/1.15 "Libre Caslon Display",Georgia,serif}
.library-sub{margin:0;color:var(--muted);font-size:16px}
.button{display:inline-flex;align-items:center;gap:9px;padding:14px 22px;border:0;border-radius:9px;font:600 16px/1 "DM Sans",sans-serif;text-decoration:none;cursor:pointer}
.button-primary{background:var(--coral);color:#fff}
.button-primary:hover{background:var(--coral-dark)}

/* The shelf ----------------------------------------------------------- */
.project-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.project-card{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:0 8px 26px rgba(18,34,54,.06);transition:transform .2s,border-color .2s,box-shadow .2s}
.project-card:hover{transform:translateY(-3px);border-color:#c9d2d8;box-shadow:0 14px 34px rgba(18,34,54,.1)}
.project-cover{position:relative;height:158px;display:grid;place-items:center;background:linear-gradient(135deg,#eef3f1,#e2ebe8)}
.project-cover img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover}
.project-mark{font-size:36px;color:#9fb3ae}
.project-stage{position:absolute;z-index:2;left:12px;bottom:12px;padding:6px 11px;border-radius:999px;background:rgba(13,28,49,.86);color:#fff;font:700 11px/1 "Space Mono",monospace;letter-spacing:.1em}
.project-body{display:flex;flex-direction:column;gap:10px;flex:1;padding:18px 20px 20px}
.project-body h2{margin:0;font:400 21px/1.25 "Libre Caslon Display",Georgia,serif}
.project-facts{display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0;list-style:none}
.project-facts li{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:7px;background:#f2f5f4;color:#4c5a67;font:500 13px/1 "DM Sans",sans-serif}
.project-facts svg{width:14px;height:14px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;opacity:.75}
.project-logline{margin:0;color:var(--muted);font-size:14px;line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.project-saved{margin:0;color:#8a95a2;font:400 13px/1 "Space Mono",monospace}
.project-actions{display:flex;align-items:center;gap:14px;margin-top:auto;padding-top:6px}
.project-open{flex:1;padding:11px 16px;border:0;border-radius:8px;background:var(--navy);color:#fff;font:600 15px/1 "DM Sans",sans-serif;cursor:pointer}
.project-open:hover{background:#16304f}
.project-delete{padding:11px 4px;border:0;background:none;color:#98a3ae;font:500 14px/1 "DM Sans",sans-serif;cursor:pointer}
.project-delete:hover{color:var(--coral-dark);text-decoration:underline;text-underline-offset:3px}

.project-new{display:grid;place-content:center;gap:8px;min-height:300px;padding:24px;border:2px dashed #cfd8dd;border-radius:12px;background:none;color:#5d6b78;font:600 16px/1.4 "DM Sans",sans-serif;text-align:center;text-decoration:none;cursor:pointer}
.project-new:hover{border-color:var(--coral);color:var(--coral-dark)}
.project-new span{display:block;font-size:30px;line-height:1}

.library-empty{grid-column:1/-1;padding:56px 32px;border:1px solid var(--line);border-radius:12px;background:#fff;text-align:center}
.library-empty h2{margin:0 0 8px;font:400 26px/1.25 "Libre Caslon Display",Georgia,serif}
.library-empty p{margin:0 0 22px;color:var(--muted)}

.library-foot{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;max-width:1180px;margin:0 auto;padding:24px 32px 40px;border-top:1px solid var(--line);color:var(--muted);font-size:14px}
.library-foot nav{display:flex;gap:18px}
.library-foot a{color:var(--muted)}

@media (max-width:640px){
  .library-topbar{padding:14px 18px}
  .library{padding:28px 18px 56px}
  .library-foot{padding:20px 18px 32px}
  .project-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .project-card{transition:none}
  .project-card:hover{transform:none}
}

/* Nav chips on the navy bar: same shape, inverted ground. */
.nav-chip{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border:1px solid rgba(255,255,255,.28);border-radius:999px;background:none;color:#fff;font:600 13.5px/1 "DM Sans",sans-serif;text-decoration:none;cursor:pointer;transition:border-color .18s,color .18s,background-color .18s}
.chip-icon{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.nav-chip:hover{border-color:var(--coral);color:#ffd9cf;background:rgba(238,117,91,.14)}
.nav-chip:focus-visible{outline:2px solid var(--coral);outline-offset:2px}

@media (min-width:641px){
  .studio-account .studio-email{padding-left:18px;border-left:1px solid rgba(255,255,255,.22)}
}

/* Placeholders must read as a prompt, never as an answer.
   The fields set their own weight and ink, and the placeholder inherited
   both — so a hint looked exactly like something already typed. Two
   signals, not one: pale gray, and normal weight against the field's
   semibold. opacity is pinned because Firefox fades placeholders on its
   own, which would stack with this. */
::placeholder{color:#8a95a1;font-weight:400;opacity:1}
input::placeholder,textarea::placeholder{color:#8a95a1;font-weight:400;opacity:1}

/* Text buttons across the platform.
   A permanent underline is a hyperlink in a document, not a control on a
   screen: several of them in a row read as raw text. They now sit on their
   own quiet ground, with the underline kept for hover and focus, where it
   confirms the thing under the cursor is the thing that will act. Weight and
   colour still carry the hierarchy, so nothing gets louder than the primary
   button beside it. */
.text-button{
  display:inline-flex;align-items:center;gap:7px;
  min-height:40px;padding:8px 13px;border:1px solid transparent;border-radius:9px;
  background:none;color:#4a5867;
  font:600 15px/1 "DM Sans",sans-serif;cursor:pointer;
  text-decoration:none;
  transition:background-color .16s,color .16s,border-color .16s;
}
.text-button:hover{background:rgba(20,36,59,.05);color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.text-button:focus-visible{outline:2px solid var(--coral);outline-offset:2px}
.text-button:disabled{opacity:.45;cursor:default;background:none;text-decoration:none}
.text-button.quiet{color:#7f8a95}
.text-button.quiet:hover{color:var(--coral-dark);background:rgba(238,117,91,.08)}
/* On the navy bars the quiet ground has to be light, not dark. */
.library-topbar .text-button{color:#f4d9d1}
.library-topbar .text-button:hover{background:rgba(255,255,255,.12);color:#fff}

/* The wordmark reads MY in ink and TOONMAKER in coral, as on the legal pages. */
.brand b{color:var(--coral)}

/* Matches the studio: 30% up from 14px/48px. */
.brand{font-size:18px;gap:12px}
.brand-signature{width:62px}

/* Another 20% on the navy bar: the mark is the only branding on this page. */
.brand{font-size:22px;gap:14px}
.brand-signature{width:74px}
@media(max-width:560px){.brand{font-size:18px;gap:10px}.brand-signature{width:60px}}

/* 15% back off the navy bar — the step to 22px overshot. */
.brand{font-size:19px;gap:12px}
.brand-signature{width:63px}
@media(max-width:560px){.brand{font-size:16px;gap:9px}.brand-signature{width:51px}}