/* ═══════════════════════════════════════════════════════════════════
   TICKABLE v9 "KNIPKAART" — FIDER THEME
   Paste this whole file into Fider → Settings → Advanced → Custom CSS.
   ───────────────────────────────────────────────────────────────────
   Port of the tickable.nl design system to Fider's markup. The three
   moves and nothing else: one geometry (every field is an octagon
   clipped at 45°), flat colour fields (never a tint, never a
   gradient), heavy tight type (Inter 700, tracked -0.03em).

   Two things carry the theme where Fider's markup can't be reached:
   1. Fider's colour utilities read from --colors-* variables, so §1
      repoints the whole scale onto the Knipkaart palette in one place.
   2. Where a utility class paints directly (bg-gray-100, rounded-md),
      the component rule below overrides it by name.

   Buttons are the one round shape on a page of cut corners, and the
   action is INK, never yellow. Yellow is a field, an emphasis, and
   hover on an icon button.
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500&display=swap');

/* ─── 1. TOKENS ─────────────────────────────────────────────────── */
:root {
  --white:  #FFFFFF;
  --ash:    #EFEFED;   /* the one neutral field */
  --ash-2:  #E4E4E1;
  --ink:    #131313;
  --ink-2:  #3D3D3D;   /* body copy */
  --ink-3:  #656563;   /* secondary, still AA on ash */

  --signal: #F2F665;   /* acid yellow — field, emphasis, icon hover */
  --ice:    #BFF0FF;
  --mint:   #B2E898;
  --lilac:  #DABCFF;
  --ultra:  #2A119B;   /* the interactive colour: link hover, focus */
  --rose:   #FF1D5E;   /* state only: live, error. Never decorates. */

  --sand:   rgba(19, 19, 19, 0.14);
  --sand-2: rgba(19, 19, 19, 0.22);

  --chamfer:    20px;  /* plate scale */
  --chamfer-sm: 10px;  /* chip scale */

  --shadow-lift: 0 1px 2px rgba(20,20,20,.04), 0 8px 24px rgba(20,20,20,.06);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* Fider's own scale, repointed. Anything Fider paints from a
     variable lands on the palette without a further rule. */
  --colors-white: var(--white);
  --colors-black: var(--ink);
  --colors-gray-50:  #F6F6F4;
  --colors-gray-100: var(--ash);
  --colors-gray-200: var(--sand);
  --colors-gray-300: var(--ash-2);
  --colors-gray-400: var(--sand-2);
  --colors-gray-500: var(--ink-3);
  --colors-gray-600: var(--ink-3);
  --colors-gray-700: var(--ink-2);
  --colors-gray-800: var(--ink);
  --colors-gray-900: var(--ink);
  --primary-color: var(--ink);   /* the var your current CSS already set */
  --colors-primary-base: var(--ink);
  --colors-primary-100: var(--signal);
  --colors-primary-400: var(--ink);
  --colors-primary-500: var(--ink);
  --colors-primary-600: var(--ink);
  --colors-primary-700: var(--ink);
  --colors-green-100: var(--mint);
  --colors-green-400: transparent;
  --colors-green-700: var(--ink);
  --colors-blue-100: var(--ice);
  --colors-blue-400: transparent;
  --colors-blue-500: var(--sand);
  --colors-blue-700: var(--ink);
  --colors-yellow-100: var(--signal);
  --colors-yellow-700: var(--ink);
  --colors-red-100: #FFE1E9;
  --colors-red-500: var(--rose);
  --colors-red-700: #A8003A;
}

/* The chamfer, declared once and applied by name below. It is a clip,
   not a radius, so the two never appear on one element. */
.c-input,
.c-textarea,
.c-tag,
.c-avatar,
.c-vote-counter__button,
.c-dropdown__handle > div,
.c-dropdown__list,
.c-posts-container__post,
.fider-tiptap-editor,
.c-share-feedback__content,
#p-home .p-home__welcome-col > :first-child,
[class*="c-status-col--"] {
  border-radius: 0 !important;
  clip-path: polygon(
    var(--chamfer) 0,
    calc(100% - var(--chamfer)) 0,
    100% var(--chamfer),
    100% calc(100% - var(--chamfer)),
    calc(100% - var(--chamfer)) 100%,
    var(--chamfer) 100%,
    0 calc(100% - var(--chamfer)),
    0 var(--chamfer)
  );
}
/* Chip scale for everything that isn't plate-sized. */
.c-input,
.c-textarea,
.c-tag,
.c-avatar,
.c-vote-counter__button,
.c-dropdown__handle > div,
.fider-tiptap-editor,
[class*="c-status-col--"] { --chamfer: var(--chamfer-sm); }

/* ─── 2. GROUND AND TYPE ────────────────────────────────────────── */
body {
  background: var(--white);
  color: var(--ink-2);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5,
.text-header, .text-large, .text-title, .text-category {
  font-family: "Inter", system-ui, sans-serif;
  color: var(--ink);
  text-wrap: balance;
}
.text-large  { font-size: clamp(1.88rem, .9vw + 1.67rem, 2.75rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.04em; }
.text-header { font-size: 18px; font-weight: 700; letter-spacing: -0.03em; }
.text-title  { font-size: clamp(1rem, .13vw + .97rem, 1.13rem); font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; color: var(--ink); }
.text-category { font-size: 14px; font-weight: 700; letter-spacing: -0.03em; text-transform: none; color: var(--ink); }
.text-muted, .text-gray-500 { color: var(--ink-3) !important; }

/* Machine metadata only: timestamps. The one mono on the page. */
.date, time {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

.c-markdown { font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.c-markdown strong { font-weight: 900; color: var(--ink); }
.c-markdown a, .text-link {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-thickness 200ms var(--ease-out);
}
.c-markdown a:hover, .text-link:hover { text-decoration-thickness: 3px; color: var(--ultra); }

/* Faces are chamfered like every other image on the site. */
.c-avatar { border: 0 !important; }

/* ─── 3. HEADER ─────────────────────────────────────────────────── */
#c-header {
  background: var(--white) !important;
  border-bottom: 1px solid var(--sand) !important;
}
#c-header .c-menu { padding-block: 12px; }
#c-header h1 { margin: 0; }
#c-header a img { clip-path: none; }

/* Icon buttons: transparent at rest, yellow on hover. This is the one
   place yellow behaves as feedback rather than as a field. */
#c-header .c-themeswitcher,
#c-header .c-dropdown__handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  transition: background 200ms var(--ease-out);
}
#c-header .c-themeswitcher:hover,
#c-header .c-dropdown__handle:hover { background: var(--signal); }
#c-header svg { color: var(--ink) !important; }
#c-header .c-menu-user .c-dropdown__handle:hover { background: transparent; }

/* ─── 4. THE WELCOME PLATE ──────────────────────────────────────
   One loud field on the page, top left. Everything else is paper. */
#p-home .p-home__welcome-col > :first-child {
  background: var(--signal);
  color: var(--ink);
  padding: 28px !important;
}
#p-home .p-home__welcome-col .c-markdown,
#p-home .p-home__welcome-col .c-markdown p { color: var(--ink); }
#p-home .p-home__welcome-col .c-markdown p + p { margin-top: 12px; }

/* ─── 5. BUTTONS ────────────────────────────────────────────────
   Full pill, the only unchamfered shape in the system, and it earns
   the exception by contrast. Primary is ink, never yellow: an action
   in the same colour as a decorative field is camouflage. */
.c-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding-inline: 28px;
  border: 2px solid transparent !important;
  border-radius: 999px !important;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.03em;
  box-shadow: none !important;
  transition: background 200ms var(--ease-out), color 200ms var(--ease-out),
              border-color 200ms var(--ease-out);
}
.c-button--primary {
  background: var(--ink) !important;
  color: var(--white) !important;
}
.c-button--primary:hover { background: #333331 !important; }

.c-button--secondary,
.c-button--tertiary {
  background: transparent !important;
  color: var(--ink) !important;
  border-color: currentColor !important;
}
.c-button--secondary:hover,
.c-button--tertiary:hover {
  background: var(--ink) !important;
  color: var(--white) !important;
  border-color: var(--ink) !important;
}
.c-button--small { min-height: 40px; padding-inline: 18px; font-size: 14px; }
.c-button--link, .c-button--no-padding {
  min-height: 0;
  padding: 0;
  background: transparent !important;
  border: 0 !important;
  color: var(--ink) !important;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.c-button--link:hover { color: var(--ultra) !important; }

/* The "share your idea" opener wears both .c-button and .c-input.
   Inside the yellow plate it is the one action, so it is an ink pill. */
.c-button.c-input {
  width: 100%;
  clip-path: none;
  border-radius: 999px !important;
  background: var(--ink) !important;
  color: var(--white) !important;
  border-color: var(--ink) !important;
  justify-content: center;
}
.c-button.c-input:hover { background: #333331 !important; }

/* ─── 6. THE POST LIST ──────────────────────────────────────────
   A row, not a card. Nothing is contained until it is hovered, and
   then the whole ticket fills in. */
.c-posts-container__post {
  padding: 20px 16px;
  margin-inline: -16px;
  background: transparent;
  transition: background 200ms var(--ease-out);
}
.c-posts-container__post:hover { background: var(--ash); }
.c-posts-container__post .text-title:hover { color: var(--ultra); }
.c-posts-container__postdescription { color: var(--ink-3); font-size: 15px; line-height: 1.5; }

/* The vote chip. Ash at rest, ink once you have voted, yellow on
   hover, which is the same contract the icon buttons use. */
.c-vote-counter__button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 56px;
  min-height: 56px;
  padding: 8px;
  border: 0 !important;
  background: var(--ash) !important;
  color: var(--ink) !important;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  transition: background 200ms var(--ease-out), color 200ms var(--ease-out);
}
.c-vote-counter__button svg { fill: currentColor; }
.c-vote-counter__button:hover { background: var(--signal) !important; }
.c-vote-counter__button--voted { background: var(--ink) !important; color: var(--white) !important; }
.c-vote-counter__button--voted:hover { background: var(--signal) !important; color: var(--ink) !important; }

/* Tags are flat fields, not coloured dots. The dot is Fider's own
   per-tag hex, which is a palette this system does not have. */
.c-tag {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding-inline: 12px;
  border: 0 !important;
  background: var(--ash);
  color: var(--ink) !important;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.c-tag svg { display: none; }
.c-tag:hover { background: var(--ash-2); }
/* One field per tag, in the rotation. Add a line per new tag slug. */
.c-tag[href*="dashboard"]    { background: var(--ice); }
.c-tag[href*="ticketshop"]   { background: var(--mint); }
.c-tag[href*="entreebeheer"] { background: var(--lilac); }

/* Status. A state is a field with a label on it, not a bordered pill. */
[class*="c-status-col--"] {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  background: var(--ash);
}
.c-status-col--planned   { background: var(--ice); }
.c-status-col--started   { background: var(--signal); }
.c-status-col--completed { background: var(--mint); }
.c-status-col--declined,
.c-status-col--duplicate { background: var(--ash); color: var(--ink-3); }
/* Fider wraps the label in its own bordered pill; the field above is
   the whole chip, so the wrapper steps back to nothing. */
div:has(> [class*="c-status-col--"]) {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* ─── 7. FIELDS AND THE EDITOR ──────────────────────────────────
   A field is a chamfered ash plate. Focus is an inset ring, because a
   clip-path crops an outline drawn around the element. */
.c-input,
.c-textarea,
.fider-tiptap-editor {
  border: 0 !important;
  background: var(--ash);
  color: var(--ink);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 16px;
  letter-spacing: -0.01em;
  box-shadow: none !important;
  transition: background 200ms var(--ease-out);
}
.c-input:not(.c-input--icon):not(.c-button) { min-height: 48px; padding: 12px 16px; }
.c-input--icon { min-height: 48px; }
.c-input::placeholder, .c-textarea::placeholder { color: var(--ink-3); }
.c-input:focus,
.c-textarea:focus,
.fider-tiptap-editor:focus-within {
  outline: none !important;
  background: var(--white);
  box-shadow: inset 0 0 0 2px var(--ultra) !important;
}

.c-editor-toolbar {
  border: 0 !important;
  border-bottom: 1px solid var(--sand) !important;
  background: transparent;
}
.c-editor-button {
  border-radius: 0 !important;
  color: var(--ink-2);
  transition: background 200ms var(--ease-out);
}
.c-editor-button:hover { background: var(--signal); color: var(--ink); }
.c-editor-button.is-active { background: var(--ink); color: var(--white); }
.tiptap { color: var(--ink-2); }

/* Filter and sort handles: chip-scale ash fields, sentence case. */
.c-dropdown__handle > div {
  border: 0 !important;
  background: var(--ash) !important;
  color: var(--ink) !important;
  font-size: 14px !important;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: none !important;
  transition: background 200ms var(--ease-out);
}
.c-dropdown__handle:hover > div { background: var(--ash-2) !important; }

/* The one documented shadow: a panel genuinely floating above the
   page takes the lift INSTEAD of a border, never both. */
.c-dropdown__list {
  background: var(--white);
  border: 0 !important;
  box-shadow: var(--shadow-lift) !important;
  padding: 8px;
}
.c-dropdown__list-item:hover { background: var(--ash); }

/* ─── 8. THE POST PAGE ──────────────────────────────────────────── */
#p-show-post .text-large { margin-bottom: 8px; }
#p-show-post .c-markdown.description { font-size: 17px; line-height: 1.6; }
#p-show-post .text-2xl { font-weight: 900; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
#p-show-post .border-blue-500 { border: 0 !important; border-bottom: 1px solid var(--sand) !important; }

/* The comment bubble is a plate. If a mention or link popup inside the
   editor ever gets cut off, delete this one rule: a clip-path clips
   every descendant. */
.c-comment-input > .rounded-md,
.c-comment .c-comment__content {
  --chamfer: var(--chamfer-sm);
  border-radius: 0 !important;
  background: var(--ash) !important;
  clip-path: polygon(
    var(--chamfer) 0, calc(100% - var(--chamfer)) 0,
    100% var(--chamfer), 100% calc(100% - var(--chamfer)),
    calc(100% - var(--chamfer)) 100%, var(--chamfer) 100%,
    0 calc(100% - var(--chamfer)), 0 var(--chamfer)
  );
  padding: 16px !important;
}
.c-username { font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.c-username--staff svg { color: var(--ultra); }

/* ─── 9. HOUSEKEEPING ───────────────────────────────────────────── */
.c-powered { display: none; }
/* Radius is 0 everywhere except a pill. Anything Fider ships that this
   file has not named lands square rather than rounded. */
.rounded-md, .rounded-lg, .rounded-sm { border-radius: 0; }
.c-modal__window, .c-message, .c-notification { border-radius: 0 !important; }

/* ─── 10. DARK ──────────────────────────────────────────────────
   The same system on an ink ground: fields keep their colour, paper
   inverts, and the primary action flips to white the way it does
   inside a dark plate on the site. */
body[data-theme="dark"] {
  --white: #131313;
  --ash:   #1F1F1F;
  --ash-2: #2A2A2A;
  --ink:   #FFFFFF;
  --ink-2: #D4D4D4;
  --ink-3: #A1A1A1;
  --sand:   rgba(255, 255, 255, 0.16);
  --sand-2: rgba(255, 255, 255, 0.24);
  --ultra: #BFF0FF;
  --primary-color: #FFFFFF;
  --colors-primary-base: #FFFFFF;
  background: #131313;
}
body[data-theme="dark"] #c-header { background: #131313 !important; }
body[data-theme="dark"] .c-button--primary,
body[data-theme="dark"] .c-button.c-input {
  background: var(--white) !important;   /* = paper, which is now ink */
  color: #131313 !important;
}
body[data-theme="dark"] .c-button--primary:hover,
body[data-theme="dark"] .c-button.c-input:hover {
  background: var(--signal) !important;
  color: #131313 !important;
}
body[data-theme="dark"] .c-vote-counter__button--voted {
  background: var(--signal) !important;
  color: #131313 !important;
}
/* The light fields keep ink type whatever the theme is doing. */
body[data-theme="dark"] .c-tag,
body[data-theme="dark"] [class*="c-status-col--"],
body[data-theme="dark"] #p-home .p-home__welcome-col > :first-child,
body[data-theme="dark"] #p-home .p-home__welcome-col .c-markdown p { color: #131313; }
body[data-theme="dark"] .c-dropdown__list { background: #1F1F1F; }