/* =========================================================
   mbrd - the board switcher (ui/library.ts)

   Its own overlay (not ask()): a gallery of boards, not a question.
   The one piece of furniture about the boards rather than a board.
   ========================================================= */

/* Its own overlay, not the ask() dialog: that is a question and this is a
   gallery of the boards this browser is keeping. */
#library {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: grid;
  place-items: center;
  padding: max(24px, env(safe-area-inset-top)) 24px;
  background: color-mix(in oklab, var(--ink) 34%, transparent);
}
.library-panel {
  width: min(880px, 100%);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: var(--hairline) solid var(--rule-2);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.library-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 16px;
  border-bottom: var(--hairline) solid var(--rule);
}
.library-head h2 { margin: 0; font-size: 1rem; font-weight: 600; }
.library-spacer { flex: 1; }
.library-new {
  padding: 6px 12px;
  border: var(--hairline) solid var(--accent-text);
  border-radius: var(--leaf);
  background: var(--paper-card);
  color: var(--accent-deep);
  cursor: pointer;
}
@media (hover: hover) {
  .library-new:hover { background: var(--paper-2); }
}
.library-new:active { background: var(--paper-3); }
/* The button draws icons.svg#i-close like every other close in the app, so
   there is no type here to argue about. */
.library-close {
  display: grid;
  place-items: center;
  width: var(--icon-button);
  height: var(--icon-button);
  padding: 0;
  border: 0;
  border-radius: var(--leaf);
  background: none;
  color: var(--ink-3);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.library-close svg { width: var(--icon-glyph); height: var(--icon-glyph); }
/* The hover sets the wash as well as the ink, like every other close in the app. */
@media (hover: hover) {
  .library-close:hover { background: var(--paper-2); color: var(--accent-deep); }
}
.library-close:active { background: var(--paper-3); }
.library-close:focus-visible { background: var(--paper-2); color: var(--accent-deep); }
.library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  padding: 16px;
  overflow-y: auto;
}
.library-empty {
  grid-column: 1 / -1;
  padding: 28px 8px;
  text-align: center;
  color: var(--ink-3);
  font-size: var(--t-small, 0.85rem);
}
.library-card { position: relative; }
.library-open {
  display: block;
  width: 100%;
  padding: 0;
  border: var(--hairline) solid var(--rule-2);
  border-radius: var(--radius-sm);
  background: var(--paper-card);
  cursor: pointer;
  overflow: hidden;
  text-align: left;
  color: inherit;
}
@media (hover: hover) {
  .library-open:hover:not(:disabled) { border-color: var(--accent-text); }
}
.library-open:focus-visible:not(:disabled) { border-color: var(--accent-text); }
.library-card.is-current .library-open { border-color: var(--accent-text); cursor: default; }
.library-thumb {
  aspect-ratio: 4 / 3;
  background: var(--paper-2);
  overflow: hidden;
}
.library-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.library-name {
  padding: 8px 10px 2px;
  font-size: var(--t-small, 0.85rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.library-when { padding: 0 10px 9px; font-size: var(--t-tiny); color: var(--ink-3); }
/* The file a desktop row points at, between the title and the time. Same size
   as the time below it and a shade lighter than the title above, because it is
   an address rather than a name: what a person reads to tell two boards with
   the same title apart, not what they read to find the board. Never present in
   a browser - see LibraryEntry.path. */
.library-file {
  padding: 0 10px 2px;
  font-size: var(--t-tiny);
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* A row whose file has gone. Dimmed rather than struck through or tinted with
   the error colour: nothing has failed and nothing is broken, the board is
   simply not where the shelf last saw it, and the Locate button beside it is
   the whole of what the card is now asking for. The button itself stays at full
   strength, which is what makes it the one thing to press. */
.library-card.is-missing .library-open { opacity: 0.45; }
.library-locate {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 3px 9px;
  font: inherit;
  font-size: var(--t-tiny);
  color: inherit;
  background: var(--paper-card);
  border: var(--hairline) solid var(--rule-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
@media (hover: hover) {
  .library-locate:hover { border-color: var(--accent-text); }
}
.library-locate:focus-visible { border-color: var(--accent-text); }
.library-del {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: color-mix(in oklab, var(--paper) 82%, transparent);
  color: var(--ink-2);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
/* Smaller than --icon-button on purpose and the comment two blocks up is why:
   this is the destructive one, riding the corner of a card whose whole face is
   the Open button, and the two gestures have to stay half a centimetre apart on
   a phone. It is the one icon button in the app that is deliberately not the
   token, which is a different thing from the eight that were not it by
   accident. */
.library-del svg { width: 13px; height: 13px; }
.library-card:hover .library-del,
.library-del:focus-visible { opacity: 1; }
@media (hover: hover) {
  .library-del:hover { color: var(--danger); }
}
.library-del:focus-visible { color: var(--danger); }

/* =========================================================
   The other shelf: boards that are also, or only, in Drive
   ========================================================= */

/* The mark on a board that is on both shelves.
   Top LEFT, and that is the whole placement decision: the delete cross is top
   right on every card, and a glyph that lands in the same corner on some cards
   and not others is a target somebody learns wrongly and then presses. This one
   is not a button at all - no pointer, no hover, it is a fact about the board. */
.library-cloud {
  position: absolute;
  top: 6px;
  left: 6px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-pill);
  background: color-mix(in oklab, var(--paper) 82%, transparent);
  color: var(--ink-3);
  pointer-events: none;
}
/* 13px, matching .library-del rather than --icon-glyph, for the reason that
   block gives: at this size on this card the token is too big, and these two
   sit at opposite corners of the same 180px thumbnail where a difference in
   weight between them would read as a mistake. */
.library-cloud svg { width: 13px; height: 13px; }

/* A board that is in Drive and not on this machine. It has no thumbnail - there
   is nothing to draw one from without downloading the whole board - so the
   frame carries the mark instead of a picture, at the size a picture would have
   been. Quieter than a real thumbnail on purpose: it is a placeholder for
   something that is not here, and dressing it up as a board would suggest the
   app knows what is on it. */
.library-card.is-cloud .library-thumb {
  display: grid;
  place-items: center;
  color: var(--ink-3);
}
.library-card.is-cloud .library-thumb svg { width: 26px; height: 26px; }
.library-card.is-cloud .library-name { color: var(--ink-2); }

/* The foot: the one place the shelf mentions the cloud unprompted.
   No border and no padding until it has a child, so a build with no cloud
   identifiers - or a person already signed in - renders nothing rather than an
   empty strip with a hairline over it. :empty is exactly this condition and is
   why the rule can be stated as a default rather than as a class the script has
   to remember to set. */
.library-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 16px;
  border-top: var(--hairline) solid var(--rule);
}
.library-foot:empty { padding: 0; border-top: 0; }
.library-foot-note { font-size: var(--t-tiny); color: var(--ink-3); }
/* Drawn like .library-new, which is the other button in this panel that offers
   something rather than acting on a board. Deliberately not `primary`: the
   thing somebody opened this panel to do is pick a board, and a louder button
   down here would compete with the grid for the first press. */
.library-connect {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: var(--hairline) solid var(--rule-2);
  border-radius: var(--leaf);
  background: var(--paper-card);
  color: var(--ink-2);
  font: inherit;
  font-size: var(--t-small);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.library-connect svg { width: var(--icon-glyph); height: var(--icon-glyph); }
/* Open folder: the connect button's look, pushed to the left end of the foot. */
.library-folder { margin-right: auto; }
@media (hover: hover) {
  .library-connect:hover { border-color: var(--accent-text); color: var(--accent-deep); }
}
.library-connect:focus-visible { border-color: var(--accent-text); color: var(--accent-deep); }

/* Without color-mix(), for WebKit below 16.2 - section 7 of tokens.css carries
   the argument and declares the channel-form tokens. Both of these are `in
   oklab` above and convert the same way: the transparent end premultiplies to
   nothing, so the trip through oklab is a lossless round trip and what is left
   is the colour at that alpha. */
@supports not (color: color-mix(in srgb, red, blue)) {
  #library { background: rgb(var(--ink-c) / 34%); }
  .library-del { background: rgb(var(--paper-c) / 82%); }
  .library-cloud { background: rgb(var(--paper-c) / 82%); }
}