/* =============================================================================
   Opsy website — the annual meeting's page (Årsstämma 2026).

   The invitation on a mint panel, then the meeting's documents in groups: a
   group's heading and line on the left, its documents as rows on the right.

   Flat plain CSS on the kit's tokens, `op-` prefix, as css/site.css. The
   opening and a group's heading-and-line block are the other pages'
   (css/home.css, Opening and Section intro), used as they stand.
   Spec: docs/specs/2026-10-06-website-arsstamma-page.md
   ========================================================================== */

/* --- The section -------------------------------------------------------------- */
/* The opening above leaves the whole gap to the panel (css/home.css,
   Opening), so the section adds none on top. The section step under it: the
   footer follows. */
.op-meeting {
  padding-bottom: var(--op-space-section);
}

/* --- The invitation ----------------------------------------------------------- */
/* A mint panel: the closing panel's ground, clear border, corner and 40px
   inside (css/home.css, .op-closing__panel; css/about.css, .op-principle),
   so the site's mint panels are one kind. The mint is a primitive, as there:
   the kit's only alias for this step names a hover.
   The panel is as wide as its text and no wider: the one width of every
   description, 800px (css/home.css, .op-intro__lead), with the panel's 40px
   at each side and its border. It stands in the middle of the page, under
   the centred headline, and its text is left-aligned in it. The user's pick
   by eye, of three (spec, Rev 2): a panel the page's width held the same
   text to 800px and stood a third empty on its right.
   The text is the live page's one paragraph, plain -- the user's ruling; the
   picture sent sets three of its phrases in bold -- at every lead's size
   (the picture's is larger). It is read, so it takes the body ink by
   inheritance. */
.op-meeting__notice {
  max-width: calc(800px + var(--space-10) * 2 + 2px);
  margin-inline: auto;
  padding: var(--space-10);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  background: var(--genoa-100);
}

/* --- The documents ------------------------------------------------------------ */
/* A group: what it is on the left -- a heading and one line, the section
   intro's block (css/home.css, .op-intro) -- and its documents on the right,
   5 and 7 of the page's 12 columns, tops in line. No line between groups:
   the room parts them. The groups are parts of one section, so the near step
   stands between them, and between the panel and the first. */
.op-meeting__group {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: var(--space-10);
  align-items: start;
  margin-top: var(--op-space-near);
}
/* A group's documents, one under the other. */
.op-docs {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
/* A document: a row that is one link -- the document icon, the label, the
   download mark at the far end -- so the row is the click target and the
   focus ring goes round it. A flat grey fill on the tag's corner: the
   picture panels' grey (css/home.css, .op-offer__media), a primitive as
   there. Pointed at, it takes the site's hover mint, as a menu link does;
   pressed, the step deeper -- a primitive, the kit's only alias for it names
   a border. */
.op-doc {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-sm);
  background: var(--submarine-100);
  /* The body ink, named outright: a link does not inherit it. */
  color: var(--text-primary);
  text-decoration: none;
  transition: background-color var(--motion-fast) var(--ease-standard);
}
.op-doc:hover {
  background: var(--brand-bg-hover);
}
.op-doc:active {
  background: var(--genoa-200);
}
/* The label takes the room between the two marks and wraps inside it. */
.op-doc__label {
  flex: 1;
  min-width: 0;
}
/* The marks at the size they are drawn, 24px, in the action's teal: they say
   the row is something to press. */
.op-doc .op-ico {
  width: 24px;
  height: 24px;
  color: var(--brand-action);
}

/* --- Narrow ------------------------------------------------------------------- */
/* As on the other pages: no phone design pass, the page only stacks sensibly. */
@media (max-width: 960px) {
  /* One column, in the markup's order: the heading and its line, then the
     documents they head, the intro step under them. At this width and not a
     phone's: beside the documents the longest heading, Årsredovisning, would
     outgrow its column. */
  .op-meeting__group {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--op-space-intro);
  }
}
@media (max-width: 560px) {
  /* The mint panels' 24px at the sides on a phone; 40px above and below, as
     on a wide screen (css/about.css, .op-principle). */
  .op-meeting__notice {
    padding: var(--space-10) var(--space-6);
  }
  /* A row steps in with it, so the label keeps its room. */
  .op-doc {
    gap: var(--space-3);
    padding-inline: var(--space-4);
  }
}