/* tpl.css — Yamama Office portal: template galleries + the roomy side rail (task cc169121, Oct 25) */
/* ---------- rail (desktop) ---------- */
@media (min-width:761px){
  :root{--rail:100px}
  .y-rail.yt-rail{width:var(--rail);padding:10px 8px 14px;display:flex;flex-direction:column;gap:2px;overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
  .y-rail.yt-rail::-webkit-scrollbar{width:0;height:0}
  .y-rail.yt-rail a{min-height:60px;padding:8px 4px;gap:5px;font-size:12.5px;font-weight:500;line-height:1.3;border-radius:14px;color:#3d3a55;flex:none}
  .y-rail.yt-rail a svg{width:23px;height:23px;transition:transform .18s ease}
  .y-rail.yt-rail a span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .y-rail.yt-rail a:hover{background:#f1effc;color:var(--deep)}
  .y-rail.yt-rail a:hover svg{transform:translateY(-1px)}
  .y-rail.yt-rail a:focus-visible,.yt-more:focus-visible{outline:2px solid var(--ring);outline-offset:-2px}
  .y-rail.yt-rail a[aria-current=page]{background:linear-gradient(180deg,#efecff,#e5e0ff);color:var(--deep);font-weight:700;box-shadow:inset 0 0 0 1px rgba(75,63,176,.14)}
  .y-rail.yt-rail a[aria-current=page]::before{inset-inline-start:-8px;top:12px;bottom:12px}
  .y-rail.yt-rail a.yt-in-more{display:none}
  .y-rail.yt-rail .yt-gl{font-size:12px;font-weight:700;color:#7a7695;text-align:center;margin:10px 4px 4px;padding-top:10px;border-top:1px solid var(--line);letter-spacing:0}
  .y-rail.yt-rail .yt-more{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:56px;padding:8px 4px;margin-top:6px;border:0;border-top:1px solid var(--line);border-radius:0 0 14px 14px;background:none;font:inherit;font-size:12.5px;font-weight:500;color:#3d3a55;cursor:pointer;flex:none}
  .y-rail.yt-rail .yt-more svg{width:22px;height:22px}
  .y-rail.yt-rail .yt-more:hover,.y-rail.yt-rail .yt-more[aria-expanded=true]{background:#f1effc;color:var(--deep);border-radius:14px}
  /* the old height steps shrank labels to 11 px; keep 12.5 px and let the rail scroll quietly instead */
}
@media (min-width:761px) and (max-height:940px){.y-rail.yt-rail a{min-height:54px;padding:6px 4px;font-size:12.5px;gap:4px}.y-rail.yt-rail a svg{width:22px;height:22px}.y-rail.yt-rail .yt-gl{margin:6px 4px 2px;padding-top:7px}}
@media (min-width:761px) and (max-height:780px){.y-rail.yt-rail a{min-height:50px;font-size:12px}.y-rail.yt-rail .yt-more{min-height:50px;font-size:12px}}
@media (max-width:760px){
  .y-rail.yt-rail .yt-gl,.y-rail.yt-rail .yt-more{display:none}
  .y-rail.yt-rail a,.y-rail.yt-rail .y-rmore{font-size:12px}
  .yt-fly,.yt-tip{display:none!important}
}
.yt-tip{position:fixed;z-index:200;max-width:240px;padding:9px 12px;border-radius:12px;background:#231b5c;color:#fff;box-shadow:0 12px 30px -10px rgba(27,25,48,.45);font-size:13px;line-height:1.45;pointer-events:none;display:flex;flex-direction:column;gap:2px}
.yt-tip[hidden]{display:none}
.yt-tip b{font-weight:700}.yt-tip span{color:#d9d4ff;font-size:12.5px}
.yt-fly{position:fixed;z-index:120;width:290px;padding:10px;border-radius:18px;background:#fff;border:1px solid var(--line,#e4e1f1);box-shadow:0 24px 60px -18px rgba(42,31,110,.35);display:flex;flex-direction:column;gap:2px}
.yt-fly[hidden]{display:none}
.yt-fh{font-size:12.5px;color:#4a4666;padding:4px 10px 8px} /* w19: was #625e7e (6.1:1 on white) — Firefox read 4.33:1 over the menu's translucent fade-in; now ~8.6:1 */
.yt-fly a,.yt-fly button{display:flex;gap:12px;align-items:center;padding:10px;border-radius:12px;text-decoration:none;color:#1b1930;border:0;background:none;font:inherit;text-align:start;cursor:pointer;width:100%}
.yt-fly a:hover,.yt-fly button:hover,.yt-fly a:focus-visible,.yt-fly button:focus-visible{background:#f1effc;outline:none}
.yt-fly svg{width:22px;height:22px;flex:none;color:var(--brand,#4b3fb0)}
.yt-fly span{display:flex;flex-direction:column;min-width:0}.yt-fly b{font-size:14px}.yt-fly small{font-size:12.5px;color:#6b6785}
.yt-fly .yt-all{border-top:1px solid var(--line,#e4e1f1);border-radius:0 0 12px 12px;margin-top:4px}
/* ---------- gallery ---------- */
.yt-from{display:inline-flex;align-items:center;gap:8px}
.yt-from svg{width:18px;height:18px}
.y-empty.yt-empty{display:none}
.yt-gal{margin:18px 0 8px;padding:22px;border-radius:22px;background:linear-gradient(135deg,#f6f4ff 0%,#fbfaff 55%,#f1f8ff 100%);border:1px solid #e7e3fb}
.yt-head{display:flex;gap:14px;align-items:center;margin-bottom:16px}
.yt-head h2{margin:0;font-size:18px;color:#1b1930}
.yt-head p{margin:4px 0 0;font-size:14px;color:#55526b;line-height:1.6}
.yt-badge{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;flex:none;color:#fff;background:linear-gradient(135deg,#6d5ce8,#4b3fb0);box-shadow:0 8px 18px -8px rgba(75,63,176,.6)}
.yt-badge svg{width:22px;height:22px}
.yt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.yt-card{position:relative;display:flex;flex-direction:column;gap:10px;text-align:start;padding:16px;border-radius:18px;border:1px solid #e9e6f6;background:#fff;cursor:pointer;font:inherit;color:#1b1930;transition:transform .18s ease,box-shadow .18s ease,border-color .18s;min-height:178px}
.yt-card:hover,.yt-card:focus-visible{transform:translateY(-2px);box-shadow:0 18px 36px -20px rgba(42,31,110,.45);border-color:color-mix(in srgb,var(--h) 40%,#e9e6f6);outline:none}
.yt-card:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--h) 35%,transparent)}
.yt-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none;color:var(--h);background:color-mix(in srgb,var(--h) 12%,#fff)}
.yt-ic svg{width:21px;height:21px}
.yt-ic.sm{width:34px;height:34px;border-radius:10px}.yt-ic.sm svg{width:18px;height:18px}
.yt-card .yt-ic{position:absolute;top:16px;inset-inline-start:16px}
.yt-tx{display:flex;flex-direction:column;gap:3px;padding-inline-start:52px;min-height:40px}
.yt-tx b{font-size:15.5px;line-height:1.35}.yt-tx small{font-size:13px;color:#6b6785;line-height:1.45}
.yt-pv{list-style:none;margin:0;padding:10px 12px;border-radius:12px;background:#faf9fe;border:1px dashed #e4e0f5;display:flex;flex-direction:column;gap:5px;flex:1}
.yt-pv li{font-size:12.5px;color:#4a4763;line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative;padding-inline-start:12px}
.yt-pv li::before{content:"";position:absolute;inset-inline-start:0;top:.62em;width:5px;height:5px;border-radius:50%;background:color-mix(in srgb,var(--h) 70%,#fff)}
.yt-pv i{font-style:normal;color:#8a86a3}
.yt-go{align-self:flex-start;font-size:13px;font-weight:700;color:var(--h);padding:6px 12px;border-radius:999px;background:color-mix(in srgb,var(--h) 10%,#fff)}
.yt-card:hover .yt-go{background:var(--h);color:#fff}
.yt-gal.compact{padding:18px}
.yt-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.yt-chip{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:14px;background:#fff;border:1px solid #e9e6f6;text-decoration:none;color:#1b1930;transition:transform .15s,box-shadow .15s}
.yt-chip:hover,.yt-chip:focus-visible{transform:translateY(-1px);box-shadow:0 12px 26px -16px rgba(42,31,110,.45);outline:none}
.yt-chip .yt-ic{color:var(--h);background:color-mix(in srgb,var(--h) 12%,#fff)}
.yt-chip span:last-child{display:flex;flex-direction:column;min-width:0}.yt-chip b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.yt-chip small{font-size:12.5px;color:#6b6785}
.yt-types{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0 14px}
.yt-types>span{font-size:13px;font-weight:700;color:#55526b;margin-inline-end:2px}
.yt-tchip{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;border:1px solid #e6e2f6;background:#fff;font:inherit;font-size:13px;color:#2d2a45;cursor:pointer;transition:background .15s,border-color .15s}
.yt-tchip svg{width:16px;height:16px;color:var(--h)}
.yt-tchip:hover,.yt-tchip:focus-visible{background:color-mix(in srgb,var(--h) 9%,#fff);border-color:color-mix(in srgb,var(--h) 35%,#e6e2f6);outline:none}
.yt-dlg{width:min(980px,96vw);max-height:90vh;padding:22px!important}
.yt-dlg::backdrop{background:rgba(27,25,48,.45);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.yt-dtop{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.yt-dtop h2{margin:0;font-size:19px}
.yt-x{width:38px;height:38px;border-radius:12px;border:0;background:#f1effc;color:#2a1f6e;display:grid;place-items:center;cursor:pointer}
.yt-x svg{width:18px;height:18px}.yt-x:hover{background:#e6e1ff}
@media (max-width:760px){
  .yt-gal{padding:16px;border-radius:18px;margin:14px 0}
  .yt-grid{grid-template-columns:1fr 1fr;gap:10px}
  .yt-card{padding:12px;min-height:0;gap:8px}
  .yt-card .yt-ic{position:static;width:34px;height:34px}
  .yt-tx{padding-inline-start:0;min-height:0}
  .yt-tx b{font-size:14.5px}.yt-tx small{font-size:12.5px}
  .yt-pv{display:none}
  .yt-row{grid-template-columns:1fr 1fr}
  .yt-head h2{font-size:16.5px}.yt-head p{font-size:13px}
  .yt-types{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}.yt-types::-webkit-scrollbar{display:none}
  .yt-tchip{flex:none}
  .yt-dlg{padding:16px!important}
}
@media (max-width:360px){.yt-grid,.yt-row{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.yt-card,.yt-chip,.y-rail.yt-rail a svg{transition:none}.yt-card:hover{transform:none}}
/* dark (when the portal runs a dark theme) */
html[data-theme=dark] .yt-gal,html.dark .yt-gal{background:linear-gradient(135deg,#1f1b38,#191629);border-color:#2e2950}
html[data-theme=dark] .yt-card,html.dark .yt-card,html[data-theme=dark] .yt-chip,html.dark .yt-chip,html[data-theme=dark] .yt-tchip,html.dark .yt-tchip{background:#211d3a;border-color:#332d58;color:#ece9ff}
html[data-theme=dark] .yt-pv,html.dark .yt-pv{background:#1a1730;border-color:#332d58}
html[data-theme=dark] .yt-pv li,html.dark .yt-pv li,html[data-theme=dark] .yt-head p,html.dark .yt-head p{color:#c4bfe6}
html[data-theme=dark] .yt-head h2,html.dark .yt-head h2{color:#f3f1ff}
html[data-theme=dark] .yt-fly,html.dark .yt-fly{background:#211d3a;border-color:#332d58}
html[data-theme=dark] .yt-fly a,html.dark .yt-fly a,html[data-theme=dark] .yt-fly button,html.dark .yt-fly button{color:#ece9ff}

.yt-fly svg.yoi{width:30px;height:30px}

/* W14 0365be3b: contrast + touch targets (crawler H13/H07) */
:root:root .yt-go{color:color-mix(in srgb,var(--h) 62%,#000)}
:root:root .yt-card:hover .yt-go{color:#fff;background:color-mix(in srgb,var(--h) 80%,#000)}
@media (max-width:760px),(pointer:coarse){:root:root :is(.yt-tchip,button.chip,.yt-chip){min-height:44px}}