/* The home page: its widgets and how they are arranged. */
/* ---------- home page widgets ---------- */
/* Four columns, and each widget says how many it takes (a quarter, a half, three quarters, all of it).
   Below 900px there is room for two, and on a phone for one. */
.widgets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.widget { margin-bottom: 0; min-width: 0; }
.widget.w1 { grid-column: span 1; } .widget.w2 { grid-column: span 2; }
.widget.w3 { grid-column: span 3; } .widget.w4 { grid-column: span 4; }
.widget.large { grid-column: 1 / -1; }   /* kept for a configuration saved before the widths existed */
.widget .actions4 { margin-bottom: 0; }
.widget-pick label { align-items: flex-start; cursor: pointer; }
.widget-pick input { margin-top: .25rem; }

/* Arranging the home: one row per widget, dragged by its handle or moved with the arrows (no finger can
   drag). The row carries its own width selector. */
.wconf-row { display: flex; align-items: center; gap: .5rem; padding: .4rem .5rem; border: 1px solid var(--line); background: var(--surface); margin-bottom: .3rem; }
.wconf-row.over { border-color: var(--accent); background: var(--accent-soft); }
.wconf-row.dragging { opacity: .45; }
.wconf-grip { cursor: grab; user-select: none; color: var(--muted); padding: 0 .2rem; }
.wconf-row select { min-width: 7.5rem; }
.wconf-add { display: flex; flex-wrap: wrap; gap: .4rem; }


/* A task of the home page: its box and its title stay on one line, however long the title. */
.widget .line > label.row { flex-wrap: nowrap; align-items: baseline; }
.widget .line > label.row input[type=checkbox] { flex: none; }

/* ---- « Accès rapides »: the links the person keeps on their home page ---- */
.acces { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .5rem; }
.acces-lien { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .6rem;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); text-decoration: none; max-width: 100%; }
.acces-lien:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.acces-emo { font-size: 1.05rem; line-height: 1; flex: none; }
.acces-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acces-edit { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .6rem; }
.acces-row { display: flex; gap: .35rem; align-items: center; }
.acces-row input[type=text]:nth-of-type(2) { flex: 1 1 10rem; min-width: 0; }
.acces-row input[type=text]:nth-of-type(3) { flex: 2 1 14rem; min-width: 0; }
@media (max-width: 700px) { .acces-row { flex-wrap: wrap; } }