/* Template numbers and Needs Improvement notes (29 Oct 2026; js/designs/tplnotes.js, js/tplnotes-hq.js). Read by HQ (admin.html) and the
   designer (design.html); staff only. Tokens only: --panel, --tint, --ring, --muted, --ink, --radius, --card-sh. */
.tn-no{display:block;font-size:10.5px;font-weight:600;letter-spacing:.03em;color:var(--muted);line-height:1.3}
.tn-no.tn-in{display:inline-block}
.tn-flag{font:inherit;font-size:11px;font-weight:500;color:var(--ink);background:transparent;border:0;border-radius:var(--radius-sm,6px);padding:3px 6px;margin:0 -2px;cursor:pointer;text-decoration:underline;text-decoration-color:var(--line,rgba(0,0,0,.2));text-underline-offset:2px}
.tn-flag:hover{background:var(--tint)}
.tn-flag.on{background:var(--tint);box-shadow:var(--ring);text-decoration:none}
.tn-back{position:fixed;inset:0;z-index:2147483000;background:rgba(20,26,32,.45);display:grid;place-items:center;padding:16px}
.tn-box{width:min(440px,100%);max-height:92vh;overflow:auto;background:var(--card,#fff);color:var(--ink);border-radius:var(--radius,10px);box-shadow:0 18px 50px rgba(20,26,32,.28);padding:18px;display:grid;gap:10px}
.tn-box h3{margin:0;font-size:15px;font-weight:500;line-height:1.35}
.tn-box h3 small{display:block;font-size:12px;font-weight:400;color:var(--muted);margin-top:2px}
.tn-box label{font-size:12px;font-weight:500;margin:0}
.tn-box textarea{width:100%;box-sizing:border-box;border:0;border-radius:var(--radius-sm,6px);background:var(--panel);color:var(--ink);font:inherit;font-size:13px;line-height:1.45;padding:10px 12px;resize:vertical;min-height:96px}
.tn-box textarea:focus{outline:0;box-shadow:var(--ring)}
.tn-prev,.tn-help{margin:0;font-size:11.5px;color:var(--muted);line-height:1.45}
.tn-acts{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.tn-b{font:inherit;font-size:13px;font-weight:500;height:36px;padding:0 16px;border:0;border-radius:var(--radius-sm,6px);background:var(--panel);color:var(--ink);cursor:pointer}
.tn-b:hover{background:var(--tint)}
.tn-b.tn-go{background:var(--primary,var(--primary));color:#fff}
.tn-b.tn-go:hover{filter:brightness(1.08)}
/* the Template Notes page in HQ (cards scoped to .tn-list since 31 Oct 2026: admin.css has its own .tn-card on Capacity) */
.tn-page .tn-bar{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin:4px 0 12px}
.tn-page .tn-bar .segctl{margin:0}
.tn-page .tn-bar .tn-sp{flex:1}
.tn-list{display:grid;gap:10px}
.tn-list .tn-card{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;background:var(--card);box-shadow:var(--card-sh);border-radius:var(--radius);padding:12px;align-items:start}
.tn-list .tn-card img{width:96px;height:96px;object-fit:contain;background:var(--panel);border-radius:var(--radius-sm,6px)}
.tn-list .tn-card .tn-ph{width:96px;height:96px;border-radius:var(--radius-sm,6px);background:var(--panel)}
.tn-list .tn-card h4{margin:0 0 2px;font-size:13px;font-weight:500;line-height:1.35}
.tn-list .tn-card h4 small{font-weight:400;color:var(--muted);font-size:11.5px}
.tn-list .tn-card p{margin:4px 0;font-size:13px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.tn-list .tn-card .tn-fix{color:var(--muted);font-size:12px}
.tn-list .tn-card .tn-meta{font-size:11px;color:var(--muted)}
.tn-list .tn-card .tn-row{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;margin-top:6px}
.tn-list .tn-card .tn-row a,.tn-list .tn-card .tn-row button.linkbtn{font-size:12px}
.tn-list .tn-card.fixed{opacity:.75}
@media (max-width:480px){.tn-list .tn-card{grid-template-columns:64px minmax(0,1fr)}.tn-list .tn-card img,.tn-list .tn-card .tn-ph{width:64px;height:64px}}
/* designer: the number line and the mark in the page pane */
.tn-dz{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:0 0 10px;padding:8px 10px;background:var(--panel);border-radius:var(--radius)}
.tn-dz .tn-no{display:inline;font-size:12px;color:var(--ink)}
.tn-dz .tn-flag{margin:0}
.dzg-t .tn-no{margin-top:-1px}
.dsq-find{margin:0}
.dsq-find input{height:34px;min-width:210px;border:0;border-radius:var(--radius-sm,6px);background:var(--card,#fff);box-shadow:var(--card-sh);color:var(--ink);padding:0 12px;font:inherit;font-size:13px}
.dsq-find input:focus{outline:0;box-shadow:var(--ring)}
.tn-fixform{display:grid;gap:6px;margin-top:8px}
.tn-fixform textarea{width:100%;box-sizing:border-box;border:0;border-radius:var(--radius-sm,6px);background:var(--panel);color:var(--ink);font:inherit;font-size:13px;padding:8px 10px;min-height:64px;resize:vertical}
/* the number on the thumbnail's corner of every HQ design card */
.dsq-t{position:relative}
.tn-chip{position:absolute;top:14px;left:14px;z-index:1;font-size:11px;font-weight:600;letter-spacing:.02em;line-height:1;color:var(--ink);background:var(--card,#fff);box-shadow:var(--card-sh);border-radius:var(--tag-radius);corner-shape:var(--tag-shape);padding:4px 8px;pointer-events:none}

/* ---- Lessons (29 Oct 2026, the owner template editor): what the owner changed when publishing a template, with a small before and after ---- */
.tn-flag.tn-edit{display:inline-flex;align-items:center;text-decoration:underline}
.tn-list .tl-card{grid-template-columns:auto minmax(0,1fr)}
.tl-pics{display:flex;gap:8px;align-items:flex-start}
.tl-pics figure{margin:0;display:grid;gap:4px;justify-items:center}
.tl-pics img{width:110px;height:auto;border-radius:var(--radius-sm,6px);background:var(--panel);box-shadow:0 0 0 1px var(--line)}
.tl-pics figcaption{font-size:11px;color:color-mix(in srgb,var(--muted) 78%,var(--ink))}
.tl-sum{margin:4px 0 6px;padding-left:18px;font-size:12.5px;line-height:1.5}
@media (max-width:600px){.tn-list .tl-card{grid-template-columns:minmax(0,1fr)}.tl-pics img{width:96px}}
/* Logo Shapes (29 Oct 2026): a template number, then the designer's Show All Shapes sheet in a frame */
.tn-shform{display:grid;gap:6px;max-width:440px;margin:0 0 12px}
.tn-shform label{font-weight:500}.tn-shform label small{display:block;font-weight:400}
.tn-shrow{display:flex;gap:8px}.tn-shrow input{flex:1;min-width:0}
.tn-shhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:0 0 8px}
.tn-shhead a{margin-left:auto}
.tn-shframe{display:block;width:100%;height:min(80vh,900px);border:0;border-radius:var(--radius-sm,8px);background:var(--page-bg,#F3F5F7);box-shadow:var(--card-sh,0 1px 3px rgba(0,0,0,.1))}


/* Templates workspace (30 Oct 2026): the page header names the page, so the pane's own heading is not repeated; Design Studio's one-line pointer */
#tab-settings[data-group="templates"] .setpane>h2,#tab-settings[data-group="templates"] .setpane>h2+p.sub{display:none}
#tab-settings[data-group="templates"] .shopnav{display:none}
.sd-tplmoved{margin:0 0 12px}
/* All Templates: search and product picker first, then the cards; the switches wait in one folded section (30 Oct 2026) */
.dsq-set{margin:0 0 14px;padding:0 16px 4px;border-radius:var(--radius);background:var(--card,#fff);box-shadow:var(--card-sh)}
.dsq-set>summary{cursor:pointer;list-style:none;padding:12px 0;font-weight:500;font-size:14px;color:var(--ink)}
.dsq-set>summary::-webkit-details-marker{display:none}
.dsq-set>summary small{margin-left:8px;font-weight:400;font-size:12.5px;color:var(--ink)}
.dsq-set[open]>summary{margin-bottom:10px;border-bottom:1px solid var(--line)}

/* THE TEMPLATES WORKSPACE ON THE HQ SKIN (30 Oct 2026; Junaid: "Sonnet is not good with CSS... match the rules"): the panes sit on the page tint
   like the AI Creative Studio (no big white box); the bar is a card; the segmented control is the panel-grey track with a white chosen
   segment; empty states are quiet cards; buttons are 42 px, halves on a phone. Tokens only. */
#tab-settings .setpane.tn-page{background:transparent;box-shadow:none;border:0;padding:0}
.tn-page .tn-bar{margin:0 0 12px;padding:10px 12px;border-radius:var(--radius);background:var(--card);box-shadow:var(--card-sh)}
.tn-page .tn-bar .segctl{border:0;background:var(--page-bg);border-radius:var(--radius);padding:4px;gap:2px;overflow:visible}
.tn-page .tn-bar .segctl button{border:0;border-radius:var(--radius-sm);padding:8px 14px;font-size:12.5px;font-weight:500;color:color-mix(in srgb,var(--muted) 78%,var(--ink));min-height:36px}
.tn-page .tn-bar .segctl button[aria-pressed="true"]{background:var(--card);color:var(--ink);font-weight:600;box-shadow:var(--card-sh)}
.tn-page .tn-bar .btn-ghost{height:42px;padding:0 16px;font-weight:500}
.tn-empty{display:flex;flex-direction:column;align-items:center;gap:4px;padding:26px 16px;text-align:center;border-radius:var(--radius);background:var(--card);box-shadow:var(--card-sh);color:var(--muted)}
.tn-empty svg{width:22px;height:22px;color:var(--muted);margin-bottom:4px}
.tn-empty b{font-weight:500;color:var(--ink);font-size:13px}.tn-empty span{font-size:12.5px;max-width:46ch;line-height:1.5}
.tn-list .tn-card{padding:14px}
.tn-list .tn-card .tn-row a,.tn-list .tn-card .tn-row button.linkbtn{min-height:32px;display:inline-flex;align-items:center}
.tn-list .tn-card .mini{height:34px;padding:0 14px;font-size:12.5px}
.tn-shform{max-width:none;padding:14px 16px;margin:0 0 14px;border-radius:var(--radius);background:var(--card);box-shadow:var(--card-sh)}
.tn-shform label{font-size:13px}.tn-shform label small{color:var(--muted);font-size:12px}
.tn-shrow input{height:42px;border:1px solid rgba(127,140,150,.35);border-radius:var(--radius-sm);padding:0 12px;font:inherit;font-size:13px;background:var(--card)}
.tn-shrow .btn-ghost{height:42px;white-space:nowrap}
.tn-shform .src{margin:4px 0 0}
.tn-shframe{background:var(--card)}
@media (max-width:600px){
  .tn-page .tn-bar{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .tn-page .tn-bar .segctl{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .tn-page .tn-bar .segctl button{padding:8px 4px;min-height:40px}
  .tn-page .tn-bar .tn-sp{display:none}
  .tn-page .tn-bar .btn-ghost{width:100%;justify-content:center;min-height:44px}
  .tn-page .tn-bar .btn-ghost:only-of-type{grid-column:1/-1}
  .tn-shrow{flex-direction:column}.tn-shrow .btn-ghost{width:100%;justify-content:center;min-height:44px}
}