/* portfolio — the work, as a drawer of tabs.

   There is one folder here, the master, and its body is the whole thing: the content
   area, with the categories standing on its top edge. Only the tabs show above that
   line — that is the look — and whichever one is chosen is what the body holds.

   A tab is two pieces, the same two the folder's own header was:

     aba    the tab: a rectangle with its outer top corner rounded, the name inside
            it;
     fio    the slant that carries its top edge down to the line. It is a
            pseudo-element, because a clip cannot round a corner and a rectangle
            cannot slant one: the two pieces are the two halves of one silhouette.
            Between two tabs the two slants meet at the line and make the valley.

   The line is the body's own top border, so the tabs and the body are one drawing.

   Everything about the shape is in the numbers below, and they live here and
   nowhere else. */

.portfolio {
  /* The same column as the prose under it, so the drawer lines up with the words. */
  inline-size: min(100% - 2 * var(--step), var(--measure));
  margin-inline: auto;
  padding-block: calc(var(--step) * 2) var(--step);
}

/* The drawer's bar. The master's own tab is a plate and not a control: it names the
   drawer, and it is not one of the choices inside it. */
.abas {
  display: flex;
  align-items: flex-end;

  --aba-h: 30px;         /* a tab's height above the line */
  --aba-pad: 16px;       /* the air on either side of a name */
  --aba-size: 15px;      /* the name's size — a tab is read, never studied */
  --raio: 10px;          /* the rounded corner of a tab */
  --conector-w: 26px;    /* how far one slant travels on its way down */
  --tinta: var(--ink);   /* the tab's colour: set in the page, one tab each */
  --texto: var(--paper); /* and the ink that is read on it */
}

/* The choices, side by side on the line. A bar that wrapped would be two rows of
   tabs, which is not a bar: if the names are wider than the column it scrolls
   sideways instead, and the plate stays where it is. */
.aba-lista {
  display: flex;
  align-items: flex-end;
  /* A flex item will not shrink below its contents unless it is allowed to, and this
     one has to: scrolling is how the bar survives names that are wider than the
     column. */
  min-inline-size: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.aba-lista::-webkit-scrollbar { display: none; }

/* The master's plate is not a control: it is the drawer's name, and the pointer says
   so. */
.aba-placa { cursor: default; }

/* One tab. Its width is the name's: a tab is as wide as what it carries. */
.aba {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  block-size: var(--aba-h);
  /* The slant leans out of the tab's own box, so the room for it is margin — and the
     space between two tabs is twice the connector, because the two slants have to
     reach the same point on the line. */
  margin-inline: var(--conector-w);
  padding-inline: var(--aba-pad);
  border: 0;
  border-start-start-radius: var(--raio);
  background: var(--tinta);
  color: var(--texto);
  font: inherit;
  font-size: var(--aba-size);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.04em;
  white-space: nowrap;
  cursor: pointer;
}

/* The bar's ends: the plate is at the drawer's edge, so it needs no room before it,
   and the last tab has nothing after it to make a valley with. The space between the
   plate and the first tab is the two slants' own margins, which is why nothing here
   removes the first tab's. */
.abas > .aba:first-child { margin-inline-start: 0; }
.aba-lista > .aba:last-child { margin-inline-end: 0; }

/* The two slants: the tab's own connector on the right, and the one it makes a
   valley with on the left. */
.aba::after,
.aba::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inline-size: var(--conector-w);
  background: inherit;
}

.aba::after {
  inset-inline-start: 100%;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.aba::before {
  inset-inline-end: 100%;
  clip-path: polygon(100% 0, 0 100%, 100% 100%);
}

/* The bar's first tab has nothing before it and the last has nothing after it: the
   drawer's outer edges are straight, with the one rounded corner. */
.abas > .aba:first-child::before,
.aba-lista > .aba:last-child::after { content: none; }

/* The tab that is showing is the one in front, in its own colour. The others are the
   same colour mixed back into the paper — they are behind the panel, and they read
   that way. Without color-mix every tab is simply full colour, which is a fine way to
   fail. */
.aba[role="tab"][aria-selected="false"] {
  background: color-mix(in srgb, var(--tinta) 38%, var(--paper));
}

.aba[role="tab"]:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 3px;
}

/* The body: the line the tabs stand on, the sides, the bottom, and the air.

   Its height follows the panel that is showing, and site/src/scripts/abas.js is what
   writes it — for the length of one change, and then it lets it go. */
.mestre-corpo {
  --corpo-pad: 22px;     /* the air inside the body */
  --frente: 140px;       /* how much body lies below the content */
  --abre: 320ms;         /* how long the body takes to change size */

  border: 1px solid var(--ink);
  padding: var(--corpo-pad) var(--corpo-pad) var(--frente);
  overflow: hidden;
  /* The one layout property this site animates, and it is contained.

     The drawer growing to the panel it was given IS the interaction — a body that
     grew by transform would stretch the words inside it, and one that faded would not
     grow at all. `contain: layout` keeps the reflow inside this box, so what moves on
     each frame is one container and its contents, not the page. */
  contain: layout;
  transition: height var(--abre) ease;
}

/* The panels are all in the page and none of them is hidden there, so a page without
   the script shows every category, one after the other. The script is what hides the
   ones that are not showing. */
.painel[hidden] { display: none; }

/* The prose the page speaks in. When the real contents arrive this is what they are
   read in; it is set here rather than in pagina.css because a drawer is not a page. */
.painel p {
  margin: 0;
  font-size: 17px;
  line-height: 1.65;
}

.painel p + p { margin-block-start: var(--step); }

/* Nothing travels for anyone who asked for no travelling. */
@media (prefers-reduced-motion: reduce) {
  .mestre-corpo { transition: none; }
}