/* app.css - visual theme for Comunitat MIPE-DIPE.

   Continues the design language of grintieproduccions and grintie.psyed.edu.es:
   Inter for text, a serif for headings, a cream ground and a warm accent. The
   layout departs from those sites because this one is a community rather than a
   catalogue: a persistent side rail for navigation, a central column for the
   feed, and cards as the repeated unit.

   The two programmes each carry their own colour so a reader can tell at a
   glance who a notice is addressed to.

   Copyright Miquel Sancho, MiKi <miki@MKEngineering.org> */

:root {
  --brand-accent: #ff7c06;
  --brand-dark: #b02a1a;
  --brand-ink: #1d1d1b;

  --mipe: #1f6f8b;
  --mipe-soft: #dcecf2;
  --dipe: #6b4a8f;
  --dipe-soft: #e9e0f3;

  --color-text: #16150f;
  --color-secondary: #6d6d6d;
  --color-border: #dcd7ca;
  --color-bg: #f5efe0;
  --color-surface: #ffffff;
  --color-surface-2: #fbf8f1;

  --ok: #1c6b1c;
  --ok-soft: #d7f5d7;
  --warn: #8a6d00;
  --warn-soft: #fdf0c8;
  --bad: #9c1d10;
  --bad-soft: #f7d4d0;

  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
  --font-head: "Hoefler Text", "Noto Serif", Garamond, "Times New Roman", serif;

  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 1px 2px rgba(0, 0, 0, .05);
  --maxw: 1240px;
  --rail: 220px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
}

a { color: var(--brand-dark); text-decoration: none; }
a:hover { color: var(--brand-accent); }
img { max-width: 100%; }

h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 700; line-height: 1.2; margin: 0 0 .4em; }
h1 { font-size: 32px; }
h2 { font-size: 23px; }
h3 { font-size: 19px; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.muted { color: var(--color-secondary); }
.small { font-size: 13px; }
.nowrap { white-space: nowrap; }
.stack > * + * { margin-top: 14px; }
.right { text-align: right; }
.center { text-align: center; }

/* --- Top bar ------------------------------------------------------------ */

.topbar { background: var(--color-surface); border-bottom: 1px solid var(--color-border); position: sticky; top: 0; z-index: 20; }
.topbar .wrap { display: flex; align-items: center; gap: 16px; padding-top: 12px; padding-bottom: 12px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 12px; }
/* The programme's own mark, drawn at half its stored size so it stays sharp on
   a dense screen. */
.brand img.mark { height: 44px; width: auto; flex: 0 0 auto; display: block; }
.brand-large { display: block; text-align: center; margin-bottom: 20px; }
.brand-large img { height: 110px; width: auto; display: inline-block; }
.brand .name { font-family: var(--font-head); font-size: 19px; font-weight: 700; color: var(--color-text); line-height: 1.1; }
.brand .name span { display: block; font-family: var(--font-body); font-size: 11px; font-weight: 400; color: var(--color-secondary); letter-spacing: .06em; text-transform: uppercase; }
.topbar .spacer { flex: 1; }
.topbar-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.site-link {
  display: inline-flex; align-items: center; border: 1px solid var(--color-border);
  border-radius: 999px; padding: 6px 14px; font-size: 14px; font-weight: 600;
  color: var(--color-text); background: var(--color-surface);
}
.site-link:hover { border-color: var(--brand-accent); color: var(--brand-dark); }

.campus-link {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--brand-ink); color: #fff; border-radius: 999px;
  padding: 7px 15px; font-size: 14px; font-weight: 600;
}
.campus-link:hover { background: var(--brand-accent); color: #fff; }

.avatar {
  width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
  background: var(--mipe-soft); color: var(--mipe); flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; letter-spacing: .02em; overflow: hidden;
}
.avatar.lg { width: 84px; height: 84px; font-size: 28px; }
.avatar.sm { width: 26px; height: 26px; font-size: 10px; }

.usermenu { display: flex; align-items: center; gap: 9px; }
.usermenu .who { font-size: 13px; line-height: 1.25; }
.usermenu .who strong { display: block; font-weight: 600; }

/* --- Layout ------------------------------------------------------------- */

/* The rail is on every page. The class adds the sidebar column beside it,
   so a page that asks for it has to have a sidebar to put there. */
.layout { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); gap: 26px; padding: 24px 0 60px; }
.layout.wide { grid-template-columns: minmax(0, 1fr); }
.layout.with-aside { grid-template-columns: var(--rail) minmax(0, 1fr) 300px; }

.rail { position: sticky; top: 74px; align-self: start; }
.rail nav { display: flex; flex-direction: column; gap: 2px; }
.rail a {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border-radius: var(--radius-sm); color: var(--color-text); font-size: 15px;
}
.rail a:hover { background: var(--color-surface); color: var(--brand-dark); }
.rail a.active { background: var(--color-surface); color: var(--brand-dark); font-weight: 600; box-shadow: var(--shadow); }
.rail a .ic { width: 20px; text-align: center; opacity: .75; }
.rail .badge { margin-left: auto; background: var(--brand-dark); color: #fff; border-radius: 999px; font-size: 11px; padding: 0 7px; font-weight: 700; }
.rail .rail-title { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--color-secondary); margin: 18px 0 6px 12px; }

.aside { display: flex; flex-direction: column; gap: 18px; }

/* --- Cards -------------------------------------------------------------- */

.card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  /* A column, so a card placed in a grid fills the height of its row and its
     foot sits at the bottom rather than floating under the text. Without this,
     cards side by side put their buttons at different heights. */
  display: flex; flex-direction: column;
}
/* Cards stacked down a page need separating. Inside a grid the gap already
   does that, and this margin would apply to every card except the first,
   pushing them down and shortening them, which leaves a row of cards uneven. */
.card + .card { margin-top: 16px; }
.stat-grid > .card + .card,
.member-grid > .card + .card,
.cards > .card + .card { margin-top: 0; }
.card-head { display: flex; align-items: center; gap: 10px; padding: 13px 18px; border-bottom: 1px solid var(--color-border); }
.card-head h2, .card-head h3 { margin: 0; font-size: 17px; }
.card-head .spacer { flex: 1; }
.card-head a.more { font-size: 13px; }
.card-body { padding: 16px 18px; flex: 1 1 auto; }
/* Inside a card body, pushes what follows to the bottom edge. */
.push-bottom { margin-top: auto; padding-top: 12px; }
.card-body.tight { padding: 10px 18px; }
.card-foot { padding: 11px 18px; border-top: 1px solid var(--color-border); background: var(--color-surface-2); border-radius: 0 0 var(--radius) var(--radius); }

.list { list-style: none; margin: 0; padding: 0; }
.list > li { padding: 13px 18px; border-bottom: 1px solid var(--color-border); }
.list > li:last-child { border-bottom: none; }
.list > li:hover { background: var(--color-surface-2); }

/* --- Tags and badges ---------------------------------------------------- */

.tag {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; border-radius: 999px; padding: 2px 10px;
  background: #f0e9d8; border: 1px solid var(--color-border); color: var(--brand-dark);
}
.tag.mipe { background: var(--mipe-soft); border-color: #bcd8e2; color: var(--mipe); }
.tag.dipe { background: var(--dipe-soft); border-color: #d0c1e2; color: var(--dipe); }
.tag.both { background: #f0e9d8; border-color: var(--color-border); color: var(--brand-dark); }
.tag.ok { background: var(--ok-soft); border-color: #b7e7b7; color: var(--ok); }
.tag.warn { background: var(--warn-soft); border-color: #ecd898; color: var(--warn); }
.tag.bad { background: var(--bad-soft); border-color: #eeb5ad; color: var(--bad); }
.tag.plain { text-transform: none; letter-spacing: 0; font-weight: 600; }

.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-accent); }

/* --- Buttons and forms -------------------------------------------------- */

.btn {
  display: inline-block; background: var(--brand-accent); color: #fff; border: 1px solid transparent;
  padding: 9px 16px; border-radius: var(--radius-sm); font: inherit; font-size: 15px;
  font-weight: 600; cursor: pointer; text-align: center;
}
.btn:hover { background: var(--brand-dark); color: #fff; }
.btn.secondary { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); }
.btn.secondary:hover { background: var(--color-surface-2); color: var(--brand-dark); border-color: var(--brand-accent); }
.btn.danger { background: var(--brand-dark); }
.btn.danger:hover { background: #8c1f12; }
.btn.small { padding: 5px 11px; font-size: 13px; }
.btn.block { display: block; width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

input[type=text], input[type=email], input[type=password], input[type=search],
input[type=date], input[type=datetime-local], input[type=number], input[type=url],
input[type=file], select, textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); font: inherit; font-size: 15px;
  background: var(--color-surface); color: var(--color-text);
}
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand-accent); outline-offset: -1px; border-color: var(--brand-accent); }

.field { display: flex; flex-direction: column; margin-bottom: 14px; }
.field > label { font-size: 13px; font-weight: 600; color: var(--color-secondary); margin-bottom: 5px; }
.field .help { font-size: 12px; color: var(--color-secondary); margin-top: 4px; }
.field .errors { list-style: none; margin: 5px 0 0; padding: 0; color: var(--bad); font-size: 13px; }
.field.check { flex-direction: row; align-items: center; gap: 9px; }
.field.check > label { margin: 0; font-weight: 400; color: var(--color-text); font-size: 15px; }
.field.check input { width: auto; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.form-grid .field.full { grid-column: 1 / -1; }
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.filters .field { margin-bottom: 0; flex: 1 1 150px; }
.filters .field.grow { flex: 2 1 240px; }

.errorlist { list-style: none; margin: 0 0 14px; padding: 11px 14px; border-radius: var(--radius-sm);
  background: var(--bad-soft); color: var(--bad); font-size: 14px; }

/* --- Rich text ----------------------------------------------------------- */

/* How a stored announcement or newsletter body reads once rendered. The markup
   the sanitiser allows is the markup styled here. */
.richtext > *:first-child { margin-top: 0; }
.richtext > *:last-child { margin-bottom: 0; }
.richtext p { margin: 0 0 12px; }
.richtext h2 { font-size: 22px; margin: 22px 0 8px; }
.richtext h3 { font-size: 18px; margin: 18px 0 6px; }
.richtext h4 { font-size: 16px; margin: 16px 0 6px; }
.richtext ul, .richtext ol { margin: 0 0 12px; padding-left: 22px; }
.richtext li { margin-bottom: 4px; }
.richtext blockquote { margin: 0 0 12px; padding: 6px 0 6px 14px;
  border-left: 3px solid var(--brand-accent); color: var(--color-secondary); }
.richtext pre { background: var(--color-surface-2); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); padding: 10px 12px; overflow-x: auto; font-size: 14px; }
.richtext code { font-size: 14px; }
.richtext a { text-decoration: underline; }

/* The editor, so it sits in a form like the other fields do. */
trix-editor.richtext-editor {
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-surface); padding: 10px 12px; min-height: 220px;
  font: inherit; font-size: 15px; line-height: 1.6;
}
trix-editor.richtext-editor:focus { outline: 2px solid var(--brand-accent); outline-offset: -1px; }
trix-toolbar { margin-bottom: 6px; }
trix-toolbar .trix-button-row { flex-wrap: wrap; }
trix-toolbar .trix-button { border-bottom: none; }
trix-toolbar .trix-button--icon { height: 1.8rem; }

/* --- Messages ----------------------------------------------------------- */

.messages { list-style: none; margin: 16px 0 0; padding: 0; }
.messages li { background: var(--color-surface); border: 1px solid var(--color-border);
  border-left: 4px solid var(--brand-accent); border-radius: var(--radius-sm);
  padding: 11px 15px; margin-bottom: 9px; box-shadow: var(--shadow); }
.messages li.success { border-left-color: var(--ok); }
.messages li.error { border-left-color: var(--bad); }
.messages li.warning { border-left-color: var(--warn); }

/* --- Feed and posts ----------------------------------------------------- */

.composer textarea { border: none; padding: 0; font-size: 17px; }
.composer textarea:focus { outline: none; }
.composer .composer-foot { display: flex; align-items: center; gap: 10px; padding-top: 10px; border-top: 1px solid var(--color-border); margin-top: 10px; }
.composer .counter { font-size: 12px; color: var(--color-secondary); margin-left: auto; }
.composer .counter.over { color: var(--bad); font-weight: 700; }

.post-head { display: flex; align-items: center; gap: 11px; }
.post-head .who strong { display: block; font-size: 15px; }
.post-head .who .when { font-size: 12px; color: var(--color-secondary); }
.post-title { font-family: var(--font-head); font-size: 20px; margin: 12px 0 4px; }
.post-body { white-space: pre-wrap; word-wrap: break-word; margin: 8px 0 0; }
.post-image { margin-top: 12px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); display: block; }
.post-actions { display: flex; gap: 6px; align-items: center; padding: 8px 18px; border-top: 1px solid var(--color-border); }
.post-actions form { display: inline; }
.action {
  background: none; border: none; font: inherit; font-size: 14px; cursor: pointer;
  color: var(--color-secondary); padding: 5px 10px; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; gap: 6px;
}
.action:hover { background: var(--color-surface-2); color: var(--brand-dark); }
.action.on { color: var(--brand-dark); font-weight: 700; }

.reply { display: flex; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--color-border); }
.reply .reply-body { flex: 1; }
.reply .reply-body .who { font-size: 14px; font-weight: 600; }
.reply .reply-body .when { font-size: 12px; color: var(--color-secondary); margin-left: 6px; font-weight: 400; }
.reply .reply-body p { margin: 3px 0 0; white-space: pre-wrap; word-wrap: break-word; }

/* --- Calendar ----------------------------------------------------------- */

.calendar-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.calendar-head h1 { margin: 0; text-transform: capitalize; }
.calendar { width: 100%; border-collapse: collapse; background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; table-layout: fixed; }
.calendar th { font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--color-secondary); padding: 9px 6px; border-bottom: 1px solid var(--color-border); font-weight: 600; }
.calendar td { border: 1px solid var(--color-border); vertical-align: top; height: 104px; padding: 5px; }
.calendar td.out { background: var(--color-surface-2); }
.calendar td.today { background: #fff6ec; }
.calendar .daynum { font-size: 12px; color: var(--color-secondary); font-weight: 600; }
.calendar td.today .daynum { color: var(--brand-dark); }
/* One colour per kind of calendar entry, set here and nowhere else. Every place
   that shows a kind, the month grid, the legend, a list, the entry itself,
   reads --cat-color, so a kind cannot end up two colours on one page. */
.cat-tutoring { --cat-color: #7b5ea7; --cat-soft: #ece4f5; }
.cat-formative { --cat-color: #1f6f8b; --cat-soft: #dcecf2; }
.cat-course { --cat-color: #2f8f5b; --cat-soft: #dcf0e4; }
.cat-defence { --cat-color: #a1441f; --cat-soft: #f7e2d9; }
.cat-deadline { --cat-color: #9c1d10; --cat-soft: #f7d4d0; }
.cat-other { --cat-color: #5a6472; --cat-soft: #e5e8ec; }

/* The kind, named and coloured, small enough to sit beside a title. */
.tag.cat { background: var(--cat-soft, var(--color-surface-2));
  color: var(--cat-color, var(--color-secondary));
  border: 1px solid var(--cat-color, var(--color-border)); }

.calendar .ev { display: block; font-size: 12px; line-height: 1.35; padding: 2px 5px; margin-top: 3px;
  border-radius: 4px; border-left: 3px solid var(--cat-color, var(--brand-accent));
  background: var(--cat-soft, var(--color-surface-2));
  color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calendar .ev:hover { background: #fff2e2; color: var(--brand-dark); }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--color-secondary); margin-top: 12px; }
.legend span, .legend label { display: inline-flex; align-items: center; gap: 6px; }
.legend label { cursor: pointer; }
.legend i { width: 11px; height: 11px; border-radius: 3px; display: inline-block;
  background: var(--cat-color, var(--brand-accent)); }

.event-row { display: flex; gap: 14px; align-items: flex-start; }
/* The kind of entry is read from the date block, which takes its colour, so a
   glance down the list separates a tutorial from a deadline without reading. */
.event-date { flex: 0 0 54px; text-align: center; border-radius: var(--radius-sm);
  border: 1px solid var(--cat-color, var(--color-border));
  border-left: 4px solid var(--cat-color, var(--color-border));
  background: var(--cat-soft, var(--color-surface-2)); padding: 5px 0; }
.event-date .d { font-family: var(--font-head); font-size: 21px; font-weight: 700; line-height: 1; }
.event-date .m { font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--color-secondary); }
.event-kind { color: var(--cat-color, var(--color-secondary)); font-weight: 600; }

/* --- Tables ------------------------------------------------------------- */

.table-wrap { overflow-x: auto; }
table.grid { width: 100%; border-collapse: collapse; background: var(--color-surface); font-size: 14px; }
table.grid th, table.grid td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
table.grid th { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--color-secondary); white-space: nowrap; }
table.grid tbody tr:hover { background: var(--color-surface-2); }
table.grid td.actions { white-space: nowrap; text-align: right; }
table.grid td.actions form { display: inline; }

/* --- Directory and grids ------------------------------------------------ */

/* Equal rows, so a card holding a long name does not make its whole row taller
   than the rows around it. */
.member-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px; grid-auto-rows: 1fr; }
.member-card { display: flex; gap: 11px; align-items: flex-start; padding: 13px; }
.member-card .who strong { display: block; font-size: 15px; line-height: 1.25; }
/* Two lines of what a member wrote about themselves, so a card stays a card. */
.member-card .blurb { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; margin-top: 4px; line-height: 1.4; }

/* auto-fill rather than auto-fit. auto-fit collapses the tracks it does not
   fill, so two grids on one page with different numbers of tiles end up with
   tiles of different widths and columns that do not line up. auto-fill keeps
   the empty tracks, so every grid on the page shares one column rhythm. */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.stat { padding: 15px 17px; }
/* The report cards carry a paragraph each, so they need a wider track than the
   counters do. */
/* Every row the same height as the tallest, so a card left alone on the last
   row is not shorter than the ones above it. */
.report-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); grid-auto-rows: 1fr; }
.stat .num { font-family: var(--font-head); font-size: 30px; font-weight: 700; line-height: 1.1; }
/* Two lines are reserved whether the label needs them or not, so a tile whose
   label wraps is not taller than the one beside it. */
/* Two lines of label are reserved whether a label needs them or not, so a tile
   whose label wraps is the same height as the one beside it. The body line
   height is 1.6, so two lines is 3.2em. */
.stat .lbl { font-size: 13px; color: var(--color-secondary); min-height: 3.2em; }

/* The category list beside the news, with the one being read marked. */
.active-category { font-weight: 700; color: var(--brand-dark); }
.news-item .tag { margin-left: 6px; }

.news-item { display: flex; gap: 13px; align-items: flex-start; }
.news-item .thumb { flex: 0 0 84px; height: 62px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--color-border); }
.news-item h3 { font-size: 16px; margin: 0 0 3px; }
.news-item p { margin: 0; font-size: 14px; color: var(--color-secondary); }

/* Folders drawn as the tree they form. The indent and the rule down the left
   are what make a folder inside another read as inside it. */
.folder-tree, .folder-children { list-style: none; margin: 0; padding: 0; }
.folder-children { margin: 4px 0 0 10px; padding-left: 16px; border-left: 1px solid var(--color-border); }
.folder-node { padding: 4px 0; }
.folder-line { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.folder-mark { color: var(--color-secondary); font-size: 11px; width: 10px; }
.folder-note { margin: 0 0 0 18px; }
.folder-documents { margin: 2px 0 6px 18px; border-left: none; }
.folder-documents > li { padding: 7px 0; border-bottom: none; }
.folder-documents > li:hover { background: none; }

.breadcrumb .sep { color: var(--color-secondary); margin: 0 6px; }
.breadcrumb .here { color: var(--color-secondary); }

.doc-row { display: flex; gap: 13px; align-items: center; }
.doc-ext { flex: 0 0 44px; height: 44px; border-radius: var(--radius-sm); background: var(--color-surface-2);
  border: 1px solid var(--color-border); display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: var(--color-secondary); letter-spacing: .03em; }

/* --- Chat --------------------------------------------------------------- */

.thread { display: flex; flex-direction: column; gap: 9px; padding: 18px; max-height: 62vh; overflow-y: auto; }
.bubble { max-width: 74%; padding: 9px 13px; border-radius: 15px; font-size: 15px;
  white-space: pre-wrap; word-wrap: break-word; }
.bubble.them { align-self: flex-start; background: var(--color-surface-2); border: 1px solid var(--color-border);
  border-bottom-left-radius: 4px; }
.bubble.me { align-self: flex-end; background: var(--mipe); color: #fff; border-bottom-right-radius: 4px; }
.bubble .when { display: flex; align-items: center; gap: 6px; font-size: 11px; opacity: .7; margin-top: 3px; }
.bubble-remove {
  margin-left: auto; color: inherit; text-decoration: none; font-size: 13px;
  line-height: 1; padding: 0 2px; opacity: 0; transition: opacity .12s ease;
}
.bubble:hover .bubble-remove, .bubble-remove:focus-visible { opacity: .85; }
.bubble-remove:hover { opacity: 1; color: inherit; }
.chat-form { display: flex; gap: 9px; padding: 13px 18px; border-top: 1px solid var(--color-border); align-items: flex-end; }
.chat-form textarea { flex: 1; }

/* --- Sign-in ------------------------------------------------------------ */

.auth { max-width: 420px; margin: 7vh auto 40px; }
.auth .brand { justify-content: center; margin-bottom: 20px; }
.auth .card-body { padding: 26px; }
.auth h1 { font-size: 25px; text-align: center; }
.auth .lead { text-align: center; color: var(--color-secondary); margin: 0 0 20px; font-size: 15px; }
.auth .foot { text-align: center; margin-top: 16px; font-size: 14px; }

/* --- Pagination and footer --------------------------------------------- */

.pagination { display: flex; gap: 9px; align-items: center; justify-content: center; margin: 24px 0; font-size: 14px; }
.empty { text-align: center; padding: 34px 18px; color: var(--color-secondary); }
.empty .big { font-size: 30px; opacity: .35; display: block; margin-bottom: 8px; }

.site-footer { border-top: 1px solid var(--color-border); background: var(--color-surface); margin-top: 40px; }
.site-footer .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  padding: 20px; font-size: 13px; color: var(--color-secondary); }
.langbar { display: inline-flex; gap: 2px; }
.langbar form { display: inline; }
.langbar button { background: none; border: none; cursor: pointer; color: var(--color-secondary);
  font: inherit; font-size: 13px; padding: 2px 6px; border-radius: 4px; }
.langbar button.active { color: var(--brand-dark); font-weight: 700; }
.langbar button:hover { background: var(--color-surface-2); }

/* --- Management area ---------------------------------------------------- */

.bo-bar { background: var(--brand-ink); color: #fff; }
.bo-bar .wrap { display: flex; gap: 16px; align-items: center; padding: 10px 20px; flex-wrap: wrap; font-size: 14px; }
.bo-bar a { color: #fff; opacity: .82; }
.bo-bar a:hover, .bo-bar a.active { color: #fff; opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.bo-bar .spacer { flex: 1; }
.bo-bar .title { font-family: var(--font-head); font-weight: 700; opacity: 1; }
.page-head { display: flex; align-items: center; gap: 12px; margin: 22px 0 16px; flex-wrap: wrap; }
.page-head h1 { margin: 0; font-size: 27px; }
.page-head .spacer { flex: 1; }

.report-row.created { background: var(--ok-soft); }
.report-row.updated { background: var(--warn-soft); }
.report-row.error { background: var(--bad-soft); }

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 1080px) {
  .layout.with-aside { grid-template-columns: var(--rail) minmax(0, 1fr); }
  .layout.with-aside .aside { display: none; }
}
@media (max-width: 820px) {
  .layout, .layout.with-aside { grid-template-columns: minmax(0, 1fr); }
  .rail { position: static; }
  .rail nav { flex-direction: row; overflow-x: auto; gap: 4px; padding-bottom: 4px; }
  .rail a { white-space: nowrap; background: var(--color-surface); }
  .rail .rail-title { display: none; }
  .form-grid { grid-template-columns: 1fr; }
  .calendar td { height: 74px; font-size: 12px; }
  .calendar .ev { font-size: 10px; }
  body { font-size: 15px; }
}
@media print {
  .topbar, .rail, .aside, .site-footer, .post-actions, .btn { display: none; }
  body { background: #fff; }
}