/* DESIGN.md examples (/design-md/examples/, scripts/design-examples-page.mjs). The layout is
   the Resources page's (public/resources.css, rs-*); these are the page's own parts: the make
   button in the head, the palette strip, type and accent on each card, the Copy button, and
   the "Make one from any site" field. --ui-* tokens only, light and dark. */
.de .rs-head{align-items:center}
.de .rs-lead{max-width:720px}
.de .rs-lead a{color:var(--ui-link);text-underline-offset:3px}
.de-make{grid-column:2;grid-row:1/span 2;align-self:end}
.de-make svg,.de-form .ui-btn svg{flex:none}

/* Cards: the palette strip, the brand and address, its type, theme and accent, then the actions. */
.de-card{gap:14px}
.de-strip{display:flex;height:52px;border:.8px solid var(--ui-line);border-radius:10px;overflow:hidden;box-sizing:border-box}
.de-strip i{flex:1}
.de-strip:hover{border-color:var(--ui-line-strong)}
.de-type{display:flex;gap:8px;min-width:0;margin:0;font:500 12.5px/1.4 var(--ui-mono);color:var(--ui-text)}
.de-type span{flex:none;color:var(--ui-faint)}
.de-type{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.de-accent{gap:6px}
.de-accent i{width:10px;height:10px;border-radius:3px;box-shadow:inset 0 0 0 .8px var(--ui-line-strong)}
.de .rs-tags{margin-top:-4px}
.de button.rs-btn{margin:0;cursor:pointer}
.de .rs-btn.de-done{border-color:var(--ui-accent);color:var(--ui-link)}
/* Copy needs scripting; Style guide and Download work without it. */
@media (scripting:none){.de-copy{display:none}}

/* Make one from any site: a white card with the link field and the glossy Generate pill inside it. */
.de-make-sec{padding-bottom:0}
.de-make-card{display:flex;flex-direction:column;align-items:center;gap:12px;padding:40px 24px;text-align:center}
.de-make-card h2{margin:0;font-size:32px;line-height:1.15;font-weight:500;letter-spacing:-.03em}
.de-make-card p{max-width:520px;margin:0;font-size:16.5px;line-height:1.5;letter-spacing:-.02em;color:var(--ui-dim)}
.de-form{width:min(560px,100%);margin-top:12px}
.de-field{display:flex;align-items:center;gap:10px;height:52px;padding:0 6px 0 18px;border:.8px solid var(--ui-field-line);border-radius:999px;background:var(--ui-card);color:var(--ui-faint);box-sizing:border-box;transition:border-color .15s,box-shadow .15s}
.de-field:focus-within{border-color:var(--ui-accent);box-shadow:0 0 0 4px var(--ui-accent-soft)}
.de-field svg{flex:none}
.de-field input[type=text]{flex:1;min-width:0;height:100%;margin:0;padding:0;border:0;background:none;outline:0;box-shadow:none;color:var(--ui-text);font:400 16px var(--ui-font);letter-spacing:-.02em}
.de-field input::placeholder{color:var(--ui-faint)}
.de-field .ui-btn{flex:none}
.de :is(a,button,input):focus-visible{outline:2px solid var(--ui-accent);outline-offset:2px}
.de-field input:focus-visible{outline:0}

@media (max-width:760px){
  .de-make{grid-column:1;grid-row:auto;justify-self:start;margin-top:6px}
  .de-make-card{padding:28px 18px}
  .de-make-card h2{font-size:26px}
  .de-make-card p{font-size:15.5px}
  /* The field keeps one row: the pill shows only its arrow. */
  .de-field .ui-btn{width:40px;padding:0;font-size:0;gap:0}
}
@media (prefers-reduced-motion:reduce){.de *{transition:none!important}}