/* KEYSTONE app launcher — the waffle.
 *
 * Its own stylesheet rather than a section of keystone-app.css. The brief
 * preferred appending, so apps adopting the shared bar would need nothing
 * extra -- but Watchtower, the pilot, is a Tailwind app that does not load
 * keystone-app.css at all, and loading the whole of it to get a panel would
 * restyle the app around it. One small file every app can take is the version
 * that works in both kinds of app.
 *
 * Light only: there is no dark variant by design.
 */

/* Every token below carries its own fallback. This stylesheet is loaded by apps
 * that do not load keystone-app.css -- that is the reason it exists -- and a
 * var() with no fallback and no :root resolves to nothing: the panel came out
 * with no background and the button's dots with no colour, which is exactly how
 * it shipped to Watchtower the first time. A stylesheet that stands alone has
 * to actually stand alone.
 */
/* button.appbar__launcher, not .appbar__launcher. Apps style their own bars
   with rules like `.app-nav button { background: transparent; border: 0 }`,
   which is (0,1,1) and beats a bare class. Matching that specificity and
   loading this stylesheet last is what keeps the waffle looking like a waffle
   inside someone else's navigation. */
button.appbar__launcher {
  width: 38px; height: 38px; padding: 9px; flex: 0 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px;
  align-content: center; justify-items: center;
  border: 0; border-radius: 9px; background: rgba(255, 255, 255, .10);
  cursor: pointer;
}
button.appbar__launcher:hover { background: rgba(255, 255, 255, .18); }
button.appbar__launcher i { width: 5px; height: 5px; border-radius: 1.5px; background: var(--grey, #E6DDCB); display: block; }

/* The launcher sets its own box model. An app that does not declare
   `* { box-sizing: border-box }` leaves these elements on the default
   content-box, where padding is added to max-height: the panel came out 34px
   taller than the height it was given and hung off the bottom of the screen.
   Scoped to the launcher's own elements, so it changes nothing in the host. */
.kl-host, .kl-host *, .appbar__launcher { box-sizing: border-box; }

.kl-host { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; }
.kl-host > * { pointer-events: auto; }

.kl-panel {
  /* overscroll-behavior: contain stops the scroll chaining to the page behind.
     Without it, reaching the end of this list hands the wheel to the app and
     the page lurches away under the panel. */
  /* max-height is set in JS from the panel's real top edge -- this is only the
     fallback before the first anchor() runs. */
  position: fixed; width: 360px; max-height: calc(100vh - 92px);
  overflow: auto; overscroll-behavior: contain;
  /* A fade at the bottom while there is more to scroll to, and none once you
     reach the end. Two layers pinned to the element plus two that scroll with
     the content: where the content covers the shadow, it is hidden. No JS, so
     it cannot fall out of step with the scroll position. */
  background-image:
    linear-gradient(var(--paper, #FAF7F1) 30%, rgba(250, 247, 241, 0)),
    linear-gradient(rgba(250, 247, 241, 0), var(--paper, #FAF7F1) 70%),
    linear-gradient(rgba(27, 32, 52, .10), rgba(27, 32, 52, 0)),
    linear-gradient(rgba(27, 32, 52, 0), rgba(27, 32, 52, .13));
  background-position: 0 0, 0 100%, 0 0, 0 100%;
  background-size: 100% 26px, 100% 34px, 100% 10px, 100% 13px;
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
  padding: 20px 18px 14px; color: var(--navy, #1B2034); background: var(--paper, #FAF7F1);
  border: 1px solid rgba(27, 32, 52, .14); border-radius: 20px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .34);
}
.kl-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.kl-title { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.kl-pencil {
  /* padding, line-height and a block-level svg, for the same reason as .kl-pin:
     an inline svg sits on the button's text baseline and leaves descender space
     under it, so place-items centres a box that is taller than the icon. */
  width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center;
  padding: 0; line-height: 0;
  color: var(--navy, #1B2034); background: var(--white, #FFFFFF);
  border: 1px solid rgba(27, 32, 52, .18); border-radius: 8px; cursor: pointer;
}
.kl-pencil svg { display: block; }
.kl-pencil:hover { background: var(--grey-soft, #F1ECE0); }
.kl-pencil[aria-pressed="true"] { background: var(--gold-soft, #FDF3D9); border-color: var(--gold-deep, #B7892A); }
.kl-rule { display: block; width: 56px; height: 3px; margin: 9px 0 14px; background: var(--gold, #DEAC35); border-radius: 2px; }

.kl-grid { display: grid; gap: 10px 6px; margin-bottom: 16px; }
/* Favourites sit on their own surface, the way Google's do: a raised block,
   separated from the full list below rather than being the first rows of it.
   White on the panel's paper -- a small difference, but the only two surfaces
   in play, so it reads. */
.kl-grid--3 {
  grid-template-columns: repeat(3, 1fr);
  padding: 12px 10px 4px; margin-bottom: 18px;
  background: var(--white, #FFFFFF);
  border: 1px solid rgba(27, 32, 52, .09);
  border-radius: 14px;
}
.kl-grid--4 { grid-template-columns: repeat(4, 1fr); }

.kl-tile {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 6px 2px; border-radius: 10px; color: var(--navy, #1B2034); text-decoration: none;
}
.kl-tile:hover { background: rgba(27, 32, 52, .05); }
.kl-tile:focus-visible { outline: 2px solid var(--navy, #1B2034); outline-offset: 2px; }
/* The app you are in: dimmed, ringed, and not a link. It keeps its name, so
   the list never looks like it is missing something. */
.kl-tile--here { opacity: .6; }
.kl-tile--here .kl-tile__art { box-shadow: 0 0 0 2px var(--navy, #1B2034) inset; }
/* A hairline on every tile. The tints are 30% of an app's accent over white,
   so the pale yellows -- Photo Prep, Letter Studio, TapTen -- sit almost on top
   of the paper behind them and the tile stops reading as a tile. The stroke is
   what gives every one an edge, not just the dark ones. */
.kl-tile__art {
  display: grid; place-items: center; border-radius: 12px;
  background: var(--grey-soft, #F1ECE0);
  border: 1px solid rgba(27, 32, 52, .17);
}
/* One tile size. Favourites were 44px and the groups below 34px, so the same
   app looked like two different things depending on where it appeared. The
   larger one is the better one; the groups just fit four of them per row. */
/* 48px tile, 38px icon. It was 44 and 28, which left eight pixels of padding on
   every side -- and the drawings are already inset inside their own 64-unit
   canvas, so the mark people actually saw was smaller again. */
.kl-tile__art { width: 48px; height: 48px; }
/* The gallery's icons carry gold details, which work on its own paper-coloured
   cards. On a 44px tile in the app's own colour they do not: measured against
   every accent, gold ranges from 1.00:1 to 1.75:1 -- invisible at the 30% tint
   these tiles used to be, and no better at full strength. The whole mark is
   navy here, and the soft fill becomes white, so one icon reads the same way on
   twenty-five different grounds. CSS beats the presentation attributes the
   endpoint bakes in, so this needs no change at the gallery end. */
.kl-tile__art .icon-gold { stroke: var(--navy, #1B2034); }
.kl-tile__art .icon-gold-fill { fill: var(--navy, #1B2034); }
.kl-tile__art .icon-soft { fill: rgba(255, 255, 255, .62); }
.kl-tile__art svg { width: 38px; height: 38px; }
/* 600, not the inherited 400: at 12px over a tint, the regular weight read as
   thin and the names were hard to scan. Apps that load only one Lato face (most
   of them) get a synthetically emboldened 400, which is what .kl-title already
   does here; apps with a real semibold get the better face. */
.kl-tile__name {
  max-width: 94px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12px; font-weight: 600; line-height: 1.2; text-align: center;
}
.kl-grid--4 .kl-tile__name { max-width: 76px; }

.kl-pin {
  /* grid + place-items, and a drawn glyph rather than a typed one: a button's
     default text baseline put the + and the − at different heights inside the
     same circle, and neither sat in the middle. padding and line-height are
     zeroed because a host app's own `button { padding }` would otherwise shift
     the icon off centre again. */
  position: absolute; top: 0; right: 2px; width: 20px; height: 20px;
  display: grid; place-items: center; padding: 0; line-height: 0;
  color: var(--navy, #1B2034); background: var(--white, #FFFFFF);
  border: 1px solid rgba(27, 32, 52, .22); border-radius: 50%; cursor: pointer;
}
.kl-pin svg { display: block; }
.kl-pin--on { color: var(--white, #FFFFFF); background: var(--navy, #1B2034); border-color: var(--navy, #1B2034); }

.kl-section {
  margin: 0 0 7px; color: var(--navy-70);
  font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.kl-foot { margin-top: 4px; padding-top: 12px; padding-bottom: 8px; border-top: 1px solid rgba(27, 32, 52, .14); }
.kl-all { color: var(--navy, #1B2034); font-size: 13px; font-weight: 700; text-decoration: none; }
.kl-all:hover { text-decoration: underline; }

/* A phone gets a sheet, never a 360px popover pinned to a corner. */
@media (max-width: 560px) {
  .kl-panel {
    top: 0 !important; right: 0 !important; left: 0; bottom: 0;
    width: auto; max-height: none; overscroll-behavior: contain;
    border: 0; border-radius: 0;
    padding: 18px 16px 28px;
  }
  .kl-grid--4 { grid-template-columns: repeat(3, 1fr); }
  .kl-grid--4 .kl-tile__name { max-width: 94px; }
}

/* --- dragging favourites -------------------------------------------------
   Only while editing. The favourites grid shows where a tile would land; the
   +/- buttons remain, because a drag cannot be done from a keyboard and HTML5
   drag does nothing at all on touch. */
.kl-grid--drop { min-height: 92px; border-style: dashed; border-color: rgba(27, 32, 52, .3); }
.kl-grid--over { border-color: var(--gold-deep, #B7892A); background: var(--gold-soft, #FDF3D9); }
.kl-tile[draggable="true"] { cursor: grab; }
.kl-tile--dragging { opacity: .4; cursor: grabbing; }

/* --- carrying favourites between apps ------------------------------------
   Each person keeps their own; this only saves arranging them again in every
   app. Shown while editing. */
.kl-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: -6px 0 16px; }
.kl-tool {
  padding: 6px 11px; color: var(--navy, #1B2034); background: var(--white, #FFFFFF);
  border: 1px solid rgba(27, 32, 52, .20); border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 700; line-height: 1.2;
}
.kl-tool:hover { background: var(--grey-soft, #F1ECE0); }
.kl-paste {
  flex: 1 1 100%; min-width: 0; padding: 7px 10px; color: var(--navy, #1B2034);
  background: var(--white, #FFFFFF); border: 1px solid rgba(27, 32, 52, .28);
  border-radius: 8px; font: inherit; font-size: 12px;
}