/* The menu bar, its two panels, the dock, and the palette's name card.
 * Tokens come from brana.css. */

/* ---------- The bar: icons, almost no words ---------- */
.ic { width: 18px; height: 18px; display: block; flex: none }
#bar [data-icon] { display: inline-grid; place-items: center }
#bar button { position: relative; transition: background .15s, color .15s }
.barbtn { flex: none; display: flex; align-items: center; justify-content: center; width: 46px; padding: 0 !important; border-right: 1px solid var(--line) }
.barbtn .ic { width: 20px; height: 20px }
.barbtn:hover, .barbtn[aria-expanded="true"], #bar .right:hover, #bar .logo:hover { background: color-mix(in srgb, var(--fg) 9%, transparent) }
.barbtn[aria-expanded="true"] { color: var(--rubric); box-shadow: inset 0 -2px 0 var(--rubric) }
.pal-dot { display: inline-grid; width: 20px; height: 20px; position: relative }
.pal-dot svg { width: 20px; height: 20px; transition: transform .5s cubic-bezier(.3, 1.5, .5, 1) }
#paletteBtn:hover .pal-dot svg { transform: rotate(-14deg) scale(1.08) }
#bar .avail { gap: 0; font-size: 11px; letter-spacing: .04em }
#secretCount { font-size: 11.5px; letter-spacing: .02em }

/* each icon says what it is on hover */
@media (hover: hover) {
  #bar [data-tip]:hover::after, #bar [data-tip]:focus-visible::after {
    content: attr(data-tip); position: absolute; top: calc(100% + 7px); left: 50%; translate: -50% 0; z-index: 80;
    padding: 4px 9px; white-space: nowrap; pointer-events: none;
    font: 11px/1.4 var(--mono); letter-spacing: .02em; color: var(--bg); background: var(--fg);
    box-shadow: 3px 3px 0 var(--rubric); animation: tip .16s ease both;
  }
  #bar .right[data-tip]:hover::after, #bar .right[data-tip]:focus-visible::after { left: auto; right: 6px; translate: none }
  #bar [aria-expanded="true"]::after { display: none }
}
@keyframes tip { from { opacity: 0; transform: translateY(-3px) } }
/* until someone has tried a palette, the button breathes */
#paletteBtn.nudge .pal-dot::after { content: ""; position: absolute; inset: -5px; border: 2px solid var(--rubric); border-radius: 50%; animation: palpulse 1.8s ease-out infinite }
@keyframes palpulse { from { transform: scale(.6); opacity: .9 } to { transform: scale(1.6); opacity: 0 } }
#secrets { gap: 7px; flex: none }
#rewardBtn, #bar .logo { flex: none }
#secrets .ic { width: 19px; height: 19px; color: var(--rubric) }
#rewardBtn .ic { width: 19px; height: 19px }

/* ---------- The panels ---------- */
.panel-pop {
  position: fixed; z-index: 70; width: 320px; max-height: calc(100vh - 60px); overflow: auto;
  padding: 10px 10px 12px; background: var(--panel);
  border: 1.5px solid var(--fg); box-shadow: 6px 6px 0 var(--rubric);
  opacity: 0; transform: translateY(-8px) scale(.98); transform-origin: top left;
  transition: opacity .2s ease, transform .22s cubic-bezier(.2, .9, .3, 1.1);
}
.panel-pop.on { opacity: 1; transform: none }
.panel-pop.wide-pop { width: 560px }
.pp-head { display: flex; align-items: baseline; gap: 10px; padding: 2px 4px 8px; border-bottom: 1px dashed var(--line); margin-bottom: 4px }
.pp-head b { font-size: 20px; color: var(--rubric); font-weight: 400 }
.pp-head span { font-size: 11px; color: var(--ink-soft); flex: 1 }
.pp-x { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--line) }
.pp-x .ic { width: 14px; height: 14px }
.pp-sec { margin: 10px 4px 4px; font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--rubric); display: flex; gap: 8px; align-items: center }
.pp-sec::after { content: ""; flex: 1; height: 1px; background: var(--line) }
.pp-item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 7px 8px; transition: background .15s, padding .15s }
.pp-item .ic { width: 22px; height: 22px; color: var(--rubric) }
.pp-item b { display: block; font-family: var(--serif); font-size: 18px; font-weight: 700; line-height: 1.1 }
.pp-item small { font-size: 10.5px; color: var(--ink-soft) }
.pp-item:hover, .pp-item:focus-visible { background: color-mix(in srgb, var(--rubric) 10%, transparent); padding-left: 12px }
.pp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px }
.pp-tool { position: relative; display: flex; align-items: center; gap: 8px; padding: 8px 9px; font-size: 11.5px; text-align: left; border: 1px solid var(--line); transition: border-color .15s, background .15s }
.pp-tool .ic { color: var(--rubric) }
.pp-tool em { margin-left: auto; font-style: normal; font-size: 10px; color: var(--ink-soft) }
.pp-tool:hover { border-color: var(--fg); background: color-mix(in srgb, var(--fg) 5%, transparent) }
.pp-settings { display: grid; gap: 6px }
.pp-lang { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border: 1px solid var(--line) }
.pp-lang .ic { color: var(--rubric); margin-right: 4px }
.pp-lang button { flex: 1; padding: 4px 8px; font-size: 12px; border: 1px solid transparent }
.pp-lang button[aria-pressed="true"] { background: var(--fg); color: var(--bg) }
.pp-foot { display: flex; align-items: center; gap: 8px; margin: 12px 4px 0; padding-top: 10px; border-top: 1px dashed var(--line) }
.pp-foot > button { display: flex; align-items: center; font-size: 11px; color: var(--green) }
.pp-foot .dot { margin-right: 6px }
.pp-social { display: flex; gap: 4px; margin-left: auto }
.pp-social a { display: grid; place-items: center; width: 32px; height: 32px; color: var(--fg); border: 1px solid var(--line); transition: color .15s, border-color .15s }
.pp-social a:hover { color: var(--rubric); border-color: var(--rubric) }
.pp-social .ic { width: 16px; height: 16px }

/* palette tiles, each painted in its own palette */
.pal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px }
.pal-tile {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 10px 9px; text-align: left;
  background: var(--tbg); color: var(--tfg); border: 2px solid color-mix(in srgb, var(--t1) 55%, transparent);
  transition: transform .2s ease, box-shadow .2s ease;
}
.pal-tile svg { width: 38px; height: 38px; margin-bottom: 4px; transition: transform .5s cubic-bezier(.3, 1.5, .5, 1) }
.pal-tile b { font-size: 20px; font-weight: 400; line-height: 1.1; color: var(--t1) }
.pal-tile span { font-family: var(--serif); font-size: 15px; font-weight: 700 }
.pal-tile small { font-size: 9.5px; line-height: 1.3; opacity: .75 }
.pal-tile:hover { transform: translateY(-3px); box-shadow: 4px 4px 0 var(--t1) }
.pal-tile:hover svg { transform: rotate(45deg) scale(1.08) }
.pal-tile.on { border-color: var(--t1); box-shadow: 0 0 0 2px var(--tbg), 0 0 0 4px var(--t1) }
.pal-tile.on::after { content: "✓"; position: absolute; top: 6px; right: 8px; color: var(--t1); font-weight: 700 }

/* the palette's name, said once in the middle as it soaks in */
#paletteName {
  position: fixed; left: 50%; top: 42%; z-index: 66; translate: -50% -50%; pointer-events: none; text-align: center;
  padding: 16px 30px 14px; background: color-mix(in srgb, var(--panel) 88%, transparent); border: 2px solid var(--fg); box-shadow: 6px 6px 0 var(--rubric);
  opacity: 0; visibility: hidden;
}
#paletteName.on { visibility: visible; animation: palname 2.3s ease both }
@keyframes palname { 0% { opacity: 0; transform: scale(.9) } 14%, 75% { opacity: 1; transform: none } 100% { opacity: 0; transform: translateY(-10px) } }
#paletteName b { display: block; font-size: 54px; line-height: 1; color: var(--rubric); font-weight: 400; text-shadow: 2px 2px 0 var(--fg) }
#paletteName span { display: block; font-family: var(--serif); font-style: italic; font-size: 24px; margin-top: 4px }
#paletteName small { font-size: 11px; color: var(--ink-soft); letter-spacing: .08em }

/* ---------- The dock: icons only ---------- */
#dock .ic { width: 24px; height: 24px; color: var(--rubric) }
#dock button { position: relative; display: grid; place-items: center; min-width: 52px; height: 44px; border: 0 }
#dock button:active .ic { transform: scale(.88) }
#dock .count { position: absolute; top: 2px; right: 8px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 8px; font-size: 9px; line-height: 16px; text-align: center; background: var(--rubric); color: var(--parchment) }

@media (max-width: 1000px) { #bar .avail-t { display: none } #bar .avail .dot { margin-right: 0 } }
@media (max-width: 760px) {
  #menuBtn { display: none }                 /* phones open the menu from the dock */
  .panel-pop, .panel-pop.wide-pop {
    left: 0 !important; right: 0; top: auto !important; bottom: 0; width: 100%; max-height: 84vh;
    border-width: 2px 0 0; border-radius: 16px 16px 0 0; box-shadow: 0 -10px 40px var(--shadow);
    transform: translateY(100%); transition: transform .32s cubic-bezier(.2, .9, .3, 1), opacity .2s;
  }
  .panel-pop.on { transform: none }
  body.panel-open::before { content: ""; position: fixed; inset: 0; z-index: 69; background: rgba(0, 0, 0, .28) }
  .pal-grid { grid-template-columns: repeat(3, 1fr); gap: 6px }
  .pal-tile { padding: 8px }
  .pal-tile small { display: none }
  .pp-social a { width: 36px; height: 36px }
  .pal-tile svg { width: 32px; height: 32px }
  #paletteName b { font-size: 44px }
}