/* The header's new parts (owner-approved #4 and #5, 7 Oct 2026): the "Made for" drop-down and the quiet "Log in" text
   link on wide screens, and the "Made for" group of the phone menu sheet. Tokens come from vizwalk.css. */

/* Wide screens: "Made for" as a small drop-down beside the other links (same look as .head-links a). */
.head-menu{position:relative}
.head-menu>summary{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;color:var(--ink);font-size:1rem;font-weight:600;letter-spacing:.02em;white-space:nowrap;cursor:pointer;list-style:none;position:relative}
.head-menu>summary::-webkit-details-marker{display:none}
.head-menu>summary .icon{transition:transform .2s var(--ease)}
.head-menu[open]>summary .icon{transform:rotate(180deg)}
.head-menu>summary.is-current::after{content:"";position:absolute;inset-inline:12px;bottom:8px;height:2px;background:var(--accent)}
.head-menu-list{position:absolute;top:calc(100% + 6px);inset-inline-start:0;min-width:17rem;display:flex;flex-direction:column;padding:8px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--bg-2);box-shadow:0 18px 48px rgba(0,0,0,.45);z-index:60}
.head-links .head-menu-list a{min-height:48px;padding:0 14px;border-radius:var(--r-sm);font-size:1rem;letter-spacing:0;color:var(--ink)}
.head-links .head-menu-list a::after{display:none}
.head-links .head-menu-list a[aria-current]{color:var(--accent)}
@media (hover:hover){.head-menu>summary:hover{color:var(--accent-hover)}.head-links .head-menu-list a:hover{background:var(--bg-3);color:var(--ink)}}

/* Text of 16 px in the header links (owner: text at least 16 px). */
@media (min-width:900px){
  .head-links a,.head-link{font-size:1rem}
  .head-quiet{color:var(--ink-2)}
}
@media (min-width:900px) and (max-width:1199px){.head-menu>summary{padding:0 9px}.head-ask .icon{display:none}}
@media (min-width:900px) and (max-width:1023px){.head-links a,.head-link,.head-menu>summary{padding:0 7px}}

/* Phone menu sheet: "Made for" in large type under the main links. */
.sheet-made{display:flex;flex-direction:column;padding-top:var(--s5)}
.sheet-made-title{margin:0 0 var(--s2);font:600 1rem/1.4 var(--font);letter-spacing:.02em;color:var(--soft)}
.sheet-made a{display:flex;align-items:center;min-height:52px;font:400 1.375rem/1.25 var(--font-display);letter-spacing:-.01em;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.sheet-made a[aria-current]{color:var(--accent)}

/* #44: lines meant for phones only ("sign up now, upload from your computer"); a computer with a mouse never shows them. */
@media (hover:hover) and (pointer:fine){.phone-only{display:none!important}}
/* The phone box of /upload and the empty dashboard: the line and "E-mail me the upload link". */
.upload-phone{margin:0 0 var(--s5);padding:14px 16px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--bg-2);text-align:start}
.upload-phone p{display:flex;gap:10px;align-items:flex-start;margin:0 0 12px;font-size:1rem;line-height:1.45;color:var(--ink)}
.upload-phone p .icon{flex:none;margin-top:2px;color:var(--accent-link)}
.upload-model{margin:var(--s3) 0 var(--s4);font-size:1rem;line-height:1.5}
.upload-error-more{margin:10px 0 0}
.notice .upload-error-more .button{color:var(--on-accent);text-decoration:none;margin:0}