/* Faces & signs (faces.js): the clock face designer. Tokens from tokens.css. */
.fd{display:grid;grid-template-columns:220px minmax(0,1fr);gap:20px;align-items:start}
.fd-side{display:flex;flex-direction:column;gap:2px;position:sticky;top:0;border:1px solid var(--line);border-radius:var(--radius-2);background:var(--bg-1);padding:8px}
.fd.side-shut{grid-template-columns:40px minmax(0,1fr)}
.fd.side-shut .fd-side{padding:6px 4px;align-items:center}
.fd-sidetog{align-self:flex-end;width:28px;height:28px;font-size:14px}
.fd.side-shut .fd-sidetog{align-self:center}
.fd-sh{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 6px 6px}
.fd-sh .btn{padding:3px 8px}
.fd-none{padding:4px 8px;font-size:13px}
.fd-nav{display:flex;align-items:baseline;gap:6px;width:100%;text-align:left;border:0;border-left:2px solid transparent;background:transparent;padding:7px 8px;cursor:pointer;border-radius:var(--radius-1);color:var(--fg-1);font-size:14px}
.fd-nav small{margin-left:auto;font-family:var(--font-mono);font-size:10px;color:var(--fg-3);text-transform:uppercase;letter-spacing:.05em}
.fd-nav small.warn{color:var(--bad)}
.fd-nav:hover{background:var(--bg-2);color:var(--fg-0)}
.fd-nav[aria-current="true"]{background:var(--accent-dim);border-left-color:var(--accent);color:var(--fg-0);font-weight:600}
.fd-pub{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-left:auto}
.bhead:has(.fd-pub){display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap}
.fd-body{min-width:0}
.fd-intro p{max-width:70ch;margin:8px 0;color:var(--fg-1)}
.fd-edhead{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.fd-edhead #fd-name{width:auto;min-width:220px;font-size:16px;font-weight:700}
.fd-sp{flex:1}
.fd-grid{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start}
.fd-card{margin:0;border:1px solid var(--line);border-radius:var(--radius-2);background:var(--bg-1);padding:8px;cursor:pointer}
.fd-card.is-on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.fd-card figcaption{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-family:var(--font-mono);font-size:12px}
.fd-card figcaption small{color:var(--fg-3);font-size:10px;text-transform:uppercase;letter-spacing:.05em}
.fd-card figcaption .btn{padding:2px 8px;margin-left:auto}
.fd-card canvas{display:block;max-width:100%;height:auto;image-rendering:pixelated;touch-action:none;border-radius:var(--radius-1)}
.fd-card.is-on canvas{cursor:crosshair}
.fd-small .fd-card{padding:4px;cursor:default}
/* The editor: toolbox column (sticky, scrolls on its own) beside the work area. */
.fd-ed{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
.fd-ed.has-tools{grid-template-columns:280px minmax(0,1fr)}
.fd-toolcol{position:sticky;top:0;max-height:calc(100dvh - 56px);overflow-y:auto;overscroll-behavior:contain;box-sizing:border-box;margin:0}
.fd-toolcol .fd-tb select{max-width:100%}
.fd-work{min-width:0}
.fd-tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:16px;align-items:start}
.fd-box h2 small{font-weight:400;text-transform:none;letter-spacing:0;margin-left:6px}
.fd-tb{display:flex;flex-wrap:wrap;gap:6px}
.fd-tb select{width:auto;max-width:200px}
.fd-file{position:relative;overflow:hidden}
.fd-tray{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.fd-tray .label small{text-transform:none;letter-spacing:0;margin-left:6px}
.fd-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.fd-chip{cursor:grab;border:1px solid var(--control);background:var(--bg-2);color:var(--fg-0);font-size:12px;padding:4px 10px}
.fd-chip:hover{border-color:var(--accent)}
.fd-chip:active{cursor:grabbing}
.fd-file input{position:absolute;inset:0;opacity:0;cursor:pointer}
.fd-layers{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.fd-layers li{display:flex;align-items:center;gap:6px;border:1px solid transparent;border-radius:var(--radius-1);padding:2px 4px}
.fd-layers li.is-sel{border-color:var(--accent);background:var(--accent-dim)}
.fd-lname{flex:1;text-align:left;border:0;background:transparent;cursor:pointer;color:var(--fg-0);padding:4px 2px;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fd-lbtns{display:flex;gap:2px}
.fd-lbtns .icon-btn{width:24px;height:24px;font-size:11px}
.fd-props label{font-family:var(--font-mono);font-size:var(--label-size);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2);display:inline-flex;align-items:center;gap:6px}
.fd-props label.checkbox{font-family:var(--font-body);font-size:13px;text-transform:none;letter-spacing:0;color:var(--fg-1)}
.fd-row{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;padding:5px 0}
.fd-row select{width:auto}
.fd-row input[type=number]{width:64px}
.fd-row input[type=color]{width:40px;height:28px;padding:0;border:1px solid var(--control);background:var(--bg-2)}
.fd-wide{display:flex!important;flex-direction:column;align-items:stretch!important;width:100%;padding:5px 0}
.fd-wide textarea{width:100%;box-sizing:border-box;font-family:var(--font-mono);font-size:13px;border:1px solid var(--control);background:var(--bg-2);color:var(--fg-0);border-radius:var(--radius-1);padding:6px 8px;text-transform:none;letter-spacing:0}
.fd-signrow{border-top:1px solid var(--line);padding:12px 0}
.fd-signrow h3{font-size:13px;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.06em;margin:0 0 8px;color:var(--fg-1)}
@media (max-width:1200px){.fd-ed.has-tools{grid-template-columns:1fr}.fd-toolcol{position:static;max-height:none}}
@media (max-width:900px){.fd{grid-template-columns:1fr}.fd-side{position:static}}